@cogita/theme-lucid
Advanced tools
The default theme for Cogita - A lucid, content-focused blog theme.
中文 | English
The default theme for Cogita - A lucid, content-focused blog theme.
Lucid is Cogita's official default theme, designed with "clarity" as its core principle. It focuses on content readability and user experience with a modern, clean design that gets out of the way and lets your content shine.
pnpm add @cogita/core @cogita/theme-lucid
Create cogita.config.ts:
import { defineConfig } from '@cogita/core';
export default defineConfig({
site: {
title: 'My Lucid Blog',
description: 'A blog powered by Cogita Lucid theme',
},
theme: 'lucid',
});
Create your first post in posts/welcome.md:
---
title: "Welcome to Lucid"
description: "Exploring the elegant design of the Lucid theme"
createDate: "2024-01-01"
tags: ["cogita", "lucid", "blog"]
---
# Welcome to Lucid
Lucid theme provides clean, modern design for your blog...
Start development:
pnpm dev
export default defineConfig({
site: {
title: 'My Blog',
description: 'A personal blog',
},
theme: 'lucid',
themeConfig: {
// Navigation
nav: [
{ text: 'Home', link: '/' },
{ text: 'About', link: '/about' },
{ text: 'Contact', link: '/contact' },
],
// Social links
socialLinks: [
{ icon: 'github', mode: 'link', content: 'https://github.com/you' },
{ icon: 'x', mode: 'link', content: 'https://x.com/you' },
{ icon: 'rss', mode: 'link', content: '/rss.xml' },
],
// Footer
footer: {
message: '© 2024 My Blog. Built with ❤️ and Cogita',
},
// Theme mode
colorMode: 'auto', // 'light' | 'dark' | 'auto'
},
});
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{
text: 'Posts',
items: [
{ text: 'Tech Articles', link: '/posts/tech' },
{ text: 'Life Stories', link: '/posts/life' },
],
},
{ text: 'About', link: '/about' },
],
}
Lucid automatically includes:
@cogita/plugin-posts-frontmatter - Extracts post metadataOverride theme colors and spacing:
/* styles/custom.css */
:root {
/* Brand colors */
--lucid-primary: #007acc;
--lucid-primary-hover: #005a99;
/* Typography */
--lucid-font-family: 'Inter', system-ui, sans-serif;
--lucid-font-size-base: 16px;
/* Spacing */
--lucid-space-unit: 8px;
/* Layout */
--lucid-content-width: 800px;
--lucid-radius: 6px;
}
/* Dark mode overrides */
[data-theme='dark'] {
--lucid-primary: #58a6ff;
--lucid-bg-primary: #0d1117;
--lucid-text-primary: #f0f6fc;
}
Import in your config:
export default defineConfig({
builderConfig: {
html: {
tags: [
{
tag: 'link',
attrs: { rel: 'stylesheet', href: '/styles/custom.css' }
}
]
}
}
});
Override theme components by creating custom layouts:
// components/CustomPostItem.tsx
import { PostItem } from '@cogita/ui';
import type { Post } from '@cogita/ui';
export const CustomPostItem: React.FC<{ post: Post }> = ({ post }) => (
<article className="custom-post-item">
<h2>{post.title}</h2>
{post.cover && <img src={post.cover} alt={post.title} />}
<p>{post.description}</p>
<div className="meta">
<time>{post.createDate}</time>
{post.tags && (
<div className="tags">
{post.tags.map(tag => (
<span key={tag} className="tag">{tag}</span>
))}
</div>
)}
</div>
</article>
);
---
title: "Your Post Title"
description: "Brief description for SEO and social sharing"
createDate: "2024-01-01"
updateDate: "2024-01-15"
tags: ["tag1", "tag2"]
categories: ["category1"]
author: "Author Name"
cover: "./cover.jpg"
featured: true
---
export default defineConfig({
builderConfig: {
// Performance optimizations
output: {
assetPrefix: 'https://cdn.example.com/',
},
chunkSplit: {
strategy: 'split-by-experience',
},
},
});
<meta property="og:title" content="Your Post Title" />
<meta property="og:description" content="Post description" />
<meta property="og:image" content="Post cover image" />
<meta name="twitter:card" content="summary_large_image" />
Automatic JSON-LD generation for:
Theme not loading:
# Check if theme is properly installed
npm list @cogita/theme-lucid
# Verify config
export default defineConfig({
theme: 'lucid', // Should be string, not import
});
Styling issues:
# Check CSS import order
import '@cogita/ui/styles'; // Should come first
import './custom.css'; // Then custom styles
Posts not showing:
# Check posts directory structure
posts/
└── your-post.md # Should have proper frontmatter
MIT © wu9o
FAQs
The default theme for Cogita - A lucid, content-focused blog theme.
We found that @cogita/theme-lucid demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A malicious NuGet package impersonating Sicoob exfiltrated client IDs, PFX passwords, and banking certificates through Sentry telemetry.
Security News
Feross Aboukhadijeh joins TBPN to discuss Socket's $60M Series C, 500%+ ARR growth, AI's impact on open source, and the rise in supply chain attacks.
Security News
OSV withdrew 157 OSV malware reports after automated false positives incorrectly flagged trusted npm and PyPI packages, sending bad records into tools that rely on OSV data.