├── .eslintignore
├── _astro_nano.png
├── _lighthouse.png
├── public
    ├── patrick.webp
    ├── astro-nano.png
    ├── lighthouse.png
    ├── astro-sphere.jpg
    ├── fonts
    │   ├── atkinson-bold.woff
    │   ├── MonaSans-Light.woff2
    │   ├── atkinson-regular.woff
    │   ├── MonaSans-Regular.woff2
    │   └── MonaSans-SemiBold.woff2
    ├── favicon-dark.svg
    ├── favicon-light.svg
    ├── deploy_netlify.svg
    └── deploy_vercel.svg
├── src
    ├── env.d.ts
    ├── components
    │   ├── Container.astro
    │   ├── FormattedDate.astro
    │   ├── Link.astro
    │   ├── BackToTop.astro
    │   ├── Header.astro
    │   ├── BackToPrev.astro
    │   ├── ArrowCard.astro
    │   ├── Footer.astro
    │   └── Head.astro
    ├── content
    │   ├── blog
    │   │   ├── 05-markdown-syntax
    │   │   │   ├── spongebob.webp
    │   │   │   └── index.md
    │   │   ├── 07-year-sorting-example
    │   │   │   └── index.md
    │   │   ├── 06-mdx-syntax
    │   │   │   ├── component.astro
    │   │   │   └── index.mdx
    │   │   ├── 08-draft-example
    │   │   │   └── index.md
    │   │   ├── 02-blog-collection
    │   │   │   └── index.md
    │   │   ├── 04-work-collection
    │   │   │   └── index.md
    │   │   ├── 01-getting-started
    │   │   │   └── index.md
    │   │   └── 03-projects-collection
    │   │   │   └── index.md
    │   ├── work
    │   │   ├── facebook.md
    │   │   ├── apple.md
    │   │   ├── mcdonalds.md
    │   │   └── google.md
    │   ├── config.ts
    │   └── projects
    │   │   ├── project-1
    │   │       └── index.md
    │   │   └── project-2
    │   │       └── index.md
    ├── types.ts
    ├── pages
    │   ├── robots.txt.ts
    │   ├── rss.xml.ts
    │   ├── projects
    │   │   ├── index.astro
    │   │   └── [...slug].astro
    │   ├── blog
    │   │   ├── [...slug].astro
    │   │   └── index.astro
    │   ├── work
    │   │   └── index.astro
    │   └── index.astro
    ├── layouts
    │   └── PageLayout.astro
    ├── consts.ts
    ├── lib
    │   └── utils.ts
    └── styles
    │   └── global.css
├── .vscode
    ├── extensions.json
    └── launch.json
├── tsconfig.json
├── .gitignore
├── astro.config.mjs
├── tailwind.config.mjs
├── .eslintrc.cjs
├── LICENSE
├── package.json
├── README.md
├── _deploy_netlify.svg
└── _deploy_vercel.svg


/.eslintignore:
--------------------------------------------------------------------------------
1 | .vscode/
2 | dist/
3 | node_modules/
4 | public/
5 | 


--------------------------------------------------------------------------------
/_astro_nano.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markhorn-dev/astro-nano/HEAD/_astro_nano.png


--------------------------------------------------------------------------------
/_lighthouse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markhorn-dev/astro-nano/HEAD/_lighthouse.png


--------------------------------------------------------------------------------
/public/patrick.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markhorn-dev/astro-nano/HEAD/public/patrick.webp


--------------------------------------------------------------------------------
/public/astro-nano.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markhorn-dev/astro-nano/HEAD/public/astro-nano.png


--------------------------------------------------------------------------------
/public/lighthouse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markhorn-dev/astro-nano/HEAD/public/lighthouse.png


--------------------------------------------------------------------------------
/public/astro-sphere.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markhorn-dev/astro-nano/HEAD/public/astro-sphere.jpg


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference path="../.astro/types.d.ts" />
2 | /// <reference types="astro/client" />
3 | 


--------------------------------------------------------------------------------
/public/fonts/atkinson-bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markhorn-dev/astro-nano/HEAD/public/fonts/atkinson-bold.woff


--------------------------------------------------------------------------------
/public/fonts/MonaSans-Light.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markhorn-dev/astro-nano/HEAD/public/fonts/MonaSans-Light.woff2


--------------------------------------------------------------------------------
/public/fonts/atkinson-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markhorn-dev/astro-nano/HEAD/public/fonts/atkinson-regular.woff


--------------------------------------------------------------------------------
/public/fonts/MonaSans-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markhorn-dev/astro-nano/HEAD/public/fonts/MonaSans-Regular.woff2


--------------------------------------------------------------------------------
/public/fonts/MonaSans-SemiBold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markhorn-dev/astro-nano/HEAD/public/fonts/MonaSans-SemiBold.woff2


--------------------------------------------------------------------------------
/src/components/Container.astro:
--------------------------------------------------------------------------------
1 | ---
2 | 
3 | ---
4 | 
5 | <div class="mx-auto max-w-screen-sm px-5">
6 |   <slot />
7 | </div>
8 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["astro-build.astro-vscode", "unifiedjs.vscode-mdx"],
3 |   "unwantedRecommendations": []
4 | }
5 | 


--------------------------------------------------------------------------------
/src/content/blog/05-markdown-syntax/spongebob.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/markhorn-dev/astro-nano/HEAD/src/content/blog/05-markdown-syntax/spongebob.webp


