+
{#if current === 'blog'}
{:else}
{/if}
-
+
Blog
-
-
+
+
+
+
+
+ Too bright? Switch to dark mode
+ Too dark? Turn on the lights
+
+
diff --git a/src/lib/components/ui/tooltip/index.ts b/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..7d0444d
--- /dev/null
+++ b/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,15 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Content from "./tooltip-content.svelte";
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+
+export {
+ Root,
+ Trigger,
+ Content,
+ //
+ Root as Tooltip,
+ Content as TooltipContent,
+ Trigger as TooltipTrigger,
+};
diff --git a/src/lib/components/ui/tooltip/tooltip-content.svelte b/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 0000000..d36d8e8
--- /dev/null
+++ b/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,28 @@
+
+
+
+
+
diff --git a/src/lib/styles/markdown.css b/src/lib/styles/markdown.css
new file mode 100644
index 0000000..1554565
--- /dev/null
+++ b/src/lib/styles/markdown.css
@@ -0,0 +1,149 @@
+.markdown-body {
+ h1,
+ h2 {
+ @apply text-3xl font-serif mb-5 mt-16;
+ }
+
+ h3,
+ h4 {
+ @apply text-2xl mb-5 mt-12 text-muted-foreground;
+ }
+
+ p {
+ @apply leading-relaxed my-2;
+ }
+
+ ol,
+ ul {
+ margin: 1em;
+ }
+ ol li ol,
+ ol li ul,
+ ul li ol,
+ ul li ul {
+ margin: 0 2em;
+ }
+ ol li p,
+ ul li p {
+ margin: 0;
+ }
+
+ dl {
+ font-family: monospace, monospace;
+ }
+ dl dt {
+ font-weight: bold;
+ }
+ dl dd {
+ margin: -1em 0 1em 1em;
+ }
+
+ img {
+ max-width: 100%;
+ display: block;
+ margin: 0 auto;
+ padding: 0.5em;
+ }
+
+ blockquote {
+ padding-left: 1em;
+ font-style: italic;
+ border-left: solid 1px #fa6432;
+ }
+
+ table {
+ font-size: 1rem;
+ text-align: left;
+ caption-side: bottom;
+ margin-bottom: 2em;
+ }
+ table * {
+ border: none;
+ }
+ table thead,
+ table tr {
+ display: table;
+ table-layout: fixed;
+ width: 100%;
+ }
+ table tr:nth-child(even) {
+ background-color: rgba(200, 200, 200, 0.2);
+ }
+ table tbody {
+ display: block;
+ max-height: 70vh;
+ overflow-y: auto;
+ }
+ table td,
+ table th {
+ padding: 0.25em;
+ }
+
+ table,
+ .highlight > pre,
+ pre.example {
+ max-height: 70vh;
+ margin: 1em 0;
+ padding: 1em;
+ overflow: auto;
+ font-size: 0.85rem;
+ font-family: monospace, monospace;
+ border: 1px dashed rgba(250, 100, 50, 0.5);
+ }
+
+ figure {
+ margin: 1em 0;
+ }
+ figure figcaption {
+ font-family: monospace, monospace;
+ font-size: 0.75em;
+ text-align: center;
+ color: grey;
+ }
+
+ /* KaTeX formatting */
+ .katex-display {
+ @apply max-w-4xl overflow-x-auto overflow-y-hidden;
+ }
+
+ /* Markdown Alert formatting */
+ .markdown-alert {
+ @apply border-l-4 rounded-xl px-4 py-1 my-4 shadow-md dark:shadow-none;
+ }
+ .markdown-alert.markdown-alert-caution {
+ @apply border-l-red-600 bg-red-100 dark:bg-red-900 dark:text-red-100;
+ }
+ .markdown-alert-title {
+ @apply flex items-center font-medium text-xl;
+ }
+ .markdown-alert-caution > .markdown-alert-title {
+ @apply text-red-600 fill-red-600 dark:text-red-100 dark:fill-red-100;
+ }
+ .markdown-alert.markdown-alert-tip {
+ @apply border-l-green-600 bg-green-100 dark:bg-green-900 dark:text-green-100;
+ }
+ .markdown-alert-tip > .markdown-alert-title {
+ @apply text-green-600 fill-green-600 dark:text-green-100 dark:fill-green-100;
+ }
+
+ .markdown-alert.markdown-alert-important {
+ @apply border-l-purple-600 bg-purple-100 dark:bg-purple-900 dark:text-purple-100;
+ }
+ .markdown-alert-important > .markdown-alert-title {
+ @apply text-purple-600 fill-purple-600 dark:text-purple-100 dark:fill-purple-100;
+ }
+
+ .markdown-alert.markdown-alert-note {
+ @apply border-l-blue-600 bg-blue-100 dark:bg-blue-900 dark:text-blue-100;
+ }
+ .markdown-alert-note > .markdown-alert-title {
+ @apply text-blue-600 fill-blue-600 dark:text-blue-100 dark:fill-blue-100;
+ }
+
+ .markdown-alert.markdown-alert-warning {
+ @apply border-l-yellow-600 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-100;
+ }
+ .markdown-alert-warning > .markdown-alert-title {
+ @apply text-yellow-600 fill-yellow-600 dark:text-yellow-100 dark:fill-yellow-100;
+ }
+}
diff --git a/src/routes/blog/+layout.svelte b/src/routes/blog/+layout.svelte
index 5a23c62..be3d393 100644
--- a/src/routes/blog/+layout.svelte
+++ b/src/routes/blog/+layout.svelte
@@ -1,5 +1,6 @@
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index e24be34..702288d 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -4,6 +4,7 @@
import type { PageData } from './$types.js';
// import { config } from '$lib/stores/index.js';
import { cn } from '$lib/utils.js';
+ import Article from '$lib/components/Blog/Article.svelte';
let doc = {
title: 'Test Post',
@@ -22,33 +23,6 @@
-
-
-
-
The Coredump
-
-
{doc.title}
-
-
-
- {#if doc.description}
-
- {doc.description}
-
- {/if}
-
-
-
-
-
-