Migrate to Nuxt.js

.dockerignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

.gitattributes

@@ -0,0 +1,2 @@
+# Ignore diffs for package-lock.json
+package-lock.json diff=none

.github/workflows/super-linter.yml

@@ -31,10 +31,14 @@ jobs:
         env:
           # To report GitHub Actions status checks
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          VALIDATE_ALL_CODEBASE: false
+          VALIDATE_ALL_CODEBASE: true
           VALIDATE_CSS_PRETTIER: false
           VALIDATE_HTML_PRETTIER: false
           VALIDATE_JAVASCRIPT_STANDARD: false
           VALIDATE_JAVASCRIPT_PRETTIER: false
           VALIDATE_JSON_PRETTIER: false
           VALIDATE_YAML_PRETTIER: false
+          VALIDATE_JSON: false
+          VALIDATE_TYPESCRIPT_PRETTIER: false
+          VALIDATE_TYPESCRIPT_STANDARD: false
+          VALIDATE_VUE_PRETTIER: false

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

Dockerfile

@@ -1,20 +1,35 @@
-# Use the latest nginx as the base image
-FROM nginx:1.27.3
+# Stage 1: Build the Nuxt.js app
+FROM node:18.20-slim AS build-stage
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the application for static hosting
+RUN npm run generate
+
+# Stage 2: Serve the static files using Nginx
+FROM nginx:1.24-alpine-slim
 
 # Set environment variables
 ENV TEMP_FRONTEND_DIR=/temp-frontend-files
 
-# Set the shell for safer execution
-SHELL ["/bin/bash", "-o", "pipefail", "-c"]
-
 # Create a non-root user and group
-RUN groupadd -r frontenduser && useradd -r -g frontenduser frontenduser
+RUN addgroup -S frontenduser && adduser -S -G frontenduser frontenduser
 
 # Create a directory for the PID file and assign ownership to frontenduser
 RUN mkdir -p /var/run/nginx && chown -R frontenduser:frontenduser /var/run/nginx
 
-# Copy all files to the container
-COPY . /usr/share/nginx/html
+# Copy the generated static files from the build stage
+COPY --from=build-stage /app/dist /usr/share/nginx/html
 
 # Copy nginx.conf to a writable location and modify the PID path
 RUN cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.custom && \

README.md

@@ -1,12 +1,50 @@
-# Nginx HTTP web server
+# Nginx HTTP Web Server
 
-This repository contains the frontend for smartcooking.
+This repository contains the frontend for SmartCooking.
 
 ## Getting Started
 
-To set up the frontend locally, you'll need Docker installed. Follow the steps below to build and run the database in a container.
+### Nuxt Minimal Development Server
 
-### Setup Steps
+- To develop the frontend locally, you'll need Nuxt.js installed. Follow the steps below to develop the frontend with Nuxt.js.
+
+1. Install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+2. Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+### Docker image and Container and hosting with Nginx
+
+To set up the frontend locally, you'll need Docker installed. Follow the steps below to build and run the frontend in a container.
 
 1. **Build the Docker Image**:
 
@@ -20,5 +58,5 @@ To set up the frontend locally, you'll need Docker installed. Follow the steps b
    docker run -d --name Smart-Cooking_Frontend -p 8080:80 smartcooking-nginx
    ```
 
-3. **Access the site**
-   Open your brower and access `http://localhost:8080/`
+3. **Access the Site**:
+   Open your browser and access `http://localhost:8080/`.

app.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="layout">
+        <Header />
+        <NuxtPage />
+        <Footer />
+        <LoadingSpinner class="hidden" />
+    </div>
+</template>
+
+<style scoped>
+.layout {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-large);
+    height: 100svh;
+    justify-content: center;
+    width: 100%;
+}
+
+.layout > :nth-child(2) {
+    flex: 1;
+    overflow-y: auto;
+}
+
+@media screen and (width<=850px) {
+    .layout {
+        gap: var(--spacing-small);
+    }
+}
+</style>

assets/styles/variables.css

@@ -0,0 +1,68 @@
+:root {
+    color-scheme: light dark;
+
+    /* Colors */
+    --color-primary: light-dark(#b8d8ba, #426347);
+    --color-secondary: light-dark(#d9dbbc, #636645);
+    --color-tertiary: light-dark(#fcddbc, #925527);
+    --color-quaternary: light-dark(#ef959d, #782939);
+    --color-quinary: light-dark(#69585f, #3d373a);
+    --color-error: red;
+    --color-success: green;
+
+    /* Typography */
+    --font-family: 'Roboto', sans-serif;
+    --font-size-heading: 2rem;
+    --font-size-title: 1.6rem;
+    --font-size-body: 1.1rem;
+
+    /* Spacing */
+    --spacing-small: 0.4rem;
+    --spacing-medium: 1.6rem;
+    --spacing-large: 3.2rem;
+
+    /* Curvature */
+    --border-radius-small: 0.4rem;
+    --border-radius-medium: 1.6rem;
+    --border-radius-large: 3.2rem;
+
+    /* Personalized elements */
+    --icon-size: 2rem;
+    --polaroid-color: light-dark(#e9e9e9, #161616);
+    --polaroid-height: 107mm;
+    --polaroid-photo-size: 79mm;
+    --polaroid-width: 88mm;
+    --polaroid-margin-top: calc((var(--polaroid-width) - var(--polaroid-photo-size)) / 2);
+}
+
+* {
+    font-family: var(--font-family);
+    font-size: var(--font-size-body);
+    margin: 0;
+    padding: 0;
+    scrollbar-color: var(--color-quinary) transparent;
+    scrollbar-width: thin;
+    transition-duration: .5s;
+}
+
+a {
+    color: var(--color-primary);
+    font-weight: bold;
+    text-decoration: none;
+}
+
+button {
+    background-color: var(--color-primary);
+    height: 3rem;
+}
+
+svg {
+    height: var(--icon-size);
+    stroke: var(--color-primary);
+    width: var(--icon-size);
+    cursor: pointer;
+}
+
+.hidden {
+    display: none !important;
+}

components/ButtonHome.vue

@@ -0,0 +1,7 @@
+<template>
+    <nuxt-link to="/" title="Home"><IconHome /></nuxt-link>
+</template>
+
+<script setup>
+import IconHome from '@/assets/icons/home.svg';
+</script>