Skip to content

Commit 282f1fe

Browse files
alex-strapialex-strapi
authored
Merge pull request #119 from strapi/feat/new-demo-banner
Feat: new demo banner
2 parents 84b6a80 + ec981b0 commit 282f1fe

9 files changed

Lines changed: 363 additions & 200 deletions

File tree

‎next/app/[locale]/layout.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { draftMode } from 'next/headers';
55
import type { PropsWithChildren } from 'react';
66
import React from 'react';
77

8+
import { Banner } from '@/components/banner';
89
import { DraftModeBanner } from '@/components/draft-mode-banner';
910
import { Footer } from '@/components/footer';
1011
import { Navbar } from '@/components/navbar';
@@ -40,6 +41,7 @@ export default async function LocaleLayout({
4041
const { isEnabled: isDraftMode } = await draftMode();
4142
const { locale } = await params;
4243
const pageData = await fetchSingleType('global', { locale });
44+
const isDemo = process.env.NEXT_IS_DEMO === 'true';
4345

4446
return (
4547
<ViewTransitions>
@@ -50,7 +52,8 @@ export default async function LocaleLayout({
5052
'bg-charcoal antialiased h-full w-full'
5153
)}
5254
>
53-
<Navbar data={pageData.navbar} locale={locale} />
55+
{isDemo && <Banner />}
56+
<Navbar data={pageData.navbar} locale={locale} hasBanner={isDemo} />
5457
{children}
5558
<Footer data={pageData.footer} locale={locale} />
5659
<AIToast />

‎next/components/banner.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import Link from 'next/link';
2+
3+
export function Banner() {
4+
return (
5+
<div className="fixed top-0 inset-x-0 h-[3.25rem] z-[60] bg-neutral-900 border-b-2 border-neutral-800 flex items-center justify-center">
6+
<div className="flex w-full h-full items-center justify-center bg-neutral-800 rounded shrink shadow-[0px_-1px_0px_0px_var(--neutral-700)] text-sm font-medium text-neutral-200 px-4">
7+
<span className="truncate">
8+
You&apos;re exploring the Strapi Launchpad demo &middot;{' '}
9+
<Link
10+
href="https://github.com/strapi/LaunchPad"
11+
target="_blank"
12+
className="text-white hover:text-neutral-300 transition-colors underline underline-offset-4 decoration-neutral-500"
13+
>
14+
View the code on GitHub, stars, PRs, and issues are always welcome
15+
</Link>
16+
</span>
17+
</div>
18+
</div>
19+
);
20+
}

‎next/components/navbar/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import { motion } from 'framer-motion';
55
import { DesktopNavbar } from './desktop-navbar';
66
import { MobileNavbar } from './mobile-navbar';
77

8-
export function Navbar({ data, locale }: { data: any; locale: string }) {
8+
export function Navbar({ data, locale, hasBanner }: { data: any; locale: string; hasBanner?: boolean }) {
99
return (
10-
<motion.nav className="max-w-7xl fixed top-4 mx-auto inset-x-0 z-50 w-[95%] lg:w-full">
10+
<motion.nav className={`max-w-7xl fixed ${hasBanner ? 'top-[4.25rem]' : 'top-4'} mx-auto inset-x-0 z-50 w-[95%] lg:w-full`}>
1111
<div className="hidden lg:block w-full">
1212
{data?.left_navbar_items && (
1313
<DesktopNavbar

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,4 +43,4 @@
4343
]
4444
},
4545
"packageManager": "yarn@4.5.0"
46-
}
46+
}

‎strapi/data/export_20250116105447.tar.gz‎

882 Bytes
Binary file not shown.

‎strapi/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@
2020
"typescript": "^5"
2121
},
2222
"dependencies": {
23-
"@strapi/plugin-cloud": "5.37.0",
23+
"@strapi/plugin-cloud": "5.38.0",
2424
"@strapi/plugin-seo": "^2.0.4",
25-
"@strapi/plugin-users-permissions": "5.37.0",
26-
"@strapi/strapi": "5.37.0",
25+
"@strapi/plugin-users-permissions": "5.38.0",
26+
"@strapi/strapi": "5.38.0",
2727
"better-sqlite3": "11.7.0",
2828
"pluralize": "^8.0.0",
2929
"react": "^18.0.0",

‎strapi/src/admin/app.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import type { StrapiApp } from '@strapi/strapi/admin';
2+
import { Information } from '@strapi/icons';
3+
4+
export default {
5+
config: {
6+
locales: [],
7+
},
8+
bootstrap(app: StrapiApp) {},
9+
register(app: StrapiApp) {
10+
if (process.env.STRAPI_ADMIN_IS_DEMO === 'true') {
11+
if ('widgets' in app) {
12+
// @ts-ignore
13+
app.widgets.register({
14+
icon: Information,
15+
title: {
16+
id: 'demo.widget.title',
17+
defaultMessage: 'Welcome to LaunchPad',
18+
},
19+
component: async () => {
20+
const component = await import('./components/DemoWidget');
21+
return component.default;
22+
},
23+
id: 'demo-launchpad-widget',
24+
});
25+
}
26+
}
27+
},
28+
};

‎strapi/src/admin/components/DemoWidget.tsx‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import React from 'react';
2+
import { Box, Typography, Flex, LinkButton } from '@strapi/design-system';
3+
import {
4+
Cast,
5+
Database,
6+
Image as ImageIcon,
7+
Globe,
8+
Rocket,
9+
ManyWays,
10+
Shield,
11+
Lock,
12+
Sparkle,
13+
ExternalLink
14+
} from '@strapi/icons';
15+
16+
const DemoWidget = () => {
17+
return (
18+
<Box
19+
padding={4}
20+
background="neutral0"
21+
borderColor="neutral150"
22+
hasRadius
23+
>
24+
<Flex alignItems="flex-start" gap={6} direction="row" style={{ flexWrap: 'nowrap' }}>
25+
{/* Left Section */}
26+
<Box style={{ flex: '1 1 45%' }}>
27+
<Flex direction="column" alignItems="flex-start" gap={2}>
28+
<Box marginBottom={2}>
29+
<Typography variant="alpha" textColor="neutral800" as="h2">
30+
Hosted Demo Environment
31+
</Typography>
32+
</Box>
33+
34+
<Typography variant="omega" textColor="neutral600">
35+
Experience Strapi in a production-like setup. Explore the platform as a real team would use it.
36+
</Typography>
37+
<Typography variant="omega" textColor="neutral600">
38+
<strong>All paid features are unlocked</strong> in this demo so you can explore the full capabilities of Strapi.
39+
</Typography>
40+
</Flex>
41+
</Box>
42+
43+
{/* Right Section */}
44+
<Box style={{ flex: '1 1 55%' }}>
45+
<Flex direction="column" alignItems="flex-start" gap={5}>
46+
<Flex direction="column" alignItems="flex-start" gap={3}>
47+
<Typography variant="sigma" textColor="neutral600" textTransform="uppercase">
48+
Core Features
49+
</Typography>
50+
<Flex gap={2} wrap="wrap">
51+
<LinkButton href="/admin/content-manager/" variant="secondary" startIcon={<Database fill="primary600" />}>
52+
Content Manager
53+
</LinkButton>
54+
<LinkButton href="/admin/plugins/upload" variant="secondary" startIcon={<ImageIcon fill="primary600" />}>
55+
Media Library
56+
</LinkButton>
57+
<LinkButton href="/admin/settings/internationalization" variant="secondary" startIcon={<Globe fill="primary600" />}>
58+
Internationalization
59+
</LinkButton>
60+
</Flex>
61+
</Flex>
62+
63+
<Flex direction="column" alignItems="flex-start" gap={3}>
64+
<Flex gap={2}>
65+
<Typography variant="sigma" textColor="neutral600" textTransform="uppercase">
66+
Premium Features
67+
</Typography>
68+
<Sparkle fill="primary600" width="12px" height="12px" />
69+
</Flex>
70+
<Flex gap={2} wrap="wrap">
71+
<LinkButton href="/admin/plugins/content-releases" variant="secondary" startIcon={<Rocket fill="primary600" />}>
72+
Releases
73+
</LinkButton>
74+
<LinkButton href="/admin/settings/review-workflows" variant="secondary" startIcon={<ManyWays fill="primary600" />}>
75+
Review Workflows
76+
</LinkButton>
77+
<LinkButton href="/admin/settings/audit-logs" variant="secondary" startIcon={<Shield fill="primary600" />}>
78+
Audit Logs
79+
</LinkButton>
80+
</Flex>
81+
</Flex>
82+
</Flex>
83+
</Box>
84+
</Flex>
85+
86+
{/* Bottom Footer Section */}
87+
<Box
88+
marginTop={6}
89+
padding={4}
90+
borderColor="neutral150"
91+
>
92+
<Flex gap={3}>
93+
<Lock fill="neutral500" width="16px" height="16px" />
94+
<Typography variant="omega" textColor="neutral600">
95+
Content-Type Builder is disabled in production mode.{' '}
96+
<a
97+
href="https://github.com/strapi/LaunchPad"
98+
target="_blank"
99+
rel="noopener noreferrer"
100+
style={{ color: '#4945ff', fontWeight: 600, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
101+
>
102+
Install LaunchPad locally <ExternalLink width="12px" height="12px" />
103+
</a>{' '}
104+
to build from scratch.
105+
</Typography>
106+
</Flex>
107+
</Box>
108+
</Box>
109+
);
110+
};
111+
112+
export default DemoWidget;

0 commit comments

Comments
 (0)