Skip to content

Commit b90f0f9

Browse files
hirassohirasso
committed
Optimize website
1 parent 352434a commit b90f0f9

File tree

16 files changed

+181
-129
lines changed

16 files changed

+181
-129
lines changed

‎website/src/components/CodeBlock.astro‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
import { Code } from "astro:components";
3+
4+
interface Props {
5+
code: string;
6+
lang?: "js" | "css";
7+
inline?: boolean;
8+
}
9+
let { code, lang = "js", inline = false } = Astro.props;
10+
---
11+
12+
<Code code={code.trim()} lang={lang} inline={inline && true} theme="catppuccin-frappe" />

‎website/src/components/DebugInfo.astro‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
---
22
export interface Props {
3-
text: string;
3+
text: string;
4+
global?: boolean;
45
}
5-
const { text } = Astro.props;
6+
const { text, global = false } = Astro.props;
67
---
78

89
<p
9-
data-debug-info
10-
class="absolute top-0 right-0 rounded-bl-md text-end bg-black/50 backdrop-blur-lg text-white px-2.5 pt-1 pb-1.5 font-mono text-xs"
10+
data-debug-info={!global}
11+
data-global-debug-info={!!global}
12+
class:list={[
13+
"rounded-md bg-black/50 backdrop-blur-lg text-white px-2.5 pt-1 pb-1.5 font-mono text-xs max-w-5/6 pointer-events-none",
14+
global ? "bottom-4 left-4 fixed" : "top-1 left-1 absolute",
15+
]}
1116
>
1217
{text}
1318
</p>

‎website/src/components/DefaultPageContent.astro‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎website/src/components/Head.astro‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,13 @@ export interface Props {
66
noindex?: boolean;
77
}
88
9-
const { title, description, noindex, image = '/social.png' } = Astro.props;
9+
const { title, description, noindex = false, image = '/social.png' } = Astro.props;
1010
---
1111

1212
<!-- Global Metadata -->
1313
<meta charset="utf-8" />
1414
<meta name="viewport" content="width=device-width,initial-scale=1" />
1515
<link rel="icon" type="image/png" href="/favicon.png" />
16-
<meta name="generator" content={Astro.generator} />
1716

1817
{noindex && <meta name="robots" content="noindex, nofollow" />}
1918

‎website/src/components/Header.astro‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import { SITE_DESCRIPTION } from "../consts.ts";
44
import { Code } from "astro:components";
55
---
66

7-
<header id="header" class="p-4">
8-
<div class="text-center mt-16 mb-4">
7+
<header id="header" class="px-4 my-[max(5rem,8%)]">
8+
<div class="text-center">
99
<h1>
10-
<a class="block text-emerald-300 text-3xl italic md:text-8xl my-2" href="/">
10+
<a class="block text-emerald-300 italic text-headline my-2" href="/">
1111
restore-scroll
1212
</a>
1313
</h1>
@@ -34,6 +34,7 @@ import { Code } from "astro:components";
3434
</a>
3535

