merox-erudite is a customized version of the astro-erudite theme, enhanced with additional features and modifications for a more complete blogging experience.
📖 Want to learn more about the original theme?
This theme is based on astro-erudite by @jktrn. For detailed documentation, architecture details, and the original design philosophy, visit the official astro-erudite repository.
This theme includes several enhancements and customizations:
- Newsletter Integration - Brevo (formerly Sendinblue) newsletter subscription with GDPR-compliant consent
- Disqus Comments - Integrated comment system with lazy loading and view transition support
- Google AdSense - Built-in AdSense component with view transition support
- Analytics Support - Google Analytics and Umami Analytics integration
- SEO Enhancements - FAQ Schema and HowTo Schema components for better search visibility
- Enhanced Homepage - Custom hero section with experience timeline and skills showcase
- Improved Typography - Geist font family integration
- Better Accessibility - Enhanced focus indicators and screen reader support
- Custom color palette optimized for readability
- Improved contrast ratios for better accessibility
- Enhanced dark mode support
- Modern hero section with background image support
- Experience timeline component
- Skills showcase with animated tech badges
- Updated dependencies to latest versions
- Improved error handling and error boundaries
- Better view transition support
- Optimized performance with lazy loading
- Enhanced TypeScript types
All features from astro-erudite plus:
- Astro's Islands architecture
- shadcn/ui with Tailwind styling
- Expressive Code for code blocks
- Blog authoring with MDX and
$\LaTeX$ math rendering - Astro View Transitions
- SEO optimization with granular metadata
- RSS feed and sitemap generation
- Subpost support for series content
- Author profiles and multi-author support
- Project tags and categorization
- Newsletter subscription (Brevo integration)
- Disqus comments (optional)
- Google AdSense support (optional)
- Analytics (Google Analytics & Umami)
-
Use this template - Click the "Use this template" button to create a new repository
-
Clone the repository:
git clone https://github.com/[YOUR_USERNAME]/[YOUR_REPO_NAME].git cd [YOUR_REPO_NAME] -
Install dependencies:
npm install
-
Configure environment variables (optional): Create a
.envfile with:# Newsletter (Brevo) BREVO_API_KEY=your-api-key BREVO_LIST_ID=your-list-id BREVO_TEMPLATE_ID=5 # Analytics PUBLIC_GOOGLE_ANALYTICS_ID=your-ga-id PUBLIC_UMAMI_WEBSITE_ID=your-umami-id # Disqus PUBLIC_DISQUS_SHORTNAME=your-shortname
-
Start the development server:
npm run dev
-
Open your browser and visit
http://localhost:1234
Edit src/consts.ts to customize:
export const SITE: Site = {
title: 'Your Site Name',
description: 'Your site description',
href: 'https://yourdomain.com',
author: 'your-author-id',
locale: 'en-US',
featuredPostCount: 2,
postsPerPage: 6,
}
export const NAV_LINKS: SocialLink[] = [
{ href: '/blog', label: 'Blog' },
{ href: '/about', label: 'About' },
]
export const SOCIAL_LINKS: SocialLink[] = [
{ href: 'https://github.com/username', label: 'GitHub' },
// ... more links
]- Sign up for Brevo (free tier available)
- Get your API key from Settings → API Keys
- Create a list and get the List ID
- Add environment variables to
.env
- Create a Disqus account
- Register your site to get a shortname
- Add
PUBLIC_DISQUS_SHORTNAMEto.env
- Edit
src/components/AdSense.astro - Replace
ca-pub-XXXXXwith your AdSense publisher ID - Replace
data-ad-slotwith your ad slot ID
Add MDX files to src/content/blog/:
---
title: 'Your Post Title'
description: 'A brief description'
date: 2024-01-01
tags: ['tag1', 'tag2']
image: './image.png'
authors: ['author-id']
draft: false
---Add author files to src/content/authors/:
---
name: 'Author Name'
pronouns: 'they/them'
avatar: 'https://gravatar.com/avatar/...'
bio: 'Author bio'
website: 'https://example.com'
github: 'https://github.com/username'
---Edit src/styles/global.css to customize the color palette:
:root {
--primary: hsl(214 95% 52%);
/* ... more colors */
}
[data-theme='dark'] {
--primary: hsl(214 95% 62%);
/* ... more colors */
}The theme uses Geist font family. Font files are in public/fonts/. To change fonts:
- Replace font files in
public/fonts/ - Update
@font-facedeclarations insrc/styles/global.css - Update
--font-sansand--font-monoin the theme configuration
This project is open source and available under the MIT License.
Important Note: This theme was developed exclusively using Cursor (an AI-powered code editor) with paid subscription. I am not a programmer by profession—I'm a System Administrator with a passion for sharing knowledge through blogging.
The development process involved:
- Iterative conversations with Cursor's AI assistant
- Learning and understanding code through AI explanations
- Testing and refining features with AI guidance
- Building on the excellent foundation of astro-erudite
This transparency is important because:
- Honesty - You should know how this theme was created
- Accessibility - It demonstrates that you don't need to be a professional developer to create useful tools
- AI-Assisted Development - Shows the potential of AI coding assistants for non-programmers
While the code was written with AI assistance, all decisions about features, design, and implementation were made by me based on my needs as a blogger. The theme has been tested and is fully functional.
This theme is a fork and customization of astro-erudite by @jktrn.
For comprehensive documentation, detailed feature explanations, and the original theme's design philosophy, please visit the official astro-erudite repository.
- Originally inspired by Astro Micro by trevortylerlee
- Developed with Cursor AI coding assistant
- astro-erudite Repository - Original theme with comprehensive documentation
- astro-erudite Live Demo - See the original theme in action
Built with ❤️ by merox
Developed using Cursor AI coding assistant
