├── .gitignore ├── .npmrc ├── .prettierignore ├── .prettierrc ├── LICENSE ├── Makefile ├── README.md ├── docs ├── .nojekyll ├── __data.json ├── _app │ ├── env.js │ ├── immutable │ │ ├── assets │ │ │ ├── 0.Dv8x_4Cz.css │ │ │ ├── 2.BaN8YEm5.css │ │ │ ├── 3.CO4jlTh2.css │ │ │ ├── 4.BosP74pi.css │ │ │ ├── 5.B-mGqUsL.css │ │ │ ├── _layout.oDFnYxWp.css │ │ │ ├── _page.B-mGqUsL.css │ │ │ ├── _page.BaN8YEm5.css │ │ │ ├── _page.BbtFu9-w.css │ │ │ └── _page.BosP74pi.css │ │ ├── chunks │ │ │ ├── -0kCmqra.js │ │ │ ├── B7mm1rr4.js │ │ │ ├── BASgGI1b.js │ │ │ ├── CMUBZgSg.js │ │ │ ├── CWT9bnGQ.js │ │ │ ├── CWj6FrbW.js │ │ │ ├── CY5piJI4.js │ │ │ ├── CZjA61F2.js │ │ │ ├── Cdd2vc2j.js │ │ │ ├── CkxHW-tX.js │ │ │ ├── D6iY2F4E.js │ │ │ ├── DfLy1BuI.js │ │ │ ├── DnXbvXxH.js │ │ │ └── DpoC0QzE.js │ │ ├── entry │ │ │ ├── app.ytM75Wwz.js │ │ │ └── start.3zWGZb7n.js │ │ └── nodes │ │ │ ├── 0.ihsB691z.js │ │ │ ├── 1.Qh7DPxM0.js │ │ │ ├── 2.lXA7VpVS.js │ │ │ ├── 3.BremIw8B.js │ │ │ ├── 4.C9nE09uB.js │ │ │ ├── 5.Bozl_rDw.js │ │ │ └── 6.DUcV82Gi.js │ └── version.json ├── assets │ ├── branding │ │ ├── cloud.jpg │ │ ├── donate.jpg │ │ └── subscribe.png │ └── demo │ │ ├── fonts │ │ ├── atkinson.css │ │ ├── atlas-typewriter.css │ │ ├── atlas.css │ │ ├── baloo-bhai.css │ │ ├── canela.css │ │ ├── computer-modern.css │ │ ├── cozette.css │ │ ├── inconsolata.css │ │ ├── inter.css │ │ ├── jamboree.css │ │ ├── jersey.css │ │ ├── lyon.css │ │ ├── metropolis.css │ │ ├── national.css │ │ ├── publico.css │ │ ├── recoleta.css │ │ ├── rubik.css │ │ ├── spacemono.css │ │ └── tiempos.css │ │ ├── test.csv │ │ └── test.jpg ├── demo │ ├── elements │ │ └── index.html │ ├── fonts │ │ └── index.html │ ├── ig-story │ │ └── index.html │ └── index.html ├── favicon.ico └── index.html ├── google.config.js ├── jsconfig.json ├── package-lock.json ├── package.json ├── pnpm-lock.yaml ├── properties ├── category.json ├── color.json └── font-size.json ├── src ├── actions │ ├── canTab.js │ ├── checkOverlap.js │ ├── focusTrap.js │ ├── inView.js │ ├── keepWithinBox.js │ └── resize.js ├── app.html ├── components │ ├── Footer.Story.svelte │ ├── Footer.svelte │ ├── FooterDeprecated.svelte │ ├── Header.svelte │ ├── Index.svelte │ ├── Meta.svelte │ ├── demo │ │ ├── Demo.Elements.svelte │ │ ├── Demo.Fonts.Sample.svelte │ │ ├── Demo.Fonts.svelte │ │ ├── Demo.Img.svelte │ │ ├── Demo.Link.svelte │ │ ├── Demo.LoadData.svelte │ │ ├── Demo.MicroCMS.svelte │ │ ├── Demo.MicroCMSTest.svelte │ │ ├── Demo.Scrolly.svelte │ │ ├── Demo.Svelte5.svelte │ │ ├── Demo.SvelteComponent.A.svelte │ │ ├── Demo.SvelteComponent.B.svelte │ │ ├── Demo.SvelteComponent.svelte │ │ ├── Demo.SvelteElement.svelte │ │ ├── Demo.svelte │ │ ├── demo-fonts.json │ │ └── migrate │ │ │ ├── Demo.ButtonSet.svelte │ │ │ ├── Demo.Figure.svelte │ │ │ ├── Demo.IgStory.Chapters.svelte │ │ │ ├── Demo.IgStory.Figure.svelte │ │ │ ├── Demo.IgStory.svelte │ │ │ ├── Demo.LayerCake.svelte │ │ │ ├── Demo.Range.svelte │ │ │ ├── Demo.Select.svelte │ │ │ ├── Demo.Slider.svelte │ │ │ ├── Demo.SortTable.svelte │ │ │ ├── Demo.Tip.svelte │ │ │ ├── Demo.Toggle.svelte │ │ │ └── demo-layercake.csv │ ├── figure │ │ └── migrate │ │ │ ├── Figure.MapCanvas.svelte │ │ │ ├── Figure.MapLabels.svelte │ │ │ ├── Figure.MapPath.svelte │ │ │ ├── Figure.MapPoints.svelte │ │ │ ├── Figure.MapSvg.svelte │ │ │ ├── Figure.Template.svelte │ │ │ ├── Figure.Tooltip.svelte │ │ │ └── Figure.svelte │ ├── helpers │ │ ├── CMS.svelte │ │ ├── Scrolly.svelte │ │ └── migrate │ │ │ ├── ShareLink.svelte │ │ │ ├── Slider.Slide.svelte │ │ │ ├── Slider.svelte │ │ │ ├── SortTable.svelte │ │ │ ├── Tap.svelte │ │ │ ├── Tip.svelte │ │ │ └── Toggle.svelte │ └── layercake │ │ ├── future │ │ ├── Beeswarm.html.svelte │ │ ├── Beeswarm.svg.svelte │ │ ├── BeeswarmForce.html.svelte │ │ ├── BeeswarmForce.svelte │ │ ├── CirclePack.html.svelte │ │ ├── ClevelandDotPlot.svelte │ │ ├── Map.canvas.svelte │ │ ├── Map.svg.svelte │ │ ├── MapLabels.html.svelte │ │ ├── MapLabels.svg.svelte │ │ ├── MapPoints.canvas.svelte │ │ ├── MapPoints.html.svelte │ │ ├── MapPoints.svelte │ │ └── MultiLine.svelte │ │ └── migrate │ │ ├── Area.svelte │ │ ├── AxisX.html.svelte │ │ ├── AxisX.svg.svelte │ │ ├── AxisY.html.svelte │ │ ├── AxisY.svg.svelte │ │ ├── Bar.svelte │ │ ├── Column.svelte │ │ ├── ColumnStacked.svelte │ │ ├── Line.svelte │ │ ├── Scatter.canvas.svelte │ │ ├── Scatter.html.svelte │ │ ├── Scatter.svg.svelte │ │ ├── Tooltip.html.svelte │ │ └── Voronoi.svelte ├── data │ ├── copy.json │ ├── test.csv │ └── variables.json ├── routes │ ├── +error.svelte │ ├── +layout.js │ ├── +layout.svelte │ ├── +page.server.js │ ├── +page.svelte │ └── demo │ │ ├── +page.svelte │ │ ├── elements │ │ └── +page.svelte │ │ ├── fonts │ │ └── +page.svelte │ │ └── ig-story │ │ └── +page.svelte ├── runes │ ├── misc.svelte.js │ ├── useClipboard.svelte.js │ ├── useFetcher.svelte.js │ ├── useWindowDimensions.svelte.js │ └── useWindowFocus.svelte.js ├── styles │ ├── app.css │ ├── font.css │ ├── normalize.css │ ├── reset.css │ └── variables.css ├── svg │ ├── arrow-footer.svg │ ├── arrow-up-right.svg │ ├── logo-black.svg │ ├── logo-white.svg │ ├── play.svg │ ├── wordmark-bubble.svg │ ├── wordmark-line.svg │ ├── wordmark-plain.svg │ ├── wordmark-shadow.svg │ └── wordmark-sticker.svg └── utils │ ├── checkScrollDir.js │ ├── csvDownload.js │ ├── generateId.js │ ├── loadCsv.js │ ├── loadImage.js │ ├── loadJson.js │ ├── loadPixels.js │ ├── localStorage.js │ ├── locate.js │ ├── mapToArray.js │ ├── transformSvg.js │ ├── translate.js │ ├── urlParams.js │ └── version.js ├── static ├── assets │ ├── branding │ │ ├── cloud.jpg │ │ ├── donate.jpg │ │ └── subscribe.png │ └── demo │ │ ├── fonts │ │ ├── atkinson.css │ │ ├── atlas-typewriter.css │ │ ├── atlas.css │ │ ├── baloo-bhai.css │ │ ├── canela.css │ │ ├── computer-modern.css │ │ ├── cozette.css │ │ ├── inconsolata.css │ │ ├── inter.css │ │ ├── jamboree.css │ │ ├── jersey.css │ │ ├── lyon.css │ │ ├── metropolis.css │ │ ├── national.css │ │ ├── publico.css │ │ ├── recoleta.css │ │ ├── rubik.css │ │ ├── spacemono.css │ │ └── tiempos.css │ │ ├── test.csv │ │ └── test.jpg └── favicon.ico ├── svelte.config.js ├── tasks ├── fetch-google.js └── style-dictionary.js ├── tsconfig.json └── vite.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .svelte 4 | .svelte-kit 5 | build 6 | functions 7 | .env -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | /static 7 | .env 8 | .env.* 9 | !.env.example 10 | 11 | # Ignore files for PNPM, NPM and YARN 12 | pnpm-lock.yaml 13 | package-lock.json 14 | yarn.lock -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "trailingComma": "none", 4 | "printWidth": 80, 5 | "svelteSortOrder": "options-scripts-markup-styles", 6 | "plugins": ["prettier-plugin-svelte"], 7 | "overrides": [ 8 | { 9 | "files": "*.svelte", 10 | "options": { 11 | "parser": "svelte" 12 | } 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 The Pudding 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | PHONY: github pudding 2 | 3 | github: 4 | rm -rf docs 5 | cp -r build docs 6 | touch docs/.nojekyll 7 | git add -A 8 | git commit -m "update github pages" 9 | git push 10 | 11 | protect: 12 | cd build && npx staticrypt --short index.html -p $(shell grep PASSWORD .env | cut -d '=' -f2) -d . 13 | 14 | staging: 15 | npm run build 16 | make github 17 | 18 | production: 19 | npm run build 20 | make pudding 21 | 22 | # aws-sync: 23 | # aws s3 sync build s3://pudding.cool/year/month/name --delete --cache-control 'max-age=31536000' 24 | 25 | # aws-cache: 26 | # aws cloudfront create-invalidation --distribution-id E13X38CRR4E04D --paths '/year/month/name*' 27 | 28 | # pudding: aws-sync aws-cache -------------------------------------------------------------------------------- /docs/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-pudding/svelte-starter/af709d4ad57db15c10650a09accf8d5d4d2e23ac/docs/.nojekyll -------------------------------------------------------------------------------- /docs/__data.json: -------------------------------------------------------------------------------- 1 | {"type":"data","nodes":[null,{"type":"data","data":[{}],"uses":{}}]} 2 | -------------------------------------------------------------------------------- /docs/_app/env.js: -------------------------------------------------------------------------------- 1 | export const env={} -------------------------------------------------------------------------------- /docs/_app/immutable/assets/3.CO4jlTh2.css: -------------------------------------------------------------------------------- 1 | img.svelte-o47y6s{width:128px}div.svelte-o47y6s{width:128px;height:128px;background:url(../../../assets/demo/test.jpg);background-size:cover;background-position:center center}h2.svelte-12sq0x6{position:sticky;top:4em}.spacer.svelte-12sq0x6{height:75vh}.step.svelte-12sq0x6{height:80vh;background:var(--color-gray-100);text-align:center}.step.svelte-12sq0x6 p:where(.svelte-12sq0x6){padding:1rem}.people.svelte-1ltx6da{display:-webkit-box;display:flex}.person.svelte-1ltx6da{margin:8px}p.svelte-1ltx6da{margin:0}button.svelte-1ltx6da{margin-bottom:8px}#demo.svelte-m1ilu3{max-width:40rem;padding:16px;margin:0 auto}#demo section{margin:32px auto;padding-top:32px}#demo h2 span{background:var(--color-mark);padding:0 8px} 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/assets/4.BosP74pi.css: -------------------------------------------------------------------------------- 1 | .wrapper.svelte-p95kjz{padding:1rem;max-width:60rem;margin:0 auto}article.svelte-p95kjz>h2:where(.svelte-p95kjz){background:var(--color-fg);color:var(--color-bg);padding:0 16px} 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/assets/5.B-mGqUsL.css: -------------------------------------------------------------------------------- 1 | h3.svelte-15nxc8l{margin-top:0}div.svelte-15nxc8l{width:calc(25em - 4px);padding:16px;background:var(--color-input-bg);color:var(--color-input-fg);margin:2px;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:justify;justify-content:space-between}details.svelte-15nxc8l{font-family:var(--mono)}summary.svelte-15nxc8l{cursor:pointer}code.svelte-15nxc8l{display:block;background:var(--color-input-fg);color:var(--color-input-bg);padding:16px;white-space:pre-wrap}#info.svelte-1lzc8ku{text-align:center}article.svelte-1lzc8ku{margin:32px auto;max-width:75em}section.svelte-1lzc8ku{display:-webkit-box;display:flex;flex-wrap:wrap;margin-bottom:64px}label.svelte-1lzc8ku{display:block;margin-bottom:8px} 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/assets/_page.B-mGqUsL.css: -------------------------------------------------------------------------------- 1 | h3.svelte-15nxc8l{margin-top:0}div.svelte-15nxc8l{width:calc(25em - 4px);padding:16px;background:var(--color-input-bg);color:var(--color-input-fg);margin:2px;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:justify;justify-content:space-between}details.svelte-15nxc8l{font-family:var(--mono)}summary.svelte-15nxc8l{cursor:pointer}code.svelte-15nxc8l{display:block;background:var(--color-input-fg);color:var(--color-input-bg);padding:16px;white-space:pre-wrap}#info.svelte-1lzc8ku{text-align:center}article.svelte-1lzc8ku{margin:32px auto;max-width:75em}section.svelte-1lzc8ku{display:-webkit-box;display:flex;flex-wrap:wrap;margin-bottom:64px}label.svelte-1lzc8ku{display:block;margin-bottom:8px} 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/assets/_page.BbtFu9-w.css: -------------------------------------------------------------------------------- 1 | img.svelte-o47y6s{width:128px}div.svelte-o47y6s{width:128px;height:128px;background:url(/assets/demo/test.jpg);background-size:cover;background-position:center center}h2.svelte-12sq0x6{position:sticky;top:4em}.spacer.svelte-12sq0x6{height:75vh}.step.svelte-12sq0x6{height:80vh;background:var(--color-gray-100);text-align:center}.step.svelte-12sq0x6 p:where(.svelte-12sq0x6){padding:1rem}.people.svelte-1ltx6da{display:-webkit-box;display:flex}.person.svelte-1ltx6da{margin:8px}p.svelte-1ltx6da{margin:0}button.svelte-1ltx6da{margin-bottom:8px}#demo.svelte-m1ilu3{max-width:40rem;padding:16px;margin:0 auto}#demo section{margin:32px auto;padding-top:32px}#demo h2 span{background:var(--color-mark);padding:0 8px} 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/assets/_page.BosP74pi.css: -------------------------------------------------------------------------------- 1 | .wrapper.svelte-p95kjz{padding:1rem;max-width:60rem;margin:0 auto}article.svelte-p95kjz>h2:where(.svelte-p95kjz){background:var(--color-fg);color:var(--color-bg);padding:0 16px} 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/B7mm1rr4.js: -------------------------------------------------------------------------------- 1 | import{s as c,g as l}from"./DfLy1BuI.js";import{P as o,a5 as b,R as f,a6 as p,W as d,Y as _}from"./-0kCmqra.js";let s=!1,i=Symbol();function y(e,n,r){const u=r[n]??(r[n]={store:null,source:p(void 0),unsubscribe:f});if(u.store!==e&&!(i in r))if(u.unsubscribe(),u.store=e??null,e==null)u.source.v=void 0,u.unsubscribe=f;else{var t=!0;u.unsubscribe=c(e,a=>{t?u.source.v=a:_(u.source,a)}),t=!1}return e&&i in r?l(e):d(u.source)}function m(){const e={};function n(){o(()=>{for(var r in e)e[r].unsubscribe();b(e,i,{enumerable:!1,value:!0})})}return[e,n]}function N(e){var n=s;try{return s=!1,[e(),s]}finally{s=n}}export{y as a,N as c,m as s}; 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/CWT9bnGQ.js: -------------------------------------------------------------------------------- 1 | import{l as o,u as b,j as i,k as y,m as n,n as d,o as f,p as l,q as g,v as x,w as h,x as C,y as k,z as S}from"./-0kCmqra.js";import{h as w,m as j,u as A}from"./DnXbvXxH.js";import{c as z}from"./D6iY2F4E.js";function D(){var t;return i===null&&y(),((t=i).ac??(t.ac=new AbortController)).signal}function _(t){n===null&&o(),b(()=>{const e=l(t);if(typeof e=="function")return e})}function E(t){n===null&&o(),_(()=>()=>l(t))}function M(t,e,{bubbles:s=!1,cancelable:c=!1}={}){return new CustomEvent(t,{detail:e,bubbles:s,cancelable:c})}function O(){const t=n;return t===null&&o(),(e,s,c)=>{var r;const a=(r=t.s.$$events)==null?void 0:r[e];if(a){const m=d(a)?a.slice():[a],u=M(e,s,c);for(const v of m)v.call(t.x,u);return!u.defaultPrevented}return!0}}function P(t){n===null&&o(),n.l===null&&f(),p(n).b.push(t)}function U(t){n===null&&o(),n.l===null&&f(),p(n).a.push(t)}function p(t){var e=t.l;return e.u??(e.u={a:[],b:[],m:[]})}const T=Object.freeze(Object.defineProperty({__proto__:null,afterUpdate:U,beforeUpdate:P,createEventDispatcher:O,createRawSnippet:z,flushSync:g,getAbortSignal:D,getAllContexts:x,getContext:h,hasContext:C,hydrate:w,mount:j,onDestroy:E,onMount:_,setContext:k,tick:S,unmount:A,untrack:l},Symbol.toStringTag,{value:"Module"}));export{_ as o,T as s}; 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/CWj6FrbW.js: -------------------------------------------------------------------------------- 1 | const d="5";var e;typeof window<"u"&&((e=window.__svelte??(window.__svelte={})).v??(e.v=new Set)).add(d); 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/CY5piJI4.js: -------------------------------------------------------------------------------- 1 | import{O as v,h as e,a as g,Q as k,ab as o,B as Y,ac as q,ad as B,s as F,D as N,ae as R,L as I,af as A,ag as H,c as p,ah as j,ai as C,p as M,aj as P,a2 as Q}from"./-0kCmqra.js";function Z(f,t,[r,i]=[0,0]){e&&r===0&&g();var a=f,s=null,c=null,l=H,D=r>0?k:0,u=!1;const L=(T,n=!0)=>{u=!0,E(n,T)},E=(T,n)=>{if(l===(l=T))return;let b=!1;if(e&&i!==-1){if(r===0){const h=o(a);h===Y?i=0:h===q?i=1/0:(i=parseInt(h.substring(1)),i!==i&&(i=l?1/0:-1))}const O=i>r;!!l===O&&(a=B(),F(a),N(!1),b=!0,i=-1)}l?(s?R(s):n&&(s=I(()=>n(a))),c&&A(c,()=>{c=null})):(c?R(c):n&&(c=I(()=>n(a,[r+1,i]))),s&&A(s,()=>{s=null})),b&&N(!0)};v(()=>{u=!1,t(L),u||E(null,null)},D),e&&(a=p)}function w(f,t,r){e&&g();var i=f,a,s;v(()=>{a!==(a=t())&&(s&&(A(s),s=null),a&&(s=I(()=>r(i,a))))},k),e&&(i=p)}function S(f,t){return f===t||(f==null?void 0:f[Q])===t}function z(f={},t,r,i){return j(()=>{var a,s;return C(()=>{a=s,s=[],M(()=>{f!==r(...s)&&(t(f,...s),a&&S(r(...a),f)&&t(null,...a))})}),()=>{P(()=>{s&&S(r(...s),f)&&t(null,...s)})}}),f}export{z as b,w as c,Z as i}; 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/CZjA61F2.js: -------------------------------------------------------------------------------- 1 | import{t as u,h as o,a as l,b as g,r as y,c as h,C as p,g as b,d as w,H as O,e as c,s as R,f as C,i as f}from"./-0kCmqra.js";function T(m,v,i=!1,_=!1,E=!1){var d=m,t="";u(()=>{var s=g;if(t===(t=v()??"")){o&&l();return}if(s.nodes_start!==null&&(y(s.nodes_start,s.nodes_end),s.nodes_start=s.nodes_end=null),t!==""){if(o){h.data;for(var e=l(),n=e;e!==null&&(e.nodeType!==p||e.data!=="");)n=e,e=b(e);if(e===null)throw w(),O;c(h,n),d=R(e);return}var r=t+"";i?r=`${r}`:_&&(r=`${r}`);var a=C(r);if((i||_)&&(a=f(a)),c(f(a),a.lastChild),i||_)for(;f(a);)d.before(f(a));else d.before(a)}})}export{T as h}; 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/Cdd2vc2j.js: -------------------------------------------------------------------------------- 1 | var s;const e=((s=globalThis.__sveltekit_117h6s7)==null?void 0:s.base)??"";var a;const t=((a=globalThis.__sveltekit_117h6s7)==null?void 0:a.assets)??e;export{t as a,e as b}; 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/CkxHW-tX.js: -------------------------------------------------------------------------------- 1 | import{T as P,U as A,V as y,W as v,X as L,Y as T,Z as x,_ as E,$ as R,p as B,a0 as D,a1 as Y,a2 as I,a3 as O,a4 as _}from"./-0kCmqra.js";import{c as j}from"./B7mm1rr4.js";const M={get(n,r){let t=n.props.length;for(;t--;){let e=n.props[t];if(_(e)&&(e=e()),typeof e=="object"&&e!==null&&r in e)return e[r]}},set(n,r,t){let e=n.props.length;for(;e--;){let i=n.props[e];_(i)&&(i=i());const a=P(i,r);if(a&&a.set)return a.set(t),!0}return!1},getOwnPropertyDescriptor(n,r){let t=n.props.length;for(;t--;){let e=n.props[t];if(_(e)&&(e=e()),typeof e=="object"&&e!==null&&r in e){const i=P(e,r);return i&&!i.configurable&&(i.configurable=!0),i}}},has(n,r){if(r===I||r===O)return!1;for(let t of n.props)if(_(t)&&(t=t()),t!=null&&r in t)return!0;return!1},ownKeys(n){const r=[];for(let t of n.props)if(_(t)&&(t=t()),!!t){for(const e in t)r.includes(e)||r.push(e);for(const e of Object.getOwnPropertySymbols(t))r.includes(e)||r.push(e)}return r}};function Z(...n){return new Proxy({props:n},M)}function U(n){var r;return((r=n.ctx)==null?void 0:r.d)??!1}function q(n,r,t,e){var S;var i=(t&R)!==0,a=(t&Y)!==0,c=e,d=!0,h=()=>(d&&(d=!1,c=a?B(e):e),c),u;if(i){var w=I in n||O in n;u=((S=P(n,r))==null?void 0:S.set)??(w&&r in n?s=>n[r]=s:void 0)}var o,g=!1;i?[o,g]=j(()=>n[r]):o=n[r],o===void 0&&e!==void 0&&(o=h(),u&&(A(),u(o)));var l;if(l=()=>{var s=n[r];return s===void 0?h():(d=!0,s)},(t&y)===0)return l;if(u){var m=n.$$legacy;return function(s,p){return arguments.length>0?((!p||m||g)&&u(p?l():s),s):l()}}var f=((t&D)!==0?x:E)(l);return i&&v(f),function(s,p){if(arguments.length>0){const b=p?v(f):i?L(s):s;return T(f,b),c!==void 0&&(c=b),s}return U(f)?f.v:v(f)}}export{q as p,Z as s}; 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/D6iY2F4E.js: -------------------------------------------------------------------------------- 1 | import{O as _,h as o,a as d,f as h,e as l,P as u,Q as m,L as v,R as y,S as g,c,i as R}from"./-0kCmqra.js";function E(t,s,...n){var a=t,e=y,r;_(()=>{e!==(e=s())&&(r&&(g(r),r=null),r=v(()=>e(a,...n)))},m),o&&(a=c)}function S(t){return(s,...n)=>{var i;var a=t(...n),e;if(o)e=c,d();else{var r=a.render().trim(),p=h(r);e=R(p),s.before(e)}const f=(i=a.setup)==null?void 0:i.call(a,e);l(e,e),typeof f=="function"&&u(f)}}export{S as c,E as s}; 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/DfLy1BuI.js: -------------------------------------------------------------------------------- 1 | import{aj as L,as as b,ar as v,j as N,b as O,a5 as M,n as R,K as V,O as j,az as q,h as g,C as z,B,g as w,D as T,s as k,c as S,i as W,R as h,p as F,aA as H}from"./-0kCmqra.js";function te(e){return e.endsWith("capture")&&e!=="gotpointercapture"&&e!=="lostpointercapture"}const G=["beforeinput","click","change","dblclick","contextmenu","focusin","focusout","input","keydown","keyup","mousedown","mousemove","mouseout","mouseover","mouseup","pointerdown","pointermove","pointerout","pointerover","pointerup","touchend","touchmove","touchstart"];function re(e){return G.includes(e)}const K={formnovalidate:"formNoValidate",ismap:"isMap",nomodule:"noModule",playsinline:"playsInline",readonly:"readOnly",defaultvalue:"defaultValue",defaultchecked:"defaultChecked",srcobject:"srcObject",novalidate:"noValidate",allowfullscreen:"allowFullscreen",disablepictureinpicture:"disablePictureInPicture",disableremoteplayback:"disableRemotePlayback"};function ae(e){return e=e.toLowerCase(),K[e]??e}const U=["touchstart","touchmove"];function ne(e){return U.includes(e)}const X=["textarea","script","style","title"];function se(e){return X.includes(e)}function oe(e,t){if(t){const r=document.body;e.autofocus=!0,L(()=>{document.activeElement===r&&e.focus()})}}let A=!1;function Y(){A||(A=!0,document.addEventListener("reset",e=>{Promise.resolve().then(()=>{var t;if(!e.defaultPrevented)for(const r of e.target.elements)(t=r.__on_r)==null||t.call(r)})},{capture:!0}))}function x(e){var t=N,r=O;b(null),v(null);try{return e()}finally{b(t),v(r)}}function ie(e,t,r,a=r){e.addEventListener(t,()=>x(r));const s=e.__on_r;s?e.__on_r=()=>{s(),a(!0)}:e.__on_r=()=>a(!0),Y()}const J=new Set,Q=new Set;function ue(e,t,r,a={}){function s(n){if(a.capture||Z.call(t,n),!n.cancelBubble)return x(()=>r==null?void 0:r.call(this,n))}return e.startsWith("pointer")||e.startsWith("touch")||e==="wheel"?L(()=>{t.addEventListener(e,s,a)}):t.addEventListener(e,s,a),s}function ce(e){for(var t=0;t{throw p});throw d}}finally{e.__root=t,delete e.currentTarget,b(D),v(P)}}}let i;function le(){i=void 0}function fe(e){let t=null,r=g;var a;if(g){for(t=S,i===void 0&&(i=W(document.head));i!==null&&(i.nodeType!==z||i.data!==B);)i=w(i);i===null?T(!1):i=k(w(i))}g||(a=document.head.appendChild(V()));try{j(()=>e(a),q)}finally{r&&(T(!0),i=S,k(t))}}function $(e,t,r){if(e==null)return t(void 0),h;const a=F(()=>e.subscribe(t,r));return a.unsubscribe?()=>a.unsubscribe():a}const l=[];function de(e,t=h){let r=null;const a=new Set;function s(u){if(H(e,u)&&(e=u,r)){const c=!l.length;for(const o of a)o[1](),l.push(o,e);if(c){for(let o=0;o{a.delete(o),a.size===0&&r&&(r(),r=null)}}return{set:s,update:n,subscribe:f}}function _e(e){let t;return $(e,r=>t=r)(),t}export{J as a,le as b,fe as c,se as d,ce as e,Y as f,_e as g,Z as h,ne as i,te as j,ue as k,ie as l,oe as m,ae as n,re as o,Q as r,$ as s,de as w}; 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/DnXbvXxH.js: -------------------------------------------------------------------------------- 1 | import{A as m,i as A,C as T,B as L,g as M,H as p,D as c,s as R,a as C,c as _,E as H,d as I,F as Y,G as S,I as V,J as $,K as j,L as k,M as B,m as F,h as E,e as G,b as J,N as K}from"./-0kCmqra.js";import{a as P,r as D,h,i as W,b as q}from"./DfLy1BuI.js";function X(t,e){var r=e==null?"":typeof e=="object"?e+"":e;r!==(t.__t??(t.__t=t.nodeValue))&&(t.__t=r,t.nodeValue=r+"")}function z(t,e){return O(t,e)}function Z(t,e){m(),e.intro=e.intro??!1;const r=e.target,l=E,u=_;try{for(var a=A(r);a&&(a.nodeType!==T||a.data!==L);)a=M(a);if(!a)throw p;c(!0),R(a),C();const o=O(t,{...e,anchor:a});if(_===null||_.nodeType!==T||_.data!==H)throw I(),p;return c(!1),o}catch(o){if(o===p)return e.recover===!1&&Y(),m(),S(r),c(!1),z(t,e);throw o}finally{c(l),R(u),q()}}const i=new Map;function O(t,{target:e,anchor:r,props:l={},events:u,context:a,intro:o=!0}){m();var v=new Set,y=d=>{for(var s=0;s{var d=r??e.appendChild(j());return k(()=>{if(a){B({});var s=F;s.c=a}u&&(l.$$events=u),E&&G(d,null),g=t(d,l)||{},E&&(J.nodes_end=_),a&&K()}),()=>{var f;for(var s of v){e.removeEventListener(s,h);var n=i.get(s);--n===0?(document.removeEventListener(s,h),i.delete(s)):i.set(s,n)}D.delete(y),d!==r&&((f=d.parentNode)==null||f.removeChild(d))}});return w.set(g,b),g}let w=new WeakMap;function x(t,e){const r=w.get(t);return r?(w.delete(t),r(e)):Promise.resolve()}export{Z as h,z as m,X as s,x as u}; 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/chunks/DpoC0QzE.js: -------------------------------------------------------------------------------- 1 | const t={title:"Title TK",description:"Description tk."},e=[{section:"intro",content:[{type:"h4",value:"An h4 element with no attributes"},{type:"text",value:"Some random text here, followed by an img tag."},{type:"img",value:{src:"../assets/demo/test.jpg",alt:"A cat"}},{type:"Test",value:{label:"I’m a custom component!",value:"50"}}]}],o={meta:t,body:e};export{o as c}; 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/entry/start.3zWGZb7n.js: -------------------------------------------------------------------------------- 1 | import{l as o,a as r}from"../chunks/BASgGI1b.js";export{o as load_css,r as start}; 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/nodes/1.Qh7DPxM0.js: -------------------------------------------------------------------------------- 1 | import"../chunks/CWj6FrbW.js";import{M as n,a7 as c,t as i,a8 as u,N as m,a9 as g,aa as b}from"../chunks/-0kCmqra.js";import{s as $}from"../chunks/DnXbvXxH.js";import{s as f,a as d}from"../chunks/B7mm1rr4.js";import{s as h}from"../chunks/BASgGI1b.js";const _=()=>{const s=h;return{page:{subscribe:s.page.subscribe},navigating:{subscribe:s.navigating.subscribe},updated:s.updated}},v={subscribe(s){return _().page.subscribe(s)}};var l=c("

