Poetry

Markdown Test Page

2026-09-24T00:00:00Z

A simple paragraph with bold, italic, inline code and a link.

Headings

Heading 3

Blockquote

This is a blockquote.
It can contain multiple paragraphs.

Lists

Unordered

Item one
Item two
Item three

Ordered

First item
Second item
Third item

Code

function helloWorld() {
  console.log("Hello World");
}

Metadata

2026-09-23T00:00:00Z

To manage the metadata of pages and posts, use the metaTitle and metaDesc properties in the front matter:

---
title: 'Your page title'
metaTitle: 'Your SEO title'
metaDesc: 'Your page description'
tags:
  - first tag
  - second tag
hero:
  image: '/assets/images/my-hero.jpg'
  imageAlt: 'A description of the hero image'
---

The metadata is generated by the partial meta-info.html.

Use metaTitle to set a custom title for SEO and social sharing. If metaTitle is not provided, the page title is automatically generated using the page title and site name.
Use metaDesc to set the page description.
If the page has a hero.image, it is automatically used as the social sharing image.

RSS Feed

2026-09-23T00:00:00Z

The RSS feed is generated automatically from the post collection and rss.html template which includes the following Atom XML structure:

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
	<title>{{ title }}</title>
	<subtitle>{{ summary }}</subtitle>
	<link href="{{ site.url }}{{ permalink }}" rel="self"/>
	<link href="{{ site.url }}/"/>
	<updated>{{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
	<id>{{ site.url }}/</id>
	<author>
		<name>{{ site.authorName }}</name>
		<email>{{ site.authorEmail }}</email>
	</author>
	{% for post in collections.posts %}
		{% set absolutePostUrl %}{{ post.url | htmlBaseUrl(site.url) }}{% endset %}
		<entry>
			<title>{{ post.data.title }}</title>
			<link href="{{ absolutePostUrl }}"/>
			<updated>{{ post.date | dateToRfc3339 }}</updated>
			<id>{{ absolutePostUrl }}</id>
			<content type="html">{{ post.content | renderTransforms(post.data.page, site.url) }}</content>
		</entry>
	{% endfor %}
</feed>

The template loops through collections.posts and creates an <entry> for each post.
The feed also uses the site information defined in _data/site.json, including:

url: used to generate absolute URLs.
authorName: used for the feed author.
authorEmail: used for the feed author email.

Site URL

Make sure the url property in _data/site.json contains the public URL of the website:

"url": "https://example.com"

This is important because RSS readers need absolute URLs to access the feed and its posts.

Adding new posts

There is no need to manually update the feed when adding a new post.
Once a post is saved, it will automatically appear in the generated /feed.xml.
A link to the RSS feed is also available in the Social Menu below.

Permalinks and URLs

2026-09-22T00:00:00Z

Eleventy generates the URL of each page from its file location and configuration. You can also define a custom URL using the permalink property in the front matter.

Posts

The post date is taken from the Markdown filename and Eleventy generates the URL as follow:

posts/
└── 2026-09-23-my-first-post.md

The generated post is available at:

/posts/2026-09-23-my-first-post/

Pages

A page can define its URL using the permalink property:

---
title: 'About'
metaDesc: 'About this website'
layout: 'layouts/page.html'
permalink: 'about.html'
---

This generates the page:

/about.html

Blog

The Blog uses Eleventy's pagination feature to display the post collection:

---
    title: 'Blog'
    layout: 'layouts/feed.html'
    pagination:
      data: collections.posts
      size: 9
    permalink: 'blog/index.html'
    paginationPrevText: 'Older'
    paginationNextText: 'Newer'
    paginationAnchor: '#post-list'
    ---

In this example, 9 posts are displayed per page and the permalink automatically generates the URL for each Blog page.
The first page is available at:

    /blog/index.html

Additional pages are generated using the page number:

    /blog/page/1/index.html
    /blog/page/2/index.html
    /blog/page/3/index.html

The paginationPrevText and paginationNextText properties define the labels used for navigating between Blog pages.

Add Images

2026-09-21T00:00:00Z

Images can be added to the src/assets/images folder and then referenced from posts and pages using standard Markdown syntax.

Adding an image

Place the image inside the src/assets/images folder. For larger sites, it can be useful to organize images into subfolders.
For example:

assets/
└── images/
    └── my-image.jpg

Adding a hero image

A hero image can be added to a post or page through the front matter.
Add hero.image and hero.imageAlt to the Front Matter.
For example:

---
title: 'My Post'
metaDesc: 'Post description'
tags:
  - your tag
hero:
  image: '/assets/images/my-hero.jpg'
  imageAlt: 'A description of the hero image'
---

The hero image will be displayed automatically by the site.

Adding an image to a post or page

Use the standard Markdown image syntax:

![Image description](/assets/images/my-image.jpg)

The text inside the square brackets is the image's alternative text (alt). Use a short and descriptive description of the image.

Image processing in development

After adding an image, run the development server or build the site again to make sure the image is available at the expected path.
During development, images may take a little longer to appear after being added or changed. This is because the site uses the @11ty/eleventy-img plugin to process and optimize images.
This processing can take a few moments, especially when working with large images.
After adding or changing an image, give the development server a moment to finish processing before checking the result.

Responsive images

Images are automatically processed and optimized by @11ty/eleventy-img.
The image processing configuration generates multiple formats and sizes:

eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
  extensions: "html",
  outputDir: "./dist/assets/images/",
  urlPath: "/assets/images/",
  formats: ["avif", "webp", "jpeg"],
  widths: [150, 500, 900],
  htmlOptions: {
    imgAttributes: {
      loading: "lazy",
      decoding: "async",
    },
  },
});

