From 437e957fb914356bb5fc6e09d01463f903d99d83 Mon Sep 17 00:00:00 2001
From: Tim <0xtimc@gmail.com>
Date: Mon, 9 Jan 2023 18:01:18 +0000
Subject: [PATCH 01/44] Add components for first section of main site
---
Sources/DesignSite/DesignTheme.swift | 180 +++++++++++++++++++--------
src/images/swift-package-index.svg | 32 +++++
src/scss/vapor/vapor-icons.scss | 1 +
3 files changed, 162 insertions(+), 51 deletions(-)
create mode 100644 src/images/swift-package-index.svg
diff --git a/Sources/DesignSite/DesignTheme.swift b/Sources/DesignSite/DesignTheme.swift
index ac47db6..0e126f9 100644
--- a/Sources/DesignSite/DesignTheme.swift
+++ b/Sources/DesignSite/DesignTheme.swift
@@ -61,61 +61,139 @@ private struct VaporThemeHTMLFactory: HTMLFactory {
}
func buildComponentDemo(blogPostData: BlogPostExtraData, item: Item, site: Site, isDemo: Bool) -> Component {
- Div {
- H1("Component Guide")
-
- H2("Typography")
-
- H1("Header 1")
- H2("Header 2")
- H3("Header 3")
- H4("Header 4")
- H5("Header 5")
- H6("Header 6")
-
- H2("Pagination")
-
- Pagination(activePage: 1, numberOfPages: 15, pageURL: { pageNumber in
- return "/\(pageNumber)"
- }, isDemo: isDemo)
-
- H2("HR")
-
- Node.hr()
-
- H2("Blog Post Cards")
-
+ ComponentGroup {
Div {
+ H1("Component Guide")
+
+ H2("Typography")
+
+ H1("Header 1")
+ H2("Header 2")
+ H3("Header 3")
+ H4("Header 4")
+ H5("Header 5")
+ H6("Header 6")
+
+ H2("Pagination")
+
+ Pagination(activePage: 1, numberOfPages: 15, pageURL: { pageNumber in
+ return "/\(pageNumber)"
+ }, isDemo: isDemo)
+
+ H2("HR")
+
+ Node.hr()
+
+ H2("Blog Post Cards")
+
Div {
- let item2 = Item(path: "/demo", sectionID: .posts, metadata: .init(), tags: ["Vapor", "Swift", "Framework"], content: Content(title: "This is a longer post", description: "Welcome to Vapor's Design Guide which contains the designs for all of Vapor's websites. This description is much longer to test card heights and make sure the cards are the same height.", body: .init(html: demoPostHTML)))
- BlogCard(blogPostData: blogPostData, item: item2, site: site, isDemo: true)
- }.class("col")
- Div {
- BlogCard(blogPostData: blogPostData, item: item, site: site, isDemo: true)
- }.class("col")
+ Div {
+ let item2 = Item(path: "/demo", sectionID: .posts, metadata: .init(), tags: ["Vapor", "Swift", "Framework"], content: Content(title: "This is a longer post", description: "Welcome to Vapor's Design Guide which contains the designs for all of Vapor's websites. This description is much longer to test card heights and make sure the cards are the same height.", body: .init(html: demoPostHTML)))
+ BlogCard(blogPostData: blogPostData, item: item2, site: site, isDemo: true)
+ }.class("col")
+ Div {
+ BlogCard(blogPostData: blogPostData, item: item, site: site, isDemo: true)
+ }.class("col")
+ Div {
+ BlogCard(blogPostData: blogPostData, item: item, site: site, isDemo: true)
+ }.class("col")
+ }.class("row row-cols-1 row-cols-lg-2 g-4")
+
+ H2("Blog Site Title")
+
+ H1("Articles, tools & resources for Vapor devs").class("vapor-blog-page-heading")
+
+ H2("Blog Tag List")
+
+ H4("This is a list on desktop and a drop down menu on mobile")
+
Div {
- BlogCard(blogPostData: blogPostData, item: item, site: site, isDemo: true)
- }.class("col")
- }.class("row row-cols-1 row-cols-lg-2 g-4")
-
- H2("Blog Site Title")
-
- H1("Articles, tools & resources for Vapor devs").class("vapor-blog-page-heading")
-
- H2("Blog Tag List")
-
- H4("This is a list on desktop and a drop down menu on mobile")
-
+ Div {
+ let tags: [Tag] = [Tag("Vapor"), Tag("Swift"), Tag("DevOps"), Tag("API"), Tag("Announcements")]
+ let tagsWithPostCount = tags.map { TagWithPostCount(tag: $0, postCount: 2)}
+ return ComponentGroup(BlogTagList(tags: tagsWithPostCount, site: site, selectedTag: nil, totalPosts: 72, isDemo: true))
+ }.class("col-lg-3")
+ Div().class("col")
+ }.class("row")
+
+ }.class("container")
+
Div {
- Div {
- let tags: [Tag] = [Tag("Vapor"), Tag("Swift"), Tag("DevOps"), Tag("API"), Tag("Announcements")]
- let tagsWithPostCount = tags.map { TagWithPostCount(tag: $0, postCount: 2)}
- return ComponentGroup(BlogTagList(tags: tagsWithPostCount, site: site, selectedTag: nil, totalPosts: 72, isDemo: true))
- }.class("col-lg-3")
- Div().class("col")
- }.class("row")
-
- }.class("container")
+ buildMainSiteDemo()
+ }.class("container")
+ }
+ }
+
+ func buildMainSiteDemo() -> Component {
+ return ComponentGroup {
+ H1("Swift, but on a server").class("main-title")
+ H3("Vapor provides a safe, performant and easy to use foundation to build HTTP servers, backends and APIs in Swift").class("main-page-caption")
+
+ Div {
+ Button {
+ Link("Get Started", url: "https://docs.vapor.codes/").linkTarget(.blank)
+ }.class("btn btn-primary")
+ Button {
+ Link(url: "https://github.com/vapor/vapor") {
+ Span().class("vapor-icon icon-github-line")
+ Text("22k stars on GitHub")
+ }
+ }.class("btn btn-link")
+ }.class("main-page-callout-buttons")
+
+ Div {
+ let html = """
+ import Vapor
+
+ let app = try Application(.detect())
+ defer { app.shutdown() }
+
+ app.get("hello") { req in
+ return "Hello, world!"
+ }
+
+ try app.run()
+ """
+ let code = Node.code(.text(html)).class("language-swift")
+ Node.pre(.component(code))
+ // Code(language: .swift, code: html)
+ }.class("main-code-demo")
+
+ Div {
+ H5("Powering companies like:").class("used-by-caption")
+ List {
+ ListItem {
+ Link(url: "https://swiftpackageindex.com") {
+ Span().class("vapor-icon icon-swift-package-index").attribute(named: "title", value: "Swift Package Index")
+ }.class("used-by-logo")
+ }.class("used-by-item")
+
+ ListItem {
+ Link(url: "https://swiftpackageindex.com") {
+ Span().class("vapor-icon icon-swift-package-index").attribute(named: "title", value: "Swift Package Index")
+ }.class("used-by-logo")
+ }.class("used-by-item")
+
+ ListItem {
+ Link(url: "https://swiftpackageindex.com") {
+ Span().class("vapor-icon icon-swift-package-index").attribute(named: "title", value: "Swift Package Index")
+ }.class("used-by-logo")
+ }.class("used-by-item")
+
+ ListItem {
+ Link(url: "https://swiftpackageindex.com") {
+ Span().class("vapor-icon icon-swift-package-index").attribute(named: "title", value: "Swift Package Index")
+ }.class("used-by-logo")
+ }.class("used-by-item")
+
+ ListItem {
+ Link(url: "https://swiftpackageindex.com") {
+ Span().class("vapor-icon icon-swift-package-index").attribute(named: "title", value: "Swift Package Index")
+ }.class("used-by-logo")
+ }.class("used-by-item")
+ }
+ }.class("used-by-companies")
+ }
}
}
diff --git a/src/images/swift-package-index.svg b/src/images/swift-package-index.svg
new file mode 100644
index 0000000..849cda7
--- /dev/null
+++ b/src/images/swift-package-index.svg
@@ -0,0 +1,32 @@
+
diff --git a/src/scss/vapor/vapor-icons.scss b/src/scss/vapor/vapor-icons.scss
index 1e01d6e..945e1ed 100644
--- a/src/scss/vapor/vapor-icons.scss
+++ b/src/scss/vapor/vapor-icons.scss
@@ -23,6 +23,7 @@ $icon-names: (
'chevron-right',
'chevron-down',
'mastodon-fill',
+ 'swift-package-index'
);
@each $name in $icon-names {
From 7a35241094d690ec8dd6b2f2e3d715f0a11a11e0 Mon Sep 17 00:00:00 2001
From: Tim <0xtimc@gmail.com>
Date: Mon, 9 Jan 2023 18:06:19 +0000
Subject: [PATCH 02/44] Fix styling of title and caption
---
src/scss/main.scss | 1 +
src/scss/vapor/main-site.scss | 16 ++++++++++++++++
src/scss/vapor/vapor-dark.scss | 4 ++++
src/scss/vapor/vapor-light.scss | 4 ++++
4 files changed, 25 insertions(+)
create mode 100644 src/scss/vapor/main-site.scss
diff --git a/src/scss/main.scss b/src/scss/main.scss
index a6f11cd..c97e4be 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -5,5 +5,6 @@
@import "vapor/navigation";
@import "vapor/pagination";
@import "vapor/blog";
+@import "vapor/main-site";
@import "vapor/vapor-dark";
@import "vapor/vapor-light";
\ No newline at end of file
diff --git a/src/scss/vapor/main-site.scss b/src/scss/vapor/main-site.scss
new file mode 100644
index 0000000..e3c52d3
--- /dev/null
+++ b/src/scss/vapor/main-site.scss
@@ -0,0 +1,16 @@
+.main-title {
+ font-size: 72px;
+ text-align: center;
+ font-weight: 500;
+ font-style: normal;
+ line-height: 105%;
+ letter-spacing: -0.03em;
+}
+
+.main-page-caption {
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 150%;
+ text-align: center;
+}
\ No newline at end of file
diff --git a/src/scss/vapor/vapor-dark.scss b/src/scss/vapor/vapor-dark.scss
index ffdf796..dde4396 100644
--- a/src/scss/vapor/vapor-dark.scss
+++ b/src/scss/vapor/vapor-dark.scss
@@ -420,4 +420,8 @@
}
}
}
+
+ .main-page-caption {
+ color: $grey-500;
+ }
}
\ No newline at end of file
diff --git a/src/scss/vapor/vapor-light.scss b/src/scss/vapor/vapor-light.scss
index b1def4a..6bc5158 100644
--- a/src/scss/vapor/vapor-light.scss
+++ b/src/scss/vapor/vapor-light.scss
@@ -223,4 +223,8 @@ hr {
code {
color: $pink-300;
+}
+
+.main-page-caption {
+ color: $grey-700;
}
\ No newline at end of file
From 1896096c82ea3090439c70dfcc5bd71f182f7f3e Mon Sep 17 00:00:00 2001
From: Tim <0xtimc@gmail.com>
Date: Tue, 10 Jan 2023 10:55:25 +0000
Subject: [PATCH 03/44] Get main callout buttons working
---
Sources/DesignSite/DesignTheme.swift | 24 +++++++++++--------
src/scss/vapor/main-site.scss | 3 ++-
src/scss/vapor/vapor-dark.scss | 36 ++++++++++++++++++++++++++++
src/scss/vapor/vapor-icons.scss | 1 +
src/scss/vapor/vapor-light.scss | 36 ++++++++++++++++++++++++++++
src/scss/vapor/vapor.scss | 19 +++++++++++++--
6 files changed, 106 insertions(+), 13 deletions(-)
diff --git a/Sources/DesignSite/DesignTheme.swift b/Sources/DesignSite/DesignTheme.swift
index 0e126f9..ddb7dbc 100644
--- a/Sources/DesignSite/DesignTheme.swift
+++ b/Sources/DesignSite/DesignTheme.swift
@@ -130,16 +130,20 @@ private struct VaporThemeHTMLFactory: HTMLFactory {
H3("Vapor provides a safe, performant and easy to use foundation to build HTTP servers, backends and APIs in Swift").class("main-page-caption")
Div {
- Button {
- Link("Get Started", url: "https://docs.vapor.codes/").linkTarget(.blank)
- }.class("btn btn-primary")
- Button {
- Link(url: "https://github.com/vapor/vapor") {
- Span().class("vapor-icon icon-github-line")
- Text("22k stars on GitHub")
- }
- }.class("btn btn-link")
- }.class("main-page-callout-buttons")
+ Div {
+ Button {
+ Link("Get Started", url: "https://docs.vapor.codes/").linkTarget(.blank)
+ }.class("btn btn-primary")
+ }
+ Div {
+ Button {
+ Link(url: "https://github.com/vapor/vapor") {
+ Span().class("vapor-icon icon-github-line icon-secondary btn-icon me-2")
+ Text("22k stars on GitHub")
+ }.class(" d-flex align-items-center")
+ }.class("btn btn-link btn-secondary-link")
+ }.class("d-flex align-items-center ms-5")
+ }.class("main-page-callout-buttons d-flex justify-content-center align-items-center")
Div {
let html = """
diff --git a/src/scss/vapor/main-site.scss b/src/scss/vapor/main-site.scss
index e3c52d3..c6f2253 100644
--- a/src/scss/vapor/main-site.scss
+++ b/src/scss/vapor/main-site.scss
@@ -13,4 +13,5 @@
font-size: 24px;
line-height: 150%;
text-align: center;
-}
\ No newline at end of file
+}
+
diff --git a/src/scss/vapor/vapor-dark.scss b/src/scss/vapor/vapor-dark.scss
index dde4396..4bf4039 100644
--- a/src/scss/vapor/vapor-dark.scss
+++ b/src/scss/vapor/vapor-dark.scss
@@ -424,4 +424,40 @@
.main-page-caption {
color: $grey-500;
}
+
+ .btn-link {
+ color: $grey-200;
+
+ a {
+ color: $grey-200;
+ }
+
+ a:hover {
+ color: $grey-100;
+
+ .vapor-icon {
+ background-color: $grey-100;
+ }
+ }
+ }
+
+ .btn-secondary-link {
+ color: $grey-500;
+
+ a {
+ color: $grey-500;
+ }
+
+ a:hover {
+ color: $grey-400;
+
+ .vapor-icon {
+ background-color: $grey-400;
+ }
+ }
+ }
+
+ .icon-secondary {
+ background-color: $grey-500;
+ }
}
\ No newline at end of file
diff --git a/src/scss/vapor/vapor-icons.scss b/src/scss/vapor/vapor-icons.scss
index 945e1ed..82cc858 100644
--- a/src/scss/vapor/vapor-icons.scss
+++ b/src/scss/vapor/vapor-icons.scss
@@ -12,6 +12,7 @@ $icon-names: (
'x-close',
'menu-04',
'github-fill',
+ 'github-line',
'twitter-fill',
'copy-06',
'reddit-fill',
diff --git a/src/scss/vapor/vapor-light.scss b/src/scss/vapor/vapor-light.scss
index 6bc5158..873c707 100644
--- a/src/scss/vapor/vapor-light.scss
+++ b/src/scss/vapor/vapor-light.scss
@@ -227,4 +227,40 @@ code {
.main-page-caption {
color: $grey-700;
+}
+
+.btn-link {
+ color: $grey-800;
+
+ a {
+ color: $grey-800;
+ }
+
+ a:hover {
+ color: $grey-900;
+
+ .vapor-icon {
+ background-color: $grey-900;
+ }
+ }
+}
+
+.btn-secondary-link {
+ color: $grey-600;
+
+ a {
+ color: $grey-600;
+ }
+
+ a:hover {
+ color: $grey-700;
+
+ .vapor-icon {
+ background-color: $grey-700;
+ }
+ }
+}
+
+.icon-secondary {
+ background-color: $grey-600;
}
\ No newline at end of file
diff --git a/src/scss/vapor/vapor.scss b/src/scss/vapor/vapor.scss
index 20c632d..b3bf4f8 100644
--- a/src/scss/vapor/vapor.scss
+++ b/src/scss/vapor/vapor.scss
@@ -120,7 +120,7 @@ body {
.btn {
font-size: 16px;
- line-height: 150%;
+ line-height: 100%;
--#{$prefix}btn-border-radius: 16px;
--#{$prefix}btn-border-color: transparent;
padding-top: 16px;
@@ -145,10 +145,20 @@ body {
background: linear-gradient(180deg, $pink-300 0%, $pink-500 100%);
--#{$prefix}btn-color: white;
color: white;
+ border: none;
+
+ a {
+ color: white;
+ }
+
+
+ a:hover {
+ color: white;
+ text-decoration: none;
+ }
.vapor-icon {
background-color: white;
-
}
}
@@ -283,4 +293,9 @@ h3 {
margin-bottom: 0;
}
}
+}
+
+.btn-icon {
+ height: 21px;
+ width: 21px;
}
\ No newline at end of file
From 57c3ae8623b1b4da5339d401222ba0e751fa9dd2 Mon Sep 17 00:00:00 2001
From: Tim <0xtimc@gmail.com>
Date: Tue, 10 Jan 2023 11:36:33 +0000
Subject: [PATCH 04/44] Style the main page callouts on mobile
---
Sources/DesignSite/DesignTheme.swift | 10 +++++-----
src/scss/vapor/main-site.scss | 3 +--
src/scss/vapor/vapor.scss | 6 ++++++
3 files changed, 12 insertions(+), 7 deletions(-)
diff --git a/Sources/DesignSite/DesignTheme.swift b/Sources/DesignSite/DesignTheme.swift
index ddb7dbc..63097f9 100644
--- a/Sources/DesignSite/DesignTheme.swift
+++ b/Sources/DesignSite/DesignTheme.swift
@@ -132,9 +132,9 @@ private struct VaporThemeHTMLFactory: HTMLFactory {
Div {
Div {
Button {
- Link("Get Started", url: "https://docs.vapor.codes/").linkTarget(.blank)
- }.class("btn btn-primary")
- }
+ Link("Get Started", url: "https://docs.vapor.codes/").linkTarget(.blank).id("main-page-callout-button-link")
+ }.class("btn btn-primary w-mobile-100")
+ }.class("w-mobile-100")
Div {
Button {
Link(url: "https://github.com/vapor/vapor") {
@@ -142,8 +142,8 @@ private struct VaporThemeHTMLFactory: HTMLFactory {
Text("22k stars on GitHub")
}.class(" d-flex align-items-center")
}.class("btn btn-link btn-secondary-link")
- }.class("d-flex align-items-center ms-5")
- }.class("main-page-callout-buttons d-flex justify-content-center align-items-center")
+ }.class("d-flex align-items-center ms-lg-5")
+ }.class("main-page-callout-buttons d-flex align-items-center justify-content-center flex-column flex-lg-row")
Div {
let html = """
diff --git a/src/scss/vapor/main-site.scss b/src/scss/vapor/main-site.scss
index c6f2253..e3c52d3 100644
--- a/src/scss/vapor/main-site.scss
+++ b/src/scss/vapor/main-site.scss
@@ -13,5 +13,4 @@
font-size: 24px;
line-height: 150%;
text-align: center;
-}
-
+}
\ No newline at end of file
diff --git a/src/scss/vapor/vapor.scss b/src/scss/vapor/vapor.scss
index b3bf4f8..dcca09b 100644
--- a/src/scss/vapor/vapor.scss
+++ b/src/scss/vapor/vapor.scss
@@ -191,6 +191,12 @@ h3 {
}
}
+@include media-breakpoint-down(lg) {
+ .w-mobile-100 {
+ width: 100%;
+ }
+}
+
.animate {
animation-duration: 0.3s;
-webkit-animation-duration: 0.3s;
From b99601503c3f8692d986aefe4d1dc7636dbea75e Mon Sep 17 00:00:00 2001
From: Tim <0xtimc@gmail.com>
Date: Tue, 10 Jan 2023 12:04:59 +0000
Subject: [PATCH 05/44] Style the code demo
---
src/scss/vapor/main-site.scss | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/src/scss/vapor/main-site.scss b/src/scss/vapor/main-site.scss
index e3c52d3..0989575 100644
--- a/src/scss/vapor/main-site.scss
+++ b/src/scss/vapor/main-site.scss
@@ -13,4 +13,8 @@
font-size: 24px;
line-height: 150%;
text-align: center;
+}
+
+.main-code-demo {
+ margin-top: 64px;
}
\ No newline at end of file
From ef845964e7c63be0e19fe52f6208997984940a1f Mon Sep 17 00:00:00 2001
From: Tim <0xtimc@gmail.com>
Date: Tue, 10 Jan 2023 17:10:43 +0000
Subject: [PATCH 06/44] Get start of main page working on mobile and in color
modes and spilt out into own page
---
Sources/DesignSite/DesignTheme.swift | 139 ++++++++++--------
Sources/DesignSite/main.swift | 1 +
.../VaporDesign/Components/SiteFooter.swift | 4 +-
src/images/logo-main-black.svg | 2 +-
src/images/logo-main-white.svg | 2 +-
src/images/main-site-homepage-hero-dark.svg | 1 +
src/images/main-site-homepage-hero-light.svg | 1 +
src/scss/vapor/main-site.scss | 52 +++++++
src/scss/vapor/vapor-dark.scss | 10 +-
src/scss/vapor/vapor-light.scss | 8 +
10 files changed, 152 insertions(+), 68 deletions(-)
create mode 100644 src/images/main-site-homepage-hero-dark.svg
create mode 100644 src/images/main-site-homepage-hero-light.svg
diff --git a/Sources/DesignSite/DesignTheme.swift b/Sources/DesignSite/DesignTheme.swift
index 63097f9..fb2cd00 100644
--- a/Sources/DesignSite/DesignTheme.swift
+++ b/Sources/DesignSite/DesignTheme.swift
@@ -32,8 +32,22 @@ private struct VaporThemeHTMLFactory: HTMLFactory {
func makeSectionHTML(for section: Section,
context: PublishingContext) throws -> HTML {
- let builder = VaporDesign(siteLanguage: context.site.language, isLocal: true)
- return builder.buildHTML(for: section, context: context, body: .body())
+ if section.title == "Mainpagedemo" {
+ let body: Node = .body {
+ let isDemo = true
+ let currentSite: CurrentSite = .main
+ SiteNavigation(context: context, selectedSelectionID: nil, currentSite: currentSite, currentMainSitePage: nil, isDemo: isDemo)
+ buildMainSiteDemo()
+ SiteFooter(isLocal: true, isDemo: isDemo, currentSite: currentSite)
+ }
+
+ let bodyWithClass = body.class("main-site-main-page")
+ let builder = VaporDesign(siteLanguage: context.site.language, isLocal: true)
+ return builder.buildHTML(for: section, context: context, body: bodyWithClass.convertToNode())
+ } else {
+ let builder = VaporDesign(siteLanguage: context.site.language, isLocal: true)
+ return builder.buildHTML(for: section, context: context, body: .body())
+ }
}
func makeItemHTML(for item: Item,
@@ -61,73 +75,70 @@ private struct VaporThemeHTMLFactory: HTMLFactory {
}
func buildComponentDemo(blogPostData: BlogPostExtraData, item: Item, site: Site, isDemo: Bool) -> Component {
- ComponentGroup {
+ Div {
+ H1("Component Guide")
+
+ H2("Typography")
+
+ H1("Header 1")
+ H2("Header 2")
+ H3("Header 3")
+ H4("Header 4")
+ H5("Header 5")
+ H6("Header 6")
+
+ H2("Pagination")
+
+ Pagination(activePage: 1, numberOfPages: 15, pageURL: { pageNumber in
+ return "/\(pageNumber)"
+ }, isDemo: isDemo)
+
+ H2("HR")
+
+ Node.hr()
+
+ H2("Blog Post Cards")
+
Div {
- H1("Component Guide")
-
- H2("Typography")
-
- H1("Header 1")
- H2("Header 2")
- H3("Header 3")
- H4("Header 4")
- H5("Header 5")
- H6("Header 6")
-
- H2("Pagination")
-
- Pagination(activePage: 1, numberOfPages: 15, pageURL: { pageNumber in
- return "/\(pageNumber)"
- }, isDemo: isDemo)
-
- H2("HR")
-
- Node.hr()
-
- H2("Blog Post Cards")
-
Div {
- Div {
- let item2 = Item(path: "/demo", sectionID: .posts, metadata: .init(), tags: ["Vapor", "Swift", "Framework"], content: Content(title: "This is a longer post", description: "Welcome to Vapor's Design Guide which contains the designs for all of Vapor's websites. This description is much longer to test card heights and make sure the cards are the same height.", body: .init(html: demoPostHTML)))
- BlogCard(blogPostData: blogPostData, item: item2, site: site, isDemo: true)
- }.class("col")
- Div {
- BlogCard(blogPostData: blogPostData, item: item, site: site, isDemo: true)
- }.class("col")
- Div {
- BlogCard(blogPostData: blogPostData, item: item, site: site, isDemo: true)
- }.class("col")
- }.class("row row-cols-1 row-cols-lg-2 g-4")
-
- H2("Blog Site Title")
-
- H1("Articles, tools & resources for Vapor devs").class("vapor-blog-page-heading")
-
- H2("Blog Tag List")
-
- H4("This is a list on desktop and a drop down menu on mobile")
-
+ let item2 = Item(path: "/demo", sectionID: .posts, metadata: .init(), tags: ["Vapor", "Swift", "Framework"], content: Content(title: "This is a longer post", description: "Welcome to Vapor's Design Guide which contains the designs for all of Vapor's websites. This description is much longer to test card heights and make sure the cards are the same height.", body: .init(html: demoPostHTML)))
+ BlogCard(blogPostData: blogPostData, item: item2, site: site, isDemo: true)
+ }.class("col")
Div {
- Div {
- let tags: [Tag] = [Tag("Vapor"), Tag("Swift"), Tag("DevOps"), Tag("API"), Tag("Announcements")]
- let tagsWithPostCount = tags.map { TagWithPostCount(tag: $0, postCount: 2)}
- return ComponentGroup(BlogTagList(tags: tagsWithPostCount, site: site, selectedTag: nil, totalPosts: 72, isDemo: true))
- }.class("col-lg-3")
- Div().class("col")
- }.class("row")
-
- }.class("container")
-
+ BlogCard(blogPostData: blogPostData, item: item, site: site, isDemo: true)
+ }.class("col")
+ Div {
+ BlogCard(blogPostData: blogPostData, item: item, site: site, isDemo: true)
+ }.class("col")
+ }.class("row row-cols-1 row-cols-lg-2 g-4")
+
+ H2("Blog Site Title")
+
+ H1("Articles, tools & resources for Vapor devs").class("vapor-blog-page-heading")
+
+ H2("Blog Tag List")
+
+ H4("This is a list on desktop and a drop down menu on mobile")
+
Div {
- buildMainSiteDemo()
- }.class("container")
- }
+ Div {
+ let tags: [Tag] = [Tag("Vapor"), Tag("Swift"), Tag("DevOps"), Tag("API"), Tag("Announcements")]
+ let tagsWithPostCount = tags.map { TagWithPostCount(tag: $0, postCount: 2)}
+ return ComponentGroup(BlogTagList(tags: tagsWithPostCount, site: site, selectedTag: nil, totalPosts: 72, isDemo: true))
+ }.class("col-lg-3")
+ Div().class("col")
+ }.class("row")
+
+ }.class("container")
}
func buildMainSiteDemo() -> Component {
- return ComponentGroup {
+ Div {
+ Span().class("d-flex mx-auto")
+ .accessibilityLabel("Vapor Logo")
+ .id("vapor-hero-logo")
H1("Swift, but on a server").class("main-title")
- H3("Vapor provides a safe, performant and easy to use foundation to build HTTP servers, backends and APIs in Swift").class("main-page-caption")
+ H3("Vapor provides a safe, performant and easy to use foundation to build HTTP servers, backends and APIs in Swift").class("main-page-caption d-flex mx-auto")
Div {
Div {
@@ -197,7 +208,7 @@ private struct VaporThemeHTMLFactory: HTMLFactory {
}.class("used-by-item")
}
}.class("used-by-companies")
- }
+ }.class("container")
}
}
@@ -215,6 +226,10 @@ let demoPostHTML = """
Originally this page was a proof on concept for building the blog (the first site to be ported over to the new design) as a way of getting the styling and HTML/CSS to work. It's now evolved to host the generated CSS and JS the sites can pull in, this example site, all the static files (like images) and components for Publish to use when building out sites.
+
+ You can see an example of the main site here.
+
+
Some Vapor
code blocks
Here's an example of a code block:
diff --git a/Sources/DesignSite/main.swift b/Sources/DesignSite/main.swift
index faa7c01..b35415e 100644
--- a/Sources/DesignSite/main.swift
+++ b/Sources/DesignSite/main.swift
@@ -7,6 +7,7 @@ struct DesignSite: Website {
enum SectionID: String, WebsiteSectionID {
// Add the sections that you want your website to contain here:
case posts
+ case mainPageDemo
}
struct ItemMetadata: WebsiteItemMetadata {
diff --git a/Sources/VaporDesign/Components/SiteFooter.swift b/Sources/VaporDesign/Components/SiteFooter.swift
index 46b4e5c..3ce2be0 100644
--- a/Sources/VaporDesign/Components/SiteFooter.swift
+++ b/Sources/VaporDesign/Components/SiteFooter.swift
@@ -21,9 +21,7 @@ public struct SiteFooter: Component {
Div {
Div {
Div {
- Span {
-
- }.class("d-inline-block align-text-top")
+ Span().class("d-inline-block align-text-top")
.accessibilityLabel("Vapor Logo")
.id("vapor-logo-footer")
.width(197)
diff --git a/src/images/logo-main-black.svg b/src/images/logo-main-black.svg
index f76331c..e279645 100644
--- a/src/images/logo-main-black.svg
+++ b/src/images/logo-main-black.svg
@@ -1,4 +1,4 @@
-