Merge pull request #8 from hotosm/feat/hot-005/setup-tailwind-navbar

Feat/hot 005/setup tailwind navbar

.dockerignore

@@ -35,6 +35,7 @@ wheels/
 *.egg-info/
 .installed.cfg
 *.egg
+staticfiles
 
 # Github workflows
 .github

.gitignore

@@ -6,3 +6,4 @@
 **/.venv/
 node_modules
 **/dist/
+/staticfiles/

.pre-commit-config.yaml

@@ -25,3 +25,4 @@ repos:
     hooks:
       - id: djlint-reformat-django
       - id: djlint-django
+        exclude: '^hot_osm/templates/components/navbar.html$'

Dockerfile

@@ -2,11 +2,10 @@ ARG PYTHON_IMG_TAG=3.11
 ARG NODE_IMG_TAG=20.5.1
 
 FROM node:${NODE_IMG_TAG}-bookworm-slim as frontend-base
+COPY . ./app
 WORKDIR /app/frontend
-COPY ./frontend/package*.json ./
 RUN npm install
-COPY ./frontend ./
-COPY .. /app
+RUN mkdir -p ./dist/css
 RUN npm run build
 
 # Define the base stage
@@ -64,8 +63,6 @@ RUN set -ex \
     && rm -rf /var/lib/apt/lists/*
 COPY --from=extract-deps \
     /opt/python/requirements.txt /opt/python/
-# Copy the built CSS from the Node.js stage
-# COPY --from=frontend-base /dist/ /dist/
 # Install dependencies
 RUN pip install --user --no-warn-script-location \
     --no-cache-dir -r /opt/python/requirements.txt
@@ -101,9 +98,8 @@ COPY --from=build \
     /root/.local \
     /home/wagtail/.local
 # Copy compiled css from frontend stage
-COPY --from=frontend-base \
-    /app/frontend/dist \
-    /app/frontend/dist
+# In the final stage of your Dockerfile...
+COPY --from=frontend-base /app/frontend/dist/css /app/frontend/dist/css
 # Use /app folder as a directory where the source code is stored.
 WORKDIR /app
 # Copy project

README.md

@@ -8,6 +8,14 @@ The codebase is structured as a standard Django project with a `settings` direct
 
 The project uses Docker for development and production environments, with separate Docker Compose files for each.
 
+This project's frontend leverages TailwindCSS and Alpine.js. The design of the components is inspired by TailwindUI.
+
+TailwindCSS is a utility-first CSS framework that we've used for styling our application. It allows for rapid UI development with its low-level utility classes.
+
+Alpine.js, on the other hand, is a minimal JavaScript framework used for managing component behavior. It operates entirely on the client-side, in the browser. This means that Alpine.js interacts with the HTML after Django has completed its server-side rendering.
+
+Together, TailwindCSS and Alpine.js provide a powerful and efficient combination for building interactive user interfaces.
+
 ## Setting Up Environment Variables
 
 To set up environment variables for your local development environment, you'll need to create a `.env' file in the root directory of the project. This file will store your environment variables.

docker-compose.dev.yml

@@ -8,14 +8,17 @@ services:
       target: debug
       args:
         APP_VERSION: "${TAG_OVERRIDE:-main}"
+    volumes:
+      - .:/app  # Mount the codebase for development
+      - /app/frontend/dist/css  # Mount only the necessary directory for live reload
+      - /app/*/templates  # Mount Django templates directory
     ports:
       - 8000:8000
     env_file:
       - .env
     depends_on:
       db:
         condition: service_healthy
-
   db:
     image: "docker.io/postgres:${POSTGRES_TAG:-16-alpine3.18}"
     env_file:

frontend/package.json

@@ -4,15 +4,17 @@
   "description": "A Wagtail CMS for the Humanitarian OpenStreetMap Team",
   "main": "index.js",
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
     "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.32",
     "postcss-cli": "^10.1.0",
-    "tailwindcss": "^3.3.5"
+    "postcss-import": "^15.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.9",
+    "tailwindcss": "^3.3.6"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "for file in ../*/static/css/*.css; do postcss $file -o ./dist/css/$(basename $file .css)_processed.css; done",
-    "start": "for file in ../*/static/css/*.css; do postcss $file -o ./dist/css/$(basename $file .css)_processed.css --watch; done"
+    "build": "npx postcss ../hot_osm/static/css/hot_osm.css --config ./postcss.config.js -o ./dist/css/hot_osm_processed.css && prettier --write ."
   },
   "repository": {
     "type": "git",

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}

frontend/tailwind.config.js

