Getting Started with s:CMS

Welcome to s:CMS, a modern static content management system built on Astro! This framework provides a perfect balance between powerful features and simplicity, making it easy to create fast, SEO-friendly websites.

What is s:CMS?

s:CMS is built with a strict separation between core system and user code:

• core/: Framework components, layouts, and utilities (updateable via git pull)
• usr/: Your content, custom components, and configurations (edit freely)

This architecture allows you to update core functionality without losing your customizations!

Key Features

🎨 Rich Component Library

s:CMS comes with powerful pre-built components:

• Gallery: PhotoSwipe-powered image galleries with lightbox
• Maps: Interactive maps with Leaflet and vector layers
• DataTb: Dynamic tables with filtering and pagination
• Search: Full-text search across your content

📝 Content Collections

Use Astro’s content collections for type-safe content management:

1
const blogCollection = defineCollection({
2
  schema: z.object({
3
    title: z.string(),
4
    description: z.string(),
5
    date: z.coerce.date(),
6
    tags: z.array(z.string()).optional(),
7
  }),
8
});

🔄 Multiple Data Sources

Load content from various sources:

• Local MDX/Markdown files
• CSV and JSON files
• Directus CMS integration
• External APIs

⚡ Optimized Performance

Built on Astro’s island architecture:

• Static-first with selective hydration
• Optimized images and assets
• Lightning-fast page loads
• Excellent Core Web Vitals scores

Quick Start

1. Clone the repository

   1
   git clone https://github.com/lad-sapienza/sCMS.git
   2
   cd sCMS

2. Install dependencies

   1
   npm install

3. Start the dev server

   1
   npm run dev

4. Create your first page

   Add a new file to usr/pages/my-page.mdx:

   1
   ---
   2
   title: 'My First Page'
   3
   layout: ../../layouts/MdxLayout.astro
   4
   ---
   5
   
   6
   # Hello s:CMS!
   7
   
   8
   This is my first page.

Using Core Components

Import and use core components in your MDX files:

1
import { GalleryMdx } from '@core/components/Gallery';
2

3
export const images = import.meta.glob('./gallery/*.jpg', { eager: true });
4

5
<GalleryMdx images={images} columns={{ min: 200, max: 3 }} client:idle />

Next Steps

• Explore the Gallery Demo to see image galleries in action
• Check out the Map Demo for interactive mapping
• Read the Component Documentation

Ready to build something amazing? Let’s get started! 🚀