bit-badger/myWebLog
1
0
Fork 0
Code Issues 2 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
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
}

2
src/MyWebLog/appsettings.json
View File

@ -3,7 +3,7 @@
"hostname": "data02.bitbadger.solutions",
"database": "myWebLog_dev"
},
"Generator": "myWebLog 2.0-alpha20",
"Generator": "myWebLog 2.0-alpha21",
"Logging": {
"LogLevel": {
"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">
{% page_head -%}
</head>
<body>
<body hx-boost="true" hx-target="main" hx-indicator="#loadOverlay" hx-swap="innerHTML show:body:top">
<header class="site-header">
<div class="header-logo">
<a href="{{ "" | relative_link }}">
@ -27,8 +27,9 @@
</a>
</div>
</header>
{{ content }}
<footer>
<div class="load-overlay" id="loadOverlay"><h1>Loading&hellip;</h1></div>
<main>{{ content }}</main>
<footer hx-boost="false">
<div>
<small>
{% if logged_on -%}
@ -43,5 +44,6 @@
A <strong><a href="{{ "" | relative_link }}">Bit Badger Solutions</a></strong> original design
</div>
</footer>
{% page_foot %}
</body>
</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>
{% page_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">
<p><a class="nav-home" href="{{ "" | relative_link }}">{{ web_log.name }}</a></p>
{%- if web_log.subtitle %}<p>{{ web_log.subtitle.value }}</p>{% endif -%}
@ -31,7 +31,8 @@
</p>
<p class="mobile"><a href="#links">Site Links</a></p>
</nav>
{{ content }}
<div class="load-overlay" id="loadOverlay"><h1>Loading...</h1></div>
<main>{{ content }}</main>
<footer class="part-1" id="links">
{%- for page in page_list %}
<p class="mobile"><a href="{{ page | relative_link }}">{{ page.title }}</a></p>
@ -128,7 +129,7 @@
style="border-width:0;">
</a>
</div>
<div class="copy">
<div class="copy" hx-boost="false">
&nbsp; Licensed by the
<a rel="license noopener" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">
Creative Commons Attribution-NonCommercial 4.0 International License
@ -145,5 +146,6 @@
{%- endif %}
</div>
</footer>
{% page_foot %}
</body>
</html>

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

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

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

@ -69,7 +69,7 @@
</div>
</aside>
</div>
<footer>
<footer class="site-footer">
<span>
A production of
<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">
{{ post.title }}
</h1>
<p class="entry-meta">
Posted by {{ model.authors | value: post.author_id }} on {{ post.published_on | date: "dddd, MMMM d, yyyy" }}
at {{ post.published_on | date: "h:mm tt" | downcase }}
</p>
<header class="entry-header">
<p>
Posted by {{ model.authors | value: post.author_id }} on {{ post.published_on | date: "dddd, MMMM d, yyyy" }}
at {{ post.published_on | date: "h:mm tt" | downcase }}
</p>
{%- assign cat_count = post.category_ids | size -%}
{%- if cat_count > 0 %}
<p class="entry-meta">
<p>
<small>
Categorized under
{% for cat_id in post.category_ids -%}
@ -20,23 +21,38 @@
</small>
</p>
{%- endif %}
</header>
<div class="entry-content">{{ post.text }}</div>
<div class="entry-footer">
<footer class="entry-footer">
{%- assign tag_count = post.tags | size -%}
{%- if tag_count > 0 %}
<span>
Tagged
<p>
Tagged:
{% for tag in post.tags -%}
<a href="{{ tag | tag_link }}" title="Tagged &ldquo;{{ tag | escape }}&rdquo;"
rel="tag">{{ tag }}</a>{% unless forloop.last %}, {% endunless %}
{%- endfor %}
</span> &bull;
</p>
{%- endif %}
Bookmark the
<a href="{{ post | absolute_link }}" rel="bookmark"
title="Permanent link to &ldquo;{{ post.title | strip_html | escape }}&rdquo;">
permalink
</a>
{%- if logged_on %} &bull; <a href="{{ post | edit_post_link }}">Edit Post</a>{% endif %}
</div>
<p>
Bookmark:
<a href="{{ post | absolute_link }}" rel="bookmark"
title="Permanent link to &ldquo;{{ post.title | strip_html | escape }}&rdquo;">
the permalink
</a>
</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>

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

@ -305,4 +305,56 @@ footer {
}
footer a:link, footer a:visited {
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-bkg-color: hsl(0, 0%, 95%);
--item-bkg-color: hsl(0, 0%, 100%);
--overlay-bkg-color: rgba(0, 0, 0, .5)
}
@media ( prefers-color-scheme: dark ) {
:root {
--text-color: rgb(210, 210, 210);
--hdr-bkg-color: hsl(0, 0%, 7%);
--item-bkg-color: hsl(0, 0%, 12%);
--overlay-bgk-color: rgba(255, 255, 255, .2)
}
}
html {
@ -22,9 +24,6 @@ body {
font-size: 1.2rem;
background-color: var(--bkg-color);
margin: 0;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
color: var(--text-color);
}
a:link, a:visited {
@ -62,6 +61,11 @@ sup {
sub {
vertical-align: baseline;
}
main {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.content img {
max-width: 100%;
border-radius: 1rem;
@ -92,6 +96,9 @@ sub {
background-image: -moz-linear-gradient(top, 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 {
font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-weight: bold;
@ -257,9 +264,60 @@ footer.part-3 {
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 ----- */
@media screen and ( min-width: 50rem ) {
body {
main {
grid-template-columns: 1fr 16rem;
}
.desktop {
@ -268,7 +326,14 @@ footer.part-3 {
.mobile {
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;
}
.sidebar {

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

@ -40,7 +40,7 @@ acronym {
border-bottom:dotted 1px black;
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);
}
h1 {
@ -162,7 +162,7 @@ article.page .metadata {
.strike {
text-decoration: line-through;
}
footer {
.site-footer {
padding: 20px 15px 10px 15px;
display: flex;
flex-direction: row;
@ -175,7 +175,7 @@ footer {
background-image: -moz-linear-gradient(top, 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;
}
.alignleft {
@ -232,7 +232,7 @@ li {
@keyframes fadeIn {
0% {
opacity: 0;
height: 0;
height: 80vh;
}
100% {
opacity: 1;
@ -350,15 +350,21 @@ li {
.entry-title {
line-height: 1;
}
.entry-meta {
font-size: 1rem;
.entry-header {
text-align: center;
font-weight: bold;
margin: 0 0 .5rem 0;
font-size: 1rem;
}
.entry-content {
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 {
font-size: .8rem;
}