diff --git a/astro.config.mjs b/astro.config.mjs index 2004d5a..69a41e5 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -22,7 +22,7 @@ export const locales = locals; export default defineConfig({ output: "server", image: { - service: { entrypoint: "astro/assets/services/noop" }, + service: { entrypoint: "astro/assets/services/sharp" }, }, integrations: [ diff --git a/src/assets/logo-small.svg b/src/assets/logo-small.svg new file mode 100644 index 0000000..707a5ff --- /dev/null +++ b/src/assets/logo-small.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/step-1.png b/src/assets/step-1.png index 29d7c59..fab3f8c 100644 Binary files a/src/assets/step-1.png and b/src/assets/step-1.png differ diff --git a/src/assets/step-2.png b/src/assets/step-2.png index bd72ce1..e66d91f 100644 Binary files a/src/assets/step-2.png and b/src/assets/step-2.png differ diff --git a/src/assets/step-3.png b/src/assets/step-3.png index 9adee4b..1f82e1e 100644 Binary files a/src/assets/step-3.png and b/src/assets/step-3.png differ diff --git a/src/components/override-components/Header.astro b/src/components/override-components/Header.astro index b8b7fd8..dd4492c 100644 --- a/src/components/override-components/Header.astro +++ b/src/components/override-components/Header.astro @@ -30,11 +30,11 @@ const hasSidebar = Astro.locals.starlightRoute.hasSidebar; for="nav-toggle" class="order-3 cursor-pointer flex items-center lg:hidden dark:text-white lg:order-1 hamburger-menu" > - + Menu Open -
-
- -
-
-

{Astro.locals.t("hero.popular", "Popular")}: @@ -66,13 +59,6 @@ const is404 = Astro.locals.starlightRoute?.id === "404"; letter-spacing: -4px; color: var(--sl-color-white); } - .search-container { - width: 90%; - margin: auto; - border: 1px solid - color-mix(in srgb, var(--sl-color-white) 5%, transparent); - } - .badges { background-color: color-mix( in srgb, @@ -94,9 +80,6 @@ const is404 = Astro.locals.starlightRoute?.id === "404"; line-height: 3.5rem !important; letter-spacing: -2px; } - .search-container { - width: 100%; - } } } diff --git a/src/components/override-components/SiteTitle.astro b/src/components/override-components/SiteTitle.astro index b3f101f..1b5abc1 100644 --- a/src/components/override-components/SiteTitle.astro +++ b/src/components/override-components/SiteTitle.astro @@ -28,9 +28,21 @@ const { { src || srcDarkmode || logo || logo_darkmode ? ( <> + p.id === activeProgramId); -const sidebarResult = activeProgram +const navbarResult = activeProgram ? await fetchDirectory(activeProgramId) : { entries: [], errorMessage: undefined }; -const sidebarItems = sidebarResult.entries; +const navbarItems = navbarResult.entries; const activeCourseId = pathSegments[1]; // ==== GRID ITEMS ==== @@ -40,60 +40,29 @@ const getIconSrc = (type: string) => { ---

-
- - MENU - - -
-
+
- - {activeProgram ? activeProgram.name : "Programs"} - + Programs
{ sidebarItems.length > 0 ? ( - sidebarItems.map((item) => { - const currentId = - item.type === "shortcut" ? item.targetId : item.id; - - return ( - -
{item.name}
- - ); - }) + sidebarItems.map((item) => ( + +
{item.name}
+ + )) ) : ( -
- {activeProgram - ? "No courses available." - : "Select a program above."} -
+
No programs available.
) }
@@ -101,6 +70,31 @@ const getIconSrc = (type: string) => {
+
+ + MENU + + +
Back @@ -116,7 +110,7 @@ const getIconSrc = (type: string) => { { context.breadcrumbs.map((crumb) => ( <> - / + › { ) : (
{activeProgram - ? "Select a course from the sidebar to view its contents." - : "Select a program from the top bar to get started."} + ? "Select a course from the tabs above to view its contents." + : "Select a program from the sidebar to get started."}
) } @@ -179,9 +173,15 @@ const getIconSrc = (type: string) => { const btn = document.getElementById("toggle-sidebar-btn"); const sidebar = document.querySelector(".sidebar-column"); - btn?.addEventListener("click", () => { + const overlay = document.getElementById("sidebar-overlay"); + + const toggleSidebar = () => { sidebar?.classList.toggle("active"); - }); + overlay?.classList.toggle("active"); + }; + + btn?.addEventListener("click", toggleSidebar); + overlay?.addEventListener("click", toggleSidebar); const backBtn = document.getElementById("history-back"); const fwdBtn = document.getElementById("history-forward"); @@ -240,7 +240,6 @@ const getIconSrc = (type: string) => { }); const getMaxLabelLength = (): number => { - console.log("CURRENT WIDTH: ", window.innerWidth); if (window.innerWidth < 600) { const mobileCrumbs = truncateBreadcrumbs(all, 2); const totalChars = mobileCrumbs.reduce( @@ -248,7 +247,6 @@ const getIconSrc = (type: string) => { 0, ); const charsPerPixel = totalChars / container.offsetWidth; - console.log("CHARS PER PIXEL: ", charsPerPixel); if (charsPerPixel < 0.1) return Infinity; if (charsPerPixel < 0.2) return 10; return 10; @@ -299,8 +297,8 @@ const getIconSrc = (type: string) => { container.innerHTML = crumbs .map((crumb: BreadcrumbType) => crumb.href - ? `/${middleTruncate(crumb.label, maxLength)}` - : `/…`, + ? `›${middleTruncate(crumb.label, maxLength)}` + : `›…`, ) .join(""); }; @@ -315,32 +313,47 @@ const getIconSrc = (type: string) => {