From ae5e37c002793446d41d536820128a0d08b81854 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 01:21:43 +0100 Subject: [PATCH 01/19] Create node.js.yml --- .github/workflows/node.js.yml | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 .github/workflows/node.js.yml diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml new file mode 100644 index 0000000..57e68ee --- /dev/null +++ b/.github/workflows/node.js.yml @@ -0,0 +1,30 @@ +# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node +# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions + +name: Node.js CI + +on: + push: + branches: [ main ] + pull_request: + branches: [ main ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [12.x, 14.x, 16.x] + # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node-version }} + cache: 'npm' + - run: npm ci + - run: npm run build --if-present -- 2.40.1 From e4def9268a8be59cbc497a395066927b61bf1269 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 01:37:16 +0100 Subject: [PATCH 02/19] Update node.js.yml --- .github/workflows/node.js.yml | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 57e68ee..40abb72 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -16,7 +16,7 @@ jobs: strategy: matrix: - node-version: [12.x, 14.x, 16.x] + node-version: [16.x] # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: @@ -26,5 +26,11 @@ jobs: with: node-version: ${{ matrix.node-version }} cache: 'npm' + env: + ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} + NEXT_PUBLIC_URL_CMS: ${{ secrets.NEXT_PUBLIC_URL_CMS }} + NEXT_PUBLIC_URL_IMG: ${{ secrets.NEXT_PUBLIC_URL_IMG }} + NEXT_PUBLIC_URL_SELF: ${{ secrets.NEXT_PUBLIC_URL_SELF }} + URL_GRAPHQL: ${{ secrets.URL_GRAPHQL }} - run: npm ci - run: npm run build --if-present -- 2.40.1 From d502655dff2d1af0cee95c33d722df20b8ee24ae Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 02:01:49 +0100 Subject: [PATCH 03/19] Update node.js.yml --- .github/workflows/node.js.yml | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 40abb72..4260864 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -26,11 +26,19 @@ jobs: with: node-version: ${{ matrix.node-version }} cache: 'npm' + - name: Create .env.local file env: ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} NEXT_PUBLIC_URL_CMS: ${{ secrets.NEXT_PUBLIC_URL_CMS }} NEXT_PUBLIC_URL_IMG: ${{ secrets.NEXT_PUBLIC_URL_IMG }} NEXT_PUBLIC_URL_SELF: ${{ secrets.NEXT_PUBLIC_URL_SELF }} URL_GRAPHQL: ${{ secrets.URL_GRAPHQL }} + run: | + touch .env.local + echo ACCESS_TOKEN=${{ secrets.ACCESS_TOKEN }} >> .env.local + echo NEXT_PUBLIC_URL_CMS=${{ secrets.NEXT_PUBLIC_URL_CMS }} >> .env.local + echo NEXT_PUBLIC_URL_IMG=${{ secrets.NEXT_PUBLIC_URL_IMG }} >> .env.local + echo NEXT_PUBLIC_URL_SELF=${{ secrets.NEXT_PUBLIC_URL_SELF }} >> .env.local + echo URL_GRAPHQL=${{ secrets.URL_GRAPHQL }} >> .env.local - run: npm ci - run: npm run build --if-present -- 2.40.1 From 29faaf8051581b165dd1c85ef20f5dbd031d7cf8 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 02:04:36 +0100 Subject: [PATCH 04/19] Update node.js.yml --- .github/workflows/node.js.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 4260864..cfe1ff6 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -40,5 +40,6 @@ jobs: echo NEXT_PUBLIC_URL_IMG=${{ secrets.NEXT_PUBLIC_URL_IMG }} >> .env.local echo NEXT_PUBLIC_URL_SELF=${{ secrets.NEXT_PUBLIC_URL_SELF }} >> .env.local echo URL_GRAPHQL=${{ secrets.URL_GRAPHQL }} >> .env.local + cat .env.local - run: npm ci - run: npm run build --if-present -- 2.40.1 From 9ecabfc2f3c93dfbf72e797bb46c04e687d4d6fe Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 02:08:16 +0100 Subject: [PATCH 05/19] Update node.js.yml --- .github/workflows/node.js.yml | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index cfe1ff6..2e4dbe1 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -26,20 +26,11 @@ jobs: with: node-version: ${{ matrix.node-version }} cache: 'npm' - - name: Create .env.local file + - run: npm ci + - run: npm run build --if-present env: ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} NEXT_PUBLIC_URL_CMS: ${{ secrets.NEXT_PUBLIC_URL_CMS }} NEXT_PUBLIC_URL_IMG: ${{ secrets.NEXT_PUBLIC_URL_IMG }} NEXT_PUBLIC_URL_SELF: ${{ secrets.NEXT_PUBLIC_URL_SELF }} URL_GRAPHQL: ${{ secrets.URL_GRAPHQL }} - run: | - touch .env.local - echo ACCESS_TOKEN=${{ secrets.ACCESS_TOKEN }} >> .env.local - echo NEXT_PUBLIC_URL_CMS=${{ secrets.NEXT_PUBLIC_URL_CMS }} >> .env.local - echo NEXT_PUBLIC_URL_IMG=${{ secrets.NEXT_PUBLIC_URL_IMG }} >> .env.local - echo NEXT_PUBLIC_URL_SELF=${{ secrets.NEXT_PUBLIC_URL_SELF }} >> .env.local - echo URL_GRAPHQL=${{ secrets.URL_GRAPHQL }} >> .env.local - cat .env.local - - run: npm ci - - run: npm run build --if-present -- 2.40.1 From b95278ddbee48197fabf5fde0c85a584b1310646 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 02:23:52 +0100 Subject: [PATCH 06/19] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 6b245ca..c3bec14 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # Accords-library.com +[![Node.js CI](https://github.com/Accords-Library/accords-library.com/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/Accords-Library/accords-library.com/actions/workflows/node.js.yml) + ## Technologies #### [Back](https://github.com/Accords-Library/strapi.accords-library.com) -- 2.40.1 From 46dab30ebede78bb105a0506d57202a5cf53d8bd Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 04:49:51 +0100 Subject: [PATCH 07/19] Update node.js.yml --- .github/workflows/node.js.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 2e4dbe1..a7f6d4e 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -4,8 +4,8 @@ name: Node.js CI on: - push: - branches: [ main ] +# push: +# branches: [ main ] pull_request: branches: [ main ] -- 2.40.1 From aba8d373d56c514804d709e6e4fccd5761f94abd Mon Sep 17 00:00:00 2001 From: DrMint Date: Fri, 11 Mar 2022 01:08:33 +0100 Subject: [PATCH 08/19] Update node.js.yml --- .github/workflows/node.js.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index a7f6d4e..a5242e0 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -27,6 +27,7 @@ jobs: node-version: ${{ matrix.node-version }} cache: 'npm' - run: npm ci + - run: npm run lint - run: npm run build --if-present env: ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} -- 2.40.1 From f2d99f5dcd135401f2da64159959e9b748531e21 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 13 Mar 2022 16:26:21 +0100 Subject: [PATCH 09/19] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 2d8f00e..ab29d20 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # Accords-library.com [![Node.js CI](https://github.com/Accords-Library/accords-library.com/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/Accords-Library/accords-library.com/actions/workflows/node.js.yml) +[![GitHub](https://img.shields.io/github/license/Accords-Library/accords-library.com?style=flat-square)](https://github.com/Accords-Library/accords-library.com/blob/main/LICENSE) +![Libraries.io dependency status for GitHub repo](https://img.shields.io/librariesio/github/Accords-Library/accords-library.com?style=flat-square) ## Technologies -- 2.40.1 From e675a90ed6cdaa5158b8480604e5d53d89335072 Mon Sep 17 00:00:00 2001 From: DrMint Date: Mon, 14 Mar 2022 12:25:01 +0100 Subject: [PATCH 10/19] Fixed broken content pages if missing fields --- src/components/Content/ThumbnailHeader.tsx | 2 +- src/pages/contents/[slug]/index.tsx | 42 +++++--- src/pages/contents/[slug]/read.tsx | 110 +++++++++++---------- 3 files changed, 85 insertions(+), 69 deletions(-) diff --git a/src/components/Content/ThumbnailHeader.tsx b/src/components/Content/ThumbnailHeader.tsx index b9bfd44..59d11a5 100644 --- a/src/components/Content/ThumbnailHeader.tsx +++ b/src/components/Content/ThumbnailHeader.tsx @@ -65,7 +65,7 @@ export default function ThumbnailHeader(
- {content.type && ( + {content.type.data && (

{langui.type}

diff --git a/src/pages/contents/[slug]/index.tsx b/src/pages/contents/[slug]/index.tsx index e3799bb..241be91 100644 --- a/src/pages/contents/[slug]/index.tsx +++ b/src/pages/contents/[slug]/index.tsx @@ -65,6 +65,31 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element { ); + let description = ""; + if (content.type.data) { + description += `${langui.type}: `; + if (content.type.data.attributes.titles.length > 0) { + description += content.type.data.attributes.titles[0].title; + } else { + description += prettySlug(content.type.data.attributes.slug); + } + description += "\n"; + } + if (content.categories.data.length > 0) { + description += `${langui.categories}: `; + description += content.categories.data + .map((category) => { + return category.attributes.short; + }) + .join(" | "); + description += "\n"; + } + + if (content.titles.length > 0 && content.titles[0].description) { + description += "\n"; + description += content.titles[0].description; + } + return ( 0 - ? content.type.data.attributes.titles[0].title - : prettySlug(content.type.data.attributes.slug) - } - ${langui.categories}: ${ - content.categories.data.length > 0 && - content.categories.data - .map((category) => { - return category.attributes.short; - }) - .join(" | ") - } - - ${content.titles.length > 0 ? content.titles[0].description : undefined} - `} + description={description} {...props} /> ); diff --git a/src/pages/contents/[slug]/read.tsx b/src/pages/contents/[slug]/read.tsx index 774c85e..09ba673 100644 --- a/src/pages/contents/[slug]/read.tsx +++ b/src/pages/contents/[slug]/read.tsx @@ -49,7 +49,7 @@ export default function ContentRead(props: ContentReadProps): JSX.Element { horizontalLine /> - {content.text_set.length > 0 && ( + {content.text_set.length > 0 && content.text_set[0].source_language.data && (

{content.text_set[0].source_language.data.attributes.code === @@ -175,6 +175,26 @@ export default function ContentRead(props: ContentReadProps): JSX.Element { ); + let description = ""; + if (content.type.data) { + description += `${langui.type}: `; + if (content.type.data.attributes.titles.length > 0) { + description += content.type.data.attributes.titles[0].title; + } else { + description += prettySlug(content.type.data.attributes.slug); + } + description += "\n"; + } + if (content.categories.data.length > 0) { + description += `${langui.categories}: `; + description += content.categories.data + .map((category) => { + return category.attributes.short; + }) + .join(" | "); + description += "\n"; + } + return ( 0 - ? content.type.data.attributes.titles[0].title - : prettySlug(content.type.data.attributes.slug) - } - ${langui.categories}: ${ - content.categories.data.length > 0 && - content.categories.data - .map((category) => { - return category.attributes.short; - }) - .join(" | ") - } - - ${content.titles.length > 0 ? content.titles[0].description : undefined} - `} + description={description} {...props} /> ); @@ -308,42 +313,43 @@ export function useTesting(props: ContentReadProps) { ["content", "text_set"], contentURL ); - } - if (textset.source_language.data.attributes.code === router.locale) { - // This is a transcript - if (textset.transcribers.data.length === 0) { - prettyTestError( - router, - "Missing transcribers attribution", - ["content", "text_set"], - contentURL - ); - } - if (textset.translators.data.length > 0) { - prettyTestError( - router, - "Transcripts shouldn't have translators", - ["content", "text_set"], - contentURL - ); - } } else { - // This is a translation - if (textset.translators.data.length === 0) { - prettyTestError( - router, - "Missing translators attribution", - ["content", "text_set"], - contentURL - ); - } - if (textset.transcribers.data.length > 0) { - prettyTestError( - router, - "Translations shouldn't have transcribers", - ["content", "text_set"], - contentURL - ); + if (textset.source_language.data.attributes.code === router.locale) { + // This is a transcript + if (textset.transcribers.data.length === 0) { + prettyTestError( + router, + "Missing transcribers attribution", + ["content", "text_set"], + contentURL + ); + } + if (textset.translators.data.length > 0) { + prettyTestError( + router, + "Transcripts shouldn't have translators", + ["content", "text_set"], + contentURL + ); + } + } else { + // This is a translation + if (textset.translators.data.length === 0) { + prettyTestError( + router, + "Missing translators attribution", + ["content", "text_set"], + contentURL + ); + } + if (textset.transcribers.data.length > 0) { + prettyTestError( + router, + "Translations shouldn't have transcribers", + ["content", "text_set"], + contentURL + ); + } } } } -- 2.40.1 From a74528fe284b25de77974c56ca7ef5b02451d4aa Mon Sep 17 00:00:00 2001 From: DrMint Date: Mon, 14 Mar 2022 12:31:39 +0100 Subject: [PATCH 11/19] TOC now support entries with the same title --- src/components/Markdown/Markdawn.tsx | 53 +++++++++ src/components/Markdown/TOC.tsx | 163 ++++++++++++++------------- 2 files changed, 140 insertions(+), 76 deletions(-) diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx index 51c71ba..80a8c03 100644 --- a/src/components/Markdown/Markdawn.tsx +++ b/src/components/Markdown/Markdawn.tsx @@ -180,12 +180,65 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { export function preprocessMarkDawn(text: string): string { let scenebreakIndex = 0; + const visitedSlugs: string[] = []; + const result = text.split("\n").map((line) => { if (line === "* * *" || line === "---") { scenebreakIndex++; return ``; } + + if (line.startsWith("# ")) { + return markdawnHeadersParser(headerLevels.h1, line, visitedSlugs); + } + + if (line.startsWith("## ")) { + return markdawnHeadersParser(headerLevels.h2, line, visitedSlugs); + } + + if (line.startsWith("### ")) { + return markdawnHeadersParser(headerLevels.h3, line, visitedSlugs); + } + + if (line.startsWith("#### ")) { + return markdawnHeadersParser(headerLevels.h4, line, visitedSlugs); + } + + if (line.startsWith("##### ")) { + return markdawnHeadersParser(headerLevels.h5, line, visitedSlugs); + } + + if (line.startsWith("###### ")) { + return markdawnHeadersParser(headerLevels.h6, line, visitedSlugs); + } + return line; }); return result.join("\n"); } + +enum headerLevels { + h1 = 1, + h2 = 2, + h3 = 3, + h4 = 4, + h5 = 5, + h6 = 6, +} + +function markdawnHeadersParser( + headerLevel: headerLevels, + line: string, + visitedSlugs: string[] +): string { + const lineText = line.slice(headerLevel + 1); + let slug = slugify(lineText); + let newSlug = slug; + let index = 2; + while (visitedSlugs.includes(newSlug)) { + newSlug = `${slug}-${index}`; + index++; + } + visitedSlugs.push(newSlug); + return `<${headerLevels[headerLevel]} id="${newSlug}">${lineText}`; +} diff --git a/src/components/Markdown/TOC.tsx b/src/components/Markdown/TOC.tsx index ed2ce6b..8e50a0e 100644 --- a/src/components/Markdown/TOC.tsx +++ b/src/components/Markdown/TOC.tsx @@ -13,44 +13,55 @@ export default function TOC(props: TOCProps): JSX.Element { const toc = getTocFromMarkdawn(preprocessMarkDawn(text), title); return ( -
+ <>

Table of content

-
    -
  1. +
    2. - {toc.children.map((h2, h2Index) => ( - <> -
  2. - {`${h2Index + 1}. `} - router.replace(`#${h2.slug}`)}> - {{h2.title}} - -
    3. -
      - {h2.children.map((h3, h3Index) => ( -
    1. - {`${h2Index + 1}.${ - h3Index + 1 - }. `} - router.replace(`#${h3.slug}`)}> - {{h3.title}} - -
      2. - ))} -
    - - ))} -
