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.addPlugin(pluginRss);
eleventyConfig.addPassthroughCopy("css"); eleventyConfig.addPassthroughCopy("css");
eleventyConfig.addPassthroughCopy("images");
eleventyConfig.addPlugin(localImages, { eleventyConfig.addPlugin(localImages, {
distPath: '_site', distPath: '_site',
@ -49,6 +50,7 @@ module.exports = function (eleventyConfig) {
// Bring featured post to the top of the list // Bring featured post to the top of the list
collection.sort((post, nextPost) => nextPost.featured - post.featured); collection.sort((post, nextPost) => nextPost.featured - post.featured);
console.log(collection);
return 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"> <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="container max-w-2xl mb-24 mt-8 mx-auto">
<div class="px-5 md:px-8"> <div class="px-5 md:px-8">
<main id="main"> <main id="main" class="prose lg:prose-lg dark:prose-invert">
{% block content %} {% block content %}
{% endblock content %} {% endblock content %}
</main> </main>

21
_includes/layouts/post.njk
View File

@ -8,18 +8,31 @@
<article class="h-entry prose lg:prose-lg dark:prose-invert" role="article"> <article class="h-entry prose lg:prose-lg dark:prose-invert" role="article">
<header> <header>
<h1 class="p-name">{{ title }}</h1> <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> </header>
{% if post.feature_image %} {% if post.feature_image %}
<figure class="md:-mx-12"> <figure class="md:-mx-12">
<img class="u-featured rounded-md shadow-md w-full" src="{{ post.feature_image }}" alt="{{ title }}"> <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> </figure>
{% endif %} {% endif %}
<section class="e-content load-external-scripts"> <section class="e-content" load-external-scripts>
{{ content | safe }} {{ content | safe }}
</section> </section>
<footer class="flex flex-row not-prose"> <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> </footer>
</article> </article>
{% endblock %} {% 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' %} {% extends 'layouts/default.njk' %}
{% block content %} {% block content %}
{% set postslist = collections.posts %} {% set postslist = collections.posts %}
<header class="flex flex-row not-prose">
<section class="h-feed prose dark:prose-invert"> <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 %} {% for post in postslist %}
<article class="h-entry"> <article class="h-entry">
<h2 class="p-name"> <h2 class="p-name">
@ -17,6 +23,9 @@ pagination:
<div class="e-content"> <div class="e-content">
{{ post.excerpt | safe }} {{ post.excerpt | safe }}
</div> </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> </article>
{% endfor %} {% endfor %}
</section> </section>

646
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", "clean": "rimraf ./_site",
"css:prod": "tailwindcss -i ./css/style.css -o ./_site/css/style.css --minify", "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", "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", "prod": "eleventy",
"start": "run-p clean css:dev dev" "start": "run-p clean css:dev dev"
}, },