From ae5e37c002793446d41d536820128a0d08b81854 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 01:21:43 +0100 Subject: [PATCH 01/10] 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/10] 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/10] 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/10] 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/10] 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/10] 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/10] 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 386efce0a78b79d35106c35c36a44b925b03c58f Mon Sep 17 00:00:00 2001 From: DrMint Date: Mon, 7 Mar 2022 16:27:38 +0100 Subject: [PATCH 08/10] Fixed small visual problem with buttons --- src/components/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 73eda2b..a968847 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -21,7 +21,7 @@ export default function Button(props: ButtonProps): JSX.Element { } ${ props.active ? "text-light bg-black drop-shadow-black-lg !border-black cursor-not-allowed" - : "cursor-pointer hover:text-light hover:bg-dark hover:drop-shadow-shade-lg active:bg-black active:drop-shadow-black-lg active:border-black" + : "cursor-pointer hover:text-light hover:bg-dark hover:drop-shadow-shade-lg active:bg-black active:text-light active:drop-shadow-black-lg active:border-black" }`} > {props.children} -- 2.40.1 From 1b25bcc22d6100b3bc62736b9b9d3eac23a6fb36 Mon Sep 17 00:00:00 2001 From: DrMint Date: Mon, 7 Mar 2022 21:43:51 +0100 Subject: [PATCH 09/10] Prices can now be properly compared between currencies --- src/pages/library/index.tsx | 20 +++++++++++++------- src/queries/helpers.ts | 15 +++++++++++---- 2 files changed, 24 insertions(+), 11 deletions(-) diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx index 4dec60f..cba6882 100644 --- a/src/pages/library/index.tsx +++ b/src/pages/library/index.tsx @@ -4,6 +4,7 @@ import ContentPanel, { ContentPanelWidthSizes, } from "components/Panels/ContentPanel"; import { + GetCurrenciesQuery, GetLibraryItemsPreviewQuery, GetWebsiteInterfaceQuery, } from "graphql/operations-types"; @@ -13,7 +14,7 @@ import AppLayout from "components/AppLayout"; import LibraryItemsPreview from "components/Library/LibraryItemsPreview"; import Select from "components/Select"; import { useEffect, useState } from "react"; -import { prettyDate, prettyinlineTitle } from "queries/helpers"; +import { convertPrice, prettyDate, prettyinlineTitle } from "queries/helpers"; import Switch from "components/Switch"; import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; @@ -27,7 +28,7 @@ type GroupLibraryItems = Map< >; export default function Library(props: LibraryProps): JSX.Element { - const { langui, items } = props; + const { langui, items, currencies } = props; const [showSubitems, setShowSubitems] = useState(false); const [showPrimaryItems, setShowPrimaryItems] = useState(true); @@ -40,7 +41,7 @@ export default function Library(props: LibraryProps): JSX.Element { ); const [sortedItems, setSortedItem] = useState( - sortBy(groupingMethod, filteredItems) + sortBy(groupingMethod, filteredItems, currencies) ); const [groups, setGroups] = useState( @@ -54,7 +55,7 @@ export default function Library(props: LibraryProps): JSX.Element { }, [showSubitems, items, showPrimaryItems, showSecondaryItems]); useEffect(() => { - setSortedItem(sortBy(sortingMethod, filteredItems)); + setSortedItem(sortBy(sortingMethod, filteredItems, currencies)); }, [filteredItems, sortingMethod]); useEffect(() => { @@ -278,7 +279,8 @@ function filterItems( function sortBy( orderByType: number, - items: LibraryProps["items"] + items: LibraryProps["items"], + currencies: GetCurrenciesQuery["currencies"]["data"] ): LibraryProps["items"] { switch (orderByType) { case 0: @@ -297,8 +299,12 @@ function sortBy( }); case 1: return [...items].sort((a, b) => { - const priceA = a.attributes.price ? a.attributes.price.amount : 99999; - const priceB = b.attributes.price ? b.attributes.price.amount : 99999; + const priceA = a.attributes.price + ? convertPrice(a.attributes.price, currencies[0]) + : 99999; + const priceB = b.attributes.price + ? convertPrice(b.attributes.price, currencies[0]) + : 99999; return priceA - priceB; }); case 2: diff --git a/src/queries/helpers.ts b/src/queries/helpers.ts index c475860..6e30470 100644 --- a/src/queries/helpers.ts +++ b/src/queries/helpers.ts @@ -33,10 +33,7 @@ export function prettyPrice( let result = ""; currencies.map((currency) => { if (currency.attributes.code === targetCurrencyCode) { - let amountInUSD = - pricePicker.amount * pricePicker.currency.data.attributes.rate_to_usd; - let amountInTargetCurrency = - amountInUSD / currency.attributes.rate_to_usd; + const amountInTargetCurrency = convertPrice(pricePicker, currency); result = currency.attributes.symbol + amountInTargetCurrency.toLocaleString(undefined, { @@ -48,6 +45,16 @@ export function prettyPrice( return result; } +export function convertPrice( + pricePicker: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["price"], + targetCurrency: GetCurrenciesQuery["currencies"]["data"][number] +): number { + return ( + (pricePicker.amount * pricePicker.currency.data.attributes.rate_to_usd) / + targetCurrency.attributes.rate_to_usd + ); +} + export function prettySlug(slug?: string, parentSlug?: string): string { if (slug) { if (parentSlug && slug.startsWith(parentSlug)) -- 2.40.1 From 6de9302306da035cadc9b3be5e37fd661614de89 Mon Sep 17 00:00:00 2001 From: DrMint Date: Mon, 7 Mar 2022 21:57:56 +0100 Subject: [PATCH 10/10] Upadated REAME --- README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/README.md b/README.md index 6b245ca..66573d1 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,13 @@ - Multilanguage support - Markdown format for the rich text fields +#### [Image Processor](https://github.com/Accords-Library/img.accords-library.com) +- Convert the images from the CMS to 4 formats + - Small: 512x512, quality 60, .webp + - Medium: 1024x1024, quality 75, .webp + - Large: 2048x2048, quality 80, .webp + - Og: 512x512, quality 60, .jpg + #### [Front](https://github.com/Accords-Library/accords-library.com) (this repository) - Language: [TypeScript](https://www.typescriptlang.org/) @@ -29,6 +36,12 @@ - State Management: [React Context](https://reactjs.org/docs/context.html) - Persistent app state using LocalStorage - Support for many screen sizes and resolutions +- SSG (Static Site Generation): + - The website is built before running in production + - Performances are great, and possibility to deploy the app using a CDN +- OpenGraph and Metadata + - Good defaults for the metadate and OpenGraph properties + - Each page can provide the thumbnail, title, description to be used - Data quality testing - Data from the CMS is subject to a battery of tests (about 20 warning types and 40 error types) at build time - Each warning/error comes with a front-end link to the incriminating element, as well as a link to the CMS to fix it. -- 2.40.1