From d871fef339348839700391086e9738869f33d2f0 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 28 Sep 2024 18:17:23 -0400 Subject: [PATCH 1/4] overhaul legacy mode callouts --- .../03-reactivity-fundamentals.md | 116 ++++++++---------- packages/site-kit/src/lib/icons/chevron.svg | 3 + .../site-kit/src/lib/markdown/renderer.ts | 9 +- packages/site-kit/src/lib/styles/text.css | 47 +++++-- 4 files changed, 101 insertions(+), 74 deletions(-) create mode 100644 packages/site-kit/src/lib/icons/chevron.svg diff --git a/apps/svelte.dev/content/docs/svelte/01-introduction/03-reactivity-fundamentals.md b/apps/svelte.dev/content/docs/svelte/01-introduction/03-reactivity-fundamentals.md index 1d165d46ac..5feace5493 100644 --- a/apps/svelte.dev/content/docs/svelte/01-introduction/03-reactivity-fundamentals.md +++ b/apps/svelte.dev/content/docs/svelte/01-introduction/03-reactivity-fundamentals.md @@ -40,22 +40,18 @@ class Todo { } ``` -
-Legacy mode - -In Svelte 4, state was implicitly reactive if the variable was declared at the top level - -```svelte - - - -``` - -
+> [!LEGACY] +> In Svelte 4, state was implicitly reactive if the variable was declared at the top level +> +> ```svelte +> +> +> +> ``` ## `$derived` @@ -78,26 +74,23 @@ The expression inside `$derived(...)` should be free of side-effects. Svelte wil As with `$state`, you can mark class fields as `$derived`. -
-Legacy mode -In Svelte 4, you could use reactive statements for this. - -```svelte - - - - -

{count} doubled is {doubled}

-``` - -This only worked at the top level of a component. - -
+> [!LEGACY] +> In Svelte 4, you could use reactive statements for this. +> +> ```svelte +> +> +> +> +>

{count} doubled is {doubled}

