From e620ec7c8a206819087a514694b8abc76065add8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 10 Apr 2024 19:14:57 +0200 Subject: [PATCH 1/6] fix: prevent list items from overflowing Markdown content --- docs/src/content/docs/guides/authoring-content.md | 14 ++++++++++++++ packages/starlight/style/markdown.css | 6 ++++++ 2 files changed, 20 insertions(+) diff --git a/docs/src/content/docs/guides/authoring-content.md b/docs/src/content/docs/guides/authoring-content.md index 4db1a91646..6e94a35b7d 100644 --- a/docs/src/content/docs/guides/authoring-content.md +++ b/docs/src/content/docs/guides/authoring-content.md @@ -368,3 +368,17 @@ Starlight supports all other Markdown authoring syntax, such as lists and tables ## Advanced Markdown and MDX configuration Starlight uses Astro’s Markdown and MDX renderer built on remark and rehype. You can add support for custom syntax and behavior by adding `remarkPlugins` or `rehypePlugins` in your Astro config file. See [“Configuring Markdown and MDX”](https://docs.astro.build/en/guides/markdown-content/#configuring-markdown-and-mdx) in the Astro docs to learn more. + +## Test + +I'm a test in a sentence https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com. + +Then, let's check some unordered lists: +- https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com +- https://github.com/withastro/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa +- https://github.com/withastro/starlight + +Then, let's check some ordered lists: +1. https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com +1. https://github.com/withastro/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa +1. https://github.com/withastro/starlight diff --git a/packages/starlight/style/markdown.css b/packages/starlight/style/markdown.css index d0e2248eb1..976b3517a0 100644 --- a/packages/starlight/style/markdown.css +++ b/packages/starlight/style/markdown.css @@ -18,6 +18,12 @@ margin-top: 0.25rem; } +.sl-markdown-content + li { + background: rgba(255, 0, 0, .5); + overflow-wrap: anywhere; +} + .sl-markdown-content li > :last-child:not(li, ul, ol):not(a, strong, em, del, span, input, :where(.not-content *)) { From d5fae7d2f18bbac4b5e58b8f3a0ebb9a480423c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 15 May 2024 20:45:38 +0200 Subject: [PATCH 2/6] Handle TabItems --- docs/src/content/docs/getting-started.mdx | 2 +- docs/src/content/docs/guides/customization.mdx | 2 +- packages/starlight/user-components/Tabs.astro | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/src/content/docs/getting-started.mdx b/docs/src/content/docs/getting-started.mdx index eb3a8f3e25..8b83e3bd4a 100644 --- a/docs/src/content/docs/getting-started.mdx +++ b/docs/src/content/docs/getting-started.mdx @@ -30,7 +30,7 @@ pnpm create astro --template starlight ``` - + ```sh yarn create astro --template starlight diff --git a/docs/src/content/docs/guides/customization.mdx b/docs/src/content/docs/guides/customization.mdx index c2eaa328bf..7315cc5c88 100644 --- a/docs/src/content/docs/guides/customization.mdx +++ b/docs/src/content/docs/guides/customization.mdx @@ -401,7 +401,7 @@ It provides npm modules you can install for the fonts you want to use and includ - + ```sh yarn add @fontsource/ibm-plex-serif diff --git a/packages/starlight/user-components/Tabs.astro b/packages/starlight/user-components/Tabs.astro index 2f58103d72..5d727a2d0f 100644 --- a/packages/starlight/user-components/Tabs.astro +++ b/packages/starlight/user-components/Tabs.astro @@ -60,6 +60,7 @@ const { html, panels } = processPanels(panelHtml); border-bottom: 2px solid var(--sl-color-gray-5); color: var(--sl-color-gray-3); outline-offset: var(--sl-outline-offset-inside); + overflow-wrap: initial; } .tab [role='tab'][aria-selected='true'] { color: var(--sl-color-white); From 70babbef13991efc66d05c2196950de683a4837b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 16 May 2024 14:45:31 +0200 Subject: [PATCH 3/6] Enhance `.sl-markdown-content li` CSS rule --- packages/starlight/style/markdown.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/starlight/style/markdown.css b/packages/starlight/style/markdown.css index 976b3517a0..eaafadd580 100644 --- a/packages/starlight/style/markdown.css +++ b/packages/starlight/style/markdown.css @@ -18,10 +18,9 @@ margin-top: 0.25rem; } -.sl-markdown-content - li { - background: rgba(255, 0, 0, .5); - overflow-wrap: anywhere; +.sl-markdown-content li:not(:where(.not-content *)) { + background: rgba(255, 0, 0, .5); + overflow-wrap: anywhere; } .sl-markdown-content From acc688e889080446ebff09c254e18c1a3236a4fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 16 May 2024 22:38:54 +0200 Subject: [PATCH 4/6] Drop extra testing content --- docs/src/content/docs/getting-started.mdx | 2 +- docs/src/content/docs/guides/authoring-content.md | 14 -------------- packages/starlight/style/markdown.css | 1 - 3 files changed, 1 insertion(+), 16 deletions(-) diff --git a/docs/src/content/docs/getting-started.mdx b/docs/src/content/docs/getting-started.mdx index c00b5301d6..810b17f849 100644 --- a/docs/src/content/docs/getting-started.mdx +++ b/docs/src/content/docs/getting-started.mdx @@ -30,7 +30,7 @@ pnpm create astro --template starlight ``` - + ```sh yarn create astro --template starlight diff --git a/docs/src/content/docs/guides/authoring-content.md b/docs/src/content/docs/guides/authoring-content.md index 6e94a35b7d..4db1a91646 100644 --- a/docs/src/content/docs/guides/authoring-content.md +++ b/docs/src/content/docs/guides/authoring-content.md @@ -368,17 +368,3 @@ Starlight supports all other Markdown authoring syntax, such as lists and tables ## Advanced Markdown and MDX configuration Starlight uses Astro’s Markdown and MDX renderer built on remark and rehype. You can add support for custom syntax and behavior by adding `remarkPlugins` or `rehypePlugins` in your Astro config file. See [“Configuring Markdown and MDX”](https://docs.astro.build/en/guides/markdown-content/#configuring-markdown-and-mdx) in the Astro docs to learn more. - -## Test - -I'm a test in a sentence https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com. - -Then, let's check some unordered lists: -- https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com -- https://github.com/withastro/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa -- https://github.com/withastro/starlight - -Then, let's check some ordered lists: -1. https://aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com -1. https://github.com/withastro/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa -1. https://github.com/withastro/starlight diff --git a/packages/starlight/style/markdown.css b/packages/starlight/style/markdown.css index eaafadd580..1f065ff9eb 100644 --- a/packages/starlight/style/markdown.css +++ b/packages/starlight/style/markdown.css @@ -19,7 +19,6 @@ } .sl-markdown-content li:not(:where(.not-content *)) { - background: rgba(255, 0, 0, .5); overflow-wrap: anywhere; } From 49e6b19164ffceed1a6e61c2bcd7305f0443914f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 16 May 2024 22:39:28 +0200 Subject: [PATCH 5/6] Drop extra testing content --- docs/src/content/docs/guides/customization.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/content/docs/guides/customization.mdx b/docs/src/content/docs/guides/customization.mdx index 7cb1a897c4..1bb35d2116 100644 --- a/docs/src/content/docs/guides/customization.mdx +++ b/docs/src/content/docs/guides/customization.mdx @@ -401,7 +401,7 @@ It provides npm modules you can install for the fonts you want to use and includ - + ```sh yarn add @fontsource/ibm-plex-serif From b82f34de2c3717f272282ba0e1a368979c56b5be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 16 May 2024 22:46:19 +0200 Subject: [PATCH 6/6] Add changeset --- .changeset/tough-glasses-tan.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tough-glasses-tan.md diff --git a/.changeset/tough-glasses-tan.md b/.changeset/tough-glasses-tan.md new file mode 100644 index 0000000000..4d4e7e9fa9 --- /dev/null +++ b/.changeset/tough-glasses-tan.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight': patch +--- + +Prevent list items from overflowing Markdown content