Skip to content

Commit f90d0d6

Browse files
codediodeiocodediodeio
committed
docs: Astro page transitions
1 parent 15cc05d commit f90d0d6

File tree

8 files changed

+160
-92
lines changed

8 files changed

+160
-92
lines changed

‎docs/astro.config.mjs

+3
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,8 @@ import tailwind from "@astrojs/tailwind";
44

55
// https://astro.build/config
66
export default defineConfig({
7+
experimental: {
8+
viewTransitions: true
9+
},
710
integrations: [tailwind()]
811
});

‎docs/package-lock.json

+18-18
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"dependencies": {
1414
"@astrojs/tailwind": "^4.0.0",
1515
"@tailwindcss/typography": "^0.5.9",
16-
"astro": "^2.9.1",
16+
"astro": "^2.10.7",
1717
"tailwindcss": "^3.3.3"
1818
},
1919
"devDependencies": {

‎docs/src/components/Footer.astro

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
<footer
2-
class="h-36 pt-12 flex flex-col items-center justify-center"
3-
>
1+
<footer
2+
transition:persist
3+
class="h-36 pt-12 flex flex-col items-center justify-center">
44
<a
55
class="mx-2 text-sm underline"
66
href="https://github.com/codediodeio/sveltefire">Source Code</a
77
>
8-
<!-- Place this tag where you want the button to render. -->
9-
<!-- Place this tag where you want the button to render. -->
8+
109
<a
1110
class="github-button"
1211
href="https://github.com/codediodeio/sveltefire"

‎docs/src/components/SideNav.astro

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<nav class="pt-12 w-1/6 min-w-[16rem] bg-gray1 dark:bg-gray7">
1+
<nav id="sidebar" class="pt-12 w-1/6 min-w-[16rem] bg-gray1 dark:bg-gray7 hidden lg:block">
22
<ul class="pl-8 font-code mb-20">
33
<li class="heading">guide</li>
44
<li><a href="/">why?</a></li>

‎docs/src/components/TopNav.astro

+107-51
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,116 @@
1-
<nav class="flex justify-between mx-auto h-20 px-6 w-full bg-gray1 dark:bg-gray7 z-50 relative">
2-
<a
3-
class="grid place-items-center w-14"
4-
href="/"
5-
>
1+
<nav
2+
transition:persist
3+
class="flex justify-between mx-auto h-20 px-6 w-full bg-gray1 dark:bg-gray7 z-50 relative"
4+
>
5+
<div class="flex justify-center items-center">
6+
<button id="sidebarBtn" class="lg:hidden">
7+
<svg
8+
class="fill-gray6 dark:fill-gray2 w-8 mx-2"
9+
xmlns="http://www.w3.org/2000/svg"
10+
viewBox="0 0 24 24"
11+
fill="currentColor"
12+
>
13+
<path
14+
fill-rule="evenodd"
15+
clip-rule="evenodd"
16+
d="M4 5C3.44772 5 3 5.44772 3 6C3 6.55228 3.44772 7 4 7H20C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5H4ZM7 12C7 11.4477 7.44772 11 8 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H8C7.44772 13 7 12.5523 7 12ZM13 18C13 17.4477 13.4477 17 14 17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H14C13.4477 19 13 18.5523 13 18Z"
17+
></path>
18+
</svg>
19+
</button>
20+
<a class="grid place-items-center w-14" href="/">
621
<img id="logo" src="/logo.svg" alt="sveltefire logo" />
722
</a>
8-
9-
<ul class="flex justify-center items-center list-none">
23+
</div>
24+
25+
<ul class="flex justify-center items-center list-none">
26+
<li class="mx-2 md:mx-4 hidden md:block">
27+
<a
28+
href="/guide/start"
29+
class="font-code font-bold text-gray5 dark:text-gray2">start</a
30+
>
31+
</li>
1032

11-
<li class="mx-2 md:mx-4">
12-
<a href="/guide/start" class="font-code font-bold text-gray5 dark:text-gray2">start</a>
13-
</li>
33+
<li class="mx-4">
34+
<button
35+
class="p-2 mr-2 hidden md:flex justify-between items-center bg-gray3 bg-opacity-10 hover:bg-opacity-20 border border-gray4 hover:border-orange-500 transition-all"
36+
>
37+
<span class="text-gray4 dark:text-gray2 w-4 mx-2">
38+
<svg
39+
aria-hidden="true"
40+
focusable="false"
41+
data-prefix="fad"
42+
data-icon="search"
43+
role="img"
44+
xmlns="http://www.w3.org/2000/svg"
45+
viewBox="0 0 512 512"
46+
class="svg-inline--fa fk-search fk-w-16 fk-9x"
47+
>
48+
<g class="fk-group"
49+
><path
50+
fill="currentColor"
51+
d="M208 80a128 128 0 1 1-90.51 37.49A127.15 127.15 0 0 1 208 80m0-80C93.12 0 0 93.12 0 208s93.12 208 208 208 208-93.12 208-208S322.88 0 208 0z"
52+
class="fk-secondary"></path><path
53+
fill="currentColor"
54+
d="M504.9 476.7L476.6 505a23.9 23.9 0 0 1-33.9 0L343 405.3a24 24 0 0 1-7-17V372l36-36h16.3a24 24 0 0 1 17 7l99.7 99.7a24.11 24.11 0 0 1-.1 34z"
55+
class="fk-primary"
56+
>
57+
</path></g
58+
></svg
59+
>
60+
</span>
61+
<span class="mr-12 font-code">search</span>
62+
<span class="mx-2 text-xs border border-gray4 rounded-md p-1 px-2"
63+
>/</span
64+
>
65+
</button>
66+
<button class="flex md:hidden">
67+
<span class="text-gray2 w-6 mx-2"></span>
68+
</button>
69+
</li>
1470

15-
<li class="mx-4">
16-
<button class="p-2 mr-2 hidden md:flex justify-between items-center bg-gray3 bg-opacity-10 hover:bg-opacity-20 border border-gray4 hover:border-orange-500
17-
transition-all">
18-
<span class="text-gray4 dark:text-gray2 w-4 mx-2">
19-
<svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fk-search fk-w-16 fk-9x">
20-
<g class="fk-group"><path fill="currentColor" d="M208 80a128 128 0 1 1-90.51 37.49A127.15 127.15 0 0 1 208 80m0-80C93.12 0 0 93.12 0 208s93.12 208 208 208 208-93.12 208-208S322.88 0 208 0z" class="fk-secondary"></path><path fill="currentColor" d="M504.9 476.7L476.6 505a23.9 23.9 0 0 1-33.9 0L343 405.3a24 24 0 0 1-7-17V372l36-36h16.3a24 24 0 0 1 17 7l99.7 99.7a24.11 24.11 0 0 1-.1 34z" class="fk-primary">
21-
</path></g></svg>
22-
</span>
23-
<span class="mr-12 font-code">search</span>
24-
<span class="mx-2 text-xs border border-gray4 rounded-md p-1 px-2">/</span>
25-
</button>
26-
<button class="flex md:hidden">
27-
<span class="text-gray2 w-6 mx-2"></span>
28-
</button>
29-
</li>
30-
71+
<li
72+
id="dark"
73+
class="w-5 cursor-pointer fill-gray3 dark:fill-orange-500 mr-2"
74+
>
75+
<svg
76+
xmlns="http://www.w3.org/2000/svg"
77+
xml:space="preserve"
78+
style="enable-background:new 0 0 312.812 312.812"
79+
viewBox="0 0 312.812 312.812"
80+
><path
81+
d="M305.2 178.159c-3.2-.8-6.4 0-9.2 2-10.4 8.8-22.4 16-35.6 20.8-12.4 4.8-26 7.2-40.4 7.2-32.4 0-62-13.2-83.2-34.4-21.2-21.2-34.4-50.8-34.4-83.2 0-13.6 2.4-26.8 6.4-38.8 4.4-12.8 10.8-24.4 19.2-34.4 3.6-4.4 2.8-10.8-1.6-14.4-2.8-2-6-2.8-9.2-2-34 9.2-63.6 29.6-84.8 56.8-20.4 26.8-32.4 60-32.4 96 0 43.6 17.6 83.2 46.4 112s68 46.4 112 46.4c36.8 0 70.8-12.8 98-34 27.6-21.6 47.6-52.4 56-87.6 1.6-5.6-1.6-11.2-7.2-12.4z"
82+
></path></svg>
83+
</li>
84+
<li id="light" class="w-5 cursor-pointer fill-orange-500 dark:fill-gray3">
85+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
86+
><path
87+
d="M100.307 168.213a180.083 180.083 0 0 1 67.905-67.905L90.7 71.547A14.9 14.9 0 0 0 71.547 90.7zM77.22 256c0-16.617 2.287-32.71 6.549-47.986L8.687 242.457a14.9 14.9 0 0 0 0 27.086l75.083 34.443A178.326 178.326 0 0 1 77.22 256zM256 77.22a178.32 178.32 0 0 1 47.986 6.549L269.543 8.687a14.9 14.9 0 0 0-27.086 0L208.014 83.77A178.28 178.28 0 0 1 256 77.22zM411.693 168.213l28.76-77.513A14.9 14.9 0 0 0 421.3 71.547l-77.513 28.76a180.102 180.102 0 0 1 67.906 67.906zM256 434.78a178.32 178.32 0 0 1-47.986-6.549l34.443 75.083a14.9 14.9 0 0 0 27.086-.001l34.444-75.083A178.333 178.333 0 0 1 256 434.78zM100.307 343.787 71.547 421.3A14.9 14.9 0 0 0 90.7 440.453l77.513-28.76a180.102 180.102 0 0 1-67.906-67.906zM503.313 242.457l-75.083-34.444c4.262 15.277 6.549 31.369 6.549 47.986s-2.287 32.71-6.549 47.986l75.083-34.443a14.9 14.9 0 0 0 0-27.085zM411.693 343.787a180.083 180.083 0 0 1-67.905 67.905l77.513 28.76a14.897 14.897 0 0 0 15.719-3.434 14.9 14.9 0 0 0 3.434-15.719zM256 404.98c-82.148 0-148.98-66.832-148.98-148.98S173.852 107.02 256 107.02 404.98 173.852 404.98 256 338.148 404.98 256 404.98z"
88+
></path></svg>
89+
</li>
90+
</ul>
91+
</nav>
3192

32-
<li id="dark" class="w-5 cursor-pointer fill-gray3 dark:fill-orange-500 mr-2"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 312.812 312.812" viewBox="0 0 312.812 312.812"><path d="M305.2 178.159c-3.2-.8-6.4 0-9.2 2-10.4 8.8-22.4 16-35.6 20.8-12.4 4.8-26 7.2-40.4 7.2-32.4 0-62-13.2-83.2-34.4-21.2-21.2-34.4-50.8-34.4-83.2 0-13.6 2.4-26.8 6.4-38.8 4.4-12.8 10.8-24.4 19.2-34.4 3.6-4.4 2.8-10.8-1.6-14.4-2.8-2-6-2.8-9.2-2-34 9.2-63.6 29.6-84.8 56.8-20.4 26.8-32.4 60-32.4 96 0 43.6 17.6 83.2 46.4 112s68 46.4 112 46.4c36.8 0 70.8-12.8 98-34 27.6-21.6 47.6-52.4 56-87.6 1.6-5.6-1.6-11.2-7.2-12.4z"/></svg></li>
33-
<li id="light" class="w-5 cursor-pointer fill-orange-500 dark:fill-gray3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M100.307 168.213a180.083 180.083 0 0 1 67.905-67.905L90.7 71.547A14.9 14.9 0 0 0 71.547 90.7zM77.22 256c0-16.617 2.287-32.71 6.549-47.986L8.687 242.457a14.9 14.9 0 0 0 0 27.086l75.083 34.443A178.326 178.326 0 0 1 77.22 256zM256 77.22a178.32 178.32 0 0 1 47.986 6.549L269.543 8.687a14.9 14.9 0 0 0-27.086 0L208.014 83.77A178.28 178.28 0 0 1 256 77.22zM411.693 168.213l28.76-77.513A14.9 14.9 0 0 0 421.3 71.547l-77.513 28.76a180.102 180.102 0 0 1 67.906 67.906zM256 434.78a178.32 178.32 0 0 1-47.986-6.549l34.443 75.083a14.9 14.9 0 0 0 27.086-.001l34.444-75.083A178.333 178.333 0 0 1 256 434.78zM100.307 343.787 71.547 421.3A14.9 14.9 0 0 0 90.7 440.453l77.513-28.76a180.102 180.102 0 0 1-67.906-67.906zM503.313 242.457l-75.083-34.444c4.262 15.277 6.549 31.369 6.549 47.986s-2.287 32.71-6.549 47.986l75.083-34.443a14.9 14.9 0 0 0 0-27.085zM411.693 343.787a180.083 180.083 0 0 1-67.905 67.905l77.513 28.76a14.897 14.897 0 0 0 15.719-3.434 14.9 14.9 0 0 0 3.434-15.719zM256 404.98c-82.148 0-148.98-66.832-148.98-148.98S173.852 107.02 256 107.02 404.98 173.852 404.98 256 338.148 404.98 256 404.98z"/></svg></li>
34-
35-
</ul>
36-
</nav>
37-
3893
<script>
39-
function light() {
40-
// Whenever the user explicitly chooses light mode
41-
localStorage.theme = 'light'
42-
document.documentElement.classList.add('light')
43-
document.documentElement.classList.remove('dark')
44-
}
45-
function dark() {
46-
// Whenever the user explicitly chooses dark mode
47-
localStorage.theme = 'dark'
48-
document.documentElement.classList.add('dark')
49-
document.documentElement.classList.remove('light')
50-
}
51-
document.getElementById("light")!.addEventListener("click", light);
52-
document.getElementById("dark")!.addEventListener("click", dark);
94+
function light() {
95+
// Whenever the user explicitly chooses light mode
96+
localStorage.theme = "light";
97+
document.documentElement.classList.add("light");
98+
document.documentElement.classList.remove("dark");
99+
}
100+
function dark() {
101+
// Whenever the user explicitly chooses dark mode
102+
localStorage.theme = "dark";
103+
document.documentElement.classList.add("dark");
104+
document.documentElement.classList.remove("light");
105+
}
106+
document.getElementById("light")!.addEventListener("click", light);
107+
document.getElementById("dark")!.addEventListener("click", dark);
53108

109+
const sidebarBtn = document.getElementById("sidebarBtn");
110+
sidebarBtn.onclick = function () {
111+
const sidebar = document.getElementById("sidebar");
112+
sidebar.classList.toggle("hidden");
113+
};
54114
</script>
55115

56-
57-
58-
<style>
59-
60-
</style>
116+
<style></style>

‎docs/src/layouts/MainLayout.astro

+23-16
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,9 @@
11
---
2+
import { ViewTransitions } from "astro:transitions";
23
import SideNav from "../components/SideNav.astro";
34
import TopNav from "../components/TopNav.astro";
45
import Footer from "../components/Footer.astro";
56
---
6-
7-
<script is:inline>
8-
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
9-
if (
10-
localStorage.theme === "dark" ||
11-
(!("theme" in localStorage) &&
12-
window.matchMedia("(prefers-color-scheme: dark)").matches)
13-
) {
14-
document.documentElement.classList.add("dark");
15-
} else {
16-
document.documentElement.classList.remove("dark");
17-
}
18-
</script>
19-
207
<html lang="en">
218
<head>
229
<meta charset="utf-8" />
@@ -31,18 +18,38 @@ import Footer from "../components/Footer.astro";
3118

3219
<title>SvelteFire Documentation</title>
3320
<script async defer src="https://buttons.github.io/buttons.js"></script>
21+
<ViewTransitions />
3422
</head>
3523
<body class="dark:bg-gray6 dark:text-white transition-colors duration-500">
3624
<TopNav />
37-
<div class="flex items-stretch">
25+
<div class="flex items-stretch overflow-x-hidden">
3826
<SideNav />
39-
<main class="max-w-screen-2xl min-h-screen p-20 mx-auto prose dark:prose-invert w-full flex flex-col justify-between">
27+
<main
28+
class="max-w-screen-2xl min-h-screen p-6 lg:p-20 mx-auto prose dark:prose-invert w-full flex flex-col justify-between"
29+
>
4030
<article>
4131
<slot />
4232
</article>
4333

4434
<Footer />
4535
</main>
4636
</div>
37+
38+
<script>
39+
function colorMode() {
40+
if (
41+
localStorage.theme === "dark" ||
42+
(!("theme" in localStorage) &&
43+
window.matchMedia("(prefers-color-scheme: dark)").matches)
44+
) {
45+
document.documentElement.classList.add("dark");
46+
} else {
47+
document.documentElement.classList.remove("dark");
48+
}
49+
}
50+
51+
colorMode();
52+
document.addEventListener('astro:beforeload', colorMode);
53+
</script>
4754
</body>
4855
</html>

‎docs/tailwind.config.cjs

+3
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,17 @@ module.exports = {
4242
h1: {
4343
"font-weight": "bold",
4444
"font-size": "2.5rem",
45+
"overflow-wrap": "break-word"
4546
},
4647
h2: {
4748
"font-weight": "bold",
4849
"font-size": "2rem",
50+
"overflow-wrap": "break-word"
4951
},
5052
h3: {
5153
"font-weight": "normal",
5254
"font-size": "1.5rem",
55+
"overflow-wrap": "break-word"
5356
},
5457
h4: {
5558
"font-weight": "normal",

0 commit comments

Comments
 (0)