walkah/blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

💄 simple layout

Browse Source
This commit is contained in:
James Walker 2022-11-11 23:26:39 -05:00
parent c023d0e7e4
commit 2592e84d07
Signed by: walkah
GPG Key ID: 3C127179D6086E93
7 changed files with 419 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eleventy.js
View File

@ -20,6 +20,7 @@ module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(pluginRss);
eleventyConfig.addPassthroughCopy("css");
eleventyConfig.addPassthroughCopy("images");
eleventyConfig.addPlugin(localImages, {
distPath: '_site',
@ -49,6 +50,7 @@ module.exports = function (eleventyConfig) {
// Bring featured post to the top of the list
collection.sort((post, nextPost) => nextPost.featured - post.featured);
console.log(collection);
return collection;
});
}

2
_includes/layouts/default.njk
View File

@ -12,7 +12,7 @@
<body class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<div class="container max-w-2xl mb-24 mt-8 mx-auto">
<div class="px-5 md:px-8">
<main id="main">
<main id="main" class="prose lg:prose-lg dark:prose-invert">
{% block content %}
{% endblock content %}
</main>

47
_includes/layouts/post.njk
View File

@ -5,21 +5,34 @@
{% set codeinjection_foot = post.codeinjection_foot %}
{% block content %}
<article class="h-entry prose lg:prose-lg dark:prose-invert" role="article">
<header>
<h1 class="p-name">{{ title }}</h1>
<time class="dt-published" datetime={{ post.published_at }} pubdate><a class="u-url text-gray-500 text-sm" href={{ post.url }}>{{ post.published_at }}</a></time>
</header>
{% if post.feature_image %}
<figure class="md:-mx-12">
<img class="u-featured rounded-md shadow-md w-full" src="{{ post.feature_image }}" alt="{{ title }}">
</figure>
{% endif %}
<section class="e-content load-external-scripts">
{{ content | safe}}
</section>
<footer class="flex flex-row not-prose">
</footer>
</article>
<article class="h-entry prose lg:prose-lg dark:prose-invert" role="article">
<header>
<h1 class="p-name">{{ title }}</h1>
</header>
{% if post.feature_image %}
<figure class="md:-mx-12">
<img class="u-featured rounded-md shadow-md w-full" src="{{ post.feature_image }}" alt="{{ post.feature_image_alt }}">
{% if post.feature_image_caption %}
<figcaption>
<cite>{{ post.feature_image_caption }}</cite>
</figcaption>
{% endif %}
</figure>
{% endif %}
<section class="e-content" load-external-scripts>
{{ content | safe }}
</section>
<footer class="flex flex-row not-prose">
<div rel="author" class="p-author h-card basis-1/2">
<a href="/">
<img class="u-photo w-8 inline-block" src="/images/walkah-avatar.png" > walkah
</a>
</div>
<div class="text-right basis-1/2">
<time class="dt-published" datetime="{{ post.published_at }}" pubdate>
<a class="u-url text-gray-500 text-sm" href="{{ post.url }}">{{ post.date.toLocaleDateString() }}</a>
</time>
</div>
</footer>
</article>
{% endblock %}

BIN
images/walkah-avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 266 KiB

13
index.njk
View File

@ -7,8 +7,14 @@ pagination:
{% extends 'layouts/default.njk' %}
{% block content %}
{% set postslist = collections.posts %}
<section class="h-feed prose dark:prose-invert">
<header class="flex flex-row not-prose">
<div rel="author" class="p-author h-card basis-1/2">
<a href="/">
<img class="u-photo w-8 inline-block" src="/images/walkah-avatar.png" > walkah
</a>
</div>
</header>
<section class="h-feed">
{% for post in postslist %}
<article class="h-entry">
<h2 class="p-name">
@ -17,6 +23,9 @@ pagination:
<div class="e-content">
{{ post.excerpt | safe }}
</div>
<time class="dt-published" datetime={{ post.published_at }} pubdate>
<a class="u-url text-gray-500 text-sm" href={{ post.url }}>{{ post.date.toLocaleDateString() }}</a>
</time>
</article>
{% endfor %}
</section>

650
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -7,7 +7,7 @@
"clean": "rimraf ./_site",
"css:prod": "tailwindcss -i ./css/style.css -o ./_site/css/style.css --minify",
"css:dev": "tailwindcss -i ./css/style.css -o ./_site/css/style.css --watch",
"dev": "eleventy --serve --watch",
"dev": "eleventy --serve --watch --port=8000",
"prod": "eleventy",
"start": "run-p clean css:dev dev"
},