Skip to content

Commit cb8cc77

Browse files
erikbdeverikbdev
committed
feat: improve markdown listing and NotFoundPage 
1 parent 00a7ab9 commit cb8cc77

File tree

3 files changed

+121
-62
lines changed

3 files changed

+121
-62
lines changed

‎Sources/Pages/Components/SectionView.swift

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ struct SectionView<Header: HTML, Content: HTML>: HTML {
1818
a(.href("#\(self.id)")) {
1919
CodeLang.conditionalCases(initial: selected) { lang in
2020
code {
21-
slugToFileName(lang)
21+
CodeLang.slugToFileName(self.id, lang: lang)
2222
}
2323
}
2424
}
@@ -34,8 +34,7 @@ struct SectionView<Header: HTML, Content: HTML>: HTML {
3434
pre {
3535
code(.class("hljs language-\(lang.rawValue)")) {
3636
"""
37-
// \(slugToFileName(lang))
38-
// Portfolio\n
37+
// \(CodeLang.slugToFileName(self.id, lang: lang))\n
3938
"""
4039
self.header(lang)
4140
}
@@ -57,13 +56,15 @@ struct SectionView<Header: HTML, Content: HTML>: HTML {
5756
}
5857
.wrappedStyling()
5958
}
59+
}
6060

61-
private func slugToFileName(_ lang: CodeLang?) -> String {
61+
extension CodeLang {
62+
static func slugToFileName(_ slug: String, lang: CodeLang?) -> String {
6263
let fileName =
6364
switch lang {
64-
case .none: self.id
65+
case .none: slug
6566
case .swift:
66-
self.id.components(separatedBy: "-")
67+
slug.components(separatedBy: "-")
6768
.map { component -> String in
6869
if let first = component.first {
6970
first.uppercased().appending(component.dropFirst())
@@ -72,9 +73,9 @@ struct SectionView<Header: HTML, Content: HTML>: HTML {
7273
}
7374
}
7475
.joined()
75-
case .rust: self.id
76+
case .rust: slug
7677
case .typescript:
77-
self.id.components(separatedBy: "-")
78+
slug.components(separatedBy: "-")
7879
.enumerated()
7980
.map { (idx, component) -> String in
8081
if idx == 0 {

‎Sources/Pages/HomePage.swift

Lines changed: 59 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -87,40 +87,55 @@ private struct UserView: HTML {
8787
};
8888
"""
8989
case .none:
90-
h1(.aria.label("Name")) { "Erik Bautista Santibanez" }
91-
p(.aria.label("Occupation")) { "Mobile & Web Developer" }
92-
.inlineStyle("color", "#e0e0e0")
93-
p(.aria.label("Residency")) {
94-
svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .aria.label("Map pin icon")) {
95-
path(
96-
.d("M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z")
97-
)
98-
}
99-
.svgIconStyling()
100-
.inlineStyle("margin-right", "0.25rem")
101-
102-
"\(residency ?? .default)"
90+
h1(.aria.label("Name")) {
91+
span { "#" }
92+
.inlineStyle("color", "#808080")
93+
.inlineStyle("font-weight", "700")
94+
" "
95+
"Erik Bautista Santibanez"
10396
}
104-
.inlineStyle("color", "#e0e0e0")
97+
.inlineStyle("margin-bottom", "0.25rem")
10598

106-
if let currentLocation {
107-
p(.aria.label("Current location")) {
108-
svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .aria.label("Navigation icon")) {
109-
path(.d("M234.35,129,152,152,129,234.35a8,8,0,0,1-15.21.27l-65.28-176A8,8,0,0,1,58.63,48.46l176,65.28A8,8,0,0,1,234.35,129Z"))
110-
path(.d("M237.33,106.21,61.41,41l-.16-.05A16,16,0,0,0,40.9,61.25a1,1,0,0,0,.05.16l65.26,175.92A15.77,15.77,0,0,0,121.28,248h.3a15.77,15.77,0,0,0,15-11.29l.06-.2,21.84-78,78-21.84.2-.06a16,16,0,0,0,.62-30.38ZM149.84,144.3a8,8,0,0,0-5.54,5.54L121.3,232l-.06-.17L56,56l175.82,65.22.16.06Z"))
99+
HTMLGroup {
100+
p(.aria.label("Occupation")) { "Mobile & Web Developer" }
101+
102+
p(.aria.label("Residency")) {
103+
svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .aria.label("Map pin icon")) {
104+
path(
105+
.d("M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z")
106+
)
111107
}
112-
.inlineStyle("scale", "calc(100% * -1) 100%")
113108
.svgIconStyling()
114109
.inlineStyle("margin-right", "0.25rem")
115110

116-
"Currently in "
117-
118-
em { currentLocation }
119-
.inlineStyle("font-weight", "600")
111+
"\(residency ?? .default)"
120112
}
121-
.inlineStyle("color", "#a0a0a0")
122113

114+
if let currentLocation {
115+
p(.aria.label("Current location")) {
116+
svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .aria.label("Navigation icon")) {
117+
path(.d("M234.35,129,152,152,129,234.35a8,8,0,0,1-15.21.27l-65.28-176A8,8,0,0,1,58.63,48.46l176,65.28A8,8,0,0,1,234.35,129Z"))
118+
path(.d("M237.33,106.21,61.41,41l-.16-.05A16,16,0,0,0,40.9,61.25a1,1,0,0,0,.05.16l65.26,175.92A15.77,15.77,0,0,0,121.28,248h.3a15.77,15.77,0,0,0,15-11.29l.06-.2,21.84-78,78-21.84.2-.06a16,16,0,0,0,.62-30.38ZM149.84,144.3a8,8,0,0,0-5.54,5.54L121.3,232l-.06-.17L56,56l175.82,65.22.16.06Z"))
119+
}
120+
.inlineStyle("scale", "calc(100% * -1) 100%")
121+
.svgIconStyling()
122+
.inlineStyle("margin-right", "0.25rem")
123+
124+
"Currently in "
125+
126+
span { "***" }
127+
.inlineStyle("color", "#808080")
128+
.inlineStyle("font-weight", "700")
129+
em { currentLocation }
130+
.inlineStyle("font-weight", "700")
131+
.inlineStyle("color", "#fafafa")
132+
span { "***" }
133+
.inlineStyle("color", "#808080")
134+
.inlineStyle("font-weight", "700")
135+
}
136+
}
123137
}
138+
.inlineStyle("color", "#d8d8d8")
124139
}
125140
} content: {
126141
// div {
@@ -135,25 +150,41 @@ private struct UserView: HTML {
135150

136151
private struct PostsView: HTML {
137152
let selected: Vue.Expression<CodeLang?>
153+
154+
static let description = "A curated list of projects I've worked on."
155+
138156
var body: some HTML {
139157
SectionView(id: "dev-logs", selected: selected) { lang in
140158
switch lang {
141159
case .swift:
142160
"""
161+
// \(Self.description)
143162
let logs: [DevLog] = await fetch(.all)
144163
"""
145164
case .typescript:
146165
"""
166+
// \(Self.description)
147167
const logs = await fetch(Filter.All);
148168
"""
149169
case .rust:
150170
"""
171+
// \(Self.description)
151172
let logs = fetch(Filter::All).await;
152173
"""
153174
case .none:
154-
h1 { "Dev Logs" }
155-
p { "A curated list of projects I've worked on." }
156-
.inlineStyle("color", "#e0e0e0")
175+
h1 {
176+
span { "#" }
177+
.inlineStyle("color", "#808080")
178+
.inlineStyle("font-weight", "700")
179+
" "
180+
"Dev Logs"
181+
}
182+
.inlineStyle("margin-bottom", "0.25rem")
183+
184+
HTMLGroup {
185+
p { Self.description }
186+
}
187+
.inlineStyle("color", "#d8d8d8")
157188
}
158189
} content: {
159190
for (num, post) in Post.allCases.enumerated().reversed() {

‎Sources/Pages/NotFoundPage.swift

Lines changed: 53 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -20,63 +20,90 @@ public struct NotFoundPage: Page {
2020
HeaderView(selected: codeLang)
2121
Spacer()
2222
main {
23+
InnerView(codeLang: codeLang)
24+
}
25+
Spacer()
26+
FooterView()
27+
}
28+
.inlineStyle("display", "flex")
29+
.inlineStyle("flex-direction", "column")
30+
.inlineStyle("height", "100%")
31+
}
32+
}
33+
34+
private struct InnerView: HTML {
35+
let codeLang: Expression<CodeLang?>
36+
37+
private static let notFoundDescription = "The asset or page does not exist."
38+
39+
var body: some HTML {
2340
section {
24-
div {
41+
CodeLang.conditionalCases(initial: codeLang) { lang in
2542
div {
2643
pre {
27-
code { "// 404 ERROR" }
28-
.inlineStyle("color", "#808080")
29-
.inlineStyle("margin-bottom", "0.125rem")
44+
a(.href("/not-found")) {
45+
code {
46+
CodeLang.slugToFileName("not-found", lang: lang)
47+
}
48+
}
49+
.inlineStyle("color", "#777")
3050
}
51+
.inlineStyle("font-size", "0.75em")
52+
.inlineStyle("font-weight", "500")
53+
.inlineStyle("text-align", "end")
54+
.inlineStyle("padding-bottom", "0.5rem")
3155

32-
h1 { "Page Not Found" }
33-
.inlineStyle("margin-bottom", "0.5rem")
34-
35-
CodeLang.conditionalCases(initial: codeLang) { lang in
56+
div {
3657
if let lang {
3758
pre {
3859
code {
3960
switch lang {
4061
case .swift:
4162
"""
42-
throw Error.pageNotFound
63+
// 404 ERROR
64+
// \(Self.notFoundDescription)
65+
throw Error.notFound
4366
"""
4467
case .rust:
4568
"""
46-
panic!("page not found");
69+
// 404 ERROR
70+
// \(Self.notFoundDescription)
71+
panic!("Not found");
4772
"""
4873
case .typescript:
4974
"""
50-
throw new Error("page not found");
75+
// 404 ERROR
76+
// \(Self.notFoundDescription)
77+
throw new Error("Not found");
5178
"""
5279
}
5380
}
5481
}
5582
} else {
56-
p { "The asset or page you are looking for does not exist" }
57-
.inlineStyle("max-width", "400px")
83+
h1 {
84+
span { "#" }
85+
.inlineStyle("color", "#808080")
86+
.inlineStyle("font-weight", "700")
87+
" "
88+
"Not Found"
89+
}
90+
.inlineStyle("margin-bottom", "0.125rem")
91+
92+
p { Self.notFoundDescription }
5893
.inlineStyle("color", "#d0d0d0")
5994
.inlineStyle("font-weight", "500")
6095
}
6196
}
97+
.inlineStyle("padding", "160px 32px")
98+
.inlineStyle("justify-self", "center")
6299
}
63100
}
64101
.containerStyling()
65-
.inlineStyle("display", "flex")
66-
.inlineStyle("flex-direction", "column")
67-
.inlineStyle("justify-content", "center")
68-
.inlineStyle("align-items", "center")
69-
.inlineStyle("padding", "160px 32px")
102+
.inlineStyle("width", "100%")
103+
.inlineStyle("padding", "1.5rem")
70104
.inlineStyle("background-image", "radial-gradient(#2A2A2A 1px, transparent 0)")
71105
.inlineStyle("background-size", "12px 12px")
72106
}
73107
.wrappedStyling()
74-
}
75-
Spacer()
76-
FooterView()
77-
}
78-
.inlineStyle("display", "flex")
79-
.inlineStyle("flex-direction", "column")
80-
.inlineStyle("height", "100%")
81108
}
82-
}
109+
}

0 commit comments

Comments
 (0)