refactor(wip): ♻️ major layout refactor

VueTubeApp · Jun 13, 2023 · 962a7c0 · 962a7c0
1 parent 1c8ecfb
commit 962a7c0
Show file tree

Hide file tree

Showing 13 changed files with 98 additions and 99 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-  "conventionalCommits.scopes": ["home", "navbar", "assets", "footer"]
+  "conventionalCommits.scopes": ["home", "navbar", "assets", "footer", "wip"]
 }
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@astrojs/vue": "^2.2.0",
     "@swup/a11y-plugin": "^3.0.0",
     "@swup/head-plugin": "^1.3.0",
+    "@swup/scripts-plugin": "^1.1.0",
     "@swup/scroll-plugin": "^2.0.2",
     "animejs": "^3.2.1",
     "astro": "^2.5.0",

diff --git a/src/components/Foot.astro b/src/components/Foot.astro
@@ -48,9 +48,19 @@ const socials = [
     external: true,
   },
 ];
+
+export interface Props {
+  fixed: boolean;
+  classes?: string[];
+}
+
+const { fixed, classes } = Astro.props;
 ---
 
-<footer class="fixed bottom-0 w-full text-white">
+<footer
+  id="footer"
+  class:list={["w-full text-white", fixed ? "fixed bottom-0" : "", classes]}
+>
   <div
     class="m-auto flex h-full w-full max-w-screen-md justify-between gap-8 p-8"
   >

diff --git a/src/components/Head.vue b/src/components/Head.vue
@@ -1,5 +1,6 @@
 <template>
   <header
+    id="nav"
     :class="
       menu
         ? 'h-[23rem] rounded-b-3xl bg-neutral-800 bg-opacity-30 duration-300'

diff --git a/src/layouts/Layout.astro → src/layouts/BaseLayout.astro b/src/layouts/Layout.astro → src/layouts/BaseLayout.astro
@@ -4,9 +4,17 @@ import Foot from "../components/Foot.astro";
 
 export interface Props {
   title: string;
+  stickyFooter?: boolean;
+  showFooter?: boolean;
+  navPadding?: boolean;
 }
 
-const { title } = Astro.props;
+const {
+  title,
+  stickyFooter = false,
+  showFooter = true,
+  navPadding = true,
+} = Astro.props;
 ---
 
 <!DOCTYPE html>
@@ -26,26 +34,33 @@ const { title } = Astro.props;
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
   </head>
-  <body class="flex flex-col items-center pb-[30rem] md:pb-[19rem]">
+  <body class:list={["flex flex-col items-center min-h-screen"]}>
     <Head client:load />
-    <main class="z-10 w-full bg-black text-white">
+    <main
+      id="swup"
+      class:list={[
+        "transition-swup min-h-screen z-10 w-full bg-black text-white flex-grow",
+        navPadding ? "md:pt-[5.5rem]" : "",
+        stickyFooter ? "pb-[30rem] md:pb-[19rem]" : "justify-between",
+      ]}
+    >
       <!-- glow circle -->
       <div
-        class="pointer-events-none fixed left-1/2 top-0 -z-10 h-[100vw] w-[100vw] -translate-x-1/2 -translate-y-1/2 rounded-full bg-neutral-800 opacity-50 blur-[420px] portrait:h-[100vh] portrait:w-[100vh]"
+        class="pointer-events-none fixed left-1/2 top-0 -z-10 h-[200dvh] w-full -translate-x-1/2 -translate-y-1/2 rounded-full bg-neutral-800 opacity-50 blur-[420px] portrait:h-screen portrait:w-screen"
       >
       </div>
-      <div id="swup" class="transition-swup grid w-full place-items-center">
+      <div class="grid w-full place-items-center">
         <slot />
       </div>
+      {showFooter && <Foot fixed={stickyFooter} />}
     </main>
   </body>
-
-  <Foot />
   <script>
     import Swup from "swup";
     import SwupScrollPlugin from "@swup/scroll-plugin";
     import SwupHeadPlugin from "@swup/head-plugin";
     import SwupA11yPlugin from "@swup/a11y-plugin";
+    import SwupScriptsPlugin from "@swup/scripts-plugin";
     const swup = new Swup({
       plugins: [
         new SwupScrollPlugin({
@@ -63,6 +78,7 @@ const { title } = Astro.props;
         }),
         new SwupHeadPlugin(),
         new SwupA11yPlugin(),
+        new SwupScriptsPlugin(),
       ],
     });
   </script>
