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/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..d3c25d8d79 100644 --- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte +++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte @@ -36,19 +36,24 @@ @@ -57,15 +62,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; - } } } @@ -76,16 +84,23 @@ @media (max-width: 1199px) { margin: 4rem 0; - 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; } 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); + text-transform: uppercase; + color: var(--sk-text-4); &::before { content: ''; @@ -96,14 +111,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 +137,7 @@ nav { display: none; + padding: 0 0 0 3rem; } } @@ -151,8 +167,8 @@ nav { display: block; - a:first-child { - display: block; + li:first-child { + display: list-item; } a.active { 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..15b74bca61 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)); - font-size: 1.4rem; - font-weight: 600; + 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: var(--sk-text-xs); + 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'; + } } }