Main site components

.github/workflows/ci.yml

@@ -44,9 +44,10 @@ jobs:
             fi
       - name: Deploy S3 Website
         if: ${{ github.event.pull_request.head.repo.full_name == 'vapor/design' && github.actor != 'dependabot[bot]' }}
-        uses: rishabhrao/s3-website-https-pr-action@v1
+        uses: brokenhandsio/s3-website-https-pr-action@1.0.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           bucket-prefix: "vapor-design-pulls"
           folder-to-copy: "./Output"
+          bucket-region: "us-east-1"

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 {

Sources/VaporDesign/Components/MainSite/CompanyCard.swift

@@ -0,0 +1,22 @@
+import Plot
+import Publish
+
+public struct CompanyCard: Component {
+    let name: String
+    let url: String
+    let logo: String
+
+    public init(name: String, url: String, logo: String) {
+        self.name = name
+        self.url = url
+        self.logo = logo
+    }
+
+    public var body: Component {
+        Div {
+            Link(url: url) {
+                Span().class("used-by-icon \(logo)").attribute(named: "title", value: name)
+            }.class("used-by-logo")
+        }.class("used-by-item")
+    }
+}

Sources/VaporDesign/Components/MainSite/FeatureContainer.swift

@@ -0,0 +1,40 @@
+import Plot
+import Publish
+
+public struct FeatureContainer: Component {
+    let title: String
+    let description: String
+    let url: String
+    let icon: String?
+    let iconString: String?
+
+    public init(title: String, description: String, url: String, icon: String? = nil, iconString: String? = nil) {
+        self.title = title
+        self.description = description
+        self.url = url
+        self.icon = icon
+        self.iconString = iconString
+    }
+
+    public var body: Component {
+        Div {
+            Div {
+                if let icon = icon {
+                    Span().class("vapor-icon \(icon)")
+                } else if let iconString = iconString {
+                    Span(iconString)
+                }
+                H2(title)
+                Paragraph {
+                    Text(description)
+                }
+                Button {
+                    Link(url: "https://docs.vapor.codes/") {
+                        Text("Get Started")
+                        Span().class("vapor-icon icon-chevron-right")
+                    }.linkTarget(.blank)
+                }.class("btn btn-primary w-mobile-100")
+            }.class("code-example-explainer")
+        }.class("col order-2 order-lg-1 g-lg-0")
+    }
+}

Sources/VaporDesign/Components/MainSite/PackageCard.swift

@@ -0,0 +1,30 @@
+import Plot
+import Publish
+
+public struct PackageCard: Component {
+    public let title: String
+    public let description: String
+    public let icon: String
+    public let url: String
+
+    public init(title: String, description: String, icon: String, url: String) {
+        self.title = title
+        self.description = description
+        self.icon = icon
+        self.url = url
+    }
+
+    public var body: Component {
+        Div {
+            Div {
+                Span().class("vapor-icon feature-card-icon icon-\(icon)")
+                H3(title).class("card-title")
+                Paragraph(description).class("card-text")
+                Link(url: url) {
+                    Text("Learn More")
+                    Span().class("vapor-icon icon-chevron-right")
+                }.linkTarget(.blank).class("learn-more-link")
+            }
+        }.class("card h-100 vapor-feature-card")
+    }
+}

Sources/VaporDesign/Components/MainSite/ShowcaseCard.swift

@@ -0,0 +1,32 @@
+import Plot
+import Publish
+
+public struct ShowcaseCard: Component {
+    let name: String
+    let url: String
+    let image: String
+    let description: String
+
+    public init(name: String, url: String, image: String, description: String) {
+        self.name = name
+        self.url = url
+        self.image = image
+        self.description = description
+    }
+
+    public var body: Component {
+        Div {
+            Image(url: image, description: "\(name) Card").class("card-img-top")
+            Div {
+                H5(name).class("card-title")
+                Paragraph(description).class("card-text")
+                Link(url: url) {
+                    Text("See it in action")
+                    Span("").class("vapor-icon icon-arrow-narrow-up-right")
+                }.class("btn btn-primary mt-auto")
+            }.class("card-body d-flex flex-column")
+        }.class("card")
+        .style("width: 18rem;")
+        .id("\(name.lowercased().replacingOccurrences(of: " ", with: "-"))-card")
+    }
+}

Sources/VaporDesign/Components/MainSite/SponsorCard.swift

@@ -0,0 +1,30 @@
+import Plot
+import Publish
+
+public struct SponsorCard: Component {
+    let name: String
+    let url: String
+    let logo: String
+    let description: String
+
+    public init(name: String, url: String, logo: String, description: String) {
+        self.name = name
+        self.url = url
+        self.logo = logo
+        self.description = description
+    }
+
+    public var body: Component {
+        Div {
+            Div {
+                Image(url: logo, description: name).class("card-img-top")
+                H5(name).class("card-title")
+                Paragraph(description).class("card-text")
+                Link(url: url) {
+                    Text("Learn More")
+                    Span().class("vapor-icon icon-chevron-right")
+                }.linkTarget(.blank).class("learn-more-link mt-auto")
+            }.class("card-body d-flex flex-column")
+        }.class("card")
+    }
+}

Sources/VaporDesign/Components/SiteFooter.swift

@@ -1,18 +1,17 @@
-import Plot
 import Foundation
+import Plot
 
 public struct SiteFooter: Component {
-
     let isLocal: Bool
     let isDemo: Bool
     let currentSite: CurrentSite
-    
+
     public init(isLocal: Bool = false, isDemo: Bool = false, currentSite: CurrentSite) {
         self.isLocal = isLocal
         self.isDemo = isDemo
         self.currentSite = currentSite
     }
-    
+
     public var body: Component {
         guard let year = Calendar(identifier: .gregorian).dateComponents([.year], from: Date()).year else {
             fatalError("Unable to get the current year")
@@ -21,9 +20,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)
@@ -48,7 +45,7 @@ public struct SiteFooter: Component {
                                         }
                                     }
                                     ListItem {
-                                        Link("Join our Discord", url: "https://vapor.team").linkTarget(.blank)
+                                        Link("Join our Discord", url: "https://vapor.team").linkTarget(.blank).class("nav-link")
                                     }
                                     ListItem {
                                         if isDemo {
@@ -89,28 +86,28 @@ public struct SiteFooter: Component {
                                         if currentSite == .blog {
                                             Link("Blog", url: "/")
                                         } else {
-                                            Link("Blog", url: "https://blog.vapor.codes").linkTarget(.blank)
+                                            Link("Blog", url: "https://blog.vapor.codes").linkTarget(.blank).class("nav-link")
                                         }
                                     }
                                     ListItem {
                                         if currentSite == .docs {
                                             Link("Framework Docs", url: "/")
                                         } else {
-                                            Link("Framework Docs", url: "https://docs.vapor.codes").linkTarget(.blank)
+                                            Link("Framework Docs", url: "https://docs.vapor.codes").linkTarget(.blank).class("nav-link")
                                         }
                                     }
                                     ListItem {
                                         if currentSite == .apiDocs {
-                                            Link("API Docs", url: "/")
+                                            Link("API Docs", url: "/").class("nav-link")
                                         } else {
-                                            Link("API Docs", url: "https://api.vapor.codes").linkTarget(.blank)
+                                            Link("API Docs", url: "https://api.vapor.codes").linkTarget(.blank).class("nav-link")
                                         }
                                     }
                                     ListItem {
-                                        Link("Press Kit", url: "https://design.vapor.codes/VaporPressKit.zip").attribute(named: "download", value: nil)
+                                        Link("Press Kit", url: "https://design.vapor.codes/VaporPressKit.zip").attribute(named: "download", value: nil).class("nav-link")
                                     }
                                     ListItem {
-                                        Link("Help", url: "https://vapor.team").linkTarget(.blank)
+                                        Link("Help", url: "https://vapor.team").linkTarget(.blank).class("nav-link")
                                     }
                                 }
                             }.id("footer-resources-links").class("col-6")
@@ -122,18 +119,23 @@ public struct SiteFooter: Component {
                     Div {
                         Text("© QuTheory, LLC \(year)")
                     }.id("footer-copyright").class("my-auto")
-                    
+
                     Div {
                         List {
                             ListItem {
                                 Link(url: "https://twitter.com/codevapor") {
                                     Span().class("vapor-icon icon-twitter-fill")
-                                }.linkTarget(.blank)
+                                }.linkTarget(.blank).attribute(named: "rel", value: "me")
+                            }.class("me-4")
+                            ListItem {
+                                Link(url: "https://hachyderm.io/@codevapor") {
+                                    Span().class("vapor-icon icon-mastodon-fill")
+                                }.linkTarget(.blank).attribute(named: "rel", value: "me")
                             }.class("me-4")
                             ListItem {
                                 Link(url: "https://github.com/vapor") {
                                     Span().class("vapor-icon icon-github-fill")
-                                }.linkTarget(.blank)
+                                }.linkTarget(.blank).attribute(named: "rel", value: "me")
                             }
                         }.class("d-flex")
                     }.id("footer-social-links").class("ms-auto")

Sources/VaporDesign/Components/SiteNavigation.swift

@@ -160,7 +160,7 @@ public struct SiteNavigation<Site: Website>: Component {
                         ListItem {
                             Link(url: "https://github.com/vapor") {
                                 Span().class("vapor-icon icon-github-fill")
-                            }.linkTarget(.blank).class("nav-link")
+                            }.linkTarget(.blank).class("nav-link").attribute(named: "rel", value: "me")
                         }.class("nav-item")
                         ListItem {
                             Link(url: "#") {

Sources/VaporDesign/VaporDesign.swift

@@ -2,36 +2,38 @@ import Plot
 import Publish
 
 public struct VaporDesign<Site: Website> {
-
     let siteLanguage: Language
     let isLocal: Bool
     let isMainSite: Bool
-    
+
     public init(siteLanguage: Language, isLocal: Bool = false, isMainSite: Bool = false) {
         self.siteLanguage = siteLanguage
         self.isLocal = isLocal
         self.isMainSite = isMainSite
     }
-    
+
     public func buildHTML(for page: Location, context: PublishingContext<Site>, body: Node<HTML.DocumentContext>) -> HTML {
         HTML(
             .lang(siteLanguage),
             buildHead(for: page, context: context),
             body
         )
     }
-    
+
     func buildHead(for page: Location, context: PublishingContext<Site>) -> Node<HTML.DocumentContext> {
         let head = Node.head(
             for: page,
             on: context.site,
             stylesheetPaths: [
-                Path(VaporDesignUtilities.buildResourceLink(for: "/main.css", isLocal: isLocal))
+                Path(VaporDesignUtilities.buildResourceLink(for: "/main.css", isLocal: isLocal)),
             ],
             scripts: [
-                Path(VaporDesignUtilities.buildResourceLink(for: "/js/detectColorScheme.js", isLocal: isLocal))
+                Path(VaporDesignUtilities.buildResourceLink(for: "/js/detectColorScheme.js", isLocal: isLocal)),
+                Path(VaporDesignUtilities.buildResourceLink(for: "/js/scrollMainSiteShowcase.js", isLocal: isLocal)),
+                Path(VaporDesignUtilities.buildResourceLink(for: "/js/mainSiteScrollNavbar.js", isLocal: isLocal)),
             ],
-            isLocal: isLocal)
+            isLocal: isLocal
+        )
         return head
     }
 }