refactor: ✨ layout refactor complete

refactor: 🔥 removed swup (too much of a headache)
VueTubeApp · Jun 14, 2023 · 354b012 · 354b012
1 parent 962a7c0
commit 354b012
Show file tree

Hide file tree

Showing 12 changed files with 16,011 additions and 8,896 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,9 +1,10 @@
 import { defineConfig } from "astro/config";
 import vue from "@astrojs/vue";
-
 import tailwind from "@astrojs/tailwind";
 
+import mdx from "@astrojs/mdx";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [vue(), tailwind()],
-});
+  integrations: [vue(), tailwind(), mdx()]
+});
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,17 +11,13 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/mdx": "^0.19.7",
     "@astrojs/tailwind": "^3.1.3",
     "@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",
     "astro-iconify": "^1.2.0",
     "octokit": "^2.0.19",
-    "swup": "^3.0.8",
     "tailwindcss": "^3.0.24",
     "three": "^0.152.2",
     "vue": "^3.2.30"

diff --git a/src/components/3d-phone.vue b/src/components/3d-phone.vue
@@ -229,10 +229,5 @@ onMounted(() => {
     controls.update();
     composer.render(scene, camera);
   }
-
-  document.addEventListener("swup:willReplaceContent", function () {
-    window.removeEventListener("mousemove", onMouseMove, false);
-    window.onscroll = null;
-  });
 });
 </script>
diff --git a/src/components/Foot.astro b/src/components/Foot.astro
@@ -59,7 +59,11 @@ const { fixed, classes } = Astro.props;
 
 <footer
   id="footer"
-  class:list={["w-full text-white", fixed ? "fixed bottom-0" : "", classes]}
+  class:list={[
+    "w-full text-white h-[25rem] md:h-[19rem]",
+    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/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -21,7 +21,10 @@ const {
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="description" content="Astro description" />
+    <meta
+      name="description"
+      content="Supercharge your video watching experience on the go. VueTube is the fully customizable, free and open source app built by the community. Download now!"
+    />
     <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" />
@@ -32,18 +35,17 @@ const {
       rel="stylesheet"
     />
     <meta name="generator" content={Astro.generator} />
-    <title>{title}</title>
+    <title>VueTube | {title}</title>
   </head>
-  <body class:list={["flex flex-col items-center min-h-screen"]}>
+  <body
+    class:list={[
+      "flex h-fit min-h-screen flex-col items-center",
+      navPadding ? "pt-[5.5rem]" : "",
+      stickyFooter ? "pb-[25rem] md:pb-[19rem]" : "justify-between",
+    ]}
+  >
     <Head client:load />
-    <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",
-      ]}
-    >
+    <main class:list={["flex flex-col z-10 w-full bg-black text-white"]}>
       <!-- glow circle -->
       <div
         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"
@@ -52,36 +54,9 @@ const {
       <div class="grid w-full place-items-center">
         <slot />
       </div>
-      {showFooter && <Foot fixed={stickyFooter} />}
     </main>
+    {showFooter && <Foot fixed={stickyFooter} />}
   </body>
-  <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({
-          animateScroll: window.matchMedia("(prefers-reduced-motion: reduce)")
-            .matches
-            ? false
-            : {
-                betweenPages: false,
-                samePageWithHash: true,
-                samePage: true,
-              },
-          scrollFriction: 0.3,
-          scrollAcceleration: 0.01,
-          offset: 0,
-        }),
-        new SwupHeadPlugin(),
-        new SwupA11yPlugin(),
-        new SwupScriptsPlugin(),
-      ],
-    });
-  </script>
 </html>
 
 <style is:global>
