add relativePath filter

Closes #2
This commit is contained in:
James Walker 2022-12-08 18:07:41 -05:00
parent 6be49f3d75
commit 49a806203f
Signed by: walkah
GPG Key ID: 3C127179D6086E93
4 changed files with 17 additions and 8 deletions

View File

@ -4,6 +4,7 @@ const GhostContentAPI = require("@tryghost/content-api");
const pluginNavigation = require("@11ty/eleventy-navigation"); const pluginNavigation = require("@11ty/eleventy-navigation");
const pluginRss = require("@11ty/eleventy-plugin-rss"); const pluginRss = require("@11ty/eleventy-plugin-rss");
const localImages = require('eleventy-plugin-local-images'); const localImages = require('eleventy-plugin-local-images');
const path = require("path");
const api = new GhostContentAPI({ const api = new GhostContentAPI({
url: process.env.GHOST_API_URL, url: process.env.GHOST_API_URL,
@ -33,6 +34,14 @@ module.exports = function (eleventyConfig) {
return new Date(dateObj).toISOString().split("T")[0]; return new Date(dateObj).toISOString().split("T")[0];
}); });
eleventyConfig.addFilter("relativePath", (pathToFilter, page) => {
if (!pathToFilter.startsWith("/")) {
return pathToFilter;
}
return path.relative(page.url, pathToFilter);
})
eleventyConfig.addCollection("posts", async function (collection) { eleventyConfig.addCollection("posts", async function (collection) {
collection = await api.posts collection = await api.posts
.browse({ .browse({

View File

@ -5,17 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title or metadata.title }}</title> <title>{{ title or metadata.title }}</title>
<meta name="description" content="{{ description or metadata.description }}"> <meta name="description" content="{{ description or metadata.description }}">
<link rel="stylesheet" href="{{ '/css/style.css' | url }}"> <link rel="stylesheet" href="{{ '/css/style.css' | relativePath(page) }}">
<link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}"> <link rel="alternate" href="{{ metadata.feed.path | relativePath(page) }}" type="application/atom+xml" title="{{ metadata.title }}">
<link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" title="{{ metadata.title }}"> <link rel="alternate" href="{{ metadata.jsonfeed.path | relativePath(page) }}" type="application/json" title="{{ metadata.title }}">
</head> </head>
<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">
<header class="flex flex-row not-prose my-8"> <header class="flex flex-row not-prose my-8">
<div rel="author" class="p-author h-card basis-1/2"> <div rel="author" class="p-author h-card basis-1/2">
<a href="/"> <a href="{{ "/" | relativePath(page) }}">
<img class="u-photo w-8 inline-block" src="/images/walkah-avatar.png" > walkah <img class="u-photo w-8 inline-block" src="{{ "/images/walkah-avatar.png" | relativePath(page) }}"> walkah
</a> </a>
</div> </div>
</header> </header>

View File

@ -25,7 +25,7 @@
<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"> <div rel="author" class="p-author h-card basis-1/2">
<time class="dt-published" datetime="{{ post.published_at }}" pubdate> <time class="dt-published" datetime="{{ post.published_at }}" pubdate>
<a class="u-url text-gray-500 text-sm" href="{{ post.url }}">{{ post.date | dateString }}</a> <a class="u-url text-gray-500 text-sm" href="{{ post.url | relativePath(page) }}">{{ post.date | dateString }}</a>
</time> </time>
</div> </div>
<div class="text-right basis-1/2"> <div class="text-right basis-1/2">

View File

@ -11,13 +11,13 @@ pagination:
{% for post in postslist %} {% for post in postslist %}
<article class="h-entry"> <article class="h-entry">
<h2 class="p-name"> <h2 class="p-name">
<a href="{{ post.url }}">{{ post.title }}</a> <a href="{{ post.url | relativePath(page) }}">{{ post.title }}</a>
</h2> </h2>
<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> <time class="dt-published" datetime={{ post.published_at }} pubdate>
<a class="u-url text-gray-500 text-sm" href={{ post.url }}>{{ post.date | dateString }}</a> <a class="u-url text-gray-500 text-sm" href={{ post.url | relativePath(page) }}>{{ post.date | dateString }}</a>
</time> </time>
</article> </article>
{% endfor %} {% endfor %}