Adding content

Creating a new page

To add a new page to Nordlys, navigate to src/pages and create a new Markdown file. Most likely you’ll want the page to use the default layout, so set that in the frontmatter. After that, you can start writing your content in Markdown.

---
layout: '@/layouts/PageLayout.astro'
title: FAQ
---

## How can I contact you?

You can contact me at ...

Go to localhost:4321/faq in your browser, and you will now see your newly created FAQ page! The frontmatter of a page is defined as follows.

// non-set properties default to the properties set in the theme config
type PageFrontmatter = {
  title?: string // tab title
  author?: string // meta
  description?: string // meta
  canonicalURL?: string // meta
  openGraphImage?: string | ImageMetadata // relative URL to image in public folder or local asset
  publishedDate?: Date // meta
  scrollProgress?: boolean // bar indicating scroll location on top of page
  activeHeaderLink?: string // title or href of the active header link
  scrollToTop?: boolean // "Back to top" button when having scrolled far down
  searchable?: boolean // page can be found using the built-in search engine
}

Writing a blog post

Writing a blog post is essentially the same as adding a new page, with slightly different frontmatter. You can follow the same procedure, except you’ll create the file in the content/posts directory.

---
title: I learned something
description: A quick update on the new things I learned
publishedDate: 2024-10-06
tags:
  - programming
  - TIL
previewImage: '../assets/posts/i-learned-today-preview.png'
---

So today, I started learning a new programming language. It is really cool because ...

Navigate to localhost:4321/posts, and your new post will have appear there. Clicking on it will show the content you wrote, nicely rendered as text! The frontmatter of a post is defined as follows.

type PostFrontmatter = {
  title: string
  author?: string // defaults author set in theme config
  description: string
  publishedDate: Date
  previewImage?: ImageMetadata // local asset
  draft?: boolean // defaults to false
  canonicalURL?: string // meta
  openGraphImage?: string | ImageMetadata // either URL to image in public folder or local asset
  tags?: string[] // defaults to []
  showToC?: boolean // show a Table of Contents, defaults to true
}

Adding a new project

To add a new project in Nordlys, simply create a file in the src/projects directory. Set the project properties, write a short description, and you’re done!

---
title: Awesome App
startDate: 2023-10-06
endDate: 2024-10-06
tags:
  - HTML
  - CSS
  - TypeScript
previewImage: '../assets/projects/awesome-app-preview.png'
---

I developed an awesome app, using `HTML`, `CSS` and `TypeScript`! The app can ...

Take a look at localhost:4321/projects, and your new project should be listed there! The frontmatter of a project is defined as follows.

type ProjectFrontmatter = {
  title: string
  url?: string // can be relative or absolute
  startDate?: Date // if omitted, endDate will be ignored, even if set, and project will get sorted to bottom of list
  endDate?: Date // shows "Now" if not set
  tags?: string[] // defaults to []
  previewImage?: ImageMetadata // local asset
}

Note that projects don’t generate a dedicated page, but are just listed on the /projects page.

The /blog and /projects pages

The /blog and /projects pages, listing blog posts and defined projects, respectively, are hard-coded into the template. Most likely you don’t want to remove or edit them, but maybe you’d like them to display a custom description above the list of posts or projects.

Specifically for that purpose, you can create the file content/posts.md (or content/projects.md). These special files, containing only Markdown, will be rendered as text on the /posts or /projects/ page!