Frameworks (#642)

* feat: add framework content handling and refactor tab components

* refactor: update import paths for Markdown and CodeBlock components

* fix: update hash prop in Breadcrumbs and Toc components for correct linking

* refactor: simplify props handling in rehypeCallouts and enhance pre.shiki styling

* refactor: simplify props handling in rehypeCallouts and enhance pre.shiki styling

* refactor: optimize pre styles by consolidating CSS properties and adjusting line height

* ci: apply automated fixes

* refactor: update import paths for Markdown and CodeBlock components

* fix: add height and sizes attributes to image components for better responsiveness

* fix: add height and sizes attributes to image components for better responsiveness

* refactor: update import path for MarkdownContent component

* import paths

* markdown components that were hidden from git for some reason???

* ci: apply automated fixes

* markdown components that were hidden from git for some reason???

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: LadyBluenotes

src/components/Breadcrumbs.tsx

@@ -59,7 +59,7 @@ export function Breadcrumbs({
                 <DropdownItem key={`breadcrumb-toc-${heading.id}`} asChild>
                   <Link
                     to="."
-                    hash={`#${heading.id}`}
+                    hash={heading.id}
                     style={{
                       paddingLeft: `${(heading.level - 2) * 0.5 + 0.5}rem`,
                     }}

src/components/CodeExampleCard.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Card } from '~/components/Card'
-import { CodeBlock } from '~/components/CodeBlock'
+import { CodeBlock } from '~/components/markdown'
 import { FrameworkIconTabs } from '~/components/FrameworkIconTabs'
 import type { Framework } from '~/libraries'
 

src/components/CodeExplorer.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { CodeBlock } from '~/components/CodeBlock'
+import { CodeBlock } from '~/components/markdown'
 import { FileExplorer } from './FileExplorer'
 import { InteractiveSandbox } from './InteractiveSandbox'
 import { CodeExplorerTopBar } from './CodeExplorerTopBar'

src/components/Doc.tsx

@@ -7,7 +7,7 @@ import { GamHeader } from './Gam'
 import { Toc } from './Toc'
 import { renderMarkdown } from '~/utils/markdown'
 import { DocBreadcrumb } from './DocBreadcrumb'
-import { MarkdownContent } from './MarkdownContent'
+import { MarkdownContent } from '~/components/markdown'
 import type { ConfigSchema } from '~/utils/config'
 
 type DocProps = {

src/components/FeedEntry.tsx

@@ -1,5 +1,5 @@
 import { format, formatDistanceToNow } from '~/utils/dates'
-import { Markdown } from '~/components/Markdown'
+import { Markdown } from '~/components/markdown'
 import { libraries } from '~/libraries'
 import { partners } from '~/utils/partners'
 import { twMerge } from 'tailwind-merge'

src/components/FeedEntryTimeline.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { format, formatDistanceToNow } from '~/utils/dates'
-import { Markdown } from '~/components/Markdown'
+import { Markdown } from '~/components/markdown'
 import { Card } from '~/components/Card'
 import { libraries } from '~/libraries'
 import { partners } from '~/utils/partners'

src/components/Markdown.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { MarkdownLink } from '~/components/MarkdownLink'
+import { MarkdownLink } from '~/components/markdown'
 import type { HTMLProps } from 'react'
 import parse, {
   attributesToProps,

src/components/SimpleMarkdown.tsx

@@ -20,13 +20,7 @@ type TocProps = {
   activeHeadings: Array<string>
 }
 
-export function Toc({
-  headings,
-  colorFrom,
-  colorTo,
-  textColor,
-  activeHeadings,
-}: TocProps) {
+export function Toc({ headings, textColor, activeHeadings }: TocProps) {
   return (
     <nav className="flex flex-col sticky top-[var(--navbar-height)] max-h-[calc(100dvh-var(--navbar-height))] overflow-hidden">
       <div className="py-1">
@@ -47,7 +41,7 @@ export function Toc({
             <Link
               to="."
               title={heading.id}
-              hash={`#${heading.id}`}
+              hash={heading.id}
               aria-current={activeHeadings.includes(heading.id) && 'location'}
               className={twMerge(
                 'block py-1 pl-2 border-l-2 rounded-r transition-colors duration-200 opacity-60 hover:opacity-100 hover:bg-gray-500/10',

src/components/Toc.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { FeedEntry } from '~/components/FeedEntry'
-import { Markdown } from '~/components/Markdown'
+import { Markdown } from '~/components/markdown'
 import { libraries } from '~/libraries'
 import { partners } from '~/utils/partners'
 import { currentUserQueryOptions } from '~/queries/auth'