Feat/ois/nextjs

.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true,
+        "displayName": true,
+        "preprocess": false
+      }
+    ]
+  ]
+}

.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*.{ts,tsx,js,jsx,json}]
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_size = 2

.env.production

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_READING_BASE_URI=https://www.oyvindis.com
+NEXTAUTH_URL=https://www.oyvindis.com

.eslintrc.json

@@ -0,0 +1,53 @@
+{
+  "env": {
+    "browser": true,
+    "es2020": true,
+    "jest": true
+  },
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript"
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "prettier"
+  ],
+  "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "semi": true,
+        "singleQuote": true,
+        "jsxSingleQuote": true,
+        "trailingComma": "none",
+        "arrowParens": "avoid",
+        "endOfLine": "auto"
+      }
+    ],
+    "import/no-anonymous-default-export": [2, {"allowObject": true}],
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "ignoreRestSiblings": true
+      }
+    ]
+  }
+}

.github/workflows/deploy.yaml

@@ -0,0 +1,66 @@
+name: Deploy
+
+on:
+  pull_request:
+    types: [ready_for_review, opened, reopened, synchronize]
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    name: Build and deploy to environment when pull request is created
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.draft == false
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_HUB_USERNAME  }}
+          password: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN  }}
+
+      - name: Get Short SHA
+        id: vars
+        run: |
+          echo ::set-output name=sha_short::$(git rev-parse --short=7 ${{ github.sha }})
+
+      - name: Build and push
+        id: docker_build
+        uses: docker/build-push-action@v2
+        with:
+          context: ./
+          file: ./Dockerfile
+          push: true
+          tags: oyvindis/climate-gui:${{ steps.vars.outputs.sha_short }}
+          labels: ${{ steps.meta.outputs.labels }}
+          build-args: |
+            GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set K8s context
+        id: setcontext
+        uses: azure/k8s-set-context@v1
+        with:
+          method: kubeconfig
+          kubeconfig: ${{ secrets.KUBE_CONFIG }}
+
+      - uses: azure/k8s-bake@v2
+        with:
+          renderEngine: "helm"
+          helmChart: "./helm-sources/"
+          helm-version: "latest"
+        id: bake
+
+      - name: Deploy to Kubernetes cluster
+        uses: Azure/[email protected]
+        with:
+          manifests: ${{ steps.bake.outputs.manifestsBundle }}
+          images: oyvindis/climate-gui:${{ steps.vars.outputs.sha_short }}
+          kubectl-version: 'latest'
+          namespace: 'dev'

.gitignore

@@ -1,8 +1,12 @@
 # compilation targets
 node_modules
+.next
 
 # IDE files
 *.iml
 .DS_Store
 .idea
-.project
+.project
+
+.env.development
+.okta.env

Dockerfile

@@ -0,0 +1,56 @@
+# Install dependencies only when needed
+FROM node:16-alpine AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+# COPY package.json package-lock.json ./
+# RUN yarn install --frozen-lockfile
+
+# If using npm with a `package-lock.json` comment out above and use below instead
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# Rebuild the source code only when needed
+FROM node:16-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+# RUN yarn build
+
+# If using npm comment out above and use below instead
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM node:16-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# You only need to copy next.config.js if you are NOT using the default configuration
+# COPY --from=builder /app/next.config.js ./
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package.json ./package.json
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD ["node", "server.js"]

README.md

@@ -1,2 +1,28 @@
-# climate-gui
-NextJS frontend
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

components/container/index.tsx

@@ -0,0 +1,11 @@
+import React, { memo, FC, PropsWithChildren } from 'react';
+
+import SC from './styled';
+
+interface Props {}
+
+const Container: FC<PropsWithChildren<Props>> = ({ children }) => (
+  <SC.Container>{children}</SC.Container>
+);
+
+export default memo(Container);

components/container/styled.ts

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const onDesktopView = '@media (min-width: 900px)';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  padding: 0 calc(12px + (32 - 12) * ((100vw - 320px) / (900 - 320)));
+  width: 1200px;
+  z-index: 10;
+
+  ${onDesktopView} {
+    & {
+      padding: 0;
+    }
+  }
+`;
+
+export default { Container };

components/pages/climate/index.tsx

@@ -0,0 +1,29 @@
+import React, { memo, FC } from 'react';
+import Link from 'next/link';
+
+import Container from '../../container';
+import SC from './styled';
+import { Location } from '../../../types';
+
+interface Props {
+  locations: Location[];
+}
+
+const ClimatePageWrapper: FC<Props> = ({ locations }) => (
+  <Container>
+    <SC.ClimatePage>
+      <ul>
+        {locations?.length > 0 &&
+          locations.map(({ id, name }) => (
+            <li key={id}>
+              <Link href={`/climate/location/${id}`}>
+                {name ?? 'Lokasjon mangler navn'}
+              </Link>
+            </li>
+          ))}
+      </ul>
+    </SC.ClimatePage>
+  </Container>
+);
+
+export default memo(ClimatePageWrapper);

components/pages/climate/styled.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const ClimatePage = styled.div`
+  display: flex;
+`;
+
+export default { ClimatePage };

components/pages/main/index.tsx

@@ -0,0 +1,23 @@
+import React, { memo, FC } from 'react';
+import Image from 'next/image';
+
+import Nature from '../../../public/nature.jpg';
+
+import SC from './styled';
+
+interface Props {}
+
+const MainPageWrapper: FC<Props> = () => (
+  <SC.MainPage>
+    <Image
+      alt='Nature'
+      src={Nature}
+      layout='fill'
+      objectFit='cover'
+      quality={70}
+    />
+    <SC.Title>www.oyvindis.com</SC.Title>
+  </SC.MainPage>
+);
+
+export default memo(MainPageWrapper);

components/pages/main/styled.ts

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+import { Colour, theme } from '../../../theme';
+
+const onDesktopView = '@media (min-width: 900px)';
+
+const MainPage = styled.article`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100vh;
+`;
+
+const Title = styled.h1`
+  color: ${theme.colour(Colour.NEUTRAL, 'N0')};
+  font-size: ${theme.fontSize('FS16')};
+  z-index: 1;
+
+  ${onDesktopView} {
+    font-size: ${theme.fontSize('FS20')};
+  }
+`;
+
+export default { MainPage, Title };