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

Move inline typescript to dedicated scripts directory
All checks were successful
Build and Test - Staging / determine_version (pull_request) Successful in 24s
Details
Build and Test - Staging / build_and_push (pull_request) Successful in 2m5s
Details
Build and Test - Staging / test (pull_request) Successful in 3s
Details
Build and Test - Staging / deploy_staging (pull_request) Successful in 5s
Details

Browse Source
This commit is contained in:
Corwin Perren
2025-11-07 20:58:03 -08:00
parent d24a3054c1
commit 9a4ecdd073
7 changed files with 128 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/CustomCarousel.astro
View File

@@ -93,85 +93,4 @@ const limitByWidthClasses = "max-h-fit";
)}
</custom-carousel>
<script>
import {Carousel, type CarouselItem, type CarouselOptions, type IndicatorItem} from 'flowbite';
class CustomCarousel extends HTMLElement {
_slide: boolean;
_items: CarouselItem[];
_options: CarouselOptions;
_carousel: Carousel;
constructor() {
super();
this._slide = this.getAttribute('data-custom-carousel') === 'slide';
this._items = this._getItems();
this._options = this._getOptions();
this._carousel = new Carousel(this, this._items, this._options);
if (this._slide && this._items.length > 0) this._carousel.cycle();
window.addEventListener("load", this._attachHandlers);
}
_getItems = (): CarouselItem[] => {
let customItems = this.querySelectorAll('[data-custom-carousel-item]') || [];
return Array.from(customItems).map(
(item, index): CarouselItem => {
return {el: item as HTMLElement, position: index}
}
)
}
_getOptions = (): CarouselOptions => {
let customIndicators = this.querySelectorAll('[data-custom-carousel-slide-to]') || [];
return {
defaultPosition: 0,
interval: this.dataset.customCarouselInterval ? Number(this.dataset.customCarouselInterval) : 8000,
indicators: {
activeClasses: 'border-2 border-caperren-green bg-black',
inactiveClasses: 'bg-caperren-green/40 hover:bg-caperren-green-light',
items: Array.from(customIndicators).map(
(item, index): IndicatorItem => {
return {
el: item as HTMLElement,
position: Number(item.getAttribute('data-custom-carousel-slide-to'))
}
}
)
}
}
}
_attachHandlers = (): void => {
// Controls
const carouselNextEl = this.querySelector(
'[data-custom-carousel-next]'
);
const carouselPrevEl = this.querySelector(
'[data-custom-carousel-prev]'
);
if (carouselNextEl) {
carouselNextEl.addEventListener('click', () => {
this._carousel.next();
});
}
if (carouselPrevEl) {
carouselPrevEl.addEventListener('click', () => {
this._carousel.prev();
});
}
}
}
customElements.define('custom-carousel', CustomCarousel)
</script>
<script src="@scripts/components/custom-carousel.ts"/>

50
src/components/Timeline.astro
View File

@@ -1,5 +1,6 @@
---
import type {timelineEntry} from "@interfaces/timeline.ts";
const timeline: timelineEntry[] = Astro.props.timeline || [];
---
@@ -30,51 +31,4 @@ const timeline: timelineEntry[] = Astro.props.timeline || [];
</div>
</custom-timeline>
<script>
import LeaderLine from "leader-line-new";
class CustomTimeline extends HTMLElement {
_eventElements: Element[];
constructor() {
super();
this._eventElements = this._getNodeElements();
window.addEventListener("load", this._paintLeaderLines);
}
_getNodeElements = (): Element[] => {
return Array.from(
this.querySelectorAll('[data-timeline-node-index]')
).sort(
(elementA, elementB) =>
Number(elementA.getAttribute('data-timeline-node-index')) - Number(elementB.getAttribute('data-timeline-node-index'))
);
}
_paintLeaderLines = () => {
let pairs = this._eventElements.map((entry, index) => {
if (index < this._eventElements.length - 1) {
return [entry, this._eventElements[index + 1]];
}
}).filter(pair => pair !== undefined)
pairs.forEach(pair => {
new LeaderLine({
start: pair[0],
end: pair[1],
color: '#10ac25',
size: 3,
startSocket: "right",
endSocket: "left",
startPlug: "square",
endPlug: "arrow3"
});
});
}
}
customElements.define('custom-timeline', CustomTimeline)
</script>
<script src="@scripts/components/timeline.ts"/>

