- {
- prevPost?.id ? (
-
-
- {prevPost?.data.title}
-
- ) : (
-
- )
- }
-
- {
- nextPost?.id ? (
-
-
- {nextPost?.data.title}
-
- ) : (
-
- )
- }
+
+
+
+
+
+
+ Next Post
+ {nextPost?.data.title || 'Latest post!'}
+
+
+
+
+ Previous Post
+ {prevPost?.data.title || 'Last post!'}
+
+
+
+
+
diff --git a/src/components/SocialIcons.astro b/src/components/SocialIcons.astro
new file mode 100644
index 0000000..78fc7d8
--- /dev/null
+++ b/src/components/SocialIcons.astro
@@ -0,0 +1,19 @@
+---
+import Link from '@/components/Link.astro'
+import { buttonVariants } from '@/components/ui/button'
+import { Icon } from 'astro-icon/components'
+---
+
+
diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro
index 28c3547..14c3151 100644
--- a/src/components/TableOfContents.astro
+++ b/src/components/TableOfContents.astro
@@ -1,50 +1,117 @@
---
-import TableOfContentsHeading from "./TableOfContentsHeading.astro";
-
-const { headings } = Astro.props;
-const toc = buildToc(headings);
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Icon } from 'astro-icon/components'
+import TableOfContentsHeading from './TableOfContentsHeading.astro'
export interface Heading {
- depth: number;
- slug: string;
- text: string;
+ depth: number
+ slug: string
+ text: string
+ subheadings: Heading[]
}
-function buildToc(headings: Heading[]) {
- const toc: Heading[] = [];
- const parentHeadings = new Map();
+const { headings } = Astro.props
+const toc = buildToc(headings)
+
+function buildToc(headings: Heading[]): Heading[] {
+ const toc: Heading[] = []
+ const stack: Heading[] = []
+
headings.forEach((h) => {
- const heading = { ...h, subheadings: [] };
- parentHeadings.set(heading.depth, heading);
- if (heading.depth === 2) {
- toc.push(heading);
- } else {
- parentHeadings.get(heading.depth - 1).subheadings.push(heading);
+ const heading = { ...h, subheadings: [] }
+
+ while (stack.length > 0 && stack[stack.length - 1].depth >= heading.depth) {
+ stack.pop()
}
- });
- return toc;
+
+ if (stack.length === 0) {
+ toc.push(heading)
+ } else {
+ stack[stack.length - 1].subheadings.push(heading)
+ }
+
+ stack.push(heading)
+ })
+
+ return toc
}
---
-
- Table of Contents
-
+
+
-
+ document.addEventListener('astro:page-load', setupToc)
+ document.addEventListener('astro:after-swap', setupToc)
+
diff --git a/src/components/TableOfContentsHeading.astro b/src/components/TableOfContentsHeading.astro
index c21bf63..5ac46f3 100644
--- a/src/components/TableOfContentsHeading.astro
+++ b/src/components/TableOfContentsHeading.astro
@@ -1,17 +1,22 @@
---
-import type { Heading } from "./TableOfContents.astro";
-import Link from "./Link.astro";
+import Link from './Link.astro'
+import type { Heading } from './TableOfContents.astro'
-const { heading } = Astro.props;
+const { heading } = Astro.props
---
-
-
+
+
{heading.text}
{
heading.subheadings.length > 0 && (
-
+
{heading.subheadings.map((subheading: Heading) => (
))}
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..8e24d00
--- /dev/null
+++ b/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,114 @@
+import { cn } from '@/lib/utils'
+import { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons'
+import { Slot } from '@radix-ui/react-slot'
+import * as React from 'react'
+
+const Breadcrumb = React.forwardRef<
+ HTMLElement,
+ React.ComponentPropsWithoutRef<'nav'> & {
+ separator?: React.ReactNode
+ }
+>(({ ...props }, ref) => )
+Breadcrumb.displayName = 'Breadcrumb'
+
+const BreadcrumbList = React.forwardRef<
+ HTMLOListElement,
+ React.ComponentPropsWithoutRef<'ol'>
+>(({ className, ...props }, ref) => (
+
+))
+BreadcrumbList.displayName = 'BreadcrumbList'
+
+const BreadcrumbItem = React.forwardRef<
+ HTMLLIElement,
+ React.ComponentPropsWithoutRef<'li'>
+>(({ className, ...props }, ref) => (
+
+))
+BreadcrumbItem.displayName = 'BreadcrumbItem'
+
+const BreadcrumbLink = React.forwardRef<
+ HTMLAnchorElement,
+ React.ComponentPropsWithoutRef<'a'> & {
+ asChild?: boolean
+ }
+>(({ asChild, className, ...props }, ref) => {
+ const Comp = asChild ? Slot : 'a'
+
+ return (
+
+ )
+})
+BreadcrumbLink.displayName = 'BreadcrumbLink'
+
+const BreadcrumbPage = React.forwardRef<
+ HTMLSpanElement,
+ React.ComponentPropsWithoutRef<'span'>
+>(({ className, ...props }, ref) => (
+
+))
+BreadcrumbPage.displayName = 'BreadcrumbPage'
+
+const BreadcrumbSeparator = ({
+ children,
+ className,
+ ...props
+}: React.ComponentProps<'li'>) => (
+ - svg]:size-3.5', className)}
+ {...props}
+ >
+ {children ?? }
+
+)
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'
+
+const BreadcrumbEllipsis = ({
+ className,
+ ...props
+}: React.ComponentProps<'span'>) => (
+
+
+ More
+
+)
+BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis'
+
+export {
+ Breadcrumb,
+ BreadcrumbEllipsis,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbList,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..f42b82e
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,54 @@
+import { cn } from '@/lib/utils'
+import { Slot } from '@radix-ui/react-slot'
+import { type VariantProps, cva } from 'class-variance-authority'
+import * as React from 'react'
+
+const buttonVariants = cva(
+ 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+ {
+ variants: {
+ variant: {
+ default: 'bg-primary text-primary-foreground hover:bg-secondary/50',
+ destructive:
+ 'bg-destructive text-destructive-foreground over:bg-destructive/50',
+ outline: 'border border-input bg-background hover:bg-secondary/50',
+ secondary:
+ 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+ ghost: 'hover:bg-accent hover:text-accent-foreground',
+ link: 'text-primary underline-offset-4 hover:underline',
+ },
+ size: {
+ default: 'h-9 px-4 py-2',
+ sm: 'h-8 rounded-md px-3 text-xs',
+ lg: 'h-10 rounded-md px-8',
+ icon: 'h-9 w-9',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+ },
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : 'button'
+ return (
+
+ )
+ },
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..9260433
--- /dev/null
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,202 @@
+import { cn } from '@/lib/utils'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import {
+ CheckIcon,
+ ChevronRightIcon,
+ DotFilledIcon,
+} from '@radix-ui/react-icons'
+import * as React from 'react'
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+
+))
+DropdownMenuSubTrigger.displayName =
+ DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+DropdownMenuSubContent.displayName =
+ DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuCheckboxItem.displayName =
+ DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => {
+ return (
+
+ )
+}
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
+
+export {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuPortal,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuTrigger,
+}
diff --git a/src/components/ui/mode-toggle.tsx b/src/components/ui/mode-toggle.tsx
new file mode 100644
index 0000000..de15b7e
--- /dev/null
+++ b/src/components/ui/mode-toggle.tsx
@@ -0,0 +1,70 @@
+import { Button } from '@/components/ui/button'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Laptop, Moon, Sun } from 'lucide-react'
+import * as React from 'react'
+
+export function ModeToggle() {
+ const [theme, setThemeState] = React.useState<
+ 'theme-light' | 'dark' | 'system'
+ >('theme-light')
+
+ React.useEffect(() => {
+ const isDarkMode = document.documentElement.classList.contains('dark')
+ setThemeState(isDarkMode ? 'dark' : 'theme-light')
+ }, [])
+
+ React.useEffect(() => {
+ const isDark =
+ theme === 'dark' ||
+ (theme === 'system' &&
+ window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+ document.documentElement.classList.add('disable-transitions')
+
+ document.documentElement.classList[isDark ? 'add' : 'remove']('dark')
+
+ window
+ .getComputedStyle(document.documentElement)
+ .getPropertyValue('opacity')
+
+ requestAnimationFrame(() => {
+ document.documentElement.classList.remove('disable-transitions')
+ })
+ }, [theme])
+
+ return (
+
+
+
+
+
+ setThemeState('theme-light')}>
+
+ Light
+
+ setThemeState('dark')}>
+
+ Dark
+
+ setThemeState('system')}>
+
+ System
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
new file mode 100644
index 0000000..50b4739
--- /dev/null
+++ b/src/components/ui/pagination.tsx
@@ -0,0 +1,174 @@
+import * as React from 'react'
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { type ButtonProps, buttonVariants } from '@/components/ui/button'
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+
+)
+Pagination.displayName = 'Pagination'
+
+const PaginationContent = React.forwardRef<
+ HTMLUListElement,
+ React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+
+))
+PaginationContent.displayName = 'PaginationContent'
+
+const PaginationItem = React.forwardRef<
+ HTMLLIElement,
+ React.ComponentProps<'li'>
+>(({ className, ...props }, ref) => (
+
+))
+PaginationItem.displayName = 'PaginationItem'
+
+type PaginationLinkProps = {
+ isActive?: boolean
+ isDisabled?: boolean
+} & Pick &
+ React.ComponentProps<'a'>
+
+const PaginationLink = ({
+ className,
+ isActive,
+ isDisabled,
+ size = 'icon',
+ ...props
+}: PaginationLinkProps) => (
+
+)
+PaginationLink.displayName = 'PaginationLink'
+
+const PaginationPrevious = ({
+ className,
+ isDisabled,
+ ...props
+}: React.ComponentProps) => (
+
+
+ Previous
+
+)
+PaginationPrevious.displayName = 'PaginationPrevious'
+
+const PaginationNext = ({
+ className,
+ isDisabled,
+ ...props
+}: React.ComponentProps) => (
+
+ Next
+
+
+)
+PaginationNext.displayName = 'PaginationNext'
+
+const PaginationEllipsis = ({
+ className,
+ ...props
+}: React.ComponentProps<'span'>) => (
+
+
+ More pages
+
+)
+PaginationEllipsis.displayName = 'PaginationEllipsis'
+
+interface PaginationProps {
+ currentPage: number
+ totalPages: number
+ baseUrl: string
+}
+
+const PaginationComponent: React.FC = ({
+ currentPage,
+ totalPages,
+ baseUrl,
+}) => {
+ const pages = Array.from({ length: totalPages }, (_, i) => i + 1)
+
+ const getPageUrl = (page: number) => {
+ if (page === 1) return baseUrl
+ return `${baseUrl}${page}`
+ }
+
+ return (
+
+
+
+ 1 ? getPageUrl(currentPage - 1) : undefined}
+ isDisabled={currentPage === 1}
+ />
+
+
+ {pages.map((page) => (
+
+
+ {page}
+
+
+ ))}
+
+ {totalPages > 5 && (
+
+
+
+ )}
+
+
+
+
+
+
+ )
+}
+
+export default PaginationComponent
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..7d68f77
--- /dev/null
+++ b/src/components/ui/scroll-area.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+
+import { cn } from '@/lib/utils'
+
+const ScrollArea = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+
+
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+
+
+
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 0000000..d35d048
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as React from 'react'
+
+const Separator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(
+ (
+ { className, orientation = 'horizontal', decorative = true, ...props },
+ ref,
+ ) => (
+
+ ),
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/src/consts.ts b/src/consts.ts
index b6f3379..1674d9e 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -1,8 +1,19 @@
-import type { Metadata, Site } from "@types";
+export type Site = {
+ TITLE: string
+ DESCRIPTION: string
+ POSTS_PER_PAGE: number
+ SITEURL: string
+}
+
+export type Link = {
+ href: string
+ label: string
+}
+
export const SITE: Site = {
- TITLE: "z0x",
- DESCRIPTION: "z0x's blog",
-};
-export const HOME: Metadata = {
- TITLE: "blog",
-};
+ TITLE: "z0x's blog",
+ DESCRIPTION: "z0x's blog",
+ POSTS_PER_PAGE: 3,
+ SITEURL: 'https://astro-erudite.vercel.app',
+}
+
diff --git a/src/content.config.ts b/src/content.config.ts
index 1a99685..1a7115d 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -1,14 +1,27 @@
-import { defineCollection, z } from "astro:content";
-import { glob } from "astro/loaders";
+import { glob } from 'astro/loaders'
+import { defineCollection, z } from 'astro:content'
const blog = defineCollection({
- loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content" }),
- schema: z.object({
- title: z.string(),
- description: z.string(),
- date: z.coerce.date(),
- draft: z.boolean().optional(),
- }),
-});
+ loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
+ schema: ({ image }) =>
+ z.object({
+ title: z
+ .string()
+ .max(
+ 60,
+ 'Title should be 60 characters or less for optimal Open Graph display.',
+ ),
+ description: z
+ .string()
+ .max(
+ 155,
+ 'Description should be 155 characters or less for optimal Open Graph display.',
+ ),
+ date: z.coerce.date(),
+ image: image().optional(),
+ draft: z.boolean().optional(),
+ }),
+})
-export const collections = { blog };
+
+export const collections = { blog }
diff --git a/src/content/blog/2022-post/2022.png b/src/content/blog/2022-post/2022.png
new file mode 100644
index 0000000..3872e8d
Binary files /dev/null and b/src/content/blog/2022-post/2022.png differ
diff --git a/src/content/blog/2022-post/index.mdx b/src/content/blog/2022-post/index.mdx
new file mode 100644
index 0000000..b9e364a
--- /dev/null
+++ b/src/content/blog/2022-post/index.mdx
@@ -0,0 +1,9 @@
+---
+title: '2022 Post'
+description: 'This a dummy post written in the year 2022.'
+date: 2022-06-01
+tags: ['dummy', 'placeholder']
+image: './2022.png'
+---
+
+This is a dummy post written in the year 2022.
diff --git a/src/content/blog/2023-post/2023.png b/src/content/blog/2023-post/2023.png
new file mode 100644
index 0000000..67b860c
Binary files /dev/null and b/src/content/blog/2023-post/2023.png differ
diff --git a/src/content/blog/2023-post/index.mdx b/src/content/blog/2023-post/index.mdx
new file mode 100644
index 0000000..ef3164f
--- /dev/null
+++ b/src/content/blog/2023-post/index.mdx
@@ -0,0 +1,9 @@
+---
+title: '2023 Post'
+description: 'This a dummy post written in the year 2023.'
+date: 2023-06-01
+tags: ['dummy', 'placeholder']
+image: './2023.png'
+---
+
+This is a dummy post written in the year 2023.
diff --git a/src/content/blog/2024-post/2024.png b/src/content/blog/2024-post/2024.png
new file mode 100644
index 0000000..e684679
Binary files /dev/null and b/src/content/blog/2024-post/2024.png differ
diff --git a/src/content/blog/2024-post/index.mdx b/src/content/blog/2024-post/index.mdx
new file mode 100644
index 0000000..270223c
--- /dev/null
+++ b/src/content/blog/2024-post/index.mdx
@@ -0,0 +1,153 @@
+---
+title: '2024 Post'
+description: 'This a dummy post written in the year 2024 (with multiple authors).'
+date: 2024-06-01
+tags: ['dummy', 'placeholder']
+image: './2024.png'
+---
+
+This is a dummy post written in the year 2024! Here is a long blog post with heavily nested headers, which can be used to test the table of contents:
+
+## Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+#### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+#### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+#### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+###### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+#### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+#### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+#### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+###### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+#### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+#### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+#### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+###### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+#### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+#### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+#### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+###### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+#### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+#### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+#### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+###### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+
+### Test
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
diff --git a/src/content/artix-install-guide/index.md b/src/content/blog/artix-install-guide/index.md
similarity index 96%
rename from src/content/artix-install-guide/index.md
rename to src/content/blog/artix-install-guide/index.md
index b3128a2..8059962 100644
--- a/src/content/artix-install-guide/index.md
+++ b/src/content/blog/artix-install-guide/index.md
@@ -3,6 +3,7 @@ title: "Artix Linux install guide"
description: "Guide to installing Artix Linux with OpenRC and full disk encryption for UEFI and BIOS systems."
date: "2025-01-07"
---
+
---
## Introduction
@@ -31,7 +32,7 @@ Use [Rufus](https://rufus.ie/en), here is a [guide](https://www.wikihow.com/Use-
2. Find the corresponding block device for the flash drive in `/dev` folder. Usually it is `/dev/sdb`.
3. Burn the image to the flash drive (assuming your flash drive is /dev/sdb and that your terminal is opened in the directory of the image)
-```
+```sh
sudo dd bs=4M if=./artix-base-openrc-YYYY.MM.DD-x86_64.iso of=/dev/sdb conv=fsync oflag=direct status=progress
```
@@ -65,7 +66,7 @@ Connect the computer via an Ethernet cable
> [!Note]
>When encountering a code block as below throughout this guide, execute the commands within it directly in the terminal.
-```
+```sh
sudo rfkill unblock wifi
sudo ip link set wlan0 up
connmanctl
@@ -74,7 +75,7 @@ connmanctl
> [!Tip]
>Network names can be tab-completed.
-```
+```sh
agent on
scan wifi
services
@@ -83,7 +84,7 @@ services
> [!example]
>connect wifi_dc85de828967_38303944616e69656c73_managed_psk
-```
+```sh
connect {WiFi name}
quit
```
@@ -91,7 +92,7 @@ quit
### Verify internet connectivity
Check for internet
-```
+```sh
ping artixlinux.org
```
@@ -100,7 +101,7 @@ ping artixlinux.org
## Update the system clock
Activate the NTP daemon to synchronize the computer's real-time clock:
-```
+```sh
rc-service ntpd start
```
@@ -109,7 +110,7 @@ rc-service ntpd start
## Partition the disk
1. Install `gdisk`.
-```
+```sh
pacman -Sy gdisk
```
@@ -119,17 +120,17 @@ pacman -Sy gdisk
> `nvme0n1` will be used as the target install drive throughout this guide, adapt it to your drive name.
> If you have an hdd, your drive will start with `sda`.
-```
+```sh
gdisk /dev/nvme0n1
```
2. Delete any existing partitions
-```
+```txt
Command (m for help): d
```
3. Create a boot partition
-```
+```txt
Command (m for help): n
Partition number (1-128, default 1):
First sector (...):
@@ -138,7 +139,7 @@ Hex code or GUID (...): ef00
```
4. Create a root partition
-```
+```txt
Command (m for help): n
Partition number (2-128, default 1):
First sector (...):
@@ -147,20 +148,20 @@ Hex code or GUID (...): 8300
```
5. Save the changes
-```
+```txt
Command (m for help): w
Do you want to proceed? (Y/N): y
```
6. Verify partitioning
-```
+```sh
lsblk
```
> [!Note]
>It should look something like this:
-```
+```txt
NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINTS
nvme0n1 259:0 0 465,8G 0 disk
├─nvme0n1p1 259:1 0 512M 0 part
@@ -176,13 +177,13 @@ nvme0n1 259:0 0 465,8G 0 disk
> [!Tip]
>Make sure to enter a secure passphrase and to write it down in a secure place as you will not be able to change it later
-```
+```sh
cryptsetup luksFormat /dev/nvme0n1p2
Are you sure (Type `yes` in capital letters): YES
```
2. Open the encrypted partition
-```
+```sh
cryptsetup open /dev/nvme0n1p2 root
```
@@ -191,12 +192,12 @@ cryptsetup open /dev/nvme0n1p2 root
## Create file systems
1. Create the boot file system
-```
+```sh
mkfs.fat -F32 /dev/nvme0n1p1
```
1. Create the root file system
-```
+```sh
mkfs.ext4 /dev/mapper/root
```
@@ -205,24 +206,24 @@ mkfs.ext4 /dev/mapper/root
## Mount file systems
1. Mount the root file system
-```
+```sh
mount /dev/mapper/root /mnt
```
2. Mount the boot file system
-```
+```sh
mount -m /dev/nvme0n1p1 /mnt/boot
```
3. Verify mounting
-```
+```sh
lsblk
```
> [!Note]
>It should look something like this:
-```
+```txt
NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINTS
nvme0n1 259:0 0 465,8G 0 disk
├─nvme0n1p1 259:1 0 512M 0 part /mnt/boot
@@ -236,7 +237,7 @@ nvme0n1 259:0 0 465,8G 0 disk
Install the base system, kernel, init system and other essential packages.
-```
+```sh
basestrap /mnt base linux linux-firmware openrc elogind-openrc cryptsetup cryptsetup-openrc efibootmgr doas nano
```
@@ -247,7 +248,7 @@ basestrap /mnt base linux linux-firmware openrc elogind-openrc cryptsetup crypts
Install AMD CPU microcode updates
-```
+```sh
basestrap /mnt amd-ucode
```
@@ -255,7 +256,7 @@ basestrap /mnt amd-ucode
Install Intel CPU microcode updates
-```
+```sh
basestrap /mnt intel-ucode
```
@@ -263,7 +264,7 @@ basestrap /mnt intel-ucode
## Generate File System Table
-```
+```sh
fstabgen -U /mnt >> /mnt/etc/fstab
```
@@ -271,7 +272,7 @@ fstabgen -U /mnt >> /mnt/etc/fstab
## Switch to New Installation
-```
+```sh
artix-chroot /mnt bash
```
@@ -279,7 +280,7 @@ artix-chroot /mnt bash
## Network stack
-```
+```sh
pacman -S wpa_supplicant networkmanager networkmanager-openrc iwd iwd-openrc
rc-update add NetworkManager
rc-update add iwd
@@ -295,7 +296,7 @@ EOF
> [!Info]
>MAC randomization can be used for increased privacy by not disclosing your real MAC address to the WiFi network.
-```
+```sh
cat << EOF >> /etc/NetworkManager/conf.d/00-macrandomize.conf
[device-mac-randomization]
wifi.scan-rand-mac-address=yes
@@ -314,12 +315,12 @@ EOF
>Feel free to change `en_DK.UTF-8` to your preferred locale such as `en_US.UTF-8` or `en_GB.UTF-8`
1. Uncomment `en_DK.UTF-8`
-```
+```sh
nano /etc/locale.gen
```
2. Generate locales.
-```
+```sh
locale-gen
echo 'LANG=en_DK.UTF-8' > /etc/locale.conf
```
@@ -331,7 +332,7 @@ echo 'LANG=en_DK.UTF-8' > /etc/locale.conf
> [!example]
>`ln -sf /usr/share/zoneinfo/Asia/Dubai /etc/localtime`
-```
+```sh
ln -sf /usr/share/zoneinfo/Region/City /etc/localtime
```
@@ -339,7 +340,7 @@ ln -sf /usr/share/zoneinfo/Region/City /etc/localtime
## Set hardware clock from system clock
-```
+```sh
hwclock --systohc
```
@@ -350,24 +351,24 @@ hwclock --systohc
> [!Note]
>Change `artix` to your desired hostname in all of the following commands
-```
+```sh
echo 'artix' > /etc/hostname
```
1. Edit `/etc/conf.d/hostname`
-```
+```sh
nano /etc/conf.d/hostname
```
2. Replace `hostname="localhost"` with `hostname="artix"`
3. Edit `/etc/hosts`
-```
+```sh
nano /etc/hosts
```
4. Add the following:
-```
+```conf
127.0.0.1 localhost
::1 localhost
127.0.1.1 artix.localdomain artix
@@ -378,7 +379,7 @@ nano /etc/hosts
## Initramfs
1. Edit `/etc/mkinitcpio.conf`
-```
+```sh
nano /etc/mkinitcpio.conf
```
@@ -387,13 +388,13 @@ nano /etc/mkinitcpio.conf
> [!Note]
>It should look something like this:
-```
+```conf
HOOKS=(base udev autodetect microcode modconf kms keyboard keymap consolefont block encrypt filesystems fsck)
```
3. Run this
-```
+```sh
mkinitcpio -P
```
---
@@ -401,7 +402,7 @@ mkinitcpio -P
## Add a user
1. Set the root password.
-```
+```sh
passwd
```
@@ -410,7 +411,7 @@ passwd
> [!Tip]
>Change `artix` to your desired username
-```
+```sh
useradd -m artix
passwd artix
```
@@ -420,19 +421,19 @@ passwd artix
## Configure doas
1. Create the config file.
-```
+```sh
touch /etc/doas.conf
chown -c root:root /etc/doas.conf
chmod -c 0400 /etc/doas.conf
```
2. Edit `/etc/doas.conf`
-```
+```sh
nano /etc/doas.conf
```
3. Add the following:
-```
+```conf
permit artix as root
permit nopass artix as root cmd pacman
```
@@ -446,14 +447,14 @@ permit nopass artix as root cmd pacman
>If you see a bunch of files listed, use EFISTUB.
>If you do not see a bunch of files listed, your system does not support UEFI and you should use GRUB.
-```
+```sh
ls /sys/firmware/efi/efivars
```
### EFISTUB
1. Get the UUID of your root partition.
-```
+```sh
blkid -s UUID -o value /dev/nvme0n1p2
```
@@ -463,44 +464,44 @@ blkid -s UUID -o value /dev/nvme0n1p2
>Replace xxxx with the UUID that you obtained earlier.
>Replace `intel-ucode.img` with `amd-ucode.img` if you have an AMD CPU
-```
+```sh
efibootmgr -c -d /dev/nvme0n1 -p 1 -l /vmlinuz-linux -L "Artix" -u "cryptdevice=UUID=xxxx:root root=/dev/mapper/root rw initrd=\intel-ucode.img initrd=\initramfs-linux.img loglevel=3 quiet"
```
### GRUB
1. Install grub on your boot partition
-```
+```sh
pacman -S grub
grub-install /dev/sda
```
2. Get the UUID of your root partition.
-```
+```sh
blkid -s UUID -o value /dev/nvme0n1p2
```
3. Edit `/etc/default/grub`
-```
+```sh
nano /etc/default/grub
```
4. Add the following to the `GRUB_CMDLINE_LINUX` line, where xxxx is the UUID that you obtained earlier.
-```
+```conf
cryptdevice=UUID=xxxx:root root=/dev/mapper/root
```
> [!Note]
>It should look something like this:
-```
+```conf
GRUB_CMDLINE_LINUX="cryptdevice=UUID=550e8400-e29b-41d4-a716-446655440000:root root=/dev/mapper/root"
```
5. Uncomment `#GRUB_ENABLE_CRYPTODISK=y`
6. Generate the config file.
-```
+```sh
grub-mkconfig -o /boot/grub/grub.cfg
```
@@ -509,7 +510,7 @@ grub-mkconfig -o /boot/grub/grub.cfg
## Reboot
1. You can reboot and enter into your new installation.
-```
+```sh
exit
umount -R /mnt
reboot now
@@ -529,26 +530,26 @@ Login using the credentials that you set, if you followed the example your usern
#### Add arch extra repository
1. Install packages
-```
+```sh
doas pacman -Syu artix-archlinux-support curl
doas pacman-key --populate archlinux
doas sh -c "curl https://archlinux.org/mirrorlist/all -o /etc/pacman.d/mirrorlist-arch"
```
2. Edit `/etc/pacman.d/mirrorlist-arch`
-```
+```sh
doas nano /etc/pacman.d/mirrorlist-arch
```
3. Uncomment the first server entries under the worldwide section
4. Edit `/etc/pacman.conf`
-```
+```sh
doas nano /etc/pacman.conf
```
5. Add the following to the bottom of the file
-```
+```conf
##Arch
[extra]
Include = /etc/pacman.d/mirrorlist-arch
@@ -559,7 +560,7 @@ Include = /etc/pacman.d/mirrorlist-arch
#### Sort for fastest mirrors
-```
+```sh
doas pacman -Syu reflector pacman-contrib
doas reflector --verbose -p https -l 30 -f 5 --sort rate --save /etc/pacman.d/mirrorlist-arch
doas sh -c "curl https://gitea.artixlinux.org/packages/artix-mirrorlist/raw/branch/master/mirrorlist -o /etc/pacman.d/mirrorlist.bak"
@@ -569,7 +570,7 @@ doas sh -c "rankmirrors -v -n 5 /etc/pacman.d/mirrorlist.bak > /etc/pacman.d/mir
### AUR
#### Install paru
-```
+```sh
doas pacman -S --needed base-devel
git clone https://aur.archlinux.org/paru.git
cd paru
@@ -580,7 +581,7 @@ rm -rf paru
#### Replace sudo with doas
-```
+```sh
doas pacman -Rdd sudo
doas ln -s /usr/bin/doas /usr/bin/sudo
```
@@ -589,7 +590,7 @@ doas ln -s /usr/bin/doas /usr/bin/sudo
Install and enable the powerprofiles daemon
-```
+```sh
doas pacman -S power-profiles-daemon power-profiles-daemon-openrc
doas rc-update add power-profiles-daemon
doas rc-service power-profiles-daemon start
@@ -597,7 +598,7 @@ doas rc-service power-profiles-daemon start
### Add swap
-```
+```sh
doas fallocate -l 4G /swapfile
doas chmod 600 /swapfile
doas mkswap /swapfile
@@ -608,7 +609,7 @@ echo '/swapfile none swap sw 0 0' | doas tee -a /etc/fstab
### Auto-mount an external LUKS encrypted drive
-```
+```sh
doas fdisk /dev/sdb
>g, n, w
diff --git a/src/content/blog/the-state-of-static-blogs/1200x630.png b/src/content/blog/the-state-of-static-blogs/1200x630.png
new file mode 100644
index 0000000..933b94b
Binary files /dev/null and b/src/content/blog/the-state-of-static-blogs/1200x630.png differ
diff --git a/src/content/blog/the-state-of-static-blogs/index.mdx b/src/content/blog/the-state-of-static-blogs/index.mdx
new file mode 100644
index 0000000..d762e00
--- /dev/null
+++ b/src/content/blog/the-state-of-static-blogs/index.mdx
@@ -0,0 +1,182 @@
+---
+title: 'The State of Static Blogs in 2024'
+description: 'There should not be a single reason why you would need a command palette search bar to find a blog post on your own site.'
+date: 2024-07-25
+tags: ['webdev', 'opinion']
+image: './1200x630.png'
+---
+
+## Introduction
+
+Hello! My name is enscribe ([jktrn](https://github.com/jktrn) on GitHub), and I'm a fullstack web developer who has been fiddling with blogging platforms for a couple of years now. I run a blog at [enscribe.dev](https://enscribe.dev), where I write about cybersecurity and the capture-the-flag (CTF) scene.
+
+I have a lot of opinions about what makes a great blogging template. As a cumulative result of all the slop, bullshit, and outright terrible design decisions I've had to deal with working with various templates and frameworks, I bring you [astro-erudite](https://github.com/jktrn/astro-erudite), which should hopefully bring a better developer and user experience in terms of ease of use, customization, and performance.
+
+astro-erudite is written in Astro, a framework hyperoptimized for static content such as blogs. Aesthetically, it is also designed to be as boring as possible while still maintaining maximum functionality, as to allow for the freedom of the developer (or the designer they hire) to make their blog uniquely their own. Within the codebase of this template I've included many nuances that, in my opinion (and there will be many, many opinions here), make the developer experience significantly more pleasant. I've also _excluded_ many features that, frankly, you don't need.
+
+## Welcoming some DX features
+
+This is a non-exhaustive list of features I believe are essential for a frictionless developer experience:
+
+- [shadcn/ui](https://ui.shadcn.com) is a pretty controversial component library. I love it. I don't care much for the components themselves as they are literally [Radix](https://www.radix-ui.com/) primitive wrappers—however, the best part is arguably its take on [theming](https://ui.shadcn.com/docs/theming), which introduces a convention involving CSS colors such as `background` and `foreground` into your Tailwind configuration so that styling is a breeze. These classes also automatically adapt to the user's selected theme, and as such you don't need to worry about adding an equivalent `dark:` style to all of your theming. shadcn/ui turns `"bg-stone-50 text-stone-900 dark:bg-stone-900 dark:text-stone-50"` into `"bg-background text-foreground"`, both more semantic and easier to blanket edit (if you wanted to change all your blues in your site to indigos, you would need to go around every single class and change it rather than editing a single CSS variable). Other utility colors such as `secondary`, `muted`, `accent`, and `destructive` also exist and are very self-explanatory in name (and also have an equivalent `-foreground` class, e.g. `secondary-foreground`, which you can apply to text on top of these colors).
+- [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-typography) is a plugin that automatically styles any content surrounded by an `{:html}` tag in a way which makes it readable and blog-post-friendly. It does this via a `prose` class which you can wrap anything with to style the interior content. This is especially useful for HTML you don't control, e.g. a post rendered from Markdown. Although your control over the rendering is a bit less fine-grained, you're also already using Tailwind so this right has long been forsaken.
+- [Shiki](https://github.com/shikijs/shiki) is a syntax highlighter for code blocks. Although Astro code blocks utilize Shiki under the hood, I've actually disabled the default code blocks in this template so that they don't collide with my preferred library [rehype-pretty-code](https://rehype-pretty.pages.dev), which is _also_ powered by Shiki but allows for line numbers, line highlighting, inline code syntax highlighting, and a transformers API for advanced customization such as manual `diff` visualization and line blurring. This library does not ship with any CSS, and it's up to you to style the code blocks and code block titles as you see fit. I've provided styles in `src/styles/global.css` within the `@layer components{:css}` directive if you wish to fiddle with them. The following code block is an example of how to style code blocks using rehype-pretty-code, and was generated with the following Markdown code:
+
+ ````mdx
+ ```css title="src/styles/global.css" caption="Styling code blocks using rehype-pretty-code (with a caption down here)" showLineNumbers{80} {10-12} /apply/ /components/
+
+ ```
+ ````
+
+ ```css title="src/styles/global.css" caption="Styling code blocks using rehype-pretty-code (with a caption down here)" showLineNumbers{80} {10-12} /apply/ /components/
+ @layer components {
+ article {
+ @apply prose-headings:scroll-mt-20;
+
+ .katex-display {
+ @apply overflow-x-auto overflow-y-hidden;
+ }
+
+ /* Removes background from elements */
+ mark {
+ @apply bg-transparent;
+ }
+
+ /* Blanket syntax highlighting */
+ code[data-theme*=' '] {
+ span { /* [!code ++] */
+ color: var(--shiki-light); /* [!code ++] */
+ } /* [!code ++] */
+
+ .dark & span { /* [!code --] */
+ color: var(--shiki-dark); /* [!code --] */
+ } /* [!code --] */
+ }
+ ```
+
+ When I added those two diff additions and deletions, I simply added `/* [!code ++] */` and `/* [!code --] */` to the lines I wanted to highlight. Just use the comment syntax of whatever language you're attempting to highlight.
+
+- The `cn(){:ts}` function is a utility function which combines [clsx](https://www.npmjs.com/package/clsx) and [tailwind-merge](https://www.npmjs.com/package/tailwind-merge), two packages which allow painless conditional class addition and concatenation:
+
+ ```tsx title="src/lib/utils.ts" caption="A utility function for class name concatenation" showLineNumbers
+ import { type ClassValue, clsx } from 'clsx'
+ import { twMerge } from 'tailwind-merge'
+
+ export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+ }
+ ```
+
+ This needs to be in every single template. This is an example of it being used in my `{:tsx}` component:
+
+ ```astro showLineNumbers title="src/components/Link.astro" caption="A custom Link component with tailwind-merge and clsx" {16-20}
+ ---
+ import { cn } from '@/lib/utils'
+
+ const { href, external, class: className, underline, ...rest } = Astro.props
+ ---
+
+
+
+
+ ```
+
+ We were able to, in a single helper function:
+
+ 1. Concatenate whatever the user passed via the `class` prop to our base styles
+ 2. Conditionally add an underline if the `underline` prop is true
+
+ Awesome!
+
+## Welcoming some UX features
+
+Within the blog itself (as in the layout, appearance, and navigation) are features that I believe are essential for a great user experience:
+
+- Images are awesome and, by default, your blog post should have an image associated with it as part of the post's [Open Graph](https://ogp.me/) metadata. Since you can do whatever you want with the image, all of my dummy posts will have a placeholder image placed within their folder in `src/content/blog/`. Whenever you load into a blog post, splat in the middle will be the image associated with that post in its frontmatter.
+- Theme selectors should be self-explanatory. I've added one on the top right of the header, which is also `sticky` and not `absolute` such that it doesn't ignore the document flow (and thus you won't have to add `mt-20` to the top of every single page).
+- The table of contents of a post shouldn't be reduced to a `{:html}` at the start of a blog post on desktop. You'd need to go to the top of the page to navigate through items. I've added a sticky `TableOfContents` component which always hangs out around the unused left side margin of a blog post. I also attached a very tiny client-side script using [`IntersectionObserver{:ts}`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) to highlight all of the headings you're viewing within the TOC as you scroll through the page—it also will handle nested headings in that the parent heading of a visible child will still be highlighted even if off-screen (see the dummy [2024 Post](/blog/2024-post) for an example of this). I'll still use a collapsible `{:html}` element for the table of contents on mobile though since obviously a table of contents on the side is unfeasible for small screens.
+- Every page, except the homepage, will have a `{:tsx}` component which shows you your current location in the site hierarchy. I don't see these often in blog templates even though they are so amazing for both discoverability (SEO and crawling) and user experience (the user always knows how "deep" they are in the site).
+- You can specify multiple post authors via frontmatter. If this post author's id is found within the `Authors` collection, then it will render particular info from that author's frontmatter file, `[author-name].md` (e.g. avatar, link to profile). For example, the previous post (2024 Post) has two authors: "enscribe" and "jktrn", where "enscribe" is the only author with a custom avatar since "jktrn" is unregistered.
+ - Each author will have their own page, which lists all of their posts. If you're the only author throughout the entire blog then you can simply disregard all aspects regarding both inserting authors and the `Authors` collection.
+- Each tag will also have their own page, which lists all of the posts under that tag!
+- $\LaTeX$ is fully supported with [KaTeX](https://katex.org/):
+
+
+
+ To solve the cubic equation $t^3 + pt + q = 0$ (where the real numbers
+ $p, q$ satisfy ${4p^3 + 27q^2} > 0$) one can use Cardano's formula:
+
+ $$
+ \sqrt[{3}]{
+ -\frac{q}{2}
+ +\sqrt{\frac{q^2}{4} + {\frac{p^{3}}{27}}}
+ }+
+ \sqrt[{3}]{
+ -\frac{q}{2}
+ -\sqrt{\frac{q^2}{4} + {\frac{p^{3}}{27}}}
+ }
+ $$
+
+ For any $u_1, \dots, u_n \in \mathbb{C}$ and
+ $v_1, \dots, v_n \in \mathbb{C}$, the Cauchy–Bunyakovsky–Schwarz
+ inequality can be written as follows:
+
+ $$
+ \left| \sum_{k=1}^n {u_k \bar{v_k}} \right|^2
+ \leq
+ {
+ \left( \sum_{k=1}^n {|u_k|} \right)^2
+ \left( \sum_{k=1}^n {|v_k|} \right)^2
+ }
+ $$
+
+ Finally, the determinant of a Vandermonde matrix can be calculated
+ using the following expression:
+
+ $$
+ \begin{vmatrix}
+ 1 & x_1 & x_1^2 & \dots & x_1^{n-1} \\
+ 1 & x_2 & x_2^2 & \dots & x_2^{n-1} \\
+ 1 & x_3 & x_3^2 & \dots & x_3^{n-1} \\
+ \vdots & \vdots & \vdots & \ddots & \vdots \\
+ 1 & x_n & x_n^2 & \dots & x_n^{n-1} \\
+ \end{vmatrix}
+ = {\prod_{1 \leq {i,j} \leq n} {(x_i - x_j)}}
+ $$
+
+ —[Three famous mathematical formulas](https://developer.mozilla.org/en-US/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas) (Mozilla Docs)
+
+
+
+## Foregoing some slop
+
+- Goodbye, [ESLint](https://eslint.org/)! There have been so many occasions where I've had to deal with blogging templates with in-built pre-commit hooks which enforce contrived and arbitrary linting rules that, frankly, I couldn't be bothered with. Obviously, linting is awesome for ensuring consistency and best practice, but that's with shared and large codebases. You're dealing with, at most, your mediocre MDX blog posts and some interior fetching. It's just not worth the hypertension.
+
+- You really don't need analytics via [Umami](https://umami.is) or [Plausible](https://plausible.io). Let's be realistic: for many personal blogs, unless you're an anime profile picture Twitter microcelebrity and/or the daughter of Taylor Swift you don't need to know how many of your avid fans click Big Button A versus how many click Big Button B.
+- You really don't need a comments section via [Giscus](https://giscus.app). This opens up a can of worms involving the ability to spam comments and the necessity to moderate them. If you want organic discussion about your blog posts to happen, then share on social media and let people discuss there.
+ - Speaking of sharing on social media, let's get rid of the share buttons. Please inform me of a single time you have used a share button on a blog post.
+- You really don't need a CMS unless you have thousands of posts and/or are willing to navigate through a clunky management interface. Markdown and folders is really all you need, which you can organize to your preference via folder or file naming conventions.
+- If you have literally anything involving an `.env` file in a blogging site, please think about what you are doing very carefully.
+- Please do not override the browser's Ctrl + K functionality to open up a command palette. There should not be a single reason why a user would use a small context menu to browse your blog over the `/blog` route. Most of the time, command palettes on sites do nothing more than regurgitate shortcuts that are already on the same page you're hiding with the palette's modal.
+
+## Something important
+
+Before we wrap up, I want to emphasize that everything that I've shared here is based on my own personal opinions and experiences. While I believe these practices and choices lead to a better blogging experience, you're absolutely free to disagree.
+
+The web development community, especially in spaces like Twitter and various online forums, is constantly engaged in heated debates about what constitutes "best practices." You'll find a wide spectrum of viewpoints:
+
+1. Fundamentalists who adhere strictly to established patterns and completely disregard change,
+2. Accelerationists who gobble up whatever Vercel cooks as if it's the second coming of Christ,
+3. and everyone in between this spectrum who just wants to ship.
+
+I'm just another guy who loves to blog, and I wanted to share what particular technology stack worked the best for me in this particular use case. A stack for one project can be completely unusable for another. If you vehemently hate any of the design choices I've made then simply get rid of them. MIT license! Happy blogging.
diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 0000000..acef35f
--- /dev/null
+++ b/src/env.d.ts
@@ -0,0 +1,2 @@
+///
+///
diff --git a/src/favicon.svg b/src/favicon.svg
deleted file mode 100644
index 63d5f6d..0000000
--- a/src/favicon.svg
+++ /dev/null
@@ -1,55 +0,0 @@
-
-
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e0b0bfa..77e3be2 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,24 +1,36 @@
---
-import Footer from "@components/Footer.astro";
-import Head from "@components/Head.astro";
-import { SITE } from "@consts";
+import Footer from '@/components/Footer.astro'
+import Head from '@/components/Head.astro'
+import Header from '@/components/Header.astro'
+import { SITE } from '@/consts'
type Props = {
- title: string;
- description: string;
-};
+ title: string
+ description: string
+ image?: string
+}
-const { title, description } = Astro.props;
+const { title, description, image } = Astro.props
---
+
-
+
-
-
-
-
+
+
+
+
+
+
+
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 16fabfe..3900a3d 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,21 +1,21 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
export function cn(...inputs: ClassValue[]) {
- return twMerge(clsx(inputs));
+ return twMerge(clsx(inputs))
}
export function formatDate(date: Date) {
- return Intl.DateTimeFormat("en-SE", {
- year: "numeric",
- month: "2-digit",
- day: "2-digit",
- }).format(date);
+ return Intl.DateTimeFormat('en-US', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ }).format(date)
}
export function readingTime(html: string) {
- const textOnly = html.replace(/<[^>]+>/g, "");
- const wordCount = textOnly.split(/\s+/).length;
- const readingTimeMinutes = (wordCount / 200 + 1).toFixed();
- return `${readingTimeMinutes} min read`;
+ const textOnly = html.replace(/<[^>]+>/g, '')
+ const wordCount = textOnly.split(/\s+/).length
+ const readingTimeMinutes = (wordCount / 200 + 1).toFixed()
+ return `${readingTimeMinutes} min read`
}
diff --git a/src/pages/404.astro b/src/pages/404.astro
index a4fa20c..5b8a0cf 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,15 +1,37 @@
---
-import Container from "@components/Container.astro";
-import { SITE } from "@consts";
-import Layout from "@layouts/Layout.astro";
+import Breadcrumbs from '@/components/Breadcrumbs.astro'
+import Container from '@/components/Container.astro'
+import Link from '@/components/Link.astro'
+import { buttonVariants } from '@/components/ui/button'
+import { SITE } from '@/consts'
+import Layout from '@/layouts/Layout.astro'
+import { cn } from '@/lib/utils'
---
-
-
-
- 404: Page not found
-
-
+
+
+
+
+
+
404: Page not found
+
+ Oops! The page you're looking for doesn't exist.
+
+
-
-
-
-
- •
- {
- post.body && (
-
{readingTime(post.body)}
- )
- }
-
-
- {post.data.title}
-
-
+
+ {post.data.title}
+
+
+
+
+ {formatDate(post.data.date)}
+
+ {readingTime(post.body!)}
+
+
+
+ {
+ years.map((year) => (
+
+ {year}
+
+ {postsByYear[year].map((post) => (
+ -
+
+
+ ))}
+
+
+ ))
+ }
+