mirror of
https://github.com/Damillora/Yuika
synced 2024-12-04 21:53:46 +00:00
Add paid content handling
This commit is contained in:
parent
a94580e878
commit
afd08c495e
@ -12,6 +12,9 @@ html {
|
||||
header {
|
||||
@apply py-4;
|
||||
}
|
||||
header a:hover {
|
||||
@apply no-underline;
|
||||
}
|
||||
a:hover {
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
<main class="content container" id="post">
|
||||
<div class="content-full">
|
||||
{{#if @member}}
|
||||
<h1 class="text-red-500">Access restricted. Required infrastructure not yet in place.</h1>
|
||||
<h1 class="text-red-500">Access disabled. Required infrastructure not yet in place.</h1>
|
||||
<div class="md:flex md:flex-row pointer-events-none opacity-50">
|
||||
<div class="md:w-1/2 md:pr-4">
|
||||
<h2 class="text-xl md:text-2xl text-center">Monthly</h2>
|
||||
|
||||
@ -4,21 +4,35 @@
|
||||
{{> post-background}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||
</a>
|
||||
<div class="md:pl-4">
|
||||
<div class="pt-4 md:pt-0">
|
||||
<div class="pt-4 md:pt-0 flex flex-row">
|
||||
{{#if primary_tag}}
|
||||
{{#primary_tag}}
|
||||
<p>
|
||||
<div class="pr-2">
|
||||
<a href="{{url}}">
|
||||
{{#if accent_color}}
|
||||
<span class="tag-accent-color small" style="background-color: {{accent_color}};"></span>
|
||||
{{else}}
|
||||
<span class="tag-accent-color small"></span>{{name}}
|
||||
<span class="tag-accent-color small"></span>
|
||||
{{/if}}
|
||||
<span class="text-sm hover:underline">{{name}}</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{{/primary_tag}}
|
||||
{{/if}}
|
||||
{{#has visibility="paid"}}
|
||||
<div class="pr-2">
|
||||
<a href="/subscribe">
|
||||
<span class="text-sm text-red-700 hover:underline">Autonomous Systems only</span>
|
||||
</a>
|
||||
</div>
|
||||
{{/has}}
|
||||
{{#has visibility="members"}}
|
||||
<div class="pr-2">
|
||||
<a href="/subscribe">
|
||||
<span class="text-sm text-yuika-blue-700 hover:underline">Subscribers only</span>
|
||||
</a>
|
||||
</div>
|
||||
{{/has}}
|
||||
</div>
|
||||
<div class="mt-0 text-yuika-blue-700 hover:underline transition duration-500 ease-in-out">
|
||||
<a href="{{url}}"><h1 class="text-xl md:text-2xl font-light">{{title}}</h1></a>
|
||||
|
||||
@ -1,15 +1,28 @@
|
||||
|
||||
{{#if primary_tag}}
|
||||
{{#primary_tag}}
|
||||
<p>
|
||||
<a href="{{url}}">
|
||||
{{#if accent_color}}
|
||||
<span class="tag-accent-color small" style="background-color: {{accent_color}};"></span>
|
||||
{{else}}
|
||||
<span class="tag-accent-color small"></span>{{name}}
|
||||
{{/if}}
|
||||
<span class="text-base text-white hover:underline">{{name}}</span>
|
||||
</a>
|
||||
</p>
|
||||
<div class="pr-2">
|
||||
<a href="{{url}}">
|
||||
{{#if accent_color}}
|
||||
<span class="tag-accent-color small" style="background-color: {{accent_color}};"></span>
|
||||
{{else}}
|
||||
<span class="tag-accent-color small"></span>{{name}}
|
||||
{{/if}}
|
||||
<span class="text-base text-white hover:underline">{{name}}</span>
|
||||
</a>
|
||||
</div>
|
||||
{{/primary_tag}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{#has visibility="paid"}}
|
||||
<div class="pr-2">
|
||||
<a href="/subscribe">
|
||||
<span class="text-sm text-red-200 hover:underline">Autonomous Systems only</span>
|
||||
</a>
|
||||
</div>
|
||||
{{/has}}
|
||||
{{#has visibility="members"}}
|
||||
<div class="pr-2">
|
||||
<a href="/subscribe">
|
||||
<span class="text-sm text-yuika-blue-200 hover:underline">Subscribers only</span>
|
||||
</a>
|
||||
</div>
|
||||
{{/has}}
|
||||
219
post.hbs
219
post.hbs
@ -1,32 +1,31 @@
|
||||
{{!< default}}
|
||||
|
||||
{{#post}}
|
||||
<div class="relative group index-header">
|
||||
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||
<div class="h-full opacity-50 bg-black">
|
||||
</div>
|
||||
{{!< default}} {{#post}} <div class="relative group index-header">
|
||||
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background
|
||||
image--}}
|
||||
<div class="h-full opacity-50 bg-black">
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 py-4 left-0 right-0">
|
||||
<div class="container mx-auto content-full">
|
||||
<div>
|
||||
<div class="flex">
|
||||
{{> primary-tag}}
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white font-light text-3xl md:text-4xl">{{title}}</h1>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<p><span class="text-white text-sm"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">•</span> {{reading_time}}</span></p>
|
||||
<p><span class="text-white text-sm"><time datetime="{{date format=" YYYY-MM-DD"}}">{{date format="D MMM
|
||||
YYYY"}}</time> <span class="bull">•</span> {{reading_time}}</span></p>
|
||||
</div>
|
||||
<div class="author-list text-base text-white">
|
||||
<div class="author-images">
|
||||
{{#foreach authors}}
|
||||
{{#if profile_image}}
|
||||
<div class="h-8 ml-1 mr-3">
|
||||
<a href="{{url}}">
|
||||
<img class="h-full rounded-full" src="{{img_url profile_image size="xs"}}" alt="{{name}}"/>
|
||||
</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if profile_image}}
|
||||
<div class="h-8 ml-1 mr-3">
|
||||
<a href="{{url}}">
|
||||
<img class="h-full rounded-full" src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
|
||||
</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
<div class="author-names">
|
||||
@ -37,85 +36,113 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="post-article">
|
||||
<main class="content container" id="post">
|
||||
<div class="content-full">
|
||||
{{content}}
|
||||
</div>
|
||||
</main>
|
||||
<div class="my-4 w-full content-full">
|
||||
<div class="flex flex-col md:flex-row justify-between">
|
||||
{{#prev_post}}
|
||||
<a href="{{url}}" class="block w-full md:w-1/3 flex flex-row items-center justify-start md:justify-end hover:text-white hover:bg-yuika-blue-700 transition duration-500 ease-in-out group py-4 px-4">
|
||||
<span class="material-icons mr-4 text-yuika-blue-700 text-2xl group-hover:text-white">arrow_back</span>
|
||||
<div class="flex flex-col items-start md:items-end ">
|
||||
<p class="text-xl text-yuika-blue-700 group-hover:text-white">Previous post</p>
|
||||
<p>{{title}}</p>
|
||||
</div>
|
||||
</a>
|
||||
{{/prev_post}}
|
||||
<div class="flex flex-grow"></div>
|
||||
{{#next_post}}
|
||||
<a href="{{url}}" class="block w-full md:w-1/3 flex flex-row items-center justify-end md:justify-start hover:text-white hover:bg-yuika-blue-700 transition duration-500 ease-in-out group py-4 px-4">
|
||||
<div class="flex flex-col items-end md:items-start">
|
||||
<p class="text-xl text-yuika-blue-700 group-hover:text-white">Next post</p>
|
||||
<p>{{title}}</p>
|
||||
</div>
|
||||
<span class="material-icons ml-4 text-yuika-blue-700 text-2xl group-hover:text-white">arrow_forward</span>
|
||||
</a>
|
||||
{{/next_post}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-4 w-full content-full">
|
||||
<div class="my-4" id="comments">
|
||||
{{#is "preview"}}
|
||||
<p>Comments are disabled for post previews</p>
|
||||
{{else}}
|
||||
{{!-- Comments --}}
|
||||
|
||||
{{/is}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto px-4 my-4 w-full">
|
||||
{{#if primary_tag}}
|
||||
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
|
||||
{{#if related_posts}}
|
||||
{{#../primary_tag}}
|
||||
<div class="px-3 w-full">
|
||||
<p class="text-2xl">
|
||||
More in
|
||||
<a href="{{url}}">
|
||||
{{#if accent_color}}
|
||||
<span class="tag-accent-color medium" style="background-color: {{accent_color}};"></span>
|
||||
{{else}}
|
||||
<span class="tag-accent-color medium"></span>{{name}}
|
||||
{{/if}}
|
||||
<span class="hover:underline">{{name}}</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{{/../primary_tag}}
|
||||
<div class="grid grid-rows-3 grid-cols-1 row-gap-4 my-4">
|
||||
{{#foreach related_posts}}
|
||||
{{> post-card}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/post}}
|
||||
</article>
|
||||
|
||||
{{#contentFor "scripts"}}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// FitVids - start
|
||||
var $postContent = $("#post");
|
||||
$postContent.fitVids();
|
||||
// FitVids - end
|
||||
});
|
||||
</script>
|
||||
{{/contentFor}}
|
||||
<article class="post-article">
|
||||
<main class="content container" id="post">
|
||||
<div class="content-full">
|
||||
{{#if access}}
|
||||
{{content}}
|
||||
{{else}}
|
||||
<div class="w-full py-8 text-center bg-yuika-blue-700 text-white md:px-8">
|
||||
<h1>Access level insufficient</h1>
|
||||
{{#has visibility="paid"}}
|
||||
<h2>Access level: Autonomous System</h2>
|
||||
<p>By subscribing as an Autonomous System, you can unlock access to the contents of this post, get additional benefits and support me at the same time!</p>
|
||||
<div class="flex justify-center">
|
||||
<a class="px-4 py-2 bg-white border-yuika-blue-500 border appearance-none focus:outline-none border-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out"
|
||||
href="/subscribe">
|
||||
Become a member now
|
||||
</a>
|
||||
</div>
|
||||
{{/has}}
|
||||
{{#has visibility="members"}}
|
||||
<h2>Access level: Subscriber</h2>
|
||||
<p>Subscribing gives you access to the contents of this post, and get notified on subsequent posts!</p>
|
||||
<div class="flex justify-center">
|
||||
<a class="px-4 py-2 bg-white border-yuika-blue-500 border appearance-none focus:outline-none border-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out"
|
||||
href="/subscribe">
|
||||
Subscribe now
|
||||
</a>
|
||||
</div>
|
||||
{{/has}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</main>
|
||||
<div class="my-4 w-full content-full">
|
||||
<div class="flex flex-col md:flex-row justify-between">
|
||||
{{#prev_post}}
|
||||
<a href="{{url}}"
|
||||
class="block w-full md:w-1/3 flex flex-row items-center justify-start md:justify-end hover:text-white hover:bg-yuika-blue-700 transition duration-500 ease-in-out group py-4 px-4 hover:no-underline">
|
||||
<span class="material-icons mr-4 text-yuika-blue-700 text-2xl group-hover:text-white">arrow_back</span>
|
||||
<div class="flex flex-col items-start md:items-end ">
|
||||
<p class="text-xl text-yuika-blue-700 group-hover:text-white">Previous post</p>
|
||||
<p>{{title}}</p>
|
||||
</div>
|
||||
</a>
|
||||
{{/prev_post}}
|
||||
<div class="flex flex-grow"></div>
|
||||
{{#next_post}}
|
||||
<a href="{{url}}"
|
||||
class="block w-full md:w-1/3 flex flex-row items-center justify-end md:justify-start hover:text-white hover:bg-yuika-blue-700 transition duration-500 ease-in-out group py-4 px-4 hover:no-underline">
|
||||
<div class="flex flex-col items-end md:items-start">
|
||||
<p class="text-xl text-yuika-blue-700 group-hover:text-white">Next post</p>
|
||||
<p>{{title}}</p>
|
||||
</div>
|
||||
<span class="material-icons ml-4 text-yuika-blue-700 text-2xl group-hover:text-white">arrow_forward</span>
|
||||
</a>
|
||||
{{/next_post}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-4 w-full content-full">
|
||||
<div class="my-4" id="comments">
|
||||
{{#is "preview"}}
|
||||
<p>Comments are disabled for post previews</p>
|
||||
{{else}}
|
||||
{{!-- Comments --}}
|
||||
|
||||
{{/is}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto px-4 my-4 w-full">
|
||||
{{#if primary_tag}}
|
||||
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
|
||||
{{#if related_posts}}
|
||||
{{#../primary_tag}}
|
||||
<div class="px-3 w-full">
|
||||
<p class="text-2xl">
|
||||
More in
|
||||
<a href="{{url}}">
|
||||
{{#if accent_color}}
|
||||
<span class="tag-accent-color medium" style="background-color: {{accent_color}};"></span>
|
||||
{{else}}
|
||||
<span class="tag-accent-color medium"></span>{{name}}
|
||||
{{/if}}
|
||||
<span class="hover:underline">{{name}}</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{{/../primary_tag}}
|
||||
<div class="grid grid-rows-3 grid-cols-1 row-gap-4 my-4">
|
||||
{{#foreach related_posts}}
|
||||
{{> post-card}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/post}}
|
||||
</article>
|
||||
|
||||
{{#contentFor "scripts"}}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// FitVids - start
|
||||
var $postContent = $("#post");
|
||||
$postContent.fitVids();
|
||||
// FitVids - end
|
||||
});
|
||||
</script>
|
||||
{{/contentFor}}
|
||||
Loading…
Reference in New Issue
Block a user