add first part of animation section

astro.config.mjs

@@ -9,10 +9,10 @@ import vercel from "@astrojs/vercel/serverless";
 import react from "@astrojs/react";
 import remarkGithub from "remark-github";
 import sitemap from "@astrojs/sitemap";
-
+import remarkDirective from "remark-directive";
+import astroStarlightRemarkAsides from "astro-starlight-remark-asides";
 // @ts-ignore
 import rehypeFigure from "@microflash/rehype-figure";
-
 import inoxToolsContentUtils from "@inox-tools/content-utils";
 
 // https://astro.build/config
@@ -29,7 +29,7 @@ export default defineConfig({
     domains: ["placehold.co"],
   },
   markdown: {
-    remarkPlugins: [remarkGithub],
+    remarkPlugins: [remarkGithub, remarkDirective, astroStarlightRemarkAsides],
     rehypePlugins: [rehypeFigure],
   },
   prefetch: {

package.json

@@ -6,7 +6,11 @@
     "type": "git",
     "url": "https://github.com/Trombach/astro-homepage"
   },
-  "browserslist": [">1%", "not dead", "last 1 years"],
+  "browserslist": [
+    ">1%",
+    "not dead",
+    "last 1 years"
+  ],
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -42,11 +46,13 @@
     "@vercel/speed-insights": "^1.0.12",
     "astro": "^4.16.0",
     "astro-og-canvas": "^0.5.3",
+    "astro-starlight-remark-asides": "^0.0.7",
     "canvaskit-wasm": "^0.39.1",
     "clsx": "^2.1.1",
     "radash": "^12.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "remark-directive": "^3.0.0",
     "remark-github": "^12.0.0",
     "resend": "^4.0.0",
     "sanitize-html": "^2.13.1",

src/components/ProjectPage/PageBody.astro

@@ -4,6 +4,7 @@ import ToolIcon from "@components/ToolIcon.astro";
 import type { ProjectProps } from "@shared/types";
 import { Image } from "astro:assets";
 import { dash, title as titleCase } from "radash";
+import "./callout.css";
 
 type Props = Omit<ProjectProps, "headings">;
 

src/components/ProjectPage/callout.css

@@ -0,0 +1,103 @@
+/* This is taken from @microflash/remark-callout-directives/themes/github/index.css and modified. Modified to work with tailwind darkMode, and match starlights <Asides/> */
+
+:root {
+  --callout-headingFontColor-note: hsl(235, 76%, 29%);
+  --callout-bg-note: hsl(236, 77%, 90%);
+  --callout-border-note: hsl(235, 82%, 59%);
+  --callout-headingFontColor-success: hsl(137, 72%, 24%);
+  --callout-bg-success: hsl(96, 79%, 91%);
+  --callout-border-success: hsl(137, 66%, 30%);
+  --callout-headingFontColor-tip: hsl(277, 76%, 31%);
+  --callout-bg-tip: hsl(276, 70%, 90%);
+  --callout-border-tip: hsl(277, 81%, 60%);
+  --callout-headingFontColor-caution: hsl(41, 57%, 27%);
+  --callout-bg-caution: hsl(43, 80%, 88%);
+  --callout-border-caution: hsl(41, 80%, 63%);
+  --callout-headingFontColor-danger: hsl(342, 62%, 31%);
+  --callout-bg-danger: hsl(338, 57%, 89%);
+  --callout-border-danger: hsl(341, 72%, 60%);
+}
+
+:root.dark {
+  --callout-headingFontColor-note: hsl(235, 86%, 86%);
+  --callout-bg-note: hsl(235, 50%, 20%);
+  --callout-border-note: hsl(235, 90%, 59%);
+  --callout-headingFontColor-success: hsl(96, 77%, 81%);
+  --callout-bg-success: hsl(95, 33%, 23%);
+  --callout-border-success: hsl(96, 77%, 81%);
+  --callout-headingFontColor-tip: hsl(276, 72%, 89%);
+  --callout-bg-tip: hsl(276, 36%, 22%);
+  --callout-border-tip: hsl(277, 81%, 60%);
+  --callout-headingFontColor-caution: hsl(42, 72%, 87%);
+  --callout-bg-caution: hsl(43, 33%, 22%);
+  --callout-border-caution: hsl(42, 72%, 65%);
+  --callout-headingFontColor-danger: hsl(338, 61%, 86%);
+  --callout-bg-danger: hsl(339, 32%, 21%);
+  --callout-border-danger: hsl(340, 64%, 62%);
+}
+
+.callout {
+  --calloutheadingFontColor: var(--callout-headingFontColor);
+  --callout-bg: var(--callout-bg);
+  --callout-border: var(--callout-border);
+  border-left: 0.25em solid var(--callout-border);
+  padding: 0.5rem 1rem;
+  color: inherit;
+  background-color: var(--callout-bg);
+  border-radius: 0.125rem;
+}
+
+.callout-indicator {
+  display: flex;
+  align-items: center;
+  line-height: 1;
+  margin-bottom: 16px;
+  color: var(--calloutheadingFontColor);
+}
+
+.callout-title {
+  font-weight: 600;
+  font-size: 1.25rem;
+  letter-spacing: 0.025em;
+}
+
+.callout-indicator > svg:first-of-type {
+  margin-right: 0.5rem;
+}
+
+.callout-content:first-child,
+.callout-content:only-child {
+  margin-block-start: 0;
+}
+
+.callout-content:last-child,
+.callout-content:only-child {
+  margin-block-end: 0;
+}
+
+.callout-note {
+  --callout-headingFontColor: var(--callout-headingFontColor-note);
+  --callout-bg: var(--callout-bg-note);
+  --callout-border: var(--callout-border-note);
+}
+
+.callout-success {
+  --callout-headingFontColor: var(--callout-headingFontColor-success);
+  --callout-bg: var(--callout-bg-success);
+  --callout-border: var(--callout-border-success);
+}
+.callout-caution {
+  --callout-headingFontColor: var(--callout-headingFontColor-caution);
+  --callout-bg: var(--callout-bg-caution);
+  --callout-border: var(--callout-border-caution);
+}
+.callout-danger {
+  --callout-headingFontColor: var(--callout-headingFontColor-danger);
+  --callout-bg: var(--callout-bg-danger);
+  --callout-border: var(--callout-border-danger);
+}
+.callout-tip {
+  --callout-headingFontColor: var(--callout-headingFontColor-tip);
+  --callout-bg: var(--callout-bg-tip);
+  --callout-border: var(--callout-border-tip);
+}