Restructuring
This commit is contained in:
matthieu42morin
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>
|
||||
<button
|
||||
class="chip {option === selected
|
||||
? 'variant-filled-tertiary'
|
||||
? 'variant-filled-primary'
|
||||
: 'variant-soft-primary'}"
|
||||
on:click={() => clickHandler(option)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
class=" bg-black/50 w-full aspect-[21/9] max-h-[540px] rounded-t-[1.3rem]"
|
||||
/>
|
||||
</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}
|
||||
<div class="flex mb-2 items-center gap-2">
|
||||
tags: {#each tags as tag}
|
||||
|
|
@ -35,9 +35,9 @@
|
|||
{/if}
|
||||
<small>On {formatDate(date)}</small>
|
||||
</div>
|
||||
<div class="space-y-4 text-token">
|
||||
<div class="space-y-4">
|
||||
<h2 class="h2" data-toc-ignore>{title}</h2>
|
||||
<div class="prose max-w-none text-token">
|
||||
<div class=" max-w-none text-token">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
|
||||
export let isMostRecent: boolean = false;
|
||||
export let type: 'blog' | 'projects';
|
||||
export let layout: 'row' | 'column' = 'column';
|
||||
export let post: BlogPost;
|
||||
// export let published: boolean;
|
||||
// export let headlineOrder: 'h3' | '' = '';
|
||||
|
|
@ -20,7 +19,7 @@
|
|||
|
||||
$: 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',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
|
|
@ -31,7 +30,7 @@
|
|||
{href}
|
||||
{target}
|
||||
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"}`}
|
||||
>
|
||||
<div class="flex flex-col justify-between auto-rows-auto w-full h-full text-token">
|
||||
|
|
@ -62,8 +61,9 @@
|
|||
<a
|
||||
data-sveltekit-preload-data="hover"
|
||||
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>
|
||||
{/each}
|
||||
{/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 { vitePreprocess } from '@sveltejs/kit/vite';
|
||||
import preprocess from 'svelte-preprocess';
|
||||
import path from 'path';
|
||||
|
||||
// import { mdsvexGlobalComponents } from './src/lib/utils/mdsvexGlobalComponents.js/index.js';
|
||||
import { mdsvex } from 'mdsvex';
|
||||
|
|
@ -42,11 +41,11 @@ const config = {
|
|||
adapter: adapter({}),
|
||||
// sometimes problems with
|
||||
alias: {
|
||||
$lib: path.resolve('src', 'lib'),
|
||||
$root: path.resolve('/'),
|
||||
$src: path.resolve('src'),
|
||||
$routes: path.resolve('src', 'routes'),
|
||||
$content: path.resolve('src', 'content')
|
||||
$lib: './src/lib',
|
||||
$root: './',
|
||||
$src: './src',
|
||||
$routes: './src/routes',
|
||||
$content: './src/content'
|
||||
},
|
||||
// TODO: FIX Banning external malware scripts for security and privacy of users, threw errors,
|
||||
// csp: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue