Merge branch 'main' into feature/auth

Author: danielfdsilva

.github/workflows/deploy-gh.yml

@@ -26,27 +26,30 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
 
       - name: Cache node_modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: cache-node-modules
         with:
           path: node_modules
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
+          key: ${{ runner.os }}-build-${{ hashFiles('**/package.json') }}
 
       - name: Cache dist
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: cache-dist
         with:
           path: packages/client/dist
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ github.sha }}
+          key: ${{ runner.os }}-build-${{ github.sha }}
 
       - name: Install
         run: npm install
 
+      - name: Setup SPA on Github Pages
+        run: node packages/client/tasks/setup-gh-pages.mjs
+
       - name: Build
         run: npm run all:build
 
@@ -59,14 +62,11 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Restore dist cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: cache-dist
         with:
           path: packages/client/dist
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ github.sha }}
-
-      - name: Copy index as 400 file for github pages
-        run: cp packages/client/dist/index.html packages/client/dist/400.html
+          key: ${{ runner.os }}-build-${{ github.sha }}
 
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4

packages/client/.env

@@ -1,10 +1,8 @@
 # App metadata
 APP_TITLE=STAC Manager
 APP_DESCRIPTION=Plugin based STAC editor
-
-# If the app is being served in from a subfolder, the domain url must be set.
-# For example, if the app is served from /mysite:
-# PUBLIC_URL=http://example.com/mysite
+## Don't set the public url here. Check the README.md file for more information
+# PUBLIC_URL= Do not set here
 
 # Api variables
 REACT_APP_STAC_BROWSER=

packages/client/README.md

@@ -14,10 +14,10 @@ Some client options are controlled by environment variables. These are:
 ## Title and description of the app for metadata
 APP_TITLE
 APP_DESCRIPTION
-
-# API
 ## If the app is being served in from a subfolder, the domain url must be set.
 PUBLIC_URL
+
+# API
 REACT_APP_STAC_BROWSER
 REACT_APP_STAC_API
 
@@ -31,10 +31,39 @@ REACT_APP_THEME_PRIMARY_COLOR
 REACT_APP_THEME_SECONDARY_COLOR
 ```
 
+**Public URL**  
+It is recommended to always set the `PUBLIC_URL` environment variable on a production build.
+If the app is being served from a subfolder, the `PUBLIC_URL` should include the subfolder path. **Do not include a trailing slash.**
+
+For example, if the app is being served from `https://example.com/stac-manager`, the `PUBLIC_URL` should be set to `https://example.com/stac-manager`.
+
+> [!IMPORTANT]
+> The `PUBLIC_URL` environment variable must be set before running the build script, and therefore the `.env` file cannot be used to set this variable.
+
 You must provide a value for the `REACT_APP_STAC_API` environment variable. This should be the URL of the STAC API you wish to interact with.
 
 If the `REACT_APP_STAC_BROWSER` environment variable is not set, [Radiant Earth's STAC Browser](https://radiantearth.github.io/stac-browser/) will be used by default, which will connect to the STAC API specified in `REACT_APP_STAC_API`.
 
 **Auth**  
 The client uses Keycloack for authentication, which is disabled by default. To
-enable it you must provide values for the `REACT_APP_KEYCLOAK_*` environment variables. These can be obtained through the Keycloak server.
+enable it you must provide values for the `REACT_APP_KEYCLOAK_*` environment variables. These can be obtained through the Keycloak server.
+
+### Theming
+
+The Stac manager client allows for simple theming to give the instance a different look and feel.  
+The primary and secondary colors can be set using the `REACT_APP_THEME_PRIMARY_COLOR` and `REACT_APP_THEME_SECONDARY_COLOR` environment variables. These should be set to a valid CSS color value.
+
+The app has a default logo shown below, but it can be customized by replacing the necessary files.
+
+<img src='./static/meta/icon-512.png' alt='STAC Manager Logo' width='100px' />
+
+The logo should be a square image with a size of 512x512 pixels and should be placed in the `static/meta` folder with the name `icon-512.png`.
+
+To ensure the branding is consistent, the remaining meta images (in the `static/meta` folder) should also be replaced:
+```
+icon-192.png            192x192
+icon-512.png            512x512
+favicon.png             32x32
+apple-touch-icon.png    360x360
+meta-image.png          1920x1080
+```

packages/client/posthtml.config.js

@@ -28,7 +28,7 @@ module.exports = {
       locals: {
         appTitle: process.env.APP_TITLE,
         appDescription: process.env.APP_DESCRIPTION,
-        baseurl: process.env.PUBLIC_URL || ''
+        baseurl: process.env.PUBLIC_URL || '/'
       }
     }
   }

packages/client/src/App.tsx

@@ -7,7 +7,8 @@ import {
   Text,
   Badge,
   Divider,
-  Fade
+  Fade,
+  Image
 } from '@chakra-ui/react';
 import { keyframes } from '@emotion/react';
 import { Route, Routes } from 'react-router-dom';
@@ -86,9 +87,23 @@ export function App() {
             justifyContent='space-between'
             py={8}
           >
-            <Heading as='p' size='sm'>
-              STAC Manager
-            </Heading>
+            <Flex gap={4} alignItems='center'>
+              <Image
+                src={`${process.env.PUBLIC_URL || ''}/meta/icon-512.png`}
+                width={8}
+                aspectRatio={1}
+                borderRadius='md'
+              />
+              <Divider
+                orientation='vertical'
+                borderColor='base.200a'
+                h='1rem'
+                borderLeftWidth='2px'
+              />
+              <Heading as='p' size='sm'>
+                STAC Manager
+              </Heading>
+            </Flex>
 
             <MainNavigation />
           </Flex>

packages/client/src/components/ItemCard.tsx

@@ -15,10 +15,12 @@ import {
   SkeletonText
 } from '@chakra-ui/react';
 import SmartLink from './SmartLink';
+import { ItemCardThumbPlaceholder } from './ItemCardThumbPlaceholder';
 
 interface ItemCardProps {
   imageSrc?: string;
   imageAlt?: string;
+  showPlaceholder?: boolean;
   title?: string;
   subtitle?: string;
   description?: string;
@@ -30,6 +32,7 @@ interface ItemCardProps {
 export function ItemCard({
   imageSrc,
   imageAlt,
+  showPlaceholder,
   title,
   subtitle,
   description,
@@ -47,19 +50,22 @@ export function ItemCard({
     );
   };
 
+  const shouldUsePlaceholder = showPlaceholder && !imageSrc;
+
   return (
     <Card as='article' variant='filled'>
       {imageSrc &&
         renderLink(
           <Image
             src={imageSrc}
             alt={imageAlt}
-            height='16rem'
             width='100%'
+            aspectRatio={2}
             objectFit='cover'
             borderRadius='md'
           />
         )}
+      {shouldUsePlaceholder && renderLink(<ItemCardThumbPlaceholder />)}
       <CardHeader as='header'>
         <Flex direction='row' gap={4}>
           {(title || subtitle) && (