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,24 +5,11 @@ 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>
|
||||
</div>
|
||||
<div class="relative max-w-7xl mx-auto">
|
||||
<div class="prose lg:prose-xl prose-invert m-auto text-center">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
<div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
|
||||
|
||||
{% 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">
|
||||
|
|
@ -63,7 +50,10 @@ pagination:
|
|||
</div>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
</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 %}
|
||||
|
|
@ -99,15 +89,4 @@ pagination:
|
|||
{% 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>
|
||||
{% 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