Poetry Site

I designed this website to give someone a place to share poems online anonymously. The initial design was kept simple with only a single poem displayed at a time, inspired by the xkcd site. The artistic design mimics a personal handwritten notebook by using dot paper pages for the poems, graphite colors, and botanical doodles in the background.

Check out the demo site here.

Project Setup

Here's an overview of how the website is structured:

• Next.js
  • The project is built with Next.js framework, the TypeScript language, React, and Tailwind CSS for CSS styling.
• Prisma
  • For data storage, Prisma is used to manage a PostgreSQL database through a Prisma schema file.
• Authentication
  • Admin pages and actions are protected using Auth.js with Kinde. Next.js middleware is used to check that the user has been authenticated through Kinde before granting access to `/admin` pages. Next.js admin server actions all first check authentication before making any changes.
• Markdown
  • Poems support Markdown syntax using Marked. The raw Markdown syntax of the poem is rendered server-side using a Marked `RendererObject`. Because Marked supports inline HTML, the Marked result is sanitized using DOMPurify to ensure nobody can inject malicious code into poem Markdown text.
• Hosting
  • The hosting solution is very similar to what was done for this adepaul.dev site. The same Hetzner server that hosts adepaul.dev also hosts the demo poetry site, as well as the actual poetry site server.
  • A GitHub Actions workflow is used to push a compiled Docker image to the GitHub Container Registry (GHCR). At the time of writing, no GitHub dependency graph is generated with the GitHub action.
  • On the Hetzner server, the site is run using Cloudflare Tunnels and Watchtower, which are configured through Docker Compose. As the setup here is identical to how adepaul.dev is set up, you can read more about how Cloudflare's CMS servers are used in the adepaul.dev write-up.

Upcoming Features

Here are a few additional features planned for the poetry website:

• Comment Sections
  • Comment sections come with the additional hurdle of requiring moderation tools to ensure commenters cannot post anything harmful. The simplest solution would be to use a Disqus library, but after learning about data privacy concerns regarding the platform, I'd prefer to find something more privacy-focused or to implement something myself.
• Poem Books
  • While the xkcd style of one poem per page is nice for simplicity, sometimes poems make more sense grouped into collections or "books". A directly requested feature, poem books would allow authors to group poems into separate collections according to theme, story, context, or relevance.