diff --git a/packages/stacks-docs/src/docs/public/brand/motion.md b/packages/stacks-docs/src/docs/public/brand/motion.md index 0a628fe98b..b5226ff930 100644 --- a/packages/stacks-docs/src/docs/public/brand/motion.md +++ b/packages/stacks-docs/src/docs/public/brand/motion.md @@ -49,7 +49,7 @@ This should take place over 12 frames or less: 2 for the intro frame, maximum 10 - + @@ -88,7 +88,7 @@ This should take place over maximum 22 frames and include 1 frame skip in the mi - + @@ -132,7 +132,7 @@ This should never be longer than 20 frames to keep the final movement as a snap - + diff --git a/packages/stacks-docs/src/docs/public/brand/typography/TypographyWeights.svelte b/packages/stacks-docs/src/docs/public/brand/typography/TypographyWeights.svelte index cda723d10f..2ff3ce4839 100644 --- a/packages/stacks-docs/src/docs/public/brand/typography/TypographyWeights.svelte +++ b/packages/stacks-docs/src/docs/public/brand/typography/TypographyWeights.svelte @@ -49,6 +49,7 @@ .sample__type { margin: auto; font-size: 150px; + font-size: clamp(6rem, 10vw, 15rem); transition: font-weight 0.3s ease; font-family: "Stack Sans Headline"; } diff --git a/packages/stacks-docs/src/docs/public/copy/voice.md b/packages/stacks-docs/src/docs/public/copy/voice.md index 96d4dd5fc4..b9afecf5b7 100644 --- a/packages/stacks-docs/src/docs/public/copy/voice.md +++ b/packages/stacks-docs/src/docs/public/copy/voice.md @@ -71,12 +71,12 @@ If you’re not sure how normal or formal you’re being, read what you’ve wri
Say this…

The knowledge you need to keep creating.

-

Stack Overflow is a place for technologists and businesses to learn and share knowledge.

+

Stack Overflow is a place for technologists and businesses to learn and share knowledge.
Instead of this…

The knowledge required to power innovation.

-

Stack Overflow provides comprehensive information and data for technologists and businesses.

+

Stack Overflow provides comprehensive information and data for technologists and businesses.

 @@ -90,11 +90,11 @@ You can explain context or reasoning after, if you like, but keep it concise. Th
Say this…

Switch (100 opinions) for one right answer

-

Get the knowledge you need to solve problems and craft code that works. No vague ideas or random suggestions. Just verified, definitive answers from experienced developers.

+

Get the knowledge you need to solve problems and craft code that works. No vague ideas or random suggestions. Just verified, definitive answers from experienced developers.
Instead of this…
-

When you encounter problems in programming, finding the right information to solve them can feel impossible. Most information is unverified, and it seems like everyone has a different opinion. That’s why at Stack Overflow you won’t find guesswork and confusion. You’ll only find verified, definitive answers from experienced developers — so you can get the knowledge you need to solve problems and craft code that works.

+

When you encounter problems in programming, finding the right information to solve them can feel impossible. Most information is unverified, and it seems like everyone has a different opinion. That’s why at Stack Overflow you won’t find guesswork and confusion. You’ll only find verified, definitive answers from experienced developers — so you can get the knowledge you need to solve problems and craft code that works.

@@ -111,11 +111,11 @@ Check out the Spirited section for more tips on making our writing a little more
Say this…
-

Connect Stack Internal to Slack and Microsoft Teams so your developers can find the answers they need quickly. You can also create Communities where specialists can share the most relevant knowledge.

+

Connect Stack Internal to Slack and Microsoft Teams so your developers can find the answers they need quickly. You can also create Communities where specialists can share the most relevant knowledge.
Instead of this…
-

Enhance efficiency by integrating with tools including Slack and Microsoft Teams. Plus, empower teams and supercharge productivity by creating Communities centered on different specialisms.

+

Enhance efficiency by integrating with tools including Slack and Microsoft Teams. Plus, empower teams and supercharge productivity by creating Communities centered on different specialisms.

 @@ -133,12 +133,12 @@ Done well, this kind of writing earns trust, gives us an air of expertise and au
Say this…

You can’t know everything

-

But with Stack Internal, you can find someone who does.

+

But with Stack Internal, you can find someone who does.
Instead of this…

Become an expert in your field

-

Stack Internal puts valuable knowledge at your fingertips.

+

Stack Internal puts valuable knowledge at your fingertips.

 @@ -150,12 +150,12 @@ If there’s no expectation to subvert, no convention to challenge or no feather
Say this…

Find knowledge to upskill. Reskill. Outskill.

-

