chore: maintainable template building with django-cotton and django-t…

…ailwind
pyung · Aug 20, 2024 · 637eefc · 637eefc
1 parent 6bfd394
commit 637eefc
Show file tree

Hide file tree

Showing 20 changed files with 1,713 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -43,7 +43,17 @@ To run the tests, check your test coverage, and generate an HTML coverage report
 
 ### Live reloading and Sass CSS compilation
 
-Moved to [Live reloading and SASS compilation](https://cookiecutter-django.readthedocs.io/en/latest/developing-locally.html#sass-compilation-live-reloading).
+Moved to [Live reloading and SASS compilation]
+
+Run the following command to develop/style components with live reload
+
+```bash
+
+python manage.py tailwind start
+
+# start the django server in a different shell
+python manage.py runserver
+```
 
 ### Celery
 

diff --git a/config/settings/base.py b/config/settings/base.py
@@ -82,10 +82,13 @@
     "rest_framework.authtoken",
     "corsheaders",
     "drf_spectacular",
+    "django_cotton",
+    'tailwind'
 ]
 
 LOCAL_APPS = [
     "only_django.users",
+    'theme',
     # Your stuff: custom apps go here
 ]
 # https://docs.djangoproject.com/en/dev/ref/settings/#installed-apps
@@ -178,8 +181,13 @@
         # https://docs.djangoproject.com/en/dev/ref/settings/#dirs
         "DIRS": [str(APPS_DIR / "templates")],
         # https://docs.djangoproject.com/en/dev/ref/settings/#app-dirs
-        "APP_DIRS": True,
+        "APP_DIRS": False,
         "OPTIONS": {
+            "loaders": [
+                "django_cotton.cotton_loader.Loader",
+                "django.template.loaders.filesystem.Loader",
+                "django.template.loaders.app_directories.Loader",
+            ],
             # https://docs.djangoproject.com/en/dev/ref/settings/#template-context-processors
             "context_processors": [
                 "django.template.context_processors.debug",
@@ -192,6 +200,9 @@
                 "django.contrib.messages.context_processors.messages",
                 "only_django.users.context_processors.allauth_settings",
             ],
+            "builtins": [
+                "django_cotton.templatetags.cotton",
+            ],
         },
     },
 ]
@@ -340,3 +351,4 @@
 }
 # Your stuff...
 # ------------------------------------------------------------------------------
+TAILWIND_APP_NAME = "theme"
diff --git a/config/settings/local.py b/config/settings/local.py
@@ -36,15 +36,22 @@
 # WhiteNoise
 # ------------------------------------------------------------------------------
 # http://whitenoise.evans.io/en/latest/django.html#using-whitenoise-in-development
-INSTALLED_APPS = ["whitenoise.runserver_nostatic", *INSTALLED_APPS]
+INSTALLED_APPS = [
+    "whitenoise.runserver_nostatic",
+    "django_browser_reload",
+    *INSTALLED_APPS,
+]
 
 
 # django-debug-toolbar
 # ------------------------------------------------------------------------------
 # https://django-debug-toolbar.readthedocs.io/en/latest/installation.html#prerequisites
 INSTALLED_APPS += ["debug_toolbar"]
 # https://django-debug-toolbar.readthedocs.io/en/latest/installation.html#middleware
-MIDDLEWARE += ["debug_toolbar.middleware.DebugToolbarMiddleware"]
+MIDDLEWARE += [
+    "django_browser_reload.middleware.BrowserReloadMiddleware",
+    "debug_toolbar.middleware.DebugToolbarMiddleware",
+]
 # https://django-debug-toolbar.readthedocs.io/en/latest/configuration.html#debug-toolbar-config
 DEBUG_TOOLBAR_CONFIG = {
     "DISABLE_PANELS": [

diff --git a/config/urls.py b/config/urls.py
@@ -66,6 +66,7 @@
             kwargs={"exception": Exception("Page not Found")},
         ),
         path("500/", default_views.server_error),
+        path("__reload__/", include("django_browser_reload.urls")),
     ]
     if "debug_toolbar" in settings.INSTALLED_APPS:
         import debug_toolbar

