Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improve library headings #27

Merged
merged 7 commits into from
Jun 10, 2024
Merged

improve library headings #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
38e11f0
wip
ryanatkn Jun 10, 2024
c0ecc7a
wip
ryanatkn Jun 10, 2024
c9fc0d2
wip
ryanatkn Jun 10, 2024
7977dbd
wip
ryanatkn Jun 10, 2024
923653b
wip
ryanatkn Jun 10, 2024
544cd2a
wip
ryanatkn Jun 10, 2024
2a4fa56
wip
ryanatkn Jun 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/many-clocks-kneel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@ryanatkn/fuz': patch
---

improve library headings
60 changes: 22 additions & 38 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
14 changes: 3 additions & 11 deletions src/lib/Hashlink.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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);
}
Expand All @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions src/lib/Pending_Button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
10 changes: 8 additions & 2 deletions src/lib/Redirect.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
15 changes: 8 additions & 7 deletions src/lib/Tome_Subheading.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
5 changes: 4 additions & 1 deletion src/lib/Tome_Title.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
6 changes: 4 additions & 2 deletions src/routes/+layout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 2 additions & 2 deletions src/routes/package.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Loading