course-kit
Version:
UI Kit for Course Management System
533 lines (525 loc) • 23 kB
JavaScript
// src/index.ts
import Prism2 from "prismjs";
// src/components/Course.tsx
import React4, { useRef } from "react";
// src/components/HeaderSection.tsx
import "react";
import Markdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import { jsx, jsxs } from "react/jsx-runtime";
var HeaderSection = (props) => {
return /* @__PURE__ */ jsx("div", { className: "coursekit-px-2 md:coursekit-px-4", children: /* @__PURE__ */ jsxs("div", { className: "coursekit-flex coursekit-flex-col coursekit-items-center coursekit-pb-16", children: [
/* @__PURE__ */ jsx("div", { className: "coursekit-text-5xl md:coursekit-text-6xl coursekit-font-bold coursekit-pt-32 coursekit-text-center", children: props.headline }),
/* @__PURE__ */ jsx("p", { className: "coursekit-mt-4 coursekit-text-xl md:coursekit-text-2xl coursekit-text-center", children: props.subheadline }),
/* @__PURE__ */ jsx(
"img",
{
className: "coursekit-pt-16 md:coursekit-max-w-7xl md:coursekit-px-8 coursekit-pb-8 coursekit-max-h-[600px]",
src: props.image.startsWith("http") ? props.image : `https://hungrimind.com/${props.image}`
}
),
/* @__PURE__ */ jsx("div", { className: "coursekit-w-full coursekit-max-w-4xl content-section ", children: /* @__PURE__ */ jsx(Markdown, { rehypePlugins: [rehypeRaw], children: props.content }) }),
/* @__PURE__ */ jsx("div", { className: "coursekit-flex coursekit-justify-center coursekit-p-2 coursekit-space-x-4", children: props.links.map((link, index) => /* @__PURE__ */ jsx(
"a",
{
href: link.url,
target: "_blank",
className: "coursekit-py-2.5 coursekit-px-5 coursekit-mt-2 coursekit-font-medium coursekit-text-center coursekit-text-white coursekit-bg-black dark:coursekit-text-black dark:coursekit-bg-white coursekit-rounded",
children: (() => {
switch (link.type) {
case "github":
return /* @__PURE__ */ jsx("div", { children: "Course Code" });
case "discord":
return /* @__PURE__ */ jsx("div", { children: "Join Community" });
default:
return /* @__PURE__ */ jsx("div", { children: "Error" });
}
})()
},
index
)) }),
/* @__PURE__ */ jsx(
"p",
{
id: "setup",
className: "coursekit-mt-16 coursekit-pb-8 coursekit-text-2xl",
children: "\u2B05 Click the check button to get started"
}
)
] }) });
};
var HeaderSection_default = HeaderSection;
// src/components/SlideSection.tsx
import Prism from "prismjs";
import "prismjs/components/prism-dart";
import "prismjs/components/prism-markdown";
import "prismjs/components/prism-yaml";
import "prismjs/plugins/line-highlight/prism-line-highlight";
import { useEffect } from "react";
import Markdown2 from "react-markdown";
import rehypeRaw2 from "rehype-raw";
import { X } from "lucide-react";
import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
var SlideSection = (props) => {
useEffect(() => {
console.log("highlighting in package");
Prism.highlightAll();
});
return /* @__PURE__ */ jsxs2("div", { className: "coursekit-relative coursekit-flex coursekit-h-full coursekit-w-full", children: [
/* @__PURE__ */ jsx2(
"div",
{
className: `${props.previewOpen ? "coursekit-backdrop-blur" : "coursekit-opacity-0 coursekit-hidden"} coursekit-transition-opacity coursekit-absolute coursekit-w-full coursekit-h-full coursekit-z-10`
}
),
/* @__PURE__ */ jsx2("section", { className: "coursekit-hidden sm:coursekit-flex coursekit-w-full", children: /* @__PURE__ */ jsx2(
DesktopView,
{
content: props.content,
previewOpen: props.previewOpen,
setPreviewOpen: props.setPreviewOpen
}
) }),
/* @__PURE__ */ jsx2("section", { className: "sm:coursekit-hidden coursekit-w-full", children: /* @__PURE__ */ jsx2(
MobileView,
{
content: props.content,
previewOpen: props.previewOpen,
setPreviewOpen: props.setPreviewOpen
}
) })
] });
};
var DesktopView = ({
content,
previewOpen,
setPreviewOpen
}) => {
return /* @__PURE__ */ jsxs2("div", { className: "coursekit-flex coursekit-overflow-y-auto coursekit-h-full coursekit-w-full coursekit-items-center coursekit-relative", children: [
/* @__PURE__ */ jsxs2("div", { className: "content-section coursekit-w-1/2 coursekit-my-auto coursekit-py-16", children: [
/* @__PURE__ */ jsx2("h2", { className: "coursekit-px-4 coursekit-text-4xl coursekit-font-bold", children: content.heading }),
/* @__PURE__ */ jsx2("p", { className: "coursekit-px-4", children: /* @__PURE__ */ jsx2(Markdown2, { rehypePlugins: [rehypeRaw2], children: content.content }) })
] }),
/* @__PURE__ */ jsx2(CodeImageThing, { content }),
/* @__PURE__ */ jsxs2(
"div",
{
className: `${previewOpen ? "coursekit-scale-100" : "coursekit-scale-0"} coursekit-absolute coursekit-left-0 coursekit-right-0 coursekit-bottom-0 coursekit-top-0 coursekit-flex coursekit-justify-center coursekit-items-center coursekit-z-20`,
children: [
/* @__PURE__ */ jsx2(
X,
{
onClick: () => setPreviewOpen(!previewOpen),
className: "coursekit-z-20 coursekit-absolute coursekit-top-4 coursekit-right-4 hover:coursekit-cursor-pointer"
}
),
/* @__PURE__ */ jsx2(
"img",
{
className: `${previewOpen ? "coursekit-scale-100" : "coursekit-scale-0"} coursekit-object-contain coursekit-shadow-2xl coursekit-mb-2 coursekit-rounded-xl coursekit-transition-transform coursekit-max-w-[90%] coursekit-max-h-[90%]`,
src: content?.previewImage?.startsWith("http") ?? "" ? content?.previewImage : `../../../${content?.previewImage}`,
alt: "Preview"
}
)
]
}
)
] });
};
var MobileView = ({
content,
previewOpen,
setPreviewOpen
}) => {
return /* @__PURE__ */ jsxs2(Fragment, { children: [
/* @__PURE__ */ jsx2("div", { className: "content-section coursekit-overflow-hidden coursekit-p-4", children: /* @__PURE__ */ jsxs2("div", { children: [
/* @__PURE__ */ jsx2(
"h2",
{
className: ` coursekit-text-4xl coursekit-font-bold sm:coursekit-transition-opacity coursekit-duration-500`,
children: content?.heading
}
),
/* @__PURE__ */ jsx2(
"p",
{
className: ` coursekit-pb-16 sm:coursekit-transition-opacity coursekit-duration-500 `,
children: /* @__PURE__ */ jsx2(Markdown2, { rehypePlugins: [rehypeRaw2], children: content?.content })
}
),
/* @__PURE__ */ jsx2("div", { className: "coursekit-h-16" })
] }) }),
/* @__PURE__ */ jsx2(CodeImageThing, { content }),
/* @__PURE__ */ jsxs2(
"div",
{
className: `${previewOpen ? "coursekit-scale-100" : "coursekit-scale-0"} coursekit-absolute coursekit-left-0 coursekit-right-0 coursekit-bottom-0 coursekit-top-0 coursekit-flex coursekit-justify-center coursekit-items-center coursekit-z-20`,
children: [
/* @__PURE__ */ jsx2(
X,
{
onClick: () => setPreviewOpen(!previewOpen),
className: "coursekit-z-20 coursekit-absolute coursekit-top-4 coursekit-right-4 hover:coursekit-cursor-pointer"
}
),
/* @__PURE__ */ jsx2(
"img",
{
className: `${previewOpen ? "coursekit-scale-100" : "coursekit-scale-0"} coursekit-object-contain coursekit-shadow-2xl coursekit-mb-2 coursekit-rounded-xl coursekit-max-w-[90%] coursekit-max-h-[90%]`,
src: content?.previewImage?.startsWith("http") ?? "" ? content?.previewImage : `../../../${content?.previewImage}`,
alt: "Preview"
}
)
]
}
)
] });
};
function CodeImageThing({ content }) {
function highlightTranslator(type) {
if (type === "flutter") {
return "language-dart";
}
return `language-${type}`;
}
return /* @__PURE__ */ jsx2("div", { className: "coursekit-sticky coursekit-top-0 coursekit-h-full sm:coursekit-block sm:coursekit-w-1/2 coursekit-pb-16 sm:coursekit-pb-0", children: /* @__PURE__ */ jsx2("div", { className: "coursekit-overflow-visible coursekit-relative coursekit-h-full coursekit-rounded-xl", children: (() => {
switch (content?.type) {
case "image":
return /* @__PURE__ */ jsx2("div", { className: "coursekit-flex coursekit-h-full coursekit-justify-center coursekit-items-center coursekit-p-4 coursekit-mb-20 ", children: /* @__PURE__ */ jsx2(
"img",
{
className: "coursekit-object-contain coursekit-max-h-full coursekit-rounded-xl",
src: content.value.startsWith("http") ? content.value : `/${content.value}`,
alt: "Comment"
}
) });
case "text":
return /* @__PURE__ */ jsx2("div", { className: "coursekit-flex coursekit-justify-start coursekit-items-center coursekit-p-4 coursekit-h-full coursekit-text-white", children: content.value });
case "md":
case "yaml":
case "flutter":
return /* @__PURE__ */ jsxs2("div", { className: "coursekit-overflow-y-auto coursekit-h-full coursekit-text-white coursekit-flex coursekit-flex-col", children: [
content?.file !== void 0 && /* @__PURE__ */ jsx2("div", { className: " coursekit-text-black dark:coursekit-text-white coursekit-px-4 coursekit-py-1", children: content.file }),
/* @__PURE__ */ jsx2(
"pre",
{
className: "line-numbers coursekit-pl-0 coursekit-flex-1",
"data-line": content.highlight ?? "",
children: /* @__PURE__ */ jsx2(
"code",
{
className: `coursekit-pl-0 ${highlightTranslator(
content.type
)}`,
children: content.value
}
)
}
)
] });
default:
return null;
}
})() }) });
}
var SlideSection_default = SlideSection;
// src/components/Course.tsx
import {
CheckIcon,
PanelLeftClose,
PanelLeftOpen,
Smartphone
} from "lucide-react";
// src/components/MarkdownSection.tsx
import "react";
import Markdown3 from "react-markdown";
import rehypeRaw3 from "rehype-raw";
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
var MarkdownSection = (props) => {
return /* @__PURE__ */ jsx3("div", { className: "coursekit-flex coursekit-flex-col coursekit-p-4 coursekit-pb-16 coursekit-max-w-4xl coursekit-mx-auto", children: /* @__PURE__ */ jsxs3("div", { className: "content-section", children: [
/* @__PURE__ */ jsx3("h1", { children: props.heading }),
/* @__PURE__ */ jsx3(Markdown3, { rehypePlugins: [rehypeRaw3], children: props.content })
] }) });
};
var MarkdownSection_default = MarkdownSection;
// src/components/Course.tsx
import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
var Course = ({
id,
lessons,
canExit,
canScroll,
menuHoverColor,
menuSelectedColor,
onIndexChange
}) => {
const [previewOpen, setPreviewOpen] = React4.useState(false);
const [menuOpen, setMenuOpen] = React4.useState(false);
const listItemRef = useRef(null);
const divRef = React4.useRef(null);
const [cookieArray, setCookieArray] = React4.useState(
void 0
);
React4.useEffect(() => {
const cookie = document.cookie.split(";").find((cookie2) => cookie2.includes(`current-position-for-${id}`));
if (cookie) {
const currentLessonId = cookie.split("=")[1];
console.log(lessons.findIndex((l) => l.id == currentLessonId));
setIndex(lessons.findIndex((l) => l.id == currentLessonId));
}
let cookieArray2 = document.cookie.split("; ").find((row) => row.startsWith(`progress-for-${id}`))?.split("=")[1].split(",");
setCookieArray(cookieArray2);
}, [lessons]);
const [currentIndex, setIndex] = React4.useState(0);
React4.useEffect(() => {
if (canScroll === false)
return;
if (menuOpen) {
listItemRef.current.scrollIntoView({
behavior: "smooth",
block: "center"
});
}
}, [menuOpen, listItemRef, currentIndex]);
React4.useEffect(() => {
if (onIndexChange) {
onIndexChange(currentIndex);
}
if (divRef.current) {
divRef.current.scrollTo({
top: 0
});
}
}, [currentIndex]);
return /* @__PURE__ */ jsxs4(
"div",
{
id: "course-component",
className: "coursekit-bg-white dark:coursekit-bg-neutral-950 dark:coursekit-text-white coursekit-flex coursekit-h-full coursekit-w-full coursekit-relative",
children: [
/* @__PURE__ */ jsx4(
"div",
{
className: `sm:coursekit-basis-64 sm:coursekit-z-0 sm:coursekit-relative coursekit-border-r dark:coursekit-border-r-neutral-700 coursekit-overflow-y-auto coursekit-transition-opacity ${menuOpen ? "coursekit-opacity-100 coursekit-block" : "coursekit-opacity-0 coursekit-hidden"} coursekit-fixed coursekit-z-50 coursekit-h-full coursekit-w-full coursekit-bg-white dark:coursekit-bg-neutral-950 `,
children: /* @__PURE__ */ jsxs4("div", { className: "side-menu-content", children: [
/* @__PURE__ */ jsx4("div", { className: "coursekit-py-4 coursekit-pr-4 coursekit-pl-2 coursekit-sticky coursekit-top-0 coursekit-border-b dark:coursekit-border-b-neutral-700 coursekit-backdrop-blur", children: /* @__PURE__ */ jsxs4("div", { className: "coursekit-flex coursekit-justify-between", children: [
/* @__PURE__ */ jsx4("button", { onClick: () => setMenuOpen(false), className: "btn-ghost", children: /* @__PURE__ */ jsx4(PanelLeftClose, { size: 24 }) }),
canExit && /* @__PURE__ */ jsx4("a", { href: "/courses", className: "btn-ghost", children: /* @__PURE__ */ jsx4("div", { className: "coursekit-text-red-400", children: "Exit Course" }) })
] }) }),
/* @__PURE__ */ jsx4("ul", { className: "coursekit-py-4 coursekit-px-4", children: lessons.map((section, index) => /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(
"button",
{
onClick: () => {
setIndex(index);
document.cookie = `current-position-for-${id}=${section.id}`;
setPreviewOpen(false);
if (window.innerWidth < 640) {
setMenuOpen(false);
}
},
ref: index === currentIndex ? listItemRef : void 0,
className: `coursekit-block coursekit-w-full coursekit-p-2 coursekit-text-left ${menuHoverColor != null ? menuHoverColor : "hover:coursekit-bg-neutral-100 dark:hover:coursekit-bg-neutral-800"} ${index === currentIndex ? `${menuSelectedColor != null ? menuSelectedColor : "coursekit-bg-neutral-200 dark:coursekit-bg-neutral-700"} coursekit-rounded` : ""} ${cookieArray?.includes(section.id.toString()) ? "dark:coursekit-text-green-300 coursekit-text-green-600" : ""}`,
children: (() => {
switch (section.sectionType) {
case "header":
return /* @__PURE__ */ jsx4("span", { children: "Introduction" });
default:
return /* @__PURE__ */ jsx4("span", { children: section.heading });
}
})()
}
) }, index)) })
] })
}
),
/* @__PURE__ */ jsxs4(
"div",
{
className: "coursekit-relative coursekit-transition-opacity coursekit-w-full coursekit-overflow-y-auto",
ref: divRef,
children: [
/* @__PURE__ */ jsx4(
BottomNavigation,
{
courseId: id,
currentIndex,
previewOpen,
setIndex,
contentLength: lessons.length,
setPreviewOpen,
content: lessons,
menuOpen,
setMenuOpen,
cookieArray,
setCookieArray
}
),
(() => {
switch (lessons[currentIndex].sectionType) {
case "slide":
return /* @__PURE__ */ jsx4(
SlideSection_default,
{
content: lessons[currentIndex],
previewOpen,
setPreviewOpen
}
);
case "md":
return /* @__PURE__ */ jsx4(
MarkdownSection_default,
{
...lessons[currentIndex]
}
);
case "header":
return /* @__PURE__ */ jsx4(
HeaderSection_default,
{
...lessons[currentIndex]
}
);
default:
return null;
}
})()
]
}
)
]
}
);
};
function BottomNavigation({
courseId,
currentIndex,
previewOpen,
contentLength,
setIndex,
setPreviewOpen,
content,
menuOpen,
setMenuOpen,
cookieArray,
setCookieArray
}) {
const completeRef = React4.useRef(null);
const hasPreview = content[currentIndex] !== void 0 && "previewImage" in content[currentIndex];
React4.useEffect(() => {
document.addEventListener("keydown", function(event) {
const keyPressed = event.key.toLowerCase();
if (keyPressed === "c" && !event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey) {
completeKeymap();
}
});
}, []);
function completeKeymap() {
const item = completeRef.current;
if (!item)
return;
item.classList.add("coursekit-scale-75");
setTimeout(() => {
item.classList.remove("coursekit-scale-75");
}, 100);
completeRef.current?.click();
completeRef.current?.focus();
}
function onClickComplete() {
if (!cookieArray) {
cookieArray = [];
}
if (!cookieArray.includes(content[currentIndex].id.toString())) {
cookieArray.push(content[currentIndex].id.toString());
setCookieArray(cookieArray);
}
document.cookie = `progress-for-${courseId}=${cookieArray}`;
if (currentIndex === contentLength - 1) {
return;
}
if (content[currentIndex + 1].sectionType !== "slide" || content[currentIndex + 1].previewImage === void 0) {
setPreviewOpen(false);
}
setIndex(currentIndex + 1);
console.log(content[currentIndex]);
document.cookie = `current-position-for-${courseId}=${content[currentIndex + 1].id}`;
}
return /* @__PURE__ */ jsx4("div", { className: "coursekit-absolute coursekit-bottom-16 coursekit-left-8 coursekit-z-40", children: /* @__PURE__ */ jsx4("div", { className: "coursekit-fixed", children: /* @__PURE__ */ jsxs4("div", { className: "coursekit-flex coursekit-h-full coursekit-items-center coursekit-justify-center coursekit-space-x-4 coursekit-rounded", children: [
!menuOpen && /* @__PURE__ */ jsxs4(
"button",
{
"data-tooltip-target": "tooltip-menu",
type: "button",
className: "btn-default",
onClick: () => setMenuOpen(!menuOpen),
children: [
/* @__PURE__ */ jsx4("div", { className: "coursekit-w-full coursekit-h-full coursekit-flex coursekit-items-center coursekit-justify-center active:coursekit-scale-75 coursekit-transition-transform", children: /* @__PURE__ */ jsx4(PanelLeftOpen, { size: 28 }) }),
/* @__PURE__ */ jsx4("span", { className: "coursekit-sr-only", children: "Menu" })
]
}
),
/* @__PURE__ */ jsxs4(
"button",
{
"data-tooltip-target": "tooltip-complete",
type: "button",
className: "btn-default",
onClick: onClickComplete,
children: [
/* @__PURE__ */ jsx4(
"div",
{
ref: completeRef,
className: "coursekit-w-full coursekit-h-full coursekit-flex coursekit-items-center coursekit-justify-center active:coursekit-scale-75 coursekit-transition-transform",
children: /* @__PURE__ */ jsx4(CheckIcon, { size: 28 })
}
),
/* @__PURE__ */ jsx4("span", { className: "coursekit-sr-only", children: "Complete" })
]
}
),
/* @__PURE__ */ jsxs4(
"div",
{
id: "tooltip-complete",
role: "tooltip",
className: "coursekit-absolute coursekit-z-10 coursekit-invisible coursekit-inline-block coursekit-px-3 coursekit-py-2 coursekit-text-sm coursekit-font-medium coursekit-text-white coursekit-transition-opacity coursekit-duration-300 coursekit-bg-neutral-900 coursekit-rounded-lg coursekit-shadow-sm coursekit-opacity-0 tooltip dark:coursekit-bg-neutral-700",
children: [
"Complete",
/* @__PURE__ */ jsx4("div", { className: "tooltip-arrow", "data-popper-arrow": true })
]
}
),
hasPreview && /* @__PURE__ */ jsxs4(Fragment2, { children: [
/* @__PURE__ */ jsxs4(
"button",
{
onClick: () => setPreviewOpen(!previewOpen),
"data-tooltip-target": "tooltip-preview",
type: "button",
className: "btn-default",
children: [
/* @__PURE__ */ jsx4("div", { className: "coursekit-w-full coursekit-h-full coursekit-flex coursekit-items-center coursekit-justify-center active:coursekit-scale-75 coursekit-transition-transform", children: /* @__PURE__ */ jsx4(Smartphone, { size: 28 }) }),
/* @__PURE__ */ jsx4("span", { className: "coursekit-sr-only", children: "Preview" })
]
}
),
/* @__PURE__ */ jsxs4(
"div",
{
id: "tooltip-preview",
role: "tooltip",
className: "coursekit-absolute coursekit-z-10 coursekit-invisible coursekit-inline-block coursekit-px-3 coursekit-py-2 coursekit-text-sm coursekit-font-medium coursekit-text-white coursekit-transition-opacity coursekit-duration-300 coursekit-bg-neutral-900 coursekit-rounded-lg coursekit-shadow-sm coursekit-opacity-0 tooltip dark:coursekit-bg-neutral-700",
children: [
"Preview",
/* @__PURE__ */ jsx4("div", { className: "tooltip-arrow", "data-popper-arrow": true })
]
}
)
] })
] }) }) });
}
// src/index.ts
Prism2.highlightAll();
export {
Course
};