3636
<Nav
37+
ariaLabel="Main Navigation"
3738
items={[
3839
{
3940
href: "/",

‎website/src/components/Nav.astro‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
---
22
export type Props = {
33
small?: boolean;
4+
ariaLabel: string;
45
items: {
56
href: string;
67
label: string;
78
}[];
89
};
910
10-
const { items, small = false } = Astro.props;
11+
const { ariaLabel, items, small = false } = Astro.props;
1112
const { pathname: currentPath } = Astro.url;
1213
---
1314

1415
{
1516
items.length > 0 && (
16-
<nav aria-label="Main navigation" class="mb-8">
17+
<nav aria-label={ariaLabel} class="my-4">
1718
<div class="flex justify-center rounded-md shadow-sm" role="group">
1819
{items.map(({ label, href }, index) => {
1920
const isCurrent =

‎website/src/components/ScrollingElements.astro‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
import Tiles from "./Tiles.astro";
3+
import Table from "./Table.astro";
4+
import DebugInfo from "./DebugInfo.astro";
5+
interface Props {
6+
vertical?: boolean;
7+
horizontal?: boolean;
8+
table?: boolean;
9+
}
10+
const { vertical = false, horizontal = false, table = false } = Astro.props;
11+
---
12+
13+
<div class="space-y-5 mb-4">
14+
{
15+
!!table && (
16+
<section
17+
data-testid="both-axis"
18+
class="relative overflow-hidden rounded-sm text-black/50"
19+
>
20+
<div
21+
class="outline-2 rounded-lg w-full h-100 overflow-auto"
22+
data-testid="both-axis-scroll-container"
23+
>
24+
<Table rows={20} columns={20} idPrefix="both-axis" />
25+
</div>
26+
<DebugInfo text="scroll down and right" />
27+
</section>
28+
)
29+
}
30+
31+
{
32+
!!vertical && (
33+
<section
34+
data-testid="vertical"
35+
class="relative overflow-hidden rounded-sm text-black/50"
36+
>
37+
<div
38+
class="overflow-y-auto h-50 w-full --vertical"
39+
data-testid="vertical-scroll-container"
40+
>
41+
<Tiles amount={100} direction="vertical" idPrefix="vertical" />
42+
</div>
43+
<DebugInfo text="scroll down" />
44+
</section>
45+
)
46+
}
47+
48+
{
49+
!!horizontal && (
50+
<section
51+
data-testid="horizontal"
52+
class="relative overflow-hidden rounded-sm text-black/50"
53+
>
54+
<div
55+
class="outline-2 rounded-sm w-full overflow-x-auto --horizontal"
56+
data-testid="horizontal-scroll-container"
57+
>
58+
<Tiles amount={50} direction="horizontal" idPrefix="horizontal" />
59+
</div>
60+
<DebugInfo text="scroll right" />
61+
</section>
62+
)
63+
}
64+
</div>

‎website/src/js/global.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,6 @@ export function showDebugInfo(
2121

2222
info.innerHTML =
2323
type === "restore"
24-
? `${type}d (top: ${top}px, left: ${left}px)`
25-
: `${type}d (top: ${top}px, left: ${left}px) – go back and forth or reload to restore`;
24+
? `✅ restored (top: ${top}px, left: ${left}px)`
25+
: `💾 stored (top: ${top}px, left: ${left}px) – go back and forth or reload to restore`;
2626
}

‎website/src/js/spa.ts‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import { restoreScroll } from "../../../src/index.js";
55
import { showDebugInfo } from "./global.js";
66
import { $$ } from "./helpers.js";
77

8-
window.history.scrollRestoration = "auto";
8+
window.history.scrollRestoration = "manual";
99

10-
function initPage() {
11-
$$(".overflow-y-auto,.overflow-x-auto,.overflow-auto").forEach((el) => {
10+
function restore() {
11+
$$(":root,.overflow-y-auto,.overflow-x-auto,.overflow-auto").forEach((el) => {
1212
restoreScroll(el, {
1313
debug: true,
1414
events: {
@@ -18,17 +18,16 @@ function initPage() {
1818
});
1919
});
2020
}
21-
22-
initPage();
21+
restore();
2322

2423
new Swup({
25-
containers: ["#swup"],
2624
plugins: [new Theme({ mainElement: "#swup" }), new SwupMorphPlugin()],
2725
hooks: {
28-
"page:view": initPage,
26+
"page:view": restore,
2927
"visit:start": (visit) => {
3028
visit.scroll.reset = false;
3129
},
3230
},
33-
ignoreVisit: (url) => !url.startsWith("/spa-"),
31+
ignoreVisit: (url, { el }) =>
32+
!url.startsWith("/spa-") || !el?.closest("[data-swup-morph]"),
3433
});

‎website/src/layouts/Layout.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ const { title, description, noindex, fullBleed = false } = Astro.props;
2727
<body class="bg-black text-white font-mono font-light leading-[1.6]">
2828
<Header />
2929

30-
<main class:list={["my-4 px-4", !fullBleed && "mx-auto max-w-6xl"]}>
31-
<div class="my-8 text-center max-w-2xl mx-auto">
30+
<main class:list={["my-4 px-4", !fullBleed && "mx-auto max-w-5xl"]}>
31+
<div class="my-4 text-center max-w-2xl mx-auto">
3232
<slot name="instructions" />
3333
</div>
3434

0 commit comments

Comments
 (0)