removed vite plugin

README.md

@@ -72,10 +72,10 @@ python src/manage.py runserver --setting=core.settings.local # local settings
 python src/manage.py runserver --setting=core.settings.production # production settings
 ```
 
-- Run the vite server
+- Run the tailwind watch
 
 ```shell
-make vite
+make t-watch
 ```
 
 ## Docs

build.sh

@@ -3,9 +3,5 @@
 set -o errexit
 
 poetry install
-
-make npm-install
-make npm-build
-
 python src/manage.py collectstatic --no-input
 python src/manage.py migrate

docs/README.md

@@ -78,10 +78,10 @@ python src/manage.py runserver --setting=core.settings.local # local settings
 python src/manage.py runserver --setting=core.settings.production # production settings
 ```
 
-- Run the vite server
+- Run the tailwind watch
 
 ```shell
-make vite
+make t-watch
 ```
 
 ## Docs

pyproject.toml

@@ -19,7 +19,6 @@ mysqlclient = "^2.2.0"
 django-invitations = "^2.0.0"
 django-htmx = "^1.17.0"
 django-mdeditor = "^0.1.20"
-django-vite-plugin = "^1.3.3"
 django-guardian = "^2.4.0"
 gunicorn = "^21.2.0"
 environ = "^1.0"

src/base/templates/base/feed_component.html

@@ -1,50 +1,52 @@
 {% load static %}
 {% for room in page_obj.object_list %}
  {% if forloop.last and page_obj.has_next %}
- <div class="roomListRoom"
- hx-get="{% url 'home' %}?page={{ page_obj.number|add:1 }}"
- hx-trigger="revealed"
- hx-swap="afterend"
- hx-indicator="#spinner">
- {% else %}
- <div class="roomListRoom ">
- {% endif %}
- <div class="roomListRoom__header">
- <a href="{% url 'user-profile' room.host.username %}"
- class="roomListRoom__author">
- <div class="avatar avatar--small {% if room.host.id in request.online_now_ids %}active{% endif %}">
- <img height="30" width="30" src="{{ room.host.avatar }}" alt="user-avatar" />
- </div>
- <span>@{{ room.host.username }}</span>
- </a>
- <div class="roomListRoom__actions">
- <span>{{ room.created|timesince }} ago</span>
+ <div class="roomListRoom"
+ hx-get="{% url 'home' %}?page={{ page_obj.number|add:1 }}"
+ hx-trigger="revealed"
+ hx-swap="afterend"
+ hx-indicator="#spinner"
+ >
+ {% else %}
+ <div class="roomListRoom ">
+ {% endif %}
+ <div class="roomListRoom__header">
+ <a href="{% url 'user-profile' room.host.username %}"
+ class="roomListRoom__author">
+ <div class="avatar avatar--small {% if room.host.id in request.online_now_ids %}active{% endif %}">
+ <img height="30" width="30" src="{{ room.host.avatar }}" alt="user-avatar" />
  </div>
+ <span>@{{ room.host.username }}</span>
+ </a>
+ <div class="roomListRoom__actions">
+ <span>{{ room.created|timesince }} ago</span>
  </div>
- <div class="roomListRoom__content">
- {% comment %} <a href="{% url 'room' room. %}">{{room.name}}</a> {% endcomment %}
- <a href="{{ room.get_absolute_url }}">{{ room.name }}</a>
- </div>
- <div class="roomListRoom__meta">
- <a href="{% url 'room' room.slug %}" class="roomListRoom__joined">
- {% if room.type == 'private' %}
- {% comment %} <span class="roomListRoom__topic">{{room.type}}</span> {% endcomment %}
- <button class="bg-dark-medium px-4 py-2 rounded-full border border-dark-light"
- type="submit">
- <img height="30"
- width="30"
- src="{% static 'images/icons/lock-2.svg' %}"
- alt="lock">
- </button>
- {% endif %}
- <img height="30"
- width="30"
- src="{% static 'images/icons/user-group.svg' %}"
- alt="lock">
- {{ room.participants_count }} Joined
- </a>
- <p class="roomListRoom__topic">{{ room.topic.name }}</p>
- </div>
+ </div>
+
+ <div class="roomListRoom__content">
+ {% comment %} <a href="{% url 'room' room. %}">{{room.name}}</a> {% endcomment %}
+ <a href="{{ room.get_absolute_url }}">{{ room.name }}</a>
+ </div>
+
+ <div class="roomListRoom__meta">
+ <a href="{% url 'room' room.slug %}" class="roomListRoom__joined">
+ {% if room.type == 'private' %}
+ {% comment %} <span class="roomListRoom__topic">{{room.type}}</span> {% endcomment %}
+ <button class="bg-dark-medium px-4 py-2 rounded-full border border-dark-light"
+ type="submit">
+ <img height="30"
+ width="30"
+ src="{% static 'images/icons/lock-2.svg' %}"
+ alt="lock">
+ </button>
+ {% endif %}
+ <img height="30"
+ width="30"
+ src="{% static 'images/icons/user-group.svg' %}"
+ alt="lock">
+ {{ room.participants_count }} Joined
+ </a>
+ <p class="roomListRoom__topic">{{ room.topic.name }}</p>
  </div>
  </div>
 {% endfor %}

src/core/settings/base.py

@@ -75,7 +75,6 @@
  "django_extensions",
  "easyaudit",
  "mdeditor",
- "django_vite_plugin",
  "django_structlog",
  # my apps
  "accounts.apps.AccountsConfig",

src/package.json

@@ -4,10 +4,8 @@
  "description": "",
  "main": "",
  "scripts": {
- "dev": "vite",
- "build": "vite build",
- "preview": "vite preview",
- "start": "vite"
+ "build": "tailwindcss -i ./static/styles/tailwind.css -o ./static/styles/out.css --minify",
+ "dev": "tailwindcss -i ./static/styles/tailwind.css -o ./static/styles/out.css --watch"
  },
  "author": "Shahryar Tayeb <shahryar.dev@gmail.com>",
  "license": "ISC",
@@ -18,7 +16,5 @@
  "vite": "^4.4.0"
  },
  "dependencies": {
- "django-vite-plugin": "^2.0.0",
- "htmx.org": "^1.9.3"
  }
 }

src/static/js/main.js

@@ -1,9 +1,5 @@
-import htmx from "htmx.org";
 import "./htmx-extensions.js";
 
-window.htmx = htmx;
-
-
 // Menu
 const dropdownMenu = document.querySelector(".dropdown-menu");
 const dropdownButton = document.querySelector(".dropdown-button");

src/templates/main.html

@@ -1,5 +1,4 @@
 {% load static %}
-{% load vite %}
 <!DOCTYPE html>
 <html lang="en">
  <head>
@@ -10,7 +9,7 @@
  href="{% static 'images/favicon.ico' %}"
  type="image/x-icon" />
  <meta name="theme-color" content="cyan" />
- {% vite 'styles/tailwind.css' %}
+ <link rel="stylesheet" href="{% static 'styles/out.css' %}">
  {% block meta_tags %}
  <meta name="title"
  content="StudyBuddy - Find study partners around the world!"
@@ -66,11 +65,16 @@
  <div class="progress bg-dark h-1">
  <div class="indeterminate bg-dark-light"></div>
  </div>
+
  {% include "components/navbar.html" %}
  <div id="messages">{% include "components/messages.html" %}</div>
+
  {% block content %}
  {% endblock content %}
- {% vite "js/main.js" %}
+
+ <script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
+ <script src="{% static 'js/main.js' %}"></script>
+
  {% block extra_scripts %}
  {% endblock extra_scripts %}
  </body>