feat: Migrated to Next.js (#8)

* feat: nextjs migration

* docs: added documentation links to README.md

* fix: fix layout when opening modals, keyboard navigation and worked on footer

* chore: added custom brand icons and documentation

* feat: added sponsors to the footer

* feat: finished footer

* chore: added missing translation

* docs: added commit messages docs

* fix: added sitemap + fixed accessibility label for logolink

* chore: updated sitemap config

* feat: migrated from node to bun + created a docker image for the app

* build: fix docker image

* docs: added more info to README.md and added some margin to footer grid items

* ci: added automatic code formating and linting

* fix: fixed lint-staged

* ci: added pre-commit hook

* chore: formated all files from pre pre-commit formating

* chore: updated packagemanager in package.json

* docs: added some docs on react code quality for consistancy

* chore: updated lint workflow to use bun and also check formating

* chore: removed types for node

* chore: events -> hendelser

* Revert "chore: removed types for node"

This reverts commit 5ccb920.

* chore: renamed (layout) to (dashboard) to make it more understandable

* chore: update channel formating for footer

.dockerignore

@@ -0,0 +1,38 @@
+# dependencies
+/node_modules
+
+# next.js
+/.next/
+/out/
+next-env.d.ts
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# local env files
+.env
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# site map
+public/sitemap.xml
+public/robots.txt
+
+# prettier
+prettier.config.js
+
+# docker
+Dockerfile*
+.dockerignore
+
+# git
+.git
+.gitignore
+
+# docs
+README.md

.env.example

@@ -0,0 +1,14 @@
+# Since the ".env" file is gitignored, you can use the ".env.example" file to
+# build a new ".env" file when you clone the repo. Keep this file up-to-date
+# when you add new variables to `.env`.
+
+# This file will be committed to version control, so make sure not to have any
+# secrets in it. If you are cloning this repo, create a copy of this file named
+# ".env" and populate it with your secrets.
+
+# When adding additional environment variables, the schema in "/src/env.js"
+# should be updated accordingly.
+
+# Example:
+# SERVERVAR="foo"
+# NEXT_PUBLIC_CLIENTVAR="bar"

.eslintrc.cjs

@@ -1,18 +1,37 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
+/** @type {import("eslint").Linter.Config} */
+const config = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: true,
+  },
+  plugins: ['@typescript-eslint'],
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    'next/core-web-vitals',
+    'plugin:@typescript-eslint/recommended-type-checked',
+    'plugin:@typescript-eslint/stylistic-type-checked',
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
   rules: {
-    'react-refresh/only-export-components': [
+    // These opinionated rules are enabled in stylistic-type-checked above.
+    // Feel free to reconfigure them to your own preference.
+    '@typescript-eslint/array-type': 'off',
+    '@typescript-eslint/consistent-type-definitions': 'off',
+
+    '@typescript-eslint/consistent-type-imports': [
       'warn',
-      { allowConstantExport: true },
+      {
+        prefer: 'type-imports',
+        fixStyle: 'inline-type-imports',
+      },
+    ],
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/require-await': 'off',
+    '@typescript-eslint/no-misused-promises': [
+      'error',
+      {
+        checksVoidReturn: { attributes: false },
+      },
     ],
   },
-}
+};
+
+module.exports = config;

.github/workflows/lint-and-format.yml

@@ -0,0 +1,14 @@
+name: Lint and Format
+
+on: push
+jobs:
+  lint-and-format:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: 1.0.24
+      - run: bun install
+      - run: bun lint
+      - run: bun format

.gitignore

@@ -1,24 +1,26 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-node_modules
-dist
-dist-ssr
-*.local
+# dependencies
+/node_modules
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
+# next.js
+/.next/
+/out/
+next-env.d.ts
+
+# production
+/build
+
+# misc
 .DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+
+# local env files
+.env
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# site map
+public/sitemap.xml
+public/robots.txt

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+bunx lint-staged

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss",
+    "lokalise.i18n-ally",
+    "vivaxy.vscode-conventional-commits"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ],
+  "i18n-ally.localesPaths": ["messages"],
+  "i18n-ally.keystyle": "nested",
+  "codeQL.githubDatabase.download": "never"
+}

Dockerfile

@@ -0,0 +1,16 @@
+FROM imbios/bun-node:20-alpine
+
+WORKDIR /app
+
+COPY package.json bun.lockb ./
+
+RUN bun install --frozen-lockfile --production
+
+COPY . .
+
+ENV NODE_ENV=production
+RUN bun run build
+
+EXPOSE 3000
+
+ENTRYPOINT [ "bun", "run", "start" ]

README.md

