blogs pages, projs - unfinished
This commit is contained in:
parent
35c507e55b
commit
a89f69c69c
|
@ -1,60 +1,73 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import PostPreview from '$lib/components/blog/PostPreview.svelte';
|
import ogSquareImageSrc from '$lib/assets/home/home-open-graph-square.jpg';
|
||||||
import CategoryFilter from '$lib/components/blog/CategoryFilter.svelte';
|
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 { PageData } from './$types';
|
||||||
import type { Tag } from '$lib/types/post';
|
|
||||||
import { page } from '$app/stores';
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
|
|
||||||
export let data: PageData;
|
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));
|
let title = 'Home';
|
||||||
|
let tags = ['blog', 'home'];
|
||||||
onMount(() => {
|
const breadcrumbs = [
|
||||||
const tagParam = $page.url.searchParams.get('tag');
|
{
|
||||||
|
name: 'Home',
|
||||||
if (!filter && typeof tagParam == 'string') {
|
slug: ''
|
||||||
filter = tagParam as Tag;
|
|
||||||
}
|
}
|
||||||
});
|
];
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<div>
|
<SEO {...seoProps} />
|
||||||
<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>
|
|
||||||
|
|
||||||
{#if posts.slice(displayAmount).length > 0}
|
<Feed {data} />
|
||||||
<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>
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { PageData } from './$types';
|
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;
|
export let data: PageData;
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import ProjectsContentLayout from '$lib/components/projects/ProjectsContentLayout.svelte';
|
import ProjectsContentLayout from '$lib/components/blog/PostLayout.svelte';
|
||||||
import type { PageData } from './$types';
|
import type { PageData } from './$types';
|
||||||
|
|
||||||
export let data: PageData;
|
export let data: PageData;
|
||||||
|
|
Loading…
Reference in New Issue