feat: refactor pass along pages
This commit is contained in:
@@ -11,7 +11,7 @@ import SocialShareButton from '@components/buttons/SocialShareButton.astro';
|
||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||
import directus from '@lib/directus';
|
||||
import { getDirectusImageURL } from '@lib/directusFunctions';
|
||||
import { formatDateTime } from '@support/time';
|
||||
import { formatDate } from '@support/time';
|
||||
|
||||
const post = Astro.props;
|
||||
|
||||
@@ -31,7 +31,7 @@ const category: CollectionEntry<'categories'> = (await getCollection('categories
|
||||
const readingTime = getReadingTime(post.content);
|
||||
|
||||
const highlighter = await createHighlighter({
|
||||
themes: ['github-light', 'github-dark', 'monokai'],
|
||||
themes: ['github-light', 'github-dark'],
|
||||
langs: ['typescript', 'python', 'css', 'html', 'yaml', 'bash', 'json'],
|
||||
});
|
||||
|
||||
@@ -68,9 +68,7 @@ const content = marked.parse(post.content);
|
||||
name: global.name,
|
||||
description: global.about,
|
||||
},
|
||||
image: [
|
||||
// post.data.banner,
|
||||
],
|
||||
image: [],
|
||||
headline: post.title,
|
||||
datePublished: post.published_date,
|
||||
dateModified: post.updated_date,
|
||||
@@ -84,11 +82,11 @@ const content = marked.parse(post.content);
|
||||
}}
|
||||
>
|
||||
|
||||
<section class="mx-auto max-w-6xl px-4 pt-8 pb-12 sm:px-6 lg:px-8 lg:pt-12">
|
||||
<section class="max-w-6xl px-4 sm:px-6 lg:px-8 pt-8 lg:pt-12 pb-12 mx-auto">
|
||||
<div class="smooth-reveal relative w-full">
|
||||
<div class="mt-4 rounded-2xl shadow-none sm:mt-0 sm:shadow-sm">
|
||||
<div class="sm:shadow-xs sm:dark:shadow-md rounded-2xl mt-4 sm:mt-0">
|
||||
<Image
|
||||
class="max-h-[600px] w-full rounded-t-2xl object-cover"
|
||||
class="rounded-2xl sm:rounded-b-none w-full max-h-150 object-cover"
|
||||
src={getDirectusImageURL(post.image)}
|
||||
alt={post.image_alt}
|
||||
draggable="false"
|
||||
@@ -96,81 +94,54 @@ const content = marked.parse(post.content);
|
||||
loading="lazy"
|
||||
inferSize={true}
|
||||
/>
|
||||
<div
|
||||
class="rounded-b-2xl px-0 py-6 sm:bg-neutral-100 sm:px-6 md:px-10 lg:px-14 sm:dark:bg-neutral-900/30"
|
||||
>
|
||||
<div class="mb-16">
|
||||
<h2
|
||||
class="mb-6 block text-3xl font-bold tracking-tight text-balance text-neutral-800 md:text-4xl lg:text-5xl dark:text-neutral-300"
|
||||
>
|
||||
<div class="sm:bg-background-card rounded-b-2xl px-0 sm:px-6 md:px-10 lg:px-14 py-6">
|
||||
<div class="text-center sm:text-left mt-4">
|
||||
<h2 class="card-text-header block">
|
||||
{post.title}
|
||||
</h2>
|
||||
<ol class="mt-8 flex items-center whitespace-nowrap">
|
||||
<ol class="flex items-center justify-center sm:justify-start whitespace-nowrap gap-2 sm:gap-0 mt-6 sm:mt-4">
|
||||
<li class="inline-flex items-center">
|
||||
<a
|
||||
class="flex items-center text-sm text-neutral-500 transition-all duration-300 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
|
||||
class="inline-flex items-center text-secondary hover:text-secondary-hover text-sm transition-all duration-300"
|
||||
href=`/categories/${category.slug}`
|
||||
data-astro-prefetch
|
||||
>
|
||||
{category?.data?.title}
|
||||
</a>
|
||||
<svg
|
||||
class="mx-2 size-5 flex-shrink-0 text-neutral-500 dark:text-neutral-500"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"></path>
|
||||
</svg>
|
||||
<span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4">
|
||||
/
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="inline-flex items-center text-sm text-neutral-500 transition-all duration-300 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
|
||||
>
|
||||
{formatDateTime(post.published_date)}
|
||||
<svg
|
||||
class="mx-2 size-5 flex-shrink-0 text-neutral-500 dark:text-neutral-500"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"></path>
|
||||
</svg>
|
||||
<li class="inline-flex items-center">
|
||||
<span class="shrink-0 text-secondary text-sm">
|
||||
{formatDate(post.published_date)}
|
||||
</span>
|
||||
<span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4">
|
||||
/
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="inline-flex items-center text-sm text-neutral-500 transition-all duration-300 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
|
||||
aria-current="page"
|
||||
>
|
||||
{readingTime.minutes.toPrecision(1)} minutes to read
|
||||
<li class="inline-flex items-center">
|
||||
<span class="shrink-0 text-secondary text-sm">
|
||||
{readingTime.minutes.toPrecision(1)} minutes to read
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="border-t border-divider mt-10 mb-10"/>
|
||||
|
||||
<article
|
||||
class="prose prose-blog sm:prose-lg dark:prose-invert max-w-none text-neutral-800 dark:text-neutral-200"
|
||||
>
|
||||
<article class="text-header prose prose-blog sm:prose-lg dark:prose-invert max-w-none">
|
||||
<div set:html={content} />
|
||||
</article>
|
||||
|
||||
<div
|
||||
class="mx-auto mt-10 grid max-w-screen-lg gap-y-5 sm:flex sm:items-center sm:justify-between sm:gap-y-0 md:mt-14"
|
||||
>
|
||||
<div class="flex flex-wrap gap-x-2 gap-y-1 sm:flex-nowrap sm:items-center sm:gap-y-0">
|
||||
{
|
||||
post.tags.map((tag: string) => (
|
||||
<span class="bg-steel/30 dark:bg-bermuda/60 inline-flex items-center gap-x-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-neutral-700 outline-none focus:outline-none focus-visible:ring focus-visible:outline-none dark:text-neutral-200">
|
||||
{tag}
|
||||
</span>
|
||||
))
|
||||
}
|
||||
<div class="grid sm:flex sm:items-center sm:justify-between gap-y-5 sm:gap-y-0 max-w-5xl mx-auto mt-10 md:mt-14">
|
||||
<div class="flex flex-wrap sm:flex-nowrap sm:items-center gap-x-2 gap-y-1 sm:gap-y-0">
|
||||
{post.tags.map((tag: string) => (
|
||||
<span class="inline-flex items-center button-base bg-cobalt dark:bg-turquoise text-neutral-100 text-xs font-bold rounded-lg gap-x-1.5 px-3 py-1.5">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<SocialShareButton
|
||||
pageTitle={post.title}
|
||||
/>
|
||||
<SocialShareButton pageTitle={post.title}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user