Fix CSS and add framework default to code tab (#548)

* css changes

* grab state from url and default tab to that

* update link styles in callouts

Author: LadyBluenotes

src/components/Markdown.tsx

@@ -194,7 +194,7 @@ export function CodeBlock({
   return (
     <div
       className={twMerge(
-        'w-full max-w-full relative not-prose border border-gray-500/20 rounded-md [&_pre]:rounded-md [*[data-tab]_&]:only:border-0',
+        'codeblock w-full max-w-full relative not-prose border border-gray-500/20 rounded-md [&_pre]:rounded-md [*[data-tab]_&]:only:border-0',
         props.className
       )}
       style={props.style}
@@ -312,14 +312,6 @@ const options: HTMLReactParserOptions = {
 
             return <Tabs tabs={tabs} children={children as any} />
           }
-          case 'alert': {
-            const variant = attributes.variant ?? 'note'
-            return (
-              <Alert variant={variant}>
-                {domToReact(domNode.children as any, options)}
-              </Alert>
-            )
-          }
           default:
             return <div>{domToReact(domNode.children as any, options)}</div>
         }

src/components/Tabs.tsx

@@ -1,3 +1,4 @@
+import { getRouteApi } from '@tanstack/react-router'
 import * as React from 'react'
 import { getFrameworkOptions } from '~/libraries'
 
@@ -13,12 +14,15 @@ export type TabsProps = {
 }
 
 export function Tabs({ tabs, children }: TabsProps) {
+  const Route = getRouteApi()
+  const { framework } = Route.useParams()
+
   const [activeSlug, setActiveSlug] = React.useState(
-    () => tabs[0]?.slug ?? 'tab'
+    () => tabs.find((tab) => tab.slug === framework)?.slug || tabs[0].slug
   )
 
   return (
-    <div className="not-prose">
+    <div className="not-prose my-4">
       <div className="flex items-center justify-start gap-2 rounded-t-md border-b border-gray-200 dark:border-gray-700 overflow-x-auto scrollbar-hide bg-white dark:bg-[#1a1b26]">
         {tabs.map((tab) => {
           return (

src/styles/app.css

@@ -539,8 +539,16 @@ html.dark .shiki.tokyo-night span[style*='color: #51597D'] {
 }
 
 /* Markdown Alerts */
+
+.not-prose .markdown-alert {
+  @apply pt-2 pb-4 px-3 flex flex-col gap-2;
+  p {
+    @apply my-2;
+  }
+}
+
 .markdown-alert {
-  @apply border-l-4 pl-4 py-1.5 my-2 dark:bg-gray-900 rounded-r-sm;
+  @apply border-l-4 pl-4 py-1.5 my-2 bg-white dark:bg-gray-900 rounded-r-sm;
 }
 
 .markdown-alert > * {
@@ -588,13 +596,33 @@ html.dark .shiki.tokyo-night span[style*='color: #51597D'] {
 }
 
 .markdown-alert .markdown-alert-title {
-  @apply flex justify-start items-center font-medium mb-1.5;
+  @apply flex justify-start items-center font-medium;
 }
 
 .bg-clip-text {
   @apply print:text-gray-800;
 }
 
+[data-tab] {
+  @apply text-sm leading-normal;
+}
+
+[data-tab] a {
+  @apply underline font-[500];
+}
+
+[data-tab] .markdown-alert {
+  @apply bg-gray-100 dark:bg-gray-900;
+}
+
+[data-tab] > .codeblock:not(:only-child) pre {
+  @apply dark:bg-white/5! bg-black/5!;
+}
+
+[data-tab] > .markdown-alert [aria-label] svg {
+  @apply stroke-current fill-current;
+}
+
 mark {
   @apply bg-yellow-400 rounded-md px-px mx-px;
 }