blog / projects logic update
This commit is contained in:
parent
1f04129666
commit
57584635f5
|
@ -0,0 +1,11 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import PostLayout from './PostLayout.svelte';
|
||||||
|
|
||||||
|
import type { Post } from '$lib/types/post';
|
||||||
|
|
||||||
|
export let post: Post;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<PostLayout {...post} imagesDirectoryName="blog">
|
||||||
|
<slot />
|
||||||
|
</PostLayout>
|
|
@ -1,15 +1,31 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { isAnExternalLink } from '$lib/utils/helpers';
|
import { isAnExternalLink } from '$lib/utils/helpers';
|
||||||
import type { BlogPost } from '$lib/types/blog';
|
import type { Post } from '$lib/types/post';
|
||||||
|
import { onMount, onDestroy } from 'svelte';
|
||||||
|
|
||||||
export let isMostRecent: boolean = false;
|
export let isMostRecent: boolean = false;
|
||||||
export let type: 'blog' | 'projects';
|
export let type: Post['type'] = 'blog' | 'projects';
|
||||||
export let post: BlogPost;
|
export let post: Post;
|
||||||
// export let published: boolean;
|
// export let published: boolean;
|
||||||
// export let headlineOrder: 'h3' | '' = '';
|
// export let headlineOrder: 'h3' | '' = '';
|
||||||
// export let badge: string = '';
|
// export let badge: string = '';
|
||||||
// export let textWidth: string = '';
|
// export let textWidth: string = '';
|
||||||
|
|
||||||
|
//window width
|
||||||
|
let iteration = 0;
|
||||||
|
let interval;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
console.log(window.innerWidth);
|
||||||
|
iteration++;
|
||||||
|
|
||||||
|
if (iteration === 50) {
|
||||||
|
clearInterval(interval);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
const generateURL = (href?: string, slug?: string) => {
|
const generateURL = (href?: string, slug?: string) => {
|
||||||
if (href) return href;
|
if (href) return href;
|
||||||
return `/${type}/${slug}`;
|
return `/${type}/${slug}`;
|
||||||
|
@ -23,7 +39,10 @@
|
||||||
year: 'numeric',
|
year: 'numeric',
|
||||||
month: 'short',
|
month: 'short',
|
||||||
day: 'numeric'
|
day: 'numeric'
|
||||||
});
|
});
|
||||||
|
onDestroy(() => {
|
||||||
|
clearInterval(interval);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<a
|
<a
|
||||||
|
@ -31,19 +50,18 @@
|
||||||
{target}
|
{target}
|
||||||
data-sveltekit-preload-data="hover"
|
data-sveltekit-preload-data="hover"
|
||||||
class="card bg-gradient-to-br variant-glass-primary 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">
|
<div class="flex flex-col justify-between auto-rows-auto w-full h-full text-token">
|
||||||
<header>
|
<header>
|
||||||
<img
|
<img
|
||||||
src="/images/blog/{post.slug}/{post.image}"
|
src="/images/blog/{post.slug}/{post.image}"
|
||||||
class="bg-black/200 w-full aspect-[3/2]"
|
class="bg-black/200 w-full aspect-[3/2]"
|
||||||
alt="Post"
|
alt="Post preview"
|
||||||
/>
|
/>
|
||||||
</header>
|
</header>
|
||||||
<section class="p-4 space-y-4">
|
<section class="p-4 space-y-4">
|
||||||
<h2 class="h2" data-toc-ignore>{post.title}</h2>
|
<h2 class="h2 text-ellipsis overflow-hidden" data-toc-ignore>{post.title}</h2>
|
||||||
<article>
|
<article class="text-ellipsis break-words overflow-hidden max-h-[128px] max-w-4">
|
||||||
<p>
|
<p>
|
||||||
<!-- cspell:disable -->
|
<!-- cspell:disable -->
|
||||||
{post.excerpt}
|
{post.excerpt}
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { Project } from '$lib/types/projects';
|
import ProjectLayout from '$lib/components/blog/PostLayout.svelte';
|
||||||
import ProjectContentLayout from '../blog/PostLayout.svelte';
|
import type { Post } from '$lib/types/post';
|
||||||
|
|
||||||
export let post: Project;
|
export let post: Project;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ProjectContentLayout {...post} imagesDirectoryName="blog">
|
<ProjectLayout {...post} imagesDirectoryName="projects">
|
||||||
<slot />
|
<slot />
|
||||||
</ProjectContentLayout>
|
</ProjectLayout>
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import { listBlogPosts } from '$content/blog';
|
// layout.server.ts
|
||||||
|
import { listPosts } from '$content/blog';
|
||||||
import { error } from '@sveltejs/kit';
|
import { error } from '@sveltejs/kit';
|
||||||
|
|
||||||
function shuffle<T>(array: T[]) {
|
function shuffle<T>(array: T[]) {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import BlogContentLayout from '$lib/components/blog/BlogLayout.svelte';
|
import BlogContentLayout from '$lib/components/blog/BlogContentLayout.svelte';
|
||||||
import type { PageData } from './$types';
|
import type { PageData } from './$types';
|
||||||
|
|
||||||
export let data: PageData;
|
export let data: PageData;
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
import { redirect } from '@sveltejs/kit';
|
||||||
|
|
||||||
|
export async function load() {
|
||||||
|
throw redirect(301, '/blog/rss.xml');
|
||||||
|
}
|
|
@ -1,5 +1,4 @@
|
||||||
import { listProjects } from '$content/projects';
|
import { listProjects } from '$content/projects';
|
||||||
import type { LayoutServerLoad } from './$types';
|
|
||||||
|
|
||||||
export const load = () => {
|
export const load = () => {
|
||||||
return {
|
return {
|
||||||
|
|
Loading…
Reference in New Issue