feat: move scripts to script folder
This commit is contained in:
@@ -8,7 +8,7 @@ import tailwindcss from '@tailwindcss/vite';
|
|||||||
import icon from 'astro-icon';
|
import icon from 'astro-icon';
|
||||||
import swup from '@swup/astro';
|
import swup from '@swup/astro';
|
||||||
|
|
||||||
import { getSiteURL } from './src/support/url';
|
import { getSiteURL } from './src/scripts/url';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
site: getSiteURL(),
|
site: getSiteURL(),
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import { Image } from 'astro:assets';
|
|||||||
import type { Post } from '@lib/directusTypes';
|
import type { Post } from '@lib/directusTypes';
|
||||||
|
|
||||||
import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
|
import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
import { getDirectusImageURL } from '@/scripts/url';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
post: Post;
|
post: Post;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
import Logo from '@components/images/Logo.astro';
|
import Logo from '@components/images/Logo.astro';
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
import { getDirectusImageURL } from '@/scripts/url';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
slug: string;
|
slug: string;
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
import { Icon } from 'astro-icon/components';
|
import { Icon } from 'astro-icon/components';
|
||||||
|
|
||||||
import Logo from '@components/images/Logo.astro';
|
import Logo from '@components/images/Logo.astro';
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
import { getDirectusImageURL } from '@/scripts/url';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
topic: string;
|
topic: string;
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import type { Post } from '@lib/directusTypes';
|
|||||||
|
|
||||||
import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
|
import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
|
||||||
import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
|
import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
import { getDirectusImageURL } from '@/scripts/url';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
post: Post;
|
post: Post;
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import type { Post } from '@lib/directusTypes';
|
|||||||
|
|
||||||
import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
|
import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
|
||||||
import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
|
import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
import { getDirectusImageURL } from '@/scripts/url';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
post: Post;
|
post: Post;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
import Logo from '@components/images/Logo.astro';
|
import Logo from '@components/images/Logo.astro';
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
import { getDirectusImageURL } from '@/scripts/url';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
url: string;
|
url: string;
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
import { Icon } from 'astro-icon/components';
|
import { Icon } from 'astro-icon/components';
|
||||||
import { Image } from 'astro:assets';
|
import { Image } from 'astro:assets';
|
||||||
|
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
import { getDirectusImageURL } from '@/scripts/url';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
|
import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
|
||||||
import Logo from '@components/images/Logo.astro';
|
import Logo from '@components/images/Logo.astro';
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
import { getDirectusImageURL } from '@/scripts/url';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import type { Post } from '@lib/directusTypes';
|
|||||||
import CategoryCard from '@components/cards/CategoryCard.astro';
|
import CategoryCard from '@components/cards/CategoryCard.astro';
|
||||||
import LargeCategoryCard from '@components/cards/LargeCategoryCard.astro';
|
import LargeCategoryCard from '@components/cards/LargeCategoryCard.astro';
|
||||||
import directus from '@lib/directus';
|
import directus from '@lib/directus';
|
||||||
import { formatFromNow } from '@support/time';
|
import { formatFromNow } from '@/scripts/time';
|
||||||
|
|
||||||
const global = await directus.request(readSingleton('site_global'));
|
const global = await directus.request(readSingleton('site_global'));
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro';
|
import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro';
|
||||||
import Logo from '@components/images/Logo.astro';
|
import Logo from '@components/images/Logo.astro';
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
import { getDirectusImageURL } from '@/scripts/url';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import type { HeaderImage } from '@lib/directusTypes';
|
|||||||
import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro';
|
import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro';
|
||||||
import GoLinkSecondaryButton from '@components/buttons/GoLinkSecondaryButton.astro';
|
import GoLinkSecondaryButton from '@components/buttons/GoLinkSecondaryButton.astro';
|
||||||
import directus from '@lib/directus';
|
import directus from '@lib/directus';
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
import { getDirectusImageURL } from '@/scripts/url';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
import WeatherCard from '@components/cards/WeatherCard.astro';
|
import WeatherCard from '@components/cards/WeatherCard.astro';
|
||||||
import { getFiveDayForecast } from '@support/weather';
|
import { getFiveDayForecast } from '@/scripts/weather';
|
||||||
|
|
||||||
const { latitude = "44.95", longitude = "-93.09", cityName = "St. Paul, Minnesota", timezone = "America/Chicago" } = Astro.props;
|
const { latitude = "44.95", longitude = "-93.09", cityName = "St. Paul, Minnesota", timezone = "America/Chicago" } = Astro.props;
|
||||||
|
|
||||||
|
|||||||
@@ -4,8 +4,8 @@ import getReadingTime from 'reading-time';
|
|||||||
import type { Post } from '@lib/directusTypes';
|
import type { Post } from '@lib/directusTypes';
|
||||||
|
|
||||||
import Logo from '@components/images/Logo.astro';
|
import Logo from '@components/images/Logo.astro';
|
||||||
import { formatShortDate, formatDate } from '@support/time';
|
import { formatShortDate, formatDate } from '@/scripts/time';
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
import { getDirectusImageURL } from '@/scripts/url';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
post: Post;
|
post: Post;
|
||||||
|
|||||||
@@ -101,16 +101,22 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
|
|||||||
</html>
|
</html>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { initPhotoSwipe } from '@/scripts/photoswipe';
|
||||||
|
import { animateContent } from '@/scripts/animations';
|
||||||
|
|
||||||
const resetScroll = () => {
|
const resetScroll = () => {
|
||||||
const scrollContainer = document.getElementById('reset-scroll');
|
const scrollContainer = document.getElementById('reset-scroll');
|
||||||
if (scrollContainer) {
|
if (scrollContainer) scrollContainer.scrollTop = 0;
|
||||||
scrollContainer.scrollTop = 0;
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
resetScroll();
|
resetScroll();
|
||||||
|
initPhotoSwipe();
|
||||||
|
animateContent();
|
||||||
|
|
||||||
document.addEventListener('swup:page:view', () => {
|
document.addEventListener('swup:page:view', () => {
|
||||||
resetScroll();
|
resetScroll();
|
||||||
|
initPhotoSwipe();
|
||||||
|
animateContent();
|
||||||
if (typeof (window as any).HSStaticMethods !== 'undefined') {
|
if (typeof (window as any).HSStaticMethods !== 'undefined') {
|
||||||
(window as any).HSStaticMethods.autoInit();
|
(window as any).HSStaticMethods.autoInit();
|
||||||
}
|
}
|
||||||
@@ -120,84 +126,6 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
|
||||||
import PhotoSwipeLightbox from 'photoswipe/lightbox';
|
|
||||||
import PhotoSwipe from "photoswipe";
|
|
||||||
|
|
||||||
let lightbox: PhotoSwipeLightbox | null = null;
|
|
||||||
|
|
||||||
function initPhotoSwipe() {
|
|
||||||
const links = document.querySelectorAll<HTMLAnchorElement>('a.pswp-link');
|
|
||||||
|
|
||||||
links.forEach((link) => {
|
|
||||||
const img = link.querySelector('img');
|
|
||||||
if (img) {
|
|
||||||
const applyDimensions = () => {
|
|
||||||
link.dataset.pswpWidth = (img.naturalWidth || 1920).toString();
|
|
||||||
link.dataset.pswpHeight = (img.naturalHeight || 1080).toString();
|
|
||||||
};
|
|
||||||
if (img.complete) {
|
|
||||||
applyDimensions();
|
|
||||||
} else {
|
|
||||||
img.addEventListener('load', applyDimensions);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (lightbox) {
|
|
||||||
lightbox.destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
lightbox = new PhotoSwipeLightbox({
|
|
||||||
gallery: '.prose',
|
|
||||||
children: 'a.pswp-link',
|
|
||||||
pswpModule: PhotoSwipe,
|
|
||||||
allowPanToNext: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
lightbox.init();
|
|
||||||
}
|
|
||||||
|
|
||||||
initPhotoSwipe();
|
|
||||||
document.addEventListener('swup:page:view', initPhotoSwipe);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const animateContent = () => {
|
|
||||||
const smoothReveal = document.querySelectorAll('.smooth-reveal');
|
|
||||||
smoothReveal.forEach((el, index) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
el.classList.add('animate-reveal');
|
|
||||||
}, 50 + index * 100);
|
|
||||||
});
|
|
||||||
|
|
||||||
const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
|
|
||||||
smoothReveal2.forEach((el, index) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
el.classList.add('animate-reveal');
|
|
||||||
}, 200 + index * 250);
|
|
||||||
});
|
|
||||||
|
|
||||||
const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
|
|
||||||
smoothRevealCards.forEach((el, index) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
el.classList.add('animate-reveal');
|
|
||||||
}, 400 + index * 250);
|
|
||||||
});
|
|
||||||
|
|
||||||
const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
|
|
||||||
smoothRevealFade.forEach((el, index) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
el.classList.add('animate-reveal-fade');
|
|
||||||
}, 100 + index * 250);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
animateContent();
|
|
||||||
|
|
||||||
document.addEventListener('swup:page:view', animateContent);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* Fade away content below header when scrolling */
|
/* Fade away content below header when scrolling */
|
||||||
.mask-container {
|
.mask-container {
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ import type {
|
|||||||
Skill,
|
Skill,
|
||||||
} from '@lib/directusTypes';
|
} from '@lib/directusTypes';
|
||||||
|
|
||||||
import { getDirectusURL } from '@/support/url';
|
import { getDirectusURL } from '@/scripts/url';
|
||||||
|
|
||||||
type Schema = {
|
type Schema = {
|
||||||
site_global: Global;
|
site_global: Global;
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ import SocialShareButton from '@components/buttons/SocialShareButton.astro';
|
|||||||
import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
|
import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
|
||||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||||
import directus from '@lib/directus';
|
import directus from '@lib/directus';
|
||||||
import { getDirectusImageURL } from '@/support/url';
|
import { getDirectusImageURL } from '@/scripts/url';
|
||||||
|
|
||||||
export async function getStaticPaths() {
|
export async function getStaticPaths() {
|
||||||
const posts = await directus.request(readItems('posts', {
|
const posts = await directus.request(readItems('posts', {
|
||||||
|
|||||||
31
src/scripts/animations.ts
Normal file
31
src/scripts/animations.ts
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
const animateContent = () => {
|
||||||
|
const smoothReveal = document.querySelectorAll('.smooth-reveal');
|
||||||
|
smoothReveal.forEach((el, index) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
el.classList.add('animate-reveal');
|
||||||
|
}, 50 + index * 100);
|
||||||
|
});
|
||||||
|
|
||||||
|
const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
|
||||||
|
smoothReveal2.forEach((el, index) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
el.classList.add('animate-reveal');
|
||||||
|
}, 200 + index * 250);
|
||||||
|
});
|
||||||
|
|
||||||
|
const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
|
||||||
|
smoothRevealCards.forEach((el, index) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
el.classList.add('animate-reveal');
|
||||||
|
}, 400 + index * 250);
|
||||||
|
});
|
||||||
|
|
||||||
|
const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
|
||||||
|
smoothRevealFade.forEach((el, index) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
el.classList.add('animate-reveal-fade');
|
||||||
|
}, 100 + index * 250);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export { animateContent };
|
||||||
38
src/scripts/photoswipe.ts
Normal file
38
src/scripts/photoswipe.ts
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import PhotoSwipeLightbox from 'photoswipe/lightbox';
|
||||||
|
import PhotoSwipe from "photoswipe";
|
||||||
|
|
||||||
|
let lightbox: PhotoSwipeLightbox | null = null;
|
||||||
|
|
||||||
|
function initPhotoSwipe() {
|
||||||
|
const links = document.querySelectorAll<HTMLAnchorElement>('a.pswp-link');
|
||||||
|
|
||||||
|
links.forEach((link) => {
|
||||||
|
const img = link.querySelector('img');
|
||||||
|
if (img) {
|
||||||
|
const applyDimensions = () => {
|
||||||
|
link.dataset.pswpWidth = (img.naturalWidth || 1920).toString();
|
||||||
|
link.dataset.pswpHeight = (img.naturalHeight || 1080).toString();
|
||||||
|
};
|
||||||
|
if (img.complete) {
|
||||||
|
applyDimensions();
|
||||||
|
} else {
|
||||||
|
img.addEventListener('load', applyDimensions);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (lightbox) {
|
||||||
|
lightbox.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
lightbox = new PhotoSwipeLightbox({
|
||||||
|
gallery: '.prose',
|
||||||
|
children: 'a.pswp-link',
|
||||||
|
pswpModule: PhotoSwipe,
|
||||||
|
allowPanToNext: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
lightbox.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
export { initPhotoSwipe };
|
||||||
@@ -17,7 +17,7 @@
|
|||||||
"@layouts/*": ["src/layouts/*"],
|
"@layouts/*": ["src/layouts/*"],
|
||||||
"@styles/*": ["src/styles/*"],
|
"@styles/*": ["src/styles/*"],
|
||||||
"@pages/*": ["src/pages/*"],
|
"@pages/*": ["src/pages/*"],
|
||||||
"@support/*": ["src/support/*"],
|
"@support/*": ["src/scripts/*"],
|
||||||
"@images/*": ["src/images/*"]
|
"@images/*": ["src/images/*"]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user