Skip to content

Commit f06dca1

Browse files
erikbdeverikbdev
committed
wip: show code selector to change page language
1 parent d6b9d73 commit f06dca1

File tree

6 files changed

+80
-59
lines changed

6 files changed

+80
-59
lines changed

‎Package.resolved‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Package.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ let package = Package(
99
],
1010
dependencies: [
1111
.package(url: "https://github.com/apple/swift-argument-parser.git", from: "1.4.0"),
12-
.package(url: "https://github.com/erikbdev/swift-web.git", exact: "0.0.11"),
12+
.package(url: "https://github.com/erikbdev/swift-web.git", exact: "0.0.13"),
1313
.package(url: "https://github.com/hummingbird-project/hummingbird.git", exact: "2.5.0"),
1414
.package(url: "https://github.com/pointfreeco/swift-case-paths.git", from: "1.0.0"),
1515
.package(url: "https://github.com/pointfreeco/swift-url-routing.git", from: "0.6.2"),

‎Sources/Pages/Components/HeaderView.swift‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import HTML
21
import Dependencies
32
import EnvVars
3+
import HTML
44
import Vue
55

66
struct HeaderView: HTML {
@@ -18,7 +18,7 @@ struct HeaderView: HTML {
1818
.inlineStyle("text-decoration", "none")
1919
// TODO: Add buttons to allow switching between code styling or plain text
2020

21-
CodeSelector()
21+
CodeSelector()
2222
}
2323
.containerStyling()
2424
.inlineStyle("display", "flex")
@@ -36,23 +36,39 @@ private struct CodeSelector: VueComponent {
3636

3737
var body: some HTML {
3838
div {
39-
button(.v.on(.click, Expression(rawValue: "\($visible.name) = \(!$visible)"))) {
39+
button(.v.on(.click, Expression(rawValue: "\($visible) = \(!$visible)"))) {
4040
code { "</>" }
41-
.inlineStyle("color", "#AAA")
4241
}
4342
.inlineStyle("font-weight", "bold")
4443
.inlineStyle("font-size", "0.7em")
4544
.inlineStyle("background", "unset")
4645
.inlineStyle("border", "1.16px solid #444")
4746
.inlineStyle("border-radius", "0.3rem")
4847
.inlineStyle("padding", "0.28rem 0.4rem")
48+
.inlineStyle("color", "#AAA")
4949

5050
ul(.v.show($visible)) {
51-
li { "Plain Text" }
52-
li { "Swift" }
53-
li { "Rust" }
54-
li { "TypeScript" }
51+
for code in CodeLang.allCases {
52+
li {
53+
button(.v.on(.click, Expression(rawValue: "\($visible) = null"))) {
54+
code.title
55+
}
56+
.inlineStyle("all", "unset")
57+
.inlineStyle("display", "inline-block")
58+
.inlineStyle("width", "100%")
59+
.inlineStyle("padding", "0.5rem")
60+
.inlineStyle("cursor", "pointer")
61+
}
62+
}
5563
}
64+
.inlineStyle("position", "absolute")
65+
.inlineStyle("right", "0")
66+
.inlineStyle("list-style", "none")
67+
.inlineStyle("padding", "0")
68+
.inlineStyle("margin-top", "0.25rem")
69+
.inlineStyle("background", "#383838")
70+
.inlineStyle("border-radius", "0.75rem")
5671
}
72+
.inlineStyle("position", "relative")
5773
}
58-
}
74+
}

‎Sources/Pages/Components/Page.swift‎

Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -31,48 +31,48 @@ extension Page {
3131
tag("title") { document.title }
3232
meta(.name("viewport"), .content("width=device-width, initial-scale=1.0"))
3333
style {
34-
HTMLRaw(
35-
"/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::after,::before{box-sizing:border-box}html{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}"
36-
)
34+
"/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::after,::before{box-sizing:border-box}html{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}"
3735
}
3836
style {
39-
HTMLRaw(
40-
"""
41-
@font-face {
42-
font-family: "CommitMono";
43-
src: url("https://raw.githubusercontent.com/eigilnikolajsen/commit-mono/ecd81cdbd7f7eb2acaaa2f2f7e1a585676f9beff/src/fonts/fontlab/CommitMonoV143-VF.woff2");
44-
font-style: normal;
45-
font-weight: 400;
46-
font-display: swap;
47-
}
48-
html {
49-
line-height: 1.5;
50-
}
51-
pre a {
52-
text-decoration: none;
53-
}
54-
h1, h2, h3, h4, h5, figure, p, ol, ul, pre {
55-
margin: 0;
56-
}
57-
ol[role="list"], ul[role="list"] {
58-
list-style: none;
59-
padding-inline: 0;
60-
}
61-
img, video {
62-
display: block;
63-
max-inline-size: 100%;
64-
}
65-
code {
66-
font-family: "CommitMono", monospace;
67-
font-feature-settings", "ss03", "ss04", "ss05";
68-
line-height: 1;
69-
}
70-
"""
71-
)
37+
"""
38+
@font-face {
39+
font-family: "CommitMono";
40+
src: url("https://raw.githubusercontent.com/eigilnikolajsen/commit-mono/ecd81cdbd7f7eb2acaaa2f2f7e1a585676f9beff/src/fonts/fontlab/CommitMonoV143-VF.woff2");
41+
font-style: normal;
42+
font-weight: 400;
43+
font-display: swap;
44+
}
45+
html {
46+
line-height: 1.5;
47+
}
48+
body {
49+
background-color: #1c1c1c;
50+
color: #fafafa;
51+
}
52+
pre a {
53+
text-decoration: none;
54+
}
55+
h1, h2, h3, h4, h5, figure, p, ol, ul, pre {
56+
margin: 0;
57+
}
58+
ol[role="list"], ul[role="list"] {
59+
list-style: none;
60+
padding-inline: 0;
61+
}
62+
img, video {
63+
display: block;
64+
max-inline-size: 100%;
65+
}
66+
code {
67+
font-family: "CommitMono", monospace;
68+
font-feature-settings: "ss03", "ss04", "ss05";
69+
line-height: 1;
70+
}
71+
"""
7272
}
7373
/// Xcode Styling
7474
style {
75-
HTMLRaw(".xml .hljs-meta{color:#6C7986}.hljs-comment,.hljs-quote{color:#6C7986}.hljs-tag,.hljs-attribute,.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-name{color:#FC5FA3}.hljs-variable,.hljs-template-variable{color:#FC5FA3}.hljs-code,.hljs-string,.hljs-meta-string{color:#FC6A5D}.hljs-regexp,.hljs-link{color:#5482FF}.hljs-title,.hljs-symbol,.hljs-bullet,.hljs-number{color:#41A1C0}.hljs-section,.hljs-meta{color:#FC5FA3}.hljs-class .hljs-title,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-params{color:#D0A8FF}.hljs-attr{color:#BF8555}.hljs-subst{color:#FFF}.hljs-formula{font-style:italic}.hljs-selector-id,.hljs-selector-class{color:#9b703f}.hljs-doctag,.hljs-strong{font-weight:bold}.hljs-emphasis{font-style:italic}")
75+
".xml .hljs-meta{color:#6C7986}.hljs-comment,.hljs-quote{color:#6C7986}.hljs-tag,.hljs-attribute,.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-name{color:#FC5FA3}.hljs-variable,.hljs-template-variable{color:#FC5FA3}.hljs-code,.hljs-string,.hljs-meta-string{color:#FC6A5D}.hljs-regexp,.hljs-link{color:#5482FF}.hljs-title,.hljs-symbol,.hljs-bullet,.hljs-number{color:#41A1C0}.hljs-section,.hljs-meta{color:#FC5FA3}.hljs-class .hljs-title,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-params{color:#D0A8FF}.hljs-attr{color:#BF8555}.hljs-subst{color:#FFF}.hljs-formula{font-style:italic}.hljs-selector-id,.hljs-selector-class{color:#9b703f}.hljs-doctag,.hljs-strong{font-weight:bold}.hljs-emphasis{font-style:italic}"
7676
}
7777
script(
7878
.src("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"),
@@ -96,14 +96,12 @@ extension Page {
9696
),
9797
.defer
9898
)
99-
script(.type(.module)) { HTMLRaw("hljs.highlightAll();") }
99+
script(.type(.module)) { "hljs.highlightAll();" }
100100

101101
document.head
102102
},
103103
body: {
104104
document.body
105-
.inlineStyle("background-color", "#1c1c1c")
106-
.inlineStyle("color", "#fafafa")
107105
.inlineStyle("font-optical-sizing", "auto")
108106
.inlineStyle("font-size", "0.7em")
109107
.inlineStyle("font-size", "0.8em", media: .minWidth(390))

‎Sources/Pages/Models/CodeLang.swift‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
enum CodeLang: String, CaseIterable {
2+
case swift
3+
case rust
4+
case typescript
5+
6+
var title: String {
7+
switch self {
8+
case .swift: "Swift"
9+
case .rust: "Rust"
10+
case .typescript: "TypeScript"
11+
}
12+
}
13+
}

‎Sources/Pages/Models/Post.swift‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,6 @@ struct Post: Sendable {
4040
case image(GeneratedPublicAssets.ImageFile, label: String)
4141
case video(GeneratedPublicAssets.VideoFile)
4242
case code(String, lang: CodeLang)
43-
44-
enum CodeLang: String {
45-
case swift
46-
case rust
47-
case javascript
48-
}
4943
}
5044

5145
struct Link {

0 commit comments

Comments
 (0)