Skip to content

Commit 702e961

Browse files
erikbdeverikbdev
committed
wip: add articles
1 parent 24021c9 commit 702e961

File tree

1 file changed

+128
-70
lines changed

1 file changed

+128
-70
lines changed

‎Sources/Pages/HomePage.swift

Lines changed: 128 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,26 @@ import SyntaxHighlight
77

88
public struct HomePage: Page {
99
struct Style: Sendable, StyleSheet {
10-
let container = Class(module: "container")
1110
let svgIcon = Class(module: "svgIcon")
1211
let reversed = Class(module: "reversed")
13-
let location = Class(module: "location")
14-
let educationItem = Class(module: "eductation-item")
1512

1613
var body: some Rule {
17-
Attribute("data-theme", match: .exact, value: "dark") => {
18-
Variable("pico-background-color", value: "#1c1c1c")
14+
Import(.url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"))
15+
16+
Pseudo(class: .root) => {
17+
BackgroundColor("#1c1c1c")
18+
Color("#fafafa")
19+
AnyProperty("font-family", "\"Work Sans\", serif")
20+
AnyProperty("font-optical-sizing", "auto")
21+
AnyProperty("font-style", "normal")
22+
}
23+
24+
Element(.body) => {
25+
AnyProperty("max-width", "640px")
26+
AnyProperty("margin-right", "auto")
27+
AnyProperty("margin-left", "auto")
28+
AnyProperty("padding-left", "24px")
29+
AnyProperty("padding-right", "24px")
1930
}
2031

2132
self.svgIcon => {
@@ -31,30 +42,28 @@ public struct HomePage: Page {
3142
self.reversed => {
3243
AnyProperty("scale", "calc(100% * -1) 100%")
3344
}
34-
35-
// self.location > Element(.b) => {
36-
// Color("#fff")
37-
// }
38-
39-
self.educationItem => {
40-
Display(.flex)
41-
AnyProperty("justify-content", "space-between")
42-
}
4345
}
4446
}
4547

4648
@Dependency(\.activityClient) private var activityClient
4749

4850
public init() {}
4951

50-
private static let yearDateFormatter = DateFormatter()
51-
52-
var year: String {
53-
Self.yearDateFormatter.locale = Locale(languageCode: .english, languageRegion: .unitedStates)
54-
Self.yearDateFormatter.timeZone = TimeZone(abbreviation: "PST") ?? Self.yearDateFormatter.timeZone
55-
Self.yearDateFormatter.dateFormat = "yyyy"
56-
return Self.yearDateFormatter.string(from: Date.now)
57-
}
52+
private static let articleDateFormatter = {
53+
let formatter = DateFormatter()
54+
formatter.locale = Locale(languageCode: .english, languageRegion: .unitedStates)
55+
formatter.timeZone = TimeZone(abbreviation: "PST") ?? formatter.timeZone
56+
formatter.dateFormat = "MMM, d yyyy"
57+
return formatter
58+
}()
59+
60+
private static let copyrightDateFormatter = {
61+
let formatter = DateFormatter()
62+
formatter.locale = Locale(languageCode: .english, languageRegion: .unitedStates)
63+
formatter.timeZone = TimeZone(abbreviation: "PST") ?? formatter.timeZone
64+
formatter.dateFormat = "yyyy"
65+
return formatter
66+
}()
5867

5968
let styling = Style()
6069

@@ -65,11 +74,14 @@ public struct HomePage: Page {
6574
title { "Erik Bautista Santibanez" }
6675
meta(.charset(.utf8))
6776
meta(name: .viewport, content: "width=device-width, initial-scale=1.0")
68-
// link(.rel(.stylesheet), .href("https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"))
77+
script(.src("https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"), .defer)
6978
style(styling)
70-
// script(.src("https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"), .defer) {}
79+
style {
80+
// ""
81+
}
82+
// link(.href("https://fonts.googleapis.com/css?family=Archivo:400,400i,500,500i,600,600i,700,700i"), .rel(.stylesheet))
7183
}
72-
body(.class("container")) {
84+
body {
7385
header(.ariaLabel("About")) {
7486
hgroup {
7587
h1 { "Erik Bautista Santibanez" }
@@ -91,63 +103,59 @@ public struct HomePage: Page {
91103
if let location, location.city != residency.city || location.state != residency.state {
92104
" \u{2022} "
93105

94-
span(.ariaLabel("Location"), .class(styling.location)) {
106+
span(.ariaLabel("Location")) {
95107
svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .class(styling.svgIcon), .class(styling.reversed), .ariaLabel("Navigation icon")) {
96108
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"))
97109
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"))
98110
}
99111

100112
"Currently in "
101-
102-
// span {
103-
b {
104-
[location.city, location.state, location.region == "United States" ? nil : location.region]
105-
.compactMap(\.self)
106-
.joined(separator: ", ")
107-
}
108-
// }
113+
114+
b {
115+
[location.city, location.state, location.region == "United States" ? nil : location.region]
116+
.compactMap(\.self)
117+
.joined(separator: ", ")
118+
}
109119
}
110120
}
111121
}
112122
}
113123
}
114-
main {
115-
article {
116-
// header {
117-
// a(.target(.blank), .rel("noopener noreferrer"), .href("https://stedwards.edu/")) {
118-
// "St. Edward's University"
119-
// }
120-
// }
121-
// p { "Bachelor of Science in Computer Science" }
122-
h6 { "Graduation" }
123-
p { "I graduated from St. Edward's University with a Bachelor of Science in Computer Science." }
124+
main(.x.data("{ selected: \"all\" }")) {
125+
ul {
126+
li { "All" }
127+
128+
for kind in Article.Kind.allCases {
129+
li { HTMLText(kind.rawValue) }
130+
}
131+
}
132+
133+
for event in Article.allCases {
134+
article {
135+
header { Self.articleDateFormatter.string(from: event.date) }
136+
// if let hero = event.hero {
137+
// figure {
138+
// figcaption {}
139+
// }
140+
// }
141+
142+
h3 {
143+
HTMLText(event.title)
144+
}
145+
146+
p {
147+
HTMLRaw(event.description)
148+
}
149+
150+
// if let actions = event.actionButtons {
151+
152+
// }
153+
}
124154
}
125-
// TODO: Do a timeline with filters
126-
// section(.ariaLabel("Experience")) {
127-
// h5 { "Experience" }
128-
// }
129-
// section(.ariaLabel("Projects")) {
130-
// h5 { "Projects" }
131-
// }
132-
// section(.ariaLabel("Education")) {
133-
// h5 { "Education" }
134-
// div(.class(styling.educationItem)) {
135-
// div {
136-
// a(.target(.blank), .rel("noopener noreferrer"), .href("https://stedwards.edu/")) {
137-
// "St. Edward's University"
138-
// }
139-
// p {
140-
// i { "Bachelor of Science in Computer Science" }
141-
// }
142-
// }
143-
144-
// p { "2018-2023" }
145-
// }
146-
// }
147155
}
148156
footer(.ariaLabel("Credits")) {
149157
hr()
150-
p { "©\(self.year) Erik Bautista Santibanez" }
158+
p { "©\(Self.copyrightDateFormatter.string(from: Date.now)) Erik Bautista Santibanez" }
151159
p {
152160
"Made with \u{2764} using "
153161
a(.target(.blank), .rel("noopener noreferrer"), .href("https://swift.org")) { "Swift" }
@@ -179,7 +187,57 @@ public struct HomePage: Page {
179187
// }
180188
// }
181189

182-
struct Event {
183-
let date: Date
184-
let title: String
190+
struct Article {
191+
var hero: Hero?
192+
var title: String
193+
var description: String
194+
var date: Date
195+
var kind: Kind
196+
var actionButtons: [LinkButton]?
197+
198+
enum Hero {
199+
case link(URL)
200+
case image(String)
201+
case video(String)
202+
case code(String)
203+
}
204+
205+
struct LinkButton {
206+
let title: String
207+
let link: String
208+
}
209+
210+
enum Kind: String, Hashable, CaseIterable {
211+
case project = "Project"
212+
case education = "Education"
213+
case experience = "Experiences"
214+
}
215+
}
216+
217+
extension Article: CaseIterable {
218+
static let allCases: [Article] = [
219+
Self(
220+
title: "A Swift DSL for type-safe CSS",
221+
description: """
222+
Since I started building this website using Swift, I used [elementary](https://github.com/sliemeobn/elementary) to build \
223+
HTML pages.
224+
225+
TBD
226+
""",
227+
date: Date(timeIntervalSince1970: 1738483200), // Feb 2, 2025
228+
kind: .project
229+
),
230+
Self(
231+
title: "Anime Now! \u{2014} An iOS and macOS App",
232+
description: "TBD",
233+
date: Date(timeIntervalSince1970: 1663225200), // Sep 15, 2025
234+
kind: .project
235+
),
236+
Self(
237+
title: "PrismUI \u{2014} Controlling MSI RGB Keyboard on mac",
238+
description: "TBD",
239+
date: Date(timeIntervalSince1970: 1663225200),
240+
kind: .project
241+
)
242+
]
185243
}

0 commit comments

Comments
 (0)