diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml deleted file mode 100644 index a7f6d4e..0000000 --- a/.github/workflows/node.js.yml +++ /dev/null @@ -1,36 +0,0 @@ -# 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: [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 - 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 }} diff --git a/README.md b/README.md index c3bec14..66573d1 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@ # 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) @@ -11,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/) @@ -31,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. 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} 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))