Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions docusaurus/docs/cms/features/preview.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,17 @@ tags:

# Preview

<Tldr>
<!-- <Tldr title="Page summary"> -->
<!-- <Tldr design="highlighted"> -->
<!-- <Tldr design="highlighted" title="Page summary"> -->
<!-- <Tldr design="editorial"> -->
<!-- <Tldr design="editorial" title="Page summary"> -->
<!-- <Tldr design="quote"> -->
<!-- <Tldr design="quote" title="Page summary"> -->
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.
</Tldr>

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.

<IdentityCard>
Expand Down
19 changes: 19 additions & 0 deletions docusaurus/src/components/Tldr.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';
import Icon from './Icon';

export function Tldr({ children, title, icon = 'sparkle', design = 'default', className, ...rest }) {
const designClass = design !== 'default' ? `tldr--${design}` : '';

return (
<div className={`tldr ${designClass} ${className || ''}`} {...rest}>
{title && (
<div className="tldr__title">
<Icon name={icon} classes="ph-fill" /> {title}
</div>
)}
<div className="tldr__content">
{children}
</div>
</div>
);
}
1 change: 1 addition & 0 deletions docusaurus/src/scss/__index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,5 @@
@use 'table.scss';
@use 'tabs.scss';
@use 'table-of-contents.scss';
@use 'tldr.scss';
@use 'typography.scss';
154 changes: 154 additions & 0 deletions docusaurus/src/scss/tldr.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
@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(--border-left-color);
padding-left: var(--strapi-spacing-4);
margin-bottom: var(--strapi-spacing-8);
font-size: var(--default-tldr-font-size);
color: var(--strapi-neutral-500);

&__title {
font-weight: 600;
margin-bottom: var(--strapi-spacing-2);
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: '\E346'; // ph-newspaper icon (U+E344)
font-family: 'Phosphor';
font-size: 4em;
// font-style: italic;
position: absolute;
top: 9px;
left: -72px;
color: var(--quote-icon-color);
z-index: -1;
}

.tldr__title {
position: relative;
z-index: 1;
}

.tldr__content {
position: relative;
z-index: 1;
}
}

// Design: editorial avec drop cap classique
&--editorial {
.tldr__content p:first-child::first-letter {
font-size: 3.3em;
font-weight: 700;
float: left;
line-height: 0.8;
margin-right: 8px;
margin-top: 2px;
color: var(--editorial-first-letter-color);
}
}

// 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 {
--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);

&__title {
color: var(--strapi-neutral-500);
}

&__content {
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(--quote-icon-color);
}
}

// Design editorial dark mode
&--editorial {
.tldr__content p:first-child::first-letter {
color: var(--editorial-first-letter-color);
}
}

// 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);
}
}
}
}
2 changes: 2 additions & 0 deletions docusaurus/src/theme/MDXComponents.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -92,6 +93,7 @@ export default {
BreakingChangeIdCard,
IdentityCard,
IdentityCardItem,
Tldr,
DebugComponent,
/**
* Reusable annotation components go below👇
Expand Down
Loading