Leaflet Blog in Deno Fresh

some styling stuff

Changed files
+9 -14
components
routes
post
+1 -6
components/post-list-item.tsx
···
<Title className="text-lg w-full" level="h3">
{post.title}
</Title>
-
{post.subtitle && (
-
<p className="text-sm text-slate-600 dark:text-slate-300 font-serif italic line-clamp-2">
-
{post.subtitle}
-
</p>
-
)}
<PostInfo
content={post.content}
createdAt={post.createdAt}
···
/>
<div className="grid transition-[grid-template-rows,opacity] duration-300 ease-[cubic-bezier(0.33,0,0.67,1)] grid-rows-[0fr] group-hover:grid-rows-[1fr] opacity-0 group-hover:opacity-100 mt-2">
<div className="overflow-hidden">
-
<p className="text-sm text-slate-600 dark:text-slate-300 line-clamp-3 break-words">
{post.content.substring(0, 280)}
</p>
</div>
···
<Title className="text-lg w-full" level="h3">
{post.title}
</Title>
<PostInfo
content={post.content}
createdAt={post.createdAt}
···
/>
<div className="grid transition-[grid-template-rows,opacity] duration-300 ease-[cubic-bezier(0.33,0,0.67,1)] grid-rows-[0fr] group-hover:grid-rows-[1fr] opacity-0 group-hover:opacity-100 mt-2">
<div className="overflow-hidden">
+
<p className="text-sm line-clamp-3 break-words">
{post.content.substring(0, 280)}
</p>
</div>
+8 -8
routes/post/[slug].tsx
···
interface Post {
uri: string;
value: {
-
title: string;
subtitle?: string;
-
content: string;
-
createdAt: string;
};
}
···
<div class="max-w-[600px] mx-auto">
<article class="w-full space-y-8">
<div class="space-y-4 w-full">
-
<Title>{post.value.title}</Title>
{post.value.subtitle && (
-
<p class="text-xl text-slate-600 dark:text-slate-300 font-serif italic">
{post.value.subtitle}
</p>
)}
<PostInfo
-
content={post.value.content}
-
createdAt={post.value.createdAt}
includeAuthor
className="text-sm"
/>
···
class="mt-8 markdown-body"
// replace old pds url with new one for blob urls
dangerouslySetInnerHTML={{
-
__html: render(post.value.content).replace(
/puffball\.us-east\.host\.bsky\.network/g,
"knotbin.xyz",
),
···
interface Post {
uri: string;
value: {
+
title?: string;
subtitle?: string;
+
content?: string;
+
createdAt?: string;
};
}
···
<div class="max-w-[600px] mx-auto">
<article class="w-full space-y-8">
<div class="space-y-4 w-full">
+
<Title>{post.value.title || 'Untitled'}</Title>
{post.value.subtitle && (
+
<p class="text-2xl md:text-3xl font-serif leading-relaxed max-w-prose">
{post.value.subtitle}
</p>
)}
<PostInfo
+
content={post.value.content || ''}
+
createdAt={post.value.createdAt || new Date().toISOString()}
includeAuthor
className="text-sm"
/>
···
class="mt-8 markdown-body"
// replace old pds url with new one for blob urls
dangerouslySetInnerHTML={{
+
__html: render(post.value.content || '').replace(
/puffball\.us-east\.host\.bsky\.network/g,
"knotbin.xyz",
),