Extend base theme, post page wip
This commit is contained in:
Ava Gaiety Wroten
parent
886e235383
commit
4d2815e6be
4 changed files with 151 additions and 101 deletions
38
_includes/baselayout.njk
Normal file
38
_includes/baselayout.njk
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title }}</title>
|
||||
<link rel="stylesheet" href="/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="relative bg-slate-700 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
|
||||
<div class="absolute inset-0">
|
||||
<div class="bg-slate-900 h-1/5 sm:h-2/5"></div>
|
||||
</div>
|
||||
<div class="relative max-w-7xl mx-auto">
|
||||
{% block header %}
|
||||
<div class="prose lg:prose-xl prose-invert m-auto text-center">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block main %}
|
||||
Main
|
||||
{% endblock %}
|
||||
</main>
|
||||
{% block footer %}
|
||||
{% endblock %}
|
||||
|
||||
<footer class="mt-16 flex flex-col sm:flex-row gap-8 sm:justify-between text-slate-300">
|
||||
<div>
|
||||
Site built in <a href="https://www.11ty.dev/" class="underline">11ty</a> with <a href="https://tailwindui.com/" class="underline">Tailwind UI</a>, <a href="https://gitlab.com/gaiety/gaiety-life" class="underline">fork it here</a>.
|
||||
</div>
|
||||
<div>
|
||||
<a href="/feed.xml" class="underline">Subscribe to RSS</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,109 +5,88 @@ pagination:
|
|||
alias: posts
|
||||
reverse: true
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title }}</title>
|
||||
<link rel="stylesheet" href="/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="relative bg-slate-700 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
|
||||
<div class="absolute inset-0">
|
||||
<div class="bg-slate-900 h-1/5 sm:h-2/5"></div>
|
||||
|
||||
{% extends "baselayout.njk" %}
|
||||
|
||||
{% block main %}
|
||||
<main class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
|
||||
{%- for post in posts -%}
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
<div class="flex-shrink-0">
|
||||
<a href="{{ post.url }}" tabindex="-1">
|
||||
<img class="h-48 w-full object-cover" src="{{ post.data.coverImage if post.data.coverImage else '/images/default-thumb.png'}}" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative max-w-7xl mx-auto">
|
||||
<div class="prose lg:prose-xl prose-invert m-auto text-center">
|
||||
{{ content | safe }}
|
||||
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
||||
<div class="flex-1">
|
||||
<!--
|
||||
<p class="text-sm font-medium text-indigo-600">
|
||||
<a href="#" class="hover:underline">
|
||||
Case Study
|
||||
</a>
|
||||
</p>
|
||||
-->
|
||||
<a href="{{ post.url }}" class="block mt-2">
|
||||
<h3 class="text-xl font-semibold text-gray-900">
|
||||
{{ post.data.title }}
|
||||
</h3>
|
||||
<p class="mt-3 text-base text-gray-500">
|
||||
{{ post.data.description }}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
|
||||
{%- for post in posts -%}
|
||||
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
<div class="flex-shrink-0">
|
||||
<a href="{{ post.url }}" tabindex="-1">
|
||||
<img class="h-48 w-full object-cover" src="{{ post.data.coverImage if post.data.coverImage else '/images/default-thumb.png'}}" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
|
||||
<div class="flex-1">
|
||||
<!--
|
||||
<p class="text-sm font-medium text-indigo-600">
|
||||
<a href="#" class="hover:underline">
|
||||
Case Study
|
||||
</a>
|
||||
</p>
|
||||
-->
|
||||
<a href="{{ post.url }}" class="block mt-2">
|
||||
<h3 class="text-xl font-semibold text-gray-900">
|
||||
{{ post.data.title }}
|
||||
</h3>
|
||||
<p class="mt-3 text-base text-gray-500">
|
||||
{{ post.data.description }}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-6 flex justify-between">
|
||||
<div class="text-sm text-gray-500">
|
||||
<time datetime="{{ post.data.date.toISOString() }}">
|
||||
{{ post.data.date.toDateString() }}
|
||||
</time>
|
||||
</div>
|
||||
<div class="text-sm text-gray-500">
|
||||
<span>
|
||||
{{ post.templateContent | emojiReadTime }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
<div class="mt-6 flex justify-between">
|
||||
<div class="text-sm text-gray-500">
|
||||
<time datetime="{{ post.data.date.toISOString() }}">
|
||||
{{ post.data.date.toDateString() }}
|
||||
</time>
|
||||
</div>
|
||||
<div class="text-sm text-gray-500">
|
||||
<span>
|
||||
{{ post.templateContent | emojiReadTime }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="mt-8 border-t border-slate-800 px-4 flex items-center justify-between sm:px-0">
|
||||
<div class="-mt-px w-0 flex-1 flex">
|
||||
{% if pagination.href.previous %}
|
||||
<a href="{{ pagination.href.previous }}" class="border-t-2 border-transparent pt-4 pr-1 inline-flex items-center text-sm font-medium text-slate-300 hover:text-slate-100 hover:border-slate-100">
|
||||
<!-- Heroicon name: solid/arrow-narrow-left -->
|
||||
<svg class="mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Previous
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="hidden md:-mt-px md:flex">
|
||||
{%- for pageEntry in pagination.pages %}
|
||||
<a
|
||||
href="{{ pagination.hrefs[ loop.index0 ] }}"
|
||||
class="{{ 'border-yellow-300 text-white' if page.url == pagination.hrefs[ loop.index0 ] else 'border-transparent text-slate-300'}} hover:text-slate-100 hover:border-slate-100 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium"
|
||||
{% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page"{% endif %}
|
||||
>
|
||||
{{ loop.index }}
|
||||
</a>
|
||||
{%- endfor %}
|
||||
</div>
|
||||
<div class="-mt-px w-0 flex-1 flex justify-end">
|
||||
{% if pagination.href.next %}
|
||||
<a href="{{ pagination.href.next }}" class="border-t-2 border-transparent pt-4 pl-1 inline-flex items-center text-sm font-medium text-slate-300 hover:text-slate-100 hover:border-slate-100">
|
||||
Next
|
||||
<!-- Heroicon name: solid/arrow-narrow-right -->
|
||||
<svg class="ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</nav>
|
||||
<footer class="mt-16 flex flex-col sm:flex-row gap-8 sm:justify-between text-slate-300">
|
||||
<div>
|
||||
Site built in <a href="https://www.11ty.dev/" class="underline">11ty</a> with <a href="https://tailwindui.com/" class="underline">Tailwind UI</a>, <a href="https://gitlab.com/gaiety/gaiety-life" class="underline">fork it here</a>.
|
||||
</div>
|
||||
<div>
|
||||
<a href="/feed.xml" class="underline">Subscribe to RSS</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
{%- endfor -%}
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
{% block footer %}
|
||||
<nav class="mt-8 border-t border-slate-800 px-4 flex items-center justify-between sm:px-0">
|
||||
<div class="-mt-px w-0 flex-1 flex">
|
||||
{% if pagination.href.previous %}
|
||||
<a href="{{ pagination.href.previous }}" class="border-t-2 border-transparent pt-4 pr-1 inline-flex items-center text-sm font-medium text-slate-300 hover:text-slate-100 hover:border-slate-100">
|
||||
<!-- Heroicon name: solid/arrow-narrow-left -->
|
||||
<svg class="mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Previous
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="hidden md:-mt-px md:flex">
|
||||
{%- for pageEntry in pagination.pages %}
|
||||
<a
|
||||
href="{{ pagination.hrefs[ loop.index0 ] }}"
|
||||
class="{{ 'border-yellow-300 text-white' if page.url == pagination.hrefs[ loop.index0 ] else 'border-transparent text-slate-300'}} hover:text-slate-100 hover:border-slate-100 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium"
|
||||
{% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page"{% endif %}
|
||||
>
|
||||
{{ loop.index }}
|
||||
</a>
|
||||
{%- endfor %}
|
||||
</div>
|
||||
<div class="-mt-px w-0 flex-1 flex justify-end">
|
||||
{% if pagination.href.next %}
|
||||
<a href="{{ pagination.href.next }}" class="border-t-2 border-transparent pt-4 pl-1 inline-flex items-center text-sm font-medium text-slate-300 hover:text-slate-100 hover:border-slate-100">
|
||||
Next
|
||||
<!-- Heroicon name: solid/arrow-narrow-right -->
|
||||
<svg class="ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</nav>
|
||||
{% endblock %}
|
||||
|
|
|
|||
32
_includes/postlayout.njk
Normal file
32
_includes/postlayout.njk
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
{% extends "baselayout.njk" %}
|
||||
|
||||
{% block header %}
|
||||
<div class="prose lg:prose-xl prose-invert m-auto text-center">
|
||||
<h1>{{ title }}</h1>
|
||||
<p>{{ description }}</p>
|
||||
|
||||
<div class="mt-6 flex justify-between">
|
||||
<div class="text-sm text-slate-200">
|
||||
<time datetime="{{ date.toISOString() }}">
|
||||
{{ date.toDateString() }}
|
||||
</time>
|
||||
</div>
|
||||
<div class="text-sm text-slate-200">
|
||||
<span>
|
||||
{{ content | emojiReadTime }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<main class="flex flex-col rounded-lg shadow-lg overflow-hidden mx-auto max-w-lg lg:max-w-xl mt-8">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-48 w-full object-cover" src="{{ coverImage if coverImage else '/images/default-thumb.png'}}" alt="">
|
||||
</div>
|
||||
<div class="flex-1 bg-white p-6 flex flex-col justify-between prose prose-slate">
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
1
content/posts/posts.json
Normal file
1
content/posts/posts.json
Normal file
|
|
@ -0,0 +1 @@
|
|||
{ "layout": "postlayout.njk" }
|
||||
Loading…
Add table
Reference in a new issue