@@ -1,12 +1,55 @@
 /** @type {import('tailwindcss').Config} */
+
 module.exports = {
-  purge: ['./**/*.html', './**/*.js',],
-  content: ["*/templates/**/*.html"],
+  future: {},
+  content: ["../*/templates/*.{html,js}", "../*/templates/**/*.{html,js}"],
+  darkMode: "media",
   theme: {
-    extend: {},
+    extend: {
+        spacing: {
+          "hot-1": "0.625rem", // 10px
+          "hot-1.2": "0.75rem", // 12px
+          "hot-1.5": "0.9375rem", // 15px
+          "hot-2": "1.25rem", // 20px
+          "hot-2.6": "1.625rem", // 26px
+          "hot-3": "1.875rem", // 30px
+          "hot-3.4": "2.125rem", // 34px
+          "hot-4": "2.5rem", // 40px
+          "hot-6": "3.75rem", // 60px
+          "hot-6.6": "4.125rem", // 66px
+          "hot-8": "5rem", // 80px
+          "hot-10": "6.25rem", // 100px
+          "hot-12": "7.5rem", // 120px
+        },
+        fontFamily: {
+          barlow: "var(--font-barlow)",
+          archivo: "var(--font-archivo)",
+        },
+        fontSize: {
+          h1: "var(--font-size-h1)", // 56pt
+          h2: "var(--font-size-h2)", // 48pt
+          h3: "var(--font-size-h3)", // 38pt
+          h4: "var(--font-size-h4)", // 32pt
+          h5: "var(--font-size-h5)", // 28pt
+          intro: "var(--font-size-intro)", // 22pt
+          "base-20": "var(--font-size-base-20)", // 20pt
+          "base-18": "var(--font-size-base-18)", // 18pt
+          "base-16": "var(--font-size-base-16)", // 16pt
+        },
+        colors: {
+          "hot-red": "var(--hot-red)",
+          "hot-navy": "var(--hot-navy)",
+          "hot-dark-grey": "var(--hot-dark-grey)",
+          "hot-slate-grey": "var(--hot-slate-grey)",
+          "hot-light-grey": "var(--hot-light-grey)",
+          "hot-off-white": "var(--hot-off-white)",
+          "hot-white": "var(--hot-white)",
+          "hot-black": "var(--hot-black)",
+        },
+    },
   },
-  variants: {
-    extend: {},
-  },
-  plugins: [],
-}
+  variants: {},
+  plugins: [
+    require("@tailwindcss/forms"),
+  ],
+};

home/templates/home/home_page.html

@@ -9,12 +9,14 @@
 Delete the line below if you're just getting started and want to remove the welcome screen!
     {% endcomment %}
     {% compress css %}
-        <link rel="stylesheet" href="{% static 'css/welcome_page_processed.css' %}">
+        {% comment %} <link rel="stylesheet" href="{% static 'css/welcome_page_processed.css' %}"> {% endcomment %}
     {% endcompress css %}
 {% endblock extra_css %}
 {% block content %}
+    {% comment %} <p class="bg-hot-red">Home weeee</p>
+    <p class="bg-violet-50">This is the homepage</p> {% endcomment %}
     {% comment %}
 Delete the line below if you're just getting started and want to remove the welcome screen!
     {% endcomment %}
-    {% include "home/welcome_page.html" %}
+    {% comment %} {% include "home/welcome_page.html" %} {% endcomment %}
 {% endblock content %}

hot_osm/static/css/hot_osm.css

@@ -0,0 +1,30 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+    /* Colors */
+    --hot-red: #D73F3F;
+    --hot-navy: #20365B;
+    --hot-dark-grey: #68707F;
+    --hot-slate-grey: #929D83;
+    --hot-light-grey: #E1E0E0;
+    --hot-off-white: #F0EFEF;
+    --hot-white: #FFFFFF;
+    --hot-black: #000000;
+
+        /* Font Family */
+    --font-barlow: "Barlow Condensed", sans-serif;
+    --font-archivo: "Archivo", sans-serif;
+
+    /* Font Size */
+    --font-size-h1: 3.5rem; /* 56pt */
+    --font-size-h2: 3rem; /* 48pt */
+    --font-size-h3: 2.375rem; /* 38pt */
+    --font-size-h4: 2rem; /* 32pt */
+    --font-size-h5: 1.75rem; /* 28pt */
+    --font-size-intro: 1.375rem; /* 22pt */
+    --font-size-base-20: 1.25rem; /* 20pt */
+    --font-size-base-18: 1.125rem; /* 18pt */
+    --font-size-base-16: 1rem; /* 16pt */
+}