diff --git a/README.md b/README.md index 7aa2833..7078b8f 100644 --- a/README.md +++ b/README.md @@ -1 +1,4 @@ -doodly fuck \ No newline at end of file +# Scratch +## (And the starting over thereof) + +We'll build this by hand, one part at a time. \ No newline at end of file diff --git a/package.json b/package.json index 5f8e52a..bc1c7aa 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "@astrojs/svelte": "^8.1.0", + "@reuters-graphics/svelte-markdown": "^0.0.3", "@rferl/veronica": "github:rferl/veronica", "astro": "^6.3.1", "svelte": "^5.55.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index df3825f..1c1a07f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: '@astrojs/svelte': specifier: ^8.1.0 version: 8.1.0(astro@6.3.1(rollup@4.60.3)(sass-embedded@1.99.0)(sass@1.99.0))(sass-embedded@1.99.0)(sass@1.99.0)(svelte@5.55.5)(typescript@5.9.3) + '@reuters-graphics/svelte-markdown': + specifier: ^0.0.3 + version: 0.0.3(svelte@5.55.5) '@rferl/veronica': specifier: github:rferl/veronica version: https://codeload.github.com/rferl/veronica/tar.gz/6935ec341ba7dce2a839f045deaba4783f4e8afc @@ -506,6 +509,11 @@ packages: resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==} engines: {node: '>= 10.0.0'} + '@reuters-graphics/svelte-markdown@0.0.3': + resolution: {integrity: sha512-K3DWKjm1XZxnwua+Vz9c7BRFrkFVWpVU+DnMKBPu3eadhCpT09Z0y+1MhJgs/573h4BpraZFuUVCl1h4XUxd1Q==} + peerDependencies: + svelte: ^5.0.0 + '@rferl/veronica@https://codeload.github.com/rferl/veronica/tar.gz/6935ec341ba7dce2a839f045deaba4783f4e8afc': resolution: {gitHosted: true, integrity: sha512-xkeBP1Te2lwj1/9Nstbz6GmaTuAudZ35SGBm5ZUUaobBTeuTxcstHw491d+bTbbewgRY3P652tQJsx8hP+Q3KA==, tarball: https://codeload.github.com/rferl/veronica/tar.gz/6935ec341ba7dce2a839f045deaba4783f4e8afc} version: 1.0.0 @@ -918,6 +926,9 @@ packages: es-module-lexer@2.1.0: resolution: {integrity: sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==} + es-toolkit@1.46.1: + resolution: {integrity: sha512-5eNtXOs3tbfxXOj04tjjseeWkRWaoCjdEI+96DgwzZoe6c9juL49pXlzAFTI72aWC9Y8p7168g6XIKjh7k6pyQ==} + esbuild@0.27.7: resolution: {integrity: sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==} engines: {node: '>=18'} @@ -1100,6 +1111,16 @@ packages: markdown-table@3.0.4: resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==} + marked-smartypants@1.1.12: + resolution: {integrity: sha512-Z0QL2GpihbSeG5aaCrQxMEoqvngMftF/gq1SrdlCnbecUSrX3HYgPtCZzCW+OyNe2ideQqaFdxfGryqQX1MBDA==} + peerDependencies: + marked: '>=4 <19' + + marked@15.0.12: + resolution: {integrity: sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==} + engines: {node: '>= 18'} + hasBin: true + mdast-util-definitions@6.0.0: resolution: {integrity: sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==} @@ -1541,6 +1562,10 @@ packages: sisteransi@1.0.5: resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==} + smartypants@0.2.2: + resolution: {integrity: sha512-TzobUYoEft/xBtb2voRPryAUIvYguG0V7Tt3de79I1WfXgCwelqVsGuZSnu3GFGRZhXR90AeEYIM+icuB/S06Q==} + hasBin: true + smol-toml@1.6.1: resolution: {integrity: sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg==} engines: {node: '>= 18'} @@ -1552,6 +1577,9 @@ packages: space-separated-tokens@2.0.2: resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==} + spark-md5@3.0.2: + resolution: {integrity: sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==} + stringify-entities@4.0.4: resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==} @@ -2163,6 +2191,15 @@ snapshots: '@parcel/watcher-win32-x64': 2.5.6 optional: true + '@reuters-graphics/svelte-markdown@0.0.3(svelte@5.55.5)': + dependencies: + es-toolkit: 1.46.1 + marked: 15.0.12 + marked-smartypants: 1.1.12(marked@15.0.12) + parse5: 7.3.0 + spark-md5: 3.0.2 + svelte: 5.55.5 + '@rferl/veronica@https://codeload.github.com/rferl/veronica/tar.gz/6935ec341ba7dce2a839f045deaba4783f4e8afc': {} '@rollup/pluginutils@5.3.0(rollup@4.60.3)': @@ -2567,6 +2604,8 @@ snapshots: es-module-lexer@2.1.0: {} + es-toolkit@1.46.1: {} + esbuild@0.27.7: optionalDependencies: '@esbuild/aix-ppc64': 0.27.7 @@ -2804,6 +2843,13 @@ snapshots: markdown-table@3.0.4: {} + marked-smartypants@1.1.12(marked@15.0.12): + dependencies: + marked: 15.0.12 + smartypants: 0.2.2 + + marked@15.0.12: {} + mdast-util-definitions@6.0.0: dependencies: '@types/mdast': 4.0.4 @@ -3498,12 +3544,16 @@ snapshots: sisteransi@1.0.5: {} + smartypants@0.2.2: {} + smol-toml@1.6.1: {} source-map-js@1.2.1: {} space-separated-tokens@2.0.2: {} + spark-md5@3.0.2: {} + stringify-entities@4.0.4: dependencies: character-entities-html4: 2.1.0 diff --git a/src/actions/cssVariables/cssVariables.mdx b/src/actions/cssVariables/cssVariables.mdx new file mode 100644 index 0000000..c67b635 --- /dev/null +++ b/src/actions/cssVariables/cssVariables.mdx @@ -0,0 +1,39 @@ +import { Meta } from '@storybook/blocks'; +import { parameters } from '../../docs/utils/docsPage.js'; + + + +# `cssVariables` + +An action you can use to easily set [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) on HTML elements. Useful for passing JavaScript values to your component SCSS like this: + +```svelte + + + +
+