For each image, the site automatically generates:

AVIF, WebP and JPEG versions.
150px, 500px and 900px wide versions.
Responsive image markup so the browser can select an appropriate image size.
Lazy loading using loading="lazy".
Asynchronous image decoding using decoding="async".

This means you only need to add the original image to the src/assets/images folder. The optimized versions are generated automatically when the site is built.
The generated images are placed in:

dist/
└── assets/
    └── images/

You do not need to create the different formats or sizes manually.

Add a Post

2026-09-20T00:00:00Z

To add a new post, simply create a *.md file inside the posts folder (or any of its subfolders).
To set the post date, name the file using the following format:

yyyy-mm-dd-your-title.md

Front Matter

Start by adding the front matter using the following structure:

---
title: 'My Post'
metaTitle: 'My Title'
metaDesc: 'Post description'
summary: 'A short description displayed in the blog.'
tags:
  - first tag
  - second tag
hero:
  image: '/assets/images/my-hero.jpg'
  imageAlt: 'A description of the hero image'
---

Use the tags property in the front matter to assign one or more tags to the post.
If summary is not provided, the short description displayed in the blog is generated automatically from the post content.

Content

Then write the post content in Markdown.
Once the post is saved, it will be automatically added to the Blog.

Add a Page

2026-09-19T00:00:00Z

To add a new page, simply create a *.md file inside the pages folder (or any of its subfolders).
Start by adding the front matter using the following structure:

---
title: 'My Page'
metaDesc: 'Page description'
hero:
  image: '/assets/images/my-hero.jpg'
  imageAlt: 'A description of the hero image'
---

Then write the page content in Markdown.

{
 "social": [
  {
   "text": "Mastodon",
   "url": "https://mastodon.bida.im/@your-account",
   "iconPath": "partials/svg/mastodon.svg",
   "ext": true
  },
  {
   "text": "PeerTube",
   "url": "https://tubocatodico.bida.im/a/your-account",
   "iconPath": "partials/svg/peertube.svg",
   "ext": true
  },
  {
   "text": "RSS",
   "url": "/feed.xml",
   "iconPath": "partials/svg/RSS.svg",
   "ext": true
  },
  {
   "text": "Email",
   "url": "mailto:your-account@email.com",
   "iconPath": "partials/svg/mail.svg"
  }
 ]
}

You can add or adjust the social menu items:

text: the text displayed for the link (if the icon is not available)
url: the URL the link points to
iconPath: the path to the SVG icon
ext: set to true to open the link in a new tab or window

Note

When editing _data/navigation.json, make sure the file remains valid JSON. Use double quotes around property names and values and remember to add commas between objects.

Icons and Logo

2026-09-17T00:00:00Z

The site logo, favicon and navigation menu icons can be customized by replacing the corresponding SVG files in the _data/site.json file:

Logo

Replace brand.svg with your own SVG file and update the path if necessary.

"logopath": "partials/svg/brand.svg"