@@ -110,4 +126,14 @@ const { title } = Astro.props;
     opacity: 0;
     transform: translateY(1rem);
   }
+
+  /* Swup animation. Everything slides down and fades  */
+  .transition-swup-none {
+    transition: 0s;
+    opacity: 1;
+  }
+
+  html.is-animating .transition-swup {
+    opacity: 0;
+  }
 </style>
diff --git a/src/layouts/SideNav.astro b/src/layouts/SideNav.astro
@@ -1,8 +1,5 @@
 ---
-import Head from "../components/Head.vue";
-import Foot from "../components/Foot-SideNav.astro";
-
-import { Icon } from "astro-iconify";
+import Layout from "./BaseLayout.astro";
 
 export interface Props {
   title: string;
@@ -11,58 +8,11 @@ export interface Props {
 const { title } = Astro.props;
 ---
 
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="description" content="Astro description" />
-    <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-      rel="stylesheet"
-    />
-    <meta name="generator" content={Astro.generator} />
-    <title>{title}</title>
-    <style is:global>
-      html {
-        background-color: #000;
-        overflow-y: scroll;
-      }
-      /* custom rounded scrollbar */
-      ::-webkit-scrollbar {
-        width: 0.8rem;
-      }
-      ::-webkit-scrollbar-track {
-        background: #000;
-        border: solid 2px #000;
-      }
-      ::-webkit-scrollbar-thumb {
-        background: rgba(231, 231, 231, 0.8);
-        border: solid 2px #000;
-        border-radius: 0.5rem;
-      }
-      ::-webkit-scrollbar-thumb:hover {
-        background: rgba(231, 231, 231, 0.9);
-      }
-    </style>
-  </head>
-  <body class="flex flex-col items-center pb-[30rem] md:pb-[19rem]">
-    <Head client:load />
-    <nav
-      class="fixed top-[5.5rem] flex w-full items-center whitespace-nowrap border-b border-t border-neutral-800 p-4 px-6 text-white outline-2 outline-red-500 backdrop-blur-xl lg:hidden"
-    >
-      <button id="menu" class="mr-6">
-        <Icon class="h-6 w-6" name="mdi:menu" />
-      </button>
-      <span>The Mobile App {">"} Environment Setup</span>
-    </nav>
+<Layout title={title} showFooter={false}>
+  <div class="flex min-h-full w-full flex-row">
     <aside
       id="nav"
-      class="fixed left-0 top-[9rem] z-50 flex -translate-x-full flex-col gap-2 overflow-y-auto border-r border-neutral-800 px-4 py-2 pt-4 text-white backdrop-blur-xl duration-300 ease-in-out lg:top-[5.5rem] lg:translate-x-0 lg:border-r-0"
+      class="flex max-w-xs flex-col gap-2 overflow-y-auto border-r border-neutral-800 px-4 py-2 pt-4 text-white backdrop-blur-xl duration-300 ease-in-out lg:border-r-0"
       style="height: calc(100dvh - 5.5rem)"
     >
       <!-- TODO : replace with a Vue component that loops over a map of links -->
@@ -148,18 +98,18 @@ const { title } = Astro.props;
       >
         Helpers
       </div>
-      <!-- <div
-      class="ml-2 cursor-pointer rounded-lg bg-opacity-50 px-2 py-1 hover:bg-neutral-800"
-      style="text-shadow: 0 0 1rem white;"
-    >
-      Types
-    </div>
-    <div
-      class="ml-2 cursor-pointer rounded-lg bg-opacity-50 px-2 py-1 hover:bg-neutral-800"
-      style="text-shadow: 0 0 1rem white;"
-    >
-      Error Handling
-    </div> -->
+      <div
+        class="ml-2 cursor-pointer rounded-lg bg-opacity-50 px-2 py-1 hover:bg-neutral-800"
+        style="text-shadow: 0 0 1rem white;"
+      >
+        Types
+      </div>
+      <div
+        class="ml-2 cursor-pointer rounded-lg bg-opacity-50 px-2 py-1 hover:bg-neutral-800"
+        style="text-shadow: 0 0 1rem white;"
+      >
+        Error Handling
+      </div>
       <b class="mt-2 pl-2 text-sm font-bold">Plugins</b>
       <div
         class="ml-2 cursor-pointer rounded-lg bg-opacity-50 px-2 py-1 hover:bg-neutral-800"
@@ -188,20 +138,12 @@ const { title } = Astro.props;
       </div>
       <!-- TODO : add sections for this website -->
     </aside>
-    <main class="z-10 grid w-full place-items-center bg-black text-white">
-      <!-- glow circle -->
-      <div
-        class="pointer-events-none fixed left-1/2 top-0 -z-10 h-[100vw] w-[100vw] -translate-x-1/2 -translate-y-1/2 rounded-full bg-neutral-800 opacity-50 blur-[420px] portrait:h-[100vh] portrait:w-[100vh]"
-      >
-      </div>
-      <slot />
-    </main>
-    <Foot />
-    <script>
-      const menuButton = document.getElementById("menu");
-      menuButton?.addEventListener("click", () => {
-        document.getElementById("nav")?.classList.toggle("-translate-x-full");
-      });
-    </script>
-  </body>
-</html>
+    <div class="flex-column flex flex-grow"></div>
+  </div>
+  <script>
+    const menuButton = document.getElementById("menu");
+    menuButton?.addEventListener("click", () => {
+      document.getElementById("nav")?.classList.toggle("-translate-x-full");
+    });
+  </script>
+</Layout>
diff --git a/src/layouts/SplashLayout.astro b/src/layouts/SplashLayout.astro
@@ -0,0 +1,13 @@
+---
+import Layout from "./BaseLayout.astro";
+
+export interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<Layout title={title} stickyFooter={true} navPadding={false}>
+  <slot />
+</Layout>
diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -1,5 +1,5 @@
 ---
-import Layout from "../layouts/Layout.astro";
+import Layout from "../layouts/BaseLayout.astro";
 import Interactive from "../components/Interactive.vue";
 ---
 

diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,5 +1,5 @@
 ---
-import Layout from "../layouts/Layout.astro";
+import Layout from "../layouts/BaseLayout.astro";
 ---
 
 <Layout title="VueTube | About">

diff --git a/src/pages/docs.astro b/src/pages/docs.astro
@@ -1,12 +1,11 @@
 ---
-import Layout from "../layouts/Layout.astro";
+import Layout from "../layouts/BaseLayout.astro";
 import { Icon } from "astro-iconify";
 ---
 
 <Layout title="VueTube | Docs">
   <aside
-    class="fixed left-0 top-[5.5rem] flex flex-col gap-2 overflow-y-auto px-4 py-2"
-    style="height: calc(100dvh - 5.5rem)"
+    class="fixed left-0 top-[5.5rem] flex h-screen flex-col gap-2 overflow-y-auto px-4 py-2"
   >
     <!-- TODO : replace with a Vue component that loops over a map of links -->
     <div class="m-2 text-sm font-bold">Install</div>

diff --git a/src/pages/features.astro b/src/pages/features.astro
@@ -1,5 +1,5 @@
 ---
-import Layout from "../layouts/Layout.astro";
+import Layout from "../layouts/SplashLayout.astro";
 ---
 
 <Layout title="VueTube | Features">

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 import { Icon } from "astro-iconify";
-import Layout from "../layouts/Layout.astro";
+import Layout from "../layouts/SplashLayout.astro";
 import Interactive from "../components/Interactive.vue";
 import Contributors from "../components/Contributors.vue";
 import { Octokit } from "@octokit/core";

diff --git a/yarn.lock b/yarn.lock
@@ -1920,6 +1920,13 @@
   resolved "https://registry.yarnpkg.com/@swup/prettier-config/-/prettier-config-1.0.0.tgz#de34a2b9c7c31a262a3a2fa7d661b2dd7736d980"
   integrity sha512-NbbuG2zT+bQkPcUGyeLNFbiwdunc58e3A/GZpPpUDrXA4ZKN7/rNh97sfG6z5+0OfxrNmDE3N7t+60p5HKhc9w==
 
+"@swup/scripts-plugin@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@swup/scripts-plugin/-/scripts-plugin-1.1.0.tgz#7c4b5d764e82386688a41e8d00211cef4bc2750b"
+  integrity sha512-/2V5cUrmzxxZH91bBk0WjsWMJhjKhb32wZ41Sw/HXAUf2gLvqebvW6Lw98HJsagNXxVqqjmzTDIfdbHGwVsG/w==
+  dependencies:
+    "@swup/plugin" "^1.0.1"
+
 "@swup/scroll-plugin@^2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@swup/scroll-plugin/-/scroll-plugin-2.0.2.tgz#ba91153a37d9a4f7c0e66ea6959fe7dd570ee3be"