From 9c25b684e3eee76c1dab7189fe6f8148ed0e60d3 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Wed, 26 Feb 2025 14:53:07 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20open=20source=20sec?= =?UTF-8?q?tion=20homepage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We decided to add the open source section on the homepage of Docs. --- CHANGELOG.md | 1 + .../e2e/__tests__/app-impress/home.spec.ts | 1 + .../features/home/components/HomeBottom.tsx | 132 +-------------- .../features/home/components/HomeContent.tsx | 160 ++++++++++++++++-- .../features/home/components/HomeSection.tsx | 11 +- 5 files changed, 159 insertions(+), 146 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 81286ad6..3ced3121 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ and this project adheres to - 💄(frontend) add error pages #643 - ✨(frontend) Custom block quote with export #646 +- ✨(frontend) add open source section homepage #666 ## Changed diff --git a/src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts index 8eee4262..829b45e7 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts @@ -26,6 +26,7 @@ test.describe('Home page', () => { // Check the titles const h2 = page.locator('h2'); + await expect(h2.getByText('Govs ❤️ Open Source.')).toBeVisible(); await expect( h2.getByText('Collaborative writing, Simplified.'), ).toBeVisible(); diff --git a/src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx b/src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx index e5cba926..16f4285f 100644 --- a/src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx +++ b/src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx @@ -1,7 +1,5 @@ -import { Button } from '@openfun/cunningham-react'; import Image from 'next/image'; -import { Trans, useTranslation } from 'react-i18next'; -import { css } from 'styled-components'; +import { useTranslation } from 'react-i18next'; import DocLogo from '@/assets/icons/icon-docs.svg?url'; import { Box, Text } from '@/components'; @@ -10,137 +8,15 @@ import { ProConnectButton } from '@/features/auth'; import { Title } from '@/features/header'; import { useResponsiveStore } from '@/stores'; -import SC5 from '../assets/SC5.png'; -import GithubIcon from '../assets/github.svg'; - -import { HomeSection } from './HomeSection'; - export function HomeBottom() { const { componentTokens } = useCunninghamTheme(); const withProConnect = componentTokens()['home-proconnect'].activated; - if (withProConnect) { - return ; - } else { - return ; + if (!withProConnect) { + return null; } -} -function HomeOpenSource() { - const { t } = useTranslation(); - const { colorsTokens } = useCunninghamTheme(); - const { isTablet } = useResponsiveStore(); - - return ( - - - - Docs is built on top of{' '} - - Django Rest Framework - - ,{' '} - - Next.js - - , and{' '} - - MinIO - - . We also use{' '} - - Yjs - {' '} - and{' '} - - BlockNote.js - {' '} - of which we are proud sponsors. - - - - - You can easily self-hosted Docs (check our installation{' '} - - documentation - {' '} - with production-ready examples). -
- Docs uses an innovation and business friendly{' '} - - licence - - .
- Contributions are welcome (see our roadmap{' '} - - here - - ). - - - - - Docs is the result of a joint effort lead by the French 🇫🇷🥖 - - (DINUM) - {' '} - and German 🇩🇪🥨 governments{' '} - - (ZenDiS) - - . We are always looking for new public partners (we are currently - onboarding the Netherlands 🇳🇱🧀). Feel free to reach out if you - are interested in using or contributing to docs. - - - - - - - - } - /> - ); + return ; } function HomeProConnect() { diff --git a/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx b/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx index 6e9dc7d9..77e362c5 100644 --- a/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx +++ b/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx @@ -1,7 +1,9 @@ -import { useTranslation } from 'react-i18next'; +import { Button } from '@openfun/cunningham-react'; +import { Trans, useTranslation } from 'react-i18next'; import { css } from 'styled-components'; -import { Box } from '@/components'; +import { Box, Text } from '@/components'; +import { useCunninghamTheme } from '@/cunningham'; import { Footer } from '@/features/footer'; import { LeftPanel } from '@/features/left-panel'; import { useLanguage } from '@/i18n/hooks/useLanguage'; @@ -17,6 +19,8 @@ import SC4En from '../assets/SC4-en.png'; import SC4Fr from '../assets/SC4-fr.png'; import SC4ResponsiveEn from '../assets/SC4-responsive-en.png'; import SC4ResponsiveFr from '../assets/SC4-responsive-fr.png'; +import SC5 from '../assets/SC5.png'; +import GithubIcon from '../assets/github.svg'; import HomeBanner from './HomeBanner'; import { HomeBottom } from './HomeBottom'; @@ -25,7 +29,8 @@ import { HomeSection } from './HomeSection'; export function HomeContent() { const { t } = useTranslation(); - const { isMobile, isSmallMobile } = useResponsiveStore(); + const { colorsTokens } = useCunninghamTheme(); + const { isMobile, isSmallMobile, isTablet } = useResponsiveStore(); const lang = useLanguage(); const isFrLanguage = lang.language === 'fr'; @@ -58,19 +63,142 @@ export function HomeContent() { $gap={isMobile ? '115px' : '230px'} $padding={{ bottom: '3rem' }} > - + + + + + Docs is built on top of{' '} + + Django Rest Framework + + ,{' '} + + Next.js + + , and{' '} + + MinIO + + . We also use{' '} + + Yjs + {' '} + and{' '} + + BlockNote.js + {' '} + of which we are proud sponsors. + + + + + You can easily self-hosted Docs (check our installation{' '} + + documentation + {' '} + with production-ready examples). +
+ Docs uses an innovation and business friendly{' '} + + licence + + .
+ Contributions are welcome (see our roadmap{' '} + + here + + ). + + + + + Docs is the result of a joint effort lead by the French + 🇫🇷🥖 + + (DINUM) + {' '} + and German 🇩🇪🥨 governments{' '} + + (ZenDiS) + + . We are always looking for new public partners (we are + currently onboarding the Netherlands 🇳🇱🧀). Feel free to + reach out if you are interested in using or contributing + to docs. + + + + + + + + } + /> + + {title} - + {description}