Skip to content

up to Blades CSS v2.4.3, syntax highlighting via PrismJS, and other visual improvements #22

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

Open
tonystar wants to merge 5 commits into
base: main
Choose a base branch
from
Open

up to Blades CSS v2.4.3, syntax highlighting via PrismJS, and other visual improvements #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
91af3eb
refactor: upgrade Blades CSS to 2.4.3 and avoid double-linking in pro…
tonystar Jun 17, 2026
7d2da3d
refactor footer: remove redundant footer list styles and apply unlist…
tonystar Jun 17, 2026
d8f6cb7
fix: project logo dark version
tonystar Jun 17, 2026
bb323e3
chore: integrate PrismJS for syntax highlighting and correct code blo…
tonystar Jun 17, 2026
21776bb
style: update footer grid layout for improved responsiveness
tonystar Jun 17, 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
2 changes: 1 addition & 1 deletion content/projects/jinja.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Jinja's philosophy is that while application logic belongs in Python if
possible, it shouldn't make the template designer's job difficult by
restricting functionality too much.

```jinja
```jinja2

@davidism davidism Jul 16, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This shouldn't matter.

{% extends "base.html" %}
{% block title %}Members{% endblock %}
{% block content %}
Expand Down
2 changes: 1 addition & 1 deletion content/projects/markupsafe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ to use in HTML and XML. Characters that have special meanings are replaced so
that they display as the actual characters. This mitigates injection attacks,
meaning untrusted user input can safely be displayed on a page.

```pycon
```python

@davidism davidism Jul 16, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not correct, the block here is "pycon" meaning "python console".

>>> from markupsafe import Markup, escape

>>> # escape replaces special characters and wraps in Markup
Expand Down
6 changes: 3 additions & 3 deletions content/projects/quart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ async def greet():
return 'Hello, World!'
```

```
$ export QUART_APP=hello:app
$ quart run
```sh
export QUART_APP=hello:app
quart run
```
8 changes: 0 additions & 8 deletions src/pallets/static/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,6 @@ footer {
align-items: start;
}

footer ul {
display: grid;
}

footer ul li {
list-style-type: none;
}

.title-replace {
position: absolute;
width: 1px;
Expand Down
10 changes: 5 additions & 5 deletions src/pallets/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@
<section>
{{ page.content_html | safe }}
</section>
<section style="display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(16ch, 21%, 100%), 1fr)); gap: var(--pico-spacing);">
<section style="display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(16ch, 21%, 100%), 1fr)); gap: var(--pico-spacing); row-gap: 2rem;">
{% for title in ("Flask", "Quart", "Jinja", "Click", "Werkzeug", "ItsDangerous", "MarkupSafe") %}
{% set name = title.lower() %}
<p>
<a href="projects/{{ name }}"><img src="/static/content/projects/{{ name }}-logo.svg" style="height: 3em;"></a>
<a href="projects/{{ name }}" class="contrast"><strong>{{ title }}</strong></a>
</p>
<a href="projects/{{ name }}" class="contrast" style="align-items: center;">
<i><img src="/static/content/projects/{{ name }}-logo.svg" style="height: 3em; margin: 0;"></i>
<strong>{{ title }}</strong>
</a>
{% endfor %}
</section>
{% endblock %}
4 changes: 2 additions & 2 deletions src/pallets/templates/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<title>Pallets</title>
<link rel=icon href="/static/pallets-logo.svg">
<link rel="alternate" type="application/atom+xml" title="Blog" href="{{ url_for(".blog_feed") }}">
<link rel=stylesheet href="https://cdn.jsdelivr.net/npm/@anyblades/blades@2.3.1/css/blades.min.css">
<link rel=stylesheet href="https://cdn.jsdelivr.net/npm/@anyblades/blades@2.4.3/css/blades.min.css">
<link rel=stylesheet href="/static/style.css">
{% block extra_head %}{% endblock %}
</head>
Expand All @@ -29,7 +29,7 @@
<main class="container">
{% block page %}{% endblock %}
</main>
<footer class="container grid">
<footer class="container unlist-all grid" style="grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));">
<ul>
<li><strong>Policies</strong></li>
<li><a href="/security">Security</a></li>
Expand Down
12 changes: 8 additions & 4 deletions src/pallets/templates/project.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
{% extends "layout.html" %}

{% block extra_head %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-okaidia.min.css" />
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-core.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js" defer></script>
{% endblock %}

@davidism davidism Jul 16, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do not want to add prism.js. This is a Flask and Jinja app, it's possible to use pygments to style these blocks I just never got around to it. Syntax highlighting for small examples isn't a big priority for me right now.

{% block page %}
<section style="text-align: center;">
<h1 class="title-replace">{{ page.name }}</h1>
<img style="height: 6em;" src="/static/content/projects/{{ page.logo }}">
<img src="/static/content/projects/{{ page.logo }}" style="height: 6em; background: white; padding-right: 1em; border-radius: 0.6em;">
</section>
<nav>
<span></span>
<nav style="justify-content: center;">
<ul>
<li><a href="{{ page.docs }}">Documentation</a></li>
<li><a href="{{ page.pypi }}">Releases on PyPI</a></li>
<li><a href="{{ page.github }}">Source on GitHub</a></li>
</ul>
<span></span>
</nav>
<section>
{{ page.content_html | safe }}
Expand Down
Loading