Tailwind Integration (new version 2.0.0)

.gitignore

@@ -127,3 +127,6 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+
+# Static files
+/static/

blog/templates/blog.html

@@ -1,49 +1,55 @@
-{% extends '_base.html' %}
-{% load static %}
+{% extends "base/_base.html" %}
 {% load markdown_extras %}
-
-{% block title %}{{blog.title}}{% endblock %}
-
-{% block metas %}
-<!-- Primary Meta Tags -->
-<meta name="title" content="{{blog.title}}">
-<meta name="description"
-      content="{{blog.abstract}}">
-<!-- Open Graph / Facebook -->
-<meta property="og:type" content="website">
-<meta property="og:url" content="{% url 'blog' blog.slug %}">
-<meta property="og:title"
-      content="{{blog.title}}">
-<meta property="og:description"
-      content="{{blog.abstract}}">
-<!-- Twitter -->
-<meta property="twitter:card" content="summary_large_image">
-<meta property="twitter:url" content="{% url 'blog' blog.slug %}">
-<meta property="twitter:title"
-      content="{{blog.title}}">
-<meta property="twitter:description"
-      content="{{blog.abstract}}">
-{% endblock %}
-
-{% block addon_link %}
-<link rel="stylesheet" href="{% static 'css/blog.css' %}">
-{% endblock %}
-
-{% block blog_active %}active{% endblock %}
-
+{% load static %}
+<!-- Titles -->
+{% block title %}
+      PasteMe - {{ blog.title }}
+{% endblock title %}
+{% block meta_title %}
+      PasteMe - {{ blog.title }}
+{% endblock meta_title %}
+{% block meta_og_title %}
+      PasteMe - {{ blog.title }}
+{% endblock meta_og_title %}
+{% block meta_tw_title %}
+      {{ blog.title }}
+{% endblock meta_tw_title %}
+<!-- URLs -->
+{% block meta_og_url %}
+      {% url 'blog' blog.slug %}
+{% endblock meta_og_url %}
+{% block meta_tw_url %}
+      {% url 'blog' blog.slug %}
+{% endblock meta_tw_url %}
+<!-- Description -->
+{% block meta_og_desc %}
+      {{ blog.abstract }}
+{% endblock meta_og_desc %}
+{% block meta_tw_desc %}
+      {{ blog.abstract }}
+{% endblock meta_tw_desc %}
+{% block addon_style %}
+      <link rel="stylesheet" href="{% static 'css/themes/dark.min.css' %}"/>
+{% endblock addon_style %}
+{% block addon_script %}
+      <script src="{% static 'js/highlight.min.js' %}"></script>
+      <script>hljs.initHighlightingOnLoad();</script>
+{% endblock addon_script %}
 {% block content %}
-<section class="p-5">
-      <div class="container d-flex justify-content-center">
-      <div class="col-md-9">
-        <h1 class="title">{{blog.title}}</h1>
-        <p class="text-muted">Published on {{blog.published_at | date:'M d, Y'}} &#183;
-            {% for tag in blog.tags.all %}
-                  <span class="badge me-1 bg-black">{{tag.name}}</span>
-            {% endfor %%}
-        </p>
-        <h5 class="text-muted mt-4 mb-4 abstract">{{blog.abstract}}</h5>
-        <div class="body">{{blog.body | markdown | safe}}</div>
-      </div>
-      </div>
-</section>
-{% endblock %}
+      <section class="py-10">
+            <div class="container md:px-0 prose prose-emerald dark:prose-invert prose-pre:text-sm prose-code:rounded prose-code:whitespace-pre-wrap prose-hr:border-dashed prose-hr:border-t-2">
+                  <h1 class="mb-2">{{ blog.title }}</h1>
+                  <p class="text-sm">
+                        Published on {{ blog.published_at | date:'M d, Y' }}
+                        {% if blog.tags.all %}
+                              •
+                              {% for tag in blog.tags.all %}<span class="text-xs text-neutral-500 mr-1">#{{ tag.name }}</span>{% endfor %}
+                        {% endif %}
+                  </p>
+                  <h3>Abstract</h3>
+                  <h5 class="text-justify">{{ blog.abstract }}</h5>
+                  <hr/>
+                  <div class="text-justify">{{ blog.body | markdown | safe }}</div>
+            </div>
+      </section>
+{% endblock content %}

blog/templates/blogs.html

@@ -1,66 +1,105 @@
-{% extends '_base.html' %}
+{% extends 'base/_base.html' %}
 {% load static %}
-
-{% block title %}PasteMe - Blogs{% endblock %}
-
-{% block blog_active %}active{% endblock %}
-
-{% block metas %}
-<!-- Primary Meta Tags -->
-<meta name="title" content="PasteMe - Blogs">
-<meta name="description"
-      content="Follow the feed and keep up with the tech.">
-<!-- Open Graph / Facebook -->
-<meta property="og:type" content="website">
-<meta property="og:url" content="{% url 'blogs' %}">
-<meta property="og:title"
-      content="PasteMe - Blogs">
-<meta property="og:description"
-      content="Follow the feed and keep up with the tech.">
-<!-- Twitter -->
-<meta property="twitter:card" content="summary_large_image">
-<meta property="twitter:url" content="{% url 'blogs' %}">
-<meta property="twitter:title"
-      content="PasteMe - Blogs">
-<meta property="twitter:description"
-      content="Follow the feed and keep up with the tech.">
-{% endblock %}
-
-{% block body_css %}background: url('{% static 'img/banner.svg' %}') fixed;{% endblock %}
-
+<!-- Titles -->
+{% block title %}
+      PasteMe - Blogs
+{% endblock title %}
+{% block meta_title %}
+      PasteMe - Blogs
+{% endblock meta_title %}
+{% block meta_og_title %}
+      PasteMe - Blogs
+{% endblock meta_og_title %}
+{% block meta_tw_title %}
+      PasteMe - Blogs
+{% endblock meta_tw_title %}
+<!-- URLs -->
+{% block meta_og_url %}
+      {% url 'blogs' %}
+{% endblock meta_og_url %}
+{% block meta_tw_url %}
+      {% url 'blogs' %}
+{% endblock meta_tw_url %}
+<!-- Description -->
+{% block meta_desc %}
+      Follow the feed and keep up with the tech.
+{% endblock meta_desc %}
+{% block meta_og_desc %}
+      Follow the feed and keep up with the tech.
+{% endblock meta_og_desc %}
+{% block meta_tw_desc %}
+      Follow the feed and keep up with the tech.
+{% endblock meta_tw_desc %}
+{% block addon_script %}
+      <script src="{% static 'js/aos.js' %}"></script>
+      <script src="{% static 'js/app.js' %}"></script>
+{% endblock addon_script %}
 {% block content %}
-<section class="text-white" style="padding: 30px;">
-      <div class="container">
-          <div class="row align-items-center">
-            <div class="col-md">
-              <h2 class="fw-bold" style="line-height: 40px;">Welcome to the PasteMe Library!</h2>
-              <p align="justify">In library, our professional writers write awesome articles about tricks, best practices, implementations, and new technologes. Follow the feed and enjoy the blogs.</p>
+      <section class="py-6 md:py-10 text-black dark:text-white">
+            <div class="container"
+                 data-aos="fade-up"
+                 data-aos-duration="400"
+                 data-aos-delay="100"
+                 data-aos-once="true">
+                  <div class="flex flex-col md:flex-row items-center justify-center gap-6 md:gap-12">
+                        <div class="md:max-w-xl">
+                              <h2 class="text-3xl md:text-4xl lg:text-6xl font-bold text-center md:text-left mb-4 lg:mb-8">
+                                    Welcome to the PasteMe Library!
+                              </h2>
+                              <p class="mx-4 md:mx-0 text-justify lg:text-xl">
+                                    In library, our professional writers write awesome articles about tricks, best practices, implementations, and new technologes. Follow the feed and enjoy the blogs.
+                              </p>
+                              <div class="mt-8 md:mt-12 flex flex-col-reverse md:flex-row gap-4 md:gap-1 items-center justify-center md:justify-start select-none">
+                                    <svg xmlns="http://www.w3.org/2000/svg"
+                                         class="h-6 w-6 md:h-4 md:w-4 animate-bounce"
+                                         fill="none"
+                                         viewBox="0 0 24 24"
+                                         stroke="currentColor"
+                                         stroke-width="2">
+                                          <path stroke-linecap="round" stroke-linejoin="round" d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" />
+                                    </svg>
+                                    <p class="text-sm font-semibold">Scroll down for latest articles</p>
+                              </div>
+                        </div>
+                        <div class="order-first md:order-last" align="center">
+                              <img class="max-w-xs w-56 lg:w-72"
+                                   src="{% static 'img/reader_octocat.svg' %}"
+                                   alt="Octocat image"/>
+                        </div>
+                  </div>
+            </div>
+      </section>
+      <section class="py-12 text-black dark:text-white bg-white dark:bg-black transition-colors duration-300">
+            <div class="container flex flex-wrap gap-5"
+                 data-aos="fade-up"
+                 data-aos-duration="400"
+                 data-aos-delay="100"
+                 data-aos-once="true">
+                  {% if blogs.exists %}
+                        {% for blog in blogs %}
+                              <a href="{% url 'blog' blog.slug %}"
+                                 class="shrink grow basis-1/2 md:basis-1/3 lg:basis-1/4">
+                                    <div class="{% if blog.is_featured %}glow{% endif %} h-full p-4 bg-neutral-100 dark:bg-neutral-900 shadow-md rounded transition-colors duration-300 hover:bg-neutral-200 dark:hover:bg-neutral-800 group">
+                                          <div class="flex flex-col-reverse md:flex-row items-baseline md:items-center justify-between gap-1 md:gap-2">
+                                                <h3 class="text-2xl font-extrabold">{{ blog.title }}</h3>
+                                                {% if blog.is_featured %}
+                                                      <span class="py-1 px-2 text-xs font-semibold bg-neutral-300 dark:bg-neutral-800 group-hover:bg-neutral-300 dark:group-hover:bg-neutral-700 text-neutral-500 rounded transition-colors duration-300">Featured</span>
+                                                {% endif %}
+                                          </div>
+                                          <p class="mt-1 mb-4 text-sm text-neutral-500 select-none">Published on {{ blog.published_at | date:'M d, Y' }}</p>
+                                          <h5 class="text-neutral-600 dark:text-neutral-400 select-none">{{ blog.abstract|truncatechars:85 }}</h5>
+                                          <p class="mt-2 text-xs text-neutral-500 flex flex-row flex-wrap gap-2">
+                                                {% for tag in blog.tags.all %}<span>#{{ tag.name }}</span>{% endfor %}
+                                          </p>
+                                    </div>
+                              </a>
+                        {% endfor %}
+                  {% else %}
+                        <div class="w-full flex flex-col items-center justify-center transition-colors duration-300">
+                              <h2 class="text-xl md:text-3xl lg:text-4xl font-bold text-center md:text-left mb-3">No feeds to follow up!</h2>
+                              <p class="text-center md:text-left text-neutral-500 font-semibold">No blog post found in the archive.</p>
+                        </div>
+                  {% endif %}
             </div>
-            <div class="col-md order-first order-md-last" align="center">
-              <img class="img-fluid" src="{% static 'img/reader_octocat.svg' %}" width="250">
-          </div>
-        </div>
-      </div>
-</section>
-<section class="p-4 font-dark bg-white">
-  <div class="container mb-3">
-    {% if blogs.exists %}
-      {% for blog in blogs %}
-      <div class="card card-body" style="border: unset;">
-            <a href="{% url 'blog' blog.slug %}" class="link-dark" style="text-decoration: unset;"><h3 class="card-title" style="font-family: Lora, serif"><b>{{blog.title}}</b></h3></a>
-            <p class="card-subtitle mb-2 text-muted">Published on {{blog.published_at | date:'M d, Y'}}</p>
-            <h5 class="card-text" style="font-family: Lora, serif">{{blog.abstract|truncatechars:85}}</h5>
-            <p class="card-text mt-1">
-                  {% for tag in blog.tags.all %}
-                  <span class="badge me-1 bg-black">{{tag.name}}</span>
-                  {% endfor %%}
-            </p>
-      </div>
-      {% endfor %}
-    {% else %}
-    <h2>No feeds to follow up!</h2>
-    <p>No blog post found in the archive.</p>
-    {% endif %}
-  </div>
-</section>
+      </section>
 {% endblock %}

pasteme/settings.py

@@ -10,6 +10,7 @@
 https://docs.djangoproject.com/en/4.0/ref/settings/
 """
 
+import os
 from contextlib import suppress
 from pathlib import Path
 
@@ -41,8 +42,11 @@
     "django.contrib.staticfiles",
     # 3rd parties
     "rest_framework",
+    "compressor",
+    "tailwind",
     "drf_yasg",
     # apps
+    "tailwindcss",
     "snippet",
     "blog",
     "pypi",
@@ -123,7 +127,7 @@
 # https://docs.djangoproject.com/en/4.0/howto/static-files/
 
 STATIC_URL = "/static/"
-STATIC_ROOT = "static/"
+STATIC_ROOT = BASE_DIR / "static"
 
 MEDIA_URL = "/media/"
 MEDIA_ROOT = "media/"
@@ -135,7 +139,25 @@
 
 DOMAIN_URL = "https://pasteme.pythonanywhere.com/"
 
-# Import local settings
+# Used for disclaimer view
+SITE_URL = "pasteme.pythonanywhere.com"
+
+# TailWindCSS settings
+TAILWIND_APP_NAME = "tailwindcss"
+
+INTERNAL_IPS = [
+    "127.0.0.1",
+]
 
+# Compressor settings
+STATICFILES_FINDERS = (
+    "django.contrib.staticfiles.finders.FileSystemFinder",
+    "django.contrib.staticfiles.finders.AppDirectoriesFinder",
+    "compressor.finders.CompressorFinder",
+)
+
+COMPRESS_ENABLED = True
+
+# Import local settings
 with suppress(ImportError):
     from .local_settings import *

pasteme/urls.py

@@ -1,5 +1,8 @@
+from django.conf import settings
+
 # from django.contrib import admin
 from django.urls import include, path
+from django.views.generic import TemplateView
 from drf_yasg import openapi
 from drf_yasg.views import get_schema_view
 from rest_framework import permissions
@@ -18,10 +21,18 @@
 )
 
 urlpatterns = [
-    # path('admin/', admin.site.urls),
+    # path("admin/", admin.site.urls),
     path(
         "apidocs/", schema_view.with_ui("redoc", cache_timeout=0), name="schema-redoc"
     ),
+    path(
+        "disclaimer/",
+        TemplateView.as_view(
+            template_name="disclaimer.html",
+            extra_context={"SITE_URL": settings.SITE_URL},
+        ),
+        name="disclaimer",
+    ),
     path("blog/", include("blog.urls")),
     path("", include("snippet.urls")),
 ]

pypi/constants.py

@@ -1,2 +1,5 @@
 # Github API Endpoint
 GITHUB_API_ROOT = "https://api.github.com/"
+
+# Contrib.rock Image URL
+DOWNLOAD_URL = "https://contrib.rocks/image?repo=collove/pasteme"

pypi/management/commands/update_contributors.py

@@ -0,0 +1,25 @@
+from os import path
+
+import urllib.request as request
+from django.core.management.base import BaseCommand
+
+from pypi.constants import DOWNLOAD_URL
+
+
+class Command(BaseCommand):
+    help = "Updates the contributors image on the homepage"
+
+    def handle(self, *args, **options):
+        CUR_DIR = path.dirname(path.realpath(__file__))
+        STAT_FILES_DIR = path.join(CUR_DIR, "../../../snippet/static/img/")
+        try:
+            request.urlretrieve(
+                DOWNLOAD_URL, path.join(STAT_FILES_DIR, "contributors.svg")
+            )
+            self.stdout.write(
+                self.style.SUCCESS("Successfully updated contributors image")
+            )
+        except Exception as e:
+            self.stdout.write(
+                self.style.ERROR(f"Error updating contributors image: {e}")
+            )