caperren/caperren-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed Timeline svg draws making window too wide, adjusted navbar to perform responsive transition at a larger screen size, removed more obsolete attrs
Some checks failed
Build and Test - Staging / test (pull_request) Failing after 3m29s
Details
Build and Test - Staging / build_and_push (pull_request) Has been skipped
Details
Build and Test - Staging / deploy_staging (pull_request) Has been skipped
Details

Browse Source
This commit is contained in:
Corwin Perren
2025-11-11 22:53:05 -08:00
parent 68b6d7f785
commit ba948e4181
6 changed files with 74 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Navbar.astro
View File

@@ -11,21 +11,21 @@ import {Image} from "astro:assets";
<div class="flex flex-wrap items-center justify-between mx-auto p-6"> <div class="flex flex-wrap items-center justify-between mx-auto p-6">
<a href="/"> <a href="/">
<Image src={logo_title_large} <Image src={logo_title_large}
class="h-10 sm:h-14 w-auto" class="h-10 lg:h-14 w-auto"
alt="logo title" alt="logo title"
loading="eager" loading="eager"
/> />
</a> </a>
<button data-collapse-toggle="navbar-multi-level" type="button" <button data-collapse-toggle="navbar-multi-level" type="button"
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm md:hidden focus:ring-2 focus:ring-caperren-green" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm lg:hidden focus:ring-2 focus:ring-caperren-green"
aria-controls="navbar-multi-level" aria-expanded="false"> aria-controls="navbar-multi-level" aria-expanded="false">
<span class="sr-only">Open main menu</span> <span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14"> <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 1h15M1 7h15M1 13h15"/> d="M1 1h15M1 7h15M1 13h15"/>
</svg> </svg>
</button> </button>
<div class="z-40 hidden w-full md:block md:w-auto" id="navbar-multi-level"> <div class="z-40 hidden w-full lg:block lg:w-auto" id="navbar-multi-level">
<NestedNavbarEntry items={siteLayout}/> <NestedNavbarEntry items={siteLayout}/>
</div> </div>
</div> </div>

12
src/components/NestedNavbarEntries.astro
View File

