Skip to content

Commit f220c5c

Browse files
erikbdeverikbdev
committed
wip: improve homepage layout, add better code syntax for hero
1 parent 8291d22 commit f220c5c

File tree

2 files changed

+123
-77
lines changed

2 files changed

+123
-77
lines changed

‎Sources/Pages/HomePage.swift

Lines changed: 119 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ import Elementary
55
import Foundation
66

77
public struct HomePage: Page {
8-
@Dependency(\.activityClient) private var activityClient
9-
108
public init() {}
119

1210
private static let copyrightDateFormatter = {
@@ -35,66 +33,10 @@ public struct HomePage: Page {
3533
VueScript()
3634
}
3735
body {
38-
header(.class("hero container"), .aria.label("About")) {
39-
p(.class("file-name")) { "User.swift" }
40-
hgroup(.class("container-content")) {
41-
// h1(.class("hero-title")) { "Erik Bautista Santibanez" }
42-
// p(.class("hero-subtitle")) { "Mobile & Web Developer" }
43-
// p { location }
44-
45-
pre {
46-
code(.data("highlighted", value: "yes"), .class("hljs language-swift")) {
47-
HTMLRaw(
48-
"""
49-
\(span(.class("hljs-type")) { "User" })(
50-
name: \(h1(.class("hero-title hljs-string")) { "\"Erik Bautista Santibanez\"" }),
51-
role: \(span(.class("hero-subtitle hljs-string")) { "\"Mobile & Web Developer\"" }),
52-
home: "\(span(.class("hero-location hljs-string")) { location })"
53-
)
54-
"""
55-
)
56-
}
57-
}
58-
}
59-
}
60-
main(.class("container"), .v.scope("{ selection: undefined }")) {
61-
header {
62-
p(.class("file-name")) { "Posts.swift" }
63-
hgroup(.class("container-content")) {
64-
h2 { "Posts" }
65-
ul(.class("post-tabs")) {
66-
for kind in Post.Kind?.allCases {
67-
let value = if let kind {
68-
"'\(kind.rawValue)'"
69-
} else {
70-
"undefined"
71-
}
72-
li {
73-
button(
74-
.class("post-tab"),
75-
.v.on(.click, "selection = \(value)"),
76-
.v.bind("aria-selected", "selection == \(value)"),
77-
.aria.selected(kind == nil)
78-
) {
79-
kind?.tabTitle ?? "All"
80-
}
81-
}
82-
}
83-
}
84-
}
85-
}
86-
section(.class("container-content")) {
87-
for post in Post.allCases {
88-
article(
89-
.class("post"),
90-
.v.show("!selection || selection == '\(post.kind.rawValue)'")
91-
) {
92-
header(.class("post-date")) { post.dateFormatted }
93-
h3(.class("post-title")) { post.title }
94-
div(.class("post-content")) { post.content }
95-
}
96-
}
97-
}
36+
// TODO: Add header to switch between posts and something else?
37+
main {
38+
UserHero()
39+
PostsSection()
9840
}
9941
footer(.aria.label("Credits"), .style("text-align: center;")) {
10042
p { "©\(Self.copyrightDateFormatter.string(from: Date.now)) Erik Bautista Santibanez" }
@@ -110,25 +52,77 @@ public struct HomePage: Page {
11052
}
11153
}
11254

113-
@HTMLBuilder
114-
var location: some HTML {
115-
let location = self.activityClient.location()
116-
let residency = location?.residency ?? .default
117-
118-
span(.class("hero-location")) {
119-
span(.aria.label("Residency")) {
120-
svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .class("svg-icon"), .aria.label("Map pin icon")) {
121-
path(
122-
.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")
123-
)
55+
private struct UserHero: HTML {
56+
@Dependency(\.activityClient) private var activityClient
57+
58+
var content: some HTML {
59+
section(.class("hero container"), .aria.label("About")) {
60+
p(.class("file-name")) { "User.swift" }
61+
hgroup(.class("container-content")) {
62+
// h1(.class("hero-title")) { "Erik Bautista Santibanez" }
63+
// p(.class("hero-subtitle")) { "Mobile & Web Developer" }
64+
// p { location }
65+
66+
pre {
67+
code(.data("highlighted", value: "yes"), .class("hljs language-swift")) {
68+
span(.class("hljs-comment")) { "/// User.swift\n" }
69+
span(.class("hljs-comment")) { "/// Portfolio\n" }
70+
span(.class("hljs-comment")) { "/// \n" }
71+
span(.class("hljs-keyword")) { "struct" }
72+
" "
73+
span(.class("hljs-title class_")) { "User" }
74+
": "
75+
span(.class("hljs-title class_")) { "Portfolio" }
76+
" {\n"
77+
span(.class("hljs-keyword")) { HTMLRaw("  var") }
78+
" body: "
79+
span(.class("hljs-keyword")) { "some" }
80+
" "
81+
span(.class("hljs-type")) { "Description" }
82+
" { \n"
83+
span(.class("hljs-type")) { HTMLRaw("    Name") }
84+
"("
85+
span(.class("hero-title hljs-string")) { "\"Erik Bautista Santibanez\"" }
86+
")\n"
87+
span(.class("hljs-type")) { HTMLRaw("    Role") }
88+
"("
89+
span(.class("hero-subtitle hljs-string")) { "\"Mobile & Web Developer\"" }
90+
")\n"
91+
span(.class("hljs-type")) { HTMLRaw("    Home") }
92+
"("
93+
span(.class("hero-location hljs-string")) { "\""; self.residency; "\"" }
94+
")\n"
95+
location
96+
HTMLRaw("  }\n")
97+
"}"
98+
}
99+
}
124100
}
125-
"\(residency)"
126101
}
102+
}
127103

128-
if let location, location.city != residency.city || location.state != residency.state {
129-
" \u{2022} "
104+
@HTMLBuilder
105+
var residency: some HTML {
106+
let location = self.activityClient.location()
107+
let residency = location?.residency ?? .default
108+
109+
svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .class("svg-icon"), .aria.label("Map pin icon")) {
110+
path(
111+
.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")
112+
)
113+
}
114+
"\(residency)"
115+
}
116+
117+
@HTMLBuilder
118+
var location: some HTML {
119+
let location = self.activityClient.location()
120+
let residency = location?.residency ?? .default
130121

131-
span(.aria.label("Location")) {
122+
if let location, location.city != residency.city || location.state != residency.state {
123+
span(.class("hljs-type")) { HTMLRaw("    Location") }
124+
"(\""
125+
span(.class("hero-location"), .aria.label("Location")) {
132126
svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .class("svg-icon reversed"), .aria.label("Navigation icon")) {
133127
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"))
134128
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"))
@@ -142,6 +136,54 @@ public struct HomePage: Page {
142136
.joined(separator: ", ")
143137
}
144138
}
139+
"\")\n"
140+
} else {
141+
EmptyHTML()
142+
}
143+
}
144+
}
145+
146+
private struct PostsSection: HTML {
147+
var content: some HTML {
148+
section(.class("container"), .v.scope("{ selection: undefined }")) {
149+
header {
150+
p(.class("file-name")) { "Posts.swift" }
151+
hgroup(.class("container-content")) {
152+
h2 { "Posts" }
153+
ul(.class("post-tabs")) {
154+
for kind in Post.Kind?.allCases {
155+
let value = if let kind {
156+
"'\(kind.rawValue)'"
157+
} else {
158+
"undefined"
159+
}
160+
li {
161+
button(
162+
.class("post-tab"),
163+
.v.on(.click, "selection = \(value)"),
164+
.v.bind("aria-selected", "selection == \(value)"),
165+
.aria.selected(kind == nil)
166+
) {
167+
kind?.tabTitle ?? "All"
168+
}
169+
}
170+
}
171+
}
172+
}
173+
}
174+
175+
section(.class("container-content")) {
176+
for post in Post.allCases {
177+
article(
178+
.class("post"),
179+
.v.show("!selection || selection == '\(post.kind.rawValue)'")
180+
) {
181+
header(.class("post-date")) { post.dateFormatted }
182+
h3(.class("post-title")) { post.title }
183+
section(.class("post-content")) { post.content }
184+
}
185+
}
186+
}
145187
}
146188
}
147189
}

‎Sources/Pages/Utils/Elementary+Markdown.swift

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -293,6 +293,10 @@ struct HTMLMarkdown: HTML, ExpressibleByStringLiteral {
293293
self.content = converter.visit(Document(parsing: markdown))
294294
}
295295

296+
init(_ markdown: () -> String) {
297+
self.init(markdown())
298+
}
299+
296300
init(stringLiteral value: StringLiteralType) {
297301
self.init(value)
298302
}

0 commit comments

Comments
 (0)