@@ -5,8 +5,6 @@ import Elementary
5
5
import Foundation
6
6
7
7
public struct HomePage : Page {
8
- @Dependency ( \. activityClient) private var activityClient
9
-
10
8
public init ( ) { }
11
9
12
10
private static let copyrightDateFormatter = {
@@ -35,66 +33,10 @@ public struct HomePage: Page {
35
33
VueScript ( )
36
34
}
37
35
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 ( )
98
40
}
99
41
footer ( . aria. label ( " Credits " ) , . style( " text-align: center; " ) ) {
100
42
p { " © \( Self . copyrightDateFormatter. string ( from: Date . now) ) Erik Bautista Santibanez " }
@@ -110,25 +52,77 @@ public struct HomePage: Page {
110
52
}
111
53
}
112
54
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
+ }
124
100
}
125
- " \( residency) "
126
101
}
102
+ }
127
103
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
130
121
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 " ) ) {
132
126
svg ( . xmlns( ) , . fill( " currentColor " ) , . viewBox( " 0 0 256 256 " ) , . class( " svg-icon reversed " ) , . aria. label ( " Navigation icon " ) ) {
133
127
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
128
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 {
142
136
. joined ( separator: " , " )
143
137
}
144
138
}
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
+ }
145
187
}
146
188
}
147
189
}
0 commit comments