Add Super Linter (#13)

* Add GitHub Actions workflow for Super Linter

* Update Nginx version, enhance GitHub Actions, and refine CSS styles

* Refactor footer copyright handling and update Super Linter configuration

* Simplify modal CSS grid layout

* Enhance Dockerfile for Nginx configuration and adjust CSS layout

* Simplify loading spinner positioning using inset property

* Update Super Linter configuration and simplify footer copyright element handling

Author: Vianpyro

.github/workflows/super-linter.yml

@@ -0,0 +1,40 @@
+---
+name: Lint
+
+on:
+  push: null
+  pull_request: null
+
+permissions: {}
+
+jobs:
+  build:
+    name: Lint
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      packages: read
+      # To report GitHub Actions status checks
+      statuses: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          # super-linter needs the full git history to get the
+          # list of files that changed across commits
+          fetch-depth: 0
+
+      - name: Super-linter
+        uses: super-linter/[email protected]
+        env:
+          # To report GitHub Actions status checks
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          VALIDATE_ALL_CODEBASE: false
+          VALIDATE_CSS_PRETTIER: false
+          VALIDATE_HTML_PRETTIER: false
+          VALIDATE_JAVASCRIPT_STANDARD: false
+          VALIDATE_JAVASCRIPT_PRETTIER: false
+          VALIDATE_JSON_PRETTIER: false
+          VALIDATE_YAML_PRETTIER: false

Dockerfile

@@ -1,5 +1,5 @@
 # Use the latest nginx as the base image
-FROM nginx:latest
+FROM nginx:1.27.3
 
 # Set environment variables
 ENV TEMP_FRONTEND_DIR=/temp-frontend-files
@@ -10,20 +10,30 @@ SHELL ["/bin/bash", "-o", "pipefail", "-c"]
 # Create a non-root user and group
 RUN groupadd -r frontenduser && useradd -r -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 nginx.conf to a writable location and modify the PID path
+RUN cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.custom && \
+    sed -i 's|/var/run/nginx.pid|/var/run/nginx/nginx.pid|g' /etc/nginx/nginx.conf.custom
+
 # Set ownership of necessary directories
 RUN chown -R frontenduser:frontenduser /usr/share/nginx/html \
     && chown -R frontenduser:frontenduser /var/cache/nginx \
     && chown -R frontenduser:frontenduser /var/log/nginx
 
+# Switch to non-root user
+USER frontenduser
+
 # Expose the default nginx port (80)
 EXPOSE 80
 
 # Add health check for the container
 HEALTHCHECK --interval=1m --timeout=10s --start-period=30s --retries=3 \
     CMD curl -f http://localhost/ || exit 1
 
-# Use the default nginx command
-CMD ["nginx", "-g", "daemon off;"]
+# Use the custom nginx.conf during runtime
+CMD ["nginx", "-c", "/etc/nginx/nginx.conf.custom", "-g", "daemon off;"]

README.md

@@ -1,10 +1,10 @@
 # Nginx HTTP web server
 
-This repository contains the front-end for smartcooking.
+This repository contains the frontend for smartcooking.
 
 ## Getting Started
 
-To set up the front-end locally, you'll need Docker installed. Follow the steps below to build and run the database in a container.
+To set up the frontend locally, you'll need Docker installed. Follow the steps below to build and run the database in a container.
 
 ### Setup Steps
 
@@ -20,5 +20,5 @@ To set up the front-end locally, you'll need Docker installed. Follow the steps
    docker run -d --name Smart-Cooking_Frontend -p 8080:80 smartcooking-nginx
    ```
 
-3. **Access the website**
+3. **Access the site**
    Open your brower and access `http://localhost:8080/`

authentication.html

@@ -59,7 +59,7 @@ <h1>Smart Cooking &copy;</h1>
         </section>
     </main>
 
-    <footer id="footer-copyright">Smart Cooking &copy; <span id="copyright-year"></span>. All rights reserved.</footer>
+    <footer id="footer-copyright"></footer>
 
     <script src="javascript/main.js"></script>
     <script src="javascript/authentication.js" defer></script>

css/authentication.css

@@ -27,7 +27,7 @@ form {
     width: clamp(300px, 80%, 600px);
     flex-direction: column;
     border: 1px solid var(--background-color-secondary);
-    padding: 2rem 2rem;
+    padding: 2rem;
     border-radius: var(--border-radius);
     gap: 1rem;
 }
@@ -59,7 +59,7 @@ section {
 }
 
 .password-input>label {
-    background-image: url(../images/tabler--eye.svg);
+    background-image: "url(../images/tabler--eye.svg)";
     height: 2rem;
     width: 2rem;
     background-repeat: no-repeat;
@@ -68,7 +68,7 @@ section {
 }
 
 .show-password-check:checked+label.show-password {
-    background-image: url(../images/tabler--eye-off.svg);
+    background-image: "url(../images/tabler--eye-off.svg)";
 }
 
 #home {

css/index.css

@@ -55,7 +55,7 @@ section#posts {
 .cook-time-icon {
     width: var(--icon-size);
     height: var(--icon-size);
-    stroke: currentColor;
+    stroke: currentcolor;
     vertical-align: bottom;
 }
 

css/main.css

@@ -6,7 +6,6 @@
     --polaroid-height: 107mm;
     --polaroid-photo-size: 79mm;
     --polaroid-width: 88mm;
-
     --polaroid-margin-top: calc((var(--polaroid-width) - var(--polaroid-photo-size)) / 2);
 }
 
@@ -60,14 +59,11 @@ header {
 
 #loading-spinner {
     position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: rgba(0, 0, 0, .5);
+    background-color: rgba(0 0 0 / 50%);
     z-index: 1000;
 }
 

css/modal.css

@@ -17,11 +17,9 @@
     box-shadow: var(--polaroid-background-color) 0 0 10px;
     display: grid;
     gap: 1rem;
-    grid-template-rows: auto 1fr;
-    grid-template-columns: 1fr 1fr;
-    grid-template-areas:
-        "modal-top modal-top"
-        "modal-left modal-right";
+    grid-template:
+        "modal-top modal-top" auto
+        "modal-left modal-right" auto / 1fr 1fr;
     height: 75%;
     width: 60%;
     overflow-y: auto;
@@ -66,12 +64,10 @@
 @media screen and (width<=850px) {
     #modal-box {
         border-radius: 0;
-        grid-template-rows: auto 1fr;
-        grid-template-columns: 1fr;
-        grid-template-areas:
-            "modal-top"
-            "modal-left"
-            "modal-right";
+        grid-template:
+            "modal-top" auto
+            "modal-left" auto
+            "modal-right" auto / 1fr;
         height: 80%;
         width: 100%;
     }

index.html

@@ -52,7 +52,7 @@ <h2 id="modal-title">Title</h2>
 
     <aside id="loading-spinner"><span id="spinner"></span></aside>
 
-    <footer id="footer-copyright">Smart Cooking &copy; <span id="copyright-year"></span>. All rights reserved.</footer>
+    <footer id="footer-copyright"></footer>
 
     <script src="javascript/main.js"></script>
     <script src="javascript/index.js" defer></script>

javascript/footer.js

@@ -12,5 +12,9 @@ if (currentYear !== baseYear) {
     yearString += `-${currentYear}`;
 }
 
-// Set the string to the paragraph
-document.getElementById('copyright-year').innerText = yearString;
+// Create the entire copyright element dynamically
+const copyrightElement = document.createElement('div');
+copyrightElement.innerHTML = `Smart Cooking © ${yearString}. All rights reserved.`;
+
+// Append the generated element to the body
+document.body.appendChild(copyrightElement);