full refactor, adapt to new backend

.eslintrc.cjs

@@ -2,19 +2,19 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
   },
-}
+};

.github/workflows/deploy-gh-pages.yml

@@ -0,0 +1,49 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+
+permissions:
+  contents: write
+
+jobs:
+  build-and-deploy:
+    concurrency: ci-${{ github.ref }}
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Set branch subpath variable (for vite)
+        # This is the URL subpath where a branch is deployed.
+        # '/' for main branch, otherwise <branch-name>.
+        run: |
+          if [ "${{ github.ref_name }}" == "main" ]; then
+            echo "BRANCH_SUBPATH=/" >> $GITHUB_ENV
+          else
+            echo "BRANCH_SUBPATH=/${{ github.ref_name }}/" >> $GITHUB_ENV
+          fi
+
+      - name: Build project
+        run: npm run build
+
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: ./dist
+          # Deploy main branch to root, other branches to their subfolders
+          target-folder: ${{ env.BRANCH_SUBPATH }}
+          # when deploying main to root, keep folders where other branches are deployed
+          clean-exclude: "develop"

.github/workflows/prettier.yml

@@ -0,0 +1,30 @@
+name: Prettier
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run Prettier
+        run: npx prettier --check .

README.md

@@ -11,8 +11,23 @@ For local development:
 > npm run dev
 ```
 
-To publish the local version to GitHub pages:
+To build an optimized package, use
 
 ```
-> npm run deploy
+> npm run build
 ```
+
+Preview locally with
+
+```
+> npm run preview
+```
+
+## Branches and deployment
+
+The following branches are automatically deployed via Github actions in the following manner:
+
+- `main`
+  - deployed to https://materialscloud-org.github.io/discover-mc2d-react/
+- `develop`
+  - deployed to https://materialscloud-org.github.io/discover-mc2d-react/develop

index.html

@@ -5,7 +5,26 @@
     <link rel="icon" type="image/png" href="/favicon.png" />
     <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
     <meta name="viewport" content="width=968" />
+    <meta
+      name="description"
+      content="Curated set of two-dimensional crystal structures computationally exfoliated from experimental 3D crystals."
+    />
     <title>Materials Cloud 2D crystals database</title>
+
+    <!-- Plausible analytics -->
+    <script type="text/javascript">
+      var header = document.getElementsByTagName("head")[0];
+      var plausible = document.createElement("script");
+      var domain_name = window.location.hostname;
+      var rollup_name = "plausible-rollup.materialscloud.org";
+
+      plausible.async = "";
+      plausible.defer = "";
+      plausible.dataset["domain"] = domain_name + "," + rollup_name;
+      plausible.src = "https://plausible.io/js/plausible.js";
+      header.appendChild(plausible);
+    </script>
+    <!-- end Plausible analytics -->
   </head>
   <body>
     <div id="root"></div>