");function k(s,e){n(e,!0);const[a,o]=f(),r=()=>d(v,"$page",a);var t=l(),p=g(t);b(t),i(()=>$(p,`${r().status??""}: ${r().error.message??""}`)),u(s,t),m(),o()}export{k as component}; 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/nodes/2.lXA7VpVS.js: -------------------------------------------------------------------------------- 1 | var I=a=>{throw TypeError(a)};var R=(a,t,e)=>t.has(a)||I("Cannot "+e);var r=(a,t,e)=>(R(a,t,"read from private field"),e?e.call(a):t.get(a)),l=(a,t,e)=>t.has(a)?I("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(a):t.set(a,e),n=(a,t,e,o)=>(R(a,t,"write to private field"),o?o.call(a,e):t.set(a,e),e),j=(a,t,e)=>(R(a,t,"access private method"),e);import"../chunks/CWj6FrbW.js";import{c as L,O as rt,b as Q,L as A,ar as V,as as E,at as Y,j as H,m as nt,S as J,aj as st,h as W,a as it,af as ct,s as X,au as lt,ad as mt,Q as pt,av as ft,aw as ht,ax as dt,a7 as C,am as N,an as c,t as Z,ay as ut,a8 as F,W as gt,ao as _t,M as vt,y as $,N as yt}from"../chunks/-0kCmqra.js";import{c as wt}from"../chunks/DfLy1BuI.js";import{e as bt,i as kt,s as i}from"../chunks/CMUBZgSg.js";import{p as y}from"../chunks/CkxHW-tX.js";import{c as tt}from"../chunks/DpoC0QzE.js";var xt=pt|ft|ht;function Tt(a,t,e){new Et(a,t,e)}var p,w,u,b,f,h,m,d,k,B;class Et{constructor(t,e,o){l(this,k);l(this,p);l(this,w);l(this,u);l(this,b);l(this,f);l(this,h,null);l(this,m,null);l(this,d,!1);n(this,p,t),n(this,u,e),n(this,b,o),n(this,w,L),n(this,f,rt(()=>{Q.b=this,W&&it();try{n(this,h,A(()=>o(r(this,p))))}catch(s){this.error(s)}},xt)),W&&n(this,p,L)}error(t){var e=r(this,u).onerror;let o=r(this,u).failed;const s=()=>{r(this,m)!==null&&ct(r(this,m),()=>{n(this,m,null)}),n(this,h,j(this,k,B).call(this,()=>(n(this,d,!1),A(()=>r(this,b).call(this,r(this,p))))))};if(r(this,d)||!e&&!o)throw t;var g=H;try{E(null),e==null||e(t,s)}finally{E(g)}r(this,h)&&(J(r(this,h)),n(this,h,null)),r(this,m)&&(J(r(this,m)),n(this,m,null)),W&&(X(r(this,w)),lt(),X(mt())),o&&st(()=>{n(this,m,j(this,k,B).call(this,()=>{n(this,d,!0);try{return A(()=>{o(r(this,p),()=>t,()=>s)})}catch(_){return dt(_,r(this,f).parent),null}finally{n(this,d,!1)}}))})}}p=new WeakMap,w=new WeakMap,u=new WeakMap,b=new WeakMap,f=new WeakMap,h=new WeakMap,m=new WeakMap,d=new WeakMap,k=new WeakSet,B=function(t){var e=Q,o=H,s=nt;V(r(this,f)),E(r(this,f)),Y(r(this,f).ctx);try{return t()}finally{V(e),E(o),Y(s)}};var Ft=C(''),Rt=C(' ',1);function jt(a,t){let e=y(t,"title",3,"Title TK"),o=y(t,"description",3,"Description TK"),s=y(t,"url",3,"https://pudding.cool"),g=y(t,"keywords",3,""),_=y(t,"preloadFont",19,()=>[]);wt(x=>{var v=Rt(),T=N(v),P=c(T,4),S=c(P,2),D=c(S,4),G=c(D,2),K=c(G,6),M=c(K,14),O=c(M,2),U=c(O,2),q=c(U,4),et=c(q,2);bt(et,17,_,kt,(at,ot)=>{var z=Ft();Z(()=>i(z,"href",gt(ot))),F(at,z)}),Z(()=>{ut.title=e(),i(T,"content",o()),i(P,"content",g()),i(S,"content",e()),i(D,"content",s()),i(G,"content",o()),i(K,"content",`${s()??""}/assets/social-facebook.jpg`),i(M,"content",e()),i(O,"content",o()),i(U,"content",`${s()??""}/assets/social-twitter.jpg`),i(q,"href",`${s()??""}/`)}),F(x,v)})}function At(a){var t=_t(),e=N(t);Tt(e,{onerror:o=>console.error(o)},o=>{}),F(a,t)}function Wt(){console.log("--- --- --- --- --- ---"),console.log("svelte-starter: 6.14.0"),console.log("build: 2025-07-08-10:43"),console.log("--- --- --- --- --- ---")}var Bt=C(" ",1);function Mt(a,t){vt(t,!0),Wt();const e=["https://pudding.cool/assets/fonts/tiempos/TiemposTextWeb-Regular.woff2","https://pudding.cool/assets/fonts/tiempos/TiemposTextWeb-Bold.woff2","https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Regular-Web.woff2","https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Bold-Web.woff2"],{title:o,description:s,url:g,keywords:_}=tt;$("copy",tt),$("data",t.data);var x=Bt(),v=N(x);jt(v,{get title(){return o},get description(){return s},get url(){return g},get preloadFont(){return e},get keywords(){return _}});var T=c(v,2);At(T),F(a,x),yt()}export{Mt as component}; 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/nodes/5.Bozl_rDw.js: -------------------------------------------------------------------------------- 1 | import"../chunks/CWj6FrbW.js";import{p as Y,ai as K,h as Q,M as R,Y as U,al as X,a7 as w,t as M,a8 as S,a9 as m,aa as f,an as d,W as _,ap as V,N as W,am as A,aB as Z}from"../chunks/-0kCmqra.js";import{s as k}from"../chunks/DnXbvXxH.js";import{s as $,a as B,e as F,r as I,i as E}from"../chunks/CMUBZgSg.js";import{l as ee,c as te}from"../chunks/DfLy1BuI.js";import{p as z}from"../chunks/CkxHW-tX.js";import{o as ae}from"../chunks/CWT9bnGQ.js";import{b as se}from"../chunks/Cdd2vc2j.js";function J(e,t,s=t){ee(e,"input",a=>{var r=a?e.defaultValue:e.value;if(r=j(e)?D(r):r,s(r),r!==(r=t())){var u=e.selectionStart,n=e.selectionEnd;e.value=r??"",n!==null&&(e.selectionStart=u,e.selectionEnd=Math.min(n,e.value.length))}}),(Q&&e.defaultValue!==e.value||Y(t)==null&&e.value)&&s(j(e)?D(e.value):e.value),K(()=>{var a=t();j(e)&&a===D(e.value)||e.type==="date"&&!a&&!e.value||a!==e.value&&(e.value=a??"")})}function j(e){var t=e.type;return t==="number"||t==="range"}function D(e){return e===""?null:+e}function re(e,t){return e==null||t==null?NaN:te?1:t>=e?0:NaN}class ne extends Map{constructor(t,s=le){if(super(),Object.defineProperties(this,{_intern:{value:new Map},_key:{value:s}}),t!=null)for(const[a,r]of t)this.set(a,r)}get(t){return super.get(O(this,t))}has(t){return super.has(O(this,t))}set(t,s){return super.set(ie(this,t),s)}delete(t){return super.delete(oe(this,t))}}function O({_intern:e,_key:t},s){const a=t(s);return e.has(a)?e.get(a):s}function ie({_intern:e,_key:t},s){const a=t(s);return e.has(a)?e.get(a):(e.set(a,s),s)}function oe({_intern:e,_key:t},s){const a=t(s);return e.has(a)&&(s=e.get(a),e.delete(a)),s}function le(e){return e!==null&&typeof e=="object"?e.valueOf():e}function fe(e){return e}function ue(e,...t){return ce(e,Array.from,fe,t)}function ce(e,t,s,a){return function r(u,n){if(n>=a.length)return s(u);const o=new ne,c=a[n++];let p=-1;for(const l of u){const i=c(l,++p,u),y=o.get(i);y?y.push(l):o.set(i,[l])}for(const[l,i]of o)o.set(l,r(i,n));return t(o)}(e,0)}var me=w(''),ye=w('

CSS Snippet
');function de(e,t){R(t,!0);let s=z(t,"id",3,""),a=z(t,"family",3,""),r=z(t,"size",3,16),u=V(()=>`${r()}px`),n=X("");const o=`${se}/assets/demo/fonts/${s()}.css`;ae(async()=>{const h=await fetch(o);U(n,await h.text(),!0)});var c=ye();te(h=>{var b=me();M(()=>$(b,"href",o)),S(h,b)});var p=m(c),l=m(p,!0);f(p);var i=d(p,2);let y;var v=m(i,!0);f(i);var x=d(i,2),g=d(m(x),2),N=m(g,!0);f(g),f(x),f(c),M(h=>{B(c,`font-family: '${a()??""}';`),k(l,a()),y=B(i,"",y,h),k(v,t.text),k(N,_(n))},[()=>({"font-size":_(u)})]),S(e,c),W()}const pe=[{id:"atkinson",family:"Atkinson",type:"sans-serif"},{id:"atlas",family:"Atlas Grotesk",type:"sans-serif"},{id:"baloo-bhai",family:"Baloo Bhai",type:"sans-serif"},{id:"canela",family:"Canela",type:"serif"},{id:"computer-modern",family:"Computer Modern",type:"serif"},{id:"cozette",family:"Cozette",type:"other"},{id:"inter",family:"Inter",type:"sans-serif"},{id:"jamboree",family:"Jamboree",type:"other"},{id:"jersey",family:"Jersey M54",type:"other"},{id:"lyon",family:"Lyon Display",type:"serif"},{id:"metropolis",family:"Metropolis",type:"sans-serif"},{id:"national",family:"National 2 Web",type:"sans-serif"},{id:"publico",family:"Publico Text",type:"serif"},{id:"recoleta",family:"Recoleta",type:"serif"},{id:"rubik",family:"Rubik",type:"sans-serif"},{id:"inconsolata",family:"Inconsolata",type:"mono"},{id:"spacemono",family:"Space Mono",type:"mono"},{id:"tiempos",family:"Tiempos Text",type:"serif"}];var ve=w('

',1),he=w('

Hosted Fonts on The Pudding

Do not use fonts hosted by The Pudding without written permission.

',1);function _e(e,t){R(t,!0);let s=z(t,"size",7,18),a=z(t,"text",7,"The quick brown fox jumps over the lazy dog.");const r=ue(pe,v=>v.type);r.sort((v,x)=>re(v[1].length,x[1].length));var u=he(),n=A(u),o=d(m(n),4),c=m(o),p=m(c);f(c);var l=d(c,2);I(l);var i=d(l,4);I(i),f(o),f(n);var y=d(n,2);F(y,21,()=>r,E,(v,x)=>{var g=V(()=>Z(_(x),2));let N=()=>_(g)[0],h=()=>_(g)[1];var b=ve(),T=A(b),q=m(T,!0);f(T);var C=d(T,2);F(C,21,h,E,(G,P)=>{let H=()=>_(P).family,L=()=>_(P).id;de(G,{get id(){return L()},get family(){return H()},get size(){return s()},get text(){return a()}})}),f(C),M(()=>k(q,N())),S(v,b)}),f(y),M(()=>k(p,`font-size: ${s()??""}px`)),J(l,s),J(i,a),S(e,u),W()}function Ne(e){_e(e,{})}export{Ne as component}; 2 | -------------------------------------------------------------------------------- /docs/_app/immutable/nodes/6.DUcV82Gi.js: -------------------------------------------------------------------------------- 1 | import"../chunks/CWj6FrbW.js";function p(o){}export{p as component}; 2 | -------------------------------------------------------------------------------- /docs/_app/version.json: -------------------------------------------------------------------------------- 1 | {"version":"1751985803593"} -------------------------------------------------------------------------------- /docs/assets/branding/cloud.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-pudding/svelte-starter/af709d4ad57db15c10650a09accf8d5d4d2e23ac/docs/assets/branding/cloud.jpg -------------------------------------------------------------------------------- /docs/assets/branding/donate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-pudding/svelte-starter/af709d4ad57db15c10650a09accf8d5d4d2e23ac/docs/assets/branding/donate.jpg -------------------------------------------------------------------------------- /docs/assets/branding/subscribe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-pudding/svelte-starter/af709d4ad57db15c10650a09accf8d5d4d2e23ac/docs/assets/branding/subscribe.png -------------------------------------------------------------------------------- /docs/assets/demo/fonts/atkinson.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Atkinson"; 3 | src: url("https://pudding.cool/assets/fonts/atkinson/atkinson-hyperlegible-v1-latin-400.woff2") format("woff2"); 4 | font-weight: 400; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } 9 | 10 | @font-face { 11 | font-family: "Atkinson"; 12 | src: url("https://pudding.cool/assets/fonts/atkinson/atkinson-hyperlegible-v1-latin-700.woff2") format("woff2"); 13 | font-weight: 700; 14 | font-style: normal; 15 | font-stretch: normal; 16 | font-display: swap; 17 | } 18 | -------------------------------------------------------------------------------- /docs/assets/demo/fonts/atlas-typewriter.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Atlas Typewriter"; 3 | src: url("https://pudding.cool/assets/fonts/atlas/AtlasTypewriter-Medium-Web.woff2") format("woff2"); 4 | font-weight: 500; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } 9 | -------------------------------------------------------------------------------- /docs/assets/demo/fonts/atlas.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Atlas Grotesk"; 3 | src: url("https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Regular-Web.woff2") format("woff2"); 4 | font-weight: 400; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } 9 | 10 | @font-face { 11 | font-family: "Atlas Grotesk"; 12 | src: url("https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Bold-Web.woff2") format("woff2"); 13 | font-weight: 600; 14 | font-style: normal; 15 | font-stretch: normal; 16 | font-display: swap; 17 | } 18 | 19 | @font-face { 20 | font-family: "Atlas Grotesk"; 21 | src: url("https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Light-Web.woff2") format("woff2"); 22 | font-weight: 300; 23 | font-style: normal; 24 | font-stretch: normal; 25 | font-display: swap; 26 | } 27 | 28 | @font-face { 29 | font-family: "Atlas Grotesk"; 30 | src: url("https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Medium-Web.woff2") format("woff2"); 31 | font-weight: 500; 32 | font-style: normal; 33 | font-stretch: normal; 34 | font-display: swap; 35 | } 36 | 37 | 38 | @font-face { 39 | font-family: "Atlas Grotesk"; 40 | src: url("https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Thin-Web.woff2") format("woff2"); 41 | font-weight: 100; 42 | font-style: normal; 43 | font-stretch: normal; 44 | font-display: swap; 45 | } -------------------------------------------------------------------------------- /docs/assets/demo/fonts/baloo-bhai.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Baloo Bhai"; 3 | src: url("https://pudding.cool/assets/fonts/baloo-bhai/baloo-bhai-2-v28-latin-regular.woff2") format("woff2"); 4 | font-weight: 400; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } 9 | 10 | @font-face { 11 | font-family: "Baloo Bhai"; 12 | src: url("https://pudding.cool/assets/fonts/baloo-bhai/baloo-bhai-2-v28-latin-700.woff2") format("woff2"); 13 | font-weight: 700; 14 | font-style: normal; 15 | font-stretch: normal; 16 | font-display: swap; 17 | } 18 | -------------------------------------------------------------------------------- /docs/assets/demo/fonts/canela.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Canela"; 3 | src: url("https://pudding.cool/assets/fonts/canela/Canela-Bold-Web.woff") format("woff2"); 4 | font-weight: 600; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } 9 | 10 | @font-face { 11 | font-family: "Canela"; 12 | src: url("https://pudding.cool/assets/fonts/canela/Canela-Light-Web.woff") format("woff2"); 13 | font-weight: 300; 14 | font-style: normal; 15 | font-stretch: normal; 16 | font-display: swap; 17 | } 18 | -------------------------------------------------------------------------------- /docs/assets/demo/fonts/computer-modern.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Computer Modern"; 3 | src: url("https://pudding.cool/assets/fonts/computer-modern/cmunrm.woff2") format("woff2"); 4 | font-weight: 400; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } 9 | 10 | @font-face { 11 | font-family: "Computer Modern"; 12 | src: url("https://pudding.cool/assets/fonts/computer-modern/cmunrb.woff2") format("woff2"); 13 | font-weight: 700; 14 | font-style: normal; 15 | font-stretch: normal; 16 | font-display: swap; 17 | } 18 | 19 | @font-face { 20 | font-family: "Computer Modern"; 21 | src: url("https://pudding.cool/assets/fonts/computer-modern/cmunsl.woff2") format("woff2"); 22 | font-weight: 400; 23 | font-style: italic; 24 | font-stretch: normal; 25 | font-display: swap; 26 | } 27 | -------------------------------------------------------------------------------- /docs/assets/demo/fonts/cozette.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Cozette"; 3 | src: url("https://pudding.cool/assets/fonts/cozette/CozetteVector.woff2") format("woff2"); 4 | font-weight: 400; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } -------------------------------------------------------------------------------- /docs/assets/demo/fonts/inconsolata.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Inconsolata"; 3 | src: url("https://pudding.cool/assets/fonts/inconsolata/inconsolata-v32-latin-regular.woff2") format("woff2"); 4 | font-weight: 400; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } 9 | 10 | @font-face { 11 | font-family: "Inconsolata"; 12 | src: url("https://pudding.cool/assets/fonts/inconsolata/inconsolata-v32-latin-300.woff2") format("woff2"); 13 | font-weight: 300; 14 | font-style: normal; 15 | font-stretch: normal; 16 | font-display: swap; 17 | } 18 | 19 | @font-face { 20 | font-family: "Inconsolata"; 21 | src: url("https://pudding.cool/assets/fonts/inconsolata/inconsolata-v32-latin-500.woff2") format("woff2"); 22 | font-weight: 500; 23 | font-style: normal; 24 | font-stretch: normal; 25 | font-display: swap; 26 | } 27 | 28 | @font-face { 29 | font-family: "Inconsolata"; 30 | src: url("https://pudding.cool/assets/fonts/inconsolata/inconsolata-v32-latin-600.woff2") format("woff2"); 31 | font-weight: 600; 32 | font-style: normal; 33 | font-stretch: normal; 34 | font-display: swap; 35 | } 36 | 37 | @font-face { 38 | font-family: "Inconsolata"; 39 | src: url("https://pudding.cool/assets/fonts/inconsolata/inconsolata-v32-latin-700.woff2") format("woff2"); 40 | font-weight: 700; 41 | font-style: normal; 42 | font-stretch: normal; 43 | font-display: swap; 44 | } 45 | 46 | @font-face { 47 | font-family: "Inconsolata"; 48 | src: url("https://pudding.cool/assets/fonts/inconsolata/inconsolata-v32-latin-800.woff2") format("woff2"); 49 | font-weight: 800; 50 | font-style: normal; 51 | font-stretch: normal; 52 | font-display: swap; 53 | } -------------------------------------------------------------------------------- /docs/assets/demo/fonts/inter.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Inter"; 3 | src: url("https://pudding.cool/assets/fonts/inter/Inter-Regular.woff2") format("woff2"); 4 | font-weight: 400; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } 9 | @font-face { 10 | font-family: "Inter"; 11 | src: url("https://pudding.cool/assets/fonts/inter/Inter-Bold.woff2") format("woff2"); 12 | font-weight: 700; 13 | font-style: normal; 14 | font-stretch: normal; 15 | font-display: swap; 16 | } 17 | 18 | 19 | @font-face { 20 | font-family: "Inter"; 21 | src: url("https://pudding.cool/assets/fonts/inter/Inter-Light.woff2") format("woff2"); 22 | font-weight: 300; 23 | font-style: normal; 24 | font-stretch: normal; 25 | font-display: swap; 26 | } 27 | 28 | @font-face { 29 | font-family: "Inter"; 30 | src: url("https://pudding.cool/assets/fonts/inter/Inter-Black.woff2") format("woff2"); 31 | font-weight: 900; 32 | font-style: normal; 33 | font-stretch: normal; 34 | font-display: swap; 35 | } -------------------------------------------------------------------------------- /docs/assets/demo/fonts/jamboree.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Jamboree"; 3 | src: url("https://pudding.cool/assets/fonts/jamboree/Jamboree.woff2") format("woff2"); 4 | font-weight: 400; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } -------------------------------------------------------------------------------- /docs/assets/demo/fonts/jersey.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Jersey M54"; 3 | src: url("https://pudding.cool/assets/fonts/jersey/Jersey-M54.woff2") format("woff2"); 4 | font-weight: 400; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } -------------------------------------------------------------------------------- /docs/assets/demo/fonts/lyon.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Lyon Display"; 3 | src: url("https://pudding.cool/assets/fonts/lyon/LyonDisplay-Regular-Web.woff2") format("woff2"); 4 | font-weight: 400; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } -------------------------------------------------------------------------------- /docs/assets/demo/fonts/metropolis.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Metropolis"; 3 | src: url("https://pudding.cool/assets/fonts/metropolis/Metropolis-Regular.woff2") format("woff2"); 4 | font-weight: 400; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } 9 | 10 | @font-face { 11 | font-family: "Metropolis"; 12 | src: url("https://pudding.cool/assets/fonts/metropolis/Metropolis-Bold.woff2") format("woff2"); 13 | font-weight: 700; 14 | font-style: normal; 15 | font-stretch: normal; 16 | font-display: swap; 17 | } 18 | 19 | @font-face { 20 | font-family: "Metropolis"; 21 | src: url("https://pudding.cool/assets/fonts/metropolis/Metropolis-Light.woff2") format("woff2"); 22 | font-weight: 300; 23 | font-style: normal; 24 | font-stretch: normal; 25 | font-display: swap; 26 | } 27 | 28 | @font-face { 29 | font-family: "Metropolis"; 30 | src: url("https://pudding.cool/assets/fonts/metropolis/Metropolis-Black.woff2") format("woff2"); 31 | font-weight: 900; 32 | font-style: normal; 33 | font-stretch: normal; 34 | font-display: swap; 35 | } -------------------------------------------------------------------------------- /docs/assets/demo/fonts/national.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "National 2 Web"; 3 | src: url("https://pudding.cool/assets/fonts/national/National2Web-Regular.woff2") format("woff2"); 4 | font-weight: 400; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } 9 | 10 | @font-face { 11 | font-family: "National 2 Web"; 12 | src: url("https://pudding.cool/assets/fonts/national/National2Web-Bold.woff2") format("woff2"); 13 | font-weight: 700; 14 | font-style: normal; 15 | font-stretch: normal; 16 | font-display: swap; 17 | } 18 | 19 | @font-face { 20 | font-family: "National 2 Narrow Web"; 21 | src: url("https://pudding.cool/assets/fonts/national/National2NarrowWeb-Regular.woff2") format("woff2"); 22 | font-weight: 400; 23 | font-style: normal; 24 | font-stretch: normal; 25 | font-display: swap; 26 | } 27 | 28 | @font-face { 29 | font-family: "National 2 Narrow Web"; 30 | src: url("https://pudding.cool/assets/fonts/national/National2NarrowWeb-Bold.woff2") format("woff2"); 31 | font-weight: 700; 32 | font-style: normal; 33 | font-stretch: normal; 34 | font-display: swap; 35 | } 36 | 37 | @font-face { 38 | font-family: "National 2 Narrow Web"; 39 | src: url("https://pudding.cool/assets/fonts/national/National2NarrowWeb-ExtraLight.woff2") format("woff2"); 40 | font-weight: 200; 41 | font-style: normal; 42 | font-stretch: normal; 43 | font-display: swap; 44 | } 45 | 46 | @font-face { 47 | font-family: "National 2 Narrow Web"; 48 | src: url("https://pudding.cool/assets/fonts/national/National2NarrowWeb-Black.woff2") format("woff2"); 49 | font-weight: 900; 50 | font-style: normal; 51 | font-stretch: normal; 52 | font-display: swap; 53 | } -------------------------------------------------------------------------------- /docs/assets/demo/fonts/publico.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Publico Text"; 3 | src: url("https://pudding.cool/assets/fonts/publico/PublicoText-Roman-Web.woff2") format("woff2"); 4 | font-weight: 400; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } 9 | 10 | @font-face { 11 | font-family: "Publico Text"; 12 | src: url("https://pudding.cool/assets/fonts/publico/PublicoText-Bold-Web.woff2") format("woff2"); 13 | font-weight: 700; 14 | font-style: normal; 15 | font-stretch: normal; 16 | font-display: swap; 17 | } 18 | -------------------------------------------------------------------------------- /docs/assets/demo/fonts/recoleta.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Recoleta"; 3 | src: url("https://pudding.cool/assets/fonts/recoleta/recoleta.woff2") format("woff2"); 4 | font-weight: 400; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } -------------------------------------------------------------------------------- /docs/assets/demo/fonts/rubik.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Rubik"; 3 | src: url("https://pudding.cool/assets/fonts/rubik/rubik-v14-latin-regular.woff2") format("woff2"); 4 | font-weight: 400; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } 9 | 10 | @font-face { 11 | font-family: "Rubik"; 12 | src: url("https://pudding.cool/assets/fonts/rubik/rubik-v14-latin-700.woff2") format("woff2"); 13 | font-weight: 700; 14 | font-style: normal; 15 | font-stretch: normal; 16 | font-display: swap; 17 | } 18 | 19 | @font-face { 20 | font-family: "Rubik"; 21 | src: url("https://pudding.cool/assets/fonts/rubik/rubik-v14-latin-900.woff2") format("woff2"); 22 | font-weight: 900; 23 | font-style: normal; 24 | font-stretch: normal; 25 | font-display: swap; 26 | } 27 | 28 | @font-face { 29 | font-family: "Rubik"; 30 | src: url("https://pudding.cool/assets/fonts/rubik/rubik-v14-latin-300.woff2") format("woff2"); 31 | font-weight: 300; 32 | font-style: normal; 33 | font-stretch: normal; 34 | font-display: swap; 35 | } -------------------------------------------------------------------------------- /docs/assets/demo/fonts/spacemono.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Space Mono"; 3 | src: url("https://pudding.cool/assets/fonts/spacemono/SpaceMono-Regular.woff2") format("woff2"); 4 | font-weight: 400; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } 9 | 10 | @font-face { 11 | font-family: "Space Mono"; 12 | src: url("https://pudding.cool/assets/fonts/spacemono/SpaceMono-Bold.woff2") format("woff2"); 13 | font-weight: 700; 14 | font-style: normal; 15 | font-stretch: normal; 16 | font-display: swap; 17 | } -------------------------------------------------------------------------------- /docs/assets/demo/fonts/tiempos.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Tiempos Text"; 3 | src: url("https://pudding.cool/assets/fonts/tiempos/TiemposTextWeb-Regular.woff2") format("woff2"); 4 | font-weight: 400; 5 | font-style: normal; 6 | font-stretch: normal; 7 | font-display: swap; 8 | } 9 | 10 | @font-face { 11 | font-family: "Tiempos Text"; 12 | src: url("https://pudding.cool/assets/fonts/tiempos/TiemposTextWeb-Bold.woff2") format("woff2"); 13 | font-weight: 700; 14 | font-style: normal; 15 | font-stretch: normal; 16 | font-display: swap; 17 | } 18 | 19 | @font-face { 20 | font-family: "Tiempos Headline"; 21 | src: url("https://pudding.cool/assets/fonts/tiempos/TiemposHeadlineWeb-Regular.woff2") format("woff2"); 22 | font-weight: 400; 23 | font-style: normal; 24 | font-stretch: normal; 25 | font-display: swap; 26 | } 27 | -------------------------------------------------------------------------------- /docs/assets/demo/test.csv: -------------------------------------------------------------------------------- 1 | name,value 2 | russell,2 3 | samora,3 -------------------------------------------------------------------------------- /docs/assets/demo/test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-pudding/svelte-starter/af709d4ad57db15c10650a09accf8d5d4d2e23ac/docs/assets/demo/test.jpg -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-pudding/svelte-starter/af709d4ad57db15c10650a09accf8d5d4d2e23ac/docs/favicon.ico -------------------------------------------------------------------------------- /google.config.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | "id": "1352iFuTSDDFPNAXBbOaEXkF8mCdjPu6B43hpUF2P3C4", 4 | "filepath": "src/data/copy.json" 5 | }, 6 | { 7 | "id": "1te65h_nywgXVAzvV-9E5fmHGblcKvctf_cNZgeam9Tk", 8 | "gid": "0", 9 | "filepath": "src/data/test.csv" 10 | } 11 | ] -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "kit": { 3 | "alias": { 4 | "$actions/*": "./src/actions/*", 5 | "$components/*": "./src/components/*", 6 | "$data/*": "./src/data/*", 7 | "$routes/*": "./src/routes/*", 8 | "$runes/*": "./src/runes/*", 9 | "$styles/*": "./src/styles/*", 10 | "$svg/*": "./src/svg/*", 11 | "$utils/*": "./src/utils/*", 12 | } 13 | }, 14 | "include": [ 15 | "src/**/*.js", 16 | "src/**/*.svelte" 17 | ], 18 | "exclude": [ 19 | "tasks/*.js" 20 | ], 21 | "extends": "./.svelte-kit/tsconfig.json" 22 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-starter", 3 | "version": "6.14.0", 4 | "scripts": { 5 | "gdoc": "node tasks/fetch-google.js", 6 | "style": "node tasks/style-dictionary.js", 7 | "dev": "vite dev", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "lint": "prettier --check --plugin-search-dir=. .", 11 | "format": "prettier --write --plugin-search-dir=. ." 12 | }, 13 | "devDependencies": { 14 | "@lucide/svelte": "^0.525.0", 15 | "@rollup/plugin-dsv": "^3.0.5", 16 | "@sveltejs/adapter-static": "^3.0.8", 17 | "@sveltejs/kit": "^2.22.2", 18 | "@sveltejs/vite-plugin-svelte": "^5.1.0", 19 | "archieml": "^0.5.0", 20 | "autoprefixer": "^10.4.21", 21 | "bits-ui": "^2.8.10", 22 | "d3": "^7.9.0", 23 | "lodash.debounce": "^4.0.8", 24 | "postcss": "^8.5.6", 25 | "prettier": "^3.6.2", 26 | "prettier-plugin-svelte": "^3.4.0", 27 | "rollup": "^4.44.2", 28 | "rollup-plugin-svg": "^2.0.0", 29 | "runed": "^0.29.2", 30 | "style-dictionary": "^5.0.1", 31 | "svelte": "5.35.4", 32 | "svelte-preprocess": "^6.0.3", 33 | "typescript": "^5.8.3", 34 | "vite": "^6.3.5", 35 | "vite-plugin-svgstring": "^1.0.0" 36 | }, 37 | "type": "module", 38 | "engines": { 39 | "node": ">= 18.20.4" 40 | }, 41 | "browserslist": "> 0.5%, last 4 versions, not ie <= 11, not ie_mob <= 11" 42 | } 43 | -------------------------------------------------------------------------------- /properties/category.json: -------------------------------------------------------------------------------- 1 | { 2 | "category": { 3 | "blue": { 4 | "value": "#4477AA" 5 | }, 6 | "red": { 7 | "value": "#EE6677" 8 | }, 9 | "green": { 10 | "value": "#228833" 11 | }, 12 | "yellow": { 13 | "value": "#CCBB44" 14 | }, 15 | "cyan": { 16 | "value": "#66CCEE" 17 | }, 18 | "purple": { 19 | "value": "#AA3377" 20 | }, 21 | "gray": { 22 | "value": "#BBBBBB" 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /properties/color.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "black": { 4 | "value": "#000000" 5 | }, 6 | "white": { 7 | "value": "#ffffff" 8 | }, 9 | "gray-50": { 10 | "value": "rgb(247, 247, 247)" 11 | }, 12 | "gray-100": { 13 | "value": "rgb(239, 239, 239)" 14 | }, 15 | "gray-200": { 16 | "value": "rgb(223, 223, 223)" 17 | }, 18 | "gray-300": { 19 | "value": "rgb(202, 202, 202)" 20 | }, 21 | "gray-400": { 22 | "value": "rgb(168, 168, 168)" 23 | }, 24 | "gray-500": { 25 | "value": "rgb(135, 135, 135)" 26 | }, 27 | "gray-600": { 28 | "value": "rgb(109, 109, 109)" 29 | }, 30 | "gray-700": { 31 | "value": "rgb(78, 78, 78)" 32 | }, 33 | "gray-800": { 34 | "value": "rgb(55, 55, 55)" 35 | }, 36 | "gray-900": { 37 | "value": "rgb(38, 38, 38)" 38 | }, 39 | "gray-1000": { 40 | "value": "rgb(25, 25, 25)" 41 | }, 42 | "purple": { 43 | "value": "#a239ca" 44 | }, 45 | "blue": { 46 | "value": "#4717f6" 47 | }, 48 | "green": { 49 | "value": "#34a29e" 50 | }, 51 | "red": { 52 | "value": "#ff533d" 53 | }, 54 | "yellow": { 55 | "value": "#e5e338" 56 | } 57 | } 58 | } -------------------------------------------------------------------------------- /properties/font-size.json: -------------------------------------------------------------------------------- 1 | { 2 | "": { 3 | "12px": { 4 | "value": "0.75rem" 5 | }, 6 | "14px": { 7 | "value": "0.875rem" 8 | }, 9 | "16px": { 10 | "value": "1rem" 11 | }, 12 | "18px": { 13 | "value": "1.125rem" 14 | }, 15 | "20px": { 16 | "value": "1.25rem" 17 | }, 18 | "22px": { 19 | "value": "1.375rem" 20 | }, 21 | "24px": { 22 | "value": "1.5rem" 23 | }, 24 | "28px": { 25 | "value": "1.75rem" 26 | }, 27 | "32px": { 28 | "value": "2rem" 29 | }, 30 | "36px": { 31 | "value": "2.25rem" 32 | }, 33 | "40px": { 34 | "value": "2.5rem" 35 | }, 36 | "44px": { 37 | "value": "2.75rem" 38 | }, 39 | "48px": { 40 | "value": "3rem" 41 | }, 42 | "56px": { 43 | "value": "3.5rem" 44 | }, 45 | "64px": { 46 | "value": "4rem" 47 | }, 48 | "80px": { 49 | "value": "5rem" 50 | }, 51 | "96px": { 52 | "value": "6rem" 53 | }, 54 | "112px": { 55 | "value": "7rem" 56 | }, 57 | "128px": { 58 | "value": "8rem" 59 | } 60 | } 61 | } -------------------------------------------------------------------------------- /src/actions/canTab.js: -------------------------------------------------------------------------------- 1 | // params = { disable: false } 2 | 3 | export default function focusTrap(node, params) { 4 | const elements = ["a", "button", "input", "textarea", "select", "details", "[tabindex]:not([tabindex='-1'])"]; 5 | 6 | const setup = (p) => { 7 | focusableElements.forEach(el => { 8 | if (p && p.disable) el.setAttribute("tabindex", -1); 9 | else el.removeAttribute("tabindex"); 10 | }); 11 | }; 12 | 13 | const query = elements.join(", "); 14 | const focusableElements = [...node.querySelectorAll(query)]; 15 | 16 | setup(params); 17 | 18 | return { 19 | update(params) { 20 | setup(params); 21 | }, 22 | 23 | destroy() { 24 | focusableElements.forEach(el => el.removeAttribute("tabindex")); 25 | } 26 | }; 27 | } -------------------------------------------------------------------------------- /src/actions/checkOverlap.js: -------------------------------------------------------------------------------- 1 | function intersects( 2 | [minAx, minAy, maxAx, maxAy], 3 | [minBx, minBy, maxBx, maxBy] 4 | ) { 5 | const aLeftOfB = maxAx < minBx; 6 | const aRightOfB = minAx > maxBx; 7 | const aAboveB = minAy > maxBy; 8 | const aBelowB = maxAy < minBy; 9 | 10 | return !(aLeftOfB || aRightOfB || aAboveB || aBelowB); 11 | } 12 | 13 | const isOverlapping = (nodes) => { 14 | const root = nodes[0]; 15 | const { top, left, right, bottom } = root.getBoundingClientRect(); 16 | const a = [left, top, right, bottom]; 17 | const matches = nodes.slice(1).find((node) => { 18 | if (node.classList.contains("is-overlap")) return false; 19 | const r = node.getBoundingClientRect(); 20 | const b = [r.left, r.top, r.right, r.bottom]; 21 | return intersects(a, b); 22 | }); 23 | 24 | return !!matches; 25 | }; 26 | 27 | export default function checkOverlap(node, params = {}) { 28 | function check({ reverse, query }) { 29 | const elements = [ 30 | ...node.querySelectorAll(query || ":scope > *:not(iframe)") 31 | ]; 32 | if (reverse) elements.reverse(); 33 | elements.forEach((el, i) => { 34 | const overlap = isOverlapping(elements.slice(i)); 35 | if (overlap) el.classList.add("is-overlap"); 36 | else el.classList.remove("is-overlap"); 37 | }); 38 | } 39 | 40 | check(params); 41 | 42 | return { 43 | update(params) { 44 | check(params); 45 | }, 46 | 47 | destroy() {} 48 | }; 49 | } 50 | -------------------------------------------------------------------------------- /src/actions/focusTrap.js: -------------------------------------------------------------------------------- 1 | // params = { disable: false } 2 | 3 | export default function focusTrap(node, params) { 4 | const elements = [ 5 | "a", 6 | "button", 7 | "input", 8 | "textarea", 9 | "select", 10 | "details", 11 | "[tabindex]:not([tabindex='-1'])" 12 | ]; 13 | let firstFocusable; 14 | let lastFocusable; 15 | let active; 16 | 17 | const moveFocusToTop = (e) => { 18 | if (e.key === "Tab" && !e.shiftKey) { 19 | e.preventDefault(); 20 | firstFocusable.focus(); 21 | } 22 | }; 23 | 24 | const moveFocusToBottom = (e) => { 25 | if (e.key === "Tab" && e.shiftKey) { 26 | e.preventDefault(); 27 | lastFocusable.focus(); 28 | } 29 | }; 30 | 31 | const add = () => { 32 | if (firstFocusable) 33 | firstFocusable.addEventListener("keydown", moveFocusToBottom); 34 | if (lastFocusable) 35 | lastFocusable.addEventListener("keydown", moveFocusToTop); 36 | active = true; 37 | }; 38 | 39 | const remove = () => { 40 | if (firstFocusable) 41 | firstFocusable.removeEventListener("keydown", moveFocusToBottom); 42 | if (lastFocusable) 43 | lastFocusable.removeEventListener("keydown", moveFocusToTop); 44 | active = false; 45 | }; 46 | 47 | const setup = (p) => { 48 | if (active && p && p.disable) remove(); 49 | else if ((!active && !p) || (p && !p.disable)) add(); 50 | }; 51 | 52 | const query = elements.join(", "); 53 | const focusableElements = [...node.querySelectorAll(query)]; 54 | 55 | firstFocusable = focusableElements.shift(); 56 | lastFocusable = focusableElements.pop(); 57 | 58 | setup(params); 59 | 60 | return { 61 | update(params) { 62 | setup(params); 63 | }, 64 | 65 | destroy() { 66 | remove(); 67 | } 68 | }; 69 | } 70 | -------------------------------------------------------------------------------- /src/actions/inView.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This action triggers a custom event on node entering/exiting the viewport. 3 | * example: 4 | *

console.log("enter")} 7 | * on:exit={() => console.log("exit")} 8 | * > 9 | * 10 | * optional params { root, top, bottom, progress } 11 | * top and bottom are numbers 12 | * use:inView={{ bottom: 100 }} // 100 pixels from bottom of viewport 13 | * 14 | * progress is a boolean for incremental updates 15 | * use:inView={{ progres: true }} 16 | */ 17 | 18 | export default function inView(node, params = {}) { 19 | let observer; 20 | 21 | const handleIntersect = (e) => { 22 | const intersecting = e[0].isIntersecting; 23 | const v = intersecting ? "enter" : "exit"; 24 | node.dispatchEvent(new CustomEvent(v)); 25 | if (params.progress && intersecting) { 26 | const ratio = e[0].intersectionRatio; 27 | const detail = { ratio }; 28 | node.dispatchEvent(new CustomEvent("progress", { detail })); 29 | } 30 | }; 31 | 32 | const setObserver = ({ root, top, bottom }) => { 33 | const marginTop = top ? top * -1 : 0; 34 | const marginBottom = bottom ? bottom * -1 : 0; 35 | const rootMargin = `${marginTop}px 0px ${marginBottom}px 0px`; 36 | const options = { root, rootMargin }; 37 | if (observer) observer.disconnect(); 38 | observer = new IntersectionObserver(handleIntersect, options); 39 | observer.observe(node); 40 | }; 41 | 42 | setObserver(params); 43 | 44 | return { 45 | update(params) { 46 | setObserver(params); 47 | }, 48 | 49 | destroy() { 50 | if (observer) observer.disconnect(); 51 | } 52 | }; 53 | } 54 | -------------------------------------------------------------------------------- /src/actions/keepWithinBox.js: -------------------------------------------------------------------------------- 1 | function getXY(node) { 2 | return node 3 | .getAttribute("transform") 4 | .split(",") 5 | .map((d) => +d.replace(/[^0-9.]/g, "")); 6 | } 7 | 8 | // TODO top and bottom 9 | export default function keepWithinBox(node, params = {}) { 10 | function check({ width }) { 11 | const { top, left, right, bottom } = node.getBoundingClientRect(); 12 | let transform; 13 | const [x, y] = getXY(node); 14 | const w = right - left; 15 | const rightEdge = x + w / 2; 16 | const leftEdge = x - w / 2; 17 | 18 | if (rightEdge > width) { 19 | const diff = rightEdge - width; 20 | transform = `translate(${x - diff}, ${y})`; 21 | node.setAttribute("transform", transform); 22 | } else if (leftEdge < 0) { 23 | const diff = Math.abs(leftEdge); 24 | transform = `translate(${x + diff}, ${y})`; 25 | node.setAttribute("transform", transform); 26 | } 27 | } 28 | 29 | check(params); 30 | 31 | return { 32 | update(params) { 33 | check(params); 34 | }, 35 | 36 | destroy() {} 37 | }; 38 | } 39 | -------------------------------------------------------------------------------- /src/actions/resize.js: -------------------------------------------------------------------------------- 1 | import debounce from "lodash.debounce"; 2 | 3 | /** 4 | * This action triggers a resize event on node resizing, with optional debounce for performance. 5 | * example: 6 | *

