mirror of
https://github.com/BradNut/personal-website-sveltekit
synced 2025-09-08 23:20:18 +00:00
Fixing svelte check errors that I can, adding explicit TypeScript ignore comments for those I need to look into later, and fixing warnings.
This commit is contained in:
Bradley Shellnut
parent
0a421471f2
commit
6cd1ae915f
15 changed files with 32 additions and 145 deletions
|
|
@ -36,7 +36,7 @@
|
|||
"eslint-plugin-svelte": "^2.35.1",
|
||||
"iconify-icon": "^1.0.8",
|
||||
"just-intersect": "^4.3.0",
|
||||
"mdsvex": "^0.10.6",
|
||||
"mdsvex": "^0.11.0",
|
||||
"mdsvex-relative-images": "^1.0.3",
|
||||
"postcss": "^8.4.33",
|
||||
"postcss-import": "^15.1.0",
|
||||
|
|
|
|||
|
|
@ -86,8 +86,8 @@ devDependencies:
|
|||
specifier: ^4.3.0
|
||||
version: 4.3.0
|
||||
mdsvex:
|
||||
specifier: ^0.10.6
|
||||
version: 0.10.6(svelte@4.2.9)
|
||||
specifier: ^0.11.0
|
||||
version: 0.11.0(svelte@4.2.9)
|
||||
mdsvex-relative-images:
|
||||
specifier: ^1.0.3
|
||||
version: 1.0.3
|
||||
|
|
@ -3465,10 +3465,10 @@ packages:
|
|||
unist-util-visit: 3.1.0
|
||||
dev: true
|
||||
|
||||
/mdsvex@0.10.6(svelte@4.2.9):
|
||||
resolution: {integrity: sha512-aGRDY0r5jx9+OOgFdyB9Xm3EBr9OUmcrTDPWLB7a7g8VPRxzPy4MOBmcVYgz7ErhAJ7bZ/coUoj6aHio3x/2mA==}
|
||||
/mdsvex@0.11.0(svelte@4.2.9):
|
||||
resolution: {integrity: sha512-gJF1s0N2nCmdxcKn8HDn0LKrN8poStqAicp6bBcsKFd/zkUBGLP5e7vnxu+g0pjBbDFOscUyI1mtHz+YK2TCDw==}
|
||||
peerDependencies:
|
||||
svelte: 3.x
|
||||
svelte: '>=3 <5'
|
||||
dependencies:
|
||||
'@types/unist': 2.0.6
|
||||
prism-svelte: 0.4.7
|
||||
|
|
|
|||
|
|
@ -103,10 +103,6 @@
|
|||
font-size: 2rem;
|
||||
}
|
||||
|
||||
& a + svg {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
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;
|
||||
|
|
@ -42,7 +43,7 @@
|
|||
</a>
|
||||
</span>
|
||||
{/if}
|
||||
{#if github && userNames?.github}
|
||||
{#if showGithub && userNames?.github}
|
||||
<span>
|
||||
<a
|
||||
href={`https://www.github.com/${userNames.github}`}
|
||||
|
|
|
|||
|
|
@ -39,19 +39,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: 0;
|
||||
max-height: 0;
|
||||
border: solid;
|
||||
width: 100%;
|
||||
border-width: thin 0 0 0;
|
||||
transition: inherit;
|
||||
border-color: var(--lightShade);
|
||||
color: var(--lightShade);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0.2rem;
|
||||
|
|
@ -60,10 +47,6 @@
|
|||
color: var(--lightShade);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
|
|
@ -2,19 +2,26 @@
|
|||
import beeIcon from '$lib/assets/images/bee.svg';
|
||||
import shellIcon from '$lib/assets/images/shell.svg';
|
||||
import nutIcon from '$lib/assets/images/hazelnut.svg';
|
||||
|
||||
// @ts-expect-error: Type 'Record<string, any>' is not assignable to type 'string'.ts(2322)
|
||||
const bee: string = beeIcon;
|
||||
// @ts-expect-error: Type 'Record<string, any>' is not assignable to type 'string'.ts(2322)
|
||||
const shell: string = shellIcon;
|
||||
// @ts-expect-error: Type 'Record<string, any>' is not assignable to type 'string'.ts(2322)
|
||||
const nut: string = nutIcon;
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<a href="/" class="center">
|
||||
<img src={beeIcon} alt="Bee Icon" width="30" height="30"/>
|
||||
<img src={bee} alt="Bee Icon" width="30" height="30"/>
|
||||
<p>Bradley</p>
|
||||
</a>
|
||||
<a href="/" class="center">
|
||||
<img src={shellIcon} alt="Shell Icon" width="30" height="30"/>
|
||||
<img src={shell} alt="Shell Icon" width="30" height="30"/>
|
||||
<p>Shell</p>
|
||||
</a>
|
||||
<a href="/" class="center">
|
||||
<img src={nutIcon} alt="Nut Icon" width="30" height="30"/>
|
||||
<img src={nut} alt="Nut Icon" width="30" height="30"/>
|
||||
<p>Nut</p>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
export let pageSize: number;
|
||||
export let totalCount: number;
|
||||
export let currentPage: number;
|
||||
export let skip: number;
|
||||
export let base: string;
|
||||
|
||||
// make some variables
|
||||
|
|
|
|||
|
|
@ -17,11 +17,10 @@ type Sources = {
|
|||
height: string;
|
||||
};
|
||||
|
||||
const { height, src, width }: ImageMeta = meta;
|
||||
const { height, src, width } = meta as ImageMeta;
|
||||
|
||||
const sources: Sources[] = [];
|
||||
const imageFormatsMetadata: ImageMeta[] = JSON.parse(formatMeta);
|
||||
console.log(`Image format metadata: ${JSON.parse(imageFormatsMetadata)}`);
|
||||
const imageFormatsMetadata: ImageMeta[] = JSON.parse(`${formatMeta}`);
|
||||
for (const metadata of imageFormatsMetadata) {
|
||||
sources.push({
|
||||
srcset: new URL(metadata.src),
|
||||
|
|
|
|||
|
|
@ -6,10 +6,11 @@ import { read } from '$app/server';
|
|||
|
||||
// we use a Vite plugin to turn this import into the result of fs.readFileSync during build
|
||||
import firaSansSemiBold from '$lib/fonts/FiraSans-SemiBold.ttf';
|
||||
import type { SvelteComponent } from 'svelte';
|
||||
|
||||
const fontData = read(firaSansSemiBold).arrayBuffer();
|
||||
|
||||
export async function componentToPng(component,
|
||||
export async function componentToPng(component: SvelteComponent,
|
||||
props: Record<string, string | undefined>,
|
||||
height: number, width: number) {
|
||||
const result = component.render(props);
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ export type Album = {
|
|||
artwork: string;
|
||||
title: string;
|
||||
artist: string;
|
||||
src: Record<string, any> | ExternalImageSource[] | undefined
|
||||
};
|
||||
|
||||
export type ExternalImageSource = {
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
export function getCookieLookup() {
|
||||
if (typeof document !== 'object') {
|
||||
return {};
|
||||
}
|
||||
|
||||
return document.cookie.split('; ').reduce((lookup, v) => {
|
||||
const parts = v.split('=');
|
||||
lookup[parts[0]] = parts[1];
|
||||
|
||||
return lookup;
|
||||
}, {});
|
||||
}
|
||||
|
||||
export const getCurrentCookieValue = (name) => {
|
||||
const cookies = getCookieLookup();
|
||||
return cookies[name] ?? '';
|
||||
};
|
||||
|
|
@ -7,117 +7,26 @@
|
|||
export let data: PageData;
|
||||
let articles: Article[];
|
||||
let currentPage: number;
|
||||
let totalPages: number;
|
||||
let totalArticles: number;
|
||||
let limit: number;
|
||||
$: ({ articles, currentPage, totalPages, totalArticles, limit } = data);
|
||||
$: seoTitle = `Tech Articles - Page ${currentPage} | Bradley Shellnut`;
|
||||
</script>
|
||||
|
||||
<div class="pageStyles">
|
||||
<div>
|
||||
<h1 style="margin-bottom: 2rem">Favorite Tech Articles</h1>
|
||||
<Pagination
|
||||
additionalClasses="top-pagination"
|
||||
pageSize={limit}
|
||||
totalCount={totalArticles}
|
||||
currentPage={currentPage || 1}
|
||||
skip={currentPage}
|
||||
base="/articles"
|
||||
/>
|
||||
<Articles {articles} {totalArticles} classes={['columns']} />
|
||||
<!-- <div class="articlesStyles">
|
||||
{#each articles as article (article.hashed_url)}
|
||||
<div class="articleStyles card">
|
||||
<section>
|
||||
<h3>
|
||||
<a
|
||||
target="_blank"
|
||||
aria-label={`Link to ${article.title}`}
|
||||
href={article.url.toString()}
|
||||
rel="noreferrer"
|
||||
>
|
||||
{article.title}
|
||||
</a>
|
||||
</h3>
|
||||
</section>
|
||||
<section>
|
||||
<p>Reading time: {article.reading_time} minutes</p>
|
||||
<div class="tagStyles">
|
||||
<p>Tags:</p>
|
||||
{#each article.tags as tag}
|
||||
<p>{tag}</p>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{/each}
|
||||
</div> -->
|
||||
<Pagination
|
||||
additionalClasses="bottom-pagination"
|
||||
pageSize={limit}
|
||||
totalCount={totalArticles}
|
||||
currentPage={currentPage || 1}
|
||||
skip={currentPage}
|
||||
base="/articles"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.pageStyles {
|
||||
.bottom-pagination {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.bottom-pagination {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.articlesStyles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(250px, 1fr));
|
||||
min-height: 800px;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
grid-template-columns: repeat(2, minmax(250px, 1fr));
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
grid-template-columns: minmax(250px, 1fr);
|
||||
}
|
||||
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.articleStyles {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
align-items: start;
|
||||
& a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* p {
|
||||
margin: 0.4rem 0.25rem;
|
||||
} */
|
||||
}
|
||||
|
||||
.tagStyles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
|
||||
& p + p {
|
||||
background-color: var(--linkHover);
|
||||
color: var(--buttonTextColor);
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin: 0.5rem;
|
||||
border-radius: 2px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -13,6 +13,7 @@ export async function GET({ url }) {
|
|||
const page = url.searchParams.get('page') ?? undefined;
|
||||
const content = url.searchParams.get('content') ?? '';
|
||||
|
||||
// @ts-expect-error: Argument of type 'typeof SocialImageCard__SvelteComponent_' is not assignable to parameter of type 'SvelteComponent<any, any, any>'
|
||||
return componentToPng(SocialImageCard, {
|
||||
header,
|
||||
page,
|
||||
|
|
|
|||
|
|
@ -6,9 +6,13 @@
|
|||
import weddingWebsite from "$lib/assets/images/portfolio/Wedding_Website.png?as=run";
|
||||
import oldSite from '$lib/assets/images/portfolio/Old_Website_Bradley_Shellnut.png?as=run';
|
||||
import shellnutArchitectWebsite from "$lib/assets/images/portfolio/Mark_Shellnut_Architect.png?as=run";
|
||||
// @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307)
|
||||
import PersonalWebsiteSvelteKit from "$lib/content/portfolio/personal/personal-website-sveltekit.md";
|
||||
// @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307)
|
||||
import WeddingWebsite from '$lib/content/portfolio/personal/wedding-website.md';
|
||||
// @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307)
|
||||
import MarkShellnutArchitect from '$lib/content/portfolio/professional/mark-shellnut-architect.md';
|
||||
// @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307)
|
||||
import OldWebsite from '$lib/content/portfolio/personal/old-website.md';
|
||||
import ExternalLink from '$lib/components/ExternalLink.svelte';
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,11 @@
|
|||
import ExternalLink from '$lib/components/ExternalLink.svelte';
|
||||
import LazyImage from '$lib/components/LazyImage.svelte';
|
||||
import desktop from '$lib/assets/images/Desktop_so_clean.jpg?as=run';
|
||||
// @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307)
|
||||
import HardwareAccessories from '$lib/content/uses/hardware-accessories.md';
|
||||
// @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307)
|
||||
import Development from '$lib/content/uses/development.md';
|
||||
// @ts-expect-error: Cannot find module '$lib/content/uses/development.md' or its corresponding type declarations.ts(2307)
|
||||
import PrivacyHardwareSoftware from '$lib/content/uses/privacy-hardware-software.md';
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue