bit-badger/myWebLog
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases 11 Activity

Add htmx support to bit-badger and personal

Browse Source 
- Tweak transitions on tech-blog
- Fix URL forwarding on settings save
- Add newer/older posts to tech-blog single post template
This commit is contained in:
Daniel J. Summers 2022-05-31 19:17:23 -04:00
parent 1fd2bfd08e
commit 7bd9b8d35c
12 changed files with 213 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/MyWebLog/Handlers/Admin.fs
View File

@ -298,7 +298,7 @@ let saveSettings : HttpHandler = fun next ctx -> task {
WebLogCache.set webLog WebLogCache.set webLog
do! addMessage ctx { UserMessage.success with message = "Web log settings saved successfully" } do! addMessage ctx { UserMessage.success with message = "Web log settings saved successfully" }
return! redirectToGet (WebLog.relativeUrl webLog (Permalink "admin")) next ctx return! redirectToGet (WebLog.relativeUrl webLog (Permalink "admin/settings")) next ctx
| None -> return! Error.notFound next ctx | None -> return! Error.notFound next ctx
} }

2
src/MyWebLog/appsettings.json
View File

@ -3,7 +3,7 @@
"hostname": "data02.bitbadger.solutions", "hostname": "data02.bitbadger.solutions",
"database": "myWebLog_dev" "database": "myWebLog_dev"
}, },
"Generator": "myWebLog 2.0-alpha20", "Generator": "myWebLog 2.0-alpha21",
"Logging": { "Logging": {
"LogLevel": { "LogLevel": {
"MyWebLog.Handlers": "Debug" "MyWebLog.Handlers": "Debug"

10
src/MyWebLog/themes/bit-badger/layout-partial.liquid Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ page_title }} &raquo; Bit Badger Solutions</title>
</head>
<body>
{{ content }}
</body>
</html>

8
src/MyWebLog/themes/bit-badger/layout.liquid
View File

@ -7,7 +7,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald|Raleway"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald|Raleway">
{% page_head -%} {% page_head -%}
</head> </head>
<body> <body hx-boost="true" hx-target="main" hx-indicator="#loadOverlay" hx-swap="innerHTML show:body:top">
<header class="site-header"> <header class="site-header">
<div class="header-logo"> <div class="header-logo">
<a href="{{ "" | relative_link }}"> <a href="{{ "" | relative_link }}">
@ -27,8 +27,9 @@
</a> </a>
</div> </div>
</header> </header>
{{ content }} <div class="load-overlay" id="loadOverlay"><h1>Loading&hellip;</h1></div>
<footer> <main>{{ content }}</main>
<footer hx-boost="false">
<div> <div>
<small> <small>
{% if logged_on -%} {% if logged_on -%}
@ -43,5 +44,6 @@
A <strong><a href="{{ "" | relative_link }}">Bit Badger Solutions</a></strong> original design A <strong><a href="{{ "" | relative_link }}">Bit Badger Solutions</a></strong> original design
</div> </div>
</footer> </footer>
{% page_foot %}
</body> </body>
</html> </html>

16
src/MyWebLog/themes/daniel-j-summers/layout-partial.liquid Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
{%- if is_home -%}
{{ web_log.name }}{% if web_log.subtitle %} | {{ web_log.subtitle.value }}{% endif %}
{%- else -%}
{{ page_title | strip_html }}{% if page_title and page_title != "" %} &raquo; {% endif %}{{ web_log.name }}
{%- endif -%}
</title>
</head>
<body>
{{ content }}
</body>
</html>

8
src/MyWebLog/themes/daniel-j-summers/layout.liquid
View File

@ -18,7 +18,7 @@
<script src="{{ "djs.js" | theme_asset }}"></script> <script src="{{ "djs.js" | theme_asset }}"></script>
{% page_head -%} {% page_head -%}
</head> </head>
<body> <body hx-boost="true" hx-target="main" hx-indicator="#loadOverlay" hx-swap="innerHTML show:body:top">
<nav class="site-header" role="navigation"> <nav class="site-header" role="navigation">
<p><a class="nav-home" href="{{ "" | relative_link }}">{{ web_log.name }}</a></p> <p><a class="nav-home" href="{{ "" | relative_link }}">{{ web_log.name }}</a></p>
{%- if web_log.subtitle %}<p>{{ web_log.subtitle.value }}</p>{% endif -%} {%- if web_log.subtitle %}<p>{{ web_log.subtitle.value }}</p>{% endif -%}
@ -31,7 +31,8 @@
</p> </p>
<p class="mobile"><a href="#links">Site Links</a></p> <p class="mobile"><a href="#links">Site Links</a></p>
</nav> </nav>
{{ content }} <div class="load-overlay" id="loadOverlay"><h1>Loading...</h1></div>
<main>{{ content }}</main>
<footer class="part-1" id="links"> <footer class="part-1" id="links">
{%- for page in page_list %} {%- for page in page_list %}
<p class="mobile"><a href="{{ page | relative_link }}">{{ page.title }}</a></p> <p class="mobile"><a href="{{ page | relative_link }}">{{ page.title }}</a></p>
@ -128,7 +129,7 @@
style="border-width:0;"> style="border-width:0;">
</a> </a>
</div> </div>
<div class="copy"> <div class="copy" hx-boost="false">
&nbsp; Licensed by the &nbsp; Licensed by the
<a rel="license noopener" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank"> <a rel="license noopener" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">
Creative Commons Attribution-NonCommercial 4.0 International License Creative Commons Attribution-NonCommercial 4.0 International License
@ -145,5 +146,6 @@
{%- endif %} {%- endif %}
</div> </div>
</footer> </footer>
{% page_foot %}
</body> </body>
</html> </html>

10
src/MyWebLog/themes/daniel-j-summers/single-post.liquid
View File

@ -53,16 +53,18 @@
<ul class="pager"> <ul class="pager">
{% if model.newer_link -%} {% if model.newer_link -%}
<li class="previous item"> <li class="previous item">
<h4 class="item-heading"><a href="{{ model.newer_link.value }}">&laquo;</a> Previous Post</h4> <h4 class="item-heading">
<a href="{{ model.newer_link.value }}">{{ model.newer_name.value }}</a> <a href="{{ model.newer_link.value | relative_link }}">&laquo;</a> Previous Post
</h4>
<a href="{{ model.newer_link.value | relative_link }}">{{ model.newer_name.value }}</a>
</li> </li>
{%- else -%} {%- else -%}
<li></li> <li></li>
{% endif %} {% endif %}
{% if model.older_link -%} {% if model.older_link -%}
<li class="next item"> <li class="next item">
<h4 class="item-heading">Next Post <a href="{{ model.older_link.value }}">&raquo;</a></h4> <h4 class="item-heading">Next Post <a href="{{ model.older_link.value | relative_ling }}">&raquo;</a></h4>
<a href="{{ model.older_link.value }}">{{ model.older_name.value }}</a> <a href="{{ model.older_link.value | relative_link }}">{{ model.older_name.value }}</a>
</li> </li>
{%- endif -%} {%- endif -%}
</ul> </ul>

2
src/MyWebLog/themes/tech-blog/layout.liquid
View File

@ -69,7 +69,7 @@
</div> </div>
</aside> </aside>
</div> </div>
<footer> <footer class="site-footer">
<span> <span>
A production of A production of
<a href="https://bitbadger.solutions" title="Bit Badger Solutions" target="_blank" rel="noopener" <a href="https://bitbadger.solutions" title="Bit Badger Solutions" target="_blank" rel="noopener"

48
src/MyWebLog/themes/tech-blog/single-post.liquid
View File

@ -3,13 +3,14 @@
<h1 class="entry-title"> <h1 class="entry-title">
{{ post.title }} {{ post.title }}
</h1> </h1>
<p class="entry-meta"> <header class="entry-header">
Posted by {{ model.authors | value: post.author_id }} on {{ post.published_on | date: "dddd, MMMM d, yyyy" }} <p>
at {{ post.published_on | date: "h:mm tt" | downcase }} Posted by {{ model.authors | value: post.author_id }} on {{ post.published_on | date: "dddd, MMMM d, yyyy" }}
</p> at {{ post.published_on | date: "h:mm tt" | downcase }}
</p>
{%- assign cat_count = post.category_ids | size -%} {%- assign cat_count = post.category_ids | size -%}
{%- if cat_count > 0 %} {%- if cat_count > 0 %}
<p class="entry-meta"> <p>
<small> <small>
Categorized under Categorized under
{% for cat_id in post.category_ids -%} {% for cat_id in post.category_ids -%}
@ -20,23 +21,38 @@
</small> </small>
</p> </p>
{%- endif %} {%- endif %}
</header>
<div class="entry-content">{{ post.text }}</div> <div class="entry-content">{{ post.text }}</div>
<div class="entry-footer"> <footer class="entry-footer">
{%- assign tag_count = post.tags | size -%} {%- assign tag_count = post.tags | size -%}
{%- if tag_count > 0 %} {%- if tag_count > 0 %}
<span> <p>
Tagged Tagged:
{% for tag in post.tags -%} {% for tag in post.tags -%}
<a href="{{ tag | tag_link }}" title="Tagged &ldquo;{{ tag | escape }}&rdquo;" <a href="{{ tag | tag_link }}" title="Tagged &ldquo;{{ tag | escape }}&rdquo;"
rel="tag">{{ tag }}</a>{% unless forloop.last %}, {% endunless %} rel="tag">{{ tag }}</a>{% unless forloop.last %}, {% endunless %}
{%- endfor %} {%- endfor %}
</span> &bull; </p>
{%- endif %} {%- endif %}
Bookmark the <p>
<a href="{{ post | absolute_link }}" rel="bookmark" Bookmark:
title="Permanent link to &ldquo;{{ post.title | strip_html | escape }}&rdquo;"> <a href="{{ post | absolute_link }}" rel="bookmark"
permalink title="Permanent link to &ldquo;{{ post.title | strip_html | escape }}&rdquo;">
</a> the permalink
{%- if logged_on %} &bull; <a href="{{ post | edit_post_link }}">Edit Post</a>{% endif %} </a>
</div> </p>
<p>{%- if logged_on %}Edit: <a href="{{ post | edit_post_link }}">this post</a>{% else %}&nbsp;{% endif %}</p>
{% if model.newer_link -%}
<p>
Next Newer Post:
<a href="{{ model.newer_link.value | relative_link }}">{{ model.newer_name.value }}</a>
</p>
{% endif %}
{% if model.older_link -%}
<p>
Next Older Post:
<a href="{{ model.older_link.value | relative_link }}">{{ model.older_name.value }}</a>
</p>
{%- endif -%}
</footer>
</article> </article>

52
src/MyWebLog/wwwroot/themes/bit-badger/style.css
View File

@ -306,3 +306,55 @@ footer {
footer a:link, footer a:visited { footer a:link, footer a:visited {
color: black; color: black;
} }
/* htmx "Loading" overlay */
.load-overlay {
position: fixed;
display: flex;
flex-flow: row;
align-items: center;
width: 95%;
margin-left: 2.5%;
height: 0;
z-index: 2000;
background-color: rgba(0, 0, 0, .5);
border-radius: 1rem;
animation: fadeOut .25s ease-in-out;
overflow: hidden;
}
.load-overlay h1 {
color: white;
background-color: rgba(0, 0, 0, .75);
margin-left: auto;
margin-right: auto;
border-radius: 1rem;
width: 50%;
padding: 1rem;
}
.load-overlay.htmx-request {
height: 80vh;
animation: fadeIn .25s ease-in-out;
}
@keyframes fadeIn {
0% {
opacity: 0;
height: 80vh;
}
100% {
opacity: 1;
height: 80vh;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
height: 80vh;
}
99% {
opacity: 0;
height: 80vh;
}
100% {
opacity: 0;
height: 0;
}
}

75
src/MyWebLog/wwwroot/themes/daniel-j-summers/style.css
View File

@ -6,12 +6,14 @@
--hdr-text-color: hsl(0, 0%, 100%); --hdr-text-color: hsl(0, 0%, 100%);
--hdr-bkg-color: hsl(0, 0%, 95%); --hdr-bkg-color: hsl(0, 0%, 95%);
--item-bkg-color: hsl(0, 0%, 100%); --item-bkg-color: hsl(0, 0%, 100%);
--overlay-bkg-color: rgba(0, 0, 0, .5)
} }
@media ( prefers-color-scheme: dark ) { @media ( prefers-color-scheme: dark ) {
:root { :root {
--text-color: rgb(210, 210, 210); --text-color: rgb(210, 210, 210);
--hdr-bkg-color: hsl(0, 0%, 7%); --hdr-bkg-color: hsl(0, 0%, 7%);
--item-bkg-color: hsl(0, 0%, 12%); --item-bkg-color: hsl(0, 0%, 12%);
--overlay-bgk-color: rgba(255, 255, 255, .2)
} }
} }
html { html {
@ -22,9 +24,6 @@ body {
font-size: 1.2rem; font-size: 1.2rem;
background-color: var(--bkg-color); background-color: var(--bkg-color);
margin: 0; margin: 0;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
color: var(--text-color); color: var(--text-color);
} }
a:link, a:visited { a:link, a:visited {
@ -62,6 +61,11 @@ sup {
sub { sub {
vertical-align: baseline; vertical-align: baseline;
} }
main {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.content img { .content img {
max-width: 100%; max-width: 100%;
border-radius: 1rem; border-radius: 1rem;
@ -92,6 +96,9 @@ sub {
background-image: -moz-linear-gradient(top, var(--accent-color), var(--bkg-color)); background-image: -moz-linear-gradient(top, var(--accent-color), var(--bkg-color));
background-image: linear-gradient(to bottom, var(--accent-color), var(--bkg-color)); background-image: linear-gradient(to bottom, var(--accent-color), var(--bkg-color));
} }
.site-header p {
margin: 0;
}
.site-header p a.nav-home { .site-header p a.nav-home {
font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-weight: bold; font-weight: bold;
@ -257,9 +264,60 @@ footer.part-3 {
white-space: nowrap; white-space: nowrap;
} }
/* ----- OVERLAY ----- */
.load-overlay {
position: fixed;
top: 4rem;
left: 1rem;
width: 50%;
height: 0;
z-index: 2000;
background-color: var(--overlay-bgk-color);
border-radius: 1rem;
animation: fadeOut .25s ease-in-out;
overflow: hidden;
}
.load-overlay h1 {
color: white;
background-color: rgba(0, 0, 0, .75);
margin: 1.5rem auto;
border-radius: 1rem;
width: 50%;
padding: 1rem;
text-align: center;
}
.load-overlay.htmx-request {
height: unset;
animation: fadeIn .25s ease-in-out;
}
@keyframes fadeIn {
0% {
opacity: 0;
height: unset;
}
100% {
opacity: 1;
height: unset;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
height: unset;
}
99% {
opacity: 0;
height: unset;
}
100% {
opacity: 0;
height: 0;
}
}
/* ----- SCALE UP STYLES ----- */ /* ----- SCALE UP STYLES ----- */
@media screen and ( min-width: 50rem ) { @media screen and ( min-width: 50rem ) {
body { main {
grid-template-columns: 1fr 16rem; grid-template-columns: 1fr 16rem;
} }
.desktop { .desktop {
@ -268,7 +326,14 @@ footer.part-3 {
.mobile { .mobile {
display: none; display: none;
} }
.site-header, .single, footer { .site-header p {
margin-inline-end: 1.2rem;
margin-bottom: 1rem;
}
.load-overlay {
width: 25%;
}
main > .single {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
.sidebar { .sidebar {

20
src/MyWebLog/wwwroot/themes/tech-blog/style.css
View File

@ -40,7 +40,7 @@ acronym {
border-bottom:dotted 1px black; border-bottom:dotted 1px black;
text-decoration: none; text-decoration: none;
} }
header, h1, h2, h3, footer a, .home-lead a, .highlight { .site-header, h1, h2, h3, .site-footer a, .home-lead a, .highlight {
font-family: var(--heading-fonts); font-family: var(--heading-fonts);
} }
h1 { h1 {
@ -162,7 +162,7 @@ article.page .metadata {
.strike { .strike {
text-decoration: line-through; text-decoration: line-through;
} }
footer { .site-footer {
padding: 20px 15px 10px 15px; padding: 20px 15px 10px 15px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -175,7 +175,7 @@ footer {
background-image: -moz-linear-gradient(top, var(--bkg-color), var(--edge-color)); background-image: -moz-linear-gradient(top, var(--bkg-color), var(--edge-color));
background-image: linear-gradient(to bottom, var(--bkg-color), var(--edge-color)); background-image: linear-gradient(to bottom, var(--bkg-color), var(--edge-color));
} }
footer a:link, footer a:visited { .site-footer a:link, .site-footer a:visited {
color: black; color: black;
} }
.alignleft { .alignleft {
@ -232,7 +232,7 @@ li {
@keyframes fadeIn { @keyframes fadeIn {
0% { 0% {
opacity: 0; opacity: 0;
height: 0; height: 80vh;
} }
100% { 100% {
opacity: 1; opacity: 1;
@ -350,15 +350,21 @@ li {
.entry-title { .entry-title {
line-height: 1; line-height: 1;
} }
.entry-meta { .entry-header {
font-size: 1rem;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
margin: 0 0 .5rem 0; font-size: 1rem;
} }
.entry-content { .entry-content {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
.entry-footer {
font-size: 85%;
border-top: solid 1px rgba(0, 0, 0, .2);
}
.entry-header p, .entry-footer p {
margin: .5rem 0;
}
.cat-list-count { .cat-list-count {
font-size: .8rem; font-size: .8rem;
} }