--------------------------------------------------------------------------------
/src/content/blog/07-year-sorting-example/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Year sorting example"
3 | description: "Nano groups posts by year."
4 | date: "12/31/2023"
5 | ---
6 | 
7 | This post is to demonstrate the year sorting capabilities.


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "astro/tsconfigs/strict",
 3 |   "compilerOptions": {
 4 |     "strictNullChecks": true,
 5 |     "baseUrl": ".",
 6 |     "paths": {
 7 |       "@*": ["./src/*"]
 8 |     }
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |     {
 5 |       "command": "./node_modules/.bin/astro dev",
 6 |       "name": "Development server",
 7 |       "request": "launch",
 8 |       "type": "node-terminal"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/src/content/blog/06-mdx-syntax/component.astro:
--------------------------------------------------------------------------------
1 | ---
2 | 
3 | ---
4 | 
5 | <button
6 |   onclick="alert(`You clicked the button!`)"
7 |   class="p-2 border border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/10 transition-colors duration-300 ease-in-out">
8 |   Relative Button
9 | </button>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist/
 3 | 
 4 | # generated types
 5 | .astro/
 6 | 
 7 | # dependencies
 8 | node_modules/
 9 | 
10 | # logs
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | 
17 | # environment variables
18 | .env
19 | .env.production
20 | 
21 | # macOS-specific files
22 | .DS_Store
23 | 


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "astro/config";
 2 | import mdx from "@astrojs/mdx";
 3 | import sitemap from "@astrojs/sitemap";
 4 | import tailwind from "@astrojs/tailwind";
 5 | 
 6 | export default defineConfig({
 7 |   site: "https://astro-nano-demo.vercel.app",
 8 |   integrations: [mdx(), sitemap(), tailwind()],
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/components/FormattedDate.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | interface Props {
 3 |   date: Date;
 4 | }
 5 | 
 6 | const { date } = Astro.props;
 7 | ---
 8 | 
 9 | <time datetime={date.toISOString()}>
10 |   {
11 |     date.toLocaleDateString("en-us", {
12 |       month: "short",
13 |       day: "numeric",
14 |       year: "numeric",
15 |     })
16 |   }
17 | </time>
18 | 


--------------------------------------------------------------------------------
/src/content/work/facebook.md:
--------------------------------------------------------------------------------
1 | ---
2 | company: "Facebook"
3 | role: "Intern"
4 | dateStart: "07/01/2019"
5 | dateEnd: "12/31/2019"
6 | ---
7 | 
8 | Iure illo neque tempora, voluptatem est quaerat voluptas praesentium ipsa dolorem dignissimos nulla ratione distinctio quae maiores eligendi nostrum? Quibusdam, debitis voluptatum, lorem ipsum dolor. Sit amet consectetur adipisicing elit.


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | export type Site = {
 2 |   NAME: string;
 3 |   EMAIL: string;
 4 |   NUM_POSTS_ON_HOMEPAGE: number;
 5 |   NUM_WORKS_ON_HOMEPAGE: number;
 6 |   NUM_PROJECTS_ON_HOMEPAGE: number;
 7 | };
 8 | 
 9 | export type Metadata = {
10 |   TITLE: string;
11 |   DESCRIPTION: string;
12 | };
13 | 
14 | export type Socials = {
15 |   NAME: string;
16 |   HREF: string;
17 | }[];
18 | 


--------------------------------------------------------------------------------
/src/content/blog/08-draft-example/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Draft example"
 3 | description: "Setting draft flag to true to hide this post."
 4 | date: "12/31/2022"
 5 | draft: false
 6 | ---
 7 | 
 8 | This post is to demonstrate the year sorting capabilities.
 9 | 
10 | If you are seeing this post, edit `src/content/08-draft-example` and enter `draft: true` in the metadata.
11 | 
12 | 


--------------------------------------------------------------------------------
/src/content/work/apple.md:
--------------------------------------------------------------------------------
1 | ---
2 | company: "Apple"
3 | role: "Software Engineer"
4 | dateStart: "01/01/2020"
5 | dateEnd: "11/27/2022"
6 | ---
7 | 
8 | Voluptatem est quaerat voluptas praesentium ipsa dolorem dignissimos nulla ratione distinctio quae maiores eligendi nostrum? Quibusdam, debitis voluptatum, lorem ipsum dolor. Sit amet consectetur adipisicing elit. Iure illo neque tempora.


--------------------------------------------------------------------------------
/src/content/work/mcdonalds.md:
--------------------------------------------------------------------------------
1 | ---
2 | company: "McDonalds"
3 | role: "French Fryer"
4 | dateStart: "03/16/2018"
5 | dateEnd: "07/01/2019"
6 | ---
7 | 
8 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure illo neque tempora, voluptatem est quaerat voluptas praesentium ipsa dolorem dignissimos nulla ratione distinctio quae maiores eligendi nostrum? Quibusdam, debitis voluptatum.


--------------------------------------------------------------------------------
/src/content/work/google.md:
--------------------------------------------------------------------------------
1 | ---
2 | company: "Google"
3 | role: "Staff Software Engineer"
4 | dateStart: "11/27/2022"
5 | dateEnd: "Current"
6 | ---
7 | 
8 | Sit amet consectetur adipisicing elit. Iure illo neque tempora, voluptatem est quaerat voluptas praesentium ipsa dolorem dignissimos nulla ratione distinctio quae maiores eligendi nostrum? Quibusdam, debitis voluptatum, lorem ipsum dolor.


--------------------------------------------------------------------------------
/src/pages/robots.txt.ts:
--------------------------------------------------------------------------------
 1 | import type { APIRoute } from "astro";
 2 | 
 3 | const robotsTxt = `
 4 | User-agent: *
 5 | Allow: /
 6 | 
 7 | Sitemap: ${new URL("sitemap-index.xml", import.meta.env.SITE).href}
 8 | `.trim();
 9 | 
10 | export const GET: APIRoute = () => {
11 |   return new Response(robotsTxt, {
12 |     headers: {
13 |       "Content-Type": "text/plain; charset=utf-8",
14 |     },
15 |   });
16 | };


--------------------------------------------------------------------------------
/tailwind.config.mjs:
--------------------------------------------------------------------------------
 1 | import defaultTheme from "tailwindcss/defaultTheme";
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | export default {
 5 |   darkMode: ["class"],
 6 |   content: [
 7 |     "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
 8 |   ],
 9 |   theme: {
10 |     extend: {
11 |       fontFamily: {
12 |         sans: ["Inter", ...defaultTheme.fontFamily.sans],
13 |         serif: ["Lora", ...defaultTheme.fontFamily.serif],
14 |       },
15 |     },
16 |   },
17 |   plugins: [require("@tailwindcss/typography")],
18 | };
19 | 


--------------------------------------------------------------------------------
/src/layouts/PageLayout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Head from "@components/Head.astro";
 3 | import Header from "@components/Header.astro";
 4 | import Footer from "@components/Footer.astro";
 5 | import { SITE } from "@consts";
 6 | 
 7 | type Props = {
 8 |   title: string;
 9 |   description: string;
10 | };
11 | 
12 | const { title, description } = Astro.props;
13 | ---
14 | 
15 | <!doctype html>
16 | <html lang="en">
17 |   <head>
18 |     <Head title={`${title} | ${SITE.NAME}`} description={description} />
19 |   </head>
20 |   <body>
21 |     <Header />
22 |     <main>
23 |       <slot />
24 |     </main>
25 |     <Footer />
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/src/components/Link.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { cn } from "@lib/utils";
 3 | 
 4 | type Props = {
 5 |   href: string;
 6 |   external?: boolean;
 7 |   underline?: boolean;
 8 | }
 9 | 
10 | const { href, external, underline = true, ...rest } = Astro.props;
11 | ---
12 | 
13 | <a 
14 |   href={href} 
15 |   target={ external ? "_blank" : "_self" } 
16 |   class={cn("inline-block decoration-black/15 dark:decoration-white/30 hover:decoration-black/25 hover:dark:decoration-white/50 text-current hover:text-black hover:dark:text-white transition-colors duration-300 ease-in-out", underline && "underline underline-offset-2")}
17 |   {...rest}>
18 |   <slot/>
19 | </a>
20 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     node: true,
 4 |     browser: true,
 5 |     es2024: true,
 6 |   },
 7 |   extends: [
 8 |     "eslint:recommended",
 9 |     "plugin:astro/recommended",
10 |     "plugin:@typescript-eslint/recommended",
11 |   ],
12 |   parserOptions: {
13 |     ecmaVersion: "latest",
14 |     sourceType: "module",
15 |   },
16 |   rules: {
17 |     semi: ["error", "always"],
18 |     quotes: ["error", "double", { "allowTemplateLiterals": true }],
19 |     "@typescript-eslint/triple-slash-reference": "off",
20 |   },
21 |   overrides: [
22 |     {
23 |       files: ["*.astro"],
24 |       parser: "astro-eslint-parser",
25 |       parserOptions: {
26 |         parser: "@typescript-eslint/parser",
27 |         extraFileExtensions: [".astro"],
28 |       },
29 |       rules: {},
30 |     },
31 |   ],
32 | };
33 | 


--------------------------------------------------------------------------------
/src/components/BackToTop.astro:
--------------------------------------------------------------------------------
 1 | <button id="back-to-top" class="relative group w-fit flex pl-8 pr-3 py-1.5 flex-nowrap rounded border border-black/15 dark:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out">
 2 |   <svg 
 3 |     xmlns="http://www.w3.org/2000/svg" 
 4 |     viewBox="0 0 24 24"
 5 |     class="absolute top-1/2 left-2 -translate-y-1/2 size-4 stroke-2 fill-none stroke-current rotate-90">
 6 |     <line x1="5" y1="12" x2="19" y2="12" class="translate-x-2 group-hover:translate-x-0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out" />
 7 |     <polyline points="12 5 5 12 12 19" class="translate-x-1 group-hover:translate-x-0 transition-transform duration-300 ease-in-out" />
 8 |   </svg>
 9 |   <div class="text-sm">
10 |     Back to top
11 |   </div>
12 | </button>


--------------------------------------------------------------------------------
/src/components/Header.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Container from "@components/Container.astro";
 3 | import Link from "@components/Link.astro";
 4 | import { SITE } from "@consts";
 5 | ---
 6 | 
 7 | <header>
 8 |   <Container>
 9 |     <div class="flex flex-wrap gap-y-2 justify-between">
10 |       <Link href="/" underline={false}>
11 |         <div class="font-semibold">
12 |           {SITE.NAME}
13 |         </div>
14 |       </Link>
15 |       <nav class="flex gap-1">
16 |         <Link href="/blog">
17 |           blog
18 |         </Link>
19 |         <span>
20 |           {`/`}
21 |         </span>
22 |         <Link href="/work">
23 |           work
24 |         </Link>
25 |         <span>
26 |           {`/`}
27 |         </span>
28 |         <Link href="/projects">
29 |           projects
30 |         </Link>
31 |       </nav>
32 |     </div>
33 |   </Container>
34 | </header>
35 | 


--------------------------------------------------------------------------------
/src/pages/rss.xml.ts:
--------------------------------------------------------------------------------
 1 | import rss from "@astrojs/rss";
 2 | import { getCollection } from "astro:content";
 3 | import { HOME } from "@consts";
 4 | 
 5 | type Context = {
 6 |   site: string
 7 | }
 8 | 
 9 | export async function GET(context: Context) {
10 |   const blog = (await getCollection("blog"))
11 |   .filter(post => !post.data.draft);
12 | 
13 |   const projects = (await getCollection("projects"))
14 |     .filter(project => !project.data.draft);
15 | 
16 |   const items = [...blog, ...projects]
17 |     .sort((a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf());
18 | 
19 |   return rss({
20 |     title: HOME.TITLE,
21 |     description: HOME.DESCRIPTION,
22 |     site: context.site,
23 |     items: items.map((item) => ({
24 |       title: item.data.title,
25 |       description: item.data.description,
26 |       pubDate: item.data.date,
27 |       link: `/${item.collection}/${item.slug}/`,
28 |     })),
29 |   });
30 | }
31 | 


--------------------------------------------------------------------------------
/src/content/config.ts:
--------------------------------------------------------------------------------
 1 | import { defineCollection, z } from "astro:content";
 2 | 
 3 | const blog = defineCollection({
 4 |   type: "content",
 5 |   schema: z.object({
 6 |     title: z.string(),
 7 |     description: z.string(),
 8 |     date: z.coerce.date(),
 9 |     draft: z.boolean().optional()
10 |   }),
11 | });
12 | 
13 | const work = defineCollection({
14 |   type: "content",
15 |   schema: z.object({
16 |     company: z.string(),
17 |     role: z.string(),
18 |     dateStart: z.coerce.date(),
19 |     dateEnd: z.union([z.coerce.date(), z.string()]),
20 |   }),
21 | });
22 | 
23 | const projects = defineCollection({
24 |   type: "content",
25 |   schema: z.object({
26 |     title: z.string(),
27 |     description: z.string(),
28 |     date: z.coerce.date(),
29 |     draft: z.boolean().optional(),
30 |     demoURL: z.string().optional(),
31 |     repoURL: z.string().optional()
32 |   }),
33 | });
34 | 
35 | export const collections = { blog, work, projects };
36 | 


--------------------------------------------------------------------------------
/src/components/BackToPrev.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | type Props = {
 3 |   href: string;
 4 | }
 5 | 
 6 | const { href } = Astro.props;
 7 | ---
 8 |  
 9 | <a href={href} class="relative group w-fit flex pl-7 pr-3 py-1.5 flex-nowrap rounded border border-black/15 dark:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out">
10 |   <svg 
11 |     xmlns="http://www.w3.org/2000/svg" 
12 |     viewBox="0 0 24 24"
13 |     class="absolute top-1/2 left-2 -translate-y-1/2 size-4 stroke-2 fill-none stroke-current">
14 |     <line x1="5" y1="12" x2="19" y2="12" class="translate-x-2 group-hover:translate-x-0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out" />
15 |     <polyline points="12 5 5 12 12 19" class="translate-x-1 group-hover:translate-x-0 transition-transform duration-300 ease-in-out" />
16 |   </svg>
17 |   <div class="text-sm">
18 |     <slot/>
19 |   </div>
20 | </a>
21 | 


--------------------------------------------------------------------------------
/src/pages/projects/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { getCollection } from "astro:content";
 3 | import PageLayout from "@layouts/PageLayout.astro";
 4 | import Container from "@components/Container.astro";
 5 | import ArrowCard from "@components/ArrowCard.astro";
 6 | import { PROJECTS } from "@consts";
 7 | 
 8 | const projects = (await getCollection("projects"))
 9 |   .filter(project => !project.data.draft)
10 |   .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
11 | ---
12 | 
13 | <PageLayout title={PROJECTS.TITLE} description={PROJECTS.DESCRIPTION}>
14 |   <Container>
15 |     <div class="space-y-10">
16 |       <div class="animate font-semibold text-black dark:text-white">
17 |         Projects
18 |       </div>
19 |       <ul class="animate flex flex-col gap-4">
20 |         {
21 |           projects.map((project) => (
22 |             <li>
23 |               <ArrowCard entry={project}/>
24 |             </li>
25 |           ))
26 |         }
27 |       </ul>
28 |     </div>
29 |   </Container>
30 | </PageLayout>
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024-2025 Mark Horn
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "astro-nano",
 3 |   "type": "module",
 4 |   "version": "1.0.0",
 5 |   "scripts": {
 6 |     "dev": "astro dev",
 7 |     "dev:network": "astro dev --host",
 8 |     "build": "astro check && astro build",
 9 |     "preview": "astro preview",
10 |     "preview:network": "astro preview --host",
11 |     "astro": "astro",
12 |     "lint": "eslint .",
13 |     "lint:fix": "eslint . --fix"
14 |   },
15 |   "dependencies": {
16 |     "@astrojs/check": "^0.9.4",
17 |     "@astrojs/mdx": "^4.0.2",
18 |     "@astrojs/rss": "^4.0.10",
19 |     "@astrojs/sitemap": "^3.2.1",
20 |     "@astrojs/tailwind": "^5.1.3",
21 |     "@fontsource/inter": "^5.0.17",
22 |     "@fontsource/lora": "^5.0.16",
23 |     "@tailwindcss/typography": "^0.5.10",
24 |     "@typescript-eslint/eslint-plugin": "^7.3.1",
25 |     "@typescript-eslint/parser": "^7.3.1",
26 |     "astro": "^5.0.5",
27 |     "clsx": "^2.1.0",
28 |     "eslint": "^8.57.0",
29 |     "eslint-plugin-astro": "^0.32.0",
30 |     "eslint-plugin-jsx-a11y": "^6.8.0",
31 |     "sharp": "^0.33.3",
32 |     "tailwind-merge": "^2.2.2",
33 |     "tailwindcss": "^3.4.1",
34 |     "typescript": "^5.4.2"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/src/consts.ts:
--------------------------------------------------------------------------------
 1 | import type { Site, Metadata, Socials } from "@types";
 2 | 
 3 | export const SITE: Site = {
 4 |   NAME: "Astro Nano",
 5 |   EMAIL: "markhorn.dev@gmail.com",
 6 |   NUM_POSTS_ON_HOMEPAGE: 3,
 7 |   NUM_WORKS_ON_HOMEPAGE: 2,
 8 |   NUM_PROJECTS_ON_HOMEPAGE: 3,
 9 | };
10 | 
11 | export const HOME: Metadata = {
12 |   TITLE: "Home",
13 |   DESCRIPTION: "Astro Nano is a minimal and lightweight blog and portfolio.",
14 | };
15 | 
16 | export const BLOG: Metadata = {
17 |   TITLE: "Blog",
18 |   DESCRIPTION: "A collection of articles on topics I am passionate about.",
19 | };
20 | 
21 | export const WORK: Metadata = {
22 |   TITLE: "Work",
23 |   DESCRIPTION: "Where I have worked and what I have done.",
24 | };
25 | 
26 | export const PROJECTS: Metadata = {
27 |   TITLE: "Projects",
28 |   DESCRIPTION: "A collection of my projects, with links to repositories and demos.",
29 | };
30 | 
31 | export const SOCIALS: Socials = [
32 |   { 
33 |     NAME: "twitter-x",
34 |     HREF: "https://twitter.com/markhorn_dev",
35 |   },
36 |   { 
37 |     NAME: "github",
38 |     HREF: "https://github.com/markhorn-dev"
39 |   },
40 |   { 
41 |     NAME: "linkedin",
42 |     HREF: "https://www.linkedin.com/in/markhorn-dev",
43 |   }
44 | ];
45 | 


--------------------------------------------------------------------------------
/src/components/ArrowCard.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import type { CollectionEntry } from "astro:content";
 3 | 
 4 | type Props = {
 5 |   entry: CollectionEntry<"blog"> | CollectionEntry<"projects">;
 6 | }
 7 | 
 8 | const { entry } = Astro.props;
 9 | ---
10 | 
11 | <a href={`/${entry.collection}/${entry.slug}`} class="relative group flex flex-nowrap py-3 px-4 pr-10 rounded-lg border border-black/15 dark:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out">
12 |   <div class="flex flex-col flex-1 truncate">
13 |     <div class="font-semibold">
14 |       {entry.data.title}
15 |     </div>
16 |     <div class="text-sm">
17 |       {entry.data.description}
18 |     </div>
19 |   </div>
20 |   <svg 
21 |     xmlns="http://www.w3.org/2000/svg" 
22 |     viewBox="0 0 24 24"
23 |     class="absolute top-1/2 right-2 -translate-y-1/2 size-5 stroke-2 fill-none stroke-current">
24 |     <line x1="5" y1="12" x2="19" y2="12" class="translate-x-3 group-hover:translate-x-0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out" />
25 |     <polyline points="12 5 19 12 12 19" class="-translate-x-1 group-hover:translate-x-0 transition-transform duration-300 ease-in-out" />
26 |   </svg>
27 | </a>
28 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { clsx, type ClassValue } from "clsx";
 2 | import { twMerge } from "tailwind-merge";
 3 | 
 4 | export function cn(...inputs: ClassValue[]) {
 5 |   return twMerge(clsx(inputs));
 6 | }
 7 | 
 8 | export function formatDate(date: Date) {
 9 |   return Intl.DateTimeFormat("en-US", {
10 |     month: "short",
11 |     day: "2-digit",
12 |     year: "numeric"
13 |   }).format(date);
14 | }
15 | 
16 | export function readingTime(html: string) {
17 |   const textOnly = html.replace(/<[^>]+>/g, "");
18 |   const wordCount = textOnly.split(/\s+/).length;
19 |   const readingTimeMinutes = ((wordCount / 200) + 1).toFixed();
20 |   return `${readingTimeMinutes} min read`;
21 | }
22 | 
23 | export function dateRange(startDate: Date, endDate?: Date | string): string {
24 |   const startMonth = startDate.toLocaleString("default", { month: "short" });
25 |   const startYear = startDate.getFullYear().toString();
26 |   let endMonth;
27 |   let endYear;
28 | 
29 |   if (endDate) {
30 |     if (typeof endDate === "string") {
31 |       endMonth = "";
32 |       endYear = endDate;
33 |     } else {
34 |       endMonth = endDate.toLocaleString("default", { month: "short" });
35 |       endYear = endDate.getFullYear().toString();
36 |     }
37 |   }
38 | 
39 |   return `${startMonth}${startYear} - ${endMonth}${endYear}`;
40 | }


--------------------------------------------------------------------------------
/src/pages/blog/[...slug].astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { type CollectionEntry, getCollection } from "astro:content";
 3 | import PageLayout from "@layouts/PageLayout.astro";
 4 | import Container from "@components/Container.astro";
 5 | import FormattedDate from "@components/FormattedDate.astro";
 6 | import { readingTime } from "@lib/utils";
 7 | import BackToPrev from "@components/BackToPrev.astro";
 8 | 
 9 | export async function getStaticPaths() {
10 |   const posts = (await getCollection("blog"))
11 |     .filter(post => !post.data.draft)
12 |     .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
13 |   return posts.map((post) => ({
14 |     params: { slug: post.slug },
15 |     props: post,
16 |   }));
17 | }
18 | type Props = CollectionEntry<"blog">;
19 | 
20 | const post = Astro.props;
21 | const { Content } = await post.render();
22 | ---
23 | 
24 | <PageLayout title={post.data.title} description={post.data.description}>
25 |   <Container>
26 |     <div class="animate">
27 |       <BackToPrev href="/blog">
28 |         Back to blog
29 |       </BackToPrev>
30 |     </div>
31 |     <div class="space-y-1 my-10">
32 |       <div class="animate flex items-center gap-1.5">
33 |         <div class="font-base text-sm">
34 |           <FormattedDate date={post.data.date} />
35 |         </div>
36 |         &bull;
37 |         <div class="font-base text-sm">
38 |           {readingTime(post.body)}
39 |         </div>
40 |       </div>
41 |       <div class="animate text-2xl font-semibold text-black dark:text-white">
42 |         {post.data.title}
43 |       </div>
44 |     </div>
45 |     <article class="animate">
46 |       <Content />
47 |     </article>
48 |   </Container>
49 | </PageLayout>


--------------------------------------------------------------------------------
/src/pages/work/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { getCollection } from "astro:content";
 3 | import PageLayout from "@layouts/PageLayout.astro";
 4 | import Container from "@components/Container.astro";
 5 | import { dateRange } from "@lib/utils";
 6 | import { WORK } from "@consts";
 7 | 
 8 | const collection = (await getCollection("work"))
 9 |   .sort((a, b) => new Date(b.data.dateStart).valueOf() - new Date(a.data.dateStart).valueOf());
10 | 
11 | const work = await Promise.all(
12 |   collection.map(async (item) => {
13 |     const { Content } = await item.render();
14 |     return { ...item, Content };
15 |   })
16 | );
17 | ---
18 | 
19 | <PageLayout title={WORK.TITLE} description={WORK.DESCRIPTION}>
20 |   <Container>
21 |     <div class="space-y-10">
22 |       <div class="animate font-semibold text-black dark:text-white">
23 |         Work
24 |       </div>
25 |       <ul class="flex flex-col space-y-4">
26 |         { 
27 |           work.map(entry => (
28 |             <li class="animate">
29 |               <div class="text-sm opacity-75">
30 |                 {dateRange(entry.data.dateStart, entry.data.dateEnd)}
31 |               </div>
32 |               <div class="font-semibold text-black dark:text-white">
33 |                 {entry.data.company}
34 |               </div>
35 |               <div class="text-sm opacity-75">
36 |                 {entry.data.role}
37 |               </div>
38 |               <article>
39 |                 <entry.Content />
40 |               </article>
41 |             </li>
42 |           ))
43 |         }
44 |       </ul>
45 | <!-- 
46 |       <ul class="animate flex flex-col gap-4">
47 | 
48 |       </ul> -->
49 |     </div>
50 |   </Container>
51 | </PageLayout>
52 | 


--------------------------------------------------------------------------------
/src/styles/global.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | html {
 6 |   overflow-y: scroll;
 7 |   color-scheme: light;
 8 | }
 9 | 
10 | html.dark {
11 |   color-scheme: dark;
12 | }
13 | 
14 | html,
15 | body {
16 |   @apply size-full;
17 | }
18 | 
19 | body {
20 |   @apply font-sans antialiased;
21 |   @apply flex flex-col;
22 |   @apply bg-stone-100 dark:bg-stone-900;
23 |   @apply text-black/50 dark:text-white/75;
24 | }
25 | 
26 | header {
27 |   @apply fixed top-0 left-0 right-0 z-50 py-5;
28 |   @apply bg-stone-100/75 dark:bg-stone-900/25;
29 |   @apply backdrop-blur-sm saturate-200;
30 | }
31 | 
32 | main {
33 |   @apply flex-1 py-32;
34 | }
35 | 
36 | footer {
37 |   @apply py-5 text-sm;
38 | }
39 | 
40 | article {
41 |   @apply max-w-full prose dark:prose-invert prose-img:mx-auto prose-img:my-auto;
42 |   @apply prose-headings:font-semibold prose-p:font-serif;
43 |   @apply prose-headings:text-black prose-headings:dark:text-white;
44 | }
45 | 
46 | @layer utilities {
47 |   article a {
48 |     @apply font-sans text-current underline underline-offset-2;
49 |     @apply decoration-black/15 dark:decoration-white/30;
50 |     @apply transition-colors duration-300 ease-in-out;
51 |   }
52 |   article a:hover {
53 |     @apply text-black dark:text-white;
54 |     @apply decoration-black/25 dark:decoration-white/50;
55 |   }
56 | }
57 | 
58 | .animate {
59 |   @apply opacity-0 translate-y-3;
60 |   @apply transition-all duration-700 ease-out;
61 | }
62 | 
63 | .animate.show {
64 |   @apply opacity-100 translate-y-0;
65 | }
66 | 
67 | html #back-to-top {
68 |   @apply opacity-0 pointer-events-none;
69 | }
70 | 
71 | html.scrolled #back-to-top {
72 |   @apply opacity-100 pointer-events-auto;
73 | }


--------------------------------------------------------------------------------
/src/pages/blog/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { type CollectionEntry, getCollection } from "astro:content";
 3 | import PageLayout from "@layouts/PageLayout.astro";
 4 | import Container from "@components/Container.astro";
 5 | import ArrowCard from "@components/ArrowCard.astro";
 6 | import { BLOG } from "@consts";
 7 | 
 8 | const data = (await getCollection("blog"))
 9 |   .filter(post => !post.data.draft)
10 |   .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
11 |   
12 | type Acc = {
13 |   [year: string]: CollectionEntry<"blog">[];
14 | }
15 | 
16 | const posts = data.reduce((acc: Acc, post) => {
17 |     const year = post.data.date.getFullYear().toString();
18 |     if (!acc[year]) {
19 |       acc[year] = [];
20 |     }
21 |     acc[year].push(post);
22 |     return acc;
23 |   }, {});
24 | 
25 | const years = Object.keys(posts).sort((a, b) => parseInt(b) - parseInt(a)); 
26 | ---
27 | 
28 | <PageLayout title={BLOG.TITLE} description={BLOG.DESCRIPTION}>
29 |   <Container>
30 |     <div class="space-y-10">
31 |       <div class="animate font-semibold text-black dark:text-white">
32 |         Blog
33 |       </div>
34 |       <div class="space-y-4">
35 |         {years.map(year => (
36 |           <section class="animate space-y-4">
37 |             <div class="font-semibold text-black dark:text-white">
38 |               {year}
39 |             </div>
40 |             <div>
41 |               <ul class="flex flex-col gap-4">
42 |                 {
43 |                   posts[year].map((post) => (
44 |                     <li>
45 |                       <ArrowCard entry={post}/>
46 |                     </li>
47 |                   ))
48 |                 }
49 |               </ul>
50 |             </div>
51 |           </section>
52 |         ))}
53 |       </div>
54 |     </div>
55 |   </Container>
56 | </PageLayout>
57 | 


--------------------------------------------------------------------------------
/src/content/blog/02-blog-collection/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Blog Collection"
 3 | description: "How to add posts to your blog."
 4 | date: "Mar 21 2024"
 5 | ---
 6 | 
 7 | The `blog` collections is found in `src/content/blog`.
 8 | 
 9 | Working with the `blog` collection:
10 | 
11 | ```
12 | 📁 /src/content/blog
13 | └── 📁 post-1
14 |       └── 📄 index.md
15 | └── 📁 post-2
16 |       └── 📄 index.mdx
17 | ```
18 | 
19 | In the above example, two static pages will be generated, based on the existence of a classic markdown `.md` file or a jsx compatible markdown `.mdx` file. The folder name represents the slug:
20 | 
21 | - `https://example.com/blog/post-1`
22 | - `https://example.com/blog/post-2`
23 | 
24 | 
25 | All content must be preceded by required metadata in the markdown file in `yaml` format, and be enclosed by triple dashes. --- ---
26 | 
27 | ```mdx
28 | ---
29 | title: "My cool new title"
30 | description: "A description of my content."
31 | date: "Mar 22 2024"
32 | draft: false
33 | ---
34 | ```
35 | 
36 | Metadata fields
37 | 
38 | | Field       | Req | Type    | Remarks                                          |
39 | | :---------- | :-- | :------ | :----------------------------------------------- |
40 | | title       | Yes | string  | Title of the content. Used in SEO and RSS.       |
41 | | description | Yes | string  | Description of the content. Used in SEO and RSS. |
42 | | date        | Yes | string  | Must be a valid date string (able to be parsed). |
43 | | draft       | No* | boolean | draft: true, content will not be published.      |
44 | 
45 | All that's left to do is write your content under the metadata.
46 | 
47 | ```mdx
48 | ---
49 | title: "My cool new title"
50 | description: "A description of my content."
51 | date: "Mar 22 2024"
52 | draft: false
53 | ---
54 | 
55 | ### Woot
56 | 
57 | This is a paragraph.
58 | ```
59 | 
60 | 🎉 Congrats, you are now a blogger.


--------------------------------------------------------------------------------
/src/content/blog/04-work-collection/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Work Collection"
 3 | description: "How to add work experience."
 4 | date: "Mar 19 2024"
 5 | ---
 6 | 
 7 | The `work` collections is found in `src/content/work`.
 8 | 
 9 | Working with the `work` collection:
10 | 
11 | ```
12 | 📁 /src/content/work
13 | └── 📄 apple.md
14 | └── 📄 facebook.md
15 | └── 📄 google.md
16 | └── 📄 mcdonalds.md
17 | ```
18 | 
19 | In the above example, four entries on the /work page will be generated.
20 | 
21 | `apple`, `facebook`, `google`, `mcdonalds`
22 | 
23 | All content must be preceded by required metadata in the markdown file in `yaml` format, and be enclosed by triple dashes. --- ---
24 | 
25 | ```mdx
26 | ---
27 | company: "McDonalds"
28 | role: "French Fryer"
29 | dateStart: "01/01/2020"
30 | dateEnd: "11/27/2022"
31 | ---
32 | ```
33 | 
34 | Metadata fields
35 | 
36 | | Field       | Req | Type    | Remarks                                          |
37 | | :---------- | :-- | :------ | :----------------------------------------------- |
38 | | company     | Yes | string  | Company name.                                    |
39 | | role        | Yes | string  | Role at the company. Ex: Full stack developer.   |
40 | | dateStart   | Yes | string  | Date string that can be parsed to a date.        |
41 | | dateEnd     | Yes | string  | Date string that can be parsed to a date.        |
42 | 
43 | \* _Note: If you are still employed at company, for dateEnd you can enter Current, 
44 | Now or Present instead of a date._
45 | 
46 | All that's left to do is write your content under the metadata.
47 | 
48 | ```mdx
49 | ---
50 | title: "My awesome project"
51 | description: "A description of my project."
52 | date: "Mar 22 2024"
53 | draft: false
54 | ---
55 | 
56 | ### Woot
57 | 
58 | This is a paragraph about my role at this company.
59 | ```
60 | 
61 | 🎉 Congrats, you are now a blogger, _and_ developer, _and_ employed.


--------------------------------------------------------------------------------
/src/content/blog/01-getting-started/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Getting started"
 3 | description: "Hit the ground running."
 4 | date: "Mar 22 2024"
 5 | ---
 6 | 
 7 | The basic configuration of Nano is pretty simple.
 8 | 
 9 | Edit `src/consts.ts`
10 | 
11 | Customize the base site
12 | 
13 | ```ts 
14 | // src/consts.ts
15 | 
16 | export const SITE: Site = {
17 |   NAME: "Astro Nano",
18 |   EMAIL: "markhorn.dev@gmail.com",
19 |   NUM_POSTS_ON_HOMEPAGE: 3,
20 |   NUM_WORKS_ON_HOMEPAGE: 2,
21 |   NUM_PROJECTS_ON_HOMEPAGE: 3,
22 | };
23 | ```
24 | 
25 | | Field | Req | Description |
26 | | :---- | :-- | :-----------|
27 | | NAME | Yes | Displayed in header and footer. Used in SEO and RSS. |
28 | | EMAIL | Yes | Displayed in contact section. |
29 | | NUM_POSTS | Yes | Limit num of posts on home page. |
30 | | NUM_WORKS | Yes | Limit num of works on home page. |
31 | | NUM_PROJECTS | Yes | Limit num of projects on home page. |
32 | 
33 | Customize your page metadata
34 | 
35 | ```ts 
36 | // src/consts.ts
37 | 
38 | export const HOME: Metadata = {
39 |   TITLE: "Home",
40 |   DESCRIPTION: "Astro Nano is a minimal and lightweight blog and portfolio.",
41 | };
42 | ```
43 | 
44 | | Field | Req | Description |
45 | | :---- | :-- | :-----------|
46 | | TITLE | Yes | Displayed in browser tab. Used in SEO and RSS. |
47 | | DESCRIPTION | Yes | Used in SEO and RSS. |
48 | 
49 | Customize your social media
50 | 
51 | ```ts 
52 | // src/consts.ts
53 | 
54 | export const SOCIALS: Socials = [
55 |   { 
56 |     NAME: "twitter-x",
57 |     HREF: "https://twitter.com/markhorn_dev",
58 |   },
59 |   { 
60 |     NAME: "github",
61 |     HREF: "https://github.com/markhorn-dev"
62 |   },
63 |   { 
64 |     NAME: "linkedin",
65 |     HREF: "https://www.linkedin.com/in/markhorn-dev",
66 |   }
67 | ];
68 | ```
69 | 
70 | | Field | Req | Description |
71 | | :---- | :-- | :-----------|
72 | | NAME | Yes | Displayed in contact section as a link. |
73 | | HREF | Yes | External url to social media profile. |


--------------------------------------------------------------------------------
/src/content/blog/03-projects-collection/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Projects Collection"
 3 | description: "How to add projects to your portfolio."
 4 | date: "Mar 20 2024"
 5 | ---
 6 | 
 7 | The `projects` collections is found in `src/content/projects`.
 8 | 
 9 | Working with the `projects` collection:
10 | 
11 | ```
12 | 📁 /src/content/projects
13 | └── 📁 project-1
14 |       └── 📄 index.md
15 | └── 📁 projects-2
16 |       └── 📄 index.mdx
17 | ```
18 | 
19 | In the above example, two static pages will be generated, based on the existence of a classic markdown `.md` file or a jsx compatible markdown `.mdx` file. The folder name represents the slug:
20 | 
21 | - `https://example.com/projects/project-1`
22 | - `https://example.com/projects/project-2`
23 | 
24 | 
25 | All content must be preceded by required metadata in the markdown file in `yaml` format, and be enclosed by triple dashes. --- ---
26 | 
27 | ```mdx
28 | ---
29 | title: "My awesome project"
30 | description: "A description of my project."
31 | date: "Mar 22 2024"
32 | draft: false
33 | ---
34 | ```
35 | 
36 | Metadata fields
37 | 
38 | | Field       | Req | Type    | Remarks                                          |
39 | | :---------- | :-- | :------ | :----------------------------------------------- |
40 | | title       | Yes | string  | Title of the content. Used in SEO and RSS.       |
41 | | description | Yes | string  | Description of the content. Used in SEO and RSS. |
42 | | date        | Yes | string  | Must be a valid date string (able to be parsed). |
43 | | draft       | No  | boolean | draft: true, content will not be published.      |
44 | | demoURL     | No  | string  | Link to live project demo, if applicable.        |
45 | | repoURL     | No  | string  | Link to project repo, if applicable.             |
46 | 
47 | All that's left to do is write your content under the metadata.
48 | 
49 | ```mdx
50 | ---
51 | title: "My awesome project"
52 | description: "A description of my project."
53 | date: "Mar 22 2024"
54 | draft: false
55 | ---
56 | 
57 | ### Woot
58 | 
59 | This is a paragraph about my project.
60 | ```
61 | 
62 | 🎉 Congrats, you are now a blogger, _and_ developer.


--------------------------------------------------------------------------------
/src/content/blog/06-mdx-syntax/index.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "MDX syntax guide"
 3 | description: "Get started writing mdx in markdown."
 4 | date: "Mar 16 2024"
 5 | ---
 6 | 
 7 | MDX is largely an extension of markdown with the ability to import `.astro`,
 8 | `.jsx`, `.tsx` and other framework components you have integrated.
 9 | 
10 | This unlocks a lot of possibilities for creating interactive content.
11 | 
12 | This guide will cover the basics of mdx syntax and how to use it, as well as a few examples.
13 | 
14 | ---
15 | 
16 | ### Example 1
17 | 
18 | Importing a component from the `/components` directory. 
19 | 
20 | This component will accept a javascript date object and format it as a string.
21 | 
22 | ```astro
23 | import DateComp from "../../../components/FormattedDate.astro";
24 | 
25 | <DateComp date={new Date()} />
26 | ```
27 | 
28 | import FormattedDate from "../../../components/FormattedDate.astro";
29 | 
30 | <FormattedDate date={new Date()} />
31 | 
32 | ---
33 | 
34 | ### Example 2
35 | 
36 | Importing a component from a relative path to your content.
37 | 
38 | This component will display an alert when you click the button.
39 | 
40 | ```astro
41 | import RelativeComponent from "./component.astro";
42 | 
43 | <RelativeComponent />
44 | ```
45 | 
46 | import RelativeComponent from "./component.astro";
47 | 
48 | <RelativeComponent />
49 | 
50 | ---
51 | 
52 | Nano is an extremely lightweight theme, with no frameworks, so there aren't
53 | any examples of react, vue, solid etc. You can integrate these frameworks using
54 | the guide below, and also use those components in your mdx files. 
55 | 
56 | Don't forget to 
57 | use the `client` directive to make them interactive.
58 | 
59 | ```astro
60 | <ReactComponent client:load />
61 | ```
62 | 
63 | ---
64 | 
65 | ### More Links
66 | - [MDX Syntax Documentation](https://mdxjs.com/docs/what-is-mdx)
67 | - [Astro Framework Integrations](https://docs.astro.build/en/guides/integrations-guide)
68 | - [Astro Usage Documentation](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages)
69 | - **Note:** [Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) are still required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no JavaScript) by default.
70 | 


--------------------------------------------------------------------------------
/public/favicon-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="85" height="107" viewBox="0 0 85 107" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |   <path fill="white" d="M27.5894 91.1365C22.7555 86.7178 21.3444 77.4335 23.3583 70.7072C26.8503 74.948 31.6888 76.2914 36.7005 77.0497C44.4375 78.2199 52.0359 77.7822 59.2232 74.2459C60.0454 73.841 60.8052 73.3027 61.7036 72.7574C62.378 74.714 62.5535 76.6892 62.318 78.6996C61.7452 83.5957 59.3086 87.3778 55.4332 90.2448C53.8835 91.3916 52.2437 92.4167 50.6432 93.4979C45.7262 96.8213 44.3959 100.718 46.2435 106.386C46.2874 106.525 46.3267 106.663 46.426 107C43.9155 105.876 42.0817 104.24 40.6845 102.089C39.2087 99.8193 38.5066 97.3081 38.4696 94.5909C38.4511 93.2686 38.4511 91.9345 38.2733 90.6309C37.8391 87.4527 36.3471 86.0297 33.5364 85.9478C30.6518 85.8636 28.37 87.6469 27.7649 90.4554C27.7187 90.6707 27.6517 90.8837 27.5847 91.1341L27.5894 91.1365Z" />
 3 |   <path fill="url(#paint0_linear_1_59)" d="M27.5894 91.1365C22.7555 86.7178 21.3444 77.4335 23.3583 70.7072C26.8503 74.948 31.6888 76.2914 36.7005 77.0497C44.4375 78.2199 52.0359 77.7822 59.2232 74.2459C60.0454 73.841 60.8052 73.3027 61.7036 72.7574C62.378 74.714 62.5535 76.6892 62.318 78.6996C61.7452 83.5957 59.3086 87.3778 55.4332 90.2448C53.8835 91.3916 52.2437 92.4167 50.6432 93.4979C45.7262 96.8213 44.3959 100.718 46.2435 106.386C46.2874 106.525 46.3267 106.663 46.426 107C43.9155 105.876 42.0817 104.24 40.6845 102.089C39.2087 99.8193 38.5066 97.3081 38.4696 94.5909C38.4511 93.2686 38.4511 91.9345 38.2733 90.6309C37.8391 87.4527 36.3471 86.0297 33.5364 85.9478C30.6518 85.8636 28.37 87.6469 27.7649 90.4554C27.7187 90.6707 27.6517 90.8837 27.5847 91.1341L27.5894 91.1365Z" />
 4 |   <path fill="white" d="M0 69.5866C0 69.5866 14.3139 62.6137 28.6678 62.6137L39.4901 29.1204C39.8953 27.5007 41.0783 26.3999 42.4139 26.3999C43.7495 26.3999 44.9325 27.5007 45.3377 29.1204L56.1601 62.6137C73.1601 62.6137 84.8278 69.5866 84.8278 69.5866C84.8278 69.5866 60.5145 3.35233 60.467 3.21944C59.7692 1.2612 58.5911 0 57.0029 0H27.8274C26.2392 0 25.1087 1.2612 24.3634 3.21944C24.3108 3.34983 0 69.5866 0 69.5866Z" />
 5 | <defs>
 6 |   <linearGradient id="paint0_linear_1_59" x1="22.4702" y1="107" x2="69.1451" y2="84.9468" gradientUnits="userSpaceOnUse">
 7 |     <stop stop-color="#D83333"/>
 8 |     <stop offset="1" stop-color="#F041FF"/>
 9 |   </linearGradient>
10 | </defs>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/public/favicon-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="85" height="107" viewBox="0 0 85 107" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |   <path fill="black" d="M27.5894 91.1365C22.7555 86.7178 21.3444 77.4335 23.3583 70.7072C26.8503 74.948 31.6888 76.2914 36.7005 77.0497C44.4375 78.2199 52.0359 77.7822 59.2232 74.2459C60.0454 73.841 60.8052 73.3027 61.7036 72.7574C62.378 74.714 62.5535 76.6892 62.318 78.6996C61.7452 83.5957 59.3086 87.3778 55.4332 90.2448C53.8835 91.3916 52.2437 92.4167 50.6432 93.4979C45.7262 96.8213 44.3959 100.718 46.2435 106.386C46.2874 106.525 46.3267 106.663 46.426 107C43.9155 105.876 42.0817 104.24 40.6845 102.089C39.2087 99.8193 38.5066 97.3081 38.4696 94.5909C38.4511 93.2686 38.4511 91.9345 38.2733 90.6309C37.8391 87.4527 36.3471 86.0297 33.5364 85.9478C30.6518 85.8636 28.37 87.6469 27.7649 90.4554C27.7187 90.6707 27.6517 90.8837 27.5847 91.1341L27.5894 91.1365Z" />
 3 |   <path fill="url(#paint0_linear_1_59)" d="M27.5894 91.1365C22.7555 86.7178 21.3444 77.4335 23.3583 70.7072C26.8503 74.948 31.6888 76.2914 36.7005 77.0497C44.4375 78.2199 52.0359 77.7822 59.2232 74.2459C60.0454 73.841 60.8052 73.3027 61.7036 72.7574C62.378 74.714 62.5535 76.6892 62.318 78.6996C61.7452 83.5957 59.3086 87.3778 55.4332 90.2448C53.8835 91.3916 52.2437 92.4167 50.6432 93.4979C45.7262 96.8213 44.3959 100.718 46.2435 106.386C46.2874 106.525 46.3267 106.663 46.426 107C43.9155 105.876 42.0817 104.24 40.6845 102.089C39.2087 99.8193 38.5066 97.3081 38.4696 94.5909C38.4511 93.2686 38.4511 91.9345 38.2733 90.6309C37.8391 87.4527 36.3471 86.0297 33.5364 85.9478C30.6518 85.8636 28.37 87.6469 27.7649 90.4554C27.7187 90.6707 27.6517 90.8837 27.5847 91.1341L27.5894 91.1365Z" />
 4 |   <path fill="black" d="M0 69.5866C0 69.5866 14.3139 62.6137 28.6678 62.6137L39.4901 29.1204C39.8953 27.5007 41.0783 26.3999 42.4139 26.3999C43.7495 26.3999 44.9325 27.5007 45.3377 29.1204L56.1601 62.6137C73.1601 62.6137 84.8278 69.5866 84.8278 69.5866C84.8278 69.5866 60.5145 3.35233 60.467 3.21944C59.7692 1.2612 58.5911 0 57.0029 0H27.8274C26.2392 0 25.1087 1.2612 24.3634 3.21944C24.3108 3.34983 0 69.5866 0 69.5866Z" />
 5 | <defs>
 6 |   <linearGradient id="paint0_linear_1_59" x1="22.4702" y1="107" x2="69.1451" y2="84.9468" gradientUnits="userSpaceOnUse">
 7 |     <stop stop-color="#D83333"/>
 8 |     <stop offset="1" stop-color="#F041FF"/>
 9 |   </linearGradient>
10 | </defs>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/src/pages/projects/[...slug].astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { type CollectionEntry, getCollection } from "astro:content";
 3 | import PageLayout from "@layouts/PageLayout.astro";
 4 | import Container from "@components/Container.astro";
 5 | import FormattedDate from "@components/FormattedDate.astro";
 6 | import { readingTime } from "@lib/utils";
 7 | import BackToPrev from "@components/BackToPrev.astro";
 8 | import Link from "@components/Link.astro";
 9 | 
10 | export async function getStaticPaths() {
11 |   const projects = (await getCollection("projects"))
12 |     .filter(post => !post.data.draft)
13 |     .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
14 |   return projects.map((project) => ({
15 |     params: { slug: project.slug },
16 |     props: project,
17 |   }));
18 | }
19 | type Props = CollectionEntry<"projects">;
20 | 
21 | const project = Astro.props;
22 | const { Content } = await project.render();
23 | ---
24 | 
25 | <PageLayout title={project.data.title} description={project.data.description}>
26 |   <Container>
27 |     <div class="animate">
28 |       <BackToPrev href="/projects">
29 |         Back to projects
30 |       </BackToPrev>
31 |     </div>
32 |     <div class="space-y-1 my-10">
33 |       <div class="animate flex items-center gap-1.5">
34 |         <div class="font-base text-sm">
35 |           <FormattedDate date={project.data.date} />
36 |         </div>
37 |         &bull;
38 |         <div class="font-base text-sm">
39 |           {readingTime(project.body)}
40 |         </div>
41 |       </div>
42 |       <div class="animate text-2xl font-semibold text-black dark:text-white">
43 |         {project.data.title}
44 |       </div>
45 |       {(project.data.demoURL || project.data.repoURL) && (
46 |         <nav class="animate flex gap-1">
47 |           {project.data.demoURL && (
48 |             <Link href={project.data.demoURL} external>
49 |               demo
50 |             </Link>
51 |           )}
52 |           {project.data.demoURL && project.data.repoURL && (
53 |             <span>/</span>
54 |           )}
55 |           {project.data.repoURL && (
56 |             <Link href={project.data.repoURL} external>
57 |               repo
58 |             </Link>
59 |           )}
60 |         </nav>
61 |       )}
62 |     </div>
63 |     <article class="animate">
64 |       <Content />
65 |     </article>
66 |   </Container>
67 | </PageLayout>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Astro Nano](_astro_nano.png)
 2 | 
 3 | Astro Nano is a static, minimalist, lightweight, lightning fast portfolio and blog theme.
 4 | 
 5 | Built with Astro, Tailwind and Typescript, an no frameworks.
 6 | 
 7 | It was designed as an even more minimal theme than my popular theme [Astro Sphere](https://github.com/markhorn-dev/astro-sphere)
 8 | 
 9 | ## 🚀 Deploy your own
10 | 
11 | [![Deploy with Vercel](_deploy_vercel.svg)](https://vercel.com/new/clone?repository-url=https://github.com/markhorn-dev/astro-nano)  [![Deploy with Netlify](_deploy_netlify.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/markhorn-dev/astro-nano)
12 | 
13 | ## 📋 Features
14 | 
15 | - ✅ 100/100 Lighthouse performance
16 | - ✅ Responsive
17 | - ✅ Accessible
18 | - ✅ SEO-friendly
19 | - ✅ Typesafe
20 | - ✅ Minimal style
21 | - ✅ Light/Dark Theme
22 | - ✅ Animated UI
23 | - ✅ Tailwind styling
24 | - ✅ Auto generated sitemap
25 | - ✅ Auto generated RSS Feed
26 | - ✅ Markdown support
27 | - ✅ MDX Support (components in your markdown)
28 | 
29 | ## 💯 Lighthouse score
30 | ![Astro Nano Lighthouse Score](_lighthouse.png)
31 | 
32 | ## 🕊️ Lightweight
33 | No frameworks or added bulk
34 | 
35 | ## ⚡︎ Fast
36 | Rendered in ~40ms on localhost
37 | 
38 | ## 📄 Configuration
39 | 
40 | The blog posts on the demo serve as the documentation and configuration.
41 | 
42 | ## 💻 Commands
43 | 
44 | All commands are run from the root of the project, from a terminal:
45 | 
46 | Replace npm with your package manager of choice. `npm`, `pnpm`, `yarn`, `bun`, etc
47 | 
48 | | Command                   | Action                                           |
49 | | :------------------------ | :----------------------------------------------- |
50 | | `npm install`             | Installs dependencies                            |
51 | | `npm run dev`             | Starts local dev server at `localhost:4321`      |
52 | | `npm run dev:network`     | Starts local dev server on local network         |
53 | | `npm run sync`            | Generates TypeScript types for all Astro modules.|
54 | | `npm run build`           | Build your production site to `./dist/`          |
55 | | `npm run preview`         | Preview your build locally, before deploying     |
56 | | `npm run preview:network` | Preview build on local network                   |
57 | | `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
58 | | `npm run astro -- --help` | Get help using the Astro CLI                     |
59 | | `npm run lint`            | Run ESLint                                       |
60 | | `npm run lint:fix`        | Auto-fix ESLint issues                           |
61 | 
62 | ## 🏛️ License
63 | 
64 | MIT


--------------------------------------------------------------------------------
/src/content/projects/project-1/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Astro Sphere"
 3 | description: "Portfolio and blog build with astro."
 4 | date: "Mar 18 2024"
 5 | demoURL: "https://astro-sphere-demo.vercel.app"
 6 | repoURL: "https://github.com/markhorn-dev/astro-sphere"
 7 | ---
 8 | 
 9 | ![Astro Sphere Lighthouse Score](/astro-sphere.jpg)
10 | 
11 | Astro Sphere is a static, minimalist, lightweight, lightning fast portfolio and blog theme based on my personal website.
12 | 
13 | It is primarily Astro, Tailwind and Typescript, with a very small amount of SolidJS for stateful components.
14 | 
15 | ## 🚀 Deploy your own
16 | 
17 | <div class="flex gap-2">
18 |   <a target="_blank" aria-label="Deploy with Vercel" href="https://vercel.com/new/clone?repository-url=https://github.com/markhorn-dev/astro-sphere">
19 |     <img src="/deploy_vercel.svg" />
20 |   </a>
21 |   <a target="_blank" aria-label="Deploy with Netlify" href="https://app.netlify.com/start/deploy?repository=https://github.com/markhorn-dev/astro-sphere">
22 |     <img src="/deploy_netlify.svg" />
23 |   </a>
24 | </div>
25 | 
26 | ## 📋 Features
27 | 
28 | - ✅ 100/100 Lighthouse performance
29 | - ✅ Responsive
30 | - ✅ Accessible
31 | - ✅ SEO-friendly
32 | - ✅ Typesafe
33 | - ✅ Minimal style
34 | - ✅ Light/Dark Theme
35 | - ✅ Animated UI
36 | - ✅ Tailwind styling
37 | - ✅ Auto generated sitemap
38 | - ✅ Auto generated RSS Feed
39 | - ✅ Markdown support
40 | - ✅ MDX Support (components in your markdown)
41 | - ✅ Searchable content (posts and projects)
42 | 
43 | ## 💯 Lighthouse score
44 | ![Astro Sphere Lighthouse Score](/lighthouse.png)
45 | 
46 | ## 🕊️ Lightweight
47 | All pages under 100kb (including fonts)
48 | 
49 | ## ⚡︎ Fast
50 | Rendered in ~40ms on localhost
51 | 
52 | ## 📄 Configuration
53 | 
54 | The blog posts on the demo serve as the documentation and configuration.
55 | 
56 | ## 💻 Commands
57 | 
58 | All commands are run from the root of the project, from a terminal:
59 | 
60 | Replace npm with your package manager of choice. `npm`, `pnpm`, `yarn`, `bun`, etc
61 | 
62 | | Command                   | Action                                           |
63 | | :------------------------ | :----------------------------------------------- |
64 | | `npm install`             | Installs dependencies                            |
65 | | `npm run dev`             | Starts local dev server at `localhost:4321`      |
66 | | `npm run sync`            | Generates TypeScript types for all Astro modules.|
67 | | `npm run build`           | Build your production site to `./dist/`          |
68 | | `npm run preview`         | Preview your build locally, before deploying     |
69 | | `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
70 | | `npm run astro -- --help` | Get help using the Astro CLI                     |
71 | | `npm run lint`            | Run ESLint                                       |
72 | | `npm run lint:fix`        | Auto-fix ESLint issues                           |
73 | 
74 | ## 🏛️ License
75 | 
76 | MIT


--------------------------------------------------------------------------------
/src/content/projects/project-2/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Astro Nano"
 3 | description: "Minimal portfolio and blog build with astro and no frameworks."
 4 | date: "Mar 26 2024"
 5 | demoURL: "https://astro-nano-demo.vercel.app"
 6 | repoURL: "https://github.com/markhorn-dev/astro-nano"
 7 | ---
 8 | 
 9 | ![Astro Nano](/astro-nano.png)
10 | 
11 | Astro Nano is a static, minimalist, lightweight, lightning fast portfolio and blog theme.
12 | 
13 | Built with Astro, Tailwind and Typescript, an no frameworks.
14 | 
15 | It was designed as an even more minimal theme than my popular theme [Astro Sphere](https://github.com/markhorn-dev/astro-sphere)
16 | 
17 | ## 🚀 Deploy your own
18 | 
19 | <div class="flex gap-2">
20 |   <a target="_blank" aria-label="Deploy with Vercel" href="https://vercel.com/new/clone?repository-url=https://github.com/markhorn-dev/astro-nano">
21 |     <img src="/deploy_vercel.svg" />
22 |   </a>
23 |   <a target="_blank" aria-label="Deploy with Netlify" href="https://app.netlify.com/start/deploy?repository=https://github.com/markhorn-dev/astro-nano">
24 |     <img src="/deploy_netlify.svg" />
25 |   </a>
26 | </div>
27 | 
28 | ## 📋 Features
29 | 
30 | - ✅ 100/100 Lighthouse performance
31 | - ✅ Responsive
32 | - ✅ Accessible
33 | - ✅ SEO-friendly
34 | - ✅ Typesafe
35 | - ✅ Minimal style
36 | - ✅ Light/Dark Theme
37 | - ✅ Animated UI
38 | - ✅ Tailwind styling
39 | - ✅ Auto generated sitemap
40 | - ✅ Auto generated RSS Feed
41 | - ✅ Markdown support
42 | - ✅ MDX Support (components in your markdown)
43 | 
44 | ## 💯 Lighthouse score
45 | ![Astro Nano Lighthouse Score](/lighthouse.png)
46 | 
47 | ## 🕊️ Lightweight
48 | No frameworks or added bulk
49 | 
50 | ## ⚡︎ Fast
51 | Rendered in ~40ms on localhost
52 | 
53 | ## 📄 Configuration
54 | 
55 | The blog posts on the demo serve as the documentation and configuration.
56 | 
57 | ## 💻 Commands
58 | 
59 | All commands are run from the root of the project, from a terminal:
60 | 
61 | Replace npm with your package manager of choice. `npm`, `pnpm`, `yarn`, `bun`, etc
62 | 
63 | | Command                   | Action                                           |
64 | | :------------------------ | :----------------------------------------------- |
65 | | `npm install`             | Installs dependencies                            |
66 | | `npm run dev`             | Starts local dev server at `localhost:4321`      |
67 | | `npm run dev:network`     | Starts local dev server on local network         |
68 | | `npm run sync`            | Generates TypeScript types for all Astro modules.|
69 | | `npm run build`           | Build your production site to `./dist/`          |
70 | | `npm run preview`         | Preview your build locally, before deploying     |
71 | | `npm run preview:network` | Preview build on local network                   |
72 | | `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
73 | | `npm run astro -- --help` | Get help using the Astro CLI                     |
74 | | `npm run lint`            | Run ESLint                                       |
75 | | `npm run lint:fix`        | Auto-fix ESLint issues                           |
76 | 
77 | ## 🏛️ License
78 | 
79 | MIT


--------------------------------------------------------------------------------
/src/components/Footer.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Container from "@components/Container.astro";
 3 | import { SITE } from "@consts";
 4 | import BackToTop from "@components/BackToTop.astro";
 5 | ---
 6 | 
 7 | <footer class="animate">
 8 |   <Container>
 9 |     <div class="relative">
10 |       <div class="absolute right-0 -top-20">
11 |         <BackToTop />
12 |       </div>
13 |     </div>
14 |     <div class="flex justify-between items-center">
15 |       <div>
16 |         &copy; 2024 {`|`} {SITE.NAME}
17 |       </div>
18 |       <div class="flex flex-wrap gap-1 items-center">
19 |         <button
20 |           id="light-theme-button"
21 |           aria-label="Light theme"
22 |           class="group size-8 flex items-center justify-center rounded-full"
23 |         >
24 |           <svg
25 |             xmlns="http://www.w3.org/2000/svg"
26 |             width="18"
27 |             height="18"
28 |             viewBox="0 0 24 24"
29 |             fill="none"
30 |             stroke="currentColor"
31 |             stroke-width="1.5"
32 |             stroke-linecap="round"
33 |             stroke-linejoin="round"
34 |             class="group-hover:stroke-black group-hover:dark:stroke-white transition-colors duration-300 ease-in-out"
35 |           >
36 |             <circle cx="12" cy="12" r="5"></circle>
37 |             <line x1="12" y1="1" x2="12" y2="3"></line>
38 |             <line x1="12" y1="21" x2="12" y2="23"></line>
39 |             <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
40 |             <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
41 |             <line x1="1" y1="12" x2="3" y2="12"></line>
42 |             <line x1="21" y1="12" x2="23" y2="12"></line>
43 |             <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
44 |             <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
45 |           </svg>
46 |         </button>
47 |         <button
48 |           id="dark-theme-button"
49 |           aria-label="Dark theme"
50 |           class="group size-8 flex items-center justify-center rounded-full"
51 |         >
52 |           <svg
53 |             xmlns="http://www.w3.org/2000/svg"
54 |             width="18"
55 |             height="18"
56 |             viewBox="0 0 24 24"
57 |             fill="none"
58 |             stroke="currentColor"
59 |             stroke-width="1.5"
60 |             stroke-linecap="round"
61 |             stroke-linejoin="round"
62 |             class="group-hover:stroke-black group-hover:dark:stroke-white transition-colors duration-300 ease-in-out"
63 |           >
64 |             <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
65 |           </svg>
66 |         </button>
67 |         <button
68 |           id="system-theme-button"
69 |           aria-label="System theme"
70 |           class="group size-8 flex items-center justify-center rounded-full"
71 |         >
72 |           <svg
73 |             xmlns="http://www.w3.org/2000/svg"
74 |             width="18"
75 |             height="18"
76 |             viewBox="0 0 24 24"
77 |             fill="none"
78 |             stroke="currentColor"
79 |             stroke-width="1.5"
80 |             stroke-linecap="round"
81 |             stroke-linejoin="round"
82 |             class="group-hover:stroke-black group-hover:dark:stroke-white transition-colors duration-300 ease-in-out"
83 |           >
84 |             <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
85 |             <line x1="8" y1="21" x2="16" y2="21"></line>
86 |             <line x1="12" y1="17" x2="12" y2="21"></line>
87 |           </svg>
88 |         </button>
89 |       </div>
90 |     </div>
91 |   </Container>
92 | </footer>
93 | 


--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
  1 | ---
  2 | import { getCollection } from "astro:content";
  3 | import Container from "@components/Container.astro";
  4 | import PageLayout from "@layouts/PageLayout.astro";
  5 | import ArrowCard from "@components/ArrowCard.astro";
  6 | import Link from "@components/Link.astro";
  7 | import { dateRange } from "@lib/utils";
  8 | import { SITE, HOME, SOCIALS } from "@consts";
  9 | 
 10 | const blog = (await getCollection("blog"))
 11 |   .filter(post => !post.data.draft)
 12 |   .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
 13 |   .slice(0,SITE.NUM_POSTS_ON_HOMEPAGE);
 14 | 
 15 | const projects = (await getCollection("projects"))
 16 |   .filter(project => !project.data.draft)
 17 |   .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
 18 |   .slice(0,SITE.NUM_PROJECTS_ON_HOMEPAGE);
 19 | 
 20 | const allwork = (await getCollection("work"))
 21 |   .sort((a, b) => new Date(b.data.dateStart).valueOf() - new Date(a.data.dateStart).valueOf())
 22 |   .slice(0,SITE.NUM_WORKS_ON_HOMEPAGE);
 23 | 
 24 | const work = await Promise.all(
 25 |   allwork.map(async (item) => {
 26 |     const { Content } = await item.render();
 27 |     return { ...item, Content };
 28 |   })
 29 | );
 30 | 
 31 | ---
 32 | 
 33 | <PageLayout title={HOME.TITLE} description={HOME.DESCRIPTION}>
 34 |   <Container>
 35 |     <h4 class="animate font-semibold text-black dark:text-white">
 36 |       Hi, I'm Nano <span class="text-xl">👋🏻</span> 
 37 |     </h4>
 38 |     <div class="space-y-16">
 39 |       <section>
 40 |         <article class="space-y-4">
 41 |           <p class="animate">
 42 |             I am a minimal, seo friendly, accessible portfolio and blog for developers. 
 43 |             I am an even more lightweight version of my popular theme
 44 |             <Link href="https://github.com/markhorn-dev/astro-sphere" aria-label="Astro Sphere on Github" external>
 45 |               Astro Sphere
 46 |             </Link>.
 47 |             I have a lighthouse scores of 100 across the board for performance, 
 48 |             accesibility, best practices and SEO.
 49 |           </p>
 50 |           <p class="animate">
 51 |             I come packed with full type safety, a sitemap, an rss feed, markdown 
 52 |             and mdx support (use components in your markdown) through astro integrations.
 53 |             I am styled with tailwind and come preconfigured with light, dark and 
 54 |             system/os theme preferences out of the box.
 55 |           </p>
 56 |           <p class="animate">
 57 |             Visit
 58 |             <Link href="https://github.com/markhorn-dev/astro-nano" aria-label="Astro Nano on Github" external>
 59 |               Astro Nano on Github
 60 |             </Link>
 61 |             to fork the repository, read the docs or one-click deploy on Vercel or Netlify. 
 62 |           </p>
 63 |         </article>
 64 |       </section>
 65 | 
 66 |       <section class="animate space-y-6">
 67 |         <div class="flex flex-wrap gap-y-2 items-center justify-between">
 68 |           <h5 class="font-semibold text-black dark:text-white">
 69 |             Latest posts
 70 |           </h5>
 71 |           <Link href="/blog">
 72 |             See all posts
 73 |           </Link>
 74 |         </div>
 75 |         <ul class="flex flex-col gap-4">
 76 |           {blog.map(post => (
 77 |             <li>
 78 |               <ArrowCard entry={post} />
 79 |             </li>
 80 |           ))}
 81 |         </ul>
 82 |       </section>
 83 | 
 84 |       <section class="animate space-y-6">
 85 |         <div class="flex flex-wrap gap-y-2 items-center justify-between">
 86 |           <h5 class="font-semibold text-black dark:text-white">
 87 |             Work Experience
 88 |           </h5>
 89 |           <Link href="/work">
 90 |             See all work
 91 |           </Link>
 92 |         </div>
 93 |         <ul class="flex flex-col space-y-4">
 94 |           {work.map(entry => (
 95 |             <li>
 96 |               <div class="text-sm opacity-75">
 97 |                 {dateRange(entry.data.dateStart, entry.data.dateEnd)}
 98 |               </div>
 99 |               <div class="font-semibold text-black dark:text-white">
100 |                 {entry.data.company}
101 |               </div>
102 |               <div class="text-sm opacity-75">
103 |                 {entry.data.role}
104 |               </div>
105 |               <article>
106 |                 <entry.Content />
107 |               </article>
108 |             </li>
109 |           ))}
110 |         </ul>
111 |       </section>
112 | 
113 |       <section class="animate space-y-6">
114 |         <div class="flex flex-wrap gap-y-2 items-center justify-between">
115 |           <h5 class="font-semibold text-black dark:text-white">
116 |             Recent projects
117 |           </h5>
118 |           <Link href="/projects">
119 |             See all projects
120 |           </Link>
121 |         </div>
122 |         <ul class="flex flex-col gap-4">
123 |           {projects.map(project => (
124 |             <li>
125 |               <ArrowCard entry={project} />
126 |             </li>
127 |           ))}
128 |         </ul>
129 |       </section>
130 | 
131 |       <section class="animate space-y-4">
132 |         <h5 class="font-semibold text-black dark:text-white">
133 |           Let's Connect
134 |         </h5>
135 |         <article>
136 |           <p>
137 |             If you want to get in touch with me about something or just to say hi,
138 |             reach out on social media or send me an email.
139 |           </p>
140 |         </article>
141 |         <ul class="flex flex-wrap gap-2">
142 |           {SOCIALS.map(SOCIAL => (
143 |             <li class="flex gap-x-2 text-nowrap">
144 |               <Link href={SOCIAL.HREF} external aria-label={`${SITE.NAME} on ${SOCIAL.NAME}`}>
145 |                 {SOCIAL.NAME}
146 |               </Link>
147 |               {"/"}
148 |             </li>
149 |           ))}
150 |           <li class="line-clamp-1">
151 |             <Link href={`mailto:${SITE.EMAIL}`} aria-label={`Email ${SITE.NAME}`}>
152 |               {SITE.EMAIL}
153 |             </Link>
154 |           </li>
155 |         </ul>
156 |       </section>
157 |     </div>
158 |   </Container>
159 | </PageLayout>
160 | 


--------------------------------------------------------------------------------
/src/components/Head.astro:
--------------------------------------------------------------------------------
  1 | ---
  2 | import "../styles/global.css";
  3 | import "@fontsource/inter/latin-400.css";
  4 | import "@fontsource/inter/latin-600.css";
  5 | import "@fontsource/lora/400.css";
  6 | import "@fontsource/lora/600.css";
  7 | import inter400 from "@fontsource/inter/files/inter-latin-400-normal.woff2";
  8 | import inter600 from "@fontsource/inter/files/inter-latin-600-normal.woff2";
  9 | import lora400 from "@fontsource/lora/files/lora-latin-400-normal.woff2";
 10 | import lora600 from "@fontsource/lora/files/lora-latin-600-normal.woff2";
 11 | 
 12 | import { ClientRouter } from "astro:transitions";
 13 | import { SITE } from "@consts";
 14 | 
 15 | interface Props {
 16 |   title: string;
 17 |   description: string;
 18 |   image?: string;
 19 | }
 20 | 
 21 | const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 22 | 
 23 | const { title, description, image = "/nano.png" } = Astro.props;
 24 | ---
 25 | 
 26 | <!-- Global Metadata -->
 27 | <meta charset="utf-8" />
 28 | <meta name="viewport" content="width=device-width,initial-scale=1" />
 29 | <link rel="icon" type="image/svg+xml" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">
 30 | <link rel="icon" type="image/svg+xml" href="/favicon-light.svg" media="(prefers-color-scheme: light)">
 31 | <link rel="icon" type="image/x-icon" href="/favicon-light.svg">
 32 | <meta name="generator" content={Astro.generator} />
 33 | 
 34 | <!-- Font preloads -->
 35 | <link rel="preload" href={inter400} as="font" type="font/woff2" crossorigin/>
 36 | <link rel="preload" href={inter600} as="font" type="font/woff2" crossorigin/>
 37 | <link rel="preload" href={lora400} as="font" type="font/woff2" crossorigin/>
 38 | <link rel="preload" href={lora600} as="font" type="font/woff2" crossorigin/>
 39 | 
 40 | <!-- Canonical URL -->
 41 | <link rel="canonical" href={canonicalURL} />
 42 | 
 43 | <!-- Primary Meta Tags -->
 44 | <title>{title}</title>
 45 | <meta name="title" content={title} />
 46 | <meta name="description" content={description} />
 47 | 
 48 | <!-- Open Graph / Facebook -->
 49 | <meta property="og:type" content="website" />
 50 | <meta property="og:url" content={Astro.url} />
 51 | <meta property="og:title" content={title} />
 52 | <meta property="og:description" content={description} />
 53 | <meta property="og:image" content={new URL(image, Astro.url)} />
 54 | 
 55 | <!-- Twitter -->
 56 | <meta property="twitter:card" content="summary_large_image" />
 57 | <meta property="twitter:url" content={Astro.url} />
 58 | <meta property="twitter:title" content={title} />
 59 | <meta property="twitter:description" content={description} />
 60 | <meta property="twitter:image" content={new URL(image, Astro.url)} />
 61 | 
 62 | <ClientRouter  />
 63 | 
 64 | <!-- RSS Link -->
 65 | <link rel="alternate" type="application/rss+xml" title={SITE.NAME} href={new URL("rss.xml", Astro.site)} />
 66 | 
 67 | <script>
 68 |   import type { TransitionBeforeSwapEvent } from "astro:transitions/client";
 69 |   document.addEventListener("astro:before-swap", (e) =>
 70 |     [
 71 |       ...(e as TransitionBeforeSwapEvent).newDocument.head.querySelectorAll(
 72 |         "link[as=\"font\"]"
 73 |       ),
 74 |     ].forEach((link) => link.remove())
 75 |   );
 76 | </script>
 77 | 
 78 | <script is:inline>
 79 |   function init() {
 80 |     preloadTheme();
 81 |     onScroll();
 82 |     animate();
 83 | 
 84 |     const backToTop = document.getElementById("back-to-top");
 85 |     backToTop?.addEventListener("click", (event) => scrollToTop(event));
 86 | 
 87 |     const backToPrev = document.getElementById("back-to-prev");
 88 |     backToPrev?.addEventListener("click", () => window.history.back());
 89 | 
 90 |     const lightThemeButton = document.getElementById("light-theme-button");
 91 |     lightThemeButton?.addEventListener("click", () => {
 92 |       localStorage.setItem("theme", "light");
 93 |       toggleTheme(false);
 94 |     });
 95 | 
 96 |     const darkThemeButton = document.getElementById("dark-theme-button");
 97 |     darkThemeButton?.addEventListener("click", () => {
 98 |       localStorage.setItem("theme", "dark");
 99 |       toggleTheme(true);
100 |     });
101 | 
102 |     const systemThemeButton = document.getElementById("system-theme-button");
103 |     systemThemeButton?.addEventListener("click", () => {
104 |       localStorage.setItem("theme", "system");
105 |       toggleTheme(window.matchMedia("(prefers-color-scheme: dark)").matches);
106 |     });
107 | 
108 |     window.matchMedia("(prefers-color-scheme: dark)")
109 |       .addEventListener("change", event => {
110 |         if (localStorage.theme === "system" || !localStorage.theme) {
111 |           toggleTheme(event.matches);
112 |         }
113 |       }
114 |     );
115 | 
116 |     document.addEventListener("scroll", onScroll);
117 |   }
118 | 
119 |   function animate() {
120 |     const animateElements = document.querySelectorAll(".animate");
121 | 
122 |     animateElements.forEach((element, index) => {
123 |       setTimeout(() => {
124 |         element.classList.add("show");
125 |       }, index * 150);
126 |     });
127 |   }
128 | 
129 |   function onScroll() {
130 |     if (window.scrollY > 0) {
131 |       document.documentElement.classList.add("scrolled");
132 |     } else {
133 |       document.documentElement.classList.remove("scrolled");
134 |     }
135 |   }
136 | 
137 |   function scrollToTop(event) {
138 |     event.preventDefault();
139 |     window.scrollTo({
140 |       top: 0,
141 |       behavior: "smooth"
142 |     });
143 |   }
144 | 
145 | function toggleTheme(dark) {
146 |     const css = document.createElement("style");
147 | 
148 |     css.appendChild(
149 |       document.createTextNode(
150 |         `* {
151 |              -webkit-transition: none !important;
152 |              -moz-transition: none !important;
153 |              -o-transition: none !important;
154 |              -ms-transition: none !important;
155 |              transition: none !important;
156 |           }
157 |         `,
158 |       )
159 |     );
160 | 
161 |     document.head.appendChild(css);
162 | 
163 |     if (dark) {
164 |       document.documentElement.classList.add("dark");
165 |     } else {
166 |       document.documentElement.classList.remove("dark");
167 |     }
168 | 
169 |   window.getComputedStyle(css).opacity;
170 |     document.head.removeChild(css);
171 |   }
172 | 
173 |   function preloadTheme() {
174 |     const userTheme = localStorage.theme;
175 | 
176 |     if (userTheme === "light" || userTheme === "dark") {
177 |       toggleTheme(userTheme === "dark");
178 |     } else {
179 |       toggleTheme(window.matchMedia("(prefers-color-scheme: dark)").matches);
180 |     }
181 |   }
182 | 
183 |   document.addEventListener("DOMContentLoaded", () => init());
184 |   document.addEventListener("astro:after-swap", () => init());
185 |   preloadTheme();
186 | </script>
187 | 


--------------------------------------------------------------------------------
/_deploy_netlify.svg:
--------------------------------------------------------------------------------
 1 | <svg width="179" height="32" viewBox="0 0 179 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_8_30)">
 3 | <path d="M173 0H6C2.68629 0 0 2.68629 0 6V26C0 29.3137 2.68629 32 6 32H173C176.314 32 179 29.3137 179 26V6C179 2.68629 176.314 0 173 0Z" fill="#2E51ED"/>
 4 | <path d="M15.027 23.227H14.781L13.556 22.049V21.813L15.429 20.011H16.727L16.9 20.178V21.426L15.027 23.227ZM13.556 9.89999V9.66399L14.781 8.48499H15.027L16.9 10.287V11.535L16.727 11.701H15.429L13.556 9.89999ZM24.343 19.429H22.561L22.411 19.286V15.273C22.411 14.559 22.12 14.005 21.224 13.986C20.764 13.975 20.236 13.986 19.673 14.007L19.588 14.091V19.284L19.439 19.427H17.657L17.507 19.284V12.429L17.657 12.285H21.669C23.229 12.285 24.492 13.5 24.492 15V19.286L24.343 19.429ZM15.28 16.86H8.15L8 16.716V14.998L8.149 14.855H15.28L15.43 14.998V16.716L15.28 16.859V16.86ZM33.853 16.86H26.722L26.572 16.716V14.998L26.722 14.855H33.853L34.002 14.998V16.716L33.853 16.859V16.86ZM19.973 10.143V4.99999L20.122 4.85699H21.909L22.057 4.99999V10.143L21.909 10.287H20.122L19.973 10.143ZM19.973 26.714V21.571L20.122 21.428H21.909L22.057 21.571V26.714L21.909 26.857H20.122L19.973 26.714ZM155.15 10.64C154.72 11.06 154.51 11.64 154.51 12.39V13.43H153.28V15.1H154.51V21.19H156.47V15.1H158.11V13.43H156.47V12.38C156.47 11.85 156.75 11.58 157.3 11.58H158.34V9.99999H156.94C156.18 9.99999 155.59 10.21 155.16 10.64H155.15ZM150.93 10.13C150.57 10.13 150.27 10.25 150.05 10.48C149.84 10.7 149.73 10.98 149.73 11.32C149.73 11.66 149.84 11.95 150.05 12.19C150.27 12.42 150.57 12.54 150.93 12.54C151.29 12.54 151.57 12.42 151.78 12.19C152 11.96 152.12 11.67 152.12 11.32C152.12 10.97 152.01 10.7 151.78 10.48C151.56 10.25 151.28 10.13 150.93 10.13ZM73.23 10.14H75.19V21.19H73.23V10.14Z" fill="white"/>
 5 | <path fill-rule="evenodd" clip-rule="evenodd" d="M47.32 10.63C48.49 10.63 49.49 10.84 50.33 11.27C51.17 11.69 51.81 12.3 52.25 13.09C52.7 13.88 52.92 14.83 52.92 15.92C52.92 17.01 52.7 17.96 52.25 18.75C51.81 19.54 51.17 20.14 50.33 20.56C49.49 20.98 48.49 21.19 47.32 21.19H44V10.63H47.32ZM47.23 19.22C48.31 19.22 49.16 18.93 49.78 18.35V18.36C50.41 17.77 50.72 16.97 50.72 15.92C50.72 14.87 50.41 14.05 49.78 13.47C49.16 12.89 48.31 12.6 47.23 12.6H46.11V19.22H47.23ZM58.16 13.29C58.96 13.29 59.65 13.45 60.25 13.79L60.24 13.78C60.85 14.11 61.31 14.57 61.64 15.17C61.97 15.77 62.13 16.47 62.13 17.26V17.92H56.28C56.31 18.18 56.36 18.44 56.47 18.66C56.63 18.96 56.85 19.19 57.14 19.36C57.43 19.53 57.78 19.61 58.19 19.61C58.6 19.61 58.95 19.54 59.23 19.41C59.51 19.28 59.72 19.09 59.86 18.86H61.96C61.8 19.33 61.54 19.76 61.19 20.13C60.85 20.51 60.41 20.79 59.89 21C59.38 21.21 58.8 21.31 58.17 21.31C57.38 21.31 56.68 21.15 56.07 20.82C55.47 20.49 55.01 20.02 54.67 19.41C54.34 18.81 54.18 18.1 54.18 17.3C54.18 16.5 54.34 15.8 54.67 15.2C55 14.6 55.46 14.13 56.06 13.79C56.67 13.46 57.36 13.29 58.16 13.29ZM58.16 14.99C57.8 14.99 57.47 15.08 57.18 15.26C56.89 15.42 56.66 15.66 56.49 15.97C56.41 16.14 56.35 16.31 56.31 16.49H60.05C60.0095 16.2241 59.9069 15.9714 59.7505 15.7525C59.5941 15.5336 59.3884 15.3546 59.15 15.23C58.86 15.07 58.52 14.99 58.16 14.99ZM70.16 13.74C69.64 13.42 69.04 13.26 68.35 13.26C67.66 13.26 67.06 13.42 66.57 13.74C66.28 13.93 66.05 14.19 65.86 14.47V13.43H63.9V23.85H65.86V20.16C66.06 20.45 66.29 20.7 66.57 20.9C67.06 21.23 67.65 21.39 68.35 21.39C69.05 21.39 69.63 21.23 70.16 20.91C70.68 20.58 71.09 20.12 71.38 19.51C71.67 18.89 71.81 18.17 71.81 17.33C71.81 16.49 71.67 15.75 71.38 15.15C71.09 14.53 70.68 14.07 70.16 13.75V13.74ZM69.5 18.6C69.33 18.95 69.1 19.22 68.8 19.41C68.51 19.6 68.18 19.69 67.81 19.69C67.22 19.69 66.75 19.48 66.4 19.07C66.05 18.65 65.87 18.08 65.87 17.35C65.87 16.62 66.05 16.07 66.4 15.66C66.75 15.25 67.23 15.04 67.81 15.04C68.18 15.04 68.51 15.14 68.8 15.33C69.1 15.52 69.33 15.79 69.5 16.14C69.67 16.49 69.75 16.89 69.75 17.34C69.75 17.79 69.67 18.23 69.5 18.59V18.6ZM82.85 13.79C82.23 13.44 81.51 13.26 80.68 13.26C79.85 13.26 79.13 13.44 78.51 13.79C77.9 14.14 77.44 14.62 77.11 15.23C76.78 15.85 76.62 16.54 76.62 17.32C76.62 18.1 76.78 18.79 77.11 19.41C77.44 20.02 77.9 20.5 78.51 20.85C79.13 21.2 79.85 21.38 80.68 21.38C81.51 21.38 82.23 21.2 82.85 20.85C83.47 20.5 83.93 20.01 84.25 19.39C84.58 18.77 84.74 18.08 84.74 17.32C84.74 16.56 84.58 15.85 84.25 15.23C83.93 14.61 83.47 14.13 82.85 13.79ZM82.43 18.49C82.27 18.83 82.04 19.09 81.73 19.27C81.43 19.46 81.08 19.55 80.68 19.55C80.28 19.55 79.91 19.46 79.62 19.27C79.32 19.08 79.09 18.82 78.92 18.49C78.76 18.15 78.68 17.76 78.68 17.31C78.68 16.86 78.76 16.46 78.92 16.12C79.09 15.78 79.32 15.53 79.62 15.35C79.92 15.16 80.27 15.07 80.68 15.07C81.09 15.07 81.43 15.16 81.73 15.35C82.04 15.53 82.27 15.79 82.43 16.13C82.6 16.47 82.68 16.86 82.68 17.31C82.68 17.76 82.6 18.15 82.43 18.49Z" fill="white"/>
 6 | <path d="M87.11 13.43L89.15 18.5L91.26 13.43H93.15L88.84 23.75H86.95L88.14 20.9L85.13 13.43H87.11ZM102.71 10.98H100.75V13.43H99.26V15.1H100.75V21.19H102.71V15.1H104.39V13.43H102.71V10.98Z" fill="white"/>
 7 | <path fill-rule="evenodd" clip-rule="evenodd" d="M109.18 13.26C110.01 13.26 110.73 13.44 111.35 13.79C111.97 14.13 112.43 14.61 112.75 15.23C113.08 15.85 113.24 16.56 113.24 17.32C113.24 18.08 113.08 18.77 112.75 19.39C112.43 20.01 111.97 20.5 111.35 20.85C110.73 21.2 110.01 21.38 109.18 21.38C108.35 21.38 107.63 21.2 107.01 20.85C106.4 20.5 105.94 20.02 105.61 19.41C105.28 18.79 105.12 18.1 105.12 17.32C105.12 16.54 105.28 15.85 105.61 15.23C105.94 14.62 106.4 14.14 107.01 13.79C107.63 13.44 108.35 13.26 109.18 13.26ZM110.23 19.27C110.54 19.09 110.77 18.83 110.93 18.49C111.1 18.15 111.18 17.76 111.18 17.31C111.18 16.86 111.1 16.47 110.93 16.13C110.77 15.79 110.54 15.53 110.23 15.35C109.93 15.16 109.59 15.07 109.18 15.07C108.77 15.07 108.42 15.16 108.12 15.35C107.82 15.53 107.59 15.78 107.42 16.12C107.26 16.46 107.18 16.86 107.18 17.31C107.18 17.76 107.26 18.15 107.42 18.49C107.59 18.82 107.82 19.08 108.12 19.27C108.41 19.46 108.78 19.55 109.18 19.55C109.58 19.55 109.93 19.46 110.23 19.27Z" fill="white"/>
 8 | <path d="M126.91 16.02L122.22 10.63H120.41V21.19H122.52V14.26L126.91 19.31V21.19H129.02V10.63H126.91V16.02Z" fill="white"/>
 9 | <path fill-rule="evenodd" clip-rule="evenodd" d="M134.5 13.29C135.3 13.29 135.99 13.45 136.59 13.79L136.58 13.78C137.19 14.11 137.65 14.57 137.98 15.17C138.31 15.77 138.47 16.47 138.47 17.26V17.92H132.62C132.65 18.18 132.7 18.44 132.81 18.66C132.97 18.96 133.19 19.19 133.48 19.36C133.77 19.53 134.12 19.61 134.53 19.61C134.94 19.61 135.29 19.54 135.57 19.41C135.85 19.28 136.06 19.09 136.2 18.86H138.3C138.14 19.33 137.88 19.76 137.53 20.13C137.19 20.51 136.75 20.79 136.23 21C135.72 21.21 135.14 21.31 134.51 21.31C133.72 21.31 133.02 21.15 132.41 20.82C131.81 20.49 131.35 20.02 131.01 19.41C130.68 18.81 130.52 18.1 130.52 17.3C130.52 16.5 130.68 15.8 131.01 15.2C131.34 14.6 131.8 14.13 132.4 13.79C133.01 13.46 133.7 13.29 134.5 13.29ZM134.5 14.99C134.14 14.99 133.81 15.08 133.52 15.26C133.23 15.42 133 15.66 132.83 15.97C132.75 16.14 132.69 16.31 132.65 16.49H136.39C136.349 16.224 136.247 15.9714 136.09 15.7525C135.934 15.5336 135.728 15.3546 135.49 15.23C135.2 15.07 134.86 14.99 134.5 14.99Z" fill="white"/>
10 | <path d="M142.58 10.98H140.62V13.43H139.14V15.1H140.62V21.19H142.58V15.1H144.26V13.43H142.58V10.98ZM145.92 10.14H147.88V21.19H145.92V10.14ZM149.95 21.18V13.26C150.21 13.45 150.53 13.55 150.93 13.55C151.33 13.55 151.66 13.46 151.91 13.26V21.18H149.95ZM163.14 18.5L165.26 13.43H167.15L162.84 23.75H160.95L162.14 20.9L159.13 13.43H161.1L163.14 18.5Z" fill="white"/>
11 | </g>
12 | <defs>
13 | <clipPath id="clip0_8_30">
14 | <rect width="179" height="32" fill="white"/>
15 | </clipPath>
16 | </defs>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/public/deploy_netlify.svg:
--------------------------------------------------------------------------------
 1 | <svg width="179" height="32" viewBox="0 0 179 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_8_30)">
 3 | <path d="M173 0H6C2.68629 0 0 2.68629 0 6V26C0 29.3137 2.68629 32 6 32H173C176.314 32 179 29.3137 179 26V6C179 2.68629 176.314 0 173 0Z" fill="#2E51ED"/>
 4 | <path d="M15.027 23.227H14.781L13.556 22.049V21.813L15.429 20.011H16.727L16.9 20.178V21.426L15.027 23.227ZM13.556 9.89999V9.66399L14.781 8.48499H15.027L16.9 10.287V11.535L16.727 11.701H15.429L13.556 9.89999ZM24.343 19.429H22.561L22.411 19.286V15.273C22.411 14.559 22.12 14.005 21.224 13.986C20.764 13.975 20.236 13.986 19.673 14.007L19.588 14.091V19.284L19.439 19.427H17.657L17.507 19.284V12.429L17.657 12.285H21.669C23.229 12.285 24.492 13.5 24.492 15V19.286L24.343 19.429ZM15.28 16.86H8.15L8 16.716V14.998L8.149 14.855H15.28L15.43 14.998V16.716L15.28 16.859V16.86ZM33.853 16.86H26.722L26.572 16.716V14.998L26.722 14.855H33.853L34.002 14.998V16.716L33.853 16.859V16.86ZM19.973 10.143V4.99999L20.122 4.85699H21.909L22.057 4.99999V10.143L21.909 10.287H20.122L19.973 10.143ZM19.973 26.714V21.571L20.122 21.428H21.909L22.057 21.571V26.714L21.909 26.857H20.122L19.973 26.714ZM155.15 10.64C154.72 11.06 154.51 11.64 154.51 12.39V13.43H153.28V15.1H154.51V21.19H156.47V15.1H158.11V13.43H156.47V12.38C156.47 11.85 156.75 11.58 157.3 11.58H158.34V9.99999H156.94C156.18 9.99999 155.59 10.21 155.16 10.64H155.15ZM150.93 10.13C150.57 10.13 150.27 10.25 150.05 10.48C149.84 10.7 149.73 10.98 149.73 11.32C149.73 11.66 149.84 11.95 150.05 12.19C150.27 12.42 150.57 12.54 150.93 12.54C151.29 12.54 151.57 12.42 151.78 12.19C152 11.96 152.12 11.67 152.12 11.32C152.12 10.97 152.01 10.7 151.78 10.48C151.56 10.25 151.28 10.13 150.93 10.13ZM73.23 10.14H75.19V21.19H73.23V10.14Z" fill="white"/>
 5 | <path fill-rule="evenodd" clip-rule="evenodd" d="M47.32 10.63C48.49 10.63 49.49 10.84 50.33 11.27C51.17 11.69 51.81 12.3 52.25 13.09C52.7 13.88 52.92 14.83 52.92 15.92C52.92 17.01 52.7 17.96 52.25 18.75C51.81 19.54 51.17 20.14 50.33 20.56C49.49 20.98 48.49 21.19 47.32 21.19H44V10.63H47.32ZM47.23 19.22C48.31 19.22 49.16 18.93 49.78 18.35V18.36C50.41 17.77 50.72 16.97 50.72 15.92C50.72 14.87 50.41 14.05 49.78 13.47C49.16 12.89 48.31 12.6 47.23 12.6H46.11V19.22H47.23ZM58.16 13.29C58.96 13.29 59.65 13.45 60.25 13.79L60.24 13.78C60.85 14.11 61.31 14.57 61.64 15.17C61.97 15.77 62.13 16.47 62.13 17.26V17.92H56.28C56.31 18.18 56.36 18.44 56.47 18.66C56.63 18.96 56.85 19.19 57.14 19.36C57.43 19.53 57.78 19.61 58.19 19.61C58.6 19.61 58.95 19.54 59.23 19.41C59.51 19.28 59.72 19.09 59.86 18.86H61.96C61.8 19.33 61.54 19.76 61.19 20.13C60.85 20.51 60.41 20.79 59.89 21C59.38 21.21 58.8 21.31 58.17 21.31C57.38 21.31 56.68 21.15 56.07 20.82C55.47 20.49 55.01 20.02 54.67 19.41C54.34 18.81 54.18 18.1 54.18 17.3C54.18 16.5 54.34 15.8 54.67 15.2C55 14.6 55.46 14.13 56.06 13.79C56.67 13.46 57.36 13.29 58.16 13.29ZM58.16 14.99C57.8 14.99 57.47 15.08 57.18 15.26C56.89 15.42 56.66 15.66 56.49 15.97C56.41 16.14 56.35 16.31 56.31 16.49H60.05C60.0095 16.2241 59.9069 15.9714 59.7505 15.7525C59.5941 15.5336 59.3884 15.3546 59.15 15.23C58.86 15.07 58.52 14.99 58.16 14.99ZM70.16 13.74C69.64 13.42 69.04 13.26 68.35 13.26C67.66 13.26 67.06 13.42 66.57 13.74C66.28 13.93 66.05 14.19 65.86 14.47V13.43H63.9V23.85H65.86V20.16C66.06 20.45 66.29 20.7 66.57 20.9C67.06 21.23 67.65 21.39 68.35 21.39C69.05 21.39 69.63 21.23 70.16 20.91C70.68 20.58 71.09 20.12 71.38 19.51C71.67 18.89 71.81 18.17 71.81 17.33C71.81 16.49 71.67 15.75 71.38 15.15C71.09 14.53 70.68 14.07 70.16 13.75V13.74ZM69.5 18.6C69.33 18.95 69.1 19.22 68.8 19.41C68.51 19.6 68.18 19.69 67.81 19.69C67.22 19.69 66.75 19.48 66.4 19.07C66.05 18.65 65.87 18.08 65.87 17.35C65.87 16.62 66.05 16.07 66.4 15.66C66.75 15.25 67.23 15.04 67.81 15.04C68.18 15.04 68.51 15.14 68.8 15.33C69.1 15.52 69.33 15.79 69.5 16.14C69.67 16.49 69.75 16.89 69.75 17.34C69.75 17.79 69.67 18.23 69.5 18.59V18.6ZM82.85 13.79C82.23 13.44 81.51 13.26 80.68 13.26C79.85 13.26 79.13 13.44 78.51 13.79C77.9 14.14 77.44 14.62 77.11 15.23C76.78 15.85 76.62 16.54 76.62 17.32C76.62 18.1 76.78 18.79 77.11 19.41C77.44 20.02 77.9 20.5 78.51 20.85C79.13 21.2 79.85 21.38 80.68 21.38C81.51 21.38 82.23 21.2 82.85 20.85C83.47 20.5 83.93 20.01 84.25 19.39C84.58 18.77 84.74 18.08 84.74 17.32C84.74 16.56 84.58 15.85 84.25 15.23C83.93 14.61 83.47 14.13 82.85 13.79ZM82.43 18.49C82.27 18.83 82.04 19.09 81.73 19.27C81.43 19.46 81.08 19.55 80.68 19.55C80.28 19.55 79.91 19.46 79.62 19.27C79.32 19.08 79.09 18.82 78.92 18.49C78.76 18.15 78.68 17.76 78.68 17.31C78.68 16.86 78.76 16.46 78.92 16.12C79.09 15.78 79.32 15.53 79.62 15.35C79.92 15.16 80.27 15.07 80.68 15.07C81.09 15.07 81.43 15.16 81.73 15.35C82.04 15.53 82.27 15.79 82.43 16.13C82.6 16.47 82.68 16.86 82.68 17.31C82.68 17.76 82.6 18.15 82.43 18.49Z" fill="white"/>
 6 | <path d="M87.11 13.43L89.15 18.5L91.26 13.43H93.15L88.84 23.75H86.95L88.14 20.9L85.13 13.43H87.11ZM102.71 10.98H100.75V13.43H99.26V15.1H100.75V21.19H102.71V15.1H104.39V13.43H102.71V10.98Z" fill="white"/>
 7 | <path fill-rule="evenodd" clip-rule="evenodd" d="M109.18 13.26C110.01 13.26 110.73 13.44 111.35 13.79C111.97 14.13 112.43 14.61 112.75 15.23C113.08 15.85 113.24 16.56 113.24 17.32C113.24 18.08 113.08 18.77 112.75 19.39C112.43 20.01 111.97 20.5 111.35 20.85C110.73 21.2 110.01 21.38 109.18 21.38C108.35 21.38 107.63 21.2 107.01 20.85C106.4 20.5 105.94 20.02 105.61 19.41C105.28 18.79 105.12 18.1 105.12 17.32C105.12 16.54 105.28 15.85 105.61 15.23C105.94 14.62 106.4 14.14 107.01 13.79C107.63 13.44 108.35 13.26 109.18 13.26ZM110.23 19.27C110.54 19.09 110.77 18.83 110.93 18.49C111.1 18.15 111.18 17.76 111.18 17.31C111.18 16.86 111.1 16.47 110.93 16.13C110.77 15.79 110.54 15.53 110.23 15.35C109.93 15.16 109.59 15.07 109.18 15.07C108.77 15.07 108.42 15.16 108.12 15.35C107.82 15.53 107.59 15.78 107.42 16.12C107.26 16.46 107.18 16.86 107.18 17.31C107.18 17.76 107.26 18.15 107.42 18.49C107.59 18.82 107.82 19.08 108.12 19.27C108.41 19.46 108.78 19.55 109.18 19.55C109.58 19.55 109.93 19.46 110.23 19.27Z" fill="white"/>
 8 | <path d="M126.91 16.02L122.22 10.63H120.41V21.19H122.52V14.26L126.91 19.31V21.19H129.02V10.63H126.91V16.02Z" fill="white"/>
 9 | <path fill-rule="evenodd" clip-rule="evenodd" d="M134.5 13.29C135.3 13.29 135.99 13.45 136.59 13.79L136.58 13.78C137.19 14.11 137.65 14.57 137.98 15.17C138.31 15.77 138.47 16.47 138.47 17.26V17.92H132.62C132.65 18.18 132.7 18.44 132.81 18.66C132.97 18.96 133.19 19.19 133.48 19.36C133.77 19.53 134.12 19.61 134.53 19.61C134.94 19.61 135.29 19.54 135.57 19.41C135.85 19.28 136.06 19.09 136.2 18.86H138.3C138.14 19.33 137.88 19.76 137.53 20.13C137.19 20.51 136.75 20.79 136.23 21C135.72 21.21 135.14 21.31 134.51 21.31C133.72 21.31 133.02 21.15 132.41 20.82C131.81 20.49 131.35 20.02 131.01 19.41C130.68 18.81 130.52 18.1 130.52 17.3C130.52 16.5 130.68 15.8 131.01 15.2C131.34 14.6 131.8 14.13 132.4 13.79C133.01 13.46 133.7 13.29 134.5 13.29ZM134.5 14.99C134.14 14.99 133.81 15.08 133.52 15.26C133.23 15.42 133 15.66 132.83 15.97C132.75 16.14 132.69 16.31 132.65 16.49H136.39C136.349 16.224 136.247 15.9714 136.09 15.7525C135.934 15.5336 135.728 15.3546 135.49 15.23C135.2 15.07 134.86 14.99 134.5 14.99Z" fill="white"/>
10 | <path d="M142.58 10.98H140.62V13.43H139.14V15.1H140.62V21.19H142.58V15.1H144.26V13.43H142.58V10.98ZM145.92 10.14H147.88V21.19H145.92V10.14ZM149.95 21.18V13.26C150.21 13.45 150.53 13.55 150.93 13.55C151.33 13.55 151.66 13.46 151.91 13.26V21.18H149.95ZM163.14 18.5L165.26 13.43H167.15L162.84 23.75H160.95L162.14 20.9L159.13 13.43H161.1L163.14 18.5Z" fill="white"/>
11 | </g>
12 | <defs>
13 | <clipPath id="clip0_8_30">
14 | <rect width="179" height="32" fill="white"/>
15 | </clipPath>
16 | </defs>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/src/content/blog/05-markdown-syntax/index.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: "Markdown syntax guide"
  3 | description: "Get started writing content in markdown."
  4 | date: "Mar 17 2024"
  5 | ---
  6 | 
  7 | ---
  8 | 
  9 | ### Headings
 10 | 
 11 | To create headings, use hash symbols (#) followed by a space. The number of hash symbols indicates the heading level.
 12 | 
 13 | ```md
 14 | # Heading 1
 15 | ## Heading 2
 16 | ### Heading 3
 17 | #### Heading 4
 18 | ##### Heading 5
 19 | ###### Heading 6
 20 | ```
 21 | 
 22 | <h1>Heading 1</h1>
 23 | <h2>Heading 2</h2>
 24 | <h3>Heading 3</h3>
 25 | <h4>Heading 4</h4>
 26 | <h5>Heading 5</h5>
 27 | <h6>Heading 6</h6>
 28 | 
 29 | ---
 30 | 
 31 | ### Paragraphs
 32 | 
 33 | Simply type non-indented text, surrounded by empty lines.
 34 | 
 35 | ```md
 36 | <!-- empty line -->
 37 | I really like using Markdown.
 38 | <!-- empty line -->
 39 | I think I'll use it to format all of my content from now on.
 40 | <!-- empty line -->
 41 | ```
 42 | 
 43 | I really like using Markdown.
 44 | 
 45 | I think I'll use it to format all of my content from now on.
 46 | 
 47 | ---
 48 | 
 49 | ### Bold
 50 | 
 51 | Use double `*` or `_` to denote bold text.
 52 | 
 53 | ```md
 54 | it was the **best** of times, 
 55 | it was the __worst__ of times
 56 | ```
 57 | It was the **best** of times,<br/>
 58 | it was the __worst__ of times
 59 | 
 60 | ---
 61 | 
 62 | ### Italic
 63 | 
 64 | Use single `*` to denote italic text.
 65 | 
 66 | ```md
 67 | it was the age of *wisdom*, 
 68 | it was the age of *foolishness*
 69 | ```
 70 | it was the age of *wisdom*,<br/>
 71 | it was the age of *foolishness*
 72 | 
 73 | ---
 74 | 
 75 | ### Bold and Italic
 76 | 
 77 | Use `*`, `**` and `_` to combine effects.
 78 | 
 79 | ```md
 80 | it was the season of ***light***, 
 81 | it was the season of *__darkness__*
 82 | ```
 83 | it was the season of ***light***,<br/> 
 84 | it was the season of *__darkness__*
 85 | 
 86 | ---
 87 | 
 88 | ### Line breaks
 89 | 
 90 | Use triple `---` to denote a line break.
 91 | 
 92 | ```md
 93 | <!-- empty line -->
 94 | ---
 95 | <!-- empty line -->
 96 | ```
 97 | 
 98 | ---
 99 | 
100 | ### Links
101 | 
102 | Links can be added using the `[title](url)` pattern.
103 | 
104 | ```md
105 | Nano was made with [Astro](https://astro.build)
106 | ```
107 | 
108 | Nano was made with [Astro](https://astro.build)
109 | 
110 | ---
111 | 
112 | ### Quick link
113 | 
114 | Add an quick link using the `<url>` pattern.
115 | 
116 | ```md
117 | <http://www.example.com>
118 | ```
119 | 
120 | <http://www.example.com>
121 | 
122 | ---
123 | 
124 | ### Email link
125 | 
126 | Add an email link using the `<emailaddress>` pattern.
127 | 
128 | ```md
129 | Email me at <markhorn.dev@gmail.com> using your mail app.
130 | ```
131 | 
132 | Email me at <markhorn.dev@gmail.com> using your mail app.
133 | 
134 | ---
135 | 
136 | ### Ordered Lists
137 | 
138 | Add a number followed by a period for items. For sub items, indent.
139 | 
140 | ```md
141 | 1. Item 1
142 | 2. Item 2
143 |     1. Sub item 1
144 |     2. Sub item 2
145 | 3. Item 3
146 | ```
147 | 
148 | 1. Item 1
149 | 2. Item 2
150 |     1. Sub item 1
151 |     2. Sub item 2
152 | 3. Item 3
153 | 
154 | ---
155 | 
156 | ### Unordered List
157 | 
158 | Add a `-` or `+` for items. Don't mix. For sub items, indent.
159 | 
160 | ```md
161 | - Item 1
162 | - Item 2
163 |     - Sub item 1
164 |     - Sub item 2
165 | - Item 3
166 | ```
167 | 
168 | - Item 1
169 | - Item 2
170 |     - Sub item 1
171 |     - Sub item 2
172 | - Item 3
173 | 
174 | ---
175 | 
176 | ### Relative Image
177 | 
178 | Use the `![title](./image.*)` pattern relative to the same folder as the markdown file. Notice the period.
179 | 
180 | ```md
181 | ![Square Pants](./spongebob.webp)
182 | ```
183 | 
184 | ![Square Pants](./spongebob.webp)
185 | 
186 | ---
187 | 
188 | ### Public Image
189 | 
190 | Use the `![title](/image.*)` pattern relative to the public folder. No period.
191 | 
192 | ```md
193 | ![Patrick Starfish](/patrick.webp)
194 | ```
195 | 
196 | ![Patrick Starfish](/patrick.webp)
197 | 
198 | ---
199 | 
200 | ### External Image
201 | 
202 | Use the `![title](url)` pattern.
203 | 
204 | ```md
205 | ![Mr. Krabs](https://upload.wikimedia.org/wikipedia/en/thumb/f/f8/Mr._Krabs.svg/440px-Mr._Krabs.svg.png)
206 | ```
207 | 
208 | ![Mr. Krabs](https://upload.wikimedia.org/wikipedia/en/thumb/f/f8/Mr._Krabs.svg/440px-Mr._Krabs.svg.png)
209 | 
210 | ---
211 | 
212 | ### Blockquotes
213 | 
214 | To add a blockquote add a `>` before a paragraph. For multi-line blockquotes,
215 | add additional `>` for each line and include an empty spacer line.
216 | 
217 | ```md
218 | > it was the spring of hope, it was the winter of despair.
219 | >
220 | > Charles Dickens
221 | ```
222 | 
223 | > it was the spring of hope, it was the winter of despair.
224 | >
225 | > ~ Charles Dickens
226 | 
227 | ---
228 | 
229 | ### Strikethrough
230 | 
231 | Use the tilde `~` symbol to strikethrough text.
232 | 
233 | ```md
234 | ~The earth is round.~ The earth is flat.
235 | ```
236 | 
237 | ~The earth is round.~ The earth is flat.
238 | 
239 | ---
240 | 
241 | ### Subscript
242 | 
243 | Use the `<sub>` tag to denote subscript.
244 | 
245 | ```md
246 | H<sub>2</sub>O
247 | ```
248 | 
249 | H<sub>2</sub>O
250 | 
251 | ---
252 | 
253 | ### Superscript
254 | 
255 | Use the `<sup>` tag to denote superscript.
256 | 
257 | ```md
258 | E=mc<sup>2</sup>
259 | ```
260 | 
261 | E=mc<sup>2</sup>
262 | 
263 | ---
264 | 
265 | ### Keyboard
266 | 
267 | Use the `<kbd>` tag to denote keys on the keyboard.
268 | 
269 | ```md
270 | <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd>
271 | ```
272 | 
273 | <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd>
274 | 
275 | ---
276 | 
277 | ### Abbreviate
278 | 
279 | Use the `<abbr>` tag to denote abbreviation.
280 | 
281 | ```md
282 | <abbr title="Graphics Interchange Format">GIF</abbr>
283 | ```
284 | 
285 | <abbr title="Graphics Interchange Format">GIF</abbr>
286 | 
287 | ---
288 | 
289 | ### Highlight
290 | 
291 | Use the `<mark>` tag to denote highlighted text.
292 | 
293 | ```md
294 | <mark>Very important text</mark>
295 | ```
296 | 
297 | <mark>Very important text</mark>
298 | 
299 | ---
300 | 
301 | ### Task Lists
302 | 
303 | Combine a list with 2 square brackets. `spc` incomplete `x` complete.
304 | 
305 | ```md
306 | - [x] Take out trash
307 | - [ ] Mow the lawn
308 | - [ ] Buy more bitcoin
309 | ```
310 | 
311 | - [x] Take out trash
312 | - [ ] Mow the lawn
313 | - [ ] Buy more bitcoin
314 | 
315 | ---
316 | 
317 | ### Tables
318 | 
319 | Use `-` for header, `|` for columns, `:` for alignment.
320 | 
321 | ```md
322 | | Item    | Ct  |
323 | | :------ | --: |
324 | | Bread   | 1   |
325 | | Milk    | 1   |
326 | | Haribo  | 10  |
327 | ```
328 | 
329 | | Item    | Buy |
330 | | :------ | --: |
331 | | Bread   | 1   |
332 | | Milk    | 1   |
333 | | Haribo  | 10  |
334 | 
335 | ---
336 | 
337 | ### Footnotes
338 | 
339 | Add a caret and an id inside brackets `[^1]` to create a footnote.
340 | 
341 | ```md
342 | Here's a simple footnote, [^1] and here's a another one. [^2]
343 | [^1]: This is the first footnote.
344 | [^2]: This is the second footnote.
345 | ```
346 | 
347 | Here's a simple footnote, [^1] and here's a another one. [^2]
348 | [^1]: This is the first footnote.
349 | [^2]: This is the second footnote.
350 | 
351 | See the bottom of the page to view the footnotes.
352 | 
353 | ---
354 | 
355 | ### Code
356 | 
357 | Use backticks ` to denote a word or phrase as code.
358 | 
359 | ```md
360 | `package.json`
361 | ```
362 | 
363 | `package.json`
364 | 
365 | ---
366 | 
367 | ### Code Blocks
368 | 
369 | Denote a code block by enclosing a section of valid code in triple backticks. Syntax highlight the code by using the shorthand symbol for the language. Ex: js, javascript, python
370 | 
371 | ````
372 | ```js
373 |   function hello() {
374 |     console.log("hello world");
375 |   }
376 | ```
377 | ````
378 | 
379 | ```js
380 |   function hello() {
381 |     console.log("hello world");
382 |   }
383 | ```
384 | 
385 | ---
386 | 
387 | ### Conclusion
388 | 
389 | Please refer to markdownguide.org for best practices as well as advanced and extended syntax.
390 | 
391 | https://www.markdownguide.org/basic-syntax
392 | https://www.markdownguide.org/extended-syntax/
393 | 
394 | ---
395 | 
396 | 
397 | 
398 | 


--------------------------------------------------------------------------------
/_deploy_vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="171" height="32" viewBox="0 0 171 32" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M5.73184 0.5H165.268C168.136 0.5 170.5 2.94064 170.5 6V26C170.5 29.0594 168.136 31.5 165.268 31.5H5.73184C2.86367 31.5 0.5 29.0594 0.5 26V6C0.5 2.94064 2.86367 0.5 5.73184 0.5Z" fill="#1A1A1A" stroke="#363636"/>
3 | <path d="M21.2894 6L31.3825 24H11.1964L21.2894 6Z" fill="white"/>
4 | <path d="M44.216 21V10.312H47.128C47.9813 10.312 48.76 10.4027 49.464 10.584C50.1787 10.7547 50.7973 11.0427 51.32 11.448C51.8427 11.8533 52.248 12.4027 52.536 13.096C52.824 13.7787 52.968 14.6267 52.968 15.64C52.968 16.664 52.824 17.5227 52.536 18.216C52.248 18.8987 51.8427 19.448 51.32 19.864C50.7973 20.2693 50.1787 20.5627 49.464 20.744C48.76 20.9147 47.9813 21 47.128 21H44.216ZM45.72 19.736H47.096C47.6507 19.736 48.184 19.6933 48.696 19.608C49.2187 19.512 49.6827 19.3307 50.088 19.064C50.504 18.7867 50.8293 18.376 51.064 17.832C51.3093 17.2773 51.432 16.5467 51.432 15.64C51.432 14.7333 51.3093 14.0133 51.064 13.48C50.8293 12.936 50.504 12.5307 50.088 12.264C49.6827 11.9867 49.2187 11.8053 48.696 11.72C48.184 11.624 47.6507 11.576 47.096 11.576H45.72V19.736ZM58.2616 21.192C57.4296 21.192 56.7256 21.0107 56.1496 20.648C55.5736 20.2747 55.131 19.7787 54.8216 19.16C54.523 18.5307 54.3736 17.8267 54.3736 17.048C54.3736 16.2053 54.5443 15.48 54.8856 14.872C55.227 14.2533 55.6856 13.7787 56.2616 13.448C56.8483 13.1067 57.5043 12.936 58.2296 12.936C58.859 12.936 59.4136 13.064 59.8936 13.32C60.3736 13.5653 60.7683 13.9013 61.0776 14.328C61.3976 14.744 61.627 15.2187 61.7656 15.752C61.915 16.2853 61.9683 16.8347 61.9256 17.4H55.8136C55.835 18.0613 55.979 18.584 56.2456 18.968C56.523 19.352 56.8483 19.624 57.2216 19.784C57.595 19.9333 57.9416 20.008 58.2616 20.008C58.7096 20.008 59.083 19.9387 59.3816 19.8C59.691 19.6507 59.9363 19.4587 60.1176 19.224L61.4136 19.608C61.1256 20.0667 60.715 20.4453 60.1816 20.744C59.6483 21.0427 59.0083 21.192 58.2616 21.192ZM55.8296 16.328H60.5016C60.5016 15.9547 60.4056 15.5973 60.2136 15.256C60.0323 14.9147 59.771 14.6373 59.4296 14.424C59.099 14.2 58.699 14.088 58.2296 14.088C57.835 14.088 57.4616 14.1627 57.1096 14.312C56.7576 14.4613 56.4643 14.7013 56.2296 15.032C56.0056 15.3627 55.8723 15.7947 55.8296 16.328ZM63.5106 23.576V13.064H64.4866L64.8546 14.312C65.1 13.896 65.436 13.5653 65.8626 13.32C66.2893 13.064 66.812 12.936 67.4306 12.936C68.0386 12.936 68.5986 13.1013 69.1106 13.432C69.6333 13.752 70.0493 14.2213 70.3586 14.84C70.6786 15.448 70.8386 16.1893 70.8386 17.064C70.8386 17.928 70.6786 18.6693 70.3586 19.288C70.0493 19.9067 69.6333 20.3813 69.1106 20.712C68.5986 21.032 68.0386 21.192 67.4306 21.192C66.812 21.192 66.2893 21.0693 65.8626 20.824C65.436 20.568 65.1 20.2267 64.8546 19.8V23.576H63.5106ZM67.0786 20.04C67.7613 20.04 68.3053 19.7787 68.7106 19.256C69.1266 18.7333 69.3346 18.0027 69.3346 17.064C69.3346 16.1147 69.1266 15.384 68.7106 14.872C68.3053 14.3493 67.7613 14.088 67.0786 14.088C66.396 14.088 65.8466 14.3493 65.4306 14.872C65.0253 15.384 64.8226 16.1147 64.8226 17.064C64.8226 18.0027 65.0253 18.7333 65.4306 19.256C65.8466 19.7787 66.396 20.04 67.0786 20.04ZM74.4451 21C73.9438 21 73.5545 20.952 73.2771 20.856C73.0105 20.7493 72.8238 20.552 72.7171 20.264C72.6211 19.976 72.5731 19.56 72.5731 19.016V10.328H73.9171V18.792C73.9171 19.1973 73.9598 19.4693 74.0451 19.608C74.1305 19.7467 74.3598 19.816 74.7331 19.816H75.0371V21H74.4451ZM79.6973 21.192C79.2386 21.192 78.7853 21.112 78.3373 20.952C77.8893 20.792 77.4786 20.5467 77.1053 20.216C76.7426 19.8747 76.4493 19.4427 76.2253 18.92C76.0013 18.3973 75.8893 17.7787 75.8893 17.064C75.8893 16.3493 76.0013 15.7307 76.2253 15.208C76.4493 14.6853 76.7426 14.2587 77.1053 13.928C77.4786 13.5867 77.8893 13.336 78.3373 13.176C78.7853 13.016 79.2386 12.936 79.6973 12.936C80.1559 12.936 80.6093 13.016 81.0573 13.176C81.5159 13.336 81.9266 13.5867 82.2893 13.928C82.6626 14.2587 82.9559 14.6853 83.1693 15.208C83.3933 15.7307 83.5052 16.3493 83.5052 17.064C83.5052 17.7787 83.3933 18.3973 83.1693 18.92C82.9559 19.4427 82.6626 19.8747 82.2893 20.216C81.9266 20.5467 81.5159 20.792 81.0573 20.952C80.6093 21.112 80.1559 21.192 79.6973 21.192ZM79.6973 20.008C80.0813 20.008 80.4546 19.9067 80.8173 19.704C81.1799 19.4907 81.4786 19.1707 81.7133 18.744C81.9479 18.3067 82.0653 17.7467 82.0653 17.064C82.0653 16.3813 81.9479 15.8267 81.7133 15.4C81.4786 14.9627 81.1799 14.6427 80.8173 14.44C80.4546 14.2267 80.0813 14.12 79.6973 14.12C79.3239 14.12 78.9506 14.2267 78.5773 14.44C78.2146 14.6427 77.9159 14.9627 77.6813 15.4C77.4466 15.8267 77.3293 16.3813 77.3293 17.064C77.3293 17.7467 77.4466 18.3067 77.6813 18.744C77.9159 19.1707 78.2146 19.4907 78.5773 19.704C78.9506 19.9067 79.3239 20.008 79.6973 20.008ZM84.7014 23.576V22.392H85.2454C85.6294 22.392 85.9227 22.36 86.1254 22.296C86.328 22.2427 86.488 22.1147 86.6054 21.912C86.7334 21.72 86.856 21.4213 86.9734 21.016L84.1094 13.08H85.5974L87.5494 19.192L89.5014 13.08H90.9734L88.1574 21.352C87.9654 21.9173 87.768 22.36 87.5654 22.68C87.3734 23.0107 87.112 23.24 86.7814 23.368C86.4507 23.5067 85.9867 23.576 85.3894 23.576H84.7014ZM98.9891 21C98.4878 21 98.0985 20.952 97.8211 20.856C97.5545 20.7493 97.3678 20.552 97.2611 20.264C97.1651 19.976 97.1171 19.56 97.1171 19.016V14.136H95.7731V13.064H97.1171V11.064H98.4611V13.064H99.9971V14.136H98.4611V18.792C98.4611 19.1973 98.4985 19.4693 98.5731 19.608C98.6585 19.7467 98.8931 19.816 99.2771 19.816H99.9971V21H98.9891ZM105.057 21.192C104.598 21.192 104.145 21.112 103.697 20.952C103.249 20.792 102.838 20.5467 102.465 20.216C102.102 19.8747 101.809 19.4427 101.585 18.92C101.361 18.3973 101.249 17.7787 101.249 17.064C101.249 16.3493 101.361 15.7307 101.585 15.208C101.809 14.6853 102.102 14.2587 102.465 13.928C102.838 13.5867 103.249 13.336 103.697 13.176C104.145 13.016 104.598 12.936 105.057 12.936C105.515 12.936 105.969 13.016 106.417 13.176C106.875 13.336 107.286 13.5867 107.649 13.928C108.022 14.2587 108.315 14.6853 108.529 15.208C108.753 15.7307 108.865 16.3493 108.865 17.064C108.865 17.7787 108.753 18.3973 108.529 18.92C108.315 19.4427 108.022 19.8747 107.649 20.216C107.286 20.5467 106.875 20.792 106.417 20.952C105.969 21.112 105.515 21.192 105.057 21.192ZM105.057 20.008C105.441 20.008 105.814 19.9067 106.177 19.704C106.539 19.4907 106.838 19.1707 107.073 18.744C107.307 18.3067 107.425 17.7467 107.425 17.064C107.425 16.3813 107.307 15.8267 107.073 15.4C106.838 14.9627 106.539 14.6427 106.177 14.44C105.814 14.2267 105.441 14.12 105.057 14.12C104.683 14.12 104.31 14.2267 103.937 14.44C103.574 14.6427 103.275 14.9627 103.041 15.4C102.806 15.8267 102.689 16.3813 102.689 17.064C102.689 17.7467 102.806 18.3067 103.041 18.744C103.275 19.1707 103.574 19.4907 103.937 19.704C104.31 19.9067 104.683 20.008 105.057 20.008ZM117.777 21L114.113 10.312H115.761L118.657 19.24L121.569 10.312H123.217L119.537 21H117.777ZM127.121 21.192C126.289 21.192 125.585 21.0107 125.009 20.648C124.433 20.2747 123.99 19.7787 123.681 19.16C123.382 18.5307 123.233 17.8267 123.233 17.048C123.233 16.2053 123.404 15.48 123.745 14.872C124.086 14.2533 124.545 13.7787 125.121 13.448C125.708 13.1067 126.364 12.936 127.089 12.936C127.718 12.936 128.273 13.064 128.753 13.32C129.233 13.5653 129.628 13.9013 129.937 14.328C130.257 14.744 130.486 15.2187 130.625 15.752C130.774 16.2853 130.828 16.8347 130.785 17.4H124.673C124.694 18.0613 124.838 18.584 125.105 18.968C125.382 19.352 125.708 19.624 126.081 19.784C126.454 19.9333 126.801 20.008 127.121 20.008C127.569 20.008 127.942 19.9387 128.241 19.8C128.55 19.6507 128.796 19.4587 128.977 19.224L130.273 19.608C129.985 20.0667 129.574 20.4453 129.041 20.744C128.508 21.0427 127.868 21.192 127.121 21.192ZM124.689 16.328H129.361C129.361 15.9547 129.265 15.5973 129.073 15.256C128.892 14.9147 128.63 14.6373 128.289 14.424C127.958 14.2 127.558 14.088 127.089 14.088C126.694 14.088 126.321 14.1627 125.969 14.312C125.617 14.4613 125.324 14.7013 125.089 15.032C124.865 15.3627 124.732 15.7947 124.689 16.328ZM132.37 21V13.064H133.346L133.778 14.536C134.055 14.056 134.429 13.672 134.898 13.384C135.378 13.0853 135.949 12.936 136.61 12.936V14.328C136.535 14.328 136.455 14.328 136.37 14.328C136.295 14.328 136.221 14.3333 136.146 14.344C135.239 14.4187 134.605 14.7333 134.242 15.288C133.89 15.8427 133.714 16.6107 133.714 17.592V21H132.37ZM140.992 21.192C140.234 21.192 139.578 21.016 139.024 20.664C138.469 20.3013 138.042 19.8107 137.743 19.192C137.445 18.5733 137.296 17.864 137.296 17.064C137.296 16.2747 137.45 15.5707 137.76 14.952C138.08 14.3227 138.528 13.832 139.104 13.48C139.68 13.1173 140.357 12.936 141.136 12.936C141.85 12.936 142.464 13.112 142.976 13.464C143.488 13.816 143.872 14.2373 144.128 14.728L142.896 15.176C142.725 14.856 142.474 14.6 142.144 14.408C141.813 14.216 141.445 14.12 141.04 14.12C140.645 14.12 140.272 14.2267 139.92 14.44C139.568 14.6427 139.285 14.9627 139.072 15.4C138.858 15.8267 138.752 16.376 138.752 17.048C138.752 17.7093 138.858 18.264 139.072 18.712C139.296 19.1493 139.578 19.4747 139.92 19.688C140.272 19.9013 140.645 20.008 141.04 20.008C141.477 20.008 141.856 19.912 142.176 19.72C142.506 19.5173 142.757 19.2667 142.928 18.968L144.16 19.416C143.861 19.928 143.434 20.3547 142.88 20.696C142.325 21.0267 141.696 21.192 140.992 21.192ZM149.184 21.192C148.352 21.192 147.648 21.0107 147.072 20.648C146.496 20.2747 146.053 19.7787 145.743 19.16C145.445 18.5307 145.296 17.8267 145.296 17.048C145.296 16.2053 145.466 15.48 145.808 14.872C146.149 14.2533 146.608 13.7787 147.184 13.448C147.77 13.1067 148.426 12.936 149.152 12.936C149.781 12.936 150.336 13.064 150.816 13.32C151.296 13.5653 151.69 13.9013 152 14.328C152.32 14.744 152.549 15.2187 152.688 15.752C152.837 16.2853 152.89 16.8347 152.848 17.4H146.736C146.757 18.0613 146.901 18.584 147.168 18.968C147.445 19.352 147.77 19.624 148.144 19.784C148.517 19.9333 148.864 20.008 149.184 20.008C149.632 20.008 150.005 19.9387 150.304 19.8C150.613 19.6507 150.858 19.4587 151.04 19.224L152.336 19.608C152.048 20.0667 151.637 20.4453 151.104 20.744C150.57 21.0427 149.93 21.192 149.184 21.192ZM146.752 16.328H151.424C151.424 15.9547 151.328 15.5973 151.136 15.256C150.954 14.9147 150.693 14.6373 150.352 14.424C150.021 14.2 149.621 14.088 149.152 14.088C148.757 14.088 148.384 14.1627 148.032 14.312C147.68 14.4613 147.386 14.7013 147.152 15.032C146.928 15.3627 146.794 15.7947 146.752 16.328ZM156.305 21C155.803 21 155.414 20.952 155.137 20.856C154.87 20.7493 154.683 20.552 154.577 20.264C154.481 19.976 154.433 19.56 154.433 19.016V10.328H155.777V18.792C155.777 19.1973 155.819 19.4693 155.905 19.608C155.99 19.7467 156.219 19.816 156.593 19.816H156.897V21H156.305Z" fill="white"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/public/deploy_vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="171" height="32" viewBox="0 0 171 32" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M5.73184 0.5H165.268C168.136 0.5 170.5 2.94064 170.5 6V26C170.5 29.0594 168.136 31.5 165.268 31.5H5.73184C2.86367 31.5 0.5 29.0594 0.5 26V6C0.5 2.94064 2.86367 0.5 5.73184 0.5Z" fill="#1A1A1A" stroke="#363636"/>
3 | <path d="M21.2894 6L31.3825 24H11.1964L21.2894 6Z" fill="white"/>
4 | <path d="M44.216 21V10.312H47.128C47.9813 10.312 48.76 10.4027 49.464 10.584C50.1787 10.7547 50.7973 11.0427 51.32 11.448C51.8427 11.8533 52.248 12.4027 52.536 13.096C52.824 13.7787 52.968 14.6267 52.968 15.64C52.968 16.664 52.824 17.5227 52.536 18.216C52.248 18.8987 51.8427 19.448 51.32 19.864C50.7973 20.2693 50.1787 20.5627 49.464 20.744C48.76 20.9147 47.9813 21 47.128 21H44.216ZM45.72 19.736H47.096C47.6507 19.736 48.184 19.6933 48.696 19.608C49.2187 19.512 49.6827 19.3307 50.088 19.064C50.504 18.7867 50.8293 18.376 51.064 17.832C51.3093 17.2773 51.432 16.5467 51.432 15.64C51.432 14.7333 51.3093 14.0133 51.064 13.48C50.8293 12.936 50.504 12.5307 50.088 12.264C49.6827 11.9867 49.2187 11.8053 48.696 11.72C48.184 11.624 47.6507 11.576 47.096 11.576H45.72V19.736ZM58.2616 21.192C57.4296 21.192 56.7256 21.0107 56.1496 20.648C55.5736 20.2747 55.131 19.7787 54.8216 19.16C54.523 18.5307 54.3736 17.8267 54.3736 17.048C54.3736 16.2053 54.5443 15.48 54.8856 14.872C55.227 14.2533 55.6856 13.7787 56.2616 13.448C56.8483 13.1067 57.5043 12.936 58.2296 12.936C58.859 12.936 59.4136 13.064 59.8936 13.32C60.3736 13.5653 60.7683 13.9013 61.0776 14.328C61.3976 14.744 61.627 15.2187 61.7656 15.752C61.915 16.2853 61.9683 16.8347 61.9256 17.4H55.8136C55.835 18.0613 55.979 18.584 56.2456 18.968C56.523 19.352 56.8483 19.624 57.2216 19.784C57.595 19.9333 57.9416 20.008 58.2616 20.008C58.7096 20.008 59.083 19.9387 59.3816 19.8C59.691 19.6507 59.9363 19.4587 60.1176 19.224L61.4136 19.608C61.1256 20.0667 60.715 20.4453 60.1816 20.744C59.6483 21.0427 59.0083 21.192 58.2616 21.192ZM55.8296 16.328H60.5016C60.5016 15.9547 60.4056 15.5973 60.2136 15.256C60.0323 14.9147 59.771 14.6373 59.4296 14.424C59.099 14.2 58.699 14.088 58.2296 14.088C57.835 14.088 57.4616 14.1627 57.1096 14.312C56.7576 14.4613 56.4643 14.7013 56.2296 15.032C56.0056 15.3627 55.8723 15.7947 55.8296 16.328ZM63.5106 23.576V13.064H64.4866L64.8546 14.312C65.1 13.896 65.436 13.5653 65.8626 13.32C66.2893 13.064 66.812 12.936 67.4306 12.936C68.0386 12.936 68.5986 13.1013 69.1106 13.432C69.6333 13.752 70.0493 14.2213 70.3586 14.84C70.6786 15.448 70.8386 16.1893 70.8386 17.064C70.8386 17.928 70.6786 18.6693 70.3586 19.288C70.0493 19.9067 69.6333 20.3813 69.1106 20.712C68.5986 21.032 68.0386 21.192 67.4306 21.192C66.812 21.192 66.2893 21.0693 65.8626 20.824C65.436 20.568 65.1 20.2267 64.8546 19.8V23.576H63.5106ZM67.0786 20.04C67.7613 20.04 68.3053 19.7787 68.7106 19.256C69.1266 18.7333 69.3346 18.0027 69.3346 17.064C69.3346 16.1147 69.1266 15.384 68.7106 14.872C68.3053 14.3493 67.7613 14.088 67.0786 14.088C66.396 14.088 65.8466 14.3493 65.4306 14.872C65.0253 15.384 64.8226 16.1147 64.8226 17.064C64.8226 18.0027 65.0253 18.7333 65.4306 19.256C65.8466 19.7787 66.396 20.04 67.0786 20.04ZM74.4451 21C73.9438 21 73.5545 20.952 73.2771 20.856C73.0105 20.7493 72.8238 20.552 72.7171 20.264C72.6211 19.976 72.5731 19.56 72.5731 19.016V10.328H73.9171V18.792C73.9171 19.1973 73.9598 19.4693 74.0451 19.608C74.1305 19.7467 74.3598 19.816 74.7331 19.816H75.0371V21H74.4451ZM79.6973 21.192C79.2386 21.192 78.7853 21.112 78.3373 20.952C77.8893 20.792 77.4786 20.5467 77.1053 20.216C76.7426 19.8747 76.4493 19.4427 76.2253 18.92C76.0013 18.3973 75.8893 17.7787 75.8893 17.064C75.8893 16.3493 76.0013 15.7307 76.2253 15.208C76.4493 14.6853 76.7426 14.2587 77.1053 13.928C77.4786 13.5867 77.8893 13.336 78.3373 13.176C78.7853 13.016 79.2386 12.936 79.6973 12.936C80.1559 12.936 80.6093 13.016 81.0573 13.176C81.5159 13.336 81.9266 13.5867 82.2893 13.928C82.6626 14.2587 82.9559 14.6853 83.1693 15.208C83.3933 15.7307 83.5052 16.3493 83.5052 17.064C83.5052 17.7787 83.3933 18.3973 83.1693 18.92C82.9559 19.4427 82.6626 19.8747 82.2893 20.216C81.9266 20.5467 81.5159 20.792 81.0573 20.952C80.6093 21.112 80.1559 21.192 79.6973 21.192ZM79.6973 20.008C80.0813 20.008 80.4546 19.9067 80.8173 19.704C81.1799 19.4907 81.4786 19.1707 81.7133 18.744C81.9479 18.3067 82.0653 17.7467 82.0653 17.064C82.0653 16.3813 81.9479 15.8267 81.7133 15.4C81.4786 14.9627 81.1799 14.6427 80.8173 14.44C80.4546 14.2267 80.0813 14.12 79.6973 14.12C79.3239 14.12 78.9506 14.2267 78.5773 14.44C78.2146 14.6427 77.9159 14.9627 77.6813 15.4C77.4466 15.8267 77.3293 16.3813 77.3293 17.064C77.3293 17.7467 77.4466 18.3067 77.6813 18.744C77.9159 19.1707 78.2146 19.4907 78.5773 19.704C78.9506 19.9067 79.3239 20.008 79.6973 20.008ZM84.7014 23.576V22.392H85.2454C85.6294 22.392 85.9227 22.36 86.1254 22.296C86.328 22.2427 86.488 22.1147 86.6054 21.912C86.7334 21.72 86.856 21.4213 86.9734 21.016L84.1094 13.08H85.5974L87.5494 19.192L89.5014 13.08H90.9734L88.1574 21.352C87.9654 21.9173 87.768 22.36 87.5654 22.68C87.3734 23.0107 87.112 23.24 86.7814 23.368C86.4507 23.5067 85.9867 23.576 85.3894 23.576H84.7014ZM98.9891 21C98.4878 21 98.0985 20.952 97.8211 20.856C97.5545 20.7493 97.3678 20.552 97.2611 20.264C97.1651 19.976 97.1171 19.56 97.1171 19.016V14.136H95.7731V13.064H97.1171V11.064H98.4611V13.064H99.9971V14.136H98.4611V18.792C98.4611 19.1973 98.4985 19.4693 98.5731 19.608C98.6585 19.7467 98.8931 19.816 99.2771 19.816H99.9971V21H98.9891ZM105.057 21.192C104.598 21.192 104.145 21.112 103.697 20.952C103.249 20.792 102.838 20.5467 102.465 20.216C102.102 19.8747 101.809 19.4427 101.585 18.92C101.361 18.3973 101.249 17.7787 101.249 17.064C101.249 16.3493 101.361 15.7307 101.585 15.208C101.809 14.6853 102.102 14.2587 102.465 13.928C102.838 13.5867 103.249 13.336 103.697 13.176C104.145 13.016 104.598 12.936 105.057 12.936C105.515 12.936 105.969 13.016 106.417 13.176C106.875 13.336 107.286 13.5867 107.649 13.928C108.022 14.2587 108.315 14.6853 108.529 15.208C108.753 15.7307 108.865 16.3493 108.865 17.064C108.865 17.7787 108.753 18.3973 108.529 18.92C108.315 19.4427 108.022 19.8747 107.649 20.216C107.286 20.5467 106.875 20.792 106.417 20.952C105.969 21.112 105.515 21.192 105.057 21.192ZM105.057 20.008C105.441 20.008 105.814 19.9067 106.177 19.704C106.539 19.4907 106.838 19.1707 107.073 18.744C107.307 18.3067 107.425 17.7467 107.425 17.064C107.425 16.3813 107.307 15.8267 107.073 15.4C106.838 14.9627 106.539 14.6427 106.177 14.44C105.814 14.2267 105.441 14.12 105.057 14.12C104.683 14.12 104.31 14.2267 103.937 14.44C103.574 14.6427 103.275 14.9627 103.041 15.4C102.806 15.8267 102.689 16.3813 102.689 17.064C102.689 17.7467 102.806 18.3067 103.041 18.744C103.275 19.1707 103.574 19.4907 103.937 19.704C104.31 19.9067 104.683 20.008 105.057 20.008ZM117.777 21L114.113 10.312H115.761L118.657 19.24L121.569 10.312H123.217L119.537 21H117.777ZM127.121 21.192C126.289 21.192 125.585 21.0107 125.009 20.648C124.433 20.2747 123.99 19.7787 123.681 19.16C123.382 18.5307 123.233 17.8267 123.233 17.048C123.233 16.2053 123.404 15.48 123.745 14.872C124.086 14.2533 124.545 13.7787 125.121 13.448C125.708 13.1067 126.364 12.936 127.089 12.936C127.718 12.936 128.273 13.064 128.753 13.32C129.233 13.5653 129.628 13.9013 129.937 14.328C130.257 14.744 130.486 15.2187 130.625 15.752C130.774 16.2853 130.828 16.8347 130.785 17.4H124.673C124.694 18.0613 124.838 18.584 125.105 18.968C125.382 19.352 125.708 19.624 126.081 19.784C126.454 19.9333 126.801 20.008 127.121 20.008C127.569 20.008 127.942 19.9387 128.241 19.8C128.55 19.6507 128.796 19.4587 128.977 19.224L130.273 19.608C129.985 20.0667 129.574 20.4453 129.041 20.744C128.508 21.0427 127.868 21.192 127.121 21.192ZM124.689 16.328H129.361C129.361 15.9547 129.265 15.5973 129.073 15.256C128.892 14.9147 128.63 14.6373 128.289 14.424C127.958 14.2 127.558 14.088 127.089 14.088C126.694 14.088 126.321 14.1627 125.969 14.312C125.617 14.4613 125.324 14.7013 125.089 15.032C124.865 15.3627 124.732 15.7947 124.689 16.328ZM132.37 21V13.064H133.346L133.778 14.536C134.055 14.056 134.429 13.672 134.898 13.384C135.378 13.0853 135.949 12.936 136.61 12.936V14.328C136.535 14.328 136.455 14.328 136.37 14.328C136.295 14.328 136.221 14.3333 136.146 14.344C135.239 14.4187 134.605 14.7333 134.242 15.288C133.89 15.8427 133.714 16.6107 133.714 17.592V21H132.37ZM140.992 21.192C140.234 21.192 139.578 21.016 139.024 20.664C138.469 20.3013 138.042 19.8107 137.743 19.192C137.445 18.5733 137.296 17.864 137.296 17.064C137.296 16.2747 137.45 15.5707 137.76 14.952C138.08 14.3227 138.528 13.832 139.104 13.48C139.68 13.1173 140.357 12.936 141.136 12.936C141.85 12.936 142.464 13.112 142.976 13.464C143.488 13.816 143.872 14.2373 144.128 14.728L142.896 15.176C142.725 14.856 142.474 14.6 142.144 14.408C141.813 14.216 141.445 14.12 141.04 14.12C140.645 14.12 140.272 14.2267 139.92 14.44C139.568 14.6427 139.285 14.9627 139.072 15.4C138.858 15.8267 138.752 16.376 138.752 17.048C138.752 17.7093 138.858 18.264 139.072 18.712C139.296 19.1493 139.578 19.4747 139.92 19.688C140.272 19.9013 140.645 20.008 141.04 20.008C141.477 20.008 141.856 19.912 142.176 19.72C142.506 19.5173 142.757 19.2667 142.928 18.968L144.16 19.416C143.861 19.928 143.434 20.3547 142.88 20.696C142.325 21.0267 141.696 21.192 140.992 21.192ZM149.184 21.192C148.352 21.192 147.648 21.0107 147.072 20.648C146.496 20.2747 146.053 19.7787 145.743 19.16C145.445 18.5307 145.296 17.8267 145.296 17.048C145.296 16.2053 145.466 15.48 145.808 14.872C146.149 14.2533 146.608 13.7787 147.184 13.448C147.77 13.1067 148.426 12.936 149.152 12.936C149.781 12.936 150.336 13.064 150.816 13.32C151.296 13.5653 151.69 13.9013 152 14.328C152.32 14.744 152.549 15.2187 152.688 15.752C152.837 16.2853 152.89 16.8347 152.848 17.4H146.736C146.757 18.0613 146.901 18.584 147.168 18.968C147.445 19.352 147.77 19.624 148.144 19.784C148.517 19.9333 148.864 20.008 149.184 20.008C149.632 20.008 150.005 19.9387 150.304 19.8C150.613 19.6507 150.858 19.4587 151.04 19.224L152.336 19.608C152.048 20.0667 151.637 20.4453 151.104 20.744C150.57 21.0427 149.93 21.192 149.184 21.192ZM146.752 16.328H151.424C151.424 15.9547 151.328 15.5973 151.136 15.256C150.954 14.9147 150.693 14.6373 150.352 14.424C150.021 14.2 149.621 14.088 149.152 14.088C148.757 14.088 148.384 14.1627 148.032 14.312C147.68 14.4613 147.386 14.7013 147.152 15.032C146.928 15.3627 146.794 15.7947 146.752 16.328ZM156.305 21C155.803 21 155.414 20.952 155.137 20.856C154.87 20.7493 154.683 20.552 154.577 20.264C154.481 19.976 154.433 19.56 154.433 19.016V10.328H155.777V18.792C155.777 19.1973 155.819 19.4693 155.905 19.608C155.99 19.7467 156.219 19.816 156.593 19.816H156.897V21H156.305Z" fill="white"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------