console.log("enter")} 9 | * > 10 | * 11 | * optional params { debounce, exclude } 12 | * // debounce: ms to debounce resize event 13 | * // exclude: "width" or "height" to exclude from triggering resize event 14 | * use:resize={{ debounce: 250, exclude: "height" }} 15 | * 16 | */ 17 | 18 | export default function resize(node, params = {}) { 19 | let observer; 20 | let w; 21 | let h; 22 | 23 | const handleResize = (entries) => { 24 | const firstTime = w === undefined; 25 | 26 | for (const entry of entries) { 27 | const { width, height } = entry.contentRect; 28 | const widthTrigger = params.exclude !== "width" && width !== w; 29 | const heightTrigger = params.exclude !== "height" && height !== h; 30 | if (widthTrigger || heightTrigger) { 31 | w = width; 32 | h = height; 33 | if (!firstTime) node.dispatchEvent(new CustomEvent("resize")); 34 | } 35 | } 36 | }; 37 | 38 | const setObserver = () => { 39 | if (observer) observer.disconnect(); 40 | const cb = params.debounce 41 | ? debounce(handleResize, params.debounce) 42 | : handleResize; 43 | observer = new ResizeObserver(cb); 44 | observer.observe(node); 45 | }; 46 | 47 | setObserver(params); 48 | 49 | return { 50 | update(params) { 51 | setObserver(params); 52 | }, 53 | 54 | destroy() { 55 | if (observer) observer.disconnect(); 56 | } 57 | }; 58 | } 59 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | %sveltekit.head% 9 | 10 | 11 | 12 | Skip to main content 13 |

