Rich body lists
This commit is contained in:
Vince
parent
42845ca83a
commit
2500ed83d1
|
|
@ -150,3 +150,7 @@ body {
|
|||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul li > p {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import {
|
|||
MARKS,
|
||||
OrderedList,
|
||||
Text,
|
||||
UnorderedList,
|
||||
} from '@contentful/rich-text-types';
|
||||
import React, { ReactNode } from 'react';
|
||||
import { CMS } from '../constants';
|
||||
|
|
@ -101,9 +102,18 @@ const options = {
|
|||
</div>
|
||||
);
|
||||
},
|
||||
[BLOCKS.UL_LIST]: (node: UnorderedList, children: JSX.Element[]) => {
|
||||
return (
|
||||
<ul className="ml-6 list-disc">
|
||||
{children.map(item => (
|
||||
<li key={item.key}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
},
|
||||
[BLOCKS.OL_LIST]: (node: OrderedList, children: JSX.Element[]) => {
|
||||
return (
|
||||
<ol>
|
||||
<ol className="list-decimal">
|
||||
{children.map(item => (
|
||||
<li key={item.key}>{item}</li>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -7,18 +7,12 @@ interface Props {
|
|||
export function ArticleSectionFeatureImage({ featureImage }: Props) {
|
||||
return (
|
||||
<div className="w-full pb-4 desktop:pb-0">
|
||||
<div
|
||||
style={{ paddingBottom: '40%' }}
|
||||
className="relative w-full h-0 mb-4 overflow-hidden bg-gray-300"
|
||||
>
|
||||
<div className="absolute inset-0">
|
||||
<img
|
||||
src={featureImage?.imageUrl}
|
||||
alt={featureImage?.description ?? ''}
|
||||
style={{ objectFit: 'cover' }}
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative w-full mb-4 aspect-w-14 aspect-h-8">
|
||||
<img
|
||||
src={featureImage?.imageUrl}
|
||||
alt={featureImage?.description ?? ''}
|
||||
className="object-cover rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{featureImage?.description && (
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import React from 'react';
|
||||
import { useScreenSize } from '../hooks/screen';
|
||||
|
||||
interface IScreen {
|
||||
|
|
@ -6,20 +6,20 @@ interface IScreen {
|
|||
isTablet: boolean;
|
||||
isDesktop: boolean;
|
||||
isHuge: boolean;
|
||||
width: number;
|
||||
}
|
||||
|
||||
export const ScreenContext = React.createContext(undefined);
|
||||
export const ScreenContext = React.createContext({
|
||||
isMobile: true,
|
||||
isTablet: false,
|
||||
isDesktop: false,
|
||||
isHuge: false,
|
||||
width: 0,
|
||||
});
|
||||
|
||||
const ScreenProvider = ({ children }) => {
|
||||
const screenParams: IScreen = useScreenSize();
|
||||
|
||||
useEffect(() => {
|
||||
console.log('screen ➡️ screenParams.isMobile:', screenParams.isMobile);
|
||||
console.log('screen ➡️ screenParams.isTablet:', screenParams.isTablet);
|
||||
console.log('screen ➡️ screenParams.isDesktop', screenParams.isDesktop);
|
||||
console.log('screen ➡️ screenParams.isHuge', screenParams.isHuge);
|
||||
}, [screenParams]);
|
||||
|
||||
return (
|
||||
<ScreenContext.Provider value={screenParams}>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -91,13 +91,11 @@ function Page({
|
|||
) : (
|
||||
<>
|
||||
<div className="aspect-w-16 aspect-h-10">
|
||||
<div className="flex items-center justify-center bg-gradient-to-br from-blush to-hyper">
|
||||
<img
|
||||
style={{ maxHeight: '90%' }}
|
||||
src={page?.hero?.imageUrl}
|
||||
className="w-8/12 py-12"
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
style={{ maxHeight: '90%' }}
|
||||
src={page?.hero?.imageUrl}
|
||||
className="object-cover w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Contained>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,26 @@ export default class CustomDocument extends Document<any> {
|
|||
<Html lang="en">
|
||||
<Head>
|
||||
<link rel="shortcut icon" href="/favicon.ico"></link>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="/apple-touch-icon.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="/favicon-32x32.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="/favicon-16x16.png"
|
||||
/>
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
{this.props?.styleTags}
|
||||
</Head>
|
||||
<body>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square150x150logo src="/mstile-150x150.png"/>
|
||||
<TileColor>#da532c</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 694 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
|
|
@ -0,0 +1,60 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="784.000000pt" height="784.000000pt" viewBox="0 0 784.000000 784.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.11, written by Peter Selinger 2001-2013
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,784.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M3688 7835 c-1 -1 -41 -6 -88 -9 -94 -7 -147 -13 -194 -20 -17 -3
|
||||
-53 -8 -81 -12 -27 -3 -59 -8 -70 -10 -11 -3 -42 -9 -70 -14 -27 -6 -60 -12
|
||||
-72 -15 -13 -3 -32 -7 -44 -10 -11 -2 -28 -6 -37 -9 -9 -3 -28 -7 -42 -10 -14
|
||||
-2 -79 -21 -145 -41 -144 -43 -135 -40 -160 -49 -157 -58 -249 -93 -289 -113
|
||||
-28 -12 -56 -23 -63 -23 -7 0 -13 -4 -13 -10 0 -5 -6 -10 -14 -10 -18 0 -261
|
||||
-125 -295 -151 -13 -11 -28 -19 -33 -19 -10 0 -86 -48 -106 -68 -8 -7 -17 -10
|
||||
-22 -7 -5 3 -10 2 -12 -3 -3 -6 -168 -127 -216 -157 -9 -5 -22 -16 -30 -23 -8
|
||||
-7 -30 -25 -50 -40 -21 -15 -42 -31 -48 -37 -7 -5 -33 -28 -59 -50 -66 -55
|
||||
-144 -127 -228 -211 -100 -99 -209 -219 -257 -283 -14 -18 -35 -43 -48 -54
|
||||
-12 -11 -22 -27 -22 -34 0 -7 -4 -13 -8 -13 -4 0 -35 -39 -68 -86 -32 -47 -73
|
||||
-104 -89 -127 -28 -39 -72 -109 -106 -167 -8 -14 -16 -27 -19 -30 -3 -3 -12
|
||||
-19 -21 -35 -48 -93 -75 -141 -82 -146 -5 -3 -9 -10 -9 -15 -1 -15 -22 -59
|
||||
-31 -65 -5 -3 -9 -9 -8 -12 0 -9 -46 -116 -65 -149 -8 -16 -12 -28 -8 -28 3 0
|
||||
2 -6 -3 -12 -5 -7 -20 -40 -33 -73 -12 -33 -28 -73 -35 -90 -11 -26 -47 -130
|
||||
-50 -145 -1 -3 -14 -45 -30 -95 -15 -49 -29 -97 -30 -105 -1 -8 -5 -22 -8 -30
|
||||
-3 -8 -13 -49 -22 -90 -8 -41 -18 -86 -21 -100 -14 -63 -25 -118 -30 -155 -3
|
||||
-22 -7 -49 -9 -60 -1 -11 -6 -43 -10 -70 -4 -28 -8 -61 -10 -75 -26 -177 -26
|
||||
-749 -1 -890 3 -14 7 -50 10 -80 3 -30 8 -66 11 -80 3 -14 8 -41 10 -60 9 -54
|
||||
11 -69 30 -155 25 -117 27 -127 48 -205 36 -134 49 -176 58 -193 5 -10 7 -22
|
||||
4 -27 -4 -6 -2 -10 3 -10 5 0 9 -6 10 -12 1 -24 110 -308 121 -318 3 -3 7 -12
|
||||
9 -20 5 -24 122 -258 174 -348 26 -46 48 -88 48 -93 0 -5 3 -9 8 -9 4 0 18
|
||||
-20 31 -45 13 -25 28 -45 32 -45 5 0 9 -5 9 -11 0 -13 109 -172 122 -177 4 -2
|
||||
8 -8 8 -14 0 -6 20 -35 45 -64 25 -28 45 -57 45 -62 0 -6 4 -12 9 -14 4 -2 35
|
||||
-34 67 -73 32 -38 72 -84 89 -102 221 -231 357 -355 550 -499 28 -20 52 -41
|
||||
53 -46 2 -4 8 -8 14 -8 6 0 38 -19 72 -43 63 -45 204 -133 290 -182 50 -28
|
||||
247 -128 256 -130 3 -1 36 -16 74 -33 38 -18 70 -32 72 -32 1 0 15 -5 31 -12
|
||||
15 -6 33 -12 40 -14 7 -1 27 -9 44 -18 18 -9 36 -16 40 -16 4 0 20 -5 36 -12
|
||||
15 -6 30 -12 33 -13 3 0 46 -14 95 -30 50 -16 95 -30 100 -31 6 -1 30 -7 55
|
||||
-14 25 -7 52 -14 60 -16 169 -38 159 -36 255 -54 71 -13 113 -19 170 -25 28
|
||||
-3 60 -8 72 -10 119 -26 741 -26 868 0 11 2 40 6 65 9 104 13 120 15 250 40
|
||||
190 38 489 124 625 181 17 7 68 29 115 49 47 20 91 36 98 36 6 0 12 5 12 10 0
|
||||
6 5 10 12 10 41 0 533 281 546 312 2 4 8 8 13 8 14 0 253 179 325 245 7 5 47
|
||||
42 89 80 97 87 166 156 264 264 42 47 84 93 94 103 9 10 17 22 17 27 0 5 4 11
|
||||
9 13 32 12 274 359 383 548 94 165 268 542 282 614 2 6 8 22 14 36 21 47 102
|
||||
326 118 403 2 10 5 26 8 35 3 9 8 35 12 57 3 22 7 42 9 45 2 3 6 24 9 46 4 22
|
||||
8 49 10 61 3 12 7 43 11 70 4 26 9 59 11 73 8 51 18 146 18 182 1 21 4 38 7
|
||||
38 8 0 3 577 -6 660 -8 75 -12 105 -14 105 -1 0 -4 23 -6 50 -5 58 -11 100
|
||||
-19 135 -3 14 -8 41 -11 60 -7 48 -14 88 -26 135 -5 22 -12 51 -15 65 -11 55
|
||||
-13 66 -24 100 -6 19 -13 46 -16 59 -6 29 -71 238 -84 266 -10 24 -23 58 -24
|
||||
65 -3 14 -71 176 -75 180 -3 3 -7 12 -9 20 -3 14 -131 277 -151 310 -61 100
|
||||
-91 152 -91 155 0 4 -103 163 -124 190 -8 11 -52 70 -97 130 -87 117 -109 144
|
||||
-222 268 -112 124 -280 286 -387 373 -19 16 -37 31 -40 34 -8 9 -131 102 -168
|
||||
127 -18 13 -38 28 -45 34 -16 14 -234 155 -267 173 -14 7 -54 29 -90 49 -116
|
||||
65 -410 204 -450 213 -5 1 -52 19 -80 31 -19 8 -20 8 -55 18 -16 4 -34 11 -40
|
||||
15 -8 6 -100 34 -115 35 -3 0 -9 3 -15 6 -9 6 -43 15 -85 24 -8 2 -49 12 -90
|
||||
23 -41 11 -88 23 -105 26 -16 2 -41 7 -55 10 -118 26 -178 35 -330 51 -36 4
|
||||
-76 9 -90 12 -28 5 -566 13 -572 8z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"name": "",
|
||||
"short_name": "",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff",
|
||||
"display": "standalone"
|
||||
}
|
||||
Loading…
Reference in New Issue