From 90c0a374c2d0432cc9b0b44a5d78c79441f87d05 Mon Sep 17 00:00:00 2001 From: flooorianflo Date: Wed, 13 Sep 2023 16:49:34 +0200 Subject: [PATCH 01/89] feat: remove old markdown logic --- inlang/source-code/website/package.json | 3 +- .../website/src/services/markdown/README.md | 3 - .../website/src/services/markdown/index.ts | 9 - .../src/services/markdown/src/Markdown.tsx | 13 - .../src/services/markdown/src/config.ts | 135 --- .../services/markdown/src/nodes/Document.tsx | 19 - .../src/services/markdown/src/nodes/Fence.tsx | 87 -- .../services/markdown/src/nodes/Heading.tsx | 133 --- .../src/services/markdown/src/nodes/Link.tsx | 45 - .../src/services/markdown/src/nodes/README.md | 1 - .../services/markdown/src/parseMarkdown.ts | 71 -- .../markdown/src/renderToElement.test.tsx | 50 - .../services/markdown/src/renderToElement.ts | 90 -- .../markdown/src/tags/BadgeGenerator.tsx | 63 - .../services/markdown/src/tags/Callout.tsx | 25 - .../src/services/markdown/src/tags/Figure.tsx | 16 - .../services/markdown/src/tags/QuickLinks.tsx | 80 -- .../src/services/markdown/src/tags/README.md | 1 - .../src/services/markdown/src/tags/Video.tsx | 29 - package-lock.json | 1010 +++++++++++++++++ 20 files changed, 1012 insertions(+), 871 deletions(-) delete mode 100644 inlang/source-code/website/src/services/markdown/README.md delete mode 100644 inlang/source-code/website/src/services/markdown/src/Markdown.tsx delete mode 100644 inlang/source-code/website/src/services/markdown/src/config.ts delete mode 100644 inlang/source-code/website/src/services/markdown/src/nodes/Document.tsx delete mode 100644 inlang/source-code/website/src/services/markdown/src/nodes/Fence.tsx delete mode 100644 inlang/source-code/website/src/services/markdown/src/nodes/Heading.tsx delete mode 100644 inlang/source-code/website/src/services/markdown/src/nodes/Link.tsx delete mode 100644 inlang/source-code/website/src/services/markdown/src/nodes/README.md delete mode 100644 inlang/source-code/website/src/services/markdown/src/parseMarkdown.ts delete mode 100644 inlang/source-code/website/src/services/markdown/src/renderToElement.test.tsx delete mode 100644 inlang/source-code/website/src/services/markdown/src/renderToElement.ts delete mode 100644 inlang/source-code/website/src/services/markdown/src/tags/BadgeGenerator.tsx delete mode 100644 inlang/source-code/website/src/services/markdown/src/tags/Callout.tsx delete mode 100644 inlang/source-code/website/src/services/markdown/src/tags/Figure.tsx delete mode 100644 inlang/source-code/website/src/services/markdown/src/tags/QuickLinks.tsx delete mode 100644 inlang/source-code/website/src/services/markdown/src/tags/README.md delete mode 100644 inlang/source-code/website/src/services/markdown/src/tags/Video.tsx diff --git a/inlang/source-code/website/package.json b/inlang/source-code/website/package.json index 346f1594bf..3edf0d97a0 100644 --- a/inlang/source-code/website/package.json +++ b/inlang/source-code/website/package.json @@ -30,7 +30,6 @@ "@solid-primitives/intersection-observer": "^2.0.5", "@solidjs/meta": "0.28.2", "@tiptap/core": "2.0.3", - "@tiptap/suggestion": "2.0.3", "@tiptap/extension-document": "2.0.3", "@tiptap/extension-floating-menu": "2.0.3", "@tiptap/extension-hard-break": "2.0.3", @@ -41,6 +40,7 @@ "@tiptap/extension-text": "2.0.3", "@tiptap/pm": "2.0.3", "@tiptap/starter-kit": "2.0.3", + "@tiptap/suggestion": "2.0.3", "@types/flat": "^5.0.2", "@zag-js/checkbox": "^0.2.1", "@zag-js/menu": "^0.2.1", @@ -58,6 +58,7 @@ "mermaid": "^9.3.0", "octokit": "^2.0.14", "prosemirror-history": "^1.3.0", + "remark": "14.0.3", "shiki": "^0.11.1", "sirv": "^2.0.2", "solid-js": "1.7.11", diff --git a/inlang/source-code/website/src/services/markdown/README.md b/inlang/source-code/website/src/services/markdown/README.md deleted file mode 100644 index fb63c3a4df..0000000000 --- a/inlang/source-code/website/src/services/markdown/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# services/markdown - -Uses [Stripe's markdoc](https://markdoc.dev/). diff --git a/inlang/source-code/website/src/services/markdown/index.ts b/inlang/source-code/website/src/services/markdown/index.ts index 7f5ffe7307..e69de29bb2 100644 --- a/inlang/source-code/website/src/services/markdown/index.ts +++ b/inlang/source-code/website/src/services/markdown/index.ts @@ -1,9 +0,0 @@ -/** - * -------------------------------- - * This index file exports code that is supposed - * to be used outside of this directory. - * -------------------------------- - */ - -export { parseMarkdown } from "./src/parseMarkdown.js" -export { Markdown } from "./src/Markdown.jsx" diff --git a/inlang/source-code/website/src/services/markdown/src/Markdown.tsx b/inlang/source-code/website/src/services/markdown/src/Markdown.tsx deleted file mode 100644 index 8a3aee3873..0000000000 --- a/inlang/source-code/website/src/services/markdown/src/Markdown.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type * as Markdoc from "@markdoc/markdoc" -import { renderToElement } from "./renderToElement.js" -import { components } from "./config.js" - -/** - * This component renders a Markdoc renderable tree. - * - * @example - * - */ -export function Markdown(props: { renderableTree: Markdoc.RenderableTreeNode }) { - return <>{renderToElement(props.renderableTree, { components })} -} diff --git a/inlang/source-code/website/src/services/markdown/src/config.ts b/inlang/source-code/website/src/services/markdown/src/config.ts deleted file mode 100644 index 4630b6c868..0000000000 --- a/inlang/source-code/website/src/services/markdown/src/config.ts +++ /dev/null @@ -1,135 +0,0 @@ -import type { Config } from "@markdoc/markdoc" -import type { SemanticColorTokens } from "../../../../tailwind.config.cjs" -import { icons } from "../../../components/Icon.jsx" -import { Fence } from "./nodes/Fence.jsx" -import { Heading } from "./nodes/Heading.jsx" -import { Callout } from "./tags/Callout.jsx" -import { Figure } from "./tags/Figure.jsx" -import { QuickLink, QuickLinks } from "./tags/QuickLinks.jsx" -import { Link } from "./nodes/Link.jsx" -import { Document } from "./nodes/Document.jsx" -import { Video } from "./tags/Video.jsx" -import { BadgeGenerator } from "./tags/BadgeGenerator.jsx" - -/** - * The components that render custom nodes or tags - */ -export const components = { - Callout, - Fence, - Figure, - QuickLink, - QuickLinks, - Link, - Heading, - Document, - Video, - BadgeGenerator, -} - -/** - * The Markdoc configuration. - */ -export const config: Config = { - /** - * Custom nodes for Markdoc. - * - * See https://markdoc.dev/docs/nodes - */ - nodes: { - document: { - render: "Document", - attributes: { - frontmatter: { - type: "String", - }, - }, - }, - fence: { - render: "Fence", - attributes: { - language: { - type: "String", - }, - content: { - required: true, - type: "String", - }, - }, - }, - link: { - render: "Link", - attributes: { - href: { - required: true, - type: "String", - }, - }, - }, - heading: { - render: "Heading", - attributes: { - level: { - required: true, - type: "Number", - }, - }, - }, - }, - /** - * Custom tags for MarkDoc. - * - * See https://markdoc.dev/docs/tags. - */ - tags: { - Callout: { - attributes: { - variant: { - type: "String", - matches: ["info", "success", "warning", "danger"] satisfies SemanticColorTokens, - errorLevel: "error", - }, - }, - render: "Callout", - }, - Figure: { - selfClosing: true, - attributes: { - src: { type: "String" }, - alt: { type: "String" }, - caption: { type: "String" }, - height: { type: "String" }, - width: { type: "String" }, - }, - render: "Figure", - }, - QuickLinks: { - render: "QuickLinks", - }, - QuickLink: { - selfClosing: true, - render: "QuickLink", - attributes: { - title: { type: "String" }, - description: { type: "String" }, - icon: { type: "String", matches: Object.keys(icons) }, - logo: { type: "String" }, - href: { type: "String" }, - }, - }, - Video: { - selfClosing: true, - render: "Video", - attributes: { - src: { type: "String", required: true }, - }, - }, - Registry: { - selfClosing: true, - render: "Registry", - }, - BadgeGenerator: { - render: "BadgeGenerator", - }, - }, -} diff --git a/inlang/source-code/website/src/services/markdown/src/nodes/Document.tsx b/inlang/source-code/website/src/services/markdown/src/nodes/Document.tsx deleted file mode 100644 index cf974bbc77..0000000000 --- a/inlang/source-code/website/src/services/markdown/src/nodes/Document.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { JSXElement } from "solid-js" - -export function Document(props: { children: JSXElement }) { - // the style comes from https://tailwindcss.com/docs/typography-plugin - return ( -
- {props.children} -
- ) -} - -const codeStyle = - "prose-code:py-0.5 prose-code:px-1 prose-code:bg-secondary-container prose-code:text-on-secondary-container prose-code:font-medium prose-code:rounded prose-code:before:hidden prose-code:after:hidden" - -const fontStyle = - "prose-p:text-base prose-sm prose-slate prose-li:py-1 prose-li:text-base prose-headings:font-semibold prose-headings:text-active-info prose-p:leading-7 prose-p:opacity-90 prose-h1:text-4xl prose-h2:text-2xl prose-h2:border-t prose-h2:border-surface-3 prose-h2:pt-8 prose-h2:pb-4 prose-h3:text-[19px] prose-h3:pb-2 prose-table:text-base" diff --git a/inlang/source-code/website/src/services/markdown/src/nodes/Fence.tsx b/inlang/source-code/website/src/services/markdown/src/nodes/Fence.tsx deleted file mode 100644 index 94f7296501..0000000000 --- a/inlang/source-code/website/src/services/markdown/src/nodes/Fence.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import { createResource, Match, Suspense, Switch } from "solid-js" -import { getHighlighter, type Highlighter, type Lang, setCDN } from "shiki" -import copy from "clipboard-copy" -import { showToast } from "#src/components/Toast.jsx" - -// importing themes and language colors from a cdn -setCDN("https://cdn.jsdelivr.net/npm/shiki/") - -/** - * Custom fence blocks. - * - * Fence blocks are usually code blocks. - * ''' - * those blocks - * ''' - */ -export function Fence(props: { language?: string; content: string }) { - return ( - - - Mermaid diagrams are temporarly not rendered until - https://github.com/inlang/monorepo/issues/1302 is implemented. - {/* */} - - - - - - ) -} - -const highlighter: Highlighter = await getHighlighter({ - theme: "github-dark-dimmed", - // preventing layout shift on client side be pre-fecthing - // js and ts by default. - langs: ["js", "ts", "json", "html", "md", "sh"], -}) - -function SyntaxHighlight(props: Parameters[0]) { - // dynamically loading syntax highlighting for the specified language. - const [code] = createResource(async () => { - if ( - props.language && - highlighter.getLoadedLanguages().includes(props.language as Lang) === false - ) { - await highlighter.loadLanguage(props.language as Lang) - } - const code = highlighter.codeToHtml(props.content, { - lang: props.language, - }) - return code - }) - - return ( - -
-
-
{ - copy(props.content), - showToast({ variant: "success", title: "Copy to clipboard", duration: 3000 }) - }} - class="text-base absolute top-0 right-0 py-2 px-4 text-info hover:text-hover-info cursor-pointer" - > - Copy -
-
- - ) -} - -// function MermaidDiagram(props: Parameters[0]) { -// onMount(() => { -// // @ts-ignore -// mermaid.init() -// }) -// return ( -//
-// 
{props.content}
-//
-// ) -// } diff --git a/inlang/source-code/website/src/services/markdown/src/nodes/Heading.tsx b/inlang/source-code/website/src/services/markdown/src/nodes/Heading.tsx deleted file mode 100644 index e017d90f97..0000000000 --- a/inlang/source-code/website/src/services/markdown/src/nodes/Heading.tsx +++ /dev/null @@ -1,133 +0,0 @@ -import { type JSXElement, Show, createSignal } from "solid-js" -import copy from "clipboard-copy" -import { showToast } from "#src/components/Toast.jsx" - -/** - * Custom Link nodes. - * - * @example - * [title](href) - */ - -export function Heading(props: { level: number; children: JSXElement }) { - return ( - - -

- {props.children} -

- - -

- {props.children} -

- - -

- {props.children} -

- - -

- {props.children} -

- - -

- {props.children} -

- - - ) -} - -const headingStyle = "font-semibold text-active-info" - -const Wrapper = (props: { children: JSXElement }) => { - return
{props.children}
-} - -const CopyWrapper = (props: { children: JSXElement }) => { - const [isHovered, setIsHovered] = createSignal(false) - let element: HTMLDivElement | ((el: HTMLDivElement) => void) | undefined - - return ( -
setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} - ref={(el) => { - if (typeof el === "function") { - element = el - } else if (el instanceof HTMLDivElement) { - element = el - } - }} - id={ - props.children - ?.toString() - .replace(" ", "-") - .replace("#", "") - .toLowerCase() - .includes("native code") - ? typeof element === "object" && element instanceof HTMLDivElement - ? element.innerText - ?.toString() - .replace("#", "") - .replaceAll("/", "") - .replaceAll(/\(.*?\)/g, "") - .replaceAll(" ", "-") - .replace(/-$/, "") - .toLowerCase() - .trim() // Trim the value to remove any leading/trailing whitespace - : "" - : props.children?.toString().replaceAll(" ", "-").toLowerCase() - } - onClick={() => { - if (typeof element === "object" && element instanceof HTMLDivElement) { - const headlineText = props.children - ?.toString() - .replace(" ", "-") - .replace("#", "") - .toLowerCase() - .includes("native code") - ? (element?.innerText - ?.toString() - .replaceAll(" ", "-") - .replaceAll("/", "") - .replaceAll(/\(.*?\)/g, "") - .replaceAll("#", "") - .replace(/-$/, "") - .toLowerCase() as string) - : (props.children - ?.toString() - .replaceAll(" ", "-") - .replace(/-$/, "") - .toLowerCase() as string) - - const link = - document.location.protocol + - "//" + - document.location.host + - document.location.pathname + - "#" + - headlineText - - copy(link) - window.history.pushState({}, "", link) - } - showToast({ variant: "success", title: "Copied link to clipboard", duration: 3000 }) - }} - > - {props.children} -
- # -
-
- ) -} diff --git a/inlang/source-code/website/src/services/markdown/src/nodes/Link.tsx b/inlang/source-code/website/src/services/markdown/src/nodes/Link.tsx deleted file mode 100644 index 41fd9f41cd..0000000000 --- a/inlang/source-code/website/src/services/markdown/src/nodes/Link.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { useI18n } from "@solid-primitives/i18n" -import { defaultLanguage } from "#src/renderer/_default.page.route.js" -import { type JSXElement, Match, Switch } from "solid-js" -import MaterialSymbolsArrowOutward from "~icons/material-symbols/arrow-outward" - -/** - * Custom Link nodes. - * - * @example - * [title](href) - */ -export function Link(props: { href: string; children: JSXElement }) { - /** whether a link is an external link */ - const isExternal = () => props.href.startsWith("http") - const [, { locale }] = useI18n() - - const getLocale = () => { - const language = locale() || defaultLanguage - return language !== defaultLanguage ? "/" + language : "" - } - - return ( - - - - {props.children} - {/* using non-rounded version to increase readability on smaller font settings */} - - - - - - {props.children} - - - - ) -} diff --git a/inlang/source-code/website/src/services/markdown/src/nodes/README.md b/inlang/source-code/website/src/services/markdown/src/nodes/README.md deleted file mode 100644 index bd067b9618..0000000000 --- a/inlang/source-code/website/src/services/markdown/src/nodes/README.md +++ /dev/null @@ -1 +0,0 @@ -Nodes contain components that define how markdown built-in "nodes" like `# header` or `[link](href)` are rendered. Read https://markdoc.dev/docs/nodes. diff --git a/inlang/source-code/website/src/services/markdown/src/parseMarkdown.ts b/inlang/source-code/website/src/services/markdown/src/parseMarkdown.ts deleted file mode 100644 index 35782f1c78..0000000000 --- a/inlang/source-code/website/src/services/markdown/src/parseMarkdown.ts +++ /dev/null @@ -1,71 +0,0 @@ -import Markdoc from "@markdoc/markdoc" -import type { TSchema } from "@sinclair/typebox" -import { Value } from "@sinclair/typebox/value" -import { parse as parseYaml } from "yaml" -import { config } from "./config.js" - -/** - * Parses a Markdoc document. - * - * Provide the markdown document as a string, the - * function returns the a renderable tree and - * the [frontmatter](https://markdoc.dev/docs/frontmatter) - * if no error occured. If an error occured, renderableTree is undefined. - * - * The renderable tree can be passed to `renderToElement` - * - * @example - * const renderableTree = parseMarkdown(args) - * const Element = renderToElement(args) - * - * - */ -export function parseMarkdown(args: { - text: string - frontmatterSchema?: FrontmatterSchema -}): { - frontmatter: FrontmatterSchema - renderableTree?: Markdoc.RenderableTreeNode - error?: string -} { - const ast = Markdoc.parse(args.text) - const frontmatter = parseYaml(ast.attributes.frontmatter ?? "") - if (args.frontmatterSchema && Value.Check(args.frontmatterSchema, frontmatter) === false) { - const errors = [...Value.Errors(args.frontmatterSchema, frontmatter)] - throw Error(`Invalid frontmatter for ${args.text.slice(0, 100)}...` + errors.map(beautifyError)) - } - const errors = Markdoc.validate(ast, config) - if (errors.length > 0) { - return { - frontmatter: frontmatter, - error: errors.map((object) => beautifyError(object.error)).join("\n"), - } - } - const renderableTree = Markdoc.transform(ast, { - // passing the frontmatter to variables - // see https://markdoc.dev/docs/frontmatter#parse-the-frontmatter - variables: { - frontmatter, - }, - ...config, - }) - return { - frontmatter: frontmatter, - renderableTree, - } -} - -/** - * Beautifies a Markdoc error. - * - * A Marcdoc ValidationError returns an object. Logging - * the object to the console is not very helpful. This - * function returns a string that is easier to read. - */ -function beautifyError(error: object): string { - // for now, simply stringify the error - // TODO: - // - add information about the name and path of the document - // - add information about the line and column of the error - return JSON.stringify(error, undefined, 4) -} diff --git a/inlang/source-code/website/src/services/markdown/src/renderToElement.test.tsx b/inlang/source-code/website/src/services/markdown/src/renderToElement.test.tsx deleted file mode 100644 index b85b212b91..0000000000 --- a/inlang/source-code/website/src/services/markdown/src/renderToElement.test.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import type { Config } from "@markdoc/markdoc" -import type { JSXElement } from "solid-js" -import Markdoc from "@markdoc/markdoc" -import { describe, expect, it } from "vitest" -import { renderToElement } from "./renderToElement.js" -import { renderToStringAsync } from "solid-js/web" - -describe("markdownToElement()", () => { - it("should return html when combined with renderToString", async () => { - const ast = Markdoc.parse(mockValidMarkdown) - const content = Markdoc.transform(ast, mockMarkdocConfig) - const result = await renderToStringAsync(() => - renderToElement(content, { components: { Callout } }), - ) - expect(result).toBeTypeOf("string") - }) -}) - -const mockValidMarkdown = ` ---- -title: Getting Started ---- - -# Hello from documentation - -{% callout type="note" %} -Tags are composable! -{% /callout %} - -` - -const mockMarkdocConfig: Config = { - tags: { - callout: { - attributes: { - title: { type: "String" }, - type: { - type: "String", - matches: ["note", "warning"], - errorLevel: "critical", - }, - }, - render: "Callout", - }, - }, -} - -function Callout(props: { children: JSXElement }) { - return
{props.children}
-} diff --git a/inlang/source-code/website/src/services/markdown/src/renderToElement.ts b/inlang/source-code/website/src/services/markdown/src/renderToElement.ts deleted file mode 100644 index f5d4850fb8..0000000000 --- a/inlang/source-code/website/src/services/markdown/src/renderToElement.ts +++ /dev/null @@ -1,90 +0,0 @@ -/** - * ------------------------------------- - * This code is a plugin for markdoc that renders solid components. - * - * Read more about https://markdoc.dev/ - * ------------------------------------- - */ - -import type { RenderableTreeNodes, Scalar } from "@markdoc/markdoc" -import type { Component, JSXElement } from "solid-js" -import { createComponent } from "solid-js" -import { Dynamic } from "solid-js/web" - -/** - * Renders a tree node to a solid element. - * - * Can be combined with Solids `renderToStringAsync` function - * to render the element to static html. Important: The `renderToElement` - * function must be called within the closure of `renderToStringAsync` - * if no hydration occurs. Otherwise, Solid can't render the Suspense - * component(s) like lazy loading Icons. - * - * @example - * const html = await renderToStringAsync(() => renderToElement(args)); - */ -export function renderToElement( - node: RenderableTreeNodes, - args: { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - components?: Record> - }, -): JSXElement { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - function deepRender(value: any): any { - if (value === undefined || typeof value !== "object") { - return value - } - - if (Array.isArray(value)) { - return value.map((item) => deepRender(item)) - } - - if (value.$$mdType === "Tag") { - return render(value) - } - - if (typeof value !== "object") { - return value - } - - const output: Record = {} - for (const [k, v] of Object.entries(value)) output[k] = deepRender(v) - return output - } - - function render(node: RenderableTreeNodes): JSXElement | null { - if (Array.isArray(node)) { - return createComponent(Fragment, { children: node.map(render) }) - } - - if (node === null || typeof node !== "object") { - return node - } - - const { name, attributes = {}, children = [] } = node - - const attr = - // eslint-disable-next-line unicorn/no-null - Object.keys(attributes).length === 0 ? null : deepRender(attributes) - - if (args.components?.[name]) { - return createComponent(args.components[name] as Component, { - ...attr, - children: children.map(render), - }) - } - - return Dynamic({ - component: name, - children: children.map(render), - ...attr, - }) - } - return render(node) -} - -function Fragment(props: { children: JSXElement }) { - // eslint-disable-next-line solid/reactivity - return props.children -} diff --git a/inlang/source-code/website/src/services/markdown/src/tags/BadgeGenerator.tsx b/inlang/source-code/website/src/services/markdown/src/tags/BadgeGenerator.tsx deleted file mode 100644 index 51843dcf76..0000000000 --- a/inlang/source-code/website/src/services/markdown/src/tags/BadgeGenerator.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { showToast } from "#src/components/Toast.jsx" -import { type Accessor, createSignal } from "solid-js" -import copy from "clipboard-copy" - -export function BadgeGenerator() { - const [textValue, setTextValue] = createSignal("") - - const getBadge = (url: string) => { - const repo = url.split("github.com/")[1] - if (repo) { - return `[![translation badge](https://inlang.com/badge?url=github.com/${repo})](https://inlang.com/editor/github.com/${repo}?ref=badge)` - } else { - showToast({ variant: "danger", title: "The repository url was not correct", duration: 3000 }) - return url - } - } - - return ( -
-
- -
- -
- ) -} - -interface InputProps { - placeholder: string - textValue: Accessor - setTextValue: (value: string) => void -} - -const Input = (props: InputProps) => { - return ( -
- props.setTextValue(e.currentTarget.value)} - /> -
- ) -} diff --git a/inlang/source-code/website/src/services/markdown/src/tags/Callout.tsx b/inlang/source-code/website/src/services/markdown/src/tags/Callout.tsx deleted file mode 100644 index f5e93b1894..0000000000 --- a/inlang/source-code/website/src/services/markdown/src/tags/Callout.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Icon } from "#src/components/Icon.jsx" -import type { JSXElement } from "solid-js" -import type { SemanticColorTokens } from "../../../../../tailwind.config.cjs" - -// children get a default style use content for custome style -export function Callout(props: { variant: SemanticColorTokens[number]; children: JSXElement }) { - return ( -
- {/* not an h3 to escape prosing https://tailwindcss.com/docs/typography-plugin */} -
- - {props.variant.toUpperCase()} -
- {/* wrapped in a div and prose to re-initialize prosing and thereby remove - unexpected paddings and margins */} -
{props.children}
-
- ) -} diff --git a/inlang/source-code/website/src/services/markdown/src/tags/Figure.tsx b/inlang/source-code/website/src/services/markdown/src/tags/Figure.tsx deleted file mode 100644 index edf591ee01..0000000000 --- a/inlang/source-code/website/src/services/markdown/src/tags/Figure.tsx +++ /dev/null @@ -1,16 +0,0 @@ -export function Figure(props: { - src: string - alt: string - caption: string - height: string - width: string -}) { - return ( -
-
- {props.alt} -
-
{props.caption}
-
- ) -} diff --git a/inlang/source-code/website/src/services/markdown/src/tags/QuickLinks.tsx b/inlang/source-code/website/src/services/markdown/src/tags/QuickLinks.tsx deleted file mode 100644 index 4aa26164e6..0000000000 --- a/inlang/source-code/website/src/services/markdown/src/tags/QuickLinks.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { Icon, type AvailableIcon } from "#src/components/Icon.jsx" -import Nextjs from "#src/pages/index/sections/02-integration/assets/nextjs.jsx" -import Svelte from "#src/pages/index/sections/02-integration/assets/svelte.jsx" -import Vuejs from "#src/pages/index/sections/02-integration/assets/vuejs.jsx" -import Reactjs from "#src/pages/index/sections/02-integration/assets/reactjs.jsx" -import Nuxt from "#src/pages/index/sections/02-integration/assets/nuxt.jsx" -import { type JSXElement, Show } from "solid-js" -import { defaultLanguage } from "#src/renderer/_default.page.route.js" -import { useI18n } from "@solid-primitives/i18n" - -type BrandLogo = "next" | "vue" | "react" | "svelte" | "nuxt" - -export function QuickLinks(props: { children: JSXElement[] }) { - return ( -
- {props.children} -
- ) -} - -export function QuickLink(props: { - title: string - description: string - href: string - icon?: AvailableIcon - logo?: BrandLogo -}) { - const [, { locale }] = useI18n() - - const getLocale = () => { - const language = locale() || defaultLanguage - return language !== defaultLanguage ? "/" + language : "" - } - - return ( -
-
-
- - - - - - - - - - - - - - - - - - - - -
- -

- - - {props.title} - -

- -

{props.description}

- -
-
- ) -} diff --git a/inlang/source-code/website/src/services/markdown/src/tags/README.md b/inlang/source-code/website/src/services/markdown/src/tags/README.md deleted file mode 100644 index 7b2ddbcaf0..0000000000 --- a/inlang/source-code/website/src/services/markdown/src/tags/README.md +++ /dev/null @@ -1 +0,0 @@ -Tags contain components that define how custom tags like `{% Callout %}` are rendered. Read more https://markdoc.dev/docs/tags. diff --git a/inlang/source-code/website/src/services/markdown/src/tags/Video.tsx b/inlang/source-code/website/src/services/markdown/src/tags/Video.tsx deleted file mode 100644 index 40e36d7c8f..0000000000 --- a/inlang/source-code/website/src/services/markdown/src/tags/Video.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { assertUsage } from "#src/services/assert-usage/index.js" - -export function Video(props: { src: string }) { - assertUsage( - // eslint-disable-next-line solid/reactivity - props.src.includes("youtu.be") || props.src.includes("youtube"), - "Video tag only supports youtube videos", - ) - /** - * The youtube link with a prefixed embed - */ - const embedSrc = () => { - if (props.src.includes("/embed/")) { - return props.src - } - return "https://www.youtube.com/embed" + new URL(props.src).pathname - } - - return ( -
-