demo/preview.sgl — sigil-web-styles

1;;; Demo/preview page showing all sigil-web-styles components.

2;;;

3;;; Run with: sigil -L build/dev/lib eval -f demo/preview.sgl

5(import (sigil core)

6 (sigil io)

7 (sigil web styles))

9(define css (theme-stylesheet))

11(define html-1 (string-append

12 "<!DOCTYPE html><html><head>"

13 "<meta charset='utf-8'>"

14 "<meta name='viewport' content='width=device-width, initial-scale=1'>"

15 "<title>sigil-web-styles Preview</title>"

16 "<style>" css "</style>"

17 "</head><body>"

18 "<header class='header'>"

19 "<a href='/' class='header-logo'>sigil-web-styles</a>"

20 "<nav class='header-nav'><a href='#'>Dashboard</a></nav>"

21 "</header>"

22 "<main class='main'>"

23 "<h1 class='page-title'>Component Preview</h1>"))

25(define html-2 (string-append

26 "<section style='margin-bottom:2rem'><h2>Typography</h2>"

27 "<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3>"

28 "<p>Body text with <a href='#'>a link</a> and <code>inline code</code>.</p>"

29 "<small>Small text</small>"

30 "<p class='text-caption'>Caption text</p>"

31 "<p class='mono'>Monospace text</p></section>"

32 "<section style='margin-bottom:2rem'><h2>Buttons</h2>"

33 "<a class='btn btn-primary' href='#'>Primary</a> "

34 "<a class='btn btn-secondary' href='#'>Secondary</a></section>"

35 "<section style='margin-bottom:2rem'><h2>Badges & Status</h2>"

36 "<p><span class='status status-up'>up</span> "

37 "<span class='status status-down'>down</span> "

38 "<span class='status status-degraded'>degraded</span> "

39 "<span class='status status-passed'>passed</span> "

40 "<span class='status status-failed'>failed</span> "

41 "<span class='status status-running'>running</span> "

42 "<span class='status status-pending'>pending</span></p>"

43 "<p style='margin-top:1rem'>Dots: "

44 "<span class='status-dot dot-up'></span> "

45 "<span class='status-dot dot-down'></span> "

46 "<span class='status-dot dot-degraded'></span> "

47 "<span class='status-dot'></span></p>"

48 "<p style='margin-top:1rem'>"

49 "<span class='status-badge status-up'>UP</span> "

50 "<span class='status-badge status-down'>DOWN</span> "

51 "<span class='status-badge status-degraded'>DEGRADED</span></p>"

52 "</section>"))

54(define html-3 (string-append

55 "<section style='margin-bottom:2rem'><h2>Cards</h2>"

56 "<div class='grid'>"

57 "<div class='card card-accent accent-success'>"

58 "<div style='font-weight:600'>Service A</div>"

59 "<div style='color:var(--color-text-muted)'><span class='status-dot dot-up'></span> up</div>"

60 "</div>"

61 "<div class='card card-accent accent-error'>"

62 "<div style='font-weight:600'>Service B</div>"

63 "<div style='color:var(--color-text-muted)'><span class='status-dot dot-down'></span> down</div>"

64 "</div>"

65 "<div class='card card-accent accent-warning'>"

66 "<div style='font-weight:600'>Service C</div>"

67 "<div style='color:var(--color-text-muted)'><span class='status-dot dot-degraded'></span> degraded</div>"

68 "</div></div></section>"

69 "<section style='margin-bottom:2rem'><h2>Status Panel</h2>"

70 "<div class='status-panel'>"

71 "<span class='status-badge status-up'>UP</span>"

72 "<div class='status-details'>"

73 "<div>Uptime: 99.9%</div><div>Latency: 12ms</div>"

74 "</div></div></section>"))

76(define html-4 (string-append

77 "<section style='margin-bottom:2rem'><h2>Table</h2>"

78 "<table class='table'><thead>"

79 "<tr><th>Job</th><th>Branch</th><th>Status</th><th>Duration</th></tr>"

80 "</thead><tbody>"

81 "<tr><td>build-sigil</td><td>master</td>"

82 "<td><span class='status status-passed'>passed</span></td><td>2m 15s</td></tr>"

83 "<tr><td>test-web</td><td>master</td>"

84 "<td><span class='status status-failed'>failed</span></td><td>1m 42s</td></tr>"

85 "<tr><td>deploy</td><td>master</td>"

86 "<td><span class='status status-running'>running</span></td><td>running...</td></tr>"

87 "</tbody></table></section>"

88 "<section style='margin-bottom:2rem'><h2>Form Inputs</h2>"

89 "<div style='max-width:400px'>"

90 "<label>Text Input</label>"

91 "<input type='text' placeholder='Enter value...' style='width:100%;margin-bottom:1rem'>"

92 "<label>Textarea</label>"

93 "<textarea rows='3' style='width:100%' placeholder='Enter text...'></textarea>"

94 "</div></section>"))

96(define html-5 (string-append

97 "<section style='margin-bottom:2rem'><h2>Log Viewer</h2>"

98 "<div class='log-viewer'>"

99 "<div class='log-line'><span class='log-seq'>1</span>"

100 "<span class='a-green'>==></span> Building...</div>"

101 "<div class='log-line'><span class='log-seq'>2</span>"

102 " <span class='a-cyan'>COMPILE</span> palette.sgl</div>"

103 "<div class='log-line'><span class='log-seq'>3</span>"

104 " <span class='a-cyan'>COMPILE</span> components.sgl</div>"

105 "<div class='log-line log-line-stderr'><span class='log-seq'>4</span>"

106 "<span class='a-red'>ERROR:</span> something went wrong</div>"

107 "<div class='log-line'><span class='log-seq'>5</span>"

108 "<span class='a-green'>Build complete!</span></div>"

109 "</div></section>"

110 "</main>"

111 "<footer class='footer'>"

112 "Crafted with <a href='https://usesigil.org'>Sigil</a>"

113 "</footer></body></html>"))

114

115(let ((port (open-output-file "demo/preview.html")))

116 (display html-1 port)

117 (display html-2 port)

118 (display html-3 port)

119 (display html-4 port)

120 (display html-5 port)

121 (close-port port))

122

123(display "Preview written to demo/preview.html\n")