improve library

.changeset/moody-experts-work.md

@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": patch
+---
+
+add `Mdn_Link` and `Mdn_Logo`

.changeset/old-bats-care.md

@@ -0,0 +1,5 @@
+---
+'@ryanatkn/fuz': minor
+---
+
+rename `Tome_Link` from `Library_Tome_Link`

CHANGELOG.md

@@ -53,7 +53,7 @@
 ### Patch Changes
 
 - tweak colors ([#10](https://github.com/ryanatkn/fuz/pull/10))
-- rename `Library_Tome_Link` from `Library_Vocab` ([#12](https://github.com/ryanatkn/fuz/pull/12))
+- rename `Tome_Link` from `Library_Vocab` ([#12](https://github.com/ryanatkn/fuz/pull/12))
 
 ## 0.88.0
 

package.json

@@ -213,16 +213,21 @@
       "default": "./dist/Library_Panel.svelte",
       "types": "./dist/Library_Panel.svelte.d.ts"
     },
-    "./Library_Tome_Link.svelte": {
-      "svelte": "./dist/Library_Tome_Link.svelte",
-      "default": "./dist/Library_Tome_Link.svelte",
-      "types": "./dist/Library_Tome_Link.svelte.d.ts"
-    },
     "./Library.svelte": {
       "svelte": "./dist/Library.svelte",
       "default": "./dist/Library.svelte",
       "types": "./dist/Library.svelte.d.ts"
     },
+    "./Mdn_Link.svelte": {
+      "svelte": "./dist/Mdn_Link.svelte",
+      "default": "./dist/Mdn_Link.svelte",
+      "types": "./dist/Mdn_Link.svelte.d.ts"
+    },
+    "./Mdn_Logo.svelte": {
+      "svelte": "./dist/Mdn_Logo.svelte",
+      "default": "./dist/Mdn_Logo.svelte",
+      "types": "./dist/Mdn_Logo.svelte.d.ts"
+    },
     "./Package_Detail.svelte": {
       "svelte": "./dist/Package_Detail.svelte",
       "default": "./dist/Package_Detail.svelte",
@@ -305,6 +310,11 @@
       "default": "./dist/Tome_Detail.svelte",
       "types": "./dist/Tome_Detail.svelte.d.ts"
     },
+    "./Tome_Link.svelte": {
+      "svelte": "./dist/Tome_Link.svelte",
+      "default": "./dist/Tome_Link.svelte",
+      "types": "./dist/Tome_Link.svelte.d.ts"
+    },
     "./Tome_Title.svelte": {
       "svelte": "./dist/Tome_Title.svelte",
       "default": "./dist/Tome_Title.svelte",
@@ -314,6 +324,10 @@
       "default": "./dist/tome.js",
       "types": "./dist/tome.d.ts"
     },
+    "./variable_data.js": {
+      "default": "./dist/variable_data.js",
+      "types": "./dist/variable_data.d.ts"
+    },
     "./variables.js": {
       "default": "./dist/variables.js",
       "types": "./dist/variables.d.ts"

src/lib/Mdn_Link.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import {strip_start} from '@ryanatkn/belt/string.js';
+
+	import Mdn_Logo from '$lib/Mdn_Logo.svelte';
+
+	export let href: string; // Web/HTML/Element
+
+	$: final_href = href.startsWith('https://')
+		? href
+		: `https://developer.mozilla.org/en-US/docs/${strip_start(href, '/')}`;
+</script>
+
+<a {...$$restProps} href={final_href} class="chip"
+	><span class="logo_wrapper"><Mdn_Logo /></span><slot /></a
+>
+
+<style>
+	.logo_wrapper {
+		display: inline-block;
+		margin-right: var(--space_sm);
+		vertical-align: middle;
+	}
+</style>

src/lib/Mdn_Logo.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	export let size = 'var(--size, var(--size_md))';
+	export let fill = '#8cb4ff';
+	export let label = 'GitHub icon';
+	export let attrs: any = undefined;
+
+	// TODO do something more optimal
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	aria-label={label}
+	viewBox="0 0 100 100"
+	style:width={size}
+	style:height={size}
+	fill="none"
+	{...attrs}
+>
+	<path
+		d="M42 .2 13.4 92.3H1.7L30.2.2Zm10.4 0v92.1H42V.2Zm40.3 0L64.2 92.3H52.5L81 .2Zm10.4 0v92.1H92.7V.2Z"
+		class="logo-m"
+		{fill}
+	></path>
+</svg>

src/lib/style.css

@@ -152,27 +152,45 @@ li {
 }
 
 h1 {
-	font-size: var(--size_xl3);
+	--size: var(--size_xl3);
+	font-size: var(
+		--size
+	); /* TODO use this pattern elsewhere? provides API to components like `Mdn_Logo` */
 	font-weight: 300;
 }
 h2 {
-	font-size: var(--size_xl2);
+	--size: var(--size_xl2);
+	font-size: var(
+		--size
+	); /* TODO use this pattern elsewhere? provides API to components like `Mdn_Logo` */
 	font-weight: 400;
 }
 h3 {
-	font-size: var(--size_xl);
+	--size: var(--size_xl);
+	font-size: var(
+		--size
+	); /* TODO use this pattern elsewhere? provides API to components like `Mdn_Logo` */
 	font-weight: 500;
 }
 h4 {
-	font-size: var(--size_lg);
+	--size: var(--size_lg);
+	font-size: var(
+		--size
+	); /* TODO use this pattern elsewhere? provides API to components like `Mdn_Logo` */
 	font-weight: 700;
 }
 h5 {
-	font-size: var(--size_md);
+	--size: var(--size_md);
+	font-size: var(
+		--size
+	); /* TODO use this pattern elsewhere? provides API to components like `Mdn_Logo` */
 	font-weight: 900;
 }
 h6 {
-	font-size: var(--size_sm);
+	--size: var(--size_sm);
+	font-size: var(
+		--size
+	); /* TODO use this pattern elsewhere? provides API to components like `Mdn_Logo` */
 	font-weight: 600;
 	text-transform: uppercase;
 }
@@ -933,3 +951,7 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories
 a.chip {
 	font-weight: 700;
 }
+
+.font_family_mono {
+	font-family: var(--font_family_mono);
+}

src/lib/variable_data.ts

@@ -0,0 +1,20 @@
+export const font_sizes = [
+	'xs',
+	'sm',
+	'md',
+	'lg',
+	'xl',
+	'xl2',
+	'xl3',
+	'xl4',
+	'xl5',
+	'xl6',
+	'xl7',
+	'xl8',
+	'xl9',
+];
+
+// TODO maybe suffix with `_set` and also export the array?
+export const font_size_names = font_sizes.map((s) => 'size_' + s);
+
+export const font_size_names_set = new Set(font_size_names);

src/routes/Font_Size_Control.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import {font_sizes} from '$lib/variable_data.js';
+	import Style_Variable_Button from '$routes/Style_Variable_Button.svelte';
+
+	// TODO @multiple publish in $lib when ready
+
+	// TODO the API is strange
+
+	export let selected_font_size = 2; // TODO improve API, is index for `'md'`
+
+	const min = 1;
+	const max = font_sizes.length;
+
+	$: selected_name = font_sizes[selected_font_size - 1];
+</script>
+
+<label
+	><div class="title row width_full wrap">
+		<slot>font-size</slot> =
+		<input
+			class="inline"
+			type="number"
+			style:width="var(--space_xl7)"
+			style:min-width="var(--space_xl7)"
+			bind:value={selected_font_size}
+			{min}
+			step={1}
+			{max}
+		/>
+		= var(<Style_Variable_Button name="size_{selected_name}"
+			>--size_{selected_name}</Style_Variable_Button
+		>)
+	</div>
+	<input type="range" bind:value={selected_font_size} {min} step={1} {max} />
+</label>

src/routes/Font_Weight_Control.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	// TODO @multiple publish in $lib when ready
+
+	export let selected_font_weight = 500;
+</script>
+
+<label
+	><div class="title row width_full wrap">
+		<slot>font-weight</slot> =
+		<input
+			class="inline flex_1"
+			type="number"
+			bind:value={selected_font_weight}
+			min={100}
+			step={100}
+			max={900}
+		/>
+	</div>
+	<input type="range" bind:value={selected_font_weight} min={100} step={100} max={900} />
+</label>

src/routes/Style_Variable_Button.svelte

@@ -21,6 +21,8 @@
 </script>
 
 <button
+	type="button"
+	{...$$restProps}
 	class={classes}
 	class:inline
 	class:plain

src/routes/library/Contextmenu/+page.svelte

@@ -5,6 +5,7 @@
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import Color_Scheme_Input from '$lib/Color_Scheme_Input.svelte';
+	import Mdn_Link from '$lib/Mdn_Link.svelte';
 	import Theme_Input from '$lib/Theme_Input.svelte';
 	import Dialog from '$lib/Dialog.svelte';
 	import Tome_Detail from '$lib/Tome_Detail.svelte';
@@ -231,8 +232,8 @@
 			<p>
 				On touch devices, we detect tap-and-hold (aka longpress) instead of simply overriding the
 				web's
-				<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event"
-					><code>'contextmenu'</code> event</a
+				<Mdn_Link href="Web/API/Element/contextmenu_event"
+					><code>'contextmenu'</code> event</Mdn_Link
 				>
 				because iOS does not support this web standard as of July 2023 as described in
 				<a href="https://bugs.webkit.org/show_bug.cgi?id=213953">this WebKit bug report</a>. The Fuz
@@ -275,9 +276,8 @@
 					that opened it
 				</li>
 				<li>
-					gives haptic feedback on open with <a
-						href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate"
-						><code>navigator.vibrate</code></a
+					gives haptic feedback on open with <Mdn_Link href="Web/API/Navigator/vibrate"
+						><code>navigator.vibrate</code></Mdn_Link
 					>
 					(may remain broken due to the iOS longpress workaround, see
 					<a href="https://github.com/ryanatkn/fuz/pull/319">this PR</a>)

src/routes/library/Redirect/+page.svelte

@@ -3,6 +3,7 @@
 
 	import {get_tome} from '$lib/tome.js';
 	import Redirect from '$lib/Redirect.svelte';
+	import Mdn_Link from '$lib/Mdn_Link.svelte';
 	import Tome_Detail from '$lib/Tome_Detail.svelte';
 
 	const LIBRARY_ITEM_NAME = 'Redirect';
@@ -11,19 +12,17 @@
 
 <Tome_Detail {tome}>
 	<div class="prose">
-		<p class="width_sm">
-			Adds a redirect for a page using <a
-				href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections#html_redirections"
-				>a meta tag</a
+		<p>
+			Adds a redirect for a page using <Mdn_Link href="Web/HTTP/Redirections#html_redirections"
+				>a meta tag</Mdn_Link
 			>
 			with
-			<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#http-equiv"
-				>the <code>refresh</code> header</a
-			>. Includes a rendered link and JS navigation fallback.
+			<Mdn_Link href="Web/HTML/Element/meta#http-equiv">the <code>refresh</code> header</Mdn_Link>.
+			Includes a rendered link and JS navigation fallback.
 		</p>
 		<!-- TODO make this a generic data-driven helper -->
 		<Code content={`import Redirect from '@ryanatkn/fuz/Redirect.svelte';`} lang="ts" />
-		<aside class="width_sm">
+		<aside>
 			Please note: <code>auto={'{'}false}</code> is only used here to prevent the page from redirecting!
 			Normally you wouldn't include it as a prop.
 		</aside>

src/routes/library/Style_Examples.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Mdn_Link from '$lib/Mdn_Link.svelte';
+
 	import {get_theme} from '$lib/theme.js';
 
 	const theme = get_theme();
@@ -31,7 +33,7 @@
 		</ul>
 		<p>
 			p and <code>code</code> with
-			<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">links</a>
+			<Mdn_Link href="Web/Accessibility">links</Mdn_Link>
 		</p>
 		{#each {length: 3} as _}
 			<p class="width_sm">

src/routes/library/buttons/+page.svelte

@@ -18,8 +18,10 @@
 </script>
 
 <Tome_Detail {tome}>
-	<Code content={`<button>`} />
-	<button>button</button>
+	<div class="spaced">
+		<Code content={`<button>`} />
+		<button>button</button>
+	</div>
 	<div class="prose">
 		<section>
 			<p>
@@ -80,7 +82,7 @@
 
 	<div class="prose">
 		<h3>
-			<code>button</code> with CSS class <code>.selected</code>
+			<code>button</code> with <code>.selected</code>
 		</h3>
 	</div>
 	<section style:margin-bottom="var(--space_xl4)">