Merge github.com:grc-iit/grc-iit.github.io

Keith-Bateman · Nov 15, 2023 · 327c660 · 327c660
2 parents be28473 + 9dfe929
commit 327c660
Show file tree

Hide file tree

Showing 60 changed files with 2,098 additions and 907 deletions.
diff --git a/.github/workflows/build-and-publish.yml b/.github/workflows/build-and-publish.yml
@@ -1,22 +1,13 @@
-# This is a basic workflow to help you get started with Actions
-
 name: build-and-publish
 
-# Controls when the workflow will run
 on:
-  # Triggers the workflow on push or pull request events but only for the "main" branch
   push:
     branches: [ "main" ]
-  pull_request:
-    branches: [ "main" ]
-
-  # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
 permissions:
   contents: write
 
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
   deploy:
     name: Deploy to GitHub Pages
@@ -33,8 +24,6 @@ jobs:
       - name: Build website
         run: npm run build
 
-      # Popular action to deploy to GitHub Pages:
-      # Docs: https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-docusaurus
       - name: Deploy to GitHub Pages
         uses: peaceiris/actions-gh-pages@v3
         with:

diff --git a/.github/workflows/build-and-test.yml b/.github/workflows/build-and-test.yml
@@ -0,0 +1,25 @@
+name: build-and-test
+
+on:
+  pull_request:
+    branches: [ "main" ]
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  deploy:
+    name: Test GitHub Pages
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+      - name: Build website
+        run: npm run build
diff --git a/README.md b/README.md
@@ -1,43 +1,27 @@
-# Website
+# Gnosis Research Center Website
 
 This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
 
 ### Installation
 
 ```
-$ yarn
+$ npm install
 ```
 
 ### Local Development
 
 ```
-$ yarn start
+$ npm run start
 ```
 
 This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
 
 ### Build
 
 ```
-$ yarn build
+$ npm run build
 ```
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
-### Deployment
-
-Using SSH:
-
-```
-$ USE_SSH=true yarn deploy
-```
-
-Not using SSH:
-
-```
-$ GIT_USER=<Your GitHub username> yarn deploy
-```
-
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
-
-<!-- https://www.svgrepo.com/collection/big-data-and-web-analytics-3 -->
+<!-- https://www.svgrepo.com/collection/big-data-and-web-analytics-3 -->
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -200,6 +200,10 @@ const config = {
                 label: "ChronoLog",
                 to: "/research/projects/chronolog",
               },
