Shellnut_Public/personal-website-sveltekit
1
0
Fork 0
mirror of https://github.com/BradNut/personal-website-sveltekit synced 2025-09-08 23:20:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Ran svelte 5 upgrade script.

Browse source
This commit is contained in:
Bradley Shellnut 2024-12-04 09:37:49 -08:00
parent 4aa41b3817
commit daada71365
12 changed files with 203 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/lib/components/ExternalLink.svelte
View file

@ -1,20 +1,34 @@
<script lang="ts">
import OpenInNew from '@iconify-icons/mdi/open-in-new';
import type { IconifyIcon } from 'iconify-icon';
export let rel = 'noreferrer';
export let target = '_blank';
export let href: string;
export let ariaLabel: string;
export let showIcon: boolean = false;
export let clazz = "";
export let icon: IconifyIcon = OpenInNew;
interface Props {
rel?: string;
target?: string;
href: string;
ariaLabel: string;
showIcon?: boolean;
clazz?: string;
icon?: IconifyIcon;
children?: import('svelte').Snippet;
}
let {
rel = 'noreferrer',
target = '_blank',
href,
ariaLabel,
showIcon = false,
clazz = "",
icon = OpenInNew,
children
}: Props = $props();
</script>
<a class:show-icon={showIcon} class={clazz} aria-label={`Open ${ariaLabel} externally`} title={`Open ${ariaLabel} externally`} {href} {rel} {target}>
<slot />
{@render children?.()}
{#if showIcon}
<iconify-icon {icon} width="24" height="24" role="img" title={`Open ${ariaLabel} Externally`} />
<iconify-icon {icon} width="24" height="24" role="img" title={`Open ${ariaLabel} Externally`}></iconify-icon>
{/if}
</a>

26
src/lib/components/LazyImage.svelte
View file

@ -3,14 +3,24 @@
import Img from '@zerodevx/svelte-img';
import type { ExternalImageSource } from '../types/album';
export let clazz = "";
export let src: Record<string, any> | ExternalImageSource[] | undefined;
export let alt: string;
export let style = "";
export let loading: "lazy" | "eager" = "lazy";
interface Props {
clazz?: string;
src: Record<string, any> | ExternalImageSource[] | undefined;
alt: string;
style?: string;
loading?: "lazy" | "eager";
}
let ref: any;
let loaded: boolean;
let {
clazz = "",
src,
alt,
style = "",
loading = "lazy"
}: Props = $props();
let ref: any = $state();
let loaded: boolean = $state();
onMount(() => {
if (ref.complete) {
@ -21,7 +31,7 @@
<div class="wrap">
<Img class={clazz} {style} {src} {alt} {loading} bind:ref on:load={() => (loaded = true)} />
<div class:blur={loaded} class:loaded />
<div class:blur={loaded} class:loaded></div>
</div>
<style lang="postcss">

21
src/lib/components/Link.svelte
View file

@ -1,10 +1,21 @@
<script lang="ts">
export let rel = '';
export let target = '';
export let href: string;
export let ariaLabel: string;
interface Props {
rel?: string;
target?: string;
href: string;
ariaLabel: string;
children?: import('svelte').Snippet;
}
let {
rel = '',
target = '',
href,
ariaLabel,
children
}: Props = $props();
</script>
<a aria-label={ariaLabel} {href} {rel} {target}>
<slot />
{@render children?.()}
</a>

58
src/lib/components/Pagination.svelte
View file

@ -3,32 +3,44 @@
import { Pagination } from "bits-ui";
import { ChevronLeft, ChevronRight } from 'lucide-svelte';
export let additionalClasses: string;
export let pageSize: number;
export let totalCount: number;
export let currentPage: number;
export let base: string;
interface Props {
additionalClasses: string;
pageSize: number;
totalCount: number;
currentPage: number;
base: string;
}
let {
additionalClasses,
pageSize,
totalCount,
currentPage,
base
}: Props = $props();
</script>
<Pagination.Root let:pages count={totalCount} perPage={pageSize} page={currentPage || 1} class={`${additionalClasses}`}
<Pagination.Root count={totalCount} perPage={pageSize} page={currentPage || 1} class={`${additionalClasses}`}
onPageChange={(page) => goto(`${base}/${page}`)}>
<Pagination.PrevButton>
<ChevronLeft />
</Pagination.PrevButton>
{#each pages as page (page.key)}
{#if page.type === "ellipsis"}
<div class="ellipsis text-[15px] font-medium text-foreground-alt">...</div>
{:else}
<Pagination.Page {page}>
<a href={`${base}/${page.value}`}>
{page.value}
</a>
</Pagination.Page>
{/if}
{/each}
<Pagination.NextButton>
<ChevronRight />
</Pagination.NextButton>
{#snippet children({ pages })}
<Pagination.PrevButton>
<ChevronLeft />
</Pagination.PrevButton>
{#each pages as page (page.key)}
{#if page.type === "ellipsis"}
<div class="ellipsis text-[15px] font-medium text-foreground-alt">...</div>
{:else}
<Pagination.Page {page}>
<a href={`${base}/${page.value}`}>
{page.value}
</a>
</Pagination.Page>
{/if}
{/each}
<Pagination.NextButton>
<ChevronRight />
</Pagination.NextButton>
{/snippet}
</Pagination.Root>
<style lang="postcss">

21
src/lib/components/SEO.svelte
View file

@ -9,17 +9,26 @@
siteUrl,
};
export let title = defaultMetadata.defaultTitle;
export let description = defaultMetadata.defaultDescription;
export let image = defaultMetadata.defaultImage;
export let location: string = '';
interface Props {
title?: any;
description?: any;
image?: any;
location?: string;
}
$: seo = {
let {
title = defaultMetadata.defaultTitle,
description = defaultMetadata.defaultDescription,
image = defaultMetadata.defaultImage,
location = ''
}: Props = $props();
let seo = $derived({
title,
description,
image: `${siteUrl}${image}`,
url: `${siteUrl}${location || ``}`,
};
});
</script>
<svelte:head>

6
src/lib/components/Tag.svelte
View file

@ -1,5 +1,9 @@
<script lang="ts">
export let name: string;
interface Props {
name: string;
}
let { name }: Props = $props();
</script>
<span>{name}</span>

34
src/lib/components/contactHub/index.svelte
View file

@ -4,13 +4,25 @@
import linkedin from '@iconify-icons/radix-icons/linkedin-logo';
import twitter from '@iconify-icons/radix-icons/twitter-logo';
export let showGithub: boolean = false;
export let showTwitter: boolean = false;
export let showLinkedIn: boolean = false;
export let showEmail: boolean = false;
export let userNames: Record<string, string>;
export let showText: boolean = false;
export let justify: boolean = false;
interface Props {
showGithub?: boolean;
showTwitter?: boolean;
showLinkedIn?: boolean;
showEmail?: boolean;
userNames: Record<string, string>;
showText?: boolean;
justify?: boolean;
}
let {
showGithub = false,
showTwitter = false,
showLinkedIn = false,
showEmail = false,
userNames,
showText = false,
justify = false
}: Props = $props();
</script>
{#if showText}
@ -26,7 +38,7 @@
aria-label="Contact through Twitter"
rel="noreferrer"
>
<iconify-icon icon={twitter} class="twitter-contact" width="24" height="24" />
<iconify-icon icon={twitter} class="twitter-contact" width="24" height="24"></iconify-icon>
</a>
</span>
{/if}
@ -39,7 +51,7 @@
aria-label="Contact through LinkedIn"
rel="noreferrer"
>
<iconify-icon icon={linkedin} class="linkedin-contact" width="24" height="24" />
<iconify-icon icon={linkedin} class="linkedin-contact" width="24" height="24"></iconify-icon>
</a>
</span>
{/if}
@ -52,7 +64,7 @@
aria-label="View Github"
rel="noreferrer"
>
<iconify-icon icon={github} class="github-contact" width="24" height="24" />
<iconify-icon icon={github} class="github-contact" width="24" height="24"></iconify-icon>
</a>
</span>
{/if}
@ -65,7 +77,7 @@
aria-label="Contact by email"
rel="noreferrer"
>
<iconify-icon icon={email} class="email-contact" width="24" height="24" />
<iconify-icon icon={email} class="email-contact" width="24" height="24"></iconify-icon>
</a>
</span>
{/if}

26
src/lib/components/socialImageCard.svelte
View file

@ -1,11 +1,23 @@
<script lang="ts">
export let header: string;
export let page: string;
export let image: string;
export let content: string;
export let width = 1200;
export let height = 630;
export let url: string;
interface Props {
header: string;
page: string;
image: string;
content: string;
width?: number;
height?: number;
url: string;
}
let {
header,
page,
image,
content,
width = 1200,
height = 630,
url
}: Props = $props();
</script>
<div class="social-card" style={`width: ${width}px; height: ${height}px;`}>

17
src/routes/+layout.svelte
View file

@ -1,4 +1,6 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import { MetaTags } from 'svelte-meta-tags';
import NProgress from "nprogress";
import 'iconify-icon';
@ -10,6 +12,11 @@
import Header from '$lib/components/header/index.svelte';
import Footer from '$lib/components/footer/index.svelte';
import Analytics from '$lib/components/analytics/index.svelte';
interface Props {
children?: import('svelte').Snippet;
}
let { children }: Props = $props();
NProgress.configure({
// Full list: https://github.com/rstacruz/nprogress#configuration
@ -19,15 +26,15 @@
const dev = process.env.NODE_ENV !== 'production';
const siteUrl = PUBLIC_SITE_URL || 'https://bradleyshellnut.com/';
$: {
if (browser && $navigating) {
if (browser && $navigating) {
NProgress.start();
} else {
NProgress.done();
}
}
$: metaTags = {
let metaTags = $derived({
titleTemplate: '%s | Bradley Shellnut',
additionalMetaTags: [
{
@ -36,7 +43,7 @@
}
],
...$page.data.metaTagsChild
}
})
</script>
{#if !dev}
@ -48,7 +55,7 @@
<div class="wrapper">
<Header />
<main>
<slot />
{@render children?.()}
</main>
<Footer />
</div>

6
src/routes/about/CourseCard.svelte
View file

@ -3,7 +3,11 @@
import Tag from "$lib/components/Tag.svelte";
import type { Course } from "$lib/types/courses";
export let course: Course;
interface Props {
course: Course;
}
let { course }: Props = $props();
const { externalLinks, tags } = course;
</script>

22
src/routes/about/TechListItem.svelte
View file

@ -1,11 +1,21 @@
<script lang="ts">
import type { IconifyIcon } from "iconify-icon/dist/iconify-icon.js";
export let ariaLabel: string;
export let href: string;
export let clazz = "";
export let itemText: string;
export let icon: IconifyIcon;
interface Props {
ariaLabel: string;
href: string;
clazz?: string;
itemText: string;
icon: IconifyIcon;
}
let {
ariaLabel,
href,
clazz = "",
itemText,
icon
}: Props = $props();
</script>
<a
@ -15,7 +25,7 @@
{href}
class={clazz}
>
<iconify-icon {icon} width="24" height="24" role="img" title={itemText} />
<iconify-icon {icon} width="24" height="24" role="img" title={itemText}></iconify-icon>
<p>{itemText}</p>
</a>

24
src/routes/articles/[page]/+page.svelte
View file

@ -1,18 +1,26 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import Pagination from '$lib/components/Pagination.svelte';
import type { Article } from '$lib/types/article';
import Articles from '$lib/components/Articles.svelte';
import type { PageData } from './$types';
export let data: PageData;
let articles: Article[];
let currentPage: number;
let totalArticles: number;
let limit: number;
$: if (data) {
({ articles, currentPage, totalArticles, limit } = data);
interface Props {
data: PageData;
}
let { data }: Props = $props();
let articles: Article[] = $state();
let currentPage: number = $state();
let totalArticles: number = $state();
let limit: number = $state();
run(() => {
if (data) {
({ articles, currentPage, totalArticles, limit } = data);
}
});
</script>
<h1 style:margin-bottom={"2rem"}>Favorite Tech Articles</h1>