Beta to beta 2.0

.dockerignore

@@ -1,11 +1,10 @@
 Dockerfile*.*
-.dockerignore
-node_modules
 yarn-error.log
 README.md
 .env
 .env.local
 .env.test
 .env.development
 .yarnrc
-__ENV.js
+__ENV.js
+.git

.env.local.example

@@ -2,9 +2,6 @@ PORT=3000
 HOST=http://localhost:$PORT
 REACT_APP_RUNTIME_ENV=dev
 
-# Screen9 token for video player.
-REACT_APP_SCREEN9_API_TOKEN=secret
-
 LOGFILE_PATH=dataportal.log
 LOGGING_LEVELS=warn,error,info
 HEALTHCHECK_SECRET=1234
@@ -14,13 +11,22 @@ HTTP_PROXY=http://proxy.digg.se:8080
 HTTP_PROXY_USER=secretuser
 HTTP_PROXY_PASS=secretpass
 
-# Connect to a local backend.
+# Screen9 token for video player.
+REACT_APP_SCREEN9_API_TOKEN=secret
+
+## Connect to a local backend.
 #APOLLO_URL=http://localhost:1301
 #REACT_APP_APOLLO_URL=http://localhost:1301
 #IMAGE_DOMAIN=localhost
 #REACT_APP_MEDIA_BASE_URL=http://localhost:1337
 
-# Connect to production backend (beta.dataportal.se).
+## Connect to local apollo-gateway proxy server.
+#APOLLO_URL=http://127.0.0.1:1400
+#REACT_APP_APOLLO_URL=http://127.0.0.1:1400
+#IMAGE_DOMAIN=localhost
+#REACT_APP_MEDIA_BASE_URL=http://127.0.0.1:1337
+
+## Connect to production backend (beta.dataportal.se).
 APOLLO_URL=https://graphql.digg.se/
 REACT_APP_APOLLO_URL=https://graphql.digg.se/
 IMAGE_DOMAIN=graphql.digg.se

.github/workflows/gitlab-sync.yml

@@ -0,0 +1,21 @@
+name: PushRepoToGitlab
+on: [push]
+jobs:
+  pushtogitlab:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+    - name: Branch name
+      run: echo running on branch ${GITHUB_REF_NAME}
+    - name: Push To Gitlab
+      env:
+        token: ${{ secrets.GITLABTOKEN }}
+        gitlabrepo: ${{ secrets.GITLABREPO }}
+      run: |
+        echo Starting to push repo to gitlab
+        git config user.name "GitHub"
+        git config user.email "git@digitalist.github.com"
+        git remote set-url origin "https://oauth2:${token}@${gitlabrepo}"
+        git push origin ${GITHUB_REF_NAME}

.gitlab-ci.yml

@@ -0,0 +1,71 @@
+image: docker:20.10.16
+workflow:
+  rules:
+    - if: $CI_COMMIT_BRANCH
+    - if: $CI_COMMIT_TAG
+variables:
+  DOCKER_HOST: tcp://docker:2376
+  DOCKER_TLS_CERTDIR: "/certs"
+  DOCKER_TLS_VERIFY: 1
+  DOCKER_CERT_PATH: "$DOCKER_TLS_CERTDIR/client"
+  TAG: $CI_COMMIT_REF_SLUG-$CI_COMMIT_SHORT_SHA
+  IMAGE_NAME: "$IMAGE:$TAG"
+  DOCKER_IMAGE: "$IMAGE_NAME"
+  KANIKO_CACHE_ARGS: ""
+
+stages:
+  - build
+  - deploy
+image:build:release:
+  stage: build
+  cache:
+    key: ${CI_COMMIT_REF_SLUG}
+    paths:
+      - node_modules/
+      - .next/cache/
+  rules:
+    - if: $CI_COMMIT_BRANCH == "beta"
+  image:
+    name: gcr.io/kaniko-project/executor:debug
+    entrypoint: [""]
+  script:
+    - mkdir -p /kaniko/.docker
+    - cat $DOCKER_AUTH_CONFIG > /kaniko/.docker/config.json
+    - /kaniko/executor --context $CI_PROJECT_DIR --dockerfile Dockerfile --destination $IMAGE:$TAG
+
+image:build:tagged:
+  stage: build
+  cache:
+    key: ${CI_COMMIT_REF_SLUG}
+    paths:
+      - node_modules/
+      - .next/cache/
+  rules:
+    - if: $CI_COMMIT_TAG
+  image:
+    name: gcr.io/kaniko-project/executor:debug
+    entrypoint: [""]
+  script:
+    - mkdir -p /kaniko/.docker
+    - cat $DOCKER_AUTH_CONFIG > /kaniko/.docker/config.json
+    - /kaniko/executor --context $CI_PROJECT_DIR --dockerfile Dockerfile --destination $IMAGE:$CI_COMMIT_TAG
+
+deploy:branch:
+  rules:
+    - if: '$CI_COMMIT_BRANCH == "beta"'
+  variables:
+    IMAGE_DATAPORTAL_WEB: $IMAGE:$TAG
+  stage: deploy
+  trigger:
+    project: digg/deploy-dataportal
+    branch: main
+
+deploy:tag:
+  rules:
+    - if: $CI_COMMIT_TAG
+  variables:
+    IMAGE_DATAPORTAL_WEB: $IMAGE:$CI_COMMIT_TAG
+  stage: deploy
+  trigger:
+    project: digg/deploy-dataportal
+    branch: main

