Compare commits

...
Sign in to create a new pull request.

1 commit
main ... svelte

Author SHA1 Message Date
38065f6d7d migrate to svelte5 partially 2024-12-11 12:52:12 +01:00
15 changed files with 3881 additions and 5433 deletions

View file

@ -3,7 +3,6 @@ import remarkGFM from 'remark-gfm';
import remarkEmoji from 'remark-emoji';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import remarkFootnotes from 'remark-footnotes';
const config = defineConfig({
layout: {
@ -15,7 +14,7 @@ const config = defineConfig({
dashes: 'oldschool',
},
remarkPlugins: [remarkGFM, remarkEmoji, remarkFootnotes],
remarkPlugins: [remarkGFM, remarkEmoji],
rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behaviour: 'append' }]],
});

View file

@ -19,40 +19,41 @@
"format": "prettier --write --plugin-search-dir=. ."
},
"devDependencies": {
"@sveltejs/adapter-cloudflare": "^1.0.0",
"@sveltejs/kit": "^1.0.1",
"@typescript-eslint/eslint-plugin": "^5.47.1",
"@typescript-eslint/parser": "^5.47.1",
"autoprefixer": "^10.4.13",
"browserslist": "^4.21.4",
"eslint": "^8.31.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^4.0.0",
"fontaine": "^0.4.1",
"@iconify/svelte": "^4.1.0",
"@sveltejs/adapter-cloudflare": "^4.8.0",
"@sveltejs/kit": "^2.9.0",
"@typescript-eslint/eslint-plugin": "^8.17.0",
"@typescript-eslint/parser": "^8.17.0",
"autoprefixer": "^10.4.20",
"browserslist": "^4.24.2",
"eslint": "^9.16.0",
"eslint-config-prettier": "^9.1.0",
"fontaine": "^0.5.0",
"mdi-svelte": "^1.1.2",
"mdsvex": "^0.10.6",
"postcss": "^8.4.20",
"postcss-load-config": "^4.0.1",
"postcss-normalize": "^10.0.1",
"prettier": "^2.8.1",
"prettier-plugin-svelte": "^2.9.0",
"rehype-autolink-headings": "^6.1.1",
"rehype-slug": "^5.1.0",
"remark-emoji": "^3.0.2",
"remark-footnotes": "2.0",
"remark-gfm": "^3.0.1",
"svelte": "^3.55.0",
"svelte-check": "^3.0.1",
"svelte-preprocess": "^5.0.0",
"tslib": "^2.4.1",
"typescript": "^4.9.4",
"vite": "^4.0.3",
"vite-imagetools": "^4.0.12"
"mdsvex": "^0.12.3",
"postcss": "^8.4.49",
"postcss-load-config": "^6.0.1",
"postcss-normalize": "^13.0.1",
"prettier": "^3.4.2",
"prettier-plugin-svelte": "^3.3.2",
"rehype-autolink-headings": "^7.1.0",
"rehype-slug": "^6.0.0",
"remark-emoji": "^5.0.1",
"remark-gfm": "^4.0.0",
"svelte": "^5.8.1",
"svelte-check": "^4.1.1",
"svelte-preprocess": "^6.0.3",
"tailwindcss": "^3.4.16",
"tslib": "^2.8.1",
"typescript": "^5.7.2",
"vite": "^6.0.3",
"vite-imagetools": "^7.0.5"
},
"dependencies": {
"@fontsource/ubuntu-mono": "^4.5.11",
"@mdi/js": "^7.1.96",
"imagetools-core": "^3.2.3"
"@fontsource/ubuntu-mono": "^5.1.0",
"@mdi/js": "^7.4.47",
"@sveltejs/vite-plugin-svelte": "^5.0.1",
"imagetools-core": "^7.0.2"
},
"browserslist": "last 2 versions"
}

6164
pnpm-lock.yaml generated

File diff suppressed because it is too large Load diff

6
postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

3
src/app.css Normal file
View file

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

View file