+	      {
+		label: "Labios",
+		to: "/research/projects/labios",
+	      },
               {
                 label: "Coeus",
                 to: "/research/projects/coeus",

diff --git a/src/components/projects/ProjectList.tsx b/src/components/projects/ProjectList.tsx
@@ -5,13 +5,20 @@ import ProjectItem from "./ProjectItem";
 
 type ProjectListProps = {
   data: Project[];
+  isSorted?: boolean;
 };
 
-export default function ProjectList({ data }: ProjectListProps) {
+export default function ProjectList({
+  data,
+  isSorted = false,
+}: ProjectListProps) {
   return (
     <div className="container">
       <div className="row">
-        {data.map((project) => (
+        {(isSorted
+          ? data.sort((p1, p2) => p1.name.localeCompare(p2.name))
+          : data
+        ).map((project) => (
           <ProjectItem key={project.id} project={project} />
         ))}
       </div>

diff --git a/src/components/projects/ProjectPublications.tsx b/src/components/projects/ProjectPublications.tsx
@@ -0,0 +1,24 @@
+import PublicationsTable from "../publications/PublicationsTable";
+import React from "react";
+import { ProjectId, PublicationTag } from "@site/src/types";
+import { getProjectById } from "@site/src/data/projects";
+import { getPublicationsByTag } from "@site/src/data/publications";
+
+type ProjectPublicationsProps = {
+  projectId: ProjectId;
+};
+
+export default function ProjectPublications({
+  projectId,
+}: ProjectPublicationsProps) {
+  const { name } = getProjectById(projectId);
+  const publications = getPublicationsByTag(name as PublicationTag);
+  return (
+    <PublicationsTable
+      data={publications}
+      isFooterVisible={false}
+      isSearchInputVisible={false}
+      isTagsColumnVisible={false}
+    />
+  );
+}
diff --git a/src/components/publications/PublicationsTable.tsx b/src/components/publications/PublicationsTable.tsx
@@ -14,7 +14,12 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Publication, PublicationAuthor, PublicationTag, PublicationType } from "@site/src/types";
+import {
+  Publication,
+  PublicationAuthor,
+  PublicationTag,
+  PublicationType,
+} from "@site/src/types";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
 
 import Tag from "../common/Tag";
@@ -24,6 +29,9 @@ const ACCESSOR_SEPARATOR = ", ";
 
 type PublicationsTableProps = {
   data: Publication[];
+  isFooterVisible?: boolean;
+  isSearchInputVisible?: boolean;
+  isTagsColumnVisible?: boolean;
 };
 
 function ActiveColumnFilters({
@@ -38,7 +46,9 @@ function ActiveColumnFilters({
       const column = getColumn(columnId);
       const filterValue = column.getFilterValue();
       if (filterValue instanceof Array) {
-        const newFilterValue = filterValue.filter((value) => value !== removedValue);
+        const newFilterValue = filterValue.filter(
+          (value) => value !== removedValue
+        );
         if (newFilterValue.length === 0) {
           column.setFilterValue(undefined);
         } else {
@@ -84,7 +94,8 @@ function Authors({
 }) {
   const addFilter = useCallback(
     (author: PublicationAuthor) => {
-      const filterValue = (column.getFilterValue() || []) as PublicationAuthor[];
+      const filterValue = (column.getFilterValue() ||
+        []) as PublicationAuthor[];
       if (!filterValue.includes(author)) {
         column.setFilterValue([...filterValue, author]);
       }
@@ -119,7 +130,13 @@ function Links({ data }: { data: Record<string, string> }) {
   );
 }
 
-function Tags({ column, data }: { column: Column<Publication, string>; data: PublicationTag[] }) {
+function Tags({
+  column,
+  data,
+}: {
+  column: Column<Publication, string>;
+  data: PublicationTag[];
+}) {
   const addFilter = useCallback(
     (tag: PublicationTag) => {
       const filterValue = (column.getFilterValue() || []) as PublicationTag[];
@@ -169,7 +186,12 @@ function Type({
   );
 }
 
-export default function PublicationsTable({ data }: PublicationsTableProps) {
+export default function PublicationsTable({
+  data,
+  isFooterVisible = true,
+  isSearchInputVisible = true,
+  isTagsColumnVisible = true,
+}: PublicationsTableProps) {
   const [globalFilter, setGlobalFilter] = useState("");
   const [sorting, setSorting] = useState<SortingState>([]);
 
@@ -180,7 +202,9 @@ export default function PublicationsTable({ data }: PublicationsTableProps) {
         cell: (info) => (
           <Authors
             column={info.column}
-            data={info.getValue().split(ACCESSOR_SEPARATOR) as PublicationAuthor[]}
+            data={
+              info.getValue().split(ACCESSOR_SEPARATOR) as PublicationAuthor[]
+            }
           />
         ),
         enableSorting: false,
@@ -217,29 +241,32 @@ export default function PublicationsTable({ data }: PublicationsTableProps) {
         header: "Date",
         id: "date",
       }),
-      columnHelper.accessor((row) => row.tags.join(ACCESSOR_SEPARATOR), {
-        cell: (info) => (
-          <Tags
-            column={info.column}
-            data={info.getValue().split(ACCESSOR_SEPARATOR) as PublicationTag[]}
-          />
-        ),
-        enableSorting: false,
-        filterFn: (row, columnId, filterValue: PublicationAuthor[]) => {
-          const rowTags = row
-            .getValue<string>(columnId)
-            .split(ACCESSOR_SEPARATOR) as PublicationAuthor[];
-          return filterValue.every((tag) => rowTags.includes(tag));
-        },
-        header: "Tags",
-        id: "tags",
-      }),
+      isTagsColumnVisible &&
+        columnHelper.accessor((row) => row.tags.join(ACCESSOR_SEPARATOR), {
+          cell: (info) => (
+            <Tags
+              column={info.column}
+              data={
+                info.getValue().split(ACCESSOR_SEPARATOR) as PublicationTag[]
+              }
+            />
+          ),
+          enableSorting: false,
+          filterFn: (row, columnId, filterValue: PublicationAuthor[]) => {
+            const rowTags = row
+              .getValue<string>(columnId)
+              .split(ACCESSOR_SEPARATOR) as PublicationAuthor[];
+            return filterValue.every((tag) => rowTags.includes(tag));
+          },
+          header: "Tags",
+          id: "tags",
+        }),
       columnHelper.accessor("links", {
         cell: (info) => <Links data={info.getValue()} />,
         header: "Links",
         id: "links",
       }),
-    ];
+    ].filter(Boolean);
   }, []);
 
   const table = useReactTable({
@@ -259,20 +286,20 @@ export default function PublicationsTable({ data }: PublicationsTableProps) {
 
   return (
     <div>
-      <div className={styles.inputContainer}>
-        <DebouncedInput
-          className={styles.input}
-          value={globalFilter ?? ""}
-          onChange={(value) => setGlobalFilter(String(value))}
-          placeholder="Seach publications"
-        />
-      </div>
-
+      {isSearchInputVisible && (
+        <div className={styles.inputContainer}>
+          <DebouncedInput
+            className={styles.input}
+            value={globalFilter ?? ""}
+            onChange={(value) => setGlobalFilter(String(value))}
+            placeholder="Seach publications"
+          />
+        </div>
+      )}
       <ActiveColumnFilters
         columnFilters={table.getState().columnFilters}
         getColumn={table.getColumn}
       />
-
       <table className={styles.table}>
         <thead>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -282,10 +309,17 @@ export default function PublicationsTable({ data }: PublicationsTableProps) {
                   <div
                     {...{
                       onClick: header.column.getToggleSortingHandler(),
-                      style: { cursor: header.column.getCanSort() ? "pointer" : "default" },
+                      style: {
+                        cursor: header.column.getCanSort()
+                          ? "pointer"
+                          : "default",
+                      },
                     }}
                   >
-                    {flexRender(header.column.columnDef.header, header.getContext())}
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
                     {{
                       asc: " 🔼",
                       desc: " 🔽",
@@ -300,17 +334,22 @@ export default function PublicationsTable({ data }: PublicationsTableProps) {
           {table.getRowModel().rows.map((row) => (
             <tr key={row.id}>
               {row.getVisibleCells().map((cell) => (
-                <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                <td key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
               ))}
             </tr>
           ))}
         </tbody>
       </table>
-      <div>
-        <span>
-          Showing {table.getRowModel().rows.length} of {data.length} publications
-        </span>
-      </div>
+      {isFooterVisible && (
+        <div>
+          <span>
+            Showing {table.getRowModel().rows.length} of {data.length}{" "}
+            publications
+          </span>
+        </div>
+      )}
     </div>
   );
 }