My text...

+
+ + +``` diff --git a/src/actions/cssVariables/index.ts b/src/actions/cssVariables/index.ts new file mode 100644 index 0000000..47b2326 --- /dev/null +++ b/src/actions/cssVariables/index.ts @@ -0,0 +1,20 @@ +// Shamelessly stolen from: https://github.com/kaisermann/svelte-css-vars +export default (node: HTMLElement, props: Record) => { + Object.entries(props).forEach(([key, value]) => { + node.style.setProperty(`--${key}`, value); + }); + + return { + update(newProps: Record) { + Object.entries(newProps).forEach(([key, value]) => { + node.style.setProperty(`--${key}`, value); + delete props[key]; + }); + + Object.keys(props).forEach((name) => { + node.style.removeProperty(`--${name}`); + }); + props = newProps; + }, + }; +}; diff --git a/src/actions/resizeObserver/index.ts b/src/actions/resizeObserver/index.ts new file mode 100644 index 0000000..10cf699 --- /dev/null +++ b/src/actions/resizeObserver/index.ts @@ -0,0 +1,25 @@ +// Shamelessly stolen from https://github.com/sveltejs/svelte/issues/7583#issue-1260717165 +let observer: ResizeObserver; +let callbacks: WeakMap unknown>; + +export default (element: HTMLElement, onResize: (el: Element) => unknown) => { + if (!observer) { + callbacks = new WeakMap(); + observer = new ResizeObserver((entries) => { + for (const entry of entries) { + const onResize = callbacks.get(entry.target); + if (onResize) onResize(entry.target); + } + }); + } + + callbacks.set(element, onResize); + observer.observe(element); + + return { + destroy: () => { + callbacks.delete(element); + observer.unobserve(element); + }, + }; +}; diff --git a/src/actions/resizeObserver/resizeObserver.mdx b/src/actions/resizeObserver/resizeObserver.mdx new file mode 100644 index 0000000..b56549a --- /dev/null +++ b/src/actions/resizeObserver/resizeObserver.mdx @@ -0,0 +1,20 @@ +import { Meta } from '@storybook/blocks'; +import { parameters } from '../../docs/utils/docsPage.js'; + + + +# `resizeObserver` + +An action you can use to easily to check when a DOM element's dimensions change using the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). Use it like this: + +```svelte + + +
(elementWidth = element.clientWidth)}> + My width is: {elementWidth} +
+``` diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 6157261..f68339a 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,3 +1,6 @@ +--- +import '../scss/main.scss'; +--- @@ -16,10 +19,8 @@ diff --git a/src/pages/Squash.svelte b/src/pages/Squash.svelte index 27dcf1e..531d939 100644 --- a/src/pages/Squash.svelte +++ b/src/pages/Squash.svelte @@ -1,5 +1,6 @@