From 659767920de3898ecadf9cfcca69e051dbbfa964 Mon Sep 17 00:00:00 2001 From: Pierre Wizla Date: Tue, 9 Sep 2025 12:10:23 +0200 Subject: [PATCH 1/4] Add first draft of Tldr component with a very basic design --- docusaurus/src/components/Tldr.jsx | 17 ++++++++++++ docusaurus/src/scss/__index.scss | 1 + docusaurus/src/scss/tldr.scss | 37 +++++++++++++++++++++++++++ docusaurus/src/theme/MDXComponents.js | 2 ++ 4 files changed, 57 insertions(+) create mode 100644 docusaurus/src/components/Tldr.jsx create mode 100644 docusaurus/src/scss/tldr.scss diff --git a/docusaurus/src/components/Tldr.jsx b/docusaurus/src/components/Tldr.jsx new file mode 100644 index 0000000000..4b2a24eadb --- /dev/null +++ b/docusaurus/src/components/Tldr.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import Icon from './Icon'; + +export function Tldr({ children, title, icon = 'sparkle', className, ...rest }) { + return ( +
+ {title && ( +
+ {title} +
+ )} +
+ {children} +
+
+ ); +} \ No newline at end of file diff --git a/docusaurus/src/scss/__index.scss b/docusaurus/src/scss/__index.scss index 3243b1af17..01aff3d63c 100644 --- a/docusaurus/src/scss/__index.scss +++ b/docusaurus/src/scss/__index.scss @@ -51,4 +51,5 @@ @use 'table.scss'; @use 'tabs.scss'; @use 'table-of-contents.scss'; +@use 'tldr.scss'; @use 'typography.scss'; diff --git a/docusaurus/src/scss/tldr.scss b/docusaurus/src/scss/tldr.scss new file mode 100644 index 0000000000..64f1e7349c --- /dev/null +++ b/docusaurus/src/scss/tldr.scss @@ -0,0 +1,37 @@ +@use './tokens.scss' as *; +@use './mixins' as *; + +.tldr { + border-left: 4px solid var(--strapi-neutral-300); + padding-left: var(--strapi-spacing-4); + margin-bottom: var(--strapi-spacing-8); + font-size: var(--strapi-font-size-md); + + &__title { + font-weight: 600; + margin-bottom: var(--strapi-spacing-2); + color: var(--strapi-neutral-500); + } + + &__content p { + color: var(--strapi-neutral-500); + + > *:last-child { + margin-bottom: 0; + } + } +} + +@include dark { + .tldr { + border-left-color: var(--strapi-neutral-400); + + &__title { + color: var(--strapi-neutral-500); + } + + &__content { + color: var(--strapi-neutral-500); + } + } +} \ No newline at end of file diff --git a/docusaurus/src/theme/MDXComponents.js b/docusaurus/src/theme/MDXComponents.js index e69b4cdaec..b4121ed4cf 100644 --- a/docusaurus/src/theme/MDXComponents.js +++ b/docusaurus/src/theme/MDXComponents.js @@ -23,6 +23,7 @@ import { InteractiveQueryBuilder } from '../components/InteractiveQueryBuilder/I import { AlphaBadge, BetaBadge, FeatureFlagBadge, EnterpriseBadge, GrowthBadge, SsoBadge, CloudEssentialBadge, CloudProBadge, CloudScaleBadge, NewBadge, UpdatedBadge, VersionBadge } from '../components/Badge'; import { SideBySideColumn, SideBySideContainer } from '../components'; import ThemedImage from '@theme/ThemedImage'; +import { Tldr } from '../components/Tldr.jsx'; import { MultiLanguageSwitcher, MultiLanguageSwitcherRequest, @@ -92,6 +93,7 @@ export default { BreakingChangeIdCard, IdentityCard, IdentityCardItem, + Tldr, DebugComponent, /** * Reusable annotation components go below👇 From b4a40a042e8835d859fc101722d109302aefddf4 Mon Sep 17 00:00:00 2001 From: Pierre Wizla Date: Tue, 9 Sep 2025 12:10:44 +0200 Subject: [PATCH 2/4] Create some Tldr example content in Preview feature page --- docusaurus/docs/cms/features/preview.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docusaurus/docs/cms/features/preview.md b/docusaurus/docs/cms/features/preview.md index 99dff7725e..50abb1138f 100644 --- a/docusaurus/docs/cms/features/preview.md +++ b/docusaurus/docs/cms/features/preview.md @@ -11,6 +11,10 @@ tags: # Preview + +The Preview feature lets you see how your content changes will look on your front-end directly from Strapi's admin panel. It requires configuration in both Strapi (handler setup) and your front-end app (preview routes). Live Preview is available with Growth and Enterprise plans for real-time editing alongside preview. + + With the Preview feature, you can preview your front end application directly from Strapi's admin panel. This is helpful to see how updates to your content in the Edit View of the Content Manager will affect the final result. From d85e69163b28015df581f769cdaa90e6f259f431 Mon Sep 17 00:00:00 2001 From: Pierre Wizla Date: Tue, 9 Sep 2025 12:41:35 +0200 Subject: [PATCH 3/4] Test different design variants --- docusaurus/docs/cms/features/preview.md | 2 +- docusaurus/src/components/Tldr.jsx | 8 +- docusaurus/src/scss/tldr.scss | 112 +++++++++++++++++++++++- 3 files changed, 115 insertions(+), 7 deletions(-) diff --git a/docusaurus/docs/cms/features/preview.md b/docusaurus/docs/cms/features/preview.md index 50abb1138f..9aa4d82af5 100644 --- a/docusaurus/docs/cms/features/preview.md +++ b/docusaurus/docs/cms/features/preview.md @@ -11,7 +11,7 @@ tags: # Preview - + The Preview feature lets you see how your content changes will look on your front-end directly from Strapi's admin panel. It requires configuration in both Strapi (handler setup) and your front-end app (preview routes). Live Preview is available with Growth and Enterprise plans for real-time editing alongside preview. diff --git a/docusaurus/src/components/Tldr.jsx b/docusaurus/src/components/Tldr.jsx index 4b2a24eadb..368484c384 100644 --- a/docusaurus/src/components/Tldr.jsx +++ b/docusaurus/src/components/Tldr.jsx @@ -1,12 +1,14 @@ import React from 'react'; import Icon from './Icon'; -export function Tldr({ children, title, icon = 'sparkle', className, ...rest }) { +export function Tldr({ children, title, icon = 'sparkle', design = 'default', className, ...rest }) { + const designClass = design !== 'default' ? `tldr--${design}` : ''; + return ( -
+
{title && (
- {title} + {title}
)}
diff --git a/docusaurus/src/scss/tldr.scss b/docusaurus/src/scss/tldr.scss index 64f1e7349c..3551e89578 100644 --- a/docusaurus/src/scss/tldr.scss +++ b/docusaurus/src/scss/tldr.scss @@ -6,6 +6,7 @@ padding-left: var(--strapi-spacing-4); margin-bottom: var(--strapi-spacing-8); font-size: var(--strapi-font-size-md); + color: var(--strapi-neutral-500); &__title { font-weight: 600; @@ -13,25 +14,130 @@ color: var(--strapi-neutral-500); } - &__content p { - color: var(--strapi-neutral-500); + &__content { + color: inherit; + + * { + color: inherit; + } + + code { + background-color: var(--strapi-neutral-100); + border: 1px solid var(--strapi-neutral-200); + } + + a { + color: var(--strapi-primary-500); + + &:hover { + color: var(--strapi-primary-600); + } + } > *:last-child { margin-bottom: 0; } } + + // Design: quote-style avec icône newspaper en filigrane + &--quote { + position: relative; + + &::before { + content: '\E344'; // ph-newspaper icon (U+E344) + font-family: 'Phosphor'; + font-size: 48px; + position: absolute; + top: 8px; + left: 12px; + color: var(--strapi-neutral-150); + z-index: -1; + opacity: 0.3; + } + + .tldr__title { + position: relative; + z-index: 1; + } + + .tldr__content { + position: relative; + z-index: 1; + } + } + + // Design: editorial avec première lettre stylisée (drop cap) + &--editorial { + .tldr__content p:first-child::first-letter { + font-size: 2.5em; + font-weight: 700; + float: left; + line-height: 0.8; + margin-right: 8px; + margin-top: 4px; + color: var(--strapi-neutral-600); + } + } + + // Design: highlighted avec background dégradé + bordure complète + &--highlighted { + background: linear-gradient(90deg, var(--strapi-neutral-100) 0%, transparent 100%); + border-radius: 0 4px 4px 0; + padding: var(--strapi-spacing-3) var(--strapi-spacing-4); + + .tldr__content code { + background-color: var(--strapi-neutral-200); + border-color: var(--strapi-neutral-300); + } + } } @include dark { .tldr { border-left-color: var(--strapi-neutral-400); + color: var(--strapi-neutral-500); &__title { color: var(--strapi-neutral-500); } &__content { - color: var(--strapi-neutral-500); + code { + background-color: var(--strapi-neutral-150); + border-color: var(--strapi-neutral-200); + } + + a { + color: var(--strapi-primary-500); + + &:hover { + color: var(--strapi-primary-400); + } + } + } + + // Design quote dark mode + &--quote { + &::before { + color: var(--strapi-neutral-200); + } + } + + // Design editorial dark mode + &--editorial { + .tldr__content p:first-child::first-letter { + color: var(--strapi-neutral-700); + } + } + + // Design highlighted dark mode + &--highlighted { + background: linear-gradient(90deg, var(--strapi-neutral-150) 0%, transparent 100%); + + .tldr__content code { + background-color: var(--strapi-neutral-200); + border-color: var(--strapi-neutral-300); + } } } } \ No newline at end of file From 28bc2d1a58a3933e46b99de35220fd4c178bb86d Mon Sep 17 00:00:00 2001 From: Pierre Wizla Date: Tue, 9 Sep 2025 13:10:47 +0200 Subject: [PATCH 4/4] Try various design proposals --- docusaurus/docs/cms/features/preview.md | 9 +++++- docusaurus/src/components/Tldr.jsx | 2 +- docusaurus/src/scss/tldr.scss | 39 ++++++++++++++++--------- 3 files changed, 34 insertions(+), 16 deletions(-) diff --git a/docusaurus/docs/cms/features/preview.md b/docusaurus/docs/cms/features/preview.md index 9aa4d82af5..da38008e49 100644 --- a/docusaurus/docs/cms/features/preview.md +++ b/docusaurus/docs/cms/features/preview.md @@ -11,7 +11,14 @@ tags: # Preview - + + + + + + + + The Preview feature lets you see how your content changes will look on your front-end directly from Strapi's admin panel. It requires configuration in both Strapi (handler setup) and your front-end app (preview routes). Live Preview is available with Growth and Enterprise plans for real-time editing alongside preview. diff --git a/docusaurus/src/components/Tldr.jsx b/docusaurus/src/components/Tldr.jsx index 368484c384..28eeacfd83 100644 --- a/docusaurus/src/components/Tldr.jsx +++ b/docusaurus/src/components/Tldr.jsx @@ -8,7 +8,7 @@ export function Tldr({ children, title, icon = 'sparkle', design = 'default', cl
{title && (
- {title} + {title}
)}
diff --git a/docusaurus/src/scss/tldr.scss b/docusaurus/src/scss/tldr.scss index 3551e89578..ca9fd611bc 100644 --- a/docusaurus/src/scss/tldr.scss +++ b/docusaurus/src/scss/tldr.scss @@ -1,11 +1,18 @@ @use './tokens.scss' as *; @use './mixins' as *; +:root { + --border-left-color: var(--strapi-neutral-200); + --quote-icon-color: var(--strapi-neutral-200); + --editorial-first-letter-color: var(--strapi-neutral-500); + --default-tldr-font-size: var(--strapi-font-size-md); +} + .tldr { - border-left: 4px solid var(--strapi-neutral-300); + border-left: 4px solid var(--border-left-color); padding-left: var(--strapi-spacing-4); margin-bottom: var(--strapi-spacing-8); - font-size: var(--strapi-font-size-md); + font-size: var(--default-tldr-font-size); color: var(--strapi-neutral-500); &__title { @@ -44,15 +51,15 @@ position: relative; &::before { - content: '\E344'; // ph-newspaper icon (U+E344) + content: '\E346'; // ph-newspaper icon (U+E344) font-family: 'Phosphor'; - font-size: 48px; + font-size: 4em; + // font-style: italic; position: absolute; - top: 8px; - left: 12px; - color: var(--strapi-neutral-150); + top: 9px; + left: -72px; + color: var(--quote-icon-color); z-index: -1; - opacity: 0.3; } .tldr__title { @@ -66,16 +73,16 @@ } } - // Design: editorial avec première lettre stylisée (drop cap) + // Design: editorial avec drop cap classique &--editorial { .tldr__content p:first-child::first-letter { - font-size: 2.5em; + font-size: 3.3em; font-weight: 700; float: left; line-height: 0.8; margin-right: 8px; - margin-top: 4px; - color: var(--strapi-neutral-600); + margin-top: 2px; + color: var(--editorial-first-letter-color); } } @@ -93,6 +100,10 @@ } @include dark { + --border-left-color: var(--strapi-neutral-400); + --quote-icon-color: var(--strapi-neutral-400); + --editorial-first-letter-color: var(--strapi-neutral-400); + .tldr { border-left-color: var(--strapi-neutral-400); color: var(--strapi-neutral-500); @@ -119,14 +130,14 @@ // Design quote dark mode &--quote { &::before { - color: var(--strapi-neutral-200); + color: var(--quote-icon-color); } } // Design editorial dark mode &--editorial { .tldr__content p:first-child::first-letter { - color: var(--strapi-neutral-700); + color: var(--editorial-first-letter-color); } }