-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add generic strapi fancy article page
- Loading branch information
1 parent
afd618b
commit 0af9cb8
Showing
8 changed files
with
267 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import React, { FC, memo } from 'react'; | ||
| import { useParams } from 'react-router-dom'; | ||
| import { compose } from 'redux'; | ||
| import { CircularProgress } from '@mui/material'; | ||
| import { useGetFancyArticleQuery } from '../../api/generated/cms/graphql'; | ||
| import ErrorPage from '../error-page'; | ||
| import withErrorBoundary from '../../components/with-error-boundary'; | ||
| import localization from '../../lib/localization'; | ||
| import SC from './styled'; | ||
| import Markdown from '../../components/markdown'; | ||
| import { | ||
| isBasicImage, | ||
| isBasicParagraph, | ||
| isBasicYoutube | ||
| } from '../../lib/strapi'; | ||
| import YoutubeEmbed from '../../components/youtube-embed'; | ||
| import { getConfig } from '../../config'; | ||
|
|
||
| const FDK_CMS_BASE_URI = getConfig().cmsV2Api.host; | ||
|
|
||
| const FancyArticlePage: FC = () => { | ||
| const { id } = useParams<{ id: string }>(); | ||
|
|
||
| const { data, loading, error } = useGetFancyArticleQuery({ | ||
| variables: { id } | ||
| }); | ||
|
|
||
| if (loading) { | ||
| return ( | ||
| <SC.Backdrop open> | ||
| <CircularProgress color='inherit' /> | ||
| </SC.Backdrop> | ||
| ); | ||
| } | ||
|
|
||
| if (error?.name !== undefined || !data || !data.fancyArticle) { | ||
| return <ErrorPage errorCode='404' />; | ||
| } | ||
|
|
||
| const { | ||
| fancyArticle: { data: fancyArticleEntity } | ||
| } = data; | ||
|
|
||
| const fancyArticle = fancyArticleEntity?.attributes; | ||
|
|
||
| return ( | ||
| <main id='content' className='container'> | ||
| {fancyArticle && ( | ||
| <SC.Article> | ||
| <SC.Title>{fancyArticle.title}</SC.Title> | ||
| <SC.Description>{fancyArticle.subtitle}</SC.Description> | ||
| {fancyArticle.Content?.map( | ||
| component => | ||
| (isBasicParagraph(component) && ( | ||
| <SC.Content> | ||
| <Markdown allowHtml>{component?.Content ?? ''}</Markdown> | ||
| </SC.Content> | ||
| )) || | ||
| (isBasicImage(component) && ( | ||
| <SC.ImageWrapper key={component?.id}> | ||
| <SC.Image | ||
| alt={`${component?.media?.data?.attributes?.alternativeText}`} | ||
| src={`${FDK_CMS_BASE_URI}${component?.media?.data?.attributes?.url}`} | ||
| /> | ||
| {component?.media?.data?.attributes?.caption && ( | ||
| <SC.ImageText> | ||
| {localization.informationPage.imageText} | ||
| {component?.media?.data?.attributes?.caption} | ||
| </SC.ImageText> | ||
| )} | ||
| </SC.ImageWrapper> | ||
| )) || | ||
| (isBasicYoutube(component) && ( | ||
| <YoutubeEmbed key={component?.id} url={component?.url} /> | ||
| )) | ||
| )} | ||
| </SC.Article> | ||
| )} | ||
| </main> | ||
| ); | ||
| }; | ||
|
|
||
| const enhance = compose(withErrorBoundary(ErrorPage)); | ||
| export const FancyArticlePageV2 = enhance(memo(FancyArticlePage)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,172 @@ | ||
| import styled from 'styled-components'; | ||
|
|
||
| import { Colour, theme, Unit } from '@fellesdatakatalog/theme'; | ||
| import { Backdrop as MuiBackdrop } from '@mui/material'; | ||
| import SideMenuBase from '../../components/side-menu'; | ||
|
|
||
| import HamburgerIconBase from '../../images/hamburger-menu-stroke.svg'; | ||
|
|
||
| const onMobileView = '@media (max-width: 900px)'; | ||
| const customBreakingPoint = '@media (max-width: 992px)'; | ||
|
|
||
| const InformationPage = styled.article` | ||
| background-color: ${({ theme: t }) => t.lighter}; | ||
| display: flex; | ||
| gap: ${theme.spacing('S16', Unit.EM)}; | ||
| word-break: break-word; | ||
| ${customBreakingPoint} { | ||
| && { | ||
| max-width: fit-content; | ||
| } | ||
| } | ||
| ${onMobileView} { | ||
| flex-direction: column; | ||
| } | ||
| `; | ||
|
|
||
| const Aside = styled.aside` | ||
| display: flex; | ||
| flex: 0 0 20%; | ||
| flex-direction: column; | ||
| ${onMobileView} { | ||
| flex: 1; | ||
| } | ||
| `; | ||
|
|
||
| const Article = styled.main` | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: ${theme.spacing('S10')}; | ||
| z-index: 5; | ||
| `; | ||
|
|
||
| const Title = styled.h1` | ||
| font-size: ${theme.fontSize('FS48', Unit.REM)}; | ||
| font-weight: ${theme.fontWeight('FW700')}; | ||
| padding-left: 0; | ||
| `; | ||
|
|
||
| const Description = styled.p` | ||
| font-size: ${theme.fontSize('FS20')}; | ||
| `; | ||
|
|
||
| const Content = styled.p` | ||
| & > div { | ||
| & > h2 { | ||
| border-bottom: 1px solid ${({ theme: t }) => t.light}; | ||
| font-size: ${theme.fontSize('FS32', Unit.REM)}; | ||
| font-weight: ${theme.fontWeight('FW700')}; | ||
| padding: ${theme.spacing('S6')}; | ||
| padding-left: 0; | ||
| margin-bottom: ${theme.spacing('S10', Unit.EM)}; | ||
| margin-top: ${theme.spacing('S48')}; | ||
| } | ||
| } | ||
| & a { | ||
| text-decoration: underline; | ||
| } | ||
| `; | ||
|
|
||
| const ImageWrapper = styled.div` | ||
| margin-bottom: ${theme.spacing('S16')}; | ||
| `; | ||
|
|
||
| const Image = styled.img` | ||
| max-width: 100%; | ||
| `; | ||
|
|
||
| const ImageText = styled.span` | ||
| font-size: ${theme.fontSize('FS14', Unit.REM)}; | ||
| `; | ||
|
|
||
| const SideMenu = styled(SideMenuBase)` | ||
| min-width: 260px; | ||
| ${onMobileView} { | ||
| display: none; | ||
| width: auto; | ||
| margin-right: 0; | ||
| } | ||
| `; | ||
|
|
||
| const SideMenuSmall = styled(SideMenuBase)` | ||
| display: none; | ||
| ${onMobileView} { | ||
| display: flex; | ||
| flex: 1; | ||
| ul { | ||
| flex: 1; | ||
| li { | ||
| background-color: ${({ theme: t }) => t.extendedColors.neutralLighter}; | ||
| border-radius: 5px; | ||
| margin-top: 2px; | ||
| margin-bottom: 2px; | ||
| a { | ||
| background-color: transparent !important; | ||
| color: ${({ theme: t }) => t.dark}; | ||
| margin-left: 20px; | ||
| &.active { | ||
| color: ${({ theme: t }) => t.dark} !important; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| const MenuToggle = styled.button` | ||
| display: none; | ||
| color: ${({ theme: t }) => t.dark}; | ||
| ${onMobileView} { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| padding: 13px; | ||
| border-radius: 5px; | ||
| font-size: ${theme.fontSize('FS16', Unit.REM)}; | ||
| border: none; | ||
| background-color: ${({ theme: t }) => t.light}; | ||
| } | ||
| &:hover { | ||
| color: ${({ theme: t }) => t.darker}; | ||
| } | ||
| &:active { | ||
| background: black; | ||
| color: ${({ theme: t }) => t.lighter}; | ||
| } | ||
| `; | ||
|
|
||
| const Backdrop = styled(MuiBackdrop)` | ||
| color: ${theme.colour(Colour.NEUTRAL, 'N0')}; | ||
| z-index: ${theme.colour(Colour.NEUTRAL, 'N0')} + 1; | ||
| `; | ||
|
|
||
| const HamburgerIcon = styled(HamburgerIconBase)` | ||
| width: 20px; | ||
| height: 20px; | ||
| margin-right: 0.5em; | ||
| `; | ||
|
|
||
| export default { | ||
| InformationPage, | ||
| Aside, | ||
| Article, | ||
| Title, | ||
| Description, | ||
| Content, | ||
| ImageWrapper, | ||
| Image, | ||
| ImageText, | ||
| SideMenu, | ||
| SideMenuSmall, | ||
| MenuToggle, | ||
| Backdrop, | ||
| HamburgerIcon | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters