init

Author: hipertracker

.envrc

@@ -0,0 +1,3 @@
+use asdf
+layout poetry
+

.gitignore

@@ -0,0 +1,2 @@
+__pycache__
+.idea

Makefile

@@ -0,0 +1,2 @@
+.PHONY dev:
+	litestar run --reload --reload-dir=.

app.py

@@ -0,0 +1,56 @@
+from pathlib import Path
+
+from jinjax import Catalog
+from litestar import get, Litestar
+from litestar import post
+from litestar.config.compression import CompressionConfig
+from litestar.config.cors import CORSConfig
+from litestar.config.csrf import CSRFConfig
+from litestar.contrib.htmx.request import HTMXRequest
+from litestar.contrib.jinja import JinjaTemplateEngine
+from litestar.enums import MediaType
+from litestar.response import Response, Template
+from litestar.template.config import TemplateConfig
+
+catalog = Catalog()
+catalog.add_folder("components")
+
+compression_config = (CompressionConfig(backend="gzip", gzip_compress_level=9),)
+cors_config = CORSConfig(allow_origins=["*"])
+csrf_config = CSRFConfig(secret="my-secret")
+
+
+def render(*args, **kwargs) -> Response:
+    return Response(content=catalog.render(*args, **kwargs), media_type=MediaType.HTML)
+
+
+@get(path="/")
+async def index() -> Response:
+    return render("Welcome", message="Litestar + JinjaX with Tailwind+Flowbite example")
+
+
+#
+@post(path="/feedback", exclude_from_csrf=True)
+async def feedback(request: HTMXRequest) -> Response:
+    message = "Feedback from HTMX and JinjaX components"
+    return render("Feedback", message=message)
+
+
+@post(path="/feedback2", exclude_from_csrf=True)
+async def feedback2(request: HTMXRequest) -> Template:
+    message = "Feedback from HTMX and Jinja2 tmplates"
+    return Template(template_name="feedback.jinja2", context={"message": message})
+
+
+#
+app = Litestar(
+    route_handlers=[index, feedback, feedback2],
+    debug=True,
+    csrf_config=csrf_config,
+    cors_config=cors_config,
+    compression_config=CompressionConfig(backend="gzip", gzip_compress_level=9),
+    template_config=TemplateConfig(
+        engine=JinjaTemplateEngine,
+        directory=Path("templates"),
+    ),
+)

components/ContactForm.jinja

@@ -0,0 +1,24 @@
+<form class="max-w-sm mx-auto">
+    <div class="mb-5">
+        <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
+        <input type="email" id="email"
+            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            placeholder="[email protected]" required>
+    </div>
+    <div class="mb-5">
+        <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your password</label>
+        <input type="password" id="password"
+            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            required>
+    </div>
+    <div class="flex items-start mb-5">
+        <div class="flex items-center h-5">
+            <input id="remember" type="checkbox" value=""
+                class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800"
+                required>
+        </div>
+        <label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Remember me</label>
+    </div>
+    <button type="submit"
+        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
+</form>

components/Feedback.jinja

@@ -0,0 +1,2 @@
+{#def message = "HI!" #}
+<h4 class="text-red-500 font-bold">{{message}}!</h4>

components/Layout.jinja

@@ -0,0 +1,20 @@
+{#def title #}
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>{{ title }}</title>
+        <script defer src="//cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
+        <script src="//cdn.tailwindcss.com"></script>
+        <link href="//cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css" rel="stylesheet" />
+      <script src="https://unpkg.com/[email protected]" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
+
+    </head>
+
+    <body class="bg-gray-800 text-yellow-500">
+        {{ content }}
+    </body>
+
+</html>

components/Welcome.jinja

@@ -0,0 +1,25 @@
+{#def title = "Untitled", message #}
+
+<Layout title=title>
+    <h1 class="text-4xl">
+        {{ message }}
+    </h1>
+
+    <div x-data="{ count: 0 }" class="mt-4 mb-4">
+        <button x-on:click="count++"
+            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Alpine.js example</button>
+
+
+        <kbd x-text="count"
+            class="px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500" />
+
+    </div>
+
+  <button hx-post="/feedback" hx-target="#feedback" type="button" class="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">HTMX example</button>
+
+  <div id="feedback" class="mt-2 mb-2"></div>
+
+  <button hx-post="/feedback2" hx-target="#feedback2" type="button" class="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">HTMX example 2</button>
+
+  <div id="feedback2" class="mt-2"></div>
+</Layout>