.yarnrc.yml

@@ -1,9 +1,11 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
 nodeLinker: node-modules
 
 plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
   - path: .yarn/plugins/@yarnpkg/plugin-npm-audit-fix.cjs
     spec: "https://raw.githubusercontent.com/sargunv/yarn-plugin-npm-audit-fix/yarn-v3/bundles/%40yarnpkg/plugin-npm-audit-fix.js"
 
-yarnPath: .yarn/releases/yarn-3.6.3.cjs
+yarnPath: .yarn/releases/yarn-4.0.0-rc.51.cjs

Dockerfile

@@ -1,11 +1,11 @@
-FROM node:16-alpine as base
+FROM node:18-alpine as base
 WORKDIR /base
 COPY package.json yarn.lock .yarnrc.yml ./
 COPY .yarn/releases ./.yarn/releases
 COPY .yarn/plugins ./.yarn/plugins
 RUN yarn install
 
-FROM node:16-alpine as builder
+FROM node:18-alpine as builder
 WORKDIR /build
 ARG delete_file
 COPY . .
@@ -15,7 +15,7 @@ RUN if [[ -z "$delete_file" ]] ; then echo "No files removed" ; else rm ./$delet
 RUN ls ./
 RUN yarn build
 
-FROM node:16-alpine as production
+FROM node:18-alpine as production
 ENV NODE_ENV=production
 
 WORKDIR /app

README.md

