+
+
+
+
+
diff --git a/src/components/LandingHero.astro b/src/components/LandingHero.astro
new file mode 100644
index 0000000..77a9935
--- /dev/null
+++ b/src/components/LandingHero.astro
@@ -0,0 +1,31 @@
+---
+export interface Props {
+ heroVariant?: 'gradient' | 'background' | 'gradient background'
+}
+
+const { heroVariant = '' } = Astro.props
+---
+
+
+
+ {themeName}
+
+
+{themeName}
+
+
+
+
+
+
diff --git a/src/components/MagicLink.astro b/src/components/MagicLink.astro
new file mode 100644
index 0000000..48f44e3
--- /dev/null
+++ b/src/components/MagicLink.astro
@@ -0,0 +1,30 @@
+---
+interface Props {
+ href: string
+ icon?: string
+ target?: string
+}
+
+const { href, icon, target } = Astro.props
+
+const faviconUrl = `https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${href}&size=32`
+---
+
+
+ {icon && }
+ {
+ !icon && (
+
+
+-
+ {
+ posts.map(({ data, slug }) => (
+
-
+ + + {data.title} + + ++
+ {data.description}+
+ ))
+ }
+
-
+ {
+ renderedProjects.map(({ data, Content }, index) => (
+
-
+ + + + {data.title} + + {data.url && !data.url.startsWith('/') && ( + + )} + +++ - + {data.endTime && } + {!data.endTime && 'Now'} ++
+ ++ {index !== projects.length - 1 && ( ++
+ )} +
+ ))
+ }
+
+ {
+ tags.map(({ tag, icon }) => (
+
+
+ {tag}
+
+ ))
+ }
+
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
new file mode 100644
index 0000000..75ebc4c
--- /dev/null
+++ b/src/components/ThemeToggle.astro
@@ -0,0 +1,21 @@
+
+
+ {config.title}
+
+
+
+
+
diff --git a/src/components/layout/Separator.astro b/src/components/layout/Separator.astro
new file mode 100644
index 0000000..bff32b0
--- /dev/null
+++ b/src/components/layout/Separator.astro
@@ -0,0 +1 @@
+diff --git a/src/components/util/ScrollProgress.astro b/src/components/util/ScrollProgress.astro new file mode 100644 index 0000000..79fcce7 --- /dev/null +++ b/src/components/util/ScrollProgress.astro @@ -0,0 +1,26 @@ +
+
+
+
diff --git a/src/components/util/ScrollToTop.astro b/src/components/util/ScrollToTop.astro
new file mode 100644
index 0000000..773eead
--- /dev/null
+++ b/src/components/util/ScrollToTop.astro
@@ -0,0 +1,41 @@
+
+
diff --git a/src/components/util/ThemeManager.astro b/src/components/util/ThemeManager.astro
new file mode 100644
index 0000000..4ad2051
--- /dev/null
+++ b/src/components/util/ThemeManager.astro
@@ -0,0 +1,59 @@
+---
+import config from '@/theme.config'
+
+const defaultTheme = config.defaultTheme
+---
+
+
+
diff --git a/src/content/config.ts b/src/content/config.ts
new file mode 100644
index 0000000..0d077b8
--- /dev/null
+++ b/src/content/config.ts
@@ -0,0 +1,36 @@
+import config from '@/theme.config'
+import { defineCollection, z } from 'astro:content'
+
+const posts = defineCollection({
+ type: 'content',
+ schema: ({ image }) =>
+ z.object({
+ title: z.string(),
+ author: z.string().default(config.author),
+ description: z.string(),
+ publishedTime: z.date(),
+ draft: z.boolean().optional().default(false),
+ canonicalURL: z.string().optional(),
+ opengraphImage: image()
+ .refine((img) => img.width >= 1200 && img.height >= 630, {
+ message: 'OpenGraph image must be at least 1200 X 630 pixels!'
+ })
+ .or(z.string())
+ .optional(),
+ tags: z.array(z.string()).default([])
+ })
+})
+
+const projects = defineCollection({
+ type: 'content',
+ schema: () =>
+ z.object({
+ title: z.string(),
+ url: z.string().optional(),
+ startTime: z.date(),
+ endTime: z.date().optional().nullable(),
+ tags: z.array(z.string()).default([])
+ })
+})
+
+export const collections = { posts, projects }
diff --git a/src/content/posts/color-themes.mdx b/src/content/posts/color-themes.mdx
new file mode 100644
index 0000000..7a0ef8e
--- /dev/null
+++ b/src/content/posts/color-themes.mdx
@@ -0,0 +1,70 @@
+---
+title: Adding and Switching Color Themes
+description: Easily switch and add custom color themes in Nordlys
+publishedTime: 2024-10-01T21:43:00.000Z
+tags:
+ - documentation
+---
+
+import ColorThemeSwitch from '@/components/ColorThemeSwitch.astro'
+import LandingHero from '@/components/LandingHero.astro'
+import ThemeToggle from '@/components/ThemeToggle.astro'
+import { ColorThemes } from '@/types.ts'
+
+Nordlys not only has a dark and light mode, but also predefined themes that are ready to use, as well as the option of adding custom themes.
+
+## Predefined themes
+
+Click the buttons below to (temporarily) switch the color theme for a preview! To permanently change the color theme, simply set it in the theme configuration (`theme.config.ts`).
+
+
+
+ {
+ ColorThemes.map((theme) => ())
+ }
+
+
+
+
+
+ preview
+
+
+
+## Adding a new theme
+
+I addition to the predefined themes, it's very simple to add a custom theme. Simply choose a primary (accent) color and a background color, and add them to `themes.css`. Make sure to use the RGB values of the colors in the same format as shown.
+
+```css src/style/themes.css
+@layer base {
+ .theme-custom {
+ --theme-accent: 0, 0, 0;
+ --theme-bg: 255, 255, 255;
+
+ &[data-theme='dark'] {
+ --theme-accent: 255, 255, 255;
+ --theme-bg: 0, 0, 0;
+ }
+ }
+```
+If you want use the newly defined theme, set it in the `theme.config.ts`.
+
+```ts src/theme.config.ts
+ export default defineThemeConfig({
+ colorTheme: 'theme-custom'
+
+ // ...
+```
+
+Most likely, your IDE or editor will complain with a TypeError that the theme is not a valid choice. While this is not a critical error, to fix it, you can simply add `theme-custom` as a valid option to the `ColorThemes` array in the type definition.
+
+```ts src/types.ts
+export const ColorThemes = [
+ // other themes
+ 'theme-custom'
+] as const
+```
+
+And that's it!
\ No newline at end of file
diff --git a/src/content/posts/components-in-mdx.mdx b/src/content/posts/components-in-mdx.mdx
new file mode 100644
index 0000000..bad62d1
--- /dev/null
+++ b/src/content/posts/components-in-mdx.mdx
@@ -0,0 +1,37 @@
+---
+title: Astro components in MDX
+description: Showcasing usage of Nordlys built-in components in Markdown
+publishedTime: 2024-09-28T21:58:00.000Z
+draft: true
+tags:
+ - documentation
+---
+
+import MagicLink from '@/components/MagicLink.astro'
+
+With MDX, you can use JSX expressions and components within Markdown content. Simply create an `example-page.mdx` file, and you can start using the Nordlys Astro components inline!
+
+## MagicLink
+
+The `
+ ` tag unless there are multiple paragraphs in the list item. That means I have to worry about styling that annoying situation too. + +- **For example, here's another nested list.** + + But this time with a second paragraph. + + - These list items won't have `
` tags + - Because they are only one line each + +- **But in this second top-level list item, they will.** + + This is especially annoying because of the spacing on this paragraph. + + - As you can see here, because I've added a second line, this list item now has a `
` tag. + + This is the second line I'm talking about by the way. + + - Finally here's another list item so it's more like a list. + +- A closing list item, but with no nested list, because why not? + +And finally a sentence to close off this section. + +## We didn't forget about description lists + +Well, that's not exactly true, we first released this plugin back in 2020 and it took three years before we added description lists. But they're here now, so let's just be happy about that…okay? They can be great for things like FAQs. + +
-
+
- Why do you never see elephants hiding in trees? +
- + Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas + cupiditate laboriosam fugiat. + +
- What do you call someone with no body and no nose? +
- + Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, voluptas ipsa quia + excepturi, quibusdam natus exercitationem sapiente tempore labore voluptatem. + +
- Why can't you hear a pterodactyl go to the bathroom? +
- + Because the pee is silent. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quas + voluptatibus ex culpa ipsum, aspernatur blanditiis fugiat ullam magnam suscipit deserunt illum + natus facilis atque vero consequatur! Quisquam, debitis error. + +
${label}`
+}
+
+function getIcon(lang?: string) {
+ const icon = iconMap[lang || 'plaintext'] || iconMap['plaintext']
+ const textSize = icon === iconMap['plaintext'] ? 'text-5xl' : 'text-2xl'
+
+ return ``
+}
+
+function generateHeader(label?: string, lang?: string) {
+ return `
+
`
+}
+
+export default {
+ postprocess: (html: string, options: PostProcessOptions) => {
+ return `
+ ${getIcon(lang)}
+ ${getLabel(label)}
+
+
+
+ ${generateHeader(options.meta?.__raw, options.lang)}
+ ${html}
+
`
+ }
+}
diff --git a/src/helpers/headingAnchors.ts b/src/helpers/headingAnchors.ts
new file mode 100644
index 0000000..5a5d9d4
--- /dev/null
+++ b/src/helpers/headingAnchors.ts
@@ -0,0 +1,18 @@
+function setupHeadingAnchors(container: Document) {
+ const headings = Array.from(container.querySelectorAll('h2, h3, h4, h5, h6'))
+ for (const heading of headings) {
+ heading.className += ' group relative max-w-fit underline-offset-4'
+
+ const link = container.createElement('a')
+ link.innerText = '#'
+ link.className =
+ 'w-[110%] heading-anchor no-underline absolute hidden group-hover:block -left-8'
+ link.href = '#' + heading.id
+ link.ariaHidden = 'true'
+ heading.prepend(link)
+ }
+}
+
+document.addEventListener('astro:page-load', () => {
+ setupHeadingAnchors(document)
+})
diff --git a/src/helpers/readingTime.js b/src/helpers/readingTime.js
new file mode 100644
index 0000000..95ab9b8
--- /dev/null
+++ b/src/helpers/readingTime.js
@@ -0,0 +1,10 @@
+import { toString } from 'mdast-util-to-string'
+import getReadingTime from 'reading-time'
+
+export default function () {
+ return function (tree, { data }) {
+ const textOnPage = toString(tree)
+ const readingTime = getReadingTime(textOnPage)
+ data.astro.frontmatter.readingTime = readingTime.text
+ }
+}
diff --git a/src/helpers/util.ts b/src/helpers/util.ts
new file mode 100644
index 0000000..8481856
--- /dev/null
+++ b/src/helpers/util.ts
@@ -0,0 +1,88 @@
+import config from '@/theme.config'
+import type { ResolvedTag } from '@/types'
+import { getCollection, type CollectionEntry } from 'astro:content'
+
+export const toDateString = (date: Date): string =>
+ date.toLocaleDateString('en-US', {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric'
+ })
+
+export const toMonthString = (date: Date): string =>
+ date.toLocaleDateString('en-US', {
+ year: 'numeric',
+ month: 'long',
+ day: undefined
+ })
+
+export const sortTags = (t1: ResolvedTag, t2: ResolvedTag) =>
+ t1.tag.localeCompare(t2.tag)
+
+export const resolveTags = (rawTags: string[]): ResolvedTag[] => {
+ const resolvedTags = [...new Set(rawTags)].map((t) => {
+ const tag = t.toLowerCase()
+
+ return {
+ tag,
+ icon: config.tagIcons[tag] || 'tabler--tag'
+ }
+ })
+
+ resolvedTags.sort(sortTags)
+
+ return resolvedTags
+}
+
+export const generateTags = async (): Promise
+
+
+ {
+ frontmatter.title && (
+
+ {frontmatter.title}
+
+ )
+ }
+
+
+
+ +
++ +
{frontmatter.title}
+
+ Published on by {frontmatter.author} · {
+ readingTime
+ }
+
+
+ + {frontmatter.title} +
++ {frontmatter.title} + {` (page ${page.currentPage})`} +
++ {frontmatter.title} +
++ {frontmatter.title} + {` (page ${page.currentPage})`} +
++ + {tag} +
+ {!!posts.length &&Posts
} +Projects
} +
+ {
+ tags.map(({ tag, icon }) => (
+
+
+
+
+ {tag} ({getTagUsage(tag)})
+
+
+ ))
+ }
+
+