CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Content Thumbnail default breakpoint

Browse Source
This commit is contained in:
adilallo
2025-09-04 21:11:17 -06:00
parent b54ddb16ba
commit 3a4b2d44c2
17 changed files with 894 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/tailwind.css
+6 -8
View File
@@ -19,15 +19,12 @@
--color-*: initial;
/* Font families */
--font-sans:
var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display:
var(--font-bricolage-grotesque), ui-sans-serif, system-ui, -apple-system,
--font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono:
var(--font-space-grotesk), ui-monospace, SFMono-Regular, "SF Mono",
Consolas, "Liberation Mono", Menlo, monospace;
--font-display: var(--font-bricolage-grotesque), ui-sans-serif, system-ui,
-apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: var(--font-space-grotesk), ui-monospace, SFMono-Regular,
"SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
/* Dimension */
--spacing-scale-000: 0px;
@@ -370,6 +367,7 @@
--color-content-inverse-brand-accent: var(--color-yellow-yellow700);
--color-content-inverse-brand-primary: var(--color-yellow-yellow900);
--color-content-inverse-brand-secondary: var(--color-rust-rust800);
--color-content-inverse-brand-royal: var(--color-royal-blue-royal-blue1000);
--color-content-inverse-primary: var(--color-gray-1000);
--color-content-inverse-secondary: var(--color-gray-800);
--color-content-inverse-tertiary: var(--color-gray-700);
app/test-thumbnail/page.js
+153
View File
@@ -0,0 +1,153 @@
import ContentThumbnailTemplate from "../../components/ContentThumbnailTemplate";
// Mock blog post data for testing
const mockPost1 = {
slug: "test-post-1",
frontmatter: {
title: "Resolving Active Conflicts",
description:
"Practical steps for resolving conflicts while maintaining trust, cooperation, and shared goals",
author: "Author name",
date: "2025-04-15",
tags: ["conflict-resolution", "governance", "community"],
},
wordCount: 467,
readingTime: 3,
};
const mockPost2 = {
slug: "test-post-2",
frontmatter: {
title: "Operational Security for Mutual Aid",
description:
"Tactics to protect members, secure communication, and prevent Infiltration",
author: "Author name",
date: "2025-04-10",
tags: ["community-building", "sustainability", "structure"],
},
wordCount: 523,
readingTime: 4,
};
const mockPost3 = {
slug: "test-post-3",
frontmatter: {
title: "Making decisions without hierarchy",
description:
"A brief guide to collaborative nonhierarchical decision making",
author: "Author name",
date: "2025-04-05",
tags: ["communication", "remote-work", "collaboration"],
},
wordCount: 389,
readingTime: 2,
};
export default function TestThumbnailPage() {
return (
<div className="min-h-screen bg-gray-50 p-8">
<div className="max-w-6xl mx-auto">
<h1 className="text-3xl font-bold text-gray-900 mb-8">
ContentThumbnailTemplate Test
</h1>
<div className="space-y-12">
{/* Vertical Variant */}
<section>
<h2 className="text-2xl font-semibold text-gray-800 mb-6">
Vertical Variant
</h2>
<div className="flex flex-wrap gap-6">
<ContentThumbnailTemplate
post={mockPost1}
variant="vertical"
className="mb-4"
/>
<ContentThumbnailTemplate
post={mockPost2}
variant="vertical"
className="mb-4"
showTags={false}
/>
<ContentThumbnailTemplate
post={mockPost3}
variant="vertical"
className="mb-4"
showReadingTime={false}
/>
</div>
</section>
{/* Horizontal Variant */}
<section>
<h2 className="text-2xl font-semibold text-gray-800 mb-6">
Horizontal Variant
</h2>
<div className="space-y-4">
<ContentThumbnailTemplate post={mockPost1} variant="horizontal" />
<ContentThumbnailTemplate
post={mockPost2}
variant="horizontal"
showTags={false}
/>
<ContentThumbnailTemplate
post={mockPost3}
variant="horizontal"
showReadingTime={false}
/>
</div>
</section>
{/* Component Props */}
<section className="bg-white p-6 rounded-lg shadow">
<h2 className="text-xl font-semibold text-gray-800 mb-4">
Component Props
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
<div>
<h3 className="font-medium text-gray-700 mb-2">
Required Props:
</h3>
<ul className="space-y-1 text-gray-600">
<li>
<code>post</code> - Blog post object with frontmatter
</li>
</ul>
</div>
<div>
<h3 className="font-medium text-gray-700 mb-2">
Optional Props:
</h3>
<ul className="space-y-1 text-gray-600">
<li>
<code>variant</code> - "vertical" (default) or "horizontal"
</li>
<li>
<code>className</code> - Additional CSS classes
</li>
<li>
<code>showTags</code> - Show/hide tags (default: true)
</li>
<li>
<code>showReadingTime</code> - Show/hide reading time
(default: true)
</li>
</ul>
</div>
</div>
</section>
{/* Mock Data */}
<section className="bg-white p-6 rounded-lg shadow">
<h2 className="text-xl font-semibold text-gray-800 mb-4">
Mock Data Structure
</h2>
<pre className="bg-gray-100 p-4 rounded text-sm overflow-x-auto">
{JSON.stringify(mockPost1, null, 2)}
</pre>
</section>
</div>
</div>
</div>
);
}