Skip to content

Commit

Permalink
add htmx to this blog
Browse files Browse the repository at this point in the history
  • Loading branch information
WaylonWalker committed Jun 16, 2024
1 parent e3527ea commit de388bb
Show file tree
Hide file tree
Showing 14 changed files with 130 additions and 114 deletions.
5 changes: 5 additions & 0 deletions markata.toml
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ hooks = [
'plugins.post_model',
'plugins.thoughts',
"plugins.wikilink_hover",
"plugins.boosted_link",
# 'plugins.server',
# "markata.plugins.publish_source",
# "markata.plugins.publish_dev_to_source",
Expand Down Expand Up @@ -207,6 +208,10 @@ rel = "canonical"
href = "{{ config.url }}{{ post.slug }}/amp/"
rel = "amphtml"

[[markata.head.script]]
src='/htmx.min.js'


[[markata.head.meta]]
name = "og:url"
content = "{{ config.url }}{{ post.slug }}"
Expand Down
58 changes: 58 additions & 0 deletions plugins/boosted_link.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
from pathlib import Path
from typing import TYPE_CHECKING

from bs4 import BeautifulSoup
from markata.hookspec import hook_impl

if TYPE_CHECKING:
from bs4.element import Tag


def boosted_links(soup):
from urllib.parse import urljoin, urlparse

from bs4 import BeautifulSoup

base_url = "https://waylonwalker.com"

# Parse the HTML content
# soup = BeautifulSoup(html_content, 'html.parser')
site_domain = urlparse(base_url).netloc

# Find all <a> tags
for a_tag in soup.find_all("a", href=True):
# Resolve relative links to absolute URLs
absolute_url = urljoin(base_url, a_tag["href"])
parsed_url = urlparse(absolute_url)

# Check if the link points to the site's domain
if parsed_url.netloc == site_domain and not a_tag.has_attr("hx-boost"):
a_tag["hx-boost"] = "true"
# for a_tag in soup.find_all("a"):
# if not a_tag.has_attr("hx-boost"):
# a_tag["hx-boost"] = "true"
return soup


@hook_impl
def post_render(markata):
"Hook to replace youtubes on images.waylonwalker.com with mp4's if they exist"
should_prettify = markata.config.get("prettify_html", False)
with markata.cache as cache:
for article in markata.articles:
key = markata.make_hash("boosted_link", article.html)

html_from_cache = markata.precache.get(key)

if html_from_cache is None:
soup = BeautifulSoup(article.html, "lxml")
boosted_links(soup)
if should_prettify:
html = soup.prettify()
else:
html = str(soup)
cache.add(key, html)

else:
html = html_from_cache
article.html = html
10 changes: 7 additions & 3 deletions plugins/wikilink_hover.py
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,20 @@ def hover_links(soup):
"hover:z-20",
]
href = link.attrs.get("href")

