dfsdf

src/layouts/MarkdownPostLayout.astro

@@ -0,0 +1,102 @@
+---
+// pages/whatever.astro
+import Layout from "../layouts/Layout.astro";
+import GlobalLogo from "../components/GlobalLogo.astro";
+const { frontmatter } = Astro.props;
+---
+
+<Layout>
+    <GlobalLogo />
+    <div class="mb-32">
+        <div
+            class="p-4 flex flex-col m-auto max-w-[700px] font-gohu leading-none
+      prose-p:mb-4 prose-headings:my-1 prose-headings:text-xl prose-headings:font-bold prose-headings:text-c_mauve prose-ol:list-decimal prose-ol:list-inside
+      prose-ol:mb-4 prose-ul:ml-4 prose-ul:list-disc prose-ul:mb-4 prose-ul:flex-col prose-hr:mt-8 prose-hr:mb-6 prose-hr:border-c_surface0
+      prose-a:text-c_mauve prose-a:decoration-dotted hover:prose-a:underline prose-pre:my-4 prose-pre:py-4 prose-pre:px-4
+      marker:text-c_mauve prose-code:font-gohu prose-img:my-4 prose-img:w-screen"
+        >
+            <a
+                tabindex="0"
+                href="../../"
+                class="flex w-max text-c_mauve decoration-dotted hover:underline hover:cursor-pointer mb-4"
+                >« Back<br /><br /></a
+            >
+            <h1 class="font-bold text-xl">
+                {frontmatter.title}
+            </h1>
+            <article class="">
+                <slot />
+            </article>
+            <p>~{frontmatter.author}</p>
+        </div>
+    </div>
+</Layout>
+
+<style is:global>
+    /* =========================
+   Strong overrides for Tailwind Typography / Shiki / Astro codeblocks
+   ========================= */
+
+    /* Target the usual suspects:
+   - Tailwind Typography uses .prose pre
+   - Shiki / Astro often emit pre.ast-code or pre[class*="language-"]
+   We make these global and high-specificity so they win.
+*/
+
+    html .prose pre,
+    html .prose pre code,
+    pre[class*="language-"],
+    code[class*="language-"],
+    pre.ast-code,
+    .astro-code,
+    .shiki pre,
+    pre {
+        /* allow wrapping of long lines */
+        white-space: pre-wrap !important; /* allow wrapping while preserving whitespace */
+        word-break: break-word !important; /* break long words/identifiers if needed */
+        overflow-wrap: anywhere !important; /* extra aggressive wrap */
+        max-width: 100% !important; /* don't overflow container */
+        box-sizing: border-box !important;
+    }
+
+    /* Keep block semantics for code content */
+    html .prose pre code,
+    pre[class*="language-"] > code {
+        display: block !important;
+    }
+
+    /* Keep a horizontal fallback for extremely long uninterrupted strings
+   (URLs/base64/etc.), but wrapping will be used in most cases. */
+    html .prose pre {
+        overflow-x: auto !important;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    /* Optional: nicer padding and visual treatment */
+    html .prose pre {
+        padding: 1rem !important;
+        border-radius: 0.5rem !important;
+        background-color: rgba(
+            0,
+            0,
+            0,
+            0.03
+        ) !important; /* tweak to taste or remove */
+    }
+
+    /* Inline code (inside paragraphs) — keep the normal inline look, don't force wrap */
+    html .prose code:not(pre code) {
+        white-space: normal !important;
+        overflow: visible !important;
+        word-break: normal !important;
+    }
+
+    /* If you're using tailwind's 'prose-sm' / modifiers or custom wrappers, increase specificity */
+    html body .prose pre,
+    html body .prose pre code {
+        /* repeat important rules to be extra sure */
+        white-space: pre-wrap !important;
+        word-break: break-word !important;
+        overflow-wrap: anywhere !important;
+    }
+</style>