diff --git a/bun.lockb b/bun.lockb index f469219..b6fa16d 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 8cfbb03..4fae02b 100644 --- a/package.json +++ b/package.json @@ -10,15 +10,15 @@ "astro": "astro" }, "dependencies": { - "@astrojs/check": "0.5.2", - "@astrojs/mdx": "2.1.1", - "@astrojs/tailwind": "5.1.0", + "@astrojs/check": "0.9.4", + "@astrojs/mdx": "4.0.2", + "@astrojs/tailwind": "5.1.3", "@fontsource/dm-sans": "5.1.0", - "astro": "4.16.1", + "astro": "5.1.0", "astro-seo": "0.8.4", "classnames": "2.5.1", - "marked": "12.0.2", - "tailwindcss": "3.4.1", - "typescript": "5.3.3" + "marked": "15.0.4", + "tailwindcss": "3.4.17", + "typescript": "5.7.2" } } diff --git a/src/pages/index.astro b/src/pages/index.astro index a28b0ca..0cbc221 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,5 +1,5 @@ --- -import { marked, Renderer } from "marked"; +import { marked, Renderer, type Tokens } from "marked"; import cx from "classnames"; import Layout from "../layout/Layout.astro"; @@ -12,14 +12,14 @@ import { getReadMeData } from "../utils/markdown"; export const prerender = true; // Shared renderers -const iconImageRenderer: Renderer["image"] = (href, title, text) => { +const iconImageRenderer: Renderer["image"] = ({ href, title, text }) => { return `${text}`; }; -const responsiveUrlRenderer: Renderer["link"] = (href, title, text) => { +const responsiveUrlRenderer: Renderer["link"] = ({ href, title, text }) => { return `Website`; }; const tableRowRenderer: Renderer["tablerow"] = (content) => { - return `${content}`; + return `${content.text}`; }; const getAlignStyle = (align: string | null) => { return align @@ -31,45 +31,80 @@ const getAlignStyle = (align: string | null) => { : null; }; -const renderContent = ( - content: string, - flags: { header: boolean; align: string | null } -) => { - if (flags.header) { +const renderContent = ({ + text, + header, +}: { + text: string; + header: boolean; + align: string | null; +}) => { + if (header) { // Hide logo and features headers - if (content === "Logo" || content === "Features") { + if (text === "Logo" || text === "Features") { return ""; } } - return content; + return text; }; +const renderTableCells = ( + cells: Tokens.TableCell[], + renderer = defaultRenderer +) => cells.map((cell) => renderer.tablecell(cell)).join(""); +const renderTableRows = ( + rows: Tokens.TableCell[][], + renderer = defaultRenderer +) => rows.map((row) => renderTableCells(row, renderer)).join(""); + const defaultRenderer = new marked.Renderer(); defaultRenderer.image = iconImageRenderer; defaultRenderer.tablerow = tableRowRenderer; -defaultRenderer.table = (header, body) => { - return `
${header}${body}
`; -}; -defaultRenderer.tablecell = (content, flags) => { +defaultRenderer.tablecell = (cell) => { + let content: string; + // Hide logo header + if (cell.header && cell.text === "Logo") { + content = ""; + } else { + content = websitesRenderer.parser.parseInline(cell.tokens); + } + return ``; + getAlignStyle(cell.align) + )}">${content}`; +}; +defaultRenderer.table = ({ header, rows }) => { + return `
+ ${renderTableCells(header)} + ${renderTableRows(rows)} +
`; }; const websitesRenderer = new marked.Renderer(); websitesRenderer.image = iconImageRenderer; websitesRenderer.link = responsiveUrlRenderer; websitesRenderer.tablerow = tableRowRenderer; -websitesRenderer.table = (header, body) => { - return `
${header}${body}
`; +websitesRenderer.table = ({ header, rows }) => { + return `
+ ${renderTableCells(header, websitesRenderer)} + ${renderTableRows(rows, websitesRenderer)} +
`; }; -websitesRenderer.tablecell = (content, flags) => { +websitesRenderer.tablecell = (cell) => { + let content: string; + // Hide logo and features headers + if (cell.header && ["Logo", "Features"].includes(cell.text)) { + content = ""; + } else { + content = websitesRenderer.parser.parseInline(cell.tokens); + } + return ``; + getAlignStyle(cell.align) + )}">${content}`; }; const { platforms, websites, developerTools, securityKeys } = getReadMeData();