improve library headings (#27)

ryanatkn · Jun 10, 2024 · b10fb17 · b10fb17
1 parent ae133cb
commit b10fb17
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 67 deletions.
diff --git a/.changeset/many-clocks-kneel.md b/.changeset/many-clocks-kneel.md
@@ -0,0 +1,5 @@
+---
+'@ryanatkn/fuz': patch
+---
+
+improve library headings
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -55,12 +55,12 @@
     "@typescript-eslint/eslint-plugin": "^7.10.0",
     "@typescript-eslint/parser": "^7.10.0",
     "eslint": "^8.57.0",
-    "eslint-plugin-svelte": "^2.36.0-next.13",
+    "eslint-plugin-svelte": "^2.39.3",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.3",
     "prism-svelte": "^0.5.0",
     "prismjs": "^1.29.0",
-    "svelte": "^5.0.0-next.141",
+    "svelte": "^5.0.0-next.153",
     "svelte-check": "^3.7.1",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",

diff --git a/src/app.html b/src/app.html
@@ -7,6 +7,7 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
+		<noscript>This website temporarily requires JS until some bugs get fixed.</noscript>
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/Hashlink.svelte b/src/lib/Hashlink.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <a class="hashlink" href="#{slug}" aria-label="hashlink"
-	>{#if children}{@render children()}{:else}🔗{/if}</a
+	>{#if children}{@render children()}{:else}#{/if}</a
 >
 <span class="hashlink_scroll_target" id={slug} aria-hidden="true"></span>
 
@@ -20,9 +20,8 @@
 
 	.hashlink {
 		font-size: var(--size_lg);
-		position: absolute;
-		left: -3.5rem;
-		bottom: calc(var(--size, var(--size_md)) * 0.1);
+		padding: 0 var(--space_sm);
+		margin-left: var(--space_sm);
 		opacity: 0;
 		transition: opacity var(--duration_2);
 	}
@@ -33,13 +32,6 @@
 		left: 0;
 	}
 
-	/* sync this breakpoint with `Library` */
-	@media (max-width: 1000px) {
-		.hashlink {
-			position: static;
-		}
-	}
-
 	/* sync this breakpoint with `Library` */
 	@media (max-width: 800px) {
 		.hashlink {

diff --git a/src/lib/Pending_Button.svelte b/src/lib/Pending_Button.svelte
@@ -19,9 +19,9 @@
 </script>
 
 <button type="button" {...attrs} disabled={disabled ?? pending} {title} class:pending {onclick}>
-	<div class="content">
+	<span class="content">
 		{@render children()}
-	</div>
+	</span>
 	{#if pending}
 		<div class="animation">
 			<Pending_Animation {running} />

diff --git a/src/lib/Redirect.svelte b/src/lib/Redirect.svelte
@@ -24,9 +24,15 @@
 		children?: Snippet<[url: string]>;
 	}
 
-	const {host = '', path = $page.url.pathname, auto = true, children}: Props = $props();
+	const {host = '', path = undefined, auto = true, children}: Props = $props();
 
-	const url = host + path;
+	// TODO This line shouldn't exist, `path = undefined`, should be `path = $page.url.pathname`,
+	// but it appears to be a bug in Svelte (or possibly SvelteKit) during SSR:
+	// `ReferenceError: $page is not defined`, the `$page` isn't a variable in the file as expected.
+	// Look to see if it's reported, and if not make a reproduction.
+	const final_path = path ?? $page.url.pathname;
+
+	const url = host + final_path;
 
 	if (auto && browser) void goto(url, {replaceState: true});
 </script>

diff --git a/src/lib/Tome_Subheading.svelte b/src/lib/Tome_Subheading.svelte
@@ -31,25 +31,26 @@
 		library_links.add(id, text, slug, tag);
 		onDestroy(() => library_links.remove(id));
 	}
+
+	const classes = $derived('tome_subheading' + (attrs?.class ? ' ' + attrs.class : ''));
 </script>
 
-{#if tag === 'h4'}
-	<h4 {...attrs}>{@render content()}</h4>
-{:else}
-	<h3 {...attrs}>{@render content()}</h3>
-{/if}
+<svelte:element this={tag} {...attrs} class={classes}>{@render content()}</svelte:element>
 
 {#snippet content()}
 	{#if children}{@render children()}{:else}{text}{/if}
 	<Hashlink {slug} />
 {/snippet}
 
 <style>
-	:is(h3, h4) {
+	.tome_subheading {
 		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
 	}
 	/* TODO @multiple how can this be done composably? currently using `:global` at usage site - ideally we'd continue to use :hover instead of JS */
-	:is(h3, h4):hover :global(.hashlink) {
+	.tome_subheading:hover :global(.hashlink) {
 		opacity: 1;
 	}
 </style>
diff --git a/src/lib/Tome_Title.svelte b/src/lib/Tome_Title.svelte
@@ -48,8 +48,11 @@
 
 <style>
 	.tome_title {
-		margin-top: var(--space_xl4);
 		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-top: var(--space_xl4);
 	}
 	/* TODO @multiple how can this be done composably? currently using `:global` at usage site - ideally we'd continue to use :hover instead of JS */
 	.tome_title:hover :global(.hashlink) {

diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
@@ -1,6 +1,8 @@
 export const prerender = true;
-// TODO BLOCK remove this when we find that sneaky div in a p
-// it also causes a bug in Vite with Prism that requires deleting the Vite cache directory,
+// TODO BLOCK This appears to cause a bug in Vite with Prism via @ryanatkn/fuz_code
+// that requires deleting the Vite cache directory
+// (deleting `node_modules/.vite` is the only solution I can find,
+// restarting the dev server and hard reloading the browser doesn't work ),
 // though I don't see an open issue, only the closed one
 // if for some reason this isn't deleted, be sure to add a `noscript` tag
 export const ssr = false;
diff --git a/src/routes/package.ts b/src/routes/package.ts
@@ -48,12 +48,12 @@ export const package_json = {
 		'@typescript-eslint/eslint-plugin': '^7.10.0',
 		'@typescript-eslint/parser': '^7.10.0',
 		eslint: '^8.57.0',
-		'eslint-plugin-svelte': '^2.36.0-next.13',
+		'eslint-plugin-svelte': '^2.39.3',
 		prettier: '^3.2.5',
 		'prettier-plugin-svelte': '^3.2.3',
 		'prism-svelte': '^0.5.0',
 		prismjs: '^1.29.0',
-		svelte: '^5.0.0-next.141',
+		svelte: '^5.0.0-next.153',
 		'svelte-check': '^3.7.1',
 		tslib: '^2.6.2',
 		typescript: '^5.4.5',