diff --git a/docker-compose.local.yml b/docker-compose.local.yml
@@ -34,6 +34,8 @@ services:
       - only_django_local_postgres_data_backups:/backups
     env_file:
       - ./.envs/.local/.postgres
+    ports:
+      - "5437:5432"
 
   mailpit:
     image: docker.io/axllent/mailpit:latest
@@ -47,6 +49,8 @@ services:
 
     volumes:
       - only_django_local_redis_data:/data
+    ports:
+      - "6379:6379"
 
 
   celeryworker:

diff --git a/only_django/templates/base.html b/only_django/templates/base.html
@@ -1,5 +1,5 @@
 
-{% load static i18n %}<!DOCTYPE html>
+{% load static i18n tailwind_tags %}<!DOCTYPE html>
 {% get_current_language as LANGUAGE_CODE %}
 <html lang="{{ LANGUAGE_CODE }}">
   <head>
@@ -16,6 +16,7 @@
   <meta name="author"
         content="Biola" />
   <link rel="icon" href="{% static 'images/favicons/favicon.ico' %}" />
+  {% tailwind_css %}
   {% block css %}
     <!-- Latest compiled and minified Bootstrap CSS -->
     <link rel="stylesheet"

diff --git a/only_django/templates/cotton/card.html b/only_django/templates/cotton/card.html
@@ -0,0 +1,5 @@
+<div class="bg-white shadow rounded border p-4">
+    <h2>{{ title }}</h2>
+    <p>{{ slot }}</p>
+    <button href="{{ url }}">Read more for it   </button>
+</div>
diff --git a/only_django/templates/pages/home.html b/only_django/templates/pages/home.html
@@ -1,3 +1,7 @@
 {% extends "base.html" %}
 
-
+{% block content %}
+<c-card title="Hello" url="{% url 'home' %}">
+    This is a sample card
+</c-card>
+{% endblock content %}
diff --git a/requirements/base.txt b/requirements/base.txt
@@ -24,3 +24,5 @@ djangorestframework==3.15.2  # https://github.com/encode/django-rest-framework
 django-cors-headers==4.4.0  # https://github.com/adamchainz/django-cors-headers
 # DRF-spectacular for api documentation
 drf-spectacular==0.27.2  # https://github.com/tfranzel/drf-spectacular
+django-cotton==0.9.26  # https://github.com/django-cotton/django-cotton
+django-tailwind[reload]==3.8.0  # https://github.com/django-tailwind/django-tailwind
diff --git a/requirements/local.txt b/requirements/local.txt
@@ -2,7 +2,7 @@
 
 Werkzeug[watchdog]==3.0.3 # https://github.com/pallets/werkzeug
 ipdb==0.13.13  # https://github.com/gotcha/ipdb
-psycopg[c]==3.2.1  # https://github.com/psycopg/psycopg
+# psycopg[c]==3.2.1  # https://github.com/psycopg/psycopg
 watchfiles==0.21.0  # https://github.com/samuelcolvin/watchfiles
 
 # Testing
@@ -33,3 +33,4 @@ django-debug-toolbar==4.4.6  # https://github.com/jazzband/django-debug-toolbar
 django-extensions==3.2.3  # https://github.com/django-extensions/django-extensions
 django-coverage-plugin==3.1.0  # https://github.com/nedbat/django_coverage_plugin
 pytest-django==4.8.0  # https://github.com/pytest-dev/pytest-django
+
diff --git a/requirements/production.txt b/requirements/production.txt
@@ -3,7 +3,8 @@
 -r base.txt
 
 gunicorn==23.0.0  # https://github.com/benoitc/gunicorn
-psycopg[c]==3.2.1  # https://github.com/psycopg/psycopg
+# psycopg[c]==3.2.1  # https://github.com/psycopg/psycopg
+psycopg[binary,pool]==3.2.1  # https://github.com/psycopg/psycopg
 
 # Django
 # ------------------------------------------------------------------------------

diff --git a/theme/__init__.py b/theme/__init__.py
diff --git a/theme/apps.py b/theme/apps.py
@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class ThemeConfig(AppConfig):
+    name = 'theme'
diff --git a/theme/static_src/.gitignore b/theme/static_src/.gitignore
@@ -0,0 +1 @@
+node_modules