We can’t promise you a promotion, but we can promise you’ll learn something.

+

We can’t promise you a promotion, but we can promise you’ll learn something.
Instead of this…

Supercharge your future

-

Access the knowledge you need to boost your skills and transform your career.

+

Access the knowledge you need to boost your skills and transform your career.

 @@ -186,12 +186,12 @@ If we’re excited about something, we let it show. If we believe in something,
Say this…

One place. A million breakthroughs.

-

Join a community of technologists, businesses and developers working things out, together.

+

Join a community of technologists, businesses and developers working things out, together.
Instead of this…

The leading place for technical knowledge.

-

Here’s to changing the world, one question at a time.

+

Here’s to changing the world, one question at a time.

 @@ -206,25 +206,25 @@ Like computers, readers have a limit on how much they can process and remember

Structure and scanability

-

Write and structure your content in a way that lets people scan and get the most important information. Headlines and subheads are your friend here, as are bullet points, if you’re throwing a lot of information at them.

+

Write and structure your content in a way that lets people scan and get the most important information. Headlines and subheads are your friend here, as are bullet points, if you’re throwing a lot of information at them.

Density

-

Writing can feel dense if you’re using lots of formal language or the marketing fluff we’ve already highlighted. But also when you’re trying to cram too much into sentences and paragraphs. A good guideline is to try and develop no more than 1–2 ideas per paragraph.

+

Writing can feel dense if you’re using lots of formal language or the marketing fluff we’ve already highlighted. But also when you’re trying to cram too much into sentences and paragraphs. A good guideline is to try and develop no more than 1–2 ideas per paragraph.

Control your sentence lengths

-

Try to keep your sentences to a maximum of 30 words. There’s a lot of research that tells us the moment they go over that, they instantly become harder to understand. And within that limit, try to vary your sentence length. A nice mixture of short, mid and longer sentences creates rhythm and keeps monotony at bay.

+

Try to keep your sentences to a maximum of 30 words. There’s a lot of research that tells us the moment they go over that, they instantly become harder to understand. And within that limit, try to vary your sentence length. A nice mixture of short, mid and longer sentences creates rhythm and keeps monotony at bay.

Teaching developers. And models.

-

Stack Overflow has been the go-to place for technologists to learn for over fifteen years. Now you can license our vital, verified knowledge to train your AI models.

+

Stack Overflow has been the go-to place for technologists to learn for over fifteen years. Now you can license our vital, verified knowledge to train your AI models.

 -

As the go-to place for technologists to learn, Stack Overflow is unmatched for verified technical knowledge, and now you can license that public data – built up over fifteen years of questions and answers posted on our public forum – to train your AI models.

+

As the go-to place for technologists to learn, Stack Overflow is unmatched for verified technical knowledge, and now you can license that public data – built up over fifteen years of questions and answers posted on our public forum – to train your AI models.

 @@ -236,10 +236,10 @@ That said, in certain situations the passive voice can help soften a message. Th -

With Stack Internal, your developers can share knowledge and resources with the whole organization, so everyone can find the right answers quickly.

+

With Stack Internal, your developers can share knowledge and resources with the whole organization, so everyone can find the right answers quickly.

 -

With Stack Internal, knowledge and resources can be shared with the whole organization, making answers easily searchable and findable.

+

With Stack Internal, knowledge and resources can be shared with the whole organization, making answers easily searchable and findable.

@@ -254,11 +254,11 @@ Learn more about how we dial these aspects of our voice up and down in different

Content Health.

-

These posts haven’t been updated for six months. You may want to review them to check if the information is still accurate.

+

These posts haven’t been updated for six months. You may want to review them to check if the information is still accurate.

Content Health.

-

Things are always changing – we get it. But make sure your team has the right knowledge at hand by updating these old posts.

+

Things are always changing – we get it. But make sure your team has the right knowledge at hand by updating these old posts.

 @@ -277,15 +277,15 @@ There are no hard rules around this. It’s about reading the room and thinking

B2B

-

When we’re speaking to businesses, our messaging needs to feel professional. So we should focus on Simple over Spirited. The good news is that most B2B messaging is so stuffed with marketing fluff that clear, simple copy is enough to help us stand out and get our message across.

+

When we’re speaking to businesses, our messaging needs to feel professional. So we should focus on Simple over Spirited. The good news is that most B2B messaging is so stuffed with marketing fluff that clear, simple copy is enough to help us stand out and get our message across.

In product

-

In-product copy is there to guide, not distract. So simplicity is king. That said, there can still be moments where Spirited shines through, for example in a success message or during onboarding.

+

