blogs pages, projs - unfinished
This commit is contained in:
parent
35c507e55b
commit
a89f69c69c
|
@ -1,60 +1,73 @@
|
|||
<script lang="ts">
|
||||
import PostPreview from '$lib/components/blog/PostPreview.svelte';
|
||||
import CategoryFilter from '$lib/components/blog/CategoryFilter.svelte';
|
||||
import ogSquareImageSrc from '$lib/assets/home/home-open-graph-square.jpg';
|
||||
import ogImageSrc from '$lib/assets/home/home-open-graph.jpg';
|
||||
import twitterImageSrc from '$lib/assets/home/home-twitter.jpg';
|
||||
import featuredImageSrc from '$lib/assets/home/home.jpg';
|
||||
import Feed from '$lib/components/blog/Feed.svelte';
|
||||
|
||||
import SEO from '$lib/components/SEO/index.svelte';
|
||||
import { website } from '$lib/config';
|
||||
import type { PageData } from './$types';
|
||||
import type { Tag } from '$lib/types/post';
|
||||
import { page } from '$app/stores';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let data: PageData;
|
||||
// console.log(data);
|
||||
|
||||
let filter: Tag | null = null;
|
||||
const { author, siteUrl } = website;
|
||||
|
||||
$: posts = data.posts.filter((post) => (filter ? post.tags?.includes(filter) : true));
|
||||
|
||||
onMount(() => {
|
||||
const tagParam = $page.url.searchParams.get('tag');
|
||||
|
||||
if (!filter && typeof tagParam == 'string') {
|
||||
filter = tagParam as Tag;
|
||||
let title = 'Home';
|
||||
let tags = ['blog', 'home'];
|
||||
const breadcrumbs = [
|
||||
{
|
||||
name: 'Home',
|
||||
slug: ''
|
||||
}
|
||||
});
|
||||
];
|
||||
let metadescription =
|
||||
'SvelteKit MDsvex Blog Starter - starter code by Rodney Lab to help you get going on your next blog site';
|
||||
const featuredImageAlt =
|
||||
'picture of a person with long, curly hair, wearing a red had taking a picture with an analogue camera';
|
||||
const featuredImage = {
|
||||
siteUrl: featuredImageSrc,
|
||||
alt: featuredImageAlt,
|
||||
width: 672,
|
||||
height: 448,
|
||||
caption: 'Home page'
|
||||
};
|
||||
const ogImage = {
|
||||
siteUrl: ogImageSrc,
|
||||
alt: featuredImageAlt
|
||||
};
|
||||
const ogSquareImage = {
|
||||
siteUrl: ogSquareImageSrc,
|
||||
alt: featuredImageAlt
|
||||
};
|
||||
|
||||
const displayAmount = 12;
|
||||
const twitterImage = {
|
||||
siteUrl: twitterImageSrc,
|
||||
alt: featuredImageAlt
|
||||
};
|
||||
const entityMeta = {
|
||||
siteUrl: `${siteUrl}/`,
|
||||
faviconWidth: 512,
|
||||
faviconHeight: 512,
|
||||
caption: author
|
||||
};
|
||||
const seoProps = {
|
||||
title,
|
||||
slug: '',
|
||||
entityMeta,
|
||||
datePublished: '2021-07-07T14:19:33.000+0100',
|
||||
lastUpdated: '2021-07-07T14:19:33.000+0100',
|
||||
breadcrumbs,
|
||||
metadescription,
|
||||
featuredImage,
|
||||
ogImage,
|
||||
ogSquareImage,
|
||||
twitterImage,
|
||||
tags
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="space-y-8">
|
||||
<header class="flex flex-col justify-center items-center">
|
||||
<h1 class="h1 m-4">Blog</h1>
|
||||
<CategoryFilter class="mb-2 md:mb-4" bind:selected={filter} />
|
||||
</header>
|
||||
<div
|
||||
class="grid m-auto max-w-7xl w-full gap-6 grid-cols-none justify-center md:grid-cols-2 lg:grid-cols-3"
|
||||
>
|
||||
{#each posts.slice(0, displayAmount) as post}
|
||||
<div class="flex justify-center min-w-[20rem] max-w-sm">
|
||||
<PostPreview {post} type="blog" isMostRecent />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<SEO {...seoProps} />
|
||||
|
||||
{#if posts.slice(displayAmount).length > 0}
|
||||
<div>
|
||||
<h2 class="mb-4 text-center">Previous posts</h2>
|
||||
<div
|
||||
class="previous grid m-auto max-w-7xl w-full gap-6 grid-cols-none justify-center md:grid-cols-2 lg:grid-cols-3"
|
||||
>
|
||||
{#each posts.slice(displayAmount) as post}
|
||||
<div class="flex justify-center min-w-[20rem] max-w-sm">
|
||||
<PostPreview {post} type="blog" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
</style>
|
||||
<Feed {data} />
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
import type { PageData } from './$types';
|
||||
import PostPreview from '$lib/components/blog/PostPreview.svelte';
|
||||
import PostPreview from '$lib/components/blog/Preview.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
</script>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import ProjectsContentLayout from '$lib/components/projects/ProjectsContentLayout.svelte';
|
||||
import ProjectsContentLayout from '$lib/components/blog/PostLayout.svelte';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
export let data: PageData;
|
||||
|
|
Loading…
Reference in New Issue