Favicon

Replace favicon with your own favicon file and update the path if necessary.

"faviconPath": "/assets/favicon/brand.svg"

Navigation menu icons

You can customize the navigation menu icons by replacing the corresponding SVG files:

"openMenuPath": "partials/svg/open-menu.svg",
"closeMenuPath": "partials/svg/close-menu.svg"

Social menu icons

You can customize the social menu icons. See the post Navigation menu for more information.

Customize the Theme

2026-09-16T00:00:00Z

Colors, fonts, spacing, typography and other visual elements can be changed without modifying the content of posts and pages.
The visual appearance of the site can be customized by editing the CSS files in the assets/css folder:

assets/css/
├── tokens.css
├── reset.css
├── base.css
├── objects.css
├── components.css
├── utilities.css
├── critical.css
├── global.css
└── build/
    ├── critical.css
    └── global.css

The main CSS files have different purposes:

tokens.css — Defines the site's design tokens, such as colors, fonts, spacing and border radius values.
reset.css — Resets default browser styles to provide a consistent starting point.
base.css — Defines the basic styles for HTML elements such as body, headings, paragraphs, links and images.
objects.css — Contains reusable layout patterns such as wrappers, grids, flows and frames.
components.css — Contains styles for specific site components such as the header, navigation, posts, footer and forms.
utilities.css — Contains small utility classes for specific, reusable styling needs.
critical.css — Defines the CSS needed for the initial rendering of the site.
global.css — Defines the main CSS bundle used by the site.

Do not edit the 'build' folder

The assets/css/build folder contains CSS files generated automatically from the source CSS files when running the build process.
Do not edit manually the files inside this folder, because the changes may be overwritten as soon as the CSS is built.

Site Settings

2026-09-15T00:00:00Z

The main site settings are managed through the _data/site.json file.

{
"name": "My Website",
"version": "v1.0.0",
"url": "https://example.com",
"authorName": "Your Name",
"authorEmail": "your-email@example.com",
"logopath": "partials/svg/brand.svg",
"faviconPath": "/assets/favicon/brand.svg",
"openMenuPath": "partials/svg/open-menu.svg",
"closeMenuPath": "partials/svg/close-menu.svg"
}

Each property has a specific purpose:

name: the name of the website.
version: the current version of the website.
url: the website URL.
authorName: the name of the author.
authorEmail: the author's email address.
logopath: the path to the SVG file used as the site logo.
faviconPath: the path to the favicon displayed by the browser.
openMenuPath: the path to the icon used to open the navigation menu.
closeMenuPath: the path to the icon used to close the navigation menu.

When editing _data/site.json, make sure the file remains valid JSON. Use double quotes around property names and values and remember to add commas between properties.

Getting started

2026-09-14T00:00:00Z

To get started with Poetry, clone or fork the repository and install the required dependencies. Development should be done on the master branch; the pages branch contains the build.

Clone or fork the repository:

git clone https://codeberg.org/impalcature/poetry.git

Enter the project directory:

cd poetry
git switch master

Install the dependencies:

npm install

Running the development server

To start the development server:

npm run start

The site will be available at http://localhost:8080.

Building for production

To generate the production build:

npm run build

The generated files are placed in the dist folder, ready to be deployed to the hosting service.

Deploying to a subfolder

If the site is deployed in a subfolder, such as /poetry/ on Codeberg Pages, run:

SUBFOLDER=true npm run build

In eleventy.config.js replace /poetry with the subfolder path required by your hosting service:

if (process.env.SUBFOLDER === "true") {
    addPathPrefix(eleventyConfig, "/poetry");
}

The SUBFOLDER option only changes the URLs generated in the HTML files; the resulting dist folder is otherwise unchanged and ready to be deployed.

When I Heard the Learn’d Astronomer

2026-08-26T00:00:00Z

When I heard the learn’d astronomer,
When the proofs, the figures, were ranged in columns before me,
When I was shown the charts and diagrams, to add, divide and measure them,
When I sitting heard the astronomer where he lectured with much applause in the lecture-room,
How soon unaccountable I became tired and sick,
Till rising and gliding out I wander’d off by myself,
In the mystical moist night-air and from time to time,
Look’d up in perfect silence at the stars.

Walt Whitman, “When I Heard the Learn’d Astronomer”