Skip to content

Commit 8291d22

Browse files
erikbdeverikbdev
committed
wip: styling website
1 parent 6dade4e commit 8291d22

File tree

2 files changed

+108
-70
lines changed

2 files changed

+108
-70
lines changed

‎Sources/Pages/HomePage.swift

Lines changed: 100 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -21,63 +21,46 @@ public struct HomePage: Page {
2121

2222
public var content: some HTML {
2323
HTMLRaw("<!DOCTYPE html>")
24-
html(.lang("en"), .custom(name: "data-theme", value: "dark")) {
24+
html(.lang("en"), .data("theme", value: "dark")) {
2525
head {
2626
title { "Erik Bautista Santibanez" }
2727
meta(.charset(.utf8))
2828
meta(name: .viewport, content: "width=device-width, initial-scale=1.0")
2929
link(.rel(.stylesheet), .href("https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/3.0.1/modern-normalize.min.css"))
30+
style { 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}") }
3031
style(self.styling)
3132
script(.src("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"))
3233
script(.src("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/swift.min.js"))
3334
script { HTMLRaw("hljs.highlightAll();") }
3435
VueScript()
3536
}
3637
body {
37-
header(.class("hero"), .aria.label("About")) {
38-
hgroup {
39-
p(.class("file-name")) { "User.swift" }
40-
h1(.class("hero-title")) { "Erik Bautista Santibanez" }
41-
p(.class("hero-subtitle")) { "Swift & Web Developer" }
42-
43-
let location = self.activityClient.location()
44-
let residency = location?.residency ?? .default
45-
46-
p(.class("hero-location")) {
47-
span(.aria.label("Residency")) {
48-
svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .class("svg-icon"), .aria.label("Map pin icon")) {
49-
path(
50-
.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")
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 })"
5153
)
52-
}
53-
"\(residency)"
54-
}
55-
56-
if let location, location.city != residency.city || location.state != residency.state {
57-
" \u{2022} "
58-
59-
span(.aria.label("Location")) {
60-
svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .class("svg-icon reversed"), .aria.label("Navigation icon")) {
61-
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"))
62-
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"))
63-
}
64-
65-
"Currently in "
66-
67-
b {
68-
[location.city, location.state, location.region == "United States" ? nil : location.region]
69-
.compactMap(\.self)
70-
.joined(separator: ", ")
71-
}
72-
}
54+
"""
55+
)
7356
}
7457
}
7558
}
7659
}
77-
main(.v.scope("{ selection: undefined }")) {
60+
main(.class("container"), .v.scope("{ selection: undefined }")) {
7861
header {
7962
p(.class("file-name")) { "Posts.swift" }
80-
hgroup {
63+
hgroup(.class("container-content")) {
8164
h2 { "Posts" }
8265
ul(.class("post-tabs")) {
8366
for kind in Post.Kind?.allCases {
@@ -100,7 +83,7 @@ public struct HomePage: Page {
10083
}
10184
}
10285
}
103-
section {
86+
section(.class("container-content")) {
10487
for post in Post.allCases {
10588
article(
10689
.class("post"),
@@ -113,8 +96,7 @@ public struct HomePage: Page {
11396
}
11497
}
11598
}
116-
footer(.aria.label("Credits")) {
117-
hr()
99+
footer(.aria.label("Credits"), .style("text-align: center;")) {
118100
p { "©\(Self.copyrightDateFormatter.string(from: Date.now)) Erik Bautista Santibanez" }
119101
p {
120102
"Made with \u{2764} using "
@@ -127,19 +109,56 @@ public struct HomePage: Page {
127109
}
128110
}
129111
}
112+
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+
)
124+
}
125+
"\(residency)"
126+
}
127+
128+
if let location, location.city != residency.city || location.state != residency.state {
129+
" \u{2022} "
130+
131+
span(.aria.label("Location")) {
132+
svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .class("svg-icon reversed"), .aria.label("Navigation icon")) {
133+
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"))
134+
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"))
135+
}
136+
137+
"Currently in "
138+
139+
b {
140+
[location.city, location.state, location.region == "United States" ? nil : location.region]
141+
.compactMap(\.self)
142+
.joined(separator: ", ")
143+
}
144+
}
145+
}
146+
}
147+
}
130148
}
131149

132150
extension HomePage {
133151
struct Style: @unchecked Sendable, StyleSheet {
134152
var body: some Rule {
135-
resetStyles()
136-
generalStyles()
137-
heroStyles()
138-
postTabsStyles()
139-
postStyles()
153+
self.resetStyles()
154+
self.generalStyles()
155+
self.heroStyles()
156+
self.postTabsStyles()
157+
self.postStyles()
140158
}
141159

142-
/// MARK: - Reset components
160+
// MARK: - Reset components
161+
143162
@CSSBuilder func resetStyles() -> some Rule {
144163
Pseudo(class: .root) => {
145164
AnyProperty("line-height", "1.5")
@@ -163,7 +182,7 @@ extension HomePage {
163182
@CSSBuilder func generalStyles() -> some Rule {
164183
// TODO: Add Work-Sans font?
165184

166-
/// MARK: - General
185+
// MARK: - General
167186

168187
"@font-face" => {
169188
AnyProperty("font-family", "\"CommitMono\"")
@@ -181,22 +200,37 @@ extension HomePage {
181200
}
182201

183202
Element(.body) => {
184-
// AnyProperty("border-top", "1px solid #404040")
185-
// AnyProperty("border-bottom", "1px solid #404040")
186-
AnyProperty("margin-top", "2rem")
187-
AnyProperty("margin-bottom", "3rem")
203+
// AnyProperty("margin-top", "2rem")
204+
// AnyProperty("margin-bottom", "3rem")
188205
}
189206

190207
Element(.body) > All() => {
191-
// AnyProperty("border-left", "1px solid #404040")
192-
// AnyProperty("border-right", "1px solid #404040")
193208
AnyProperty("max-width", "40rem")
194209
AnyProperty("margin-right", "auto")
195210
AnyProperty("margin-left", "auto")
211+
}
212+
213+
Class("container") => {
214+
AnyProperty("border-top", "1px solid #303030")
215+
AnyProperty("border-left", "1px solid #303030")
216+
AnyProperty("border-right", "1px solid #303030")
217+
}
218+
219+
Class("container-content") => {
220+
// AnyProperty("padding-top", "1.25rem")
196221
AnyProperty("padding-left", "1.5rem")
197222
AnyProperty("padding-right", "1.5rem")
198223
}
199224

225+
Class("file-name") => {
226+
Color("#777")
227+
AnyProperty("text-align", "end")
228+
AnyProperty("font-size", "0.85em")
229+
AnyProperty("font-weight", "600")
230+
AnyProperty("font-family", "\"CommitMono\", monospace")
231+
AnyProperty("padding", "0.5rem 1.5rem 0.5rem 1.5rem")
232+
}
233+
200234
Class("svg-icon") => {
201235
Display(.inlineBlock)
202236
AnyProperty("vertical-align", "middle")
@@ -211,32 +245,29 @@ extension HomePage {
211245
AnyProperty("scale", "calc(100% * -1) 100%")
212246
}
213247

214-
Class("file-name") => {
215-
Color("#777")
216-
AnyProperty("text-align", "end")
217-
AnyProperty("font-size", "0.85em")
218-
AnyProperty("font-weight", "600")
219-
AnyProperty("font-family", "\"CommitMono\", monospace")
220-
}
221-
222-
Element(.pre) => {
248+
Element(.code) => {
223249
AnyProperty("font-family", "\"CommitMono\", monospace")
224250
}
225251
}
226252

227253
@CSSBuilder func heroStyles() -> some Rule {
228-
/// MARK: - Hero header
254+
// MARK: - Hero header
229255

230256
Class("hero") => {
231257
AnyProperty("padding-bottom", "1.5rem")
232258
}
233259

260+
Class("hero-title") => {
261+
AnyProperty("all", "revert")
262+
AnyProperty("display", "inline")
263+
}
264+
234265
Class("hero-location") => {
235266
Color(.hex("#D0D0D0"))
236267
}
237268
}
238269

239-
@CSSBuilder func postTabsStyles() -> some Rule {
270+
@CSSBuilder func postTabsStyles() -> some Rule {
240271
Class("post-tabs") => {
241272
AnyProperty("list-style-type", "none")
242273
AnyProperty("margin", "0")
@@ -267,7 +298,7 @@ extension HomePage {
267298
}
268299

269300
@CSSBuilder func postStyles() -> some Rule {
270-
/// MARK: - Posts
301+
// MARK: - Posts
271302

272303
Class("post") => {
273304
AnyProperty("margin-top", "0.75rem")
@@ -290,15 +321,15 @@ extension HomePage {
290321
}
291322

292323
Class("post") * Element(.pre) => {
293-
AnyProperty("padding", "1rem")
324+
AnyProperty("padding", "0.75rem")
294325
Background("#242424")
295326
AnyProperty("border-color", "#3A3A3A")
296327
AnyProperty("border-style", "solid")
297328
AnyProperty("border-width", "1.5px")
298-
AnyProperty("border-radius", "0.75rem")
329+
AnyProperty("border-radius", "0.5rem")
299330
AnyProperty("overflow-x", "auto")
300331
AnyProperty("font-size", "0.85em")
301332
}
302333
}
303334
}
304-
}
335+
}

‎Sources/Pages/Utils/Elementary+.swift

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Elementary
22
import Hummingbird
3+
import Foundation
34

45
extension HTMLElement where Content == EmptyHTML {
56
init(_ attributes: HTMLAttribute<Tag>...) {
@@ -15,4 +16,10 @@ extension meta {
1516
init(name: HTMLAttribute<Tag>.Name, content: String) {
1617
self.init(.name(name), .content(content))
1718
}
18-
}
19+
}
20+
21+
extension String.StringInterpolation {
22+
mutating func appendInterpolation<T: HTML>(_ html: T) {
23+
appendLiteral(html.render())
24+
}
25+
}

0 commit comments

Comments
 (0)