@@ -105,35 +80,4 @@ const {
   ::-webkit-scrollbar-thumb:hover {
     background: rgba(231, 231, 231, 0.9);
   }
-
-  /* .transition {
-    transition: 0.4s;
-    opacity: 1;
-  }
-
-  html.is-animating .transition-fade {
-    opacity: 0;
-  } */
-
-  /* Swup animation. Everything slides down and fades  */
-  .transition-swup {
-    transition: 0.4s;
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  html.is-animating .transition-swup {
-    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,5 +1,6 @@
 ---
 import Layout from "./BaseLayout.astro";
+import Foot from "../components/Foot.astro";
 
 export interface Props {
   title: string;
@@ -9,10 +10,10 @@ const { title } = Astro.props;
 ---
 
 <Layout title={title} showFooter={false}>
-  <div class="flex min-h-full w-full flex-row">
+  <div class="relative flex w-full flex-row">
     <aside
       id="nav"
-      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"
+      class="top-[5.5rem] flex min-w-[15rem] 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 selection:sticky lg:border-r-0"
       style="height: calc(100dvh - 5.5rem)"
     >
       <!-- TODO : replace with a Vue component that loops over a map of links -->
@@ -138,12 +139,40 @@ const { title } = Astro.props;
       </div>
       <!-- TODO : add sections for this website -->
     </aside>
-    <div class="flex-column flex flex-grow"></div>
+    <div
+      class="flex min-h-full flex-grow flex-col items-center justify-between"
+    >
+      <div class="max-w-screen-md flex-grow">
+        <slot />
+      </div>
+      <Foot fixed={false} />
+    </div>
+    <aside
+      id="nav"
+      class="top-[5.5rem] flex min-w-[15rem] 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 selection:sticky lg:border-r-0"
+      style="height: calc(100dvh - 5.5rem)"
+    >
+      <!-- TODO : replace with a Vue component that loops over a map of links -->
+      <b class="mt-2 pl-2 text-sm font-bold">On This Page</b>
+      <div
+        class="cursor-pointer rounded-lg bg-opacity-50 px-2 py-1 hover:bg-neutral-800"
+        style="text-shadow: 0 0 1rem white;"
+      >
+        VueTube Plugins
+      </div>
+      <div
+        class="cursor-pointer rounded-lg bg-opacity-50 px-2 py-1 hover:bg-neutral-800"
+        style="text-shadow: 0 0 1rem white;"
+      >
+        Capacitor Plugins
+      </div>
+      <!-- TODO : add sections for this website -->
+    </aside>
   </div>
-  <script>
+  <!-- <script>
     const menuButton = document.getElementById("menu");
     menuButton?.addEventListener("click", () => {
       document.getElementById("nav")?.classList.toggle("-translate-x-full");
     });
-  </script>
+  </script> -->
 </Layout>
diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -3,7 +3,7 @@ import Layout from "../layouts/BaseLayout.astro";
 import Interactive from "../components/Interactive.vue";
 ---
 
-<Layout title="VueTube | 404">
+<Layout title="404">
   <div
     class="flex h-screen w-full flex-col items-center justify-center gap-4 rounded-b-[5.5rem] bg-gradient-to-b from-black via-black to-neutral-900"
   >

diff --git a/src/pages/contribute.astro b/src/pages/contribute.astro
@@ -2,4 +2,4 @@
 import SideNav from "../layouts/SideNav.astro";
 ---
 
-<SideNav title="VueTube | Contribute" />
+<SideNav title="Contribute" />
diff --git a/src/pages/docs.astro b/src/pages/docs.astro
@@ -3,7 +3,7 @@ import Layout from "../layouts/BaseLayout.astro";
 import { Icon } from "astro-iconify";
 ---
 
-<Layout title="VueTube | Docs">
+<Layout title="Docs">
   <aside
     class="fixed left-0 top-[5.5rem] flex h-screen flex-col gap-2 overflow-y-auto px-4 py-2"
   >

diff --git a/src/pages/features.astro b/src/pages/features.astro
@@ -2,7 +2,7 @@
 import Layout from "../layouts/SplashLayout.astro";
 ---
 
-<Layout title="VueTube | Features">
+<Layout title="Features">
   <section class="grid h-[80vh] place-items-center text-center">
     <h1 class="max-w-screen-md text-5xl font-black">
       Some Very 3d Mind-Blowing Thing Here