feat(tailwind): use standalone tailwind instead of django-tailwind (#196

)
battlefield-portal-community · Jul 10, 2023 · 7c4b96f · 7c4b96f
2 parents b0e4997 + 4bfa028
commit 7c4b96f
Show file tree

Hide file tree

Showing 23 changed files with 571 additions and 1,070 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -4,7 +4,7 @@
 *.sqlite3
 
 # Python and others
-__pycache__/
+*/__pycache__/
 *.pyc
 .DS_Store
 *.swp

diff --git a/Dockerfile b/Dockerfile
@@ -32,6 +32,7 @@ RUN apt-get update --yes --quiet && apt-get install --yes --quiet --no-install-r
     libjpeg62-turbo-dev \
     zlib1g-dev \
     libwebp-dev \
+    curl \
 && rm -rf /var/lib/apt/lists/*
 # Set environment variables.
 # 1. Force Python stdout and stderr streams to be unbuffered.
@@ -46,14 +47,18 @@ ENV PYTHONUNBUFFERED=1 \
 ENV PATH="${VIRTUAL_ENV}/bin:${PATH}:/home/wagtail/.local/bin"
 COPY --from=builder ${VIRTUAL_ENV} ${VIRTUAL_ENV}
 
-# Copy the source code of the project into the container.
-COPY ./bfportal ./
 
-FROM dev as final
 COPY --chown=wagtail:wagtail --from=node_base /usr/local/bin /usr/local/bin
 COPY --chown=wagtail:wagtail --from=node_base /usr/local/lib/node_modules/npm /usr/local/lib/node_modules/npm
+RUN chown -R wagtail:wagtail /app
+COPY --chown=wagtail:wagtail ["package.json", "package-lock.json", "tailwind.config.js", "./"]
+RUN npm install
+
 
-ENV NPM_BIN_PATH = "/usr/local/bin/npm"
-RUN python manage.py tailwind install --no-input;
-RUN python manage.py tailwind build --no-input
-RUN python manage.py collectstatic --noinput --clear
+# Copy the source code of the project into the container.
+COPY --chown=wagtail:wagtail ./bfportal ./
+
+FROM dev as final
+USER wagtail
+RUN npx tailwindcss -i ./bfportal/static/src/styles.css  -o ./bfportal/static/css/bfportal.css --minify
+RUN python manage.py collectstatic --noinput --clear  -i static/src/*
diff --git a/bfportal/bfportal/settings/base.py b/bfportal/bfportal/settings/base.py
@@ -12,7 +12,6 @@
 
 # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
 import os
-import platform
 
 from loguricorn.intercept import InterceptHandler
 
@@ -56,8 +55,6 @@
     "allauth.account",
     "allauth.socialaccount",
     "allauth.socialaccount.providers.discord",
-    "tailwind",
-    "theme",
     "django_browser_reload",
     "widget_tweaks",
     "embed_video",
@@ -70,10 +67,6 @@
 ]
 
 SITE_ID = 1
-TAILWIND_APP_NAME = "theme"
-if platform.system() == "Windows":
-    # todo instead of this; check if npm is installed or not
-    NPM_BIN_PATH = r"D:\Program Files\nodejs\npm.cmd"
 SOCIALACCOUNT_PROVIDERS = {
     "discord": {
         "APP": {

diff --git a/bfportal/bfportal/static/css/.gitignore b/bfportal/bfportal/static/css/.gitignore
@@ -0,0 +1 @@
+bfportal.css
diff --git a/bfportal/bfportal/static/css/bfportal.css b/bfportal/bfportal/static/css/bfportal.css
diff --git a/...fonts/Montserrat/Montserrat-Italic-VF.ttf → ...fonts/Montserrat/Montserrat-Italic-VF.ttf b/...fonts/Montserrat/Montserrat-Italic-VF.ttf → ...fonts/Montserrat/Montserrat-Italic-VF.ttf
diff --git a/...ic_src/fonts/Montserrat/Montserrat-VF.ttf → ...static/fonts/Montserrat/Montserrat-VF.ttf b/...ic_src/fonts/Montserrat/Montserrat-VF.ttf → ...static/fonts/Montserrat/Montserrat-VF.ttf
diff --git a/...theme/static_src/fonts/Montserrat/OFL.txt → .../bfportal/static/fonts/Montserrat/OFL.txt b/...theme/static_src/fonts/Montserrat/OFL.txt → .../bfportal/static/fonts/Montserrat/OFL.txt
diff --git a/...me/static_src/fonts/Montserrat/README.txt → ...portal/static/fonts/Montserrat/README.txt b/...me/static_src/fonts/Montserrat/README.txt → ...portal/static/fonts/Montserrat/README.txt
diff --git a/bfportal/theme/static_src/src/styles.css → bfportal/bfportal/static/src/styles.css b/bfportal/theme/static_src/src/styles.css → bfportal/bfportal/static/src/styles.css
diff --git a/bfportal/bfportal/templates/base.html b/bfportal/bfportal/templates/base.html
@@ -1,5 +1,5 @@
 {% load template_filters %}
-{% load static wagtailcore_tags wagtailimages_tags account socialaccount tailwind_tags %}
+{% load static wagtailcore_tags wagtailimages_tags account socialaccount %}
 <!DOCTYPE html>
 <html class="no-js" lang="en">
 <head>
@@ -48,13 +48,14 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     {% block preload_media %}{% endblock %}
+    <link rel="stylesheet" href="{% static "css/bfportal.css" %}">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/theme.min.css" integrity="sha512-hbs/7O+vqWZS49DulqH1n2lVtu63t3c3MTAn0oYMINS5aT8eIAbJGDXgLt6IxDHcWyzVTgf9XyzZ9iWyVQ7mCQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     {% block extra_css %}
         {# Override this in templates to add extra stylesheets #}
     {% endblock %}
 
-    {% tailwind_css %}
+
     <script type="text/javascript" src="{% static 'js/preload.js' %}"></script>
     <script type="text/javascript">
         /* When the user clicks on the button,
@@ -95,14 +96,14 @@
         }
     </script>
 </head>
-
+</head>
 <body class="bg-bg-default min-h-screen m-0  relative flex flex-col {% block body_class %}{% endblock %}">
 <div id="popUpBackground" class="fixed w-screen h-screen bg-default/[.95] z-[1] hidden" onclick="hidePopUps()"></div>
 {% block header %}
     {% include nav_tmpl|default:'navbar.html' %}
 {% endblock %}
 
-<div id="main" class="main-content flex flex-col flex-grow gap-y-12 overflow-x-hidden mb-8">
+<div id="main" class="main-content  flex flex-col flex-grow gap-y-12 overflow-x-hidden mb-8">
 
     {% block extra_content %}
         {% include_block page.extra_content %}
@@ -134,7 +135,6 @@
         integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://unpkg.com/@popperjs/core@2"></script>
-<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>
 <script src="{% static 'js/jquery.waypoints.js' %}"></script>
 <script src="{% static 'js/infinite.js' %}"></script>
 <script type="text/javascript" src="{% static 'js/bfportal.js' %}"></script>

diff --git a/bfportal/theme/__init__.py b/bfportal/theme/__init__.py
diff --git a/bfportal/theme/apps.py b/bfportal/theme/apps.py
diff --git a/bfportal/theme/static_src/.gitignore b/bfportal/theme/static_src/.gitignore
diff --git a/bfportal/theme/static_src/package.json b/bfportal/theme/static_src/package.json
diff --git a/bfportal/theme/static_src/postcss.config.js b/bfportal/theme/static_src/postcss.config.js
diff --git a/bfportal/theme/templates/base.html b/bfportal/theme/templates/base.html
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -165,9 +165,34 @@ services:
       - PRODUCTION_PORT=8000
       - OWNERS=${OWNERS}
       - DEVEL_PORT=8000
+    healthcheck:
+      test: curl -fk http://0.0.0.0:8000/api/experiences || exit 1
+      interval: "10s"
+      timeout: "5s"
+      retries: 5
+      start_period: "10s"
     depends_on:
       - db_dev_local
 
+  bfportal_dev_local_tailwind:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      target: dev
+    command: npx tailwindcss -i ./bfportal/static/src/styles.css  -o ./bfportal/static/css/bfportal.css --watch
+    restart: always
+    container_name: bfportal_dev_local_tailwind
+    profiles:
+      - dev_local
+    volumes:
+      - ./bfportal/bfportal:/app/bfportal
+      - ./bfportal/core:/app/core
+    depends_on:
+      bfportal_dev_local:
+        condition: service_healthy
+    stdin_open: true
+
+
 volumes:
   postgress_db_devel:
   postgress_db: