Skip to content

New theme #252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
stuartmaxwell merged 4 commits into from
Jun 16, 2026
Merged

New theme #252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3a92961
Work on new blog theme
stuartmaxwell Apr 22, 2026
b5a1e65
Merge branch 'main' into new-theme
stuartmaxwell Apr 23, 2026
a351b69
Merge branch 'main' into new-theme
stuartmaxwell Jun 16, 2026
0b5e70e
Theme updates
stuartmaxwell Jun 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 9 additions & 16 deletions .pre-commit-config.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,30 +16,23 @@ repos:
rev: "1.30.0" # replace with latest tag on GitHub
hooks:
- id: django-upgrade
args: [--target-version, "6.0"] # Replace with Django version
args: [--target-version, "5.1"] # Replace with Django version
- repo: https://github.com/astral-sh/ruff-pre-commit
# Ruff version.
rev: v0.15.12
rev: v0.15.17
hooks:
# Run the linter.
- id: ruff-check
types_or: [python, pyi]
args: [--fix]
# Run the formatter.
- id: ruff-format
types_or: [python, pyi]
- repo: https://github.com/djlint/djLint
rev: v1.36.4
hooks:
- id: djlint-reformat-django
- id: djlint-django
- id: ruff
args: [--fix, --exit-non-zero-on-fix]
- repo: https://github.com/pre-commit/mirrors-prettier
rev: v4.0.0-alpha.8
hooks:
- id: prettier
types_or:
- css
- xml
additional_dependencies:
- prettier@2.5.1
- "@prettier/plugin-xml@1.2.0"
- repo: https://github.com/UnknownPlatypus/djangofmt-pre-commit
rev: v0.2.10
hooks:
- id: djangofmt
- id: djangofmt-svg
21 changes: 20 additions & 1 deletion config/settings.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@
"contact_form",
"home",
"debugging_app",
"djpress_blog_theme",
]

if DEBUG:
Expand Down Expand Up @@ -266,7 +267,7 @@
DJPRESS_SETTINGS = {
"SITE_TITLE": SITE_TITLE,
"POST_PREFIX": POST_PREFIX,
"THEME": "stuartmnz",
"THEME": "djpress_blog_theme",
"DATABASE_SETTINGS_ENABLED": True,
"AUTHOR_ENABLED": True,
"MARKDOWN_RENDERER": "config.markdown_renderer.mistune_renderer",
Expand All @@ -276,19 +277,37 @@
],
"PLUGIN_SETTINGS": {
"djpress_publish_mastodon": {
"enabled": True,
"instance_url": "https://fosstodon.org",
"access_token": MASTODON_ACCESS_TOKEN,
"status_message": "🚀 I created a new blog post!\n\n",
"base_url": "https://stuartm.nz/",
"microblog_category": "microblog",
},
"djpress_publish_bluesky": {
"enabled": True,
"handle": "stuartm.nz",
"app_password": BLUESKY_APP_PASSWORD,
"site_url": "https://stuartm.nz/",
"post_message": "🚀 I created a new blog post!",
},
},
"THEME_SETTINGS": {
"djpress_blog_theme": {
"bg_sidebar": "#0C4B33",
"dark_bg_sidebar": "#041e14",
"avatar_url": "/static/img/avatar.jpg",
"email_address": "stuart@amanzi.nz",
"mastodon_profile": "https://fosstodon.org/@stuartm",
"github_username": "stuartmaxwell",
"linkedin_username": "smaxwell",
"copyright_message": (
"Content is "
'<a rel="license" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>. '
"Share away!"
),
},
},
}

# Email configuration
Expand Down
71 changes: 71 additions & 0 deletions markdown_editor/static/markdown_editor/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
.markdown-editor {
.toolbar {
display: flex;
/*align-items: center;*/
justify-content: space-between;
gap: 4px; /* Space between buttons */
padding: 6px;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom: none; /* Merges with the text area below */
border-radius: 8px 8px 0 0; /* Rounds only the top corners */
}

.toolbar button {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: none;
border-radius: 4px;
color: #444;
cursor: pointer;
transition: background 0.2s;
}

/* Hover effect */
.toolbar button:hover {
background-color: #f0f0f0;
color: #000;
}

/* Visual vertical line to group tools */
.separator {
width: 1px;
height: 20px;
background-color: #ddd;
margin: 0 4px;
}
.toolbar-title {
font-weight: bold;
color: #666;
}
.button-cluster {
display: flex;
gap: 12px; /* Space between the distinct sub-groups */
}
.button-group {
display: flex;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden; /* Clips the inner button corners */
}

.button-group button {
border: none;
border-radius: 0;
border-right: 1px solid #ddd;
}

.button-group button:last-child {
border-right: none;
}
#preview {
border: 1px solid #ddd;
border-radius: 0 0 8px 8px;
padding: 0.5em;
}
}
208 changes: 78 additions & 130 deletions markdown_editor/templates/markdown_editor/markdown_editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,132 +1,80 @@
{% extends "_base.html" %}
{% extends "djpress/djpress_blog_theme/base.html" %}
{% load static %}
{% block title %}Markdown Editor{% endblock %}
{% block head_close %}
<link href="{% static "css/highlight.custom.css" %}" rel="stylesheet">
{% endblock head_close %}
{% block main_classes %}container-fluid{% endblock %}
{% block main %}
<main class="container-fluid">
<div class="row">
<div class="col-12 col-lg-6">
<div id="markdown-editor-toolbar"
class="btn-toolbar mb-0 border rounded rounded-bottom-0 p-0 text-bg-light d-flex align-items-center">
<div class="fw-bold fst-italic px-2 text-body-secondary">
Markdown Editor <small class="d-lg-none">(Preview below)</small>
</div>
<div class="btn-group">
<button type="button"
class="btn btn-light rounded-0 py-1 px-2"
id="h1-button"
title="Header 1">
{% include "markdown_editor/svg/h1.svg" %}
<span class="visually-hidden">Header 1 Button</span>
</button>
<button type="button"
class="btn btn-light rounded-0 py-1 px-2"
id="h2-button"
title="Header 2">
{% include "markdown_editor/svg/h2.svg" %}
<span class="visually-hidden">Header 2 Button</span>
</button>
<button type="button"
class="btn btn-light rounded-0 py-1 px-2"
id="h3-button"
title="Header 3">
{% include "markdown_editor/svg/h3.svg" %}
<span class="visually-hidden">Header 3 Button</span>
</button>
</div>
<div class="vr"></div>
<div class="btn-group">
<button type="button"
class="btn btn-light rounded-0 py-1 px-2"
id="bold-button"
title="Bold">
{% include "markdown_editor/svg/bold.svg" %}
<span class="visually-hidden">Bold Button</span>
</button>
<button type="button"
class="btn btn-light rounded-0 py-1 px-2"
id="italic-button"
title="Italic">
{% include "markdown_editor/svg/italic.svg" %}
<span class="visually-hidden">Italic Button</span>
</button>
</div>
<div class="vr"></div>
<div class="btn-group">
<button type="button"
class="btn btn-light rounded-0 py-1 px-2"
id="ul-button"
title="Unordered List">
{% include "markdown_editor/svg/list-ul.svg" %}
<span class="visually-hidden">Unordered List Button</span>
</button>
<button type="button"
class="btn btn-light rounded-0 py-1 px-2"
id="ol-button"
title="Ordered List">
{% include "markdown_editor/svg/list-ol.svg" %}
<span class="visually-hidden">Ordered List Button</span>
</button>
</div>
<div class="vr"></div>
<button type="button"
class="btn btn-light rounded-0 py-1 px-2"
id="blockquote-button"
title="Blockquote">
{% include "markdown_editor/svg/quote.svg" %}
<span class="visually-hidden">Blockquote Button</span>
</button>
<button type="button"
class="btn btn-light rounded-0 py-1 px-2"
id="code-button"
title="Inline code">
{% include "markdown_editor/svg/code.svg" %}
<span class="visually-hidden">Inline Code Button</span>
</button>
<button type="button"
class="btn btn-light rounded-0 py-1 px-2"
id="link-button"
title="Insert Link">
{% include "markdown_editor/svg/link.svg" %}
<span class="visually-hidden">Link Button</span>
</button>
<div class="btn-group ms-auto">
<button type="button"
class="btn btn-light rounded-0 rounded-top-1 rounded-start-0 py-1 px-2"
id="copymarkdown-button">
{% include "markdown_editor/svg/copy.svg" %}
<span class="visually-hidden">Copy Markdown Button</span>
</button>
</div>
{% block head %}
<link href='{% static "markdown_editor/css/styles.css" %}' rel="stylesheet">
<link href='{% static "css/highlight.custom.css" %}' rel="stylesheet">
<script src='{% static "js/main.bundle.min.js" %}'></script>
<script src='{% static "js/markdown.bundle.min.js" %}'></script>
{% endblock head %}
{% block content %}
<main class="markdown-editor">
<div style="display: grid; grid-template-columns: 1fr 1 fr); gap: 20px">
<section>
<div class="toolbar">
<div class="toolbar-title">Markdown Editor</div>
<div class="button-cluster">
<div class="button-group">
<button type="button" id="h1-button" title="Header 1">
{% include "markdown_editor/svg/h1.svg" %}
</button>
<button type="button" id="h2-button" title="Header 2">
{% include "markdown_editor/svg/h2.svg" %}
</button>
<button type="button" id="h3-button" title="Header 3">
{% include "markdown_editor/svg/h3.svg" %}
</button>
</div>
<div class="seperator"></div>
<div class="button-group">
<button type="button" id="bold-button" title="Bold">
{% include "markdown_editor/svg/bold.svg" %}
</button>
<button type="button" id="italic-button" title="Italic">
{% include "markdown_editor/svg/italic.svg" %}
</button>
</div>
<div class="seperator"></div>
<div class="button-group">
<button type="button" id="ul-button" title="Unordered List">
{% include "markdown_editor/svg/list-ul.svg" %}
</button>
<button type="button" id="ol-button" title="Ordered List">
{% include "markdown_editor/svg/list-ol.svg" %}
</button>
</div>
<div class="seperator"></div>
<div class="button-group">
<button type="button" id="blockquote-button" title="Blockquote">
{% include "markdown_editor/svg/quote.svg" %}
</button>
<button type="button" id="code-button" title="Inline code">
{% include "markdown_editor/svg/code.svg" %}
</button>
<button type="button" id="link-button" title="Insert Link">
{% include "markdown_editor/svg/link.svg" %}
</button>
</div>
</div>
<div class="button-group">
<button type="button" id="copymarkdown-button">
{% include "markdown_editor/svg/copy.svg" %}
</button>
</div>
</div>
<textarea
style="height: calc(100vh - 140px); width: 100%; resize: none; overflow-y: auto"
id="editor"
></textarea>
</section>
<section>
<div class="toolbar">
<div class="toolbar-title">HTML Preview</div>
<div class="button-group">
<button type="button" id="copyhtml-button">{% include "markdown_editor/svg/copy.svg" %}</button>
</div>
</div>
<div id="preview" style="height: calc(100vh - 140px); word-wrap: anywhere" class="content-body"></div>
</section>
</div>
<textarea class="form-control w-100 overflow-auto border border-top-0 rounded-top-0 p-2"
style="height: calc(100vh - 140px);
resize: none;
overflow-y: auto"
id="editor"></textarea>
</div>
<div class="col-12 col-lg-6">
<div class="border rounded rounded-bottom-0 p-0 text-bg-light d-flex justify-content-between align-items-center">
<div class="fw-bold fst-italic px-2 text-body-secondary">HTML Preview</div>
<button type="button"
class="btn btn-light py-1 px-2 rounded-0 rounded-top-1 rounded-start-0"
id="copyhtml-button">
{% include "markdown_editor/svg/copy.svg" %}
<span class="visually-hidden">Copy HTML Button</span>
</button>
</div>
<div id="preview"
class="w-100 overflow-auto border rounded border-top-0 rounded-top-0 p-2"
style="height: calc(100vh - 140px);
word-wrap: anywhere"></div>
</div>
</div>
</main>
{% endblock main %}
{% block js_body_close %}
<script src="{% static "js/main.bundle.min.js" %}"></script>
<script src="{% static "js/markdown.bundle.min.js" %}"></script>
{% endblock js_body_close %}
</main>
{% endblock content %}
Loading
Loading