mehedi
/
skilld-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: code block overflow

This commit is contained in:
mehedi-hasan 2024-04-08 02:01:06 +06:00
parent 48d007f079
commit 8a6d8dbfff
7 changed files with 646 additions and 443 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1030
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

27
src/app/(dashboard)/dashboard/(task)/task/[...taskId]/page.tsx
View File

@ -5,11 +5,6 @@ import {
ResizablePanel, ResizablePanel,
ResizablePanelGroup, ResizablePanelGroup,
} from "@/components/ui/resizable"; } from "@/components/ui/resizable";
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import rehypePrettyCode from "rehype-pretty-code";
import markdownStyles from "@/styles/markdown-styles.module.css"; import markdownStyles from "@/styles/markdown-styles.module.css";
import { tutorialData } from "@/constants/tutorial-data"; import { tutorialData } from "@/constants/tutorial-data";
import { notFound } from "next/navigation"; import { notFound } from "next/navigation";
@ -18,17 +13,7 @@ import Link from "next/link";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import EditorWindow from "@/components/task/editor-window"; import EditorWindow from "@/components/task/editor-window";
import { LANGUAGE_VERSIONS } from "@/constants/language-options"; import { LANGUAGE_VERSIONS } from "@/constants/language-options";
import { markdownToHtml } from "@/lib/markdown-to-html";
async function main(tutorialCode: string) {
const file = await unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypePrettyCode, {})
.use(rehypeStringify)
.process(tutorialCode);
return file;
}
const languages = Object.keys(LANGUAGE_VERSIONS); const languages = Object.keys(LANGUAGE_VERSIONS);
@ -53,7 +38,7 @@ const Page = async ({ params }: { params: { taskId: string[] } }) => {
notFound(); notFound();
} }
const code = await main(tutorial?.content || ""); const content = await markdownToHtml(tutorial?.content || "");
return ( return (
<> <>
<div className="md:hidden w-full h-full"> <div className="md:hidden w-full h-full">
@ -62,11 +47,11 @@ const Page = async ({ params }: { params: { taskId: string[] } }) => {
className="max-w-[1440px] mx-auto h-full" className="max-w-[1440px] mx-auto h-full"
> >
<ResizablePanel defaultSize={50}> <ResizablePanel defaultSize={50}>
<ScrollArea className="h-[calc(100vh-55px)] border-b"> <ScrollArea className="h-[calc(100vh-55px)]">
<div className="px-4 py-6 flex flex-col gap-4 h-full mb-[50vh]"> <div className="px-4 py-6 flex flex-col gap-4 h-full mb-[60vh]">
<div <div
className={cn("grow", markdownStyles["markdown"])} className={cn("grow", markdownStyles["markdown"])}
dangerouslySetInnerHTML={{ __html: String(code) }} dangerouslySetInnerHTML={{ __html: content }}
></div> ></div>
<div className="flex justify-between"> <div className="flex justify-between">
<div className="mb-6"> <div className="mb-6">
@ -119,7 +104,7 @@ const Page = async ({ params }: { params: { taskId: string[] } }) => {
<div className="px-4 py-6 flex flex-col gap-4 h-full"> <div className="px-4 py-6 flex flex-col gap-4 h-full">
<div <div
className={cn("grow", markdownStyles["markdown"])} className={cn("grow", markdownStyles["markdown"])}
dangerouslySetInnerHTML={{ __html: String(code) }} dangerouslySetInnerHTML={{ __html: content }}
></div> ></div>
<div className="flex justify-between"> <div className="flex justify-between">

5
src/app/globals.css
View File

@ -80,3 +80,8 @@
[data-ut-element="upload-icon"] { [data-ut-element="upload-icon"] {
@apply text-muted-foreground; @apply text-muted-foreground;
} }
pre {
@apply overflow-x-auto
}

2
src/app/layout.tsx
View File

@ -20,7 +20,7 @@ export default async function RootLayout({
}) { }) {
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body className={`${inter.className} overflow-hidden`}> <body className={`${inter.className} overflow-x-hidden`}>
<Providers> <Providers>
<Toaster /> <Toaster />
{children} {children}

16
src/lib/markdown-to-html.ts Normal file
View File

@ -0,0 +1,16 @@
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import rehypePrettyCode from "rehype-pretty-code";
export async function markdownToHtml(tutorialCode: string) {
const file = await unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypePrettyCode, {})
.use(rehypeStringify)
.process(tutorialCode);
return String(file);
}

6
src/styles/markdown-styles.module.css
View File

@ -23,7 +23,7 @@
} }
.markdown p { .markdown p {
@apply my-4 @apply my-4;
} }
.markdown a { .markdown a {
@ -31,7 +31,7 @@
} }
.markdown ul { .markdown ul {
@apply space-y-3 [li>&]:mt-3 [&>li]:relative [&>li]:pl-7 before:[&>li]:absolute before:[&>li]:left-1 before:[&>li]:top-3 before:[&>li]:h-1.5 before:[&>li]:w-1.5 before:[&>li]:rounded-full before:[&>li]:bg-secondary my-4 ; @apply space-y-3 [li>&]:mt-3 [&>li]:relative [&>li]:pl-7 before:[&>li]:absolute before:[&>li]:left-1 before:[&>li]:top-3 before:[&>li]:h-1.5 before:[&>li]:w-1.5 before:[&>li]:rounded-full before:[&>li]:bg-secondary my-4;
} }
.markdown ol { .markdown ol {
@ -51,5 +51,5 @@
} }
.markdown pre { .markdown pre {
@apply p-4 rounded-md my-4; @apply p-4 rounded-md my-4 overflow-x-auto max-w-[320px] xs:max-w-full;
} }

3
tailwind.config.js
View File

@ -17,6 +17,9 @@ module.exports = {
}, },
}, },
extend: { extend: {
screens: {
xs: "475px",
},
colors: { colors: {
border: "hsl(var(--border))", border: "hsl(var(--border))",
input: "hsl(var(--input))", input: "hsl(var(--input))",