Skip to content
This repository has been archived by the owner on Oct 24, 2024. It is now read-only.

Commit

Permalink
refactor(wip): ♻️ major layout refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
404-Program-not-found committed Jun 13, 2023
1 parent 1c8ecfb commit 962a7c0
Show file tree
Hide file tree
Showing 13 changed files with 98 additions and 99 deletions.
2 changes: 1 addition & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"conventionalCommits.scopes": ["home", "navbar", "assets", "footer"]
"conventionalCommits.scopes": ["home", "navbar", "assets", "footer", "wip"]
}
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
12 changes: 11 additions & 1 deletion src/components/Foot.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
1 change: 1 addition & 0 deletions src/components/Head.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<header
id="nav"
:class="
menu
? 'h-[23rem] rounded-b-3xl bg-neutral-800 bg-opacity-30 duration-300'
Expand Down
40 changes: 33 additions & 7 deletions src/layouts/Layout.astro → src/layouts/BaseLayout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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({
Expand All @@ -63,6 +78,7 @@ const { title } = Astro.props;
}),
new SwupHeadPlugin(),
new SwupA11yPlugin(),
new SwupScriptsPlugin(),
],
});
</script>
Expand Down Expand Up @@ -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>
108 changes: 25 additions & 83 deletions src/layouts/SideNav.astro
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 -->
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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>
13 changes: 13 additions & 0 deletions src/layouts/SplashLayout.astro
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion src/pages/404.astro
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
import Layout from "../layouts/Layout.astro";
import Layout from "../layouts/BaseLayout.astro";
import Interactive from "../components/Interactive.vue";
---

Expand Down
2 changes: 1 addition & 1 deletion src/pages/about.astro
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
import Layout from "../layouts/Layout.astro";
import Layout from "../layouts/BaseLayout.astro";
---

<Layout title="VueTube | About">
Expand Down
5 changes: 2 additions & 3 deletions src/pages/docs.astro
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/features.astro
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
import Layout from "../layouts/Layout.astro";
import Layout from "../layouts/SplashLayout.astro";
---

<Layout title="VueTube | Features">
Expand Down
2 changes: 1 addition & 1 deletion src/pages/index.astro
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
7 changes: 7 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit 962a7c0

Please sign in to comment.