AstroNews is a professional newspaper and magazine website template built with Astro, Tailwind CSS 4, and Alpine.js — designed for news publishers, online magazines, editorial teams, and independent journalists.
This theme supports Astro Version 7.x.x 🎉
Built with performance, SEO, and editorial flexibility in mind, AstroNews delivers a clean, reader-first digital presence that helps content teams publish fast, engage audiences, and grow their readership.
📰 What Makes AstroNews Stand Out
- Newspaper-grade design — black-and-white editorial identity with a bold serif display face, built for authority, trust, and high information density
- Purpose-built UI — dedicated layouts for news articles, category archives, tag pages, and author profiles
- MDX content system — write and manage articles without touching layout or component code
- Alpine.js powered interactivity — client-side search with query capture, mobile menu, breaking-news ticker, accordion FAQs, filterable job listings, and a trending-news carousel
- Lightning-fast performance — 100% static output via Astro with zero runtime JavaScript overhead
- SEO-ready architecture — clean URLs, semantic HTML, Open Graph meta tags, canonical links, and paginated routes
- Fully modular components — 90+ reusable blocks across header, footer, news, cards, widgets, and every static page, built so most new sections are assembled by mixing existing components rather than writing new ones
- Centralized, swappable data — every section pulls from a typed data file, so branding, nav, footer, and page copy can be updated without touching template markup
🎯 Design DNA
- Bold Editorial Identity Deep brand-black backgrounds, neutral grays, and clean whites — a high-contrast palette that commands attention while keeping reader focus firmly on content.
- News-Grade Typography A bold display serif for headlines paired with a clean sans-serif body — optimized for long-form reading, headline skimmability, and cross-device legibility at every viewport width.
- Subtle Interactions Hover transitions, an Alpine-powered horizontal-scroll trending carousel, smooth pagination, and live search filtering — fast feedback without distracting from editorial content.
- Fully Responsive Pixel-perfect layouts from mobile to desktop. Every component — from the homepage hero to the sidebar widgets — adapts gracefully across breakpoints.
📦 Features Included
- ✅ Editorial homepage — hero split card, popular-news grid, top-trending feature, featured-news list, per-category blocks, trending carousel, and paginated latest-news feed
- ✅ Latest news archive with pagination
- ✅ Category pages with featured card + article grid + pagination
- ✅ Tag system with dedicated pages, related-tag sidebar, and pagination
- ✅ Author profiles with bio, stats, article archive, and social links
- ✅ Article detail — header section, meta bar, share bar, featured image, tags, and related articles
- ✅ Client-side search — live filtering, sorting, and pagination powered entirely in the browser
- ✅ Static pages — About, Contact, Advertise, Careers, Subscribe, Privacy, Terms, Cookie Policy
- ✅ 404 page with popular-articles fallback
Reusable Components
- ✅ ArticleCard — 13 layout variants covering every editorial context (hero split, feature, grid, horizontal list, badge overlay, video overlay, trending carousel, and more)
- ✅ ArticleListItem — 5 compact list variants (numbered, thumbnail, row, text-only, title-only)
- ✅ BlockNewsSection — a single reusable section component that powers every per-category homepage block by fetching category- or flag-based posts and switching between grid, split, and list layouts
- ✅ Header system — top bar, logo, desktop nav with active-link detection, mobile menu, dropdown, and breaking-news ticker (auto-populated from the 4 latest articles)
- ✅ Footer system — brand block, newsletter form, link groups, social icons
- ✅ Widgets — Ads placeholder, Popular News (filterable by category or flag), Tags, Timeline
- ✅ Smart pagination — windowed page range with ellipsis, supporting both path-based and query-string based routes
- ✅ Working social sharing — Facebook and Twitter/X share links generated from the live article URL, plus copy-link and bookmark actions
- ✅ Related articles grid on every article page
- ✅ Author cards with avatar, bio, stats, and social icons
- ✅ Contact form with subject select, message field, and success state
- ✅ Careers page with filterable job listings by department
- ✅ About page — mission, stats, values, team, and CTA sections
- ✅ Subscribe page — monthly/yearly billing toggle, plan comparison table, testimonials, FAQ
- ✅ Advertise page — ad formats grid, pricing packages, FAQ
- ✅ And more
Content & Data
- ✅ 60 sample MDX news articles across 10 categories (World, Politics, Business, Techno, Finance, Lifestyle, Sports, Science, Foods, Travel)
- ✅ 4 author profiles with bio, role, join year, beat tags, and social links
- ✅ Static legal pages as MDX
- ✅ Centralized data files for Header, Footer, About, Advertise, Careers, Contact, Search, and Subscribe — no hardcoded copy in templates
⚙️ Quick Setup
- Download & extract template files
- Run npm install to install dependencies
- Start dev server with npm run dev
- Add your articles to src/content/ as .mdx files
- Update branding in src/data dan public/img/
- Build for production with npm run build
📝 Tech Stack
- Astro7.x Static site generator & routing
- Tailwind CSS4.x Utility-first styling
- Alpine.js3.x Reactive UI (search, nav, ticker, carousel)
- MDX@astrojs/mdx Content authoring
- astro-icon Bootstrap Icons (bi)
- TypeScriptstrict Type-safe components and data
🆓 Free Updates & Support
AstroNews includes free lifetime updates to ensure compatibility with future Astro releases and ongoing performance improvements.