prefix = ""
boost = ""
if not href.startswith("https://"):
href = f"https://waylonwalker.com/{href}"
boost = ' hx-boost="true"'
if link in wikilinks:
boost = ' hx-boost="true"'
if link in hoverlinks:
prefix = external_svg
else:
prefix = ""
title = link.text
img = f"""
<span class="z-10 group group-hover:z-20 relative inline-block">
<a class="wikilink text-pink-500 hover:underline" href="{href}" title="{title}">{prefix} {title}</a>
<a class="wikilink text-pink-500 hover:underline" href="{href}" title="{title}"{boost}>{prefix} {title}</a>
<button class="ml-2 text-pink-500 hover:underline focus:outline-none" aria-label="Preview">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="h-5 w-5 inline align-middle">
Expand Down
4 changes: 2 additions & 2 deletions plugins/youtube.py
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,9 @@ def post_render(markata):
should_prettify = markata.config.get("prettify_html", False)
with markata.cache as cache:
for article in markata.articles:
key = markata.make_hash(article.html)
key = markata.make_hash("youtube", article.html)

html_from_cache = cache.get(key)
html_from_cache = markata.precache.get(key)

if html_from_cache is None:
soup = BeautifulSoup(article.html, "lxml")
Expand Down
64 changes: 27 additions & 37 deletions static/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -1203,6 +1203,10 @@ video {
margin-bottom: 1.5rem;
}

.mb-8 {
margin-bottom: 2rem;
}

.ml-0 {
margin-left: 0px;
}
Expand Down Expand Up @@ -1239,10 +1243,6 @@ video {
margin-top: 2rem;
}

.mb-8 {
margin-bottom: 2rem;
}

.block {
display: block;
}
Expand Down Expand Up @@ -1536,6 +1536,10 @@ video {
border-width: 4px;
}

.border-b {
border-bottom-width: 1px;
}

.border-t {
border-top-width: 1px;
}
Expand All @@ -1544,14 +1548,6 @@ video {
border-top-width: 2px;
}

.border-b-2 {
border-bottom-width: 2px;
}

.border-b {
border-bottom-width: 1px;
}

.border-black {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity));
Expand All @@ -1562,6 +1558,11 @@ video {
border-color: rgb(31 41 55 / var(--tw-border-opacity));
}

.border-pink-500 {
--tw-border-opacity: 1;
border-color: rgb(236 72 153 / var(--tw-border-opacity));
}

.border-pink-800 {
--tw-border-opacity: 1;
border-color: rgb(157 23 77 / var(--tw-border-opacity));
Expand All @@ -1577,21 +1578,6 @@ video {
border-color: rgb(250 204 21 / var(--tw-border-opacity));
}

.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}

.border-gray-500 {
--tw-border-opacity: 1;
border-color: rgb(107 114 128 / var(--tw-border-opacity));
}

.border-pink-500 {
--tw-border-opacity: 1;
border-color: rgb(236 72 153 / var(--tw-border-opacity));
}

.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
Expand Down Expand Up @@ -1737,11 +1723,6 @@ video {
background-color: rgb(24 24 27 / var(--tw-bg-opacity));
}

.bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
Expand Down Expand Up @@ -1821,16 +1802,16 @@ video {
padding-bottom: 0.5rem;
}

.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}

.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}

.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}

.pb-0 {
padding-bottom: 0px;
}
Expand Down Expand Up @@ -1957,6 +1938,11 @@ video {
color: rgb(34 197 94 / var(--tw-text-opacity));
}

.text-indigo-500 {
--tw-text-opacity: 1;
color: rgb(99 102 241 / var(--tw-text-opacity));
}

.text-pink-400 {
--tw-text-opacity: 1;
color: rgb(244 114 182 / var(--tw-text-opacity));
Expand Down Expand Up @@ -2178,6 +2164,10 @@ video {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.\[a-zA-Z\:\\-\\\.\] {
a-z-a--z: \-\.;
}

.\[tool\:pytest\] {
tool: pytest;
}
Expand Down
1 change: 1 addition & 0 deletions static/htmx.min.js

Large diffs are not rendered by default.

46 changes: 0 additions & 46 deletions templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,52 +8,6 @@
<meta name="og:type" content="website" />
<title>{{post.title|e}}</title>
{% include 'head.html' %}
<!-- <meta name="og:title" name="og:title" content="{{post.title|e}}" /> -->
<!-- <meta name="twitter:title" name="twitter:title" content="{{post.title|e}}" /> -->
<!-- <meta name="twitter:card" content="summary_large_image"> -->
<!-- <meta name="og:image" name="og:image" -->
<!-- content="http://shots.wayl.one/shot/?url={{config.url}}{{slug}}&height=640&width=1280&scaled_width=1280&scaled_height=640" /> -->
<!-- <meta name="twitter:image" name="twitter:image" -->
<!-- content="http://shots.wayl.one/shot/?url={{config.url}}{{slug}}&height=600&width=1200&scaled_width=1200&scaled_height=600" /> -->
<!-- <meta name="og:image:height" content="640" /> -->
<!-- <meta name="og:image:width" content="1280" /> -->
<!-- <meta name="og:url" name="og:url" content="{{config.url}}/{{slug}}" /> -->
<!-- <meta name="description" name="description" content="{{description|e}}" /> -->
<!-- <meta name="og:description" name="og:description" content="{{description|e}}" /> -->
<!-- <meta name="twitter:description" name="twitter:description" content="{{description|e}}" /> -->
<!---->
<!-- <meta name="twitter:creator" content="@_waylonwalker"> -->
<!-- <meta name="og:author" content="Waylon Walker"> -->
<!-- <meta name="og:site_name" content="Waylon Walker"> -->
<!-- <meta name="og:author_email" content="[email protected]"> -->
<!-- <meta content="markata {{ __version__ }}" name="generator"> -->
<!-- <meta name="monetization" content="$ilp.uphold.com/MGN2ni2YMXaQ"> -->
<!-- <meta name="theme-color" content="#322D39"> -->
<!-- <link rel="authorization_endpoint" href="https://indieauth.com/auth"> -->
<!-- <link rel="token_endpoint" href="https://tokens.indieauth.com/token"> -->
<!-- <link rel="micropub" href="https://waylonwalker.com/archive"> -->
<!-- <link rel="webmention" href="https://webmention.io/waylonwalker.com/webmention" /> -->
<!---->
<!-- <link href="{{canonical_url}}" rel="canonical" /> -->
<!---->
<!-- <link rel="amphtml" href="https://waylonwalker.com/{{ slug }}/amp/" /> -->
<!-- <meta property="monetization" name="monetization" content="$ilp.uphold.com/MGN2ni2YMXaQ" /> -->

<!-- <link rel="preload" href="/app.css" as="style" onload="this.onload=null;this.rel='stylesheet'" /> -->
<!-- <noscript> -->
<!-- <link rel="stylesheet" href="/app.css" /> -->
<!-- </noscript> -->

<!-- <link rel="stylesheet" href="/app.css" /> -->
<!---->
<!-- <link href="/8bitcc_48x48.png" rel="apple-touch-icon" sizes="48x48" /> -->
<!-- <link href="/8bitcc_72x72.png" rel="apple-touch-icon" sizes="72x72" /> -->
<!-- <link href="/8bitcc_96x96.png" rel="apple-touch-icon" sizes="96x96" /> -->
<!-- <link href="/8bitcc_144x144.png" rel="apple-touch-icon" sizes="144x144" /> -->
<!-- <link href="/8bitcc_192x192.png" rel="apple-touch-icon" sizes="192x192" /> -->
<!-- <link href="/8bitcc_256x256.png" rel="apple-touch-icon" sizes="256x256" /> -->
<!-- <link href="/8bitcc_384x384.png" rel="apple-touch-icon" sizes="384x384" /> -->
<!-- <link href="/8bitcc_512x512.png" rel="apple-touch-icon" sizes="512x512" /> -->
<script>
navigator.serviceWorker.getRegistrations().then(function (registrations) {
for (let registration of registrations) {
Expand Down
2 changes: 1 addition & 1 deletion templates/card.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<li class="post group {{post.templateKey}} h-entry hentry">
<a href="/{{markata.config.path_prefix}}{{ post.slug }}/" class="u-url" rel="bookmark">
<a href="/{{markata.config.path_prefix}}{{ post.slug }}/" class="u-url" rel="bookmark" hx-boost="true">
{% if post.title | length > 50 %}
<h2 class="p-name entry-title">{{ post.title[:50] }}...</h2>
{% else %}
Expand Down
16 changes: 5 additions & 11 deletions templates/feed.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,18 @@
<h1 class="flair text-center">Post Archive</h1>
<ul class="archive-tags">
<li>
<a href="/python/"> python </a>
<a href="/python/" hx-boost="true"> python </a>
</li>
<li>
<a href="/linux/"> linux </a>
<a href="/linux/" hx-boost="true"> linux </a>
</li>
<li>
<a href="/vim/"> vim </a>
<a href="/vim/" hx-boost="true"> vim </a>
</li>
<li>
<a href="/kedro/"> kedro </a>
<a href="/kedro/" hx-boost="true"> kedro </a>
</li>
</ul>
<article id="posts" class="h-feed hfeed list archive-list">
<ul>
{% for post in feed.posts %}
{% include feed.config.card_template %}
{% endfor %}
</ul>
</article>
{% include 'feed_partial.html' %}
{% include 'footer.html' %}
{% endblock %}
7 changes: 7 additions & 0 deletions templates/feed_partial.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<article id="posts" class="h-feed hfeed list archive-list">
<ul>
{% for post in feed.posts %}
{% include feed.config.card_template %}
{% endfor %}
</ul>
</article>
6 changes: 3 additions & 3 deletions templates/nav.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<nav class='w-full bg-gray-950 py-4 mb-8 sticky border-b border-pink-500'>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/archive/">Archive</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/feeds/">RSS</a></li>
<li><a href="/archive/" hx-boost="true">Archive</a></li>
<li><a href="/about/" hx-boost="true">About</a></li>
<li><a href="/feeds/" hx-boost="true">RSS</a></li>
</ul>
</nav>
21 changes: 11 additions & 10 deletions templates/post.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
{% extends "base.html" %}
{% block content %}
{% include "nav.html" %}
<article class="blog-post h-entry">
{% include 'post-title.html' %}
{% include 'tags.html' %}
<div class="e-content" id="post-body" {{ 'data-pagefind-body' if post in markata.feeds.pagefind.posts else '' }}>
{{ body }}
</div>
<div id="show"></div>
</article>
{% include 'footer.html' %}
{% include "nav.html" %}
<article class="blog-post h-entry">
{% include 'post-title.html' %}
{% include 'tags.html' %}
<div class="e-content" id="post-body" {{ 'data-pagefind-body' if post in markata.feeds.pagefind.posts else '' }}>
{{ body }}
</div>
<div id="show"></div>
</article>
{% include 'recent.html' %}
{% include 'footer.html' %}
{% endblock %}
2 changes: 2 additions & 0 deletions templates/recent.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<h2 class="m-auto max-w-md text-sm text-center text-zinc-500 no-link">Recent Posts</h2>
<div hx-get='/recent/partial' hx-trigger='intersect once'></div>
2 changes: 1 addition & 1 deletion templates/tags.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ <h2 class="m-auto max-w-md text-sm text-center text-zinc-500 no-link">Tags</h2>
<ul class="flex flex-wrap justify-center p-0 m-auto max-w-md border-yellow-400 tags">
{% for tag in post.tags %}
<li class='px-4 list-none rounded-full ring-1 ring-pink-500'>
<a class="p-category" href="https://waylonwalker.com/{{ tag }}">{{ tag }}</a>
<a class="p-category" href="https://waylonwalker.com/{{ tag }}" hx-boost="true">{{ tag }}</a>
</li>
{% endfor %}
</ul>

0 comments on commit de388bb

Please sign in to comment.