@@ -1 +1,46 @@
-# Hackerspace NTNU website frontend
+## Getting Started
+
+Here is a list of documentation to help you get started:
+
+- [Next.js](https://nextjs.org/docs) - Framework for routing and server-side rendering
+- [React](https://react.dev/reference/react) - Library for building user interfaces
+- [Tailwind CSS](https://tailwindcss.com/docs) - Styling library
+- [Shadcn/ui](https://ui.shadcn.com/docs) - Reusable UI components
+- [Lucide](https://lucide.dev/icons/) - Icons library
+- [Next-intl](https://next-intl-docs.vercel.app/) - Internationalization library
+
+## Icons
+
+- When using custom icons that are not provided by lucide, make sure to add them as SVGs to the `components/assets/icons` folder. This improves performance since the icons are handled as vectors and not as images.
+
+## Quirks to keep in mind
+
+- When you want to link to a new internal page use the `<Link>` component from `@/lib/navigation` instead of the normal anchortag `<a>`. This will ensure that the page is loaded with the correct locale. If you want to link to external resources or other media, use the built-in `<Link>` component from Next.js. Remember to add `prefetch={false}` to the `<Link>` component if the page is not visited often.
+- Remember to surround Links with the `Button` ui component. This will provide some basic styling and accessibility features for keyboard navigation even if it is not supposed to look like a button.
+
+## Development setup
+
+Make sure you have Bun installed on your machine. If you don't have it, you can download it [here](https://bun.sh/docs/installation).
+
+First, install dependencies:
+
+```bash
+bun install
+```
+
+Then, run the development server:
+
+```bash
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Commit messages
+
+We are using [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for our commit messages. This is to ensure that we have a consistent way of writing commit messages and to make it easier to generate changelogs. Try to follow the guidelines as closely as possible.
+
+## Code quality
+
+- In react we want to use functions instead of const variables with arrow function syntax to keep the code as consistant as possible. An exception is when using the forwardRef hook, then we need to use the arrow function syntax.
+- Only use default export for pages or layouts etc. For components we want to use named exports. This is to make it easier to find the components in the codebase.

global.d.ts

@@ -0,0 +1,5 @@
+// Use type safe message keys with `next-intl`
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+type Messages = typeof import('./messages/en.json');
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+declare interface IntlMessages extends Messages {}

messages/en.json

@@ -0,0 +1,35 @@
+{
+  "meta": {
+    "description": "Hackerspace NTNU, a student-led project open to all students, offers access to new technology like 3D printers and VR equipment. Our members provide varied expertise to help with your projects, from making an LED light blink to creating a 3D model. Visit our workshop or join our Slack channel for assistance or a friendly chat."
+  },
+  "layout": {
+    "hackerspaceHome": "Hackerspace homepage",
+    "news": "News",
+    "events": "Events",
+    "about": "About",
+    "changeLocale": "Change language",
+    "toggleTheme": "Toggle theme",
+    "light": "Light",
+    "dark": "Dark",
+    "system": "System",
+    "profile": "Profile",
+    "signIn": "Sign in",
+    "links": "Links",
+    "utilities": "Utilities",
+    "haveYouFoundA": "Have you found a",
+    "utilitiesDescription": "Feel free to send a <MailLink></MailLink> to DevOps or use the <code>#dev-public</code> channel on <SlackLink>Slack</SlackLink>! You can also report errors or suggest improvements on <GithubLink>GitHub</GithubLink>.",
+    "openingHours": "Opening hours",
+    "allWeekdays": "Mon-Fri",
+    "socialMedia": "Social media",
+    "sendAnEmail": "Send an email",
+    "visitSlack": "Visit Slack",
+    "visitFacebook": "Visit Facebook",
+    "visitGithub": "Visit Github",
+    "visitInstagram": "Visit our Instagram",
+    "NTNUIDI": "NTNU Department of Computer Science",
+    "NTNUIDIURL": "https://www.ntnu.edu/idi",
+    "NTNUKiD": "The working life network KID",
+    "copyright": "Copyright",
+    "allRightsReserved": "All rights reserved"
+  }
+}

messages/no.json

@@ -0,0 +1,35 @@
+{
+  "meta": {
+    "description": "Hackerspace NTNU, et studentledet prosjekt åpent for alle studenter, tilbyr tilgang til ny teknologi som 3D-printere og VR-utstyr. Våre medlemmer gir variert ekspertise for å hjelpe med prosjektene dine, fra å få en LED-lys til å blinke til å lage en 3D-modell. Besøk vårt verksted eller bli med i vår Slack-kanal for assistanse eller en vennlig prat."
+  },
+  "layout": {
+    "hackerspaceHome": "Hackerspace hjemmeside",
+    "news": "Nyheter",
+    "events": "Hendelser",
+    "about": "Om oss",
+    "changeLocale": "Bytt språk",
+    "toggleTheme": "Bytt tema",
+    "light": "Lys",
+    "dark": "Mørk",
+    "system": "System",
+    "profile": "Profil",
+    "signIn": "Logg inn",
+    "links": "Lenker",
+    "utilities": "Verktøy",
+    "haveYouFoundA": "Har du funnet en",
+    "utilitiesDescription": "Send gjerne en <MailLink></MailLink> til DevOps eller bruk <code>#dev-public</code> kanalen på <SlackLink>Slack</SlackLink>! Du kan også rapportere feil eller gi oss forslag til forbedringer på <GithubLink>GitHub</GithubLink>.",
+    "openingHours": "Åpningstider",
+    "allWeekdays": "Mandag - Fredag",
+    "socialMedia": "Sosiale medier",
+    "sendAnEmail": "Send en e-post",
+    "visitSlack": "Besøk Slack",
+    "visitFacebook": "Besøk Facebook",
+    "visitGithub": "Besøk Github",
+    "visitInstagram": "Besøk Instagram",
+    "NTNUIDI": "NTNU Institutt for datateknologi og informatikk",
+    "NTNUIDIURL": "https://www.ntnu.no/idi",
+    "NTNUKiD": "Arbeidslivsnettverket KID",
+    "copyright": "Opphavsrett",
+    "allRightsReserved": "Alle rettigheter reservert"
+  }
+}

next-sitemap.config.js

@@ -0,0 +1,8 @@
+/** @type {import('next-sitemap').IConfig} */
+const config = {
+  siteUrl: process.env.SITE_URL ?? 'https://localhost:3000',
+  generateRobotsTxt: true,
+  generateIndexSitemap: false,
+};
+
+export default config;

next.config.js

@@ -0,0 +1,13 @@
+import nextIntl from 'next-intl/plugin';
+
+/**
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
+ * for Docker builds.
+ */
+await import('./src/env.js');
+const withNextIntl = nextIntl('./src/i18n.ts');
+
+/** @type {import("next").NextConfig} */
+const config = {};
+
+export default withNextIntl(config);