+> ``` +> +> This only worked at the top level of a component. ## `$effect` @@ -125,30 +118,27 @@ To run _side-effects_ when the component is mounted to the DOM, and when values The function passed to `$effect` will run when the component mounts, and will re-run after any changes to the values it reads that were declared with `$state` or `$derived` (including those passed in with `$props`). Re-runs are batched (i.e. changing `color` and `size` in the same moment won't cause two separate runs), and happen after any DOM updates have been applied. -
-Legacy mode -In Svelte 4, you could use reactive statements for this. - -```svelte - - - -``` - -This only worked at the top level of a component. - -
+> [!LEGACY] +> In Svelte 4, you could use reactive statements for this. +> +> ```svelte +> +> +> +> ``` +> +> This only worked at the top level of a component. diff --git a/packages/site-kit/src/lib/icons/chevron.svg b/packages/site-kit/src/lib/icons/chevron.svg new file mode 100644 index 0000000000..d85858ec63 --- /dev/null +++ b/packages/site-kit/src/lib/icons/chevron.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts index e29a68bf88..082fe2955f 100644 --- a/packages/site-kit/src/lib/markdown/renderer.ts +++ b/packages/site-kit/src/lib/markdown/renderer.ts @@ -258,7 +258,14 @@ async function parse({ )}`; }, code: (source, language) => code(source, language ?? 'js', current), - codespan + codespan, + blockquote: (content) => { + if (content.includes('[!LEGACY]')) { + content = `
Legacy mode${content.replace('[!LEGACY]', '')}
`; + } + + return `
${content}
`; + } }); return content; diff --git a/packages/site-kit/src/lib/styles/text.css b/packages/site-kit/src/lib/styles/text.css index 6301634675..074400f4d5 100644 --- a/packages/site-kit/src/lib/styles/text.css +++ b/packages/site-kit/src/lib/styles/text.css @@ -351,27 +351,54 @@ } details.legacy { - background-color: hsla(var(--sk-text-warning-hsl), 0.02); - border-radius: var(--sk-border-radius); - padding: 1rem; - margin: 1rem 0; + &::after { + content: ''; + background: url(../icons/chevron.svg); + background-size: contain; + position: absolute; + right: 0.5rem; + top: 0.5rem; + width: 2rem; + height: 2rem; + rotate: -90deg; + transition: rotate 0.2s; + pointer-events: none; + } & > summary { - color: hsl(var(--sk-text-warning-hsl)); + position: relative; + display: flex; + align-items: center; + height: 3rem; + color: var(--sk-text-4); + font-family: var(--sk-font-heading); + font-style: normal; font-size: 1.4rem; - font-weight: 600; + user-select: none; &::after { + position: absolute; + display: flex; + align-items: center; + right: 3rem; + top: 0; + height: 100%; content: 'show all'; float: right; } } - &[open] > summary { - margin-bottom: 1.4rem; - + &[open] { &::after { - content: 'hide all'; + rotate: 90deg; + } + + & > summary { + margin-bottom: 1.4rem; + + &::after { + content: 'hide all'; + } } } From ba37480774757bf15830c8486905e484c2cca3db Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 28 Sep 2024 18:44:48 -0400 Subject: [PATCH 2/4] use icon for OTP --- apps/svelte.dev/src/lib/icons/contents.svg | 29 +++++++++++++++++++ .../routes/docs/[...path]/OnThisPage.svelte | 17 ++++++++--- packages/site-kit/src/lib/styles/text.css | 2 +- 3 files changed, 43 insertions(+), 5 deletions(-) create mode 100644 apps/svelte.dev/src/lib/icons/contents.svg diff --git a/apps/svelte.dev/src/lib/icons/contents.svg b/apps/svelte.dev/src/lib/icons/contents.svg new file mode 100644 index 0000000000..b24fac9f7a --- /dev/null +++ b/apps/svelte.dev/src/lib/icons/contents.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte index 4dce5e7ba5..92d0d40c9a 100644 --- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte +++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte @@ -76,8 +76,8 @@ @media (max-width: 1199px) { margin: 4rem 0; - background: var(--sk-back-3); - padding: 1rem; + /* background: var(--sk-back-3); */ + /* padding: 1rem; */ &:not(:has(a:nth-child(2))) { /* hide widget if there are no subheadings */ @@ -86,6 +86,14 @@ label { position: relative; + display: flex; + align-items: center; + background: url($lib/icons/contents.svg) 0 50% no-repeat; + background-size: 2rem 2rem; + padding: 0.2rem 0 0 3rem; + height: 3rem; + font-size: var(--sk-text-xs); + color: var(--sk-text-4); &::before { content: ''; @@ -96,14 +104,14 @@ height: 1em; background: url($lib/icons/chevron.svg); background-size: contain; - rotate: 0deg; + rotate: -90deg; transition: rotate 0.2s; } } label:has(:checked) { &::before { - rotate: -90deg; + rotate: 90deg; } & + nav { @@ -122,6 +130,7 @@ nav { display: none; + padding: 0 0 0 3rem; } } diff --git a/packages/site-kit/src/lib/styles/text.css b/packages/site-kit/src/lib/styles/text.css index 074400f4d5..15b74bca61 100644 --- a/packages/site-kit/src/lib/styles/text.css +++ b/packages/site-kit/src/lib/styles/text.css @@ -373,7 +373,7 @@ details.legacy { color: var(--sk-text-4); font-family: var(--sk-font-heading); font-style: normal; - font-size: 1.4rem; + font-size: var(--sk-text-xs); user-select: none; &::after { From b1011ba384faca272e122198077be5db9eb62359 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 28 Sep 2024 18:57:01 -0400 Subject: [PATCH 3/4] ul --- .../routes/docs/[...path]/OnThisPage.svelte | 52 ++++++++++++------- 1 file changed, 34 insertions(+), 18 deletions(-) diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte index 92d0d40c9a..5918675814 100644 --- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte +++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte @@ -41,14 +41,20 @@ @@ -57,15 +63,18 @@ nav { padding-top: 0.8rem; + ul { + margin: 0; + list-style: none; + } + + /* Only show the title link if it's in the sidebar */ + li:first-child { + display: none; + } + a { - display: block; color: var(--sk-text-3); - box-shadow: none; /* unfortunate hack to unset some other CSS */ - - /* Only show the title link if it's in the sidebar */ - &:first-child { - display: none; - } } } @@ -79,11 +88,13 @@ /* background: var(--sk-back-3); */ /* padding: 1rem; */ - &:not(:has(a:nth-child(2))) { + &:not(:has(li:nth-child(2))) { /* hide widget if there are no subheadings */ display: none; } + font-family: var(--sk-font-heading); + label { position: relative; display: flex; @@ -93,6 +104,7 @@ padding: 0.2rem 0 0 3rem; height: 3rem; font-size: var(--sk-text-xs); + text-transform: uppercase; color: var(--sk-text-4); &::before { @@ -132,6 +144,10 @@ display: none; padding: 0 0 0 3rem; } + + li::before { + content: '• '; + } } @media (min-width: 1200px) { @@ -160,8 +176,8 @@ nav { display: block; - a:first-child { - display: block; + li:first-child { + display: list-item; } a.active { From 7aeb9425922a19d6def6b2964a486909bf855170 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 28 Sep 2024 19:02:27 -0400 Subject: [PATCH 4/4] tweaks --- .../src/routes/docs/[...path]/OnThisPage.svelte | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte index 5918675814..d3c25d8d79 100644 --- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte +++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte @@ -36,13 +36,12 @@