Compare commits

...

12 Commits

Author SHA1 Message Date
giles 7c3d7cd556 .. 2024-09-15 22:44:54 +01:00
giles 8487b210a8 try span 2024-09-15 21:38:51 +01:00
giles 5eaa5979b7 try span 2024-09-15 21:38:03 +01:00
giles ccb8cf6685 try span 2024-09-15 21:09:39 +01:00
giles e700e68aa5 try span 2024-09-15 21:07:18 +01:00
giles b751f439c2 try span 2024-09-15 21:06:01 +01:00
giles 683613f723 min-height 2024-09-15 20:58:54 +01:00
giles 4d46ebf9d7 orders total 2024-09-15 20:49:41 +01:00
giles c044686621 trigger 2024-09-15 20:23:45 +01:00
giles 42f7e8ea6b position 2024-09-15 20:12:59 +01:00
giles 309473bf2a orders view 2024-09-15 20:03:58 +01:00
giles b188397c9f wip 2024-09-15 18:55:17 +00:00
4 changed files with 122 additions and 61 deletions

View File

@ -9,6 +9,26 @@
<link rel="stylesheet" href="{{asset "built/screen.css"}}"> <link rel="stylesheet" href="{{asset "built/screen.css"}}">
{{ghost_head}} {{ghost_head}}
<style>
.share-block {
margin-top: 8rem;
text-align: center;
}
.share-block span {
display: inline-block;
font-weight: bold;
margin-right: 1rem;
font-size: 2rem;
}
.share-block a {
display: inline-block;
transition: all 0.3s;
margin: 0 0.25rem;
}
.share-block a:hover {
transform: scale(1.1);
}
</style>
</head> </head>
<body class="{{body_class}}{{{block "body_class"}}} is-head-{{#match @custom.navigation_layout "Logo on the left"}}left-logo{{else match @custom.navigation_layout "Logo in the middle"}}middle-logo{{else}}stacked{{/match}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Elegant serif"}} has-serif-body{{/match}}{{^is "home"}}{{#if @site.cover_image}} is-head-brand{{/if}}{{/is}}"> <body class="{{body_class}}{{{block "body_class"}}} is-head-{{#match @custom.navigation_layout "Logo on the left"}}left-logo{{else match @custom.navigation_layout "Logo in the middle"}}middle-logo{{else}}stacked{{/match}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Elegant serif"}} has-serif-body{{/match}}{{^is "home"}}{{#if @site.cover_image}} is-head-brand{{/if}}{{/is}}">

View File

@ -1,46 +1,63 @@
<article class="single {{post_class}}"> <article class="single {{post_class}}">
{{#match @page.show_title_and_feature_image}} {{#match @page.show_title_and_feature_image}}
<header class="single-header gh-canvas"> <header class="single-header gh-canvas">
{{#is "post"}} {{#is "post"}}
<div class="single-meta"> <div class="single-meta">
<!-- <!--
<span class="single-meta-item single-meta-date"> <span class="single-meta-item single-meta-date">
<time datetime="{{date format="YYYY-MM-DD"}}"> <time datetime="{{date format="YYYY-MM-DD"}}">
{{date published_at}} {{date published_at}}
</time> </time>
</span> </span>
--> -->
<span class="single-meta-item single-meta-length"> <span class="single-meta-item single-meta-length">
{{reading_time}} {{reading_time}}
</span> </span>
{{#primary_tag}} {{#primary_tag}}
<span class="single-meta-item single-meta-tag"> <span class="single-meta-item single-meta-tag">
<a class="post-tag post-tag-{{slug}}" href="{{url}}">{{name}}</a> <a class="post-tag post-tag-{{slug}}" href="{{url}}">{{name}}</a>
</span> </span>
{{/primary_tag}} {{/primary_tag}}
</div> </div>
{{/is}} {{/is}}
<h1 class="single-title">{{title}}</h1> <h1 class="single-title">{{title}}</h1>
{{#if custom_excerpt}} {{#if custom_excerpt}}
<div class="single-excerpt"> <div class="single-excerpt">
{{custom_excerpt}} {{custom_excerpt}}
</div> </div>
{{/if}}
<div id="total-rose-ash-shop" hx-get="shop/orders/total"
hx-trigger="load delay:1ms, configured from:body, ordered from:body delay:1ms, paid from:body"
hx-swap="innerHTML">
</div>
<div id="order-rose-ash-shop" hx-get="order"
hx-trigger="load delay:1ms, configured from:body, paid from:body, ordered from:body delay:1ms"
hx-on::config-request="event.detail.path = !(new URLSearchParams(window.location.search).get('order')) ? 'shop/order/?embed=true' : 'shop/order/?embed=true&orderId=' + new URLSearchParams(window.location.search).get('order');"
hx-swap="innerHTML">
</div>
<div id="order-detail-rose-ash-shop" hx-get="order" hx-trigger="load delay:1ms, paid from:body"
hx-on::config-request="event.detail.path = new URLSearchParams(window.location.search).get('order') ? 'shop/order/' + new URLSearchParams(window.location.search).get('order')+ '/?embed=true' : null; //6a919002-94eb-467d-a226-5dd05b7f44a3 '"
hx-on::confirm=" if (!new URLSearchParams(window.location.search).get('order')) { event.preventDefault(); }"
hx-swap="innerHTML">
</div>
{{#if feature_image}}
{{#unless no_image}}
<figure class="single-media kg-width-{{width}}">
<img srcset="{{> " srcset"}}" sizes="(min-width: 1023px) 920px, calc(90vw)"
src="{{img_url feature_image size=" l"}}"
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}">
{{#if feature_image_caption}}
<figcaption>{{feature_image_caption}}</figcaption>
{{/if}} {{/if}}
</figure>
{{#if feature_image}} {{/unless}}
{{#unless no_image}} {{/if}}
<figure class="single-media kg-width-{{width}}"> </header>
<img srcset="{{> "srcset"}}" sizes="(min-width: 1023px) 920px, calc(90vw)" src="{{img_url feature_image size="l"}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}">
{{#if feature_image_caption}}
<figcaption>{{feature_image_caption}}</figcaption>
{{/if}}
</figure>
{{/unless}}
{{/if}}
</header>
{{/match}} {{/match}}
<div class="single-content gh-content gh-canvas"> <div class="single-content gh-content gh-canvas">
@ -49,50 +66,55 @@
{{#is "post"}} {{#is "post"}}
<div class="gh-canvas"> <div class="gh-canvas">
<footer class="single-footer"> <footer class="single-footer">
<div class="single-footer-left"> <div class="single-footer-left">
{{#prev_post}} {{#prev_post}}
<div class="navigation navigation-previous"> <div class="navigation navigation-previous">
<a class="navigation-link" href="{{url}}" aria-label="Previous post"> <a class="navigation-link" href="{{url}}" aria-label="Previous post">
<span class="navigation-icon">{{> "icons/arrow-left"}}</span> <span class="navigation-icon">{{> "icons/arrow-left"}}</span>
</a> </a>
</div>
{{/prev_post}}
</div> </div>
{{/prev_post}}
</div>
<div class="single-footer-middle"> <div class="single-footer-middle">
{{#if @custom.show_author}} {{#if @custom.show_author}}
<div class="single-footer-top"> <div class="single-footer-top">
<h3 class="single-footer-title">Published by:</h3> <h3 class="single-footer-title">Published by:</h3>
<div class="author-list"> <div class="author-list">
{{#foreach authors}} {{#foreach authors}}
<div class="author-image-placeholder u-placeholder square"> <div class="author-image-placeholder u-placeholder square">
<a href="{{url}}" title="{{name}}"> <a href="{{url}}" title="{{name}}">
{{#if profile_image}} {{#if profile_image}}
<img class="author-image u-object-fit" src="{{img_url profile_image size="xs"}}" alt="{{name}}" loading="lazy"> <img class="author-image u-object-fit" src="{{img_url profile_image size=" xs"}}"
alt="{{name}}" loading="lazy">
{{else}} {{else}}
<span class="u-object-fit">{{> "icons/avatar"}}</span> <span class="u-object-fit">{{> "icons/avatar"}}</span>
{{/if}} {{/if}}
</a> </a>
</div> </div>
{{/foreach}} {{/foreach}}
</div>
</div> </div>
{{/if}}
</div> </div>
{{/if}}
</div>
<div class="single-footer-right"> <div class="single-footer-right">
{{#next_post}} {{#next_post}}
<div class="navigation navigation-next"> <div class="navigation navigation-next">
<a class="navigation-link" href="{{url}}" aria-label="Next post"> <a class="navigation-link" href="{{url}}" aria-label="Next post">
<span class="navigation-icon">{{> "icons/arrow-right"}}</span> <span class="navigation-icon">{{> "icons/arrow-right"}}</span>
</a> </a>
</div>
{{/next_post}}
</div> </div>
{{/next_post}} </footer>
<div id="configure-product" name="configure-product" hx-get="shop/configure?embed" hx-trigger="load">
</div>
<div id="orders-rose-ash-shop" hx-get="shop/orders" hx-trigger="load, paid from:body, configured from:body"
hx-swap="innerHTML">
</div> </div>
</footer>
</div> </div>
{{/is}} {{/is}}

19
partials/share-block.hbs Normal file
View File

@ -0,0 +1,19 @@
<div class="share-block">
<span>Share</span>
<a href="https://twitter.com/intent/tweet?url={{url absolute='true'}}&amp;text={{encode title}}" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M24 4.6c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.2-.2-7.8-2.2-10.2-5.2-.5.8-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5z" fill="#1da1f2"/></svg>
</a>
&nbsp;
<a href="https://www.facebook.com/sharer.php?u={{url absolute='true'}}" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M24 12.072a12 12 0 10-13.875 11.854v-8.385H7.078v-3.469h3.047V9.428c0-3.007 1.792-4.669 4.532-4.669a18.611 18.611 0 012.687.234v2.954H15.83a1.734 1.734 0 00-1.947 1.49 1.71 1.71 0 00-.008.385v2.25H17.2l-.532 3.469h-2.8v8.385A12 12 0 0024 12.072z" fill="#4267B2"/></svg>
</a>
&nbsp;
<a href="https://pinterest.com/pin/create/button/?url={{url absolute='true'}}&amp;media=&amp;description={{encode title}}" target="_blank" rel="noopener" data-pin-do="none">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12c0 5.1 3.2 9.4 7.6 11.2-.1-.9-.2-2.4 0-3.4.2-.9 1.4-6 1.4-6s-.3-.8-.3-1.8c0-1.7 1-2.9 2.2-2.9 1 0 1.5.8 1.5 1.7 0 1-.7 2.6-1 4-.3 1.2.6 2.2 1.8 2.2 2.1 0 3.8-2.2 3.8-5.5 0-2.9-2.1-4.9-5-4.9-3.4 0-5.4 2.6-5.4 5.2 0 1 .4 2.1.9 2.7.1.1.1.2.1.3-.1.4-.3 1.2-.3 1.4-.1.2-.2.3-.4.2-1.5-.7-2.4-2.9-2.4-4.6 0-3.8 2.8-7.3 7.9-7.3 4.2 0 7.4 3 7.4 6.9 0 4.1-2.6 7.5-6.2 7.5-1.2 0-2.4-.6-2.8-1.4 0 0-.6 2.3-.7 2.9-.3 1-1 2.3-1.5 3.1 1 .3 2.2.5 3.4.5 6.6 0 12-5.4 12-12S18.6 0 12 0z" fill="#E60023"/></svg>
</a>
&nbsp;
<a href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{url absolute='true'}}&amp;title={{encode title}}" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M23 0H1C.4 0 0 .4 0 1v22c0 .6.4 1 1 1h22c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1zM7.1 20.5H3.6V9h3.6v11.5zM5.3 7.4c-1.1 0-2.1-.9-2.1-2.1 0-1.1.9-2.1 2.1-2.1 1.1 0 2.1.9 2.1 2.1 0 1.2-.9 2.1-2.1 2.1zm15.2 13.1h-3.6v-5.6c0-1.3 0-3-1.8-3-1.9 0-2.1 1.4-2.1 2.9v5.7H9.4V9h3.4v1.6c.5-.9 1.6-1.8 3.4-1.8 3.6 0 4.3 2.4 4.3 5.5v6.2z" fill="#2867B2"/></svg>
</a>
</div>

View File

@ -12,6 +12,6 @@
{{#post}} {{#post}}
{{> "comments"}} {{> "comments"}}
{{> share-block}}
{{/post}} {{/post}}
</main> </main>