@@ -1,4 +1,4 @@
-![Swedish data portal](https://www.dataportal.se/images/svdp-favicon-64.png) 
+![Swedish data portal](https://www.dataportal.se/images/svdp-favicon-64.png)
 # The Swedish data portal web client – [dataportal.se](https://www.dataportal.se)
 Sweden´s national data portal gathers and shares data for re-use to make it easier for users to find and explore it across sectors and domains.The portal only contains information about datasets, i.e. metadata. The actual datasets are retrieved via links for download or requested by the respective organization responsible for their own datasets. The Agency for Digital Government (DIGG) is responsible for Sweden's national data portal.
 
@@ -10,36 +10,44 @@ The Swedish data portal is tightly integrated with the EntryScape product suite
 EntryScape Registry is a solution for managing a registry of data catalogs and related information
 
 ## Requirements
-![node-current](https://img.shields.io/badge/node-16.13.2-green)
-![npm-current](https://img.shields.io/badge/npm-8.1.2-green)
+![node-current](https://img.shields.io/badge/node-18.18.0-green)
+![npm-current](https://img.shields.io/badge/npm-9.8.1-green)
 ![nextjs-current](https://img.shields.io/badge/nextjs-13.0.2-green)
 
 ## Development
-Start by creating an ```.env.local``` file. Use the ```.env.local.example``` as template.
+Start by creating an `.env.local` file. Use the `.env.local.example` as template.
 (Environment variables and tokens in .env.local.example that has placeholder value of "secret" is not available here and needs to be changed to a valid value).
 
 ### Run application in development mode
+
 Starts the application in development mode with hot-code reloading, error reporting, and more. See [Nextjs Development](https://nextjs.org/docs/app/api-reference/next-cli#development) for more information.
 Run:
-```sh 
+
+```sh
 yarn
 yarn dev
+# If you are having issues connecting to your localhost port for apollo:
+export NODE_OPTIONS=--dns-result-order=ipv4first
 ```
+
 Visit [http://localhost:3000](http://localhost:3000) in the browser.
 
 ### Run application in production mode
 Builds the application for production usage. See [Nextjs production build](https://nextjs.org/docs/app/api-reference/next-cli#build) for more info.
 And Start the Next.js production server. See [Nextjs start production](https://nextjs.org/docs/app/api-reference/next-cli#production) for more info.
 Run:
+
 ```sh
 yarn
 yarn build
 yarn start
 ```
+
 Visit [http://localhost:3000](http://localhost:3000) in the browser.
 
 ### Run application with Docker
 Run the following to start the application with docker.
+
 ```sh
 #build image
 docker build . -t dataportal-web
@@ -63,13 +71,12 @@ No cache, Do a request to content backend with startpage query.
 ## Notes
 
 ### Stack
-- [![Nextjs](https://badgen.net/badge/Nextjs/JS%20framework/blue)](https://nextjs.org/) 
+- [![Nextjs](https://badgen.net/badge/Nextjs/JS%20framework/blue)](https://nextjs.org/)
 - [![TypeScript](https://badgen.net/badge/TypeScript/For%20static%20types/blue)](https://www.typescriptlang.org/)
 - [![React](https://badgen.net/badge/React/For%20UI/blue)](https://reactjs.org/)
 - [![Emotion](https://badgen.net/badge/Emotion/For%20styling/blue)](https://emotion.sh)
 - [![Apollo Client](https://badgen.net/badge/Apollo%20Client/For%20federated%20content/blue)](https://www.apollographql.com/docs/react/)
 
-
 ### Content backend
 The Swedish Dataportal consumes news and content via a GraphQL proxy. The content is
 rendered with Apollo GraphQl and React. The proxy is not published on Github.
@@ -83,3 +90,10 @@ The package is published via NMP under [`@digg/design-system`](https://www.npmjs
 
 Display of video is done via [screen9](https://screen9.com/). To be able to display videos an account from screen9 is needed and an API key.
 The key for this frontend application has read access only to DIGG screen9 account.
+
+### Sandbox editera
+To test locally in the sandbox environment, set the sandbox.editera URL on lines 6, 7, and 12 in Settings.Dev.ts
+
+Line 6: ENTRYSCAPE_SPECS_PATH="sandbox.editera.dataportal.se"
+Line 7: ENTRYSCAPE_TERMS_PATH="sandbox.editera.dataportal.se"
+Line 12: ENTRYSCAPE_CONCEPT_STATS_URL="https://sandbox.editera.dataportal.se/stats/entityData.json"

components/EntrystoreProvider/EntrystoreProvider.tsx

@@ -210,7 +210,9 @@ export const EntrystoreProvider: React.FC<EntrystoreProviderProps> = ({
                 ),
               );
               valuePromises.push(
-                getLocalizedValue(graph, "dcterms:description", nextLang, es),
+                getLocalizedValue(graph, "dcterms:description", nextLang, es, {
+                  resourceURI,
+                }),
               );
               if (fetchMore) {
                 valuePromises.push(

components/Navigation/ExternalLink.tsx

@@ -3,7 +3,11 @@ import useTranslation from "next-translate/useTranslation";
 import Link, { LinkProps } from "next/link";
 import { onlyText } from "react-children-utilities";
 
-const ExtLink = styled(Link)<{ isMail?: boolean }>`
+const ExtLink = styled(Link, {
+  // shouldForwardProp allows you to send isMail prop to the
+  // underlying DOM element that the styled component represents (Link).
+  shouldForwardProp: (prop) => prop !== "isMail",
+})<{ isMail?: boolean }>`
   //Sets the size of the icon (1.125rem = 18px)
   --size: 1.125rem;
 

components/Navigation/Menu/Menu-Main.tsx

@@ -22,6 +22,7 @@ const MenuMain: React.FC<SidebarProps> = ({ setOpenSidebar }) => {
   const pathname = usePathname();
   const { t, lang } = useTranslation();
   const isEn = lang === "en";
+  const basePath = `/${pathname?.split("/").splice(1, 1)}`;
 
   useEffect(() => {
     let enMenu;
@@ -40,9 +41,13 @@ const MenuMain: React.FC<SidebarProps> = ({ setOpenSidebar }) => {
       {menues.map((menu: MenuItem, idx: number) => (
         <Link
           key={idx}
-          href={t(`routes|${menu.title}$path`)}
+          href={`/${t(`routes|${menu.title}$path`)}`}
           className={`header-link${
-            pathname === `/${t(`routes|${menu.title}$path`)}` ? " active" : ""
+            (pathname?.startsWith(`/${t(`routes|${menu.title}$path`)}`) &&
+              basePath === `/${t(`routes|${menu.title}$path`)}`) ||
+            pathname === `/${t(`routes|${menu.title}$path`)}`
+              ? " active"
+              : ""
           }`}
           onClick={() => setOpenSidebar(false)}
         >

components/Navigation/Menu/Menu-SideBar.tsx

@@ -24,13 +24,15 @@ interface SidebarProps {
 const SideBar: React.FC<SidebarProps> = ({ openSideBar, setOpenSidebar }) => {
   const [menues, setMenues] = useState<any>([]);
   const pathname = usePathname();
+  const basePath = `/${pathname?.split("/").splice(1, 1)}`;
   const { t, lang } = useTranslation();
   const isEn = lang === "en";
 
   const isActive = (path: string) => {
     if (
       pathname === path ||
-      (pathname === "/" && path === t(`common|lang-path`))
+      (pathname === "/" && path === t(`common|lang-path`)) ||
+      (pathname?.startsWith(path) && basePath === path)
     ) {
       return " active";
     } else return "";
@@ -123,7 +125,7 @@ const SideBar: React.FC<SidebarProps> = ({ openSideBar, setOpenSidebar }) => {
               </details>
             ) : (
               <Link
-                href={t(`routes|${menu.title}$path`)}
+                href={`/${t(`routes|${menu.title}$path`)}`}
                 onClick={() => setOpenSidebar(false)}
               >
                 <div

components/blocks/Article.tsx

@@ -72,7 +72,7 @@ const makeArticles = (
 
 /**
  * Block for rendering newslist-items, in blockformat.
- * @param {Publication_dataportal_Digg_Publications} articles array of news fetched from apollo gateway
+ * @param {PublicationDataFragment} articles array of news fetched from apollo gateway
  */
 export const ArticleBlock: React.FC<ArticleBlockProps> = ({
   articles: unknownArticles,
@@ -85,12 +85,14 @@ export const ArticleBlock: React.FC<ArticleBlockProps> = ({
   const articles = makeArticles(unknownArticles, theme);
 
   function getUrl(article: Article) {
-    const { slug, type } = article;
-    const publicationUrl = `/aktuellt${slug}`;
+    const { slug, type, tags } = article;
+    const publicationUrl = `/${
+      tags && tags[0].value === "Nyhet" ? "nyheter" : "goda-exempel"
+    }${slug}`;
     const containerUrl = `${slug}`;
+
     return type === "publication" ? publicationUrl : containerUrl;
   }
-
   function handleClick(
     e: React.MouseEvent<HTMLLIElement, MouseEvent>,
     url: string,
@@ -149,11 +151,11 @@ export const ArticleBlock: React.FC<ArticleBlockProps> = ({
                   <Link
                     href={url}
                     locale={lang}
-                    className="text-lg font-bold link"
+                    className="font-bold link text-lg"
                   >
                     <Heading
                       level={3}
-                      className="article-heading text-lg font-bold link"
+                      className="article-heading font-bold link text-lg"
                     >
                       {checkLang(title)}
                     </Heading>
@@ -164,7 +166,7 @@ export const ArticleBlock: React.FC<ArticleBlockProps> = ({
           })}
       </ul>
       {showMoreLink && (
-        <Link href={showMoreLink.slug} locale={lang} className="text-md link">
+        <Link href={showMoreLink.slug} locale={lang} className="link text-md">
           {showMoreLink.title || showMoreLink.slug}
         </Link>
       )}