Restructuring
This commit is contained in:
parent
7813a2a6c5
commit
4661d14912
|
@ -1,15 +0,0 @@
|
||||||
---
|
|
||||||
title: Third post
|
|
||||||
excerpt: This is the most interesting post that you will ever read. It is the third post, which is extremely interesting and I am too lazy to even input lorem ipsum xd.
|
|
||||||
date: 2023-01-01
|
|
||||||
tags:
|
|
||||||
- first
|
|
||||||
- post
|
|
||||||
published: true
|
|
||||||
image: Feature.jpg
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Svelte
|
|
||||||
|
|
||||||
Media inside the **Svelte** folder is server from the `static` folder.
|
|
|
@ -28,7 +28,7 @@
|
||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
class="chip {option === selected
|
class="chip {option === selected
|
||||||
? 'variant-filled-tertiary'
|
? 'variant-filled-primary'
|
||||||
: 'variant-soft-primary'}"
|
: 'variant-soft-primary'}"
|
||||||
on:click={() => clickHandler(option)}
|
on:click={() => clickHandler(option)}
|
||||||
>
|
>
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
class=" bg-black/50 w-full aspect-[21/9] max-h-[540px] rounded-t-[1.3rem]"
|
class=" bg-black/50 w-full aspect-[21/9] max-h-[540px] rounded-t-[1.3rem]"
|
||||||
/>
|
/>
|
||||||
</header>
|
</header>
|
||||||
<div class="flex-auto flex justify-between items-center">
|
<div class="flex-auto flex justify-between items-center py-4 px-2">
|
||||||
{#if tags && tags.length > 0}
|
{#if tags && tags.length > 0}
|
||||||
<div class="flex mb-2 items-center gap-2">
|
<div class="flex mb-2 items-center gap-2">
|
||||||
tags: {#each tags as tag}
|
tags: {#each tags as tag}
|
||||||
|
@ -35,9 +35,9 @@
|
||||||
{/if}
|
{/if}
|
||||||
<small>On {formatDate(date)}</small>
|
<small>On {formatDate(date)}</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-4 text-token">
|
<div class="space-y-4">
|
||||||
<h2 class="h2" data-toc-ignore>{title}</h2>
|
<h2 class="h2" data-toc-ignore>{title}</h2>
|
||||||
<div class="prose max-w-none text-token">
|
<div class=" max-w-none text-token">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,7 +4,6 @@
|
||||||
|
|
||||||
export let isMostRecent: boolean = false;
|
export let isMostRecent: boolean = false;
|
||||||
export let type: 'blog' | 'projects';
|
export let type: 'blog' | 'projects';
|
||||||
export let layout: 'row' | 'column' = 'column';
|
|
||||||
export let post: BlogPost;
|
export let post: BlogPost;
|
||||||
// export let published: boolean;
|
// export let published: boolean;
|
||||||
// export let headlineOrder: 'h3' | '' = '';
|
// export let headlineOrder: 'h3' | '' = '';
|
||||||
|
@ -20,7 +19,7 @@
|
||||||
|
|
||||||
$: target = post && post['href'] && isAnExternalLink(post['href']) ? '_blank' : undefined;
|
$: target = post && post['href'] && isAnExternalLink(post['href']) ? '_blank' : undefined;
|
||||||
|
|
||||||
const displayDate = new Date(Date.parse(post.date)).toLocaleDateString(undefined, {
|
const displayDate = new Date(Date.parse(post.date ?? '')).toLocaleDateString(undefined, {
|
||||||
year: 'numeric',
|
year: 'numeric',
|
||||||
month: 'short',
|
month: 'short',
|
||||||
day: 'numeric'
|
day: 'numeric'
|
||||||
|
@ -31,7 +30,7 @@
|
||||||
{href}
|
{href}
|
||||||
{target}
|
{target}
|
||||||
data-sveltekit-preload-data="hover"
|
data-sveltekit-preload-data="hover"
|
||||||
class="card bg-gradient-to-br variant-gradient-primary-tertiary card-hover overflow-hidden flex flex-col space-y-4"
|
class="card bg-gradient-to-br variant-glass-primary card-hover overflow-hidden flex flex-col space-y-4"
|
||||||
data-analytics={`{"context":"grid","variant":"preview"}`}
|
data-analytics={`{"context":"grid","variant":"preview"}`}
|
||||||
>
|
>
|
||||||
<div class="flex flex-col justify-between auto-rows-auto w-full h-full text-token">
|
<div class="flex flex-col justify-between auto-rows-auto w-full h-full text-token">
|
||||||
|
@ -62,8 +61,9 @@
|
||||||
<a
|
<a
|
||||||
data-sveltekit-preload-data="hover"
|
data-sveltekit-preload-data="hover"
|
||||||
href="/blog?{new URLSearchParams({ tag }).toString()}"
|
href="/blog?{new URLSearchParams({ tag }).toString()}"
|
||||||
|
class="chip variant-glass-secondary"
|
||||||
>
|
>
|
||||||
<h6 class="chip variant-filled-tertiary text-token">{tag}</h6>
|
<p class="text-md text-token">{tag}</p>
|
||||||
</a>
|
</a>
|
||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -1,18 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
|
|
||||||
import PostContentLayout from './post-content-layout.svelte';
|
|
||||||
|
|
||||||
import type { BlogPost } from '$lib/types/blog';
|
|
||||||
|
|
||||||
|
|
||||||
export let post: BlogPost;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<PostContentLayout
|
|
||||||
{...post}
|
|
||||||
imagesDirectoryName="blog"
|
|
||||||
baseUrl="https://www.mattmor.in/blog/"
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
</PostContentLayout>
|
|
||||||
|
|
|
@ -1,50 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import type { BlogTag } from '$lib/types/blog';
|
|
||||||
import Button from '$lib/components/ui-library/button/button.svelte';
|
|
||||||
export let selected: BlogTag;
|
|
||||||
let className = '';
|
|
||||||
export { className as class };
|
|
||||||
import { page } from '$app/stores';
|
|
||||||
import { goto } from '$app/navigation';
|
|
||||||
|
|
||||||
let options: BlogTag[] = [
|
|
||||||
'Company building',
|
|
||||||
'Engineering',
|
|
||||||
'Gitpod updates',
|
|
||||||
'Developer experience',
|
|
||||||
];
|
|
||||||
|
|
||||||
const clickHandler = (value: BlogTag) => {
|
|
||||||
if (value === selected) {
|
|
||||||
goto(`/blog`, { keepFocus: true, noScroll: true });
|
|
||||||
selected = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let query = new URLSearchParams($page.url.searchParams.toString());
|
|
||||||
query.set('tag', value);
|
|
||||||
goto(`?${query.toString()}`, { keepFocus: true, noScroll: true });
|
|
||||||
selected = value;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<section class="flex justify-center flex-col items-center {className}">
|
|
||||||
<p class="text-semibold mb-2 md:mb-4">
|
|
||||||
Sort by category
|
|
||||||
</p>
|
|
||||||
<ul class="flex flex-wrap justify-center gap-2">
|
|
||||||
{#each options as option}
|
|
||||||
<li>
|
|
||||||
<Button
|
|
||||||
class={option === selected
|
|
||||||
? 'dark:!bg-primary dark:!text-black !bg-black !text-white'
|
|
||||||
: ''}
|
|
||||||
variant="cta"
|
|
||||||
size="medium"
|
|
||||||
on:click={() => clickHandler(option)}
|
|
||||||
>
|
|
||||||
{option}
|
|
||||||
</Button>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
|
@ -1,58 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { formatDate } from '$src/content/utils.js';
|
|
||||||
|
|
||||||
export let baseUrl: string;
|
|
||||||
export let imagesDirectoryName: string;
|
|
||||||
|
|
||||||
export let date: string = '';
|
|
||||||
export let author: string = '';
|
|
||||||
export let slug: string = '';
|
|
||||||
export let title: string;
|
|
||||||
export let image: string;
|
|
||||||
export let teaserImage: string;
|
|
||||||
export let excerpt: string;
|
|
||||||
export let tags: string[] = [];
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<article>
|
|
||||||
<div class="flex justify-center mt-4 mb-8">
|
|
||||||
<div class="w-full lg:w-[50rem] leading-[177.7%]">
|
|
||||||
<img
|
|
||||||
src="/images/{imagesDirectoryName}/{slug}/{teaserImage || image}"
|
|
||||||
alt={`${title}`}
|
|
||||||
class="max-h-[540px] rounded-tl-2xl rounded-tr-[1.3rem]"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="content-blog prose prose-img:rounded-tl-2xl prose-img:rounded-tr-[1.3rem] max-w-none text-body"
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
class="{tags && tags.length > 0
|
|
||||||
? '!mb-2'
|
|
||||||
: '!mb-2'} mt-[1.875rem] text-body text-white"
|
|
||||||
>
|
|
||||||
{formatDate(date)}
|
|
||||||
</p>
|
|
||||||
{#if tags && tags.length > 0}
|
|
||||||
<div class="flex mb-2 items-center gap-2">
|
|
||||||
{#each tags as tag}
|
|
||||||
<a
|
|
||||||
data-sveltekit-preload-data="hover"
|
|
||||||
href="/blog?{new URLSearchParams({tag}).toString()}"
|
|
||||||
>
|
|
||||||
<span class="chip variant-ghost-surface text-white">{tag}</span>
|
|
||||||
</a>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<style lang="postcss">
|
|
||||||
.prose :global(nav.toc) {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,82 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { isAnExternalLink } from '$lib/utils/helpers';
|
|
||||||
import type { BlogPost } from '$lib/types/blog';
|
|
||||||
|
|
||||||
export let post: BlogPost;
|
|
||||||
export let isMostRecent: boolean = false;
|
|
||||||
export let type: 'blog';
|
|
||||||
export let layout: 'row' | 'column' = 'column';
|
|
||||||
export let published: boolean = true;
|
|
||||||
export let headlineOrder: 'h3' | '' = '';
|
|
||||||
export let badge: string = '';
|
|
||||||
export let textWidth: string = '';
|
|
||||||
|
|
||||||
const generateURL = (href?: string, slug?: string) => {
|
|
||||||
if (href) return href;
|
|
||||||
return `/${type}/${slug}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
$: href = generateURL(post['href'], post.slug);
|
|
||||||
|
|
||||||
$: target = post && post['href'] && isAnExternalLink(post['href']) ? '_blank' : undefined;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<a
|
|
||||||
{href}
|
|
||||||
{target}
|
|
||||||
data-sveltekit-preload-data="hover"
|
|
||||||
class="card"
|
|
||||||
data-analytics={`{"context":"grid","variant":"preview"}`}
|
|
||||||
>
|
|
||||||
<div class="w-full text-token grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<!-- Detailed -->
|
|
||||||
<a
|
|
||||||
class="card bg-gradient-to-br variant-gradient-tertiary-primary card-hover overflow-hidden"
|
|
||||||
href="/blog/{post.slug}"
|
|
||||||
>
|
|
||||||
<header>
|
|
||||||
<img
|
|
||||||
src="/images/blog/{post.slug}/{post.image}"
|
|
||||||
class="bg-black/50 w-full aspect-[21/9]"
|
|
||||||
alt="Post"
|
|
||||||
/>
|
|
||||||
</header>
|
|
||||||
<div class="p-4 space-y-4">
|
|
||||||
<h6 class="text-2" data-toc-ignore>
|
|
||||||
<div class="items-center flex gap-2">
|
|
||||||
{#if post.tags}
|
|
||||||
{#each post.tags as tag}
|
|
||||||
<span class="chip variant-ghost-surface">{tag}</span>
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</h6>
|
|
||||||
<h3 class="h3" data-toc-ignore>{post.title}</h3>
|
|
||||||
<article>
|
|
||||||
<p>
|
|
||||||
<!-- cspell:disable -->
|
|
||||||
{post.excerpt}
|
|
||||||
<!-- cspell:enable -->
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
<hr class="opacity-50" />
|
|
||||||
<footer class="p-4 flex justify-start items-center space-x-4">
|
|
||||||
<div class="flex-auto flex justify-between items-center">
|
|
||||||
<h6 class="font-bold" data-toc-ignore>By Matt</h6>
|
|
||||||
<small>
|
|
||||||
{#if post.date}
|
|
||||||
<span class="date text-p-small ml-macro">
|
|
||||||
{new Date(Date.parse(post.date)).toLocaleDateString(undefined, {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric'
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
|
@ -1,4 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
|
@ -1,68 +0,0 @@
|
||||||
<script>
|
|
||||||
import Scene from './Scene.svelte';
|
|
||||||
import { Canvas } from '@threlte/core';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- YOU CAN DELETE EVERYTHING IN THIS PAGE -->
|
|
||||||
|
|
||||||
<div class="container h-full mx-auto flex-col justify-center items-center">
|
|
||||||
<div class="space-y-10 mt-4 text-center flex flex-col items-center">
|
|
||||||
<h1 class="h1">I make the wheels turn.</h1>
|
|
||||||
<!-- Animated Logo -->
|
|
||||||
<figure>
|
|
||||||
<section class="img-bg" />
|
|
||||||
<img src="/images/profile-pic.png" class="w-8 h-8 md:h-[200px] md:w-[200px]" alt="Profile picture" />
|
|
||||||
</figure>
|
|
||||||
<!-- / -->
|
|
||||||
|
|
||||||
<div class="flex justify-center space-x-2">
|
|
||||||
<a class="btn variant-filled" href="/blog" target="_blank" rel="noreferrer">
|
|
||||||
Look at my blog
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<img
|
|
||||||
src="/animations/infinity-loop-icon.svg"
|
|
||||||
alt="Icon"
|
|
||||||
class="w-16 md:w-32 lg:w-48 h-full rounded-full"
|
|
||||||
/>
|
|
||||||
<h2 class="h2">My github contributions</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="scene w-full">
|
|
||||||
<Canvas>
|
|
||||||
<Scene />
|
|
||||||
</Canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="postcss">
|
|
||||||
figure {
|
|
||||||
@apply flex relative flex-col;
|
|
||||||
}
|
|
||||||
.img-bg {
|
|
||||||
@apply absolute z-[-1] rounded-full blur-[50px] transition-all;
|
|
||||||
animation: pulse 5s cubic-bezier(0, 0, 0, 1) infinite, glow 5s linear infinite;
|
|
||||||
}
|
|
||||||
.scene {
|
|
||||||
@apply relative inset-1 w-[100%vw] h-[150px] md:h-[400px] lg:h-[600px];
|
|
||||||
}
|
|
||||||
@keyframes glow {
|
|
||||||
0% {
|
|
||||||
@apply bg-primary-400/50;
|
|
||||||
}
|
|
||||||
33% {
|
|
||||||
@apply bg-secondary-400/50;
|
|
||||||
}
|
|
||||||
66% {
|
|
||||||
@apply bg-tertiary-400/50;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
@apply bg-primary-400/50;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes pulse {
|
|
||||||
50% {
|
|
||||||
transform: scale(1.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1 +0,0 @@
|
||||||
<slot />
|
|
|
@ -1 +0,0 @@
|
||||||
<slot />
|
|
|
@ -1,7 +1,6 @@
|
||||||
import adapter from '@sveltejs/adapter-cloudflare';
|
import adapter from '@sveltejs/adapter-cloudflare';
|
||||||
import { vitePreprocess } from '@sveltejs/kit/vite';
|
import { vitePreprocess } from '@sveltejs/kit/vite';
|
||||||
import preprocess from 'svelte-preprocess';
|
import preprocess from 'svelte-preprocess';
|
||||||
import path from 'path';
|
|
||||||
|
|
||||||
// import { mdsvexGlobalComponents } from './src/lib/utils/mdsvexGlobalComponents.js/index.js';
|
// import { mdsvexGlobalComponents } from './src/lib/utils/mdsvexGlobalComponents.js/index.js';
|
||||||
import { mdsvex } from 'mdsvex';
|
import { mdsvex } from 'mdsvex';
|
||||||
|
@ -42,11 +41,11 @@ const config = {
|
||||||
adapter: adapter({}),
|
adapter: adapter({}),
|
||||||
// sometimes problems with
|
// sometimes problems with
|
||||||
alias: {
|
alias: {
|
||||||
$lib: path.resolve('src', 'lib'),
|
$lib: './src/lib',
|
||||||
$root: path.resolve('/'),
|
$root: './',
|
||||||
$src: path.resolve('src'),
|
$src: './src',
|
||||||
$routes: path.resolve('src', 'routes'),
|
$routes: './src/routes',
|
||||||
$content: path.resolve('src', 'content')
|
$content: './src/content'
|
||||||
},
|
},
|
||||||
// TODO: FIX Banning external malware scripts for security and privacy of users, threw errors,
|
// TODO: FIX Banning external malware scripts for security and privacy of users, threw errors,
|
||||||
// csp: {
|
// csp: {
|
||||||
|
|
Loading…
Reference in New Issue