From 3ffdb8d413635aa6602dbd8c2d37b2f9f3d42c3f Mon Sep 17 00:00:00 2001 From: Paul Toffoloni <69189821+ptoffy@users.noreply.github.com> Date: Sun, 23 Jun 2024 10:32:08 +0200 Subject: [PATCH] Various fixes (#191) * Add home page and fix minor style issues * Show active pages on demo too * Remove unnecessary force unwrap * Update CI with OID * Update Node version * Remove OID integration for now --------- Co-authored-by: Tim Condon <0xTim@users.noreply.github.com> --- .github/workflows/ci.yml | 32 +++++--- Sources/DesignSite/DesignTheme.swift | 4 +- .../Components/SiteNavigation.swift | 76 +++++++++++-------- Sources/VaporDesign/Models/CurrentSite.swift | 1 + src/js/styleHelpers.js | 19 +++-- src/js/toggleDarkMode.js | 5 +- 6 files changed, 81 insertions(+), 56 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index cc4e959..94e4a43 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -1,4 +1,4 @@ -name: Pull Request Testing +name: PR concurrency: group: ${{ github.workflow }}-${{ github.ref }} cancel-in-progress: true @@ -8,26 +8,34 @@ on: - main jobs: - build: - name: Test, Build, and Deploy + deploy: + name: Build and Deploy runs-on: ubuntu-latest steps: - - uses: aws-actions/configure-aws-credentials@v4 + - name: Configure AWS credentials + uses: aws-actions/configure-aws-credentials@v4 if: ${{ github.event.pull_request.head.repo.full_name == 'vapor/design' && github.actor != 'dependabot[bot]' }} with: aws-access-key-id: ${{ secrets.DESIGN_DEPLOYER_AWS_ACCESS_KEY_ID }} aws-secret-access-key: ${{ secrets.DESIGN_DEPLOYER_AWS_SECRET_ACCESS_KEY }} aws-region: 'us-east-1' - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 + - name: Checkout code + uses: actions/checkout@v4 + - name: Set up Node + uses: actions/setup-node@v4 with: - node-version: 18 + node-version: 20 cache: npm - - uses: ScottBrenner/cfn-lint-action@v2 - - run: swift run - - run: npm install - - run: cfn-lint -t stack.yml - - run: npm run build + - name: Set up CloudFormation Lint + uses: ScottBrenner/cfn-lint-action@v2 + - name: Run CloudFormation Lint + run: cfn-lint -t stack.yml + - name: Build Publish website + run: swift run + - name: Install dependencies + run: npm install + - name: Build Node website + run: npm run build - name: Create S3 Bucket if: ${{ github.event.pull_request.head.repo.full_name == 'vapor/design' && github.actor != 'dependabot[bot]' }} env: diff --git a/Sources/DesignSite/DesignTheme.swift b/Sources/DesignSite/DesignTheme.swift index 5752621..003d777 100644 --- a/Sources/DesignSite/DesignTheme.swift +++ b/Sources/DesignSite/DesignTheme.swift @@ -37,7 +37,7 @@ private struct VaporThemeHTMLFactory: HTMLFactory { let body: Node = .body { let isDemo = true let currentSite: CurrentSite = .main - SiteNavigation(context: context, selectedSelectionID: nil, currentSite: currentSite, currentMainSitePage: nil, isDemo: isDemo) + SiteNavigation(context: context, selectedSelectionID: nil, currentSite: currentSite, currentMainSitePage: .home, isDemo: isDemo) buildMainSiteDemo() SiteFooter(isLocal: true, isDemo: isDemo, currentSite: currentSite) } @@ -188,7 +188,7 @@ private struct VaporThemeHTMLFactory: HTMLFactory { let app = try await Application.make(.detect()) app.get("hello") { req in - return "Hello, world!" + "Hello, world!" } try await app.execute() diff --git a/Sources/VaporDesign/Components/SiteNavigation.swift b/Sources/VaporDesign/Components/SiteNavigation.swift index 23997aa..8acd889 100644 --- a/Sources/VaporDesign/Components/SiteNavigation.swift +++ b/Sources/VaporDesign/Components/SiteNavigation.swift @@ -7,7 +7,7 @@ public struct SiteNavigation: Component { let currentSite: CurrentSite let currentMainSitePage: CurrentPage? let isDemo: Bool - + public init(context: PublishingContext, selectedSelectionID: Site.SectionID?, currentSite: CurrentSite, currentMainSitePage: CurrentPage?, isDemo: Bool = false) { self.context = context self.selectedSelectionID = selectedSelectionID @@ -15,14 +15,14 @@ public struct SiteNavigation: Component { self.currentMainSitePage = currentMainSitePage self.isDemo = isDemo } - + public var body: Component { Navigation { Div { Link(url: "/") { Span().id("vapor-logo").class("d-inline-block align-text-top").accessibilityLabel("Vapor Logo").width(130).height(50) }.class("navbar-brand ms-3") - + Button { Span().id("vapor-navbar-toggler-icon").class("vapor-icon icon-menu-04") }.class("navbar-toggler") @@ -32,29 +32,39 @@ public struct SiteNavigation: Component { .attribute(named: "data-bs-target", value: "#navbarSupportedContent") .attribute(named: "aria-controls", value: "navbarSupportedContent") .attribute(named: "aria-expanded", value: "false") - + Div { List { ListItem { - if isDemo { - return ComponentGroup(members: [Link("Home", url: "#").class("nav-link")]) - } else if currentSite == .main { - let classList = "nav-link" - let link = Link("Home", url: "/").class(classList) + if currentSite == .main { + var classList = "nav-link" + if currentMainSitePage == .home { + classList += " active" + } + let link = if isDemo { + Link("Home", url: "#").class(classList) + } else { + Link("Home", url: "/").class(classList) + } + return ComponentGroup(members: [link]) } else { return ComponentGroup(members: [Link("Home", url: "https://www.vapor.codes/").class("nav-link").linkTarget(.blank)]) } - } + }.class("nav-item") ListItem { - if isDemo { - return ComponentGroup(members: [Link("Showcase", url: "#").class("nav-link")]) - } else if currentSite == .main { + if currentSite == .main { var classList = "nav-link" - if currentMainSitePage! == .showcase { + if currentMainSitePage == .showcase { classList += " active" } - let link = Link("Showcase", url: "/showcase").class(classList) + + let link = if isDemo { + Link("Showcase", url: "#").class(classList) + } else { + Link("Showcase", url: "/showcase").class(classList) + } + return ComponentGroup(members: [link]) } else { #warning("Fix link") @@ -70,19 +80,18 @@ public struct SiteNavigation: Component { Text("Documentation") Span().class("vapor-icon icon-chevron-down ms-auto ms-lg-3").id("documentation-navbar-chevron") } - .class(classList) - .id("documentation-dropdown-link") - .role("button") - .onclick("Vapor.toggleDocumentationDropdown(); return true;") - .attribute(named: "data-bs-toggle", value: "dropdown") - .attribute(named: "aria-expanded", value: "false") - + .class(classList) + .id("documentation-dropdown-link") + .role("button") + .attribute(named: "data-bs-toggle", value: "dropdown") + .attribute(named: "aria-expanded", value: "false") + if currentSite == .docs || currentSite == .apiDocs { docsLink = docsLink.attribute(named: "aria-current", value: "page") } return ComponentGroup { docsLink - + List { ListItem { let linkBody = Div { @@ -96,7 +105,7 @@ public struct SiteNavigation: Component { }.class("nav-dropdown-container-caption d-none d-lg-block") }.class("ms-3") }.class("nav-dropdown-container d-flex") - + if currentSite == .docs { Link(url: "/") { linkBody @@ -107,7 +116,7 @@ public struct SiteNavigation: Component { }.class("dropdown-item").linkTarget(.blank) } }.class("m-lg-2") - + ListItem { let linkBody = Div { Span().class("vapor-icon icon-dataflow-03") @@ -120,7 +129,7 @@ public struct SiteNavigation: Component { }.class("nav-dropdown-container-caption d-none d-lg-block") }.class("ms-3") }.class("nav-dropdown-container d-flex") - + if currentSite == .apiDocs { Link(url: "/") { linkBody @@ -135,14 +144,17 @@ public struct SiteNavigation: Component { } }.class("nav-item dropdown") ListItem { - if isDemo { - return ComponentGroup(members: [Link("Team", url: "#").class("nav-link")]) - } else if currentSite == .main { + if currentSite == .main { var classList = "nav-link" - if currentMainSitePage! == .team { + if currentMainSitePage == .team { classList += " active" } - let link = Link("Team", url: "/team").class(classList) + let link = if isDemo { + Link("Team", url: "#").class(classList) + } else { + Link("Team", url: "/team").class(classList) + } + return ComponentGroup(members: [link]) } else { #warning("Fix link") @@ -155,7 +167,7 @@ public struct SiteNavigation: Component { } else { Link("Blog", url: "https://blog.vapor.codes").class("nav-link").linkTarget(.blank) } - + }.class("nav-item") ListItem { Link(url: "https://github.com/vapor") { diff --git a/Sources/VaporDesign/Models/CurrentSite.swift b/Sources/VaporDesign/Models/CurrentSite.swift index 47f90cc..5c62c9a 100644 --- a/Sources/VaporDesign/Models/CurrentSite.swift +++ b/Sources/VaporDesign/Models/CurrentSite.swift @@ -6,6 +6,7 @@ public enum CurrentSite { } public enum CurrentPage { + case home case team case contributors case evangelists diff --git a/src/js/styleHelpers.js b/src/js/styleHelpers.js index c0d966c..741774b 100644 --- a/src/js/styleHelpers.js +++ b/src/js/styleHelpers.js @@ -1,9 +1,12 @@ -export function toggleDocumentationDropdown() { - const myDropdown = document.getElementById('documentation-navbar-chevron'); +document.addEventListener('DOMContentLoaded', function() { const dropdownLink = document.getElementById('documentation-dropdown-link'); - if (dropdownLink.classList.contains('show')) { - myDropdown.dataset.shown = true; - } else { - myDropdown.dataset.shown = false; - } -} \ No newline at end of file + const chevronIcon = document.getElementById('documentation-navbar-chevron'); + + dropdownLink.addEventListener('show.bs.dropdown', function() { + chevronIcon.dataset.shown = 'true'; + }); + + dropdownLink.addEventListener('hide.bs.dropdown', function() { + chevronIcon.dataset.shown = 'false'; + }); +}); diff --git a/src/js/toggleDarkMode.js b/src/js/toggleDarkMode.js index 53b0466..cc5b06a 100644 --- a/src/js/toggleDarkMode.js +++ b/src/js/toggleDarkMode.js @@ -2,6 +2,7 @@ const toggleSwitch = document.querySelector('#theme-switch'); //function that changes the theme, and sets a localStorage variable to track the theme between page loads function switchTheme(e) { + e.preventDefault(); if (document.documentElement.classList.contains("dark")) { localStorage.setItem('theme', 'light'); document.documentElement.classList.remove("dark"); @@ -12,8 +13,8 @@ function switchTheme(e) { document.documentElement.classList.add("dark"); var metaThemeColor = document.querySelector("meta[name=theme-color]"); metaThemeColor.setAttribute("content", "#141416"); - } + } } // listener for changing themes -toggleSwitch.addEventListener('click', switchTheme, false); \ No newline at end of file +toggleSwitch.addEventListener('click', switchTheme, false);