-
+

+ +

+ + ); +} + +type TOCLevelProps = { + tocchildren: TOC[]; + parentNumbering: string; + router: NextRouter; +}; + +function TOCLevel(props: TOCLevelProps): JSX.Element { + const { tocchildren, parentNumbering, router } = props; + return ( +
    + {tocchildren.map((child, childIndex) => ( + <> +
  1. + {`${parentNumbering}${ + childIndex + 1 + }.`} + router.replace(`#${child.slug}`)}> + {{child.title}} + +
    2. + + + ))} +
); } @@ -69,13 +80,23 @@ export function getTocFromMarkdawn(text: string, title?: string): TOC { let h5 = -1; let scenebreak = 0; let scenebreakIndex = 0; + + function getTitle(line: string): string { + return line.slice(line.indexOf(`">`) + 2, line.indexOf("`)); + } + text.split("\n").map((line) => { - if (line.startsWith("# ")) { - toc.slug = slugify(line); - } else if (line.startsWith("## ")) { + if (line.startsWith("

= 0) { - toc.children[h2].children[h3].children[h4].children[h5].children.push({ - title: `Scene break ${scenebreak}`, - slug: slugify(`scene-break-${scenebreakIndex}`), - children: [], - }); + toc.children[h2].children[h3].children[h4].children[h5].children.push( + child + ); } else if (h4 >= 0) { - toc.children[h2].children[h3].children[h4].children.push({ - title: `Scene break ${scenebreak}`, - slug: slugify(`scene-break-${scenebreakIndex}`), - children: [], - }); + toc.children[h2].children[h3].children[h4].children.push(child); } else if (h3 >= 0) { - toc.children[h2].children[h3].children.push({ - title: `Scene break ${scenebreak}`, - slug: slugify(`scene-break-${scenebreakIndex}`), - children: [], - }); + toc.children[h2].children[h3].children.push(child); } else if (h2 >= 0) { - toc.children[h2].children.push({ - title: `Scene break ${scenebreak}`, - slug: slugify(`scene-break-${scenebreakIndex}`), - children: [], - }); + toc.children[h2].children.push(child); } else { - toc.children.push({ - title: `Scene break ${scenebreak}`, - slug: slugify(`scene-break-${scenebreakIndex}`), - children: [], - }); + toc.children.push(child); } } }); + return toc; } -- 2.40.1 From 62aafe423e134e9b36d546285255aeb520c2daae Mon Sep 17 00:00:00 2001 From: DrMint Date: Mon, 14 Mar 2022 12:52:04 +0100 Subject: [PATCH 12/19] Added anchor links for all header levels --- src/components/Markdown/Markdawn.tsx | 122 +++++++++++++++++++-------- 1 file changed, 88 insertions(+), 34 deletions(-) diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx index 80a8c03..f6fcb7c 100644 --- a/src/components/Markdown/Markdawn.tsx +++ b/src/components/Markdown/Markdawn.tsx @@ -22,6 +22,22 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { options={{ slugify: slugify, overrides: { + h1: { + component: (props: { + id: string; + style: React.CSSProperties; + children: React.ReactNode; + }) => { + return ( +
+

+ {props.children} +

+ +
+ ); + }, + }, h2: { component: (props: { id: string; @@ -33,23 +49,7 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {

{props.children}

- - - { - navigator.clipboard.writeText( - process.env.NEXT_PUBLIC_URL_SELF + - window.location.pathname + - "#" + - props.id - ); - }} - > - link - - - +

); }, @@ -65,23 +65,55 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {

{props.children}

- - - { - navigator.clipboard.writeText( - process.env.NEXT_PUBLIC_URL_SELF + - window.location.pathname + - "#" + - props.id - ); - }} - > - link - - - + +
+ ); + }, + }, + h4: { + component: (props: { + id: string; + style: React.CSSProperties; + children: React.ReactNode; + }) => { + return ( +
+

+ {props.children} +

+ +
+ ); + }, + }, + h5: { + component: (props: { + id: string; + style: React.CSSProperties; + children: React.ReactNode; + }) => { + return ( +
+
+ {props.children} +
+ +
+ ); + }, + }, + h6: { + component: (props: { + id: string; + style: React.CSSProperties; + children: React.ReactNode; + }) => { + return ( +
+
+ {props.children} +
+
); }, @@ -178,6 +210,28 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { return <>; } +function HeaderToolTip(props: { id: string }) { + return ( + + + { + navigator.clipboard.writeText( + process.env.NEXT_PUBLIC_URL_SELF + + window.location.pathname + + "#" + + props.id + ); + }} + > + link + + + + ); +} + export function preprocessMarkDawn(text: string): string { let scenebreakIndex = 0; const visitedSlugs: string[] = []; -- 2.40.1 From 3364a8f5601ac1a7ef6dddb0a11e0af4da918236 Mon Sep 17 00:00:00 2001 From: DrMint Date: Thu, 17 Mar 2022 17:04:08 +0100 Subject: [PATCH 13/19] Chips are now nowrap --- src/components/Chip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx index e3719a1..e4c9c98 100644 --- a/src/components/Chip.tsx +++ b/src/components/Chip.tsx @@ -8,7 +8,7 @@ type ChipProps = { export default function Chip(props: ChipProps): JSX.Element { return (
{props.children}
-- 2.40.1 From 1f1c17a3a89c199a86750c4c6f56747bb7608e6e Mon Sep 17 00:00:00 2001 From: DrMint Date: Thu, 17 Mar 2022 17:04:50 +0100 Subject: [PATCH 14/19] ThumbnailHeaders are now more modular thus work in more situation --- src/components/Content/ThumbnailHeader.tsx | 69 ++++++++++------------ 1 file changed, 31 insertions(+), 38 deletions(-) diff --git a/src/components/Content/ThumbnailHeader.tsx b/src/components/Content/ThumbnailHeader.tsx index 59d11a5..89607d0 100644 --- a/src/components/Content/ThumbnailHeader.tsx +++ b/src/components/Content/ThumbnailHeader.tsx @@ -3,95 +3,88 @@ import { GetWebsiteInterfaceQuery, } from "graphql/operations-types"; import { prettyinlineTitle, prettySlug, slugify } from "queries/helpers"; -import Button from "components/Button"; import Img, { ImageQuality } from "components/Img"; import InsetBox from "components/InsetBox"; import Chip from "components/Chip"; export type ThumbnailHeaderProps = { - content: { - slug: GetContentQuery["contents"]["data"][number]["attributes"]["slug"]; - thumbnail: GetContentQuery["contents"]["data"][number]["attributes"]["thumbnail"]; - titles: GetContentQuery["contents"]["data"][number]["attributes"]["titles"]; - type: GetContentQuery["contents"]["data"][number]["attributes"]["type"]; - categories: GetContentQuery["contents"]["data"][number]["attributes"]["categories"]; - }; + pre_title?: string; + title: string; + subtitle?: string; + description?: string; + type?: GetContentQuery["contents"]["data"][number]["attributes"]["type"]; + categories?: GetContentQuery["contents"]["data"][number]["attributes"]["categories"]; + thumbnail?: GetContentQuery["contents"]["data"][number]["attributes"]["thumbnail"]; langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; }; export default function ThumbnailHeader( props: ThumbnailHeaderProps ): JSX.Element { - const content = props.content; - const langui = props.langui; + const { + langui, + pre_title, + title, + subtitle, + thumbnail, + type, + categories, + description, + } = props; return ( <>
- {content.thumbnail.data ? ( + {thumbnail && thumbnail.data ? ( ) : ( -
+
)}
0 - ? prettyinlineTitle( - content.titles[0].pre_title, - content.titles[0].title, - content.titles[0].subtitle - ) - : prettySlug(content.slug) + prettyinlineTitle(pre_title || "", title, subtitle || "") )} className="grid place-items-center text-center" > - {content.titles.length > 0 ? ( - <> -

{content.titles[0].pre_title}

-

{content.titles[0].title}

-

{content.titles[0].subtitle}

- - ) : ( -

{prettySlug(content.slug)}

- )} +

{pre_title}

+

{title}

+

{subtitle}

- {content.type.data && ( + {type && type.data && (

{langui.type}

- {content.type.data.attributes.titles.length > 0 - ? content.type.data.attributes.titles[0].title - : prettySlug(content.type.data.attributes.slug)} + {type.data.attributes.titles.length > 0 + ? type.data.attributes.titles[0].title + : prettySlug(type.data.attributes.slug)}
)} - {content.categories.data.length > 0 && ( + {categories && categories.data.length > 0 && (

{langui.categories}

- {content.categories.data.map((category) => ( + {categories.data.map((category) => ( {category.attributes.name} ))}
)}
- {content.titles.length > 0 && content.titles[0].description && ( - {content.titles[0].description} - )} + {description && {description}} ); } -- 2.40.1 From 151ae0b126bc65082eec2568a12059f0a5cddf9a Mon Sep 17 00:00:00 2001 From: DrMint Date: Thu, 17 Mar 2022 17:05:34 +0100 Subject: [PATCH 15/19] Display the news articles --- src/components/Markdown/Markdawn.tsx | 2 +- src/components/News/PostsPreview.tsx | 64 +++++++++++ src/graphql/operation.graphql | 83 +++++++++++++- src/graphql/operations-types.ts | 106 ++++++++++++++++- src/graphql/operations.ts | 18 +++ src/graphql/schema.graphql | 21 ++-- src/pages/contents/[slug]/index.tsx | 23 +++- src/pages/contents/[slug]/read.tsx | 30 ++++- src/pages/news/[slug].tsx | 165 +++++++++++++++++++++++++++ src/pages/news/index.tsx | 32 +++++- 10 files changed, 517 insertions(+), 27 deletions(-) create mode 100644 src/components/News/PostsPreview.tsx create mode 100644 src/pages/news/[slug].tsx diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx index f6fcb7c..cd0dc14 100644 --- a/src/components/Markdown/Markdawn.tsx +++ b/src/components/Markdown/Markdawn.tsx @@ -167,7 +167,7 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { }, InsetBox: { component: (props) => { - return {props.children}; + return {props.children}; }, }, li: { diff --git a/src/components/News/PostsPreview.tsx b/src/components/News/PostsPreview.tsx new file mode 100644 index 0000000..ee0fdc9 --- /dev/null +++ b/src/components/News/PostsPreview.tsx @@ -0,0 +1,64 @@ +import Link from "next/link"; +import { prettyDate, prettySlug } from "queries/helpers"; +import Chip from "components/Chip"; +import Img, { ImageQuality } from "components/Img"; +import { GetPostsPreviewQuery } from "graphql/operations-types"; + +export type PostPreviewProps = { + post: { + slug: GetPostsPreviewQuery["posts"]["data"][number]["attributes"]["slug"]; + thumbnail: GetPostsPreviewQuery["posts"]["data"][number]["attributes"]["thumbnail"]; + translations: GetPostsPreviewQuery["posts"]["data"][number]["attributes"]["translations"]; + categories: GetPostsPreviewQuery["posts"]["data"][number]["attributes"]["categories"]; + date: GetPostsPreviewQuery["posts"]["data"][number]["attributes"]["date"]; + }; +}; + +export default function PostPreview(props: PostPreviewProps): JSX.Element { + const post = props.post; + + return ( + +
+ {post.thumbnail.data ? ( + + ) : ( +
+ )} +
+
+ {post.date && ( +

+ + event + + {prettyDate(post.date)} +

+ )} +
+
+ {post.translations.length > 0 ? ( + <> +

{post.translations[0].title}

+

{post.translations[0].excerpt}

+ + ) : ( +

{prettySlug(post.slug)}

+ )} +
+
+ {post.categories.data.map((category) => ( + + {category.attributes.short} + + ))} +
+
+
+ + ); +} diff --git a/src/graphql/operation.graphql b/src/graphql/operation.graphql index cefdb37..b6d3730 100644 --- a/src/graphql/operation.graphql +++ b/src/graphql/operation.graphql @@ -1155,8 +1155,12 @@ query getPost($slug: String, $language_code: String) { id attributes { slug - publishedAt updatedAt + date { + year + month + day + } authors { data { id @@ -1200,8 +1204,20 @@ query getPost($slug: String, $language_code: String) { } } hidden + thumbnail { + data { + attributes { + name + alternativeText + caption + width + height + url + } + } + } translations(filters: { language: { code: { eq: $language_code } } }) { - Status + status title excerpt thumbnail { @@ -1222,3 +1238,66 @@ query getPost($slug: String, $language_code: String) { } } } + +query getPostsSlugs { + posts(filters: { hidden: { eq: false } }) { + data { + id + attributes { + slug + } + } + } +} + +query getPostsPreview($language_code: String) { + posts(filters: { hidden: { eq: false } }) { + data { + id + attributes { + slug + date { + year + month + day + } + categories { + data { + id + attributes { + short + } + } + } + thumbnail { + data { + attributes { + name + alternativeText + caption + width + height + url + } + } + } + translations(filters: { language: { code: { eq: $language_code } } }) { + title + excerpt + thumbnail { + data { + attributes { + name + alternativeText + caption + width + height + url + } + } + } + } + } + } + } +} diff --git a/src/graphql/operations-types.ts b/src/graphql/operations-types.ts index 972010f..245677f 100644 --- a/src/graphql/operations-types.ts +++ b/src/graphql/operations-types.ts @@ -1554,8 +1554,13 @@ export type GetPostQuery = { attributes: { __typename: "Post"; slug: string; - publishedAt: any; updatedAt: any; + date: { + __typename: "ComponentBasicsDatepicker"; + year: number; + month: number; + day: number; + }; hidden: boolean; authors: { __typename: "RecorderRelationResponseCollection"; @@ -1609,9 +1614,24 @@ export type GetPostQuery = { }; }>; }; + thumbnail: { + __typename: "UploadFileEntityResponse"; + data: { + __typename: "UploadFileEntity"; + attributes: { + __typename: "UploadFile"; + name: string; + alternativeText: string; + caption: string; + width: number; + height: number; + url: string; + }; + }; + }; translations: Array<{ __typename: "ComponentTranslationsPosts"; - Status: Enum_Componenttranslationsposts_Status; + status: Enum_Componenttranslationsposts_Status; title: string; excerpt: string; body: string; @@ -1635,3 +1655,85 @@ export type GetPostQuery = { }>; }; }; + +export type GetPostsSlugsQueryVariables = Exact<{ [key: string]: never }>; + +export type GetPostsSlugsQuery = { + __typename: "Query"; + posts: { + __typename: "PostEntityResponseCollection"; + data: Array<{ + __typename: "PostEntity"; + id: string; + attributes: { __typename: "Post"; slug: string }; + }>; + }; +}; + +export type GetPostsPreviewQueryVariables = Exact<{ + language_code: InputMaybe; +}>; + +export type GetPostsPreviewQuery = { + __typename: "Query"; + posts: { + __typename: "PostEntityResponseCollection"; + data: Array<{ + __typename: "PostEntity"; + id: string; + attributes: { + __typename: "Post"; + slug: string; + date: { + __typename: "ComponentBasicsDatepicker"; + year: number; + month: number; + day: number; + }; + categories: { + __typename: "CategoryRelationResponseCollection"; + data: Array<{ + __typename: "CategoryEntity"; + id: string; + attributes: { __typename: "Category"; short: string }; + }>; + }; + thumbnail: { + __typename: "UploadFileEntityResponse"; + data: { + __typename: "UploadFileEntity"; + attributes: { + __typename: "UploadFile"; + name: string; + alternativeText: string; + caption: string; + width: number; + height: number; + url: string; + }; + }; + }; + translations: Array<{ + __typename: "ComponentTranslationsPosts"; + title: string; + excerpt: string; + thumbnail: { + __typename: "UploadFileEntityResponse"; + data: { + __typename: "UploadFileEntity"; + attributes: { + __typename: "UploadFile"; + name: string; + alternativeText: string; + caption: string; + width: number; + height: number; + url: string; + }; + }; + }; + }>; + }; + }>; + }; +}; diff --git a/src/graphql/operations.ts b/src/graphql/operations.ts index e309b2f..74a55f2 100644 --- a/src/graphql/operations.ts +++ b/src/graphql/operations.ts @@ -25,6 +25,10 @@ import { GetLibraryItemsSlugsQueryVariables, GetPostQuery, GetPostQueryVariables, + GetPostsPreviewQuery, + GetPostsPreviewQueryVariables, + GetPostsSlugsQuery, + GetPostsSlugsQueryVariables, GetWebsiteInterfaceQuery, GetWebsiteInterfaceQueryVariables, } from "graphql/operations-types"; @@ -150,3 +154,17 @@ export async function getPost( const query = getQueryFromOperations("getPost"); return await graphQL(query, JSON.stringify(variables)); } + +export async function getPostsSlugs( + variables: GetPostsSlugsQueryVariables +): Promise { + const query = getQueryFromOperations("getPostsSlugs"); + return await graphQL(query, JSON.stringify(variables)); +} + +export async function getPostsPreview( + variables: GetPostsPreviewQueryVariables +): Promise { + const query = getQueryFromOperations("getPostsPreview"); + return await graphQL(query, JSON.stringify(variables)); +} diff --git a/src/graphql/schema.graphql b/src/graphql/schema.graphql index cf8f6ed..1514e6c 100644 --- a/src/graphql/schema.graphql +++ b/src/graphql/schema.graphql @@ -26,11 +26,6 @@ type ResponseCollectionMeta { pagination: Pagination! } -enum PublicationState { - LIVE - PREVIEW -} - input IDFilterInput { and: [ID] or: [ID] @@ -387,6 +382,8 @@ input ComponentCollectionsComponentLibraryObiBeltInput { back: ID full: ID inside_full: ID + flap_front: ID + flap_back: ID } type ComponentCollectionsComponentLibraryObiBelt { @@ -396,6 +393,8 @@ type ComponentCollectionsComponentLibraryObiBelt { back: UploadFileEntityResponse full: UploadFileEntityResponse inside_full: UploadFileEntityResponse + flap_front: UploadFileEntityResponse + flap_back: UploadFileEntityResponse } input ComponentCollectionsComponentTitlesFiltersInput { @@ -1057,11 +1056,11 @@ enum ENUM_COMPONENTTRANSLATIONSPOSTS_STATUS { } input ComponentTranslationsPostsFiltersInput { - Status: StringFilterInput title: StringFilterInput excerpt: StringFilterInput body: StringFilterInput language: LanguageFiltersInput + status: StringFilterInput and: [ComponentTranslationsPostsFiltersInput] or: [ComponentTranslationsPostsFiltersInput] not: ComponentTranslationsPostsFiltersInput @@ -1069,22 +1068,22 @@ input ComponentTranslationsPostsFiltersInput { input ComponentTranslationsPostsInput { id: ID - Status: ENUM_COMPONENTTRANSLATIONSPOSTS_STATUS title: String excerpt: String thumbnail: ID body: String language: ID + status: ENUM_COMPONENTTRANSLATIONSPOSTS_STATUS } type ComponentTranslationsPosts { id: ID! - Status: ENUM_COMPONENTTRANSLATIONSPOSTS_STATUS! title: String! excerpt: String thumbnail: UploadFileEntityResponse body: String language: LanguageEntityResponse + status: ENUM_COMPONENTTRANSLATIONSPOSTS_STATUS! } enum ENUM_COMPONENTTRANSLATIONSSCANSET_STATUS { @@ -2126,7 +2125,6 @@ input PostFiltersInput { hidden: BooleanFilterInput createdAt: DateTimeFilterInput updatedAt: DateTimeFilterInput - publishedAt: DateTimeFilterInput and: [PostFiltersInput] or: [PostFiltersInput] not: PostFiltersInput @@ -2138,7 +2136,7 @@ input PostInput { categories: [ID] translations: [ComponentTranslationsPostsInput] hidden: Boolean - publishedAt: DateTime + thumbnail: ID } type Post { @@ -2159,9 +2157,9 @@ type Post { sort: [String] = [] ): [ComponentTranslationsPosts] hidden: Boolean! + thumbnail: UploadFileEntityResponse createdAt: DateTime updatedAt: DateTime - publishedAt: DateTime } type PostEntity { @@ -3206,7 +3204,6 @@ type Query { filters: PostFiltersInput pagination: PaginationArg = {} sort: [String] = [] - publicationState: PublicationState = LIVE ): PostEntityResponseCollection rangedContent(id: ID): RangedContentEntityResponse rangedContents( diff --git a/src/pages/contents/[slug]/index.tsx b/src/pages/contents/[slug]/index.tsx index 241be91..82ff621 100644 --- a/src/pages/contents/[slug]/index.tsx +++ b/src/pages/contents/[slug]/index.tsx @@ -40,7 +40,28 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element { className="mb-10" />
- + 0 ? content.titles[0].pre_title : undefined + } + title={ + content.titles.length > 0 + ? content.titles[0].title + : prettySlug(content.slug) + } + subtitle={ + content.titles.length > 0 ? content.titles[0].subtitle : undefined + } + description={ + content.titles.length > 0 + ? content.titles[0].description + : undefined + } + type={content.type} + categories={content.categories} + langui={langui} + /> diff --git a/src/pages/contents/[slug]/read.tsx b/src/pages/contents/[slug]/read.tsx index 09ba673..6ef51ed 100644 --- a/src/pages/contents/[slug]/read.tsx +++ b/src/pages/contents/[slug]/read.tsx @@ -1,9 +1,6 @@ import { GetStaticPaths, GetStaticProps } from "next"; import { getContentsSlugs, getContentText } from "graphql/operations"; -import { - Enum_Componentsetstextset_Status, - GetContentTextQuery, -} from "graphql/operations-types"; +import { GetContentTextQuery } from "graphql/operations-types"; import ContentPanel from "components/Panels/ContentPanel"; import HorizontalLine from "components/HorizontalLine"; import SubPanel from "components/Panels/SubPanel"; @@ -158,13 +155,34 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
- + 0 ? content.titles[0].pre_title : undefined + } + title={ + content.titles.length > 0 + ? content.titles[0].title + : prettySlug(content.slug) + } + subtitle={ + content.titles.length > 0 ? content.titles[0].subtitle : undefined + } + description={ + content.titles.length > 0 + ? content.titles[0].description + : undefined + } + type={content.type} + categories={content.categories} + langui={langui} + /> diff --git a/src/pages/news/[slug].tsx b/src/pages/news/[slug].tsx new file mode 100644 index 0000000..3abc4c3 --- /dev/null +++ b/src/pages/news/[slug].tsx @@ -0,0 +1,165 @@ +import AppLayout from "components/AppLayout"; +import Chip from "components/Chip"; +import ThumbnailHeader from "components/Content/ThumbnailHeader"; +import HorizontalLine from "components/HorizontalLine"; +import Markdawn from "components/Markdown/Markdawn"; +import TOC from "components/Markdown/TOC"; +import ReturnButton, { + ReturnButtonType, +} from "components/PanelComponents/ReturnButton"; +import ContentPanel from "components/Panels/ContentPanel"; +import SubPanel from "components/Panels/SubPanel"; +import RecorderChip from "components/RecorderChip"; +import ToolTip from "components/ToolTip"; +import { getPost, getPostsSlugs } from "graphql/operations"; +import { GetPostQuery } from "graphql/operations-types"; +import { GetStaticPaths, GetStaticProps } from "next"; +import { useRouter } from "next/router"; +import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; +import { prettySlug, getStatusDescription } from "queries/helpers"; + +interface PostProps extends AppStaticProps { + post: GetPostQuery["posts"]["data"][number]["attributes"]; + postId: GetPostQuery["posts"]["data"][number]["id"]; +} + +export default function LibrarySlug(props: PostProps): JSX.Element { + const { post, postId, langui } = props; + const router = useRouter(); + + const subPanel = ( + + + + {post.translations.length > 0 && ( +
+

{langui.status}:

+ + + {post.translations[0].status} + +
+ )} + + {post.authors.data.length > 0 && ( +
+

{"Authors"}:

+
+ {post.authors.data.map((author) => ( + + ))} +
+
+ )} + + + + {post.translations.length > 0 && post.translations[0].body && ( + + )} + + ); + const contentPanel = ( + + + + 0 && post.translations[0].thumbnail.data + ? post.translations[0].thumbnail + : post.thumbnail + } + title={ + post.translations.length > 0 + ? post.translations[0].title + : prettySlug(post.slug) + } + description={ + post.translations.length > 0 + ? post.translations[0].excerpt + : undefined + } + langui={langui} + categories={post.categories} + /> + + + + {post.translations.length > 0 && post.translations[0].body && ( + + )} + + ); + + return ( + 0 + ? post.translations[0].title + : prettySlug(post.slug) + } + contentPanel={contentPanel} + subPanel={subPanel} + thumbnail={post.translations[0].thumbnail.data?.attributes} + {...props} + /> + ); +} + +export const getStaticProps: GetStaticProps = async (context) => { + const post = ( + await getPost({ + slug: context.params?.slug?.toString() || "", + language_code: context.locale || "en", + }) + ).posts.data[0]; + const props: PostProps = { + ...(await getAppStaticProps(context)), + post: post.attributes, + postId: post.id, + }; + return { + props: props, + }; +}; + +export const getStaticPaths: GetStaticPaths = async (context) => { + type Path = { + params: { + slug: string; + }; + locale: string; + }; + + const data = await getPostsSlugs({}); + const paths: Path[] = []; + data.posts.data.map((item) => { + context.locales?.map((local) => { + paths.push({ params: { slug: item.attributes.slug }, locale: local }); + }); + }); + return { + paths, + fallback: false, + }; +}; diff --git a/src/pages/news/index.tsx b/src/pages/news/index.tsx index 9f26104..81de104 100644 --- a/src/pages/news/index.tsx +++ b/src/pages/news/index.tsx @@ -3,11 +3,17 @@ import PanelHeader from "components/PanelComponents/PanelHeader"; import { GetStaticProps } from "next"; import AppLayout from "components/AppLayout"; import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; +import { GetPostsPreviewQuery } from "graphql/operations-types"; +import { getPostsPreview } from "graphql/operations"; +import ContentPanel, { ContentPanelWidthSizes } from "components/Panels/ContentPanel"; +import PostsPreview from "components/News/PostsPreview"; -interface NewsProps extends AppStaticProps {} +interface NewsProps extends AppStaticProps { + posts: GetPostsPreviewQuery["posts"]["data"]; +} export default function News(props: NewsProps): JSX.Element { - const { langui } = props; + const { langui, posts } = props; const subPanel = ( ); - return ; + const contentPanel = ( + +
+ {posts.map((post) => ( + + ))} +
+ + ); + + return ( + + ); } export const getStaticProps: GetStaticProps = async (context) => { const props: NewsProps = { ...(await getAppStaticProps(context)), + posts: await ( + await getPostsPreview({ language_code: context.locale || "en" }) + ).posts.data, }; return { props: props, -- 2.40.1 From f4c2e2cba5972fa8960ad523bd36a310a4ef27a3 Mon Sep 17 00:00:00 2001 From: DrMint Date: Fri, 18 Mar 2022 01:54:10 +0100 Subject: [PATCH 16/19] Added lightbox --- src/components/Img.tsx | 76 +++++++++++++++------------- src/components/LightBox.tsx | 31 ++++++++++++ src/components/Markdown/Markdawn.tsx | 38 ++++++++++++++ src/components/Popup.tsx | 17 ++++++- src/pages/library/[slug].tsx | 27 +++++++++- 5 files changed, 150 insertions(+), 39 deletions(-) create mode 100644 src/components/LightBox.tsx diff --git a/src/components/Img.tsx b/src/components/Img.tsx index 8723bbb..24861e5 100644 --- a/src/components/Img.tsx +++ b/src/components/Img.tsx @@ -50,7 +50,7 @@ export function getImgSizesByQuality( type ImgProps = { className?: string; - image: StrapiImage; + image?: StrapiImage; quality?: ImageQuality; alt?: ImageProps["alt"]; layout?: ImageProps["layout"]; @@ -60,42 +60,46 @@ type ImgProps = { }; export default function Img(props: ImgProps): JSX.Element { - const imgSize = getImgSizesByQuality( - props.image.width, - props.image.height, - props.quality ? props.quality : ImageQuality.Small - ); + if (props.image) { + const imgSize = getImgSizesByQuality( + props.image.width, + props.image.height, + props.quality ? props.quality : ImageQuality.Small + ); - if (props.rawImg) { - return ( - // eslint-disable-next-line @next/next/no-img-element - {props.alt - ); + if (props.rawImg) { + return ( + // eslint-disable-next-line @next/next/no-img-element + {props.alt + ); + } else { + return ( + {props.alt + ); + } } else { - return ( - {props.alt - ); + return <>; } } diff --git a/src/components/LightBox.tsx b/src/components/LightBox.tsx new file mode 100644 index 0000000..a56551a --- /dev/null +++ b/src/components/LightBox.tsx @@ -0,0 +1,31 @@ +import { StrapiImage } from "graphql/operations-types"; +import { Dispatch, SetStateAction } from "react"; +import Img, { ImageQuality } from "./Img"; +import Popup from "./Popup"; + +export type LightBoxProps = { + setState: + | Dispatch> + | Dispatch>; + state: boolean; + image?: StrapiImage; +}; + +export default function LightBox(props: LightBoxProps): JSX.Element { + return ( + + + + ); +} diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx index cd0dc14..9720884 100644 --- a/src/components/Markdown/Markdawn.tsx +++ b/src/components/Markdown/Markdawn.tsx @@ -1,4 +1,5 @@ import HorizontalLine from "components/HorizontalLine"; +import Img, { ImageQuality } from "components/Img"; import InsetBox from "components/InsetBox"; import ToolTip from "components/ToolTip"; import { useAppLayout } from "contexts/AppLayoutContext"; @@ -200,6 +201,43 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { ); }, }, + img: { + component: (props: { + alt: string; + src: string; + width?: number; + height?: number; + caption?: string; + name?: string; + }) => { + return ( + <> + {props.src.startsWith("/uploads/") ? ( +
+ +
+ ) : ( +
+ +
+ )} + + ); + }, + }, }, }} > diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx index c9a30e1..7cd91b5 100644 --- a/src/components/Popup.tsx +++ b/src/components/Popup.tsx @@ -2,12 +2,17 @@ import { Dispatch, SetStateAction } from "react"; import Button from "./Button"; export type PopupProps = { - setState: Dispatch>; + setState: + | Dispatch> + | Dispatch>; state?: boolean; children: React.ReactNode; + fillViewport?: boolean; + hideBackground?: boolean; }; export default function Popup(props: PopupProps): JSX.Element { + return (
{ + if (e.key.match("Escape")) props.setState(false); + }} + tabIndex={0} >