Merge pull request #42 from diggsweden/4.4.8-beta

4.4.8 beta

.env.local.example

@@ -0,0 +1,27 @@
+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
+
+REVALIDATE_INTERVAL=5
+HTTP_PROXY=http://proxy.digg.se:8080
+HTTP_PROXY_USER=secretuser
+HTTP_PROXY_PASS=secretpass
+
+# 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).
+APOLLO_URL=https://graphql.digg.se/
+REACT_APP_APOLLO_URL=https://graphql.digg.se/
+IMAGE_DOMAIN=graphql.digg.se
+REACT_APP_MEDIA_BASE_URL=https://graphql.digg.se/assets/dataportal

.gitignore

@@ -25,6 +25,7 @@ yarn-error.log*
 # misc
 .DS_Store
 *.pem
+.idea
 
 # debug
 npm-debug.log*

README.md

@@ -1,91 +1,56 @@
-# Sveriges dataportal webbklient
+![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.
 
-![node-current](https://img.shields.io/badge/node-16.13.2-green)
-![npm-current](https://img.shields.io/badge/npm-8.1.2-green)
-![nextjs-current](https://img.shields.io/badge/nextjs-13.0.2-green)
-
-Här finns källkoden för dataportalens webbklient
-[https://www.dataportal.se](https://www.dataportal.se)
-
-## EntryScape
-
-Den svenska dataportalen är starkt integrerad med produktsviten EntryScape från MetaSolutions AB, [https://entryscape.com/sv/](https://entryscape.com/sv/).
-EntryScape Registry är en lösning för att hantera ett register över datakataloger och relaterad information.
-
-## Content backend
-
-Utvecklarportalen hämtar innehåll via Apollo Gateway. Sätts via env.
 
-## Environment
+## Entryscape
+[<img alt="Entryscape logotype" src="https://entryscape.com/wp-content/uploads/2023/01/Entryscape-by-Metasolutions-w385px-Retina-2.png" width="191" height="42">](https://entryscape.com/en)
 
-Skapa en .env.local
+The Swedish data portal is tightly integrated with the EntryScape product suite from MetaSolutions AB.
+EntryScape Registry is a solution for managing a registry of data catalogs and related information
 
-```sh
-LOGSTASH_MODE=tcp
-LOGSTASH_HOST=localhost
-LOGSTASH_PORT=5000
-LOGGING_LEVELS=warn,error,info
-LOGFILE_PATH=/app/dataportal.log
-PORT=3000
-HOST=http://localhost:$PORT
-APOLLO_URL=http://localhost:1301 #server apollo client
-REACT_APP_APOLLO_URL=http://localhost:1301 #browser apollo client
-IMAGE_DOMAIN=localhost
-REACT_APP_MEDIA_BASE_URL=http://localhost:1337
-REACT_APP_RUNTIME_ENV=dev
-HTTP_PROXY=http://proxy.digg.se:8080
-HTTP_PROXY_USER=secretuser
-HTTP_PROXY_PASS=secretpass
-REACT_APP_SCREEN9_API_TOKEN=secret
-
-HEALTHCHECK_SECRET=123
-```
+## 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)
+![nextjs-current](https://img.shields.io/badge/nextjs-13.0.2-green)
 
-## Utveckling
+## Development
+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).
 
-```sh
+### 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 
 yarn
 yarn dev
 ```
+Visit [http://localhost:3000](http://localhost:3000) in the browser.
 
-Gå till [http://localhost:3000](http://localhost:3000) i din webbläsare.
-
-## Lokal server
-
-För att testa applikationen kör följande:
-
+### 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.
 
-Besök [http://localhost:3000](http://localhost:3000) i din webbläsare.
-
-## Produktionsbygge
-
-Bygg för produktion genom att köra följande:
-
-```sh
-yarn build
-```
-
-Detta kommer generera applikationen som statiska filer under .next-mappen.
-
-## Docker
-
+### Run application with Docker
+Run the following to start the application with docker.
 ```sh
-#bygg image
+#build image
 docker build . -t dataportal-web
 
-#skapa container
+# Create container
 docker run -p 3000:3000 -e PORT=3000 -e HOST=http://localhost:3000 -e REACT_APP_APOLLO_URL=http://localhost:1400 -e REACT_APP_RUNTIME_ENV=prod -e IMAGE_DOMAIN=host.docker.internal -e REACT_APP_MEDIA_BASE_URL="http://host.docker.internal:1400/assets/dataportal" --add-host=host.docker.internal:host-gateway dataportal-web
 ```
 
-## Health check
-
-NextJs svarar på [http://localhost:1300/api/healthcheck?secret=[HEALTHCHECK_SECRET från env]](http://localhost:1300/api/healthcheck?secret=)
-Cacheas inte, gör en request till contentbackend med startsidans fråga.
+### Health check
+NextJs answers on [http://localhost:1300/api/healthcheck?secret=[HEALTHCHECK_SECRET from env]](http://localhost:1300/api/healthcheck?secret=)
+No cache, Do a request to content backend with startpage query.
 
 ```sh
 {"status":"fail"}
@@ -95,19 +60,26 @@ Cacheas inte, gör en request till contentbackend med startsidans fråga.
 {"status":"pass"}
 ```
 
-## Stack
+## Notes
+
+### Stack
+- [![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/)
 
-- [Nextjs](https://nextjs.org/) JS framework
-- [TypeScript](https://www.typescriptlang.org/) typad JS
-- [React](https://reactjs.org/) för UI
-- [Emotion](https://emotion.sh) för styling
-- [Apollo Client](https://www.apollographql.com/docs/react/) för datahämtning
 
-## Noteringar
+### 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.
 
-### Komponentbibliotek
-Projektet har ett beroende till [Diggs komponentbibliotek](https://github.com/DIGGSweden/react-component-library).
-Detta paket finns publicerat på NPM under [`@digg/design-system`](https://www.npmjs.com/package/@digg/design-system)
+### Component library
+The project has a dependency to [Digg component library](https://github.com/DIGGSweden/react-component-library).
+The package is published via NMP under [`@digg/design-system`](https://www.npmjs.com/package/@digg/design-system)
 
 ### Videos
-Visning av videofilmer görs via videospelaren [screen9](https://screen9.com/). För att kunna visa filmer krävs ett konto hos screen9 och en API-nyckel.
+[<img alt="Screen9 logotype" src="https://screen9.com/wp-content/uploads/Screen9-logo-Black-CMYK.svg" width="150" height="30">](https://screen9.com/)
+
+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.

README.swe.md

@@ -0,0 +1,81 @@
+![Sveriges dataportal](https://www.dataportal.se/images/svdp-favicon-64.png)
+# Sveriges dataportal webbklient – [dataportal.se](https://www.dataportal.se)
+På Sveriges dataportal synliggörs data från en rad olika typer av organisationer och sektorer. Här finns enbart information om datamängder, dvs. metadata. Data hämtas i sin tur via länkar för nedladdning eller efterfrågas hos respektive organisation som ansvarar för sina egna datamängder.
+## Versionskrav
+![node-current](https://img.shields.io/badge/node-16.13.2-green)
+![npm-current](https://img.shields.io/badge/npm-8.1.2-green)
+![nextjs-current](https://img.shields.io/badge/nextjs-13.0.2-green)
+
+## EntryScape
+[<img alt="Entryscape logotype" src="https://entryscape.com/wp-content/uploads/2023/01/Entryscape-by-Metasolutions-w385px-Retina-2.png" width="191" height="42">](https://entryscape.com/sv)
+
+Den svenska dataportalen är starkt integrerad med produktsviten EntryScape från MetaSolutions AB, [https://entryscape.com/sv/](https://entryscape.com/sv/).
+EntryScape Registry är en lösning för att hantera ett register över datakataloger och relaterad information.
+
+## Utveckling.
+Börja med att skapa en ```.env.local``` fil. Använd ```.env.local.example``` som mall.
+(Env-variabler och tokens i .env.local.example som har en värdet "secret" är inte tillgängliga här och behöver bytas ut mot ett giltigt värde).
+
+### Kör applikationen i utvecklingsläge.
+Starta applikationen i utvecklingsläge med "hot-code"-omladdning, felrapportering m.m. Se: [Nextjs Development](https://nextjs.org/docs/app/api-reference/next-cli#development) för mer information.
+Kör:
+```sh
+yarn
+yarn dev
+```
+Besök [http://localhost:3000](http://localhost:3000) i din webbläsare.
+
+### Kör applikationen i productionsläge.
+Bygger applikationen i produktionsläge. Se [Nextjs production build](https://nextjs.org/docs/app/api-reference/next-cli#build) för mer info.
+Och startar Next.js produktionsservern. Se [Nextjs start production](https://nextjs.org/docs/app/api-reference/next-cli#production) för mer info.
+Kör:
+```sh
+yarn
+yarn build
+yarn start
+```
+Besök [http://localhost:3000](http://localhost:3000) i din webbläsare.
+
+### Starta applikationen med Docker.
+
+```sh
+#build image
+docker build . -t dataportal-web
+
+# Create container
+docker run -p 3000:3000 -e PORT=3000 -e HOST=http://localhost:3000 -e REACT_APP_APOLLO_URL=http://localhost:1400 -e REACT_APP_RUNTIME_ENV=prod -e IMAGE_DOMAIN=host.docker.internal -e REACT_APP_MEDIA_BASE_URL="http://host.docker.internal:1400/assets/dataportal" --add-host=host.docker.internal:host-gateway dataportal-web
+```
+
+### Health check.
+
+NextJs svarar på [http://localhost:1300/api/healthcheck?secret=[HEALTHCHECK_SECRET från env]](http://localhost:1300/api/healthcheck?secret=)
+Cacheas inte, gör en request till contentbackend med startsidans fråga.
+
+```sh
+{"status":"fail"}
+```
+
+```sh
+{"status":"pass"}
+```
+
+## Notes
+
+### Stack
+- [![Nextjs](https://badgen.net/badge/Nextjs/JS%20framework/blue)](https://nextjs.org/)
+- [![TypeScript](https://badgen.net/badge/TypeScript/Typad%20Js/blue)](https://www.typescriptlang.org/)
+- [![React](https://badgen.net/badge/React/För%20UI/blue)](https://reactjs.org/)
+- [![Emotion](https://badgen.net/badge/Emotion/För%20styling/blue)](https://emotion.sh)
+- [![Apollo Client](https://badgen.net/badge/Apollo%20Client/För%20datahämtning/blue)](https://www.apollographql.com/docs/react/)
+
+### Innehålls-backend.
+Utvecklarportalen hämtar innehåll via Apollo Gateway. Sätts via env.
+
+### Komponentbibliotek
+Projektet har ett beroende till [Diggs komponentbibliotek](https://github.com/DIGGSweden/react-component-library).
+Detta paket finns publicerat på NPM under [`@digg/design-system`](https://www.npmjs.com/package/@digg/design-system)
+
+### Videos
+[<img alt="Screen9 logotype" src="https://screen9.com/wp-content/uploads/Screen9-logo-Black-CMYK.svg" width="150" height="30">](https://screen9.com/)
+
+Visning av videofilmer görs via videospelaren [screen9](https://screen9.com/). För att kunna visa filmer krävs ett konto hos screen9 och en API-nyckel.

components/EntrystoreProvider/EntrystoreProvider.tsx

@@ -70,7 +70,7 @@ export const EntrystoreProvider: React.FC<EntrystoreProviderProps> = ({
         '#scriptsPlaceholder',
         ` 
         <script 
-         src="https://dataportal.azureedge.net/cdn/entrystore_2021-03-18.js" 
+         src="/entrystore_2021-03-18.js"
          crossorigin="anonymous"></script>        
         `,
         {

components/Search/SearchProvider.tsx

@@ -129,7 +129,7 @@ class SearchProvider extends React.Component<
         "#scriptsPlaceholder",
         ` 
         <script
-         src="https://dataportal.azureedge.net/cdn/entrystore_2021-03-18.js" 
+         src="/entrystore_2021-03-18.js"
          crossorigin="anonymous"></script>
         `,
         {

components/pages/SearchPage.tsx

@@ -40,7 +40,7 @@ export const SearchPage: React.FC<SearchProps> = () => {
   const [showFilter, setShowFilter] = useState(false);
   const [showTip, setShowTip] = useState(false);
   const postscribeStatus = useScript(
-    "https://dataportal.azureedge.net/cdn/postscribe.min.js",
+    "/postscribe.min.js",
     "sha384-1nPAWyZS0cvGLWSoWOrkTZAy8Xq8g6llEe985qo5NRPAeDi+F9h9U+0R8v56XWCM",
     "anonymous"
   );

components/pages/SearchSpecificationsPage.tsx

@@ -29,7 +29,7 @@ export const SearchSpecificationsPage: React.FC<SearchProps> = () => {
   const [query, setQuery] = useState("");
   const [showFilter, setShowFilter] = useState(false);
   const postscribeStatus = useScript(
-    "https://dataportal.azureedge.net/cdn/postscribe.min.js",
+    "/postscribe.min.js",
     "sha384-1nPAWyZS0cvGLWSoWOrkTZAy8Xq8g6llEe985qo5NRPAeDi+F9h9U+0R8v56XWCM",
     "anonymous"
   );