In-product copy is there to guide, not distract. So simplicity is king. That said, there can still be moments where Spirited shines through, for example in a success message or during onboarding.

Support

-

Someone reading our help center may be feeling frustrated or trying to fix an urgent problem. We should prioritize our Simple pillar to make sure the information they find is clear and easy to understand.

+

Someone reading our help center may be feeling frustrated or trying to fix an urgent problem. We should prioritize our Simple pillar to make sure the information they find is clear and easy to understand.

 @@ -294,14 +294,14 @@ There are no hard rules around this. It’s about reading the room and thinking

B2C

-

Consumers are used to brands talking to them in more relaxed and informal ways, so it’s appropriate for us to bring a little more wit and charm.

+

Consumers are used to brands talking to them in more relaxed and informal ways, so it’s appropriate for us to bring a little more wit and charm.

Social Media

-

On social media, our content needs to stand out and get noticed. Turning up the Spirited part of our voice can help.

+

On social media, our content needs to stand out and get noticed. Turning up the Spirited part of our voice can help.

Email Marketing

-

As a one-to-one channel, email marketing helps us build relationships with our customers. Leaning into our Spirited side helps keep our emails engaging, and humanizes us as a brand.

+

As a one-to-one channel, email marketing helps us build relationships with our customers. Leaning into our Spirited side helps keep our emails engaging, and humanizes us as a brand.

diff --git a/packages/stacks-docs/src/routes/[category]/+page.svelte b/packages/stacks-docs/src/routes/[category]/+page.svelte index bc6c92867b..6de2116aa5 100644 --- a/packages/stacks-docs/src/routes/[category]/+page.svelte +++ b/packages/stacks-docs/src/routes/[category]/+page.svelte @@ -5,7 +5,7 @@
-

{data?.active?.title}

+

{data?.active?.title}

{data?.active?.description}

{#each data?.active?.items as subsection (subsection.slug)} @@ -23,3 +23,9 @@ {/if} {/each}
+ + diff --git a/packages/stacks-docs/src/routes/[category]/[[section]]/[subsection]/+page.svelte b/packages/stacks-docs/src/routes/[category]/[[section]]/[subsection]/+page.svelte index d005e2b5b6..5e26e3c260 100644 --- a/packages/stacks-docs/src/routes/[category]/[[section]]/[subsection]/+page.svelte +++ b/packages/stacks-docs/src/routes/[category]/[[section]]/[subsection]/+page.svelte @@ -28,54 +28,54 @@ +
+ -
-
-
- +
+ {#if data?.metadata?.js} + + + JavaScript + + {/if} -
- {#if data?.metadata?.js} - - - JavaScript - - {/if} + {#if data?.metadata?.figma} + + + Figma + + {/if} - {#if data?.metadata?.figma} - - - Figma - - {/if} + {#if data?.metadata?.svelte} + + + Svelte + + {/if} - {#if data?.metadata?.svelte} - - - Svelte - - {/if} + {#if data.filename} + + + Edit + + {/if} +
+
- {#if data.filename} - - - Edit - - {/if} -
-
+
+
{#if data?.metadata?.updated} diff --git a/packages/stacks-docs/svelte.config.js b/packages/stacks-docs/svelte.config.js index a43f44b0de..0091192d7b 100644 --- a/packages/stacks-docs/svelte.config.js +++ b/packages/stacks-docs/svelte.config.js @@ -8,7 +8,7 @@ import rehypeSectionize from "@hbsnow/rehype-sectionize"; import rehypeAutolinkHeadings from "rehype-autolink-headings"; import extractToc from "@stefanprobst/rehype-extract-toc"; import hljs from "highlight.js"; -import { visit } from "unist-util-visit"; +import { visit, SKIP } from "unist-util-visit"; import { IconLink } from "@stackoverflow/stacks-icons/icons"; /** @type {import('@sveltejs/kit').Config} */ @@ -144,7 +144,7 @@ function addDocClasses() { // Ensures s-table is present while preserving any existing classes (e.g. s-table__bx-simple). function addTableClasses() { return function (tree) { - visit(tree, "element", (node) => { + visit(tree, "element", (node, index, parent) => { if (node.tagName === "table") { node.properties = node.properties || {}; const existing = Array.isArray(node.properties.className) @@ -155,6 +155,17 @@ function addTableClasses() { if (!existing.includes("s-table")) { node.properties.className = ["s-table", ...existing]; } + + if (parent) { + const wrapper = { + type: "element", + tagName: "div", + properties: { className: ["s-table-container"] }, + children: [node], + }; + parent.children.splice(index, 1, wrapper); + return [SKIP, index + 1]; + } } }); };