3
src/layouts/BaseLayout.astro
View File

@@ -13,9 +13,6 @@ const pageTitle = Astro.props.title ? `${Astro.props.title} - Corwin Perren` : "
<link rel="icon" href="/favicon.svg" type="image/svg+xml"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{pageTitle}</title>
</head>
<body class="bg-black text-white">
<Navbar/>

80
src/scripts/components/custom-carousel.ts Normal file
View File

@@ -0,0 +1,80 @@
import {Carousel, type CarouselItem, type CarouselOptions, type IndicatorItem} from 'flowbite';
class CustomCarousel extends HTMLElement {
_slide: boolean;
_items: CarouselItem[];
_options: CarouselOptions;
_carousel: Carousel;
constructor() {
super();
this._slide = this.getAttribute('data-custom-carousel') === 'slide';
this._items = this._getItems();
this._options = this._getOptions();
this._carousel = new Carousel(this, this._items, this._options);
if (this._slide && this._items.length > 0) this._carousel.cycle();
window.addEventListener("load", this._attachHandlers);
}
_getItems = (): CarouselItem[] => {
let customItems = this.querySelectorAll('[data-custom-carousel-item]') || [];
return Array.from(customItems).map(
(item, index): CarouselItem => {
return {el: item as HTMLElement, position: index}
}
)
}
_getOptions = (): CarouselOptions => {
let customIndicators = this.querySelectorAll('[data-custom-carousel-slide-to]') || [];
return {
defaultPosition: 0,
interval: this.dataset.customCarouselInterval ? Number(this.dataset.customCarouselInterval) : 8000,
indicators: {
activeClasses: 'border-2 border-caperren-green bg-black',
inactiveClasses: 'bg-caperren-green/40 hover:bg-caperren-green-light',
items: Array.from(customIndicators).map(
(item, index): IndicatorItem => {
return {
el: item as HTMLElement,
position: Number(item.getAttribute('data-custom-carousel-slide-to'))
}
}
)
}
}
}
_attachHandlers = (): void => {
// Controls
const carouselNextEl = this.querySelector(
'[data-custom-carousel-next]'
);
const carouselPrevEl = this.querySelector(
'[data-custom-carousel-prev]'
);
if (carouselNextEl) {
carouselNextEl.addEventListener('click', () => {
this._carousel.next();
});
}
if (carouselPrevEl) {
carouselPrevEl.addEventListener('click', () => {
this._carousel.prev();
});
}
}
}
customElements.define('custom-carousel', CustomCarousel)

44
src/scripts/components/timeline.ts Normal file
View File

@@ -0,0 +1,44 @@
import LeaderLine from "leader-line-new";
class CustomTimeline extends HTMLElement {
_eventElements: Element[];
constructor() {
super();
this._eventElements = this._getNodeElements();
window.addEventListener("load", this._paintLeaderLines);
}
_getNodeElements = (): Element[] =>
Array.from(this.querySelectorAll('[data-timeline-node-index]')).sort(
(elementA, elementB) =>
Number(elementA.getAttribute('data-timeline-node-index')) - Number(elementB.getAttribute('data-timeline-node-index'))
);
_paintLeaderLines = () => {
let pairs = this._eventElements.map((entry, index) => {
if (index < this._eventElements.length - 1) {
return [entry, this._eventElements[index + 1]];
}
}).filter(pair => pair !== undefined)
pairs.forEach(pair => {
new LeaderLine({
start: pair[0],
end: pair[1],
color: '#10ac25',
size: 3,
startSocket: "right",
endSocket: "left",
startPlug: "square",
endPlug: "arrow3"
});
});
}
}
customElements.define('custom-timeline', CustomTimeline)

1
src/scripts/main.js
View File

@@ -1 +0,0 @@
import 'flowbite';

1
tsconfig.json
View File

@@ -6,6 +6,7 @@
"@data/*": ["./src/data/*"],
"@interfaces/*": ["./src/interfaces/*"],
"@layouts/*": ["./src/layouts/*"],
"@scripts/*": ["./src/scripts/*"],
"@styles/*": ["./src/styles/*"]
}