Skip to content

Kodeworks/kodeworks.no-poc

BranchesTags

Repository files navigation

Getting started

yarn to install dependencies
yarn dev to start development

Recommended VSCode setup

  • Rename .vscode/recommended.settings.json to .vscode/settings.json to enable recommended VSCode settings

VSCode Extensions

  • Prettier
    • Automated code formatting
  • Tailwind CSS IntelliSense
    • Improves the coding experience when using TailwindCSS with features such as autocomplete, CSS Linting and hover preview.
  • Headwind
    • An opinionated class sorter for TailwindCSS, ensures consistent ordering of classes.

CI/CD

Continous Integration

💡 Test and build app

Trigger: on all Pull Requests to the main branch
Definition: ./github/workflows/kodeworks-CI.yml

paths-filter

Used for change-detection, so that steps unrelated to changed files don't have to be executed.

Test Report

💡 Summary of tests and code annotations where code failed

  • Test report available in Github under Continous Integration-action under Test report-step.
  • Code annotation related to failing tests is available in the files changed-tab in the Pull Request.

Trigger: Continous Integration job completed
Definition: ./github/workflows/test-report.yml
Documentation: Test Reporter Github repo

Continous Deployment

💡 Build, export and deploy app

Trigger: when code is pushed to the main branch, e.g. after merging in a branch
Definition: ./github/workflows/kodeworks-CD.yml

Running Github Actions locally

The act library makes local testing of Github Actions relatively straight forward, providing faster feedback so you don't have to push code to Github to test changes in a workflow.

  • Install act (and Docker) locally on your machine
  • Run act -j <name-of-workflow-job-you-want-to-test> e.g. act -j test
  • If you don't want to use the large image requiring +20GB:
    • Select the Medium size image of act.
    • The job will fail because yarn is not part of the medium image.
    • Add - run: npm i -g yarn to the start of the job to use yarn in the workflow
  • Comment out any cache (#cache: 'yarn') since the Cache Service is not available in the Docker container.
  • Do your changes, and run act -j <name-of-workflow-job-you-want-to-test> to re-run the job locally
  • Remember to uncomment any cache and remove - run: npm i -g yarn afterwards!

Hosting

The site is hosted at https://kodeworks.github.io/kodeworks.no-poc

Subpath

  • The use of a subpath (/kodeworks.no-poc) requires a URL prefix for navigation and resources.
    • Resources can use utils/urlPrefix.js
    • Navigation is handled by NextJS using basePath in next.config.js
    • The environment variable NEXT_PUBLIC_BASE_PATH used for the subpath is defined in ./github/workflows/kodeworks-CD.yml

NextJS limitations

Since we host a static HTML app without a Node.js server, some NextJS functionality relying on a Node.js server is not available.

Most notably:

Mental model of repository

  • Pages are React components defined in the /pages-folder
  • Routing is dictated by the structure of components/folders in the /pages-folder 
      Folder structure:               URL:
  pages/
  ├── index.html                  /
  ├── folk/                       /folk -> returns 404 since it is a folder
  │   ├── ola-nordmann.js         /folk/ola-nordmann
  │   └── eirik.js                /folk/eirik
  └── prosjekter.js               /prosjekter
      └──  [prosjekt].js          /prosjekter/prosjekt -> see dynamic routes below 👇
  • components/ are structured according to the atomic design methodology
  • Storybook-stories are located next to the component
  • data/ contains content for people, projects and tech used in components
  • hooks/ contains custom React hooks
  • utils/ contains custom functions for small/repetitive operations
  • public/ contains static public resources
  • styles/ contains *.css.

Config files

Tech stack

Dependencies

@tailwindcss-aspect-ratio

  • Official plugin to TailwindCSS used to set the aspect ratio of images at different screen sizes.

use-scroll-position

  • Used in hooks/useScrollBasedOpacity.js to change opacity based on scroll position.

postcss-font-magician

  • Used to load custom fonts in postcss.config.js using a urlPrefix-variable to support Github Pages without a custom domain.

NextJS

💡 A React Framework providing an awesome developer experience.

NextJS enables us to export our React App to static HTML with some limitations, which we serve with Github Pages.

TailwindCSS

💡 A utility-first CSS framework that lets us provide styling without leaving the HTML/JSX.

  • Utility-first means that each TailwindCSS class does one thing and one thing only.
  • Uses PurgeCSS to remove all unused CSS.
  • Configured in tailwind.config.js
  • Easy to customize existing utilities in tailwind.config.js

PostCSS

💡 A tool for transforming CSS with JavaScript.

Storybook

💡 Helps us document components for reuse and automatically visually test our components to prevent bugs.

Configuration

  • The main configuration file is .storybook/main.js
  • .storybook/preview.js is used to add CSS generated by TailwindCSS to all components

Storybook static

  • Build static version of Storybook with yarn build-storybook.
  • Serve static version of storybook with npx http-server storybook-static

Storybook CI

  • The .github/workflows/kodeworks-CI.yml-workflow tries to build a static version of Storybook if the change detection job detects any changes defined to be related to Storybook.

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

4 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages