lecture styling

This commit is contained in:
2025-07-15 13:39:29 -06:00
parent 43ed57e558
commit 2b11106f02
3 changed files with 19 additions and 17 deletions

View File

@@ -16,6 +16,7 @@ import { useCourseContext } from "../../context/courseContext";
import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks"; import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
import { Lecture } from "@/models/local/lecture"; import { Lecture } from "@/models/local/lecture";
import { useAuthoritativeUpdates } from "../../utils/useAuthoritativeUpdates"; import { useAuthoritativeUpdates } from "../../utils/useAuthoritativeUpdates";
import { EditLayout } from "@/components/EditLayout";
export default function EditLecture({ lectureDay }: { lectureDay: string }) { export default function EditLecture({ lectureDay }: { lectureDay: string }) {
const { courseName } = useCourseContext(); const { courseName } = useCourseContext();
@@ -66,7 +67,7 @@ export default function EditLecture({ lectureDay }: { lectureDay: string }) {
} }
} }
setError(""); setError("");
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (e: any) { } catch (e: any) {
setError(e.toString()); setError(e.toString());
} }
@@ -85,21 +86,22 @@ export default function EditLecture({ lectureDay }: { lectureDay: string }) {
textUpdate, textUpdate,
updateLecture, updateLecture,
]); ]);
return ( return (
<div className="h-full flex flex-col"> <EditLayout
<EditLectureTitle lectureDay={lectureDay} /> Header={<EditLectureTitle lectureDay={lectureDay} />}
<div className="sm:columns-2 min-h-0 flex-1"> Body={
<div className="flex-1 h-full"> <div className="sm:columns-2 min-h-0 flex-1">
<MonacoEditor key={monacoKey} value={text} onChange={textUpdate} /> <div className="flex-1 h-full">
<MonacoEditor key={monacoKey} value={text} onChange={textUpdate} />
</div>
<div className="h-full sm:block none overflow-auto">
<div className="text-red-300">{error && error}</div>
{lecture && <LecturePreview lecture={lecture} />}
</div>
</div> </div>
<div className="h-full sm:block none overflow-auto"> }
<div className="text-red-300">{error && error}</div> Footer={<LectureButtons lectureDay={lectureDay} />}
{lecture && <LecturePreview lecture={lecture} />} />
</div>
</div>
<LectureButtons lectureDay={lectureDay} />
</div>
); );
} }

View File

@@ -42,7 +42,7 @@ export default function LecturePreviewPage({
<div <div
className=" className="
w-full max-w-screen-lg w-full max-w-screen-lg
border-slate-700 border-4 rounded-md border-slate-700 border-4 rounded-md bg-gray-900/50
p-3 overflow-auto p-3 overflow-auto
" "
> >

View File

@@ -23,7 +23,7 @@ const mermaidExtension = {
}, },
renderer(token: { text: string }) { renderer(token: { text: string }) {
const base64 = btoa(token.text); const base64 = btoa(token.text);
const url = `https://mermaid.ink/img/${base64}?type=png` const url = `https://mermaid.ink/img/${base64}?type=svg`
console.log(token.text, url); console.log(token.text, url);
return `<img src="${url}" alt="Mermaid diagram" />`; return `<img src="${url}" alt="Mermaid diagram" />`;
}, },