@ -3,18 +3,19 @@
</script>
<script>
import { mdiCopyright } from '@mdi/js';
import Icon from 'mdi-svelte';
import Icon from '@iconify/svelte';
import Link from './Link.svelte';
</script>
<footer>
<footer class="mt-16 p-8">
<!-- container class inherited from __layout-->
<div class="container">
<p>Copyright <Icon path={mdiCopyright} size="1rem" /> {year} Alexander Daichendt</p>
<p class="flex items-center gap-1">
Copyright <Icon icon="material-symbols:copyright" class="inline-block" />
{year} Alexander Daichendt
</p>
<div class="footerLinks">
<div class="flex md:justify-between md:flex-row flex-col gap-1">
<Link href="/cat">Meeeeeow</Link>
<Link href="/privacy">Privacy Policy</Link>
<Link href="/impressum">Impressum</Link>
@ -26,18 +27,12 @@
<style>
footer {
background-color: var(--special-bg-color);
padding: 2rem;
margin-top: 4rem;
}
@media screen and (max-width: 500px) {
.footerLinks {
flex-direction: column;
}
}
.footerLinks {
display: flex;
justify-content: space-between;
}
:global(footer div a) {
color: var(--text-soft-color) !important;
}

View file

@ -29,7 +29,7 @@
export let alt: string;
/** `img` attribute */
export let loading: string = 'lazy';
export let loading: 'lazy' | 'eager' = 'lazy';
</script>
<!--

View file

@ -1,7 +1,7 @@
<script>
</script>
<div tabindex="0">
<div tabindex="-1">
<table id="table">
<slot />
</table>

View file

@ -71,7 +71,7 @@
<label class="switch">
<input aria-label="Nightmode" type="checkbox" bind:checked on:change={toggleTheme} />
<span class="slider round" />
<span class="slider round"></span>
</label>
<style>

View file

@ -3,6 +3,7 @@
import Footer from '$lib/components/Footer.svelte';
import Header from '$lib/components/Header.svelte';
import '@fontsource/ubuntu-mono/400.css';
import '../app.css';
</script>
<div class="container upper">
@ -15,9 +16,6 @@
<Footer />
<style>
@import 'normalize.css';
@import 'sanitize.css';
.upper {
min-height: calc(100vh - 4rem - 8px);
}

View file

@ -1,62 +0,0 @@
<script lang="ts">
import type { PageData } from './$types';
import Image from '$lib/components/CatImage.svelte';
import Link from '$lib/components/Link.svelte';
import SEO from '$components/SEO.svelte';
export let data: PageData;
$: cats = data.cats;
</script>
<SEO />
<section class="masonry">
{#each cats as cat}
<figure>
<Link
href={`https://cats.daichendt.one/${cat.images[cat.images.length - 1].href}`}
disableIcon
disablePrefetch
>
<Image
metadata={cat.images}
sizes="(max-width: 720px) 1px, (max-width: 1280px) 360px, 720px"
/>
</Link>
</figure>
{/each}
</section>
<style>
.masonry {
column-count: 3;
column-gap: 1em;
}
/* Masonry on medium-sized screens */
@media only screen and (max-width: 800px) and (min-width: 500px) {
.masonry {
column-count: 2;
}
}
/* Masonry on small screens */
@media only screen and (max-width: 500px) and (min-width: 0px) {
.masonry {
column-count: 1;
}
}
figure {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
margin: 0;
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
figure:hover {
filter: brightness(90%);
}
</style>

View file

@ -1,9 +0,0 @@
import type { PageLoad } from './$types';
export const load: PageLoad = async ({ fetch }) => {
const response = await fetch('https://cats.daichendt.one/list');
const asJson = await response.json();
return {
cats: response.ok && asJson,
};
};

View file

@ -1,5 +1,5 @@
import adapter from '@sveltejs/adapter-cloudflare';
import preprocess from 'svelte-preprocess';
import { sveltePreprocess } from 'svelte-preprocess';
import autoprefixer from 'autoprefixer';
import cssNormalizer from 'postcss-normalize';
import { mdsvex } from 'mdsvex';
@ -12,7 +12,7 @@ const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: [
preprocess({ postcss: { plugins: [autoprefixer, cssNormalizer()] } }),
sveltePreprocess({ postcss: { plugins: [autoprefixer, cssNormalizer()] } }),
mdsvex(mdsvexconfig),
],

8
tailwind.config.js Normal file
View file

@ -0,0 +1,8 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {},
},
plugins: [],
};

2869
yarn.lock

File diff suppressed because it is too large Load diff