%sveltekit.body%
14 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/Footer.Story.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 |
16 | {#if !resource && !footer} 17 |
18 |

#{id}

19 |

{month}

20 |
21 | {/if} 22 | 23 |
24 | thumbnail for story 29 | {#if youtube} 30 | {@html playSvg} 31 | {/if} 32 |
33 |
34 |

35 | {@html short} 36 |

37 |

38 | {@html tease} 39 |

40 |
41 |
42 |
43 | 44 | 169 | -------------------------------------------------------------------------------- /src/components/Header.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 |
8 | {@html wordmark} 11 |
12 |
13 | 14 | 32 | -------------------------------------------------------------------------------- /src/components/Index.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | console.error(e)}> 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/Meta.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | {title} 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | {#each preloadFont as href} 41 | 42 | {/each} 43 | 44 | -------------------------------------------------------------------------------- /src/components/demo/Demo.Fonts.Sample.svelte: -------------------------------------------------------------------------------- 1 | 27 | 28 | 29 | 30 | 31 | 32 |
33 |

{family}

34 |

{text}

35 |
36 | CSS Snippet 37 | 38 | {source} 39 | 40 |
41 | 42 | 47 |
48 | 49 | 89 | -------------------------------------------------------------------------------- /src/components/demo/Demo.Fonts.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 |

Hosted Fonts on The Pudding

14 |

15 | Do not use fonts hosted by The Pudding without written permission. 16 |

17 |
18 | 19 | 20 | 21 | 22 |
23 |
24 | 25 |
26 | {#each grouped as [type, fonts]} 27 |

{type}

28 |
29 | {#each fonts as { family, id }} 30 | 31 | {/each} 32 |
33 | {/each} 34 |
35 | 36 | 57 | -------------------------------------------------------------------------------- /src/components/demo/Demo.Img.svelte: -------------------------------------------------------------------------------- 1 |
2 |

Image

3 |

img tag

4 | cat 5 |

background image

6 |
7 |
8 | 9 | 22 | -------------------------------------------------------------------------------- /src/components/demo/Demo.Link.svelte: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/components/demo/Demo.LoadData.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |
15 |

Load Data

16 | 17 |
18 | {#if response.loading} 19 |

loading data...

20 | {:else if response.error} 21 |

error: {response.error}

22 | {:else} 23 |

data loaded

24 |
{JSON.stringify(response.data, null, 2)}
25 | {/if} 26 |
27 |
28 | -------------------------------------------------------------------------------- /src/components/demo/Demo.MicroCMS.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 |

MicroCMS

13 | 14 |
{raw.replace(/\t/g, " ")}
15 |
16 | 17 |
18 | -------------------------------------------------------------------------------- /src/components/demo/Demo.MicroCMSTest.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

{label}

6 | 7 | -------------------------------------------------------------------------------- /src/components/demo/Demo.Scrolly.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 |

Scrolly {value || "-"}

8 |
9 | 10 | {#each [0, 1, 2, 3, 4] as text, i} 11 | {@const active = value === i} 12 |
13 |

{text}

14 |
15 | {/each} 16 |
17 |
18 |
19 | 20 | 40 | -------------------------------------------------------------------------------- /src/components/demo/Demo.Svelte5.svelte: -------------------------------------------------------------------------------- 1 | 38 | 39 |

Svelte5

40 | 41 |

Reactive variables 3 ways:

42 | 43 | 44 |

{count} doubled is {result1} (derived)

45 |

{count} doubled is {result2} (derived by)

46 |

{count} doubled is {result3} ($effect)

47 | 48 | 49 |

Children (previously slots):

50 |
51 | {@render children?.()} 52 |
53 | 54 |

Dispatch Event

55 | 56 | 57 | 58 | {#snippet person(p)} 59 |
60 |

{p.name}

61 |

{p.age}

62 |
63 | {/snippet} 64 | 65 |

Snippets

66 | 67 |
68 | {#each people as p} 69 | {@render person(p)} 70 | {/each} 71 |
72 | 73 | -------------------------------------------------------------------------------- /src/components/demo/Demo.SvelteComponent.A.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

I am component A and my favorite number is {number}.

6 | -------------------------------------------------------------------------------- /src/components/demo/Demo.SvelteComponent.B.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

I am component B and my name is {name}.

6 | -------------------------------------------------------------------------------- /src/components/demo/Demo.SvelteComponent.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 |
19 |

Dynamic Svelte Component

20 | {#each data as d} 21 | {@const C = components[d.component]} 22 | 23 | {/each} 24 |
25 | -------------------------------------------------------------------------------- /src/components/demo/Demo.SvelteElement.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |
15 |

Dynamic Svelte Element

16 | {#each items as { tag, text }} 17 | 18 | {text} 19 | 20 | {/each} 21 |
22 | -------------------------------------------------------------------------------- /src/components/demo/Demo.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 |
18 |

Demo

19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 46 | -------------------------------------------------------------------------------- /src/components/demo/demo-fonts.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "atkinson", 4 | "family": "Atkinson", 5 | "type": "sans-serif" 6 | }, 7 | { 8 | "id": "atlas", 9 | "family": "Atlas Grotesk", 10 | "type": "sans-serif" 11 | }, 12 | { 13 | "id": "baloo-bhai", 14 | "family": "Baloo Bhai", 15 | "type": "sans-serif" 16 | }, 17 | { 18 | "id": "canela", 19 | "family": "Canela", 20 | "type": "serif" 21 | }, 22 | { 23 | "id": "computer-modern", 24 | "family": "Computer Modern", 25 | "type": "serif" 26 | }, 27 | { 28 | "id": "cozette", 29 | "family": "Cozette", 30 | "type": "other" 31 | }, 32 | { 33 | "id": "inter", 34 | "family": "Inter", 35 | "type": "sans-serif" 36 | }, 37 | { 38 | "id": "jamboree", 39 | "family": "Jamboree", 40 | "type": "other" 41 | }, 42 | { 43 | "id": "jersey", 44 | "family": "Jersey M54", 45 | "type": "other" 46 | }, 47 | { 48 | "id": "lyon", 49 | "family": "Lyon Display", 50 | "type": "serif" 51 | }, 52 | { 53 | "id": "metropolis", 54 | "family": "Metropolis", 55 | "type": "sans-serif" 56 | }, 57 | { 58 | "id": "national", 59 | "family": "National 2 Web", 60 | "type": "sans-serif" 61 | }, 62 | { 63 | "id": "publico", 64 | "family": "Publico Text", 65 | "type": "serif" 66 | }, 67 | { 68 | "id": "recoleta", 69 | "family": "Recoleta", 70 | "type": "serif" 71 | }, 72 | { 73 | "id": "rubik", 74 | "family": "Rubik", 75 | "type": "sans-serif" 76 | }, 77 | { 78 | "id": "inconsolata", 79 | "family": "Inconsolata", 80 | "type": "mono" 81 | }, 82 | { 83 | "id": "spacemono", 84 | "family": "Space Mono", 85 | "type": "mono" 86 | }, 87 | { 88 | "id": "tiempos", 89 | "family": "Tiempos Text", 90 | "type": "serif" 91 | } 92 | ] 93 | -------------------------------------------------------------------------------- /src/components/demo/migrate/Demo.ButtonSet.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
14 |

Button Set {value}

15 | 16 |
17 | -------------------------------------------------------------------------------- /src/components/demo/migrate/Demo.Figure.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |

Figure

7 |
8 | 9 | 10 |
Figure caption
11 |
12 |
13 | -------------------------------------------------------------------------------- /src/components/demo/migrate/Demo.IgStory.Chapters.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 | {#each sections as { title, slides }, i} 9 | {@const chapterActive = allSlides[activeSlide].section === i} 10 |
11 | 12 | {i + 1} — {title} 13 | 14 | {#if chapterActive} 15 | {#each slides as slide} 16 | {@const active = slide.i === activeSlide} 17 |
18 | {/each} 19 | {:else} 20 |
21 | {/if} 22 |
23 | {/each} 24 |
25 | 26 | 92 | -------------------------------------------------------------------------------- /src/components/demo/migrate/Demo.IgStory.Figure.svelte: -------------------------------------------------------------------------------- 1 | 31 | 32 |
33 | visual goes here 34 |
35 | 36 | 52 | -------------------------------------------------------------------------------- /src/components/demo/migrate/Demo.IgStory.svelte: -------------------------------------------------------------------------------- 1 | 76 | 77 | 78 | 79 |
80 | 81 | {#each allSlides as slide, i} 82 | 83 | {#each slide.text as { type, text }} 84 | 85 | {@html text} 86 | 87 | {/each} 88 | 89 | {/each} 90 | 91 |
92 | 93 |
94 | 95 | 104 | 105 | 122 | -------------------------------------------------------------------------------- /src/components/demo/migrate/Demo.LayerCake.svelte: -------------------------------------------------------------------------------- 1 | 24 | 25 |
26 |

LayerCake scatterplot

27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 |
36 | 37 | 44 | -------------------------------------------------------------------------------- /src/components/demo/migrate/Demo.Range.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 |

Range {value}

9 | 10 |
11 | -------------------------------------------------------------------------------- /src/components/demo/migrate/Demo.Select.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |
15 |

Select {value}

16 |