Make some showcase page preparations

Sources/DesignSite/DesignTheme.swift

@@ -40,9 +40,12 @@ private struct VaporThemeHTMLFactory: HTMLFactory {
                 SiteNavigation(context: context, selectedSelectionID: nil, currentSite: currentSite, currentMainSitePage: .home, isDemo: isDemo)
                 buildMainSiteDemo()
                 SiteFooter(isLocal: true, isDemo: isDemo, currentSite: currentSite)
+                Script(url: VaporDesignUtilities.buildResourceLink(for: "/js/mainSiteUpdateStarsCount.js", isLocal: true))
+                Script(url: VaporDesignUtilities.buildResourceLink(for: "/js/mainSiteScrollNavbar.js", isLocal: true))
+                Script(url: VaporDesignUtilities.buildResourceLink(for: "/js/mainSiteScrollShowcase.js", isLocal: true))
             }
 
-            let bodyWithClass = body.class("main-site-main-page")
+            let bodyWithClass = body.id("main-page-body").class("main-site-faded-background")
             let builder = VaporDesign<Site>(siteLanguage: context.site.language, isLocal: true)
             return builder.buildHTML(for: section, context: context, body: bodyWithClass.convertToNode())
         } else {
@@ -175,8 +178,8 @@ private struct VaporThemeHTMLFactory: HTMLFactory {
                     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")
+                            Span("22k stars on GitHub").id("main-page-callout-stars-count")
+                        }.class("d-flex align-items-center")
                     }.class("btn btn-link btn-secondary-link")
                 }.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")

Sources/VaporDesign/VaporDesign.swift

@@ -29,8 +29,6 @@ public struct VaporDesign<Site: Website> {
             ],
             scripts: [
                 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
         )

src/scss/vapor/main-site.scss

@@ -67,18 +67,16 @@ body {
     }
 }
 
-.main-site-main-page {
+#main-page-body {
     #vapor-navbar {
-        position: fixed;
         top: -80px;
-        width: 100%;
-        transition: top 0.3s;
-        z-index: 9999;
-        backdrop-filter: blur(20px);
-        -webkit-backdrop-filter: blur(20px);
     }
 }
 
+.main-content {
+    margin-top: 124px;
+}
+
 .main-page-callout-buttons {
     margin-top: 48px;
 }
@@ -101,7 +99,7 @@ body {
     }
 }
 
-.main-site-main-page {
+.main-site-faded-background {
     background-position-x: center;
     background-position-y: 320px;
     background-repeat: no-repeat;
@@ -266,6 +264,12 @@ h2 {
         }
     }
 
+    .col {
+        @include media-breakpoint-down(lg) {
+            margin-top: 32px;
+        }
+    }
+
     pre,
     code {
         white-space: pre-wrap;

src/scss/vapor/navigation.scss

@@ -14,14 +14,19 @@ $navbar-light-active-color: $blue-300;
 
 #vapor-navbar {
     height: 80px;
+    position: fixed;
+    width: 100%;
+    transition: top 0.3s;
+    z-index: 9999;
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
 }
 
 #vapor-logo-footer {
     width: 197px;
     height: 76px;
 }
 
-
 $footer-font-size: 16px;
 
 footer {
@@ -48,7 +53,7 @@ footer {
 }
 
 #footer-copyright {
-    font-size: $footer-font-size
+    font-size: $footer-font-size;
 }
 
 #footer-social-links {
@@ -114,7 +119,9 @@ footer {
 
 @include media-breakpoint-up(lg) {
     #framework-dropdown-menu {
-        box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+        box-shadow:
+            0px 12px 16px -4px rgba(16, 24, 40, 0.08),
+            0px 4px 6px -2px rgba(16, 24, 40, 0.03);
         border-radius: 24px;
         border: 1px solid $grey-200;
     }

static/js/mainSiteScrollNavbar.js

@@ -1,7 +1,5 @@
-window.onscroll = function () { scrollFunction() };
-
-function scrollFunction() {
-    const navbar = document.querySelector(".main-site-main-page .navbar");
+window.onscroll = function () {
+    const navbar = document.querySelector(".navbar");
 
     if (navbar === null) {
         return;

static/js/mainSiteUpdateStarsCount.js

@@ -0,0 +1,13 @@
+document.addEventListener('DOMContentLoaded', function () {
+    fetch('https://api.github.com/repos/vapor/vapor')
+        .then(response => response.json())
+        .then(data => {
+            const starCount = data.stargazers_count;
+            const formattedStarCount = new Intl.NumberFormat('en-US').format(starCount);
+            document.getElementById('main-page-callout-stars-count').textContent = `${formattedStarCount} stars on GitHub`;
+        })
+        .catch(error => {
+            console.error('Error fetching star count:', error);
+            document.getElementById('main-page-callout-stars-count').textContent = '24k stars on GitHub';
+        });
+});