Feature/corpus access (#64)

* Add new page /datasets

* add Datasets astro collection from external JSON source and add GITHUB TOKEN to get contents JSON out of a private repo

* fix #62, remove legacy collection option to complete the migration to Astro 5 and use `id` instead of `slug` for astro contents

* simplify list of authors to one single yaml

* npm fix audit

* add userPlan to Permanent store

* add minor css classes

* Create types.ts to contain all typescript types

---------

Co-authored-by: Daniele Guido <[email protected]>

.env

@@ -4,4 +4,5 @@ PUBLIC_IMPRESSO_API_HOST=http://localhost
 PUBLIC_IMPRESSO_API_PATH=/public-api
 PUBLIC_IMPRESSO_WS_API_HOST=http://localhost
 PUBLIC_IMPRESSO_WS_API_PATH=/socket.io
-PUBLIC_IMPRESSO_SQ_LS_KEY=impressoLatestSearchQuery
+PUBLIC_IMPRESSO_SQ_LS_KEY=impressoLatestSearchQuery
+GITHUB_TOKEN=yourgithubtoken

.github/workflows/docker-build-latest.yml

@@ -76,3 +76,4 @@ jobs:
             PUBLIC_IMPRESSO_DATALAB_BASE=${{ secrets.PUBLIC_IMPRESSO_DATALAB_BASE }}
             PUBLIC_IMPRESSO_API_PATH=/public-api/v1
             PUBLIC_IMPRESSO_WS_API_PATH=/api/socket.io
+            GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -34,3 +34,4 @@ src/styles/fonts.css
 impresso-datalab.code-workspace
 .env.development
 .env.local
+*.local

Dockerfile

@@ -10,7 +10,7 @@ ARG PUBLIC_IMPRESSO_DATALAB_SITE
 ARG PUBLIC_IMPRESSO_DATALAB_BASE
 ARG PUBLIC_IMPRESSO_API_PATH
 ARG PUBLIC_IMPRESSO_WS_API_PATH
-
+ARG GITHUB_TOKEN
 # Set the working directory inside the container
 WORKDIR /app
 
@@ -39,7 +39,7 @@ ENV PUBLIC_IMPRESSO_DATALAB_SITE=$PUBLIC_IMPRESSO_DATALAB_SITE
 ENV PUBLIC_IMPRESSO_DATALAB_BASE=$PUBLIC_IMPRESSO_DATALAB_BASE
 ENV PUBLIC_IMPRESSO_API_PATH=$PUBLIC_IMPRESSO_API_PATH
 ENV PUBLIC_IMPRESSO_WS_API_PATH=${PUBLIC_IMPRESSO_WS_API_PATH}
-
+ENV GITHUB_TOKEN=${GITHUB_TOKEN}
 # Build the Astro site for production
 RUN npm run build
 

astro.config.mjs

@@ -39,9 +39,9 @@ if (process.env.NODE_ENV === "development") {
 // https://astro.build/config
 export default defineConfig({
   integrations: [react(), mdx()],
-  legacy: {
-    collections: true,
-  },
+  // legacy: {
+  //   collections: true,
+  // },
   site: process.env.PUBLIC_IMPRESSO_DATALAB_SITE || "http://localhost:4321",
   base: process.env.PUBLIC_IMPRESSO_DATALAB_BASE || "/",
   ssr: {

src/components/App.astro

@@ -22,8 +22,8 @@ const seriesDataIndex = {} as any
 const numberOfSeries = series.length
 
 for(const seriesEntry of series){
-  seriesDataIndex[seriesEntry.slug] = await getRecursivelyEntryData(seriesEntry)
-  seriesDataIndex[seriesEntry.slug]['body'] = seriesEntry.body
+  seriesDataIndex[seriesEntry.id] = await getRecursivelyEntryData(seriesEntry)
+  seriesDataIndex[seriesEntry.id]['body'] = seriesEntry.body
 }
 
 const seriesValues:Collection[] = Object.values(seriesDataIndex) 

src/components/AuthorCard.tsx

@@ -1,5 +1,5 @@
 export interface Author {
-  slug: string
+  id: string
   name: string
   fullName?: string
 }

src/components/CorpusAccess.tsx

@@ -0,0 +1,9 @@
+export type CorpusAccessProps = {
+  className?: string
+}
+
+const CorpusAccess: React.FC<CorpusAccessProps> = ({ className = "" }) => {
+  return <div className={`CorpusAccess ${className}`}>test</div>
+}
+
+export default CorpusAccess

src/components/DatasetCard.tsx

@@ -0,0 +1,98 @@
+import type { FC } from "react"
+import type { Dataset } from "../types"
+import { Col, OverlayTrigger, Row, Tooltip } from "react-bootstrap"
+import { CheckCircleSolid, Xmark, XmarkCircleSolid } from "iconoir-react"
+import {
+  PlanAvailabilityLabels,
+  PlanEducational,
+  PlanGuest,
+  PlanImpressoUser,
+  PlanNone,
+  PlanResearcher,
+} from "../constants"
+
+export type DatasetCardProps = {
+  dataset: Dataset
+  userPlan?: string
+  className?: string
+}
+
+const compareDatasetPlanWithUserPlan = (
+  userPlan: string,
+  datasetPlan: string
+) => {
+  if (userPlan === datasetPlan || datasetPlan === PlanGuest) {
+    return <CheckCircleSolid color="green" />
+  }
+  if (
+    [PlanGuest, PlanImpressoUser].includes(datasetPlan) &&
+    [PlanImpressoUser, PlanResearcher, PlanEducational].includes(userPlan)
+  ) {
+    return <CheckCircleSolid color="green" />
+  }
+  if (datasetPlan === PlanNone) {
+    return (
+      <OverlayTrigger
+        overlay={
+          <Tooltip id="button-tooltip-3">
+            <span> This feature is not yet avalable to any plan</span>
+          </Tooltip>
+        }
+      >
+        <XmarkCircleSolid />
+      </OverlayTrigger>
+    )
+  }
+
+  return (
+    <OverlayTrigger
+      overlay={
+        <Tooltip id="button-tooltip-3">
+          <span>{PlanAvailabilityLabels[datasetPlan] ?? datasetPlan}</span>
+        </Tooltip>
+      }
+    >
+      <Xmark />
+    </OverlayTrigger>
+  )
+}
+
+const DatasetCard: FC<DatasetCardProps> = ({
+  dataset,
+  userPlan = PlanGuest,
+  className = "",
+}) => {
+  // translate
+  return (
+    <Row key={dataset.id} className={`DatasetCard ${className}`}>
+      <Col sm={1}>{dataset.startYear}</Col>
+      <Col sm={1}>{dataset.endYear}</Col>
+      <Col sm={2}>{dataset.medium}</Col>
+      <Col sm={5}>
+        <h3 className="font-size-inherit mb-1">
+          {dataset.mediaTitle} &mdash; {dataset.associatedPartner}
+        </h3>
+        <div className="d-flex">
+          <div className="small-caps">{dataset.media}</div>
+        </div>
+        {dataset.permittedUse}
+      </Col>
+
+      {[
+        dataset.minimumUserPlanRequiredToExploreInWebapp,
+        dataset.minimumUserPlanRequiredToExportTranscripts,
+        dataset.minimumUserPlanRequiredToExportIllustration,
+      ].map((plan, i) => (
+        <Col key={i} sm={1}>
+          {compareDatasetPlanWithUserPlan(userPlan, plan)}
+        </Col>
+      ))}
+
+      <Col sm={12}>
+        <div className="pt-3 border-bottom h-1px"></div>
+      </Col>
+    </Row>
+  )
+}
+
+export default DatasetCard