# Flowbite-Based Jinja Components
A collection of Flowbite component developed as Jinja Layout Templates and Macros.
## Getting Started for Flask
For a pre-configured starter repo both web and desktop app, goto: <https://github.com/schaveyt/jinja-flowbite-web-desktop-demo>
Otherwise start from scratch following the steps below:
1. Add the `jinja-flowbite` package to your python environment
- Option 1: Add it to your `requirements.txt`
- Option 2: Add it to your `pyproject.toml` if you are using `poetry`
- Option 3: Install to your global packages: `pip install jinja-flowbite`
1. Register the `jinja_flowbite` package to the Flask runtime
```python
from flask import Flask
import jinja2
app = Flask(__name__,)
app.jinja_env.auto_reload = True
enhanced_loader = jinja2.ChoiceLoader([
jinja2.PackageLoader("jinja_flowbite", ""),
app.jinja_loader
])
app.jinja_loader = template_loader
```
1. Register the `jinja-flowbite` source file with Tailwind configurations
> NOTE: Below is a standard flowbite setup with the key addition of adding the
> `jinja-flowbite` package .jinja files to the `content` section.
```json
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
".your_app_folder/templates/**/*.{html,jinja}",
"./src/static/js/**/*.js",
"./node_modules/flowbite/**/*.js",
"./venv/Lib/site-packages/jinja_flowbite/**/*.{html,jinja}",
],
darkMode: 'class',
theme: {
extend: {
colors: {
primary: { "50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd", "400": "#60a5fa", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8", "800": "#1e40af", "900": "#1e3a8a", "950": "#172554" }
},
maxHeight: {
'table-xl': '60rem',
}
},
fontFamily: {
'body': [
'Inter',
'ui-sans-serif',
'system-ui',
'-apple-system',
'system-ui',
'Segoe UI',
'Roboto',
'Helvetica Neue',
'Arial',
'Noto Sans',
'sans-serif',
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji'
],
'sans': [
'Inter',
'ui-sans-serif',
'system-ui',
'-apple-system',
'system-ui',
'Segoe UI',
'Roboto',
'Helvetica Neue',
'Arial',
'Noto Sans',
'sans-serif',
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji'
],
'mono': [
'ui-monospace',
'SFMono-Regular',
'MesloLGL Nerd Font Mono',
'Cascadia Mono',
'Courier New'
]
}
},
plugins: [
require('flowbite/plugin')
],
}
```
1. In your HTML template, import the Components and use as Jinja macros
```html
{% import "jinja_flowbite/controls/button.jinja" as Button %}
{% import 'jinja_flowbite/controls/card.jinja' as Card %}
<div class="flex flex-col items-center space-y-6">
{{ Card.render(title="This is a card") }}
{{ Button.render(text="Click me") }}
<div>
```
1. IMPORTANT - Rebuild the application's css file
- For example:
```sh
npx tailwindcss -i ./{{ FLASK_APP_DIR_NAME }}/static/css/app.css -o ./{{ FLASK_APP_DIR_NAME }}/static/css/app.min.css"
```
## Create an Full Application Shell (Flask)
1. Perform all the above getting started setup steps.
1. Create a directory structure something like this:
```sh
_ my_app/
|_ static/
|_ css
|_ app.css # contains tailwindcss instructions and your custom classes
|_ app.min.css # generated by tailwindcss npm tool
|_ js
|_ jinja-flowbite-app.js # will contain dark mode toggle logic
|_ templates/
|_ components/
|_ footer.jinja # your custom footer content
|_ sidebar.jinja # your custom side bar content
|_ layouts/
|_ main_layout.html # layout with header, sidebar, and footer
|_ pages/
|_ index.html # template for the / route
|_ index.py # code for the / route
```
1. In the `jinja-flowbite-app.js`, add the following code:
```js
// HANDLE DARK MODE ----------------------------------------------------------------------------
var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
// Change the icons inside the button based on previous settings
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)) {
themeToggleLightIcon.classList.remove('hidden');
} else {
themeToggleDarkIcon.classList.remove('hidden');
}
var themeToggleBtn = document.getElementById('theme-toggle');
themeToggleBtn.addEventListener('click', function() {
// toggle icons inside button
themeToggleDarkIcon.classList.toggle('hidden');
themeToggleLightIcon.classList.toggle('hidden');
// if set via local storage previously
if (localStorage.getItem('color-theme')) {
if (localStorage.getItem('color-theme') === 'light') {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
}
// if NOT set via local storage previously
} else {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
}
}
});
```
1. In the `templates/layout/main_layout.html` add the following content:
```jinja
{% import 'jinja_flowbite/icons/flowbite_logo.jinja' as flowbite_flowbite_icon %}
{% import 'jinja_flowbite/controls/dark_mode_toggle.jinja' as flowbite_dark_mode_toggle %}
{% extends "jinja_flowbite/layouts/main_layout.jinja" %}
{% block flowbite_head_app_css_links_outlet %}
<link href="{{url_for('static',filename='css/app.min.css')}}" rel="stylesheet" />
{% endblock %}
{% block flowbite_head_scripts_outlet %}
<script src="{{url_for('static',filename='js/htmx.2.0.1.min.js')}}"></script>
{% endblock %}
{% block flowbite_body_scripts_outlet %}
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.4.1/dist/flowbite.min.js"></script>
<script src="{{url_for('static',filename='js/jinja-flowbite-app.js')}}"></script>
{% endblock %}
{% block flowbite_header_content_left_outlet %}
<!-- Application Title -->
<a class="flex items-center ml-2 sm:ml-0" data-enhance-nav="false">
{{ flowbite_flowbite_icon.render(width_css_class="w-8", width_css_class="h-8", class="text-primary-500 mr-3" ) }}
<a href="/" class="self-center text-2xl font-semibold whitespace-nowrap text-white"> Application Title </a>
</a>
{% endblock %}
{% block flowbite_header_content_right_outlet %}
{{ flowbite_dark_mode_toggle.render(class="mr-1" ) }}
{% endblock %}
{% block flowbite_page_sidebar_outlet %}
{% include "components/sidebar_content.jinja" %}
{% endblock %}
{% block flowbite_footer_content_outlet %}
{% include "components/footer_content.jinja" %}
{% endblock %}
{% block flowbite_page_body_outlet %}
{% block page_body %}{% endblock %}
{% endblock %}
```
1. In the `templates/components/footer.jinja` add the following content:
```jinja
<!-- left side footer -->
<div role="footer-left-controls" class="flex items-center">
<p> Left side text</p>
</div>
<!-- right side footer -->
<div>
<div id="app-version" class="text-sm mr-2 flex space-x-2 items-center">
<span>Application Title</span>
<span>v0.1</span>
</div>
</div>
```
1. In the `templates/components/footer.jinja` add the following content:
```jinja
<!-- left side footer -->
<div role="footer-left-controls" class="flex items-center">
<p> Left side text</p>
</div>
<!-- right side footer -->
<div>
<div id="app-version" class="text-sm mr-2 flex space-x-2 items-center">
<span>Application Title</span>
<span>v0.1</span>
</div>
</div>
```
1. In the `templates/components/sidebar.jinja` add the following content:
```jinja
{% set inactive_classes = "hover:bg-gray-100 dark:hover:bg-gray-700" %}
{% set active_classes = "bg-primary-300 dark:bg-primary-800" %}
<div class="py-5 px-3">
<ul class="pt-5 mt-5 space-y-2 border-t border-gray-200 dark:border-gray-700">
<!-- Home NavItem -->
<li>
{% set nav_active_classes = active_classes if 'home' in request.endpoint else inactive_classes %}
<a href="/home"
class="flex items-center p-2 text-base font-medium text-gray-900 rounded-lg transition duration-75 dark:text-white group {{ nav_active_classes }}">
<svg aria-hidden="true"
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
<path fill-rule="evenodd"
d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
clip-rule="evenodd"></path>
</svg>
<span class="ml-3">Home</span>
</a>
</li>
<!-- Help NavItem -->
<li>
{% set nav_active_classes = active_classes if 'help' in request.endpoint else inactive_classes %}
<a href="/help"
class="flex items-center p-2 text-base font-medium text-gray-900 rounded-lg transition duration-75 dark:text-white group {{ nav_active_classes }}">
<svg aria-hidden="true"
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.525a3.997 3.997 0 00.078-2.183l1.562-1.562C15.802 8.249 16 9.1 16 10zm-5.165 3.913l1.58 1.58A5.98 5.98 0 0110 16a5.976 5.976 0 01-2.516-.552l1.562-1.562a4.006 4.006 0 001.789.027zm-4.677-2.796a4.002 4.002 0 01-.041-2.08l-.08.08-1.53-1.533A5.98 5.98 0 004 10c0 .954.223 1.856.619 2.657l1.54-1.54zm1.088-6.45A5.974 5.974 0 0110 4c.954 0 1.856.223 2.657.619l-1.54 1.54a4.002 4.002 0 00-2.346.033L7.246 4.668zM12 10a2 2 0 11-4 0 2 2 0 014 0z"
clip-rule="evenodd"></path>
</svg>
<span class="ml-3">Help</span>
</a>
</li>
</ul>
</div>
```
1. In the `templates/pages/home_page.html` add the following content:
```jinja
{% extends "layouts/main_layout.html" %}
{% block page_body %}
<p class="text-3xl">Home</p>
{% endblock %}
```
1. In the `templates/pages/home_page.py` add the following content:
```python
from flask import render_template
from my_app.webapp import app
@app.route("/")
def index_page():
return render_template("pages/home_page.html",
page_title="Home")
```
1. In the `templates/pages/help_page.html` add the following content:
```jinja
{% extends "layouts/main_layout.html" %}
{% block page_body %}
<p class="text-3xl">Help</p>
{% endblock %}
```
1. In the `templates/pages/help_page.py` add the following content:
```python
from flask import render_template
from my_app.webapp import app
@app.route("/")
def index_page():
return render_template("pages/help_page.html",
page_title="Help")
```
1. Run the application and one should see the following:
- custom header
- custom footer
- custom sidebar
- the sidebar highlights the active page
>END OF DOCUMENT
Raw data
{
"_id": null,
"home_page": "https://github.com/schaveyt/jinja-flowbite",
"name": "jinja-flowbite",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.9",
"maintainer_email": null,
"keywords": "python flask jinja flowbite htmx",
"author": "Todd Schavey",
"author_email": "schaveyt@gmail.com",
"download_url": null,
"platform": "any",
"description": "# Flowbite-Based Jinja Components\r\n\r\nA collection of Flowbite component developed as Jinja Layout Templates and Macros.\r\n\r\n## Getting Started for Flask\r\n\r\nFor a pre-configured starter repo both web and desktop app, goto: <https://github.com/schaveyt/jinja-flowbite-web-desktop-demo>\r\n\r\nOtherwise start from scratch following the steps below:\r\n\r\n1. Add the `jinja-flowbite` package to your python environment\r\n\r\n - Option 1: Add it to your `requirements.txt`\r\n - Option 2: Add it to your `pyproject.toml` if you are using `poetry`\r\n - Option 3: Install to your global packages: `pip install jinja-flowbite`\r\n\r\n1. Register the `jinja_flowbite` package to the Flask runtime\r\n\r\n ```python\r\n from flask import Flask\r\n import jinja2\r\n\r\n app = Flask(__name__,)\r\n app.jinja_env.auto_reload = True\r\n\r\n enhanced_loader = jinja2.ChoiceLoader([\r\n jinja2.PackageLoader(\"jinja_flowbite\", \"\"),\r\n app.jinja_loader\r\n ])\r\n\r\n app.jinja_loader = template_loader\r\n ```\r\n\r\n1. Register the `jinja-flowbite` source file with Tailwind configurations\r\n\r\n > NOTE: Below is a standard flowbite setup with the key addition of adding the\r\n > `jinja-flowbite` package .jinja files to the `content` section.\r\n\r\n ```json\r\n /** @type {import('tailwindcss').Config} */\r\n module.exports = {\r\n \r\n content: [\r\n \".your_app_folder/templates/**/*.{html,jinja}\",\r\n \"./src/static/js/**/*.js\",\r\n \"./node_modules/flowbite/**/*.js\",\r\n \"./venv/Lib/site-packages/jinja_flowbite/**/*.{html,jinja}\",\r\n ],\r\n darkMode: 'class',\r\n theme: {\r\n extend: {\r\n colors: {\r\n primary: { \"50\": \"#eff6ff\", \"100\": \"#dbeafe\", \"200\": \"#bfdbfe\", \"300\": \"#93c5fd\", \"400\": \"#60a5fa\", \"500\": \"#3b82f6\", \"600\": \"#2563eb\", \"700\": \"#1d4ed8\", \"800\": \"#1e40af\", \"900\": \"#1e3a8a\", \"950\": \"#172554\" }\r\n },\r\n maxHeight: {\r\n 'table-xl': '60rem',\r\n }\r\n },\r\n fontFamily: {\r\n 'body': [\r\n 'Inter',\r\n 'ui-sans-serif',\r\n 'system-ui',\r\n '-apple-system',\r\n 'system-ui',\r\n 'Segoe UI',\r\n 'Roboto',\r\n 'Helvetica Neue',\r\n 'Arial',\r\n 'Noto Sans',\r\n 'sans-serif',\r\n 'Apple Color Emoji',\r\n 'Segoe UI Emoji',\r\n 'Segoe UI Symbol',\r\n 'Noto Color Emoji'\r\n ],\r\n 'sans': [\r\n 'Inter',\r\n 'ui-sans-serif',\r\n 'system-ui',\r\n '-apple-system',\r\n 'system-ui',\r\n 'Segoe UI',\r\n 'Roboto',\r\n 'Helvetica Neue',\r\n 'Arial',\r\n 'Noto Sans',\r\n 'sans-serif',\r\n 'Apple Color Emoji',\r\n 'Segoe UI Emoji',\r\n 'Segoe UI Symbol',\r\n 'Noto Color Emoji'\r\n ],\r\n 'mono': [\r\n 'ui-monospace',\r\n 'SFMono-Regular',\r\n 'MesloLGL Nerd Font Mono', \r\n 'Cascadia Mono',\r\n 'Courier New'\r\n ]\r\n }\r\n },\r\n plugins: [\r\n require('flowbite/plugin')\r\n ],\r\n }\r\n ```\r\n\r\n1. In your HTML template, import the Components and use as Jinja macros\r\n\r\n ```html\r\n {% import \"jinja_flowbite/controls/button.jinja\" as Button %}\r\n {% import 'jinja_flowbite/controls/card.jinja' as Card %}\r\n\r\n <div class=\"flex flex-col items-center space-y-6\">\r\n \r\n {{ Card.render(title=\"This is a card\") }}\r\n\r\n {{ Button.render(text=\"Click me\") }}\r\n\r\n <div>\r\n ```\r\n\r\n1. IMPORTANT - Rebuild the application's css file\r\n\r\n - For example:\r\n\r\n ```sh\r\n npx tailwindcss -i ./{{ FLASK_APP_DIR_NAME }}/static/css/app.css -o ./{{ FLASK_APP_DIR_NAME }}/static/css/app.min.css\"\r\n ```\r\n \r\n\r\n## Create an Full Application Shell (Flask)\r\n\r\n1. Perform all the above getting started setup steps.\r\n\r\n1. Create a directory structure something like this:\r\n\r\n ```sh\r\n _ my_app/\r\n |_ static/\r\n |_ css\r\n |_ app.css # contains tailwindcss instructions and your custom classes\r\n |_ app.min.css # generated by tailwindcss npm tool\r\n |_ js\r\n |_ jinja-flowbite-app.js # will contain dark mode toggle logic \r\n |_ templates/\r\n |_ components/\r\n |_ footer.jinja # your custom footer content\r\n |_ sidebar.jinja # your custom side bar content\r\n |_ layouts/\r\n |_ main_layout.html # layout with header, sidebar, and footer\r\n |_ pages/\r\n |_ index.html # template for the / route\r\n |_ index.py # code for the / route\r\n ```\r\n\r\n1. In the `jinja-flowbite-app.js`, add the following code:\r\n\r\n ```js\r\n // HANDLE DARK MODE ----------------------------------------------------------------------------\r\n\r\n var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');\r\n var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');\r\n\r\n // Change the icons inside the button based on previous settings\r\n if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && \r\n window.matchMedia('(prefers-color-scheme: dark)').matches)) {\r\n themeToggleLightIcon.classList.remove('hidden');\r\n } else {\r\n themeToggleDarkIcon.classList.remove('hidden');\r\n }\r\n\r\n var themeToggleBtn = document.getElementById('theme-toggle');\r\n\r\n themeToggleBtn.addEventListener('click', function() {\r\n\r\n // toggle icons inside button\r\n themeToggleDarkIcon.classList.toggle('hidden');\r\n themeToggleLightIcon.classList.toggle('hidden');\r\n\r\n // if set via local storage previously\r\n if (localStorage.getItem('color-theme')) {\r\n if (localStorage.getItem('color-theme') === 'light') {\r\n document.documentElement.classList.add('dark');\r\n localStorage.setItem('color-theme', 'dark');\r\n } else {\r\n document.documentElement.classList.remove('dark');\r\n localStorage.setItem('color-theme', 'light');\r\n }\r\n\r\n // if NOT set via local storage previously\r\n } else {\r\n if (document.documentElement.classList.contains('dark')) {\r\n document.documentElement.classList.remove('dark');\r\n localStorage.setItem('color-theme', 'light');\r\n } else {\r\n document.documentElement.classList.add('dark');\r\n localStorage.setItem('color-theme', 'dark');\r\n }\r\n }\r\n \r\n });\r\n ```\r\n\r\n1. In the `templates/layout/main_layout.html` add the following content:\r\n\r\n ```jinja\r\n {% import 'jinja_flowbite/icons/flowbite_logo.jinja' as flowbite_flowbite_icon %}\r\n {% import 'jinja_flowbite/controls/dark_mode_toggle.jinja' as flowbite_dark_mode_toggle %}\r\n\r\n {% extends \"jinja_flowbite/layouts/main_layout.jinja\" %}\r\n\r\n {% block flowbite_head_app_css_links_outlet %}\r\n <link href=\"{{url_for('static',filename='css/app.min.css')}}\" rel=\"stylesheet\" />\r\n {% endblock %}\r\n\r\n {% block flowbite_head_scripts_outlet %}\r\n <script src=\"{{url_for('static',filename='js/htmx.2.0.1.min.js')}}\"></script>\r\n {% endblock %}\r\n\r\n\r\n {% block flowbite_body_scripts_outlet %}\r\n <script src=\"https://cdn.jsdelivr.net/npm/flowbite@2.4.1/dist/flowbite.min.js\"></script>\r\n <script src=\"{{url_for('static',filename='js/jinja-flowbite-app.js')}}\"></script>\r\n {% endblock %}\r\n\r\n\r\n {% block flowbite_header_content_left_outlet %}\r\n <!-- Application Title -->\r\n <a class=\"flex items-center ml-2 sm:ml-0\" data-enhance-nav=\"false\">\r\n {{ flowbite_flowbite_icon.render(width_css_class=\"w-8\", width_css_class=\"h-8\", class=\"text-primary-500 mr-3\" ) }}\r\n <a href=\"/\" class=\"self-center text-2xl font-semibold whitespace-nowrap text-white\"> Application Title </a>\r\n </a>\r\n {% endblock %}\r\n\r\n\r\n {% block flowbite_header_content_right_outlet %}\r\n {{ flowbite_dark_mode_toggle.render(class=\"mr-1\" ) }}\r\n {% endblock %}\r\n\r\n\r\n {% block flowbite_page_sidebar_outlet %}\r\n {% include \"components/sidebar_content.jinja\" %}\r\n {% endblock %}\r\n\r\n\r\n {% block flowbite_footer_content_outlet %}\r\n {% include \"components/footer_content.jinja\" %}\r\n {% endblock %}\r\n\r\n\r\n {% block flowbite_page_body_outlet %}\r\n\r\n {% block page_body %}{% endblock %}\r\n\r\n {% endblock %}\r\n ```\r\n\r\n1. In the `templates/components/footer.jinja` add the following content:\r\n\r\n ```jinja\r\n <!-- left side footer -->\r\n <div role=\"footer-left-controls\" class=\"flex items-center\">\r\n <p> Left side text</p>\r\n </div>\r\n\r\n <!-- right side footer --> \r\n <div>\r\n <div id=\"app-version\" class=\"text-sm mr-2 flex space-x-2 items-center\">\r\n <span>Application Title</span>\r\n <span>v0.1</span>\r\n </div>\r\n \r\n </div>\r\n ```\r\n\r\n1. In the `templates/components/footer.jinja` add the following content:\r\n\r\n ```jinja\r\n <!-- left side footer -->\r\n <div role=\"footer-left-controls\" class=\"flex items-center\">\r\n <p> Left side text</p>\r\n </div>\r\n\r\n <!-- right side footer --> \r\n <div>\r\n <div id=\"app-version\" class=\"text-sm mr-2 flex space-x-2 items-center\">\r\n <span>Application Title</span>\r\n <span>v0.1</span>\r\n </div>\r\n \r\n </div>\r\n ```\r\n\r\n1. In the `templates/components/sidebar.jinja` add the following content:\r\n\r\n ```jinja\r\n\r\n {% set inactive_classes = \"hover:bg-gray-100 dark:hover:bg-gray-700\" %}\r\n {% set active_classes = \"bg-primary-300 dark:bg-primary-800\" %}\r\n\r\n <div class=\"py-5 px-3\">\r\n\r\n <ul class=\"pt-5 mt-5 space-y-2 border-t border-gray-200 dark:border-gray-700\">\r\n\r\n <!-- Home NavItem -->\r\n <li>\r\n {% set nav_active_classes = active_classes if 'home' in request.endpoint else inactive_classes %}\r\n <a href=\"/home\"\r\n class=\"flex items-center p-2 text-base font-medium text-gray-900 rounded-lg transition duration-75 dark:text-white group {{ nav_active_classes }}\">\r\n <svg aria-hidden=\"true\"\r\n class=\"flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white\"\r\n fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M9 2a1 1 0 000 2h2a1 1 0 100-2H9z\"></path>\r\n <path fill-rule=\"evenodd\"\r\n d=\"M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n <span class=\"ml-3\">Home</span>\r\n </a>\r\n </li>\r\n\r\n\r\n <!-- Help NavItem -->\r\n <li>\r\n {% set nav_active_classes = active_classes if 'help' in request.endpoint else inactive_classes %}\r\n <a href=\"/help\"\r\n class=\"flex items-center p-2 text-base font-medium text-gray-900 rounded-lg transition duration-75 dark:text-white group {{ nav_active_classes }}\">\r\n <svg aria-hidden=\"true\"\r\n class=\"flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white\"\r\n fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.525a3.997 3.997 0 00.078-2.183l1.562-1.562C15.802 8.249 16 9.1 16 10zm-5.165 3.913l1.58 1.58A5.98 5.98 0 0110 16a5.976 5.976 0 01-2.516-.552l1.562-1.562a4.006 4.006 0 001.789.027zm-4.677-2.796a4.002 4.002 0 01-.041-2.08l-.08.08-1.53-1.533A5.98 5.98 0 004 10c0 .954.223 1.856.619 2.657l1.54-1.54zm1.088-6.45A5.974 5.974 0 0110 4c.954 0 1.856.223 2.657.619l-1.54 1.54a4.002 4.002 0 00-2.346.033L7.246 4.668zM12 10a2 2 0 11-4 0 2 2 0 014 0z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n <span class=\"ml-3\">Help</span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n\r\n </div>\r\n\r\n\r\n ```\r\n\r\n1. In the `templates/pages/home_page.html` add the following content:\r\n\r\n ```jinja\r\n {% extends \"layouts/main_layout.html\" %}\r\n {% block page_body %}\r\n\r\n <p class=\"text-3xl\">Home</p>\r\n \r\n {% endblock %}\r\n ```\r\n\r\n1. In the `templates/pages/home_page.py` add the following content:\r\n\r\n ```python\r\n from flask import render_template\r\n from my_app.webapp import app\r\n\r\n @app.route(\"/\")\r\n def index_page():\r\n return render_template(\"pages/home_page.html\",\r\n page_title=\"Home\")\r\n ```\r\n\r\n\r\n1. In the `templates/pages/help_page.html` add the following content:\r\n\r\n ```jinja\r\n {% extends \"layouts/main_layout.html\" %}\r\n {% block page_body %}\r\n <p class=\"text-3xl\">Help</p>\r\n {% endblock %}\r\n ```\r\n\r\n1. In the `templates/pages/help_page.py` add the following content:\r\n\r\n ```python\r\n from flask import render_template\r\n from my_app.webapp import app\r\n\r\n @app.route(\"/\")\r\n def index_page():\r\n return render_template(\"pages/help_page.html\",\r\n page_title=\"Help\")\r\n ```\r\n\r\n1. Run the application and one should see the following:\r\n\r\n - custom header\r\n - custom footer\r\n - custom sidebar\r\n - the sidebar highlights the active page\r\n \r\n>END OF DOCUMENT\r\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Flowbite-Based Jinja Components",
"version": "0.4.dev14",
"project_urls": {
"Homepage": "https://github.com/schaveyt/jinja-flowbite"
},
"split_keywords": [
"python",
"flask",
"jinja",
"flowbite",
"htmx"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "38e63dcbaa5e2c552fba864416cfc4a82cdf3cf4153b0295e3e3285e2d75ff3b",
"md5": "97ab22eec11761ba553ad0c50f572969",
"sha256": "b66b6c91c9798b0fb9bb0cdae9b082e5d749c4c37738562c17d316a301a9272b"
},
"downloads": -1,
"filename": "jinja_flowbite-0.4.dev14-py3-none-any.whl",
"has_sig": false,
"md5_digest": "97ab22eec11761ba553ad0c50f572969",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.9",
"size": 50646,
"upload_time": "2024-12-20T17:35:15",
"upload_time_iso_8601": "2024-12-20T17:35:15.501657Z",
"url": "https://files.pythonhosted.org/packages/38/e6/3dcbaa5e2c552fba864416cfc4a82cdf3cf4153b0295e3e3285e2d75ff3b/jinja_flowbite-0.4.dev14-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-12-20 17:35:15",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "schaveyt",
"github_project": "jinja-flowbite",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"requirements": [
{
"name": "setuptools",
"specs": [
[
"==",
"69.5.1"
]
]
},
{
"name": "wheel",
"specs": [
[
"==",
"0.43.0"
]
]
},
{
"name": "jinja2",
"specs": [
[
"==",
"3.1.4"
]
]
},
{
"name": "twine",
"specs": []
}
],
"lcname": "jinja-flowbite"
}
JSON
