feat: added tailwind

.gitignore

@@ -159,4 +159,6 @@ data/
 
 static/
 
+*.db
+
 # End of https://www.toptal.com/developers/gitignore/api/django

Dockerfile

@@ -1,7 +1,7 @@
 FROM python:3.12-slim
 
-ENV PYTHONDONTWRITEBYTECODE 1
-ENV PYTHONUNBUFFERED 1
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV PYTHONUNBUFFERED=1
 
 RUN mkdir /code
 

config/settings/base.py

@@ -9,6 +9,7 @@ CORS_ORIGIN_ALLOW_ALL = DEBUG
 
 if not DEBUG:
     import socket
+
     ALLOWED_HOSTS.append(socket.gethostbyname(socket.gethostname()))
 
 
@@ -29,11 +30,13 @@ THIRD_PARTY_APPS = [
     "watchman",
     "drf_spectacular",
     "rest_framework_simplejwt",
+    "tailwind",
 ]
 
 PROJECT_APPS = [
     "files",
     "shop",
+    "theme",
     "tpv",
     "users",
 ]
@@ -213,3 +216,5 @@ SIMPLE_JWT = {
     "SLIDING_TOKEN_OBTAIN_SERIALIZER": "rest_framework_simplejwt.serializers.TokenObtainSlidingSerializer",
     "SLIDING_TOKEN_REFRESH_SERIALIZER": "rest_framework_simplejwt.serializers.TokenRefreshSlidingSerializer",
 }
+
+TAILWIND_APP_NAME = "theme"

config/settings/environ.py

@@ -14,8 +14,8 @@ if os.path.exists(env_file):
 SECRET_KEY = env.str("SECRET_KEY", "this-is-the-default-secret-key")
 DEBUG = env.bool("DEBUG", True)
 
-CORS_ORIGIN_WHITELIST = env.str('CORS_ORIGIN_WHITELIST', default='').split(',')
-CSRF_TRUSTED_ORIGINS = env.str('CSRF_TRUSTED_ORIGINS', '').split(',')
+CORS_ORIGIN_WHITELIST = env.str("CORS_ORIGIN_WHITELIST", default="").split(",")
+CSRF_TRUSTED_ORIGINS = env.str("CSRF_TRUSTED_ORIGINS", "").split(",")
 
 DATABASE_URL = env.db_url("DATABASE_URL", "sqlite:///db.sqlite3")
 

theme/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class ThemeConfig(AppConfig):
+    name = "theme"

theme/static_src/.gitignore

@@ -0,0 +1 @@
+node_modules

theme/static_src/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "theme",
+  "version": "3.8.0",
+  "description": "",
+  "scripts": {
+    "start": "npm run dev",
+    "build": "npm run build:clean && npm run build:tailwind",
+    "build:clean": "rimraf ../static/css/dist",
+    "build:tailwind": "cross-env NODE_ENV=production tailwindcss --postcss -i ./src/styles.css -o ../static/css/dist/styles.css --minify",
+    "dev": "cross-env NODE_ENV=development tailwindcss --postcss -i ./src/styles.css -o ../static/css/dist/styles.css -w",
+    "tailwindcss": "node ./node_modules/tailwindcss/lib/cli.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.10",
+    "cross-env": "^7.0.3",
+    "postcss": "^8.4.32",
+    "postcss-import": "^15.1.0",
+    "postcss-nested": "^6.0.1",
+    "postcss-simple-vars": "^7.0.1",
+    "rimraf": "^5.0.5",
+    "tailwindcss": "^3.4.0"
+  }
+}

theme/static_src/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    "postcss-simple-vars": {},
+    "postcss-nested": {}
+  },
+}

theme/static_src/src/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

theme/static_src/tailwind.config.js

@@ -0,0 +1,57 @@
+/**
+ * This is a minimal config.
+ *
+ * If you need the full config, get it from here:
+ * https://unpkg.com/browse/tailwindcss@latest/stubs/defaultConfig.stub.js
+ */
+
+module.exports = {
+    content: [
+        /**
+         * HTML. Paths to Django template files that will contain Tailwind CSS classes.
+         */
+
+        /*  Templates within theme app (<tailwind_app_name>/templates), e.g. base.html. */
+        '../templates/**/*.html',
+
+        /*
+         * Main templates directory of the project (BASE_DIR/templates).
+         * Adjust the following line to match your project structure.
+         */
+        '../../templates/**/*.html',
+
+        /*
+         * Templates in other django apps (BASE_DIR/<any_app_name>/templates).
+         * Adjust the following line to match your project structure.
+         */
+        '../../**/templates/**/*.html',
+
+        /**
+         * JS: If you use Tailwind CSS in JavaScript, uncomment the following lines and make sure
+         * patterns match your project structure.
+         */
+        /* JS 1: Ignore any JavaScript in node_modules folder. */
+        // '!../../**/node_modules',
+        /* JS 2: Process all JavaScript files in the project. */
+        // '../../**/*.js',
+
+        /**
+         * Python: If you use Tailwind CSS classes in Python, uncomment the following line
+         * and make sure the pattern below matches your project structure.
+         */
+        // '../../**/*.py'
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [
+        /**
+         * '@tailwindcss/forms' is the forms plugin that provides a minimal styling
+         * for forms. If you don't like it or have own styling for forms,
+         * comment the line below to disable '@tailwindcss/forms'.
+         */
+        require('@tailwindcss/forms'),
+        require('@tailwindcss/typography'),
+        require('@tailwindcss/aspect-ratio'),
+    ],
+}

theme/templates/theme/base.html

@@ -0,0 +1,15 @@
+{% load static tailwind_tags %}
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{ title }}</title>
+  {% tailwind_css %}
+</head>
+<body>
+{% block main %}
+
+{% endblock %}
+</body>
+</html>

tpv/urls.py

@@ -1,5 +1,11 @@
 from django.urls import path
-from tpv.views import transaction_created, webhook, payment_accepted, payment_rejected, payment_form
+from tpv.views import (
+    transaction_created,
+    webhook,
+    payment_accepted,
+    payment_rejected,
+    payment_form,
+)
 
 app_name = "tpv"
 

users/templates/users/login.html

@@ -1,12 +1,12 @@
-{% extends 'base/base.html' %}
+{% extends 'theme/base.html' %}
 
-{% block content %}
+{% block main %}
 
   <section class="bg-gray-50 dark:bg-gray-900">
   <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
       <a href="#" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
           <img class="w-8 h-8 mr-2" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg" alt="logo">
-          Flowbite
+          Shoppy
       </a>
       <div class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
           <div class="p-6 space-y-4 md:space-y-6 sm:p-8">

users/urls.py

@@ -1,7 +1,11 @@
 from django.urls import path
-
+from users.views import login, register, reset_password
 
 app_name = "users"
 
 
-urlpatterns = []
+urlpatterns = [
+    path("login/", login, name="login"),
+    path("register/", register, name="register"),
+    path("reset-password/", reset_password, name="reset-password"),
+]

users/views.py

@@ -0,0 +1,18 @@
+from django.views.generic import TemplateView
+
+
+class LoginView(TemplateView):
+    template_name = 'users/login.html'
+
+
+class RegisterView(TemplateView):
+    template_name = 'users/register.html'
+
+
+class ResetPasswordView(TemplateView):
+    template_name = 'users/reset-password.html'
+
+
+login = LoginView.as_view()
+register = RegisterView.as_view()
+reset_password = ResetPasswordView.as_view()