package.json

@@ -25,6 +25,7 @@
 	},
 	"dependencies": {
 		"lqip": "^2.1.0",
+		"marked": "^11.1.1",
 		"sharp": "^0.32.6"
 	}
 }

pnpm-lock.yaml

@@ -8,6 +8,9 @@ dependencies:
   lqip:
     specifier: ^2.1.0
     version: 2.1.0
+  marked:
+    specifier: ^11.1.1
+    version: 11.1.1
   sharp:
     specifier: ^0.32.6
     version: 0.32.6
@@ -3021,6 +3024,12 @@ packages:
     resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
     dev: true
 
+  /marked@11.1.1:
+    resolution: {integrity: sha512-EgxRjgK9axsQuUa/oKMx5DEY8oXpKJfk61rT5iY3aRlgU6QJtUcxU5OAymdhCvWvhYcd9FKmO5eQoX8m9VGJXg==}
+    engines: {node: '>= 18'}
+    hasBin: true
+    dev: false
+
   /mdast-util-definitions@5.1.2:
     resolution: {integrity: sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==}
     dependencies:

src/api/projects.ts

@@ -1,7 +1,12 @@
 import type { MarkdownInstance } from "astro"
 import { compareByHas } from "src/utils/compare-by-has"
 
-export type Project = MarkdownInstance<{
+interface Image {
+	src: string
+	alt: string
+}
+
+interface BaseProjectFrontmatter {
 	link: string
 	title: string
 	links: Array<{
@@ -11,10 +16,24 @@ export type Project = MarkdownInstance<{
 	}>
 	color?: string
 	time?: string
-}>
+	index?: number
+}
+
+export type BaseProject = MarkdownInstance<BaseProjectFrontmatter>
+export type PageProject = MarkdownInstance<
+	BaseProjectFrontmatter & {
+		cover?: string
+		images?: Image[]
+	}
+>
+
+export type Project = BaseProject | PageProject
 
 export const sortProjects = (files: any[]): Project[] =>
 	files.sort(({ frontmatter: a }, { frontmatter: b }) => {
+		if (compareByHas(a, b, "index") !== 0)
+			return compareByHas(a, b, "index")
+
 		if (compareByHas(a, b, "date") !== 0) return compareByHas(a, b, "date")
 		if (compareByHas(a, b, "time") !== 0) return compareByHas(a, b, "time")
 
@@ -26,3 +45,10 @@ export const sortProjects = (files: any[]): Project[] =>
 
 		return 0
 	})
+
+export const isProjectLink = (href: string) => href.startsWith("/")
+
+export const needsProjectPage = ({ frontmatter: { link, links } }: Project) => {
+	if (isProjectLink(link)) return true
+	return links.findIndex(({ href }) => isProjectLink(href)) !== -1
+}

src/assets/icon.css

@@ -0,0 +1,13 @@
+svg.icon {
+	font-size: var(--icon-size, 1em);
+	width: 1em;
+	height: 1em;
+	display: inline-block;
+	vertical-align: text-bottom;
+	line-height: 0;
+
+	color: var(--icon-color, var(--title-color));
+}
+svg.icon--pwa {
+	width: 2em;
+}

src/components/Header.astro

@@ -1,41 +1,52 @@
 ---
 import Icon from "../lib/Icon.astro"
 export interface Props {
-	class?: string
+    class?: string
+    sticky?: boolean
 }
-const { class: class_ } = Astro.props
+const { class: class_, sticky = false } = Astro.props
 ---
 
-<header class:list={["header", { [class_ as string]: class_ }]}>
-	<slot>
-		<a href="/" class="link link--back">
-			<Icon name="arrow-left" class="header__icon" />
-			Главная
-		</a>
-	</slot>
-	<a class="link--cv" href="/cv">Резюме</a>
+<header
+    class:list={[
+        "header",
+        { [class_ as string]: class_, "header--sticky": sticky },
+    ]}
+>
+    <slot name="back">
+        <a href="/" class="link link--back">
+            <Icon name="arrow-left" class="header__icon" />
+            Главная
+        </a>
+    </slot>
+    <a class="link--cv" href="/cv">Резюме</a>
 </header>
 
 <style>
-	header {
-		display: flex;
-		padding: 1em;
+    header {
+        display: flex;
+        padding: 1em;
 
-		:global(.icon) {
-			opacity: 0.5;
-		}
-		:global(.link--back) {
-			display: flex;
-			gap: 0.5em;
-			align-items: center;
-		}
-		:global(a) {
-			display: block;
-			color: inherit;
-			text-decoration: none;
-		}
-	}
-	.link--cv {
-		margin-left: auto;
-	}
+        :global(.icon) {
+            opacity: 0.5;
+        }
+        :global(.link--back) {
+            display: flex;
+            gap: 0.5em;
+            align-items: center;
+        }
+        :global(a) {
+            display: block;
+            color: inherit;
+            text-decoration: none;
+        }
+    }
+    .header--sticky {
+        position: var(--position, sticky);
+        background-color: var(--background-color);
+        top: 0;
+    }
+    .link--cv {
+        margin-left: auto;
+    }
 </style>