Migrate to Nuxt.js (#15)

* Add initial project setup with Nuxt, including layout components, routing, and styles; remove unused files

* Implement login/logout functionality and update header for authentication state; remove unused cookie utility

* Remove unused cookTimeIcon constant from RecipeCard component

* Refactor RecipeCard component to destructure recipe prop from defineProps

* Re-add GitHub Actions workflow for Super Linter to re-enforce code quality

* Wrap login text in a div for improved structure in login.vue

* Improve indentation for better readability in Header.vue

* Update Super Linter configuration and enhance README structure

* Implement authentication forms with toggle between login and registration

* Enhance authentication forms with v-model binding and submit handling for login and registration

* Implement login and registration enhancements with session cookie management and redirection

* Disable SSR

* Add instructions for generating static hosting builds in README

* Improve recipe fetching error handling and loading states in index.vue

* Enhance contact page with improved layout and GitHub link

* Refactor registration component to redirect to the login page after successful registration

* Refactor login component to use Composition API and improve error handling

* Refactor styles to use CSS variables for colors, typography, and spacing

* Update color variables and improve component styles for consistency

* Add secondary color to footer styles for improved visibility

* Remove unused styles

* Enhance registration form with password visibility  SVG icons

* Enhance password input fields with visibility toggle functionality

* Add SVG icons to header navigation for improved UI

* Update header styles to enhance text visibility and weight

* Remove unused background properties

* Enhance main layout with custom scrollbar styles for improved aesthetics

* Update main width to 100% for some reason

* Update main overflow property for improved scrolling behavior

* Refactor API endpoints to use runtime configuration for improved flexibility

* Add .dockerignore and update .gitignore to include lock file

* Add .gitattributes to ignore diffs for package-lock.json

* Refactor Dockerfile to implement multi-stage builds for simplified Nuxt.js app deployment

* Update .dockerignore to include Nuxt.js build outputs and additional local files

* Update README.md to clarify local development setup with Nuxt.js and Docker

* Refactor recipe list rendering in index.vue for improved semantics and styling

* Refactor index.vue template structure for improved readability and layout

* Implement search functionality for recipes and enhance loading spinner management

* Remove unused watch function

* Refactor main layout in index.vue for improved alignment and spacing

* Remove unused text-wrap property from main style in index.vue

* Implement search bar component and refactor search functionality in index.vue

* Fix font size in SearchBar component

* Remove unnecessary blank line in README.md

* Refactor LoadingSpinner styles for improved readability and consistency

* Add recipe detail and index pages; update navigation and clean up imports

* Update Dockerfile to use slimmer base images

* Add GitHub Actions workflow to scan Docker images for vulnerabilities

* Remove unnecessary triggers and permissions from workflow configuration files

* Update Trivy action version in Docker image scanning workflow

* Fix Trivy action version format in Docker image scanning workflow

* Refactor GitHub Actions workflows to enhance Docker image scanning and update permissions

* Update workflow triggers to only run on pushes to the main branch

* Fix workflow trigger configuration to support multiple branches for Docker image scanning

* Update Docker image scanning workflow to use Trivy in repo mode

* Add permissions for GitHub Actions to enhance security event reporting

* Update Docker image scanning workflow to output results in table format and adjust exit code

* Refactor Docker image scanning workflow to remove 'ignore-unfixed' option and output results to 'table.txt'

* Remove output specification from Docker image scanning workflow

* Remove Trivy because it's useless, I expected a report table and got nothing

* Refactor footer and header components for improved rendering and update app title format

* Update page titles dynamically

* Refactor authentication components to destructure apiBaseUrl from runtime config

* Refactor recipe details display into a separate Recipe component

* Refactor Recipe component layout for improved structure and styling

* Enhance responsive design for Recipe component and details page

* Refactor Recipe component layout and styles for improved readability and responsiveness; add custom scrollbar styles

* Enhance Recipe component to dynamically fetch and display recipe images; add error handling for image loading

* Add ButtonHome component for navigation; update Header and Recipe index to use new component

* Refactor layout and styles for improved responsiveness; update section IDs and add media queries for better mobile support

* Add Comment component and integrate comments fetching in Recipe component; refactor recipe fetching logic in index page

* Refactor recipe fetching logic in index page; update API endpoint and add initial fetch on component mount

Author: Vianpyro

.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>