@@ -12,20 +12,20 @@ const getHrefPath = (entry: navLink): string => {
return entry.pubpath ? entry.pubpath : ("/" + (paths && paths.length ? [...paths, entry.path].join("/") : entry.path)); return entry.pubpath ? entry.pubpath : ("/" + (paths && paths.length ? [...paths, entry.path].join("/") : entry.path));
} }
--- ---
<ul class={"flex flex-col p-4 bg-black border-caperren-green " + (depth ? "space-y-2" : "md:flex-row md:space-x-8 md:mt-0")}> <ul class={"flex flex-col p-4 bg-black border-caperren-green " + (depth ? "space-y-2" : "items-start lg:flex-row lg:space-x-8 lg:mt-0 ")}>
{ {
items.map((entry, index) => ( items.map((entry) => (
(entry.enabled ?? true) && ( (entry.enabled ?? true) && (
<li> <li>
{Array.isArray(entry.children) && entry.children.length ? ( {Array.isArray(entry.children) && entry.children.length ? (
<button id={"dropdownNavbarLink" + getNavLinkSuffix(entry)} <button id={"dropdownNavbarLink" + getNavLinkSuffix(entry)}
data-dropdown-toggle={"dropdownNavbar" + getNavLinkSuffix(entry)} data-dropdown-toggle={"dropdownNavbar" + getNavLinkSuffix(entry)}
data-dropdown-placement="bottom" data-dropdown-placement="bottom"
class="flex items-center justify-between py-2 px-3 w-full hover:text-caperren-green-light md:hover:bg-transparent md:border-0 md:hover:text-caperren-green-light md:p-0 "> class="flex items-center justify-between py-2 px-3 w-full hover:text-caperren-green-light lg:hover:bg-transparent lg:border-0 lg:hover:text-caperren-green-light lg:p-0 ">
{entry.navText} {entry.navText}
<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 10 6"> viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" stroke-width="2"
d="m1 1 4 4 4-4"/> d="m1 1 4 4 4-4"/>
@@ -33,7 +33,7 @@ const getHrefPath = (entry: navLink): string => {
</button> </button>
<div id={"dropdownNavbar" + getNavLinkSuffix(entry)} <div id={"dropdownNavbar" + getNavLinkSuffix(entry)}
class="z-10 hidden bg-black border border-caperren-green shadow-sm w-screen md:w-max"> class="z-10 hidden bg-black border border-caperren-green shadow-sm w-screen lg:w-max">
<Astro.self items={entry.children} paths={[...paths, entry.path]} <Astro.self items={entry.children} paths={[...paths, entry.path]}
depth={depth + 1}/> depth={depth + 1}/>
</div> </div>
@@ -41,7 +41,7 @@ const getHrefPath = (entry: navLink): string => {
) : ( ) : (
<a href={getHrefPath(entry)} <a href={getHrefPath(entry)}
class="block py-2 px-3 bg-transparent hover:text-caperren-green-light ring-caperren-green-dark md:p-0" class="block py-2 px-3 bg-transparent hover:text-caperren-green-light ring-caperren-green-dark lg:p-0"
aria-current="page">{entry.navText}</a> aria-current="page">{entry.navText}</a>
)} )}

47
src/components/Timeline/Timeline.astro
View File

@@ -5,28 +5,31 @@ const timeline: timelineEntry[] = Astro.props.timeline || [];
--- ---
<custom-timeline> <custom-timeline>
<div class="relative z-10 grid gap-6 grid-flow-row sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-6" <div class="flex flex-col w-full">
data-timeline> <div class="z-10 grid gap-6 grid-flow-row max-w-full sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-6"
{timeline.map((entry, index) => ( data-timeline>
<div class="pt-1 border bg-black border-caperren-green rounded-lg min-w-s max-w-s px-2 pb-2" {timeline.map((entry, index) => (
data-timeline-node-index={index} <div class="pt-1 border bg-black border-caperren-green rounded-lg min-w-s max-w-s px-2 pb-2"
> data-timeline-node-index={index}
<h3 class="text-lg font-bold"> >
{entry.event} <h3 class="text-lg font-bold">
</h3> {entry.event}
<h4 class="font-semibold leading-none"> </h3>
{entry.eventDetail} <h4 class="font-semibold leading-none">
</h4> {entry.eventDetail}
<time class="mb-2 mt-1 text-sm italic leading-none"> </h4>
{entry.date} <time class="mb-2 mt-1 text-sm italic leading-none">
</time> {entry.date}
{entry.description && ( </time>
<p class="text-sm font-normal"> {entry.description && (
{entry.description} <p class="text-sm font-normal">
</p> {entry.description}
)} </p>
</div> )}
))} </div>
))}
</div>
<div class="z-0 h-10 w-full max-w-full overflow-x-visible" data-custom-timeline-line-wrapper/>
</div> </div>
</custom-timeline> </custom-timeline>

48
src/components/Timeline/timeline.ts
View File

@@ -25,21 +25,47 @@ class CustomTimeline extends HTMLElement {
} }
}).filter(pair => pair !== undefined) }).filter(pair => pair !== undefined)
let contentBodyScrolling = document.getElementById("content-body-scrolling") let contentBodyScrolling = document.getElementById("content-body-scrolling");
let wrapper = this.querySelector("[data-custom-timeline-line-wrapper]") as HTMLElement;
const position = (line: LeaderLine) => {
wrapper.style.transform = "none";
let rectWrapper = wrapper.getBoundingClientRect();
wrapper.style.transform = "translate(-" +
(Number(rectWrapper.left)) + "px, -"
+
(Number(rectWrapper.top)) + "px)"
console.log(wrapper.style.transform)
line.position()
}
pairs.forEach(pair => { pairs.forEach(pair => {
let line = new LeaderLine({ let line = new LeaderLine({
start: pair[0], start: pair[0],
end: pair[1], end: pair[1],
color: '#10ac25', color: '#10ac25',
size: 3, size: 3,
startSocket: "right", startSocket: "right",
endSocket: "left", endSocket: "left",
startPlug: "square", startPlug: "square",
endPlug: "arrow3" endPlug: "arrow3"
}); });
contentBodyScrolling?.addEventListener("scroll", () => line.position())
// Find new element by hidden id and add to wrapper div
const newLineEl = document.querySelector(`body .leader-line:has(path#leader-line-${line._id}-line-path)`);
if (newLineEl) wrapper.appendChild(newLineEl);
// Add position updaters for scrolling and resize events
contentBodyScrolling?.addEventListener("scroll", () => position(line));
window.addEventListener("resize", () => position(line));
// Perform the initial positioning
position(line);
}); });
} }
} }

4
src/layouts/BaseLayout.astro
View File

@@ -28,8 +28,8 @@ const pageEnabled = pathToMetadata(Astro.url.pathname).enabled ?? true;
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{pageEnabled ? pageTitle : "Corwin Perren"}</title> <title>{pageEnabled ? pageTitle : "Corwin Perren"}</title>
</head> </head>
<body class="flex flex-col bg-black text-white h-dvh"> <body class="flex flex-col bg-black text-white h-dvh w-full max-w-full">
<div id="content-body-scrolling" class="grow overflow-y-scroll"> <div id="content-body-scrolling" class="grow overflow-x-hidden overflow-y-scroll">
<Navbar/> <Navbar/>
<main class="mx-6 my-6"> <main class="mx-6 my-6">
{(Astro.props.title && showTitle && pageEnabled) && ( {(Astro.props.title && showTitle && pageEnabled) && (

4
src/styles/global.css
View File

@@ -11,7 +11,3 @@
--color-caperren-green-light: #00ff2a; --color-caperren-green-light: #00ff2a;
--color-caperren-green-dark: #06370e; --color-caperren-green-dark: #06370e;
} }
.leader-line {
z-index: 0;
}