Skip to content
This repository has been archived by the owner on Dec 16, 2024. It is now read-only.

A text based, structured content manager, for edition and consumption — AstroJS integration

License

Notifications You must be signed in to change notification settings

JulianCataldo/astro-content

Repository files navigation

Astro Content logo

~

Documentation / Live demo website

❀✿❀
𝚊𝚕𝚙𝚑𝚊

👷🏻‍♂️  Under heavy development, use it at your own risk!   🚧

~
Contributions are welcome
👐


What is it?

Think of it as an hybrid of Wordpress + ACF, Obsidian and Ulysses, with a sprinkle of tRPC and nuxt/content.

What it does?

✨  Adds a thin layer between Astro and your templates, bringing automatic typings, runtime validation and a handful of DX goodies.

🏗  Brings evolved authoring assistance, in a full-fledged back-office, inside your IDE or with CLI, as you prefer.

Main goals

Being content centric, this set of tools will give you:

  • Focus when designing 👌
  • Confidence when authoring ✍️
  • Predictability when integrating 🤝
  • Certainty while delivering 💪
  • Peace of mind when refactoring 👍

Warning: This is an alpha product — Heavy changes are on-going — Suggestions are welcome 👐

Method 1: Add to Astro project with CLI

With yarn, npm or pnpm, run this in your existing Astro project:

# If you want a fresh start ——v
# pnpm create astro && cd ./my-astro-site

pnpm astro add astro-content
pnpm content setup

Follow the prompts… 🐇

Method 2: Clone demo project

Shallow clone this minimal Astro starter, which comes with dummy content for you to play with:

pnpx degit JulianCataldo/astro-content/demo ./ac-demo
cd ./ac-demo && pnpm install

# Clone dummy content
pnpx degit JulianCataldo/astro-content/docs/content/@dummy ./content
# —OR— setup a minimal content base with Astro Content CLI
pnpm content setup

# Open project in VS Code
code .

Warning: Only Node 17 or higher is actually supported by Astro Content.

Launch project

OK, project is ready. It's time to:

pnpm run dev

Now head over to http://localhost:3000/__content to take a deep dive in Astro Content.

TypeScript setup

It's OK to use an absolute path, so you don't have to do tedious relative imports:

import { get } from '../../content';
// Versus:
import { get } from '/content';

Astro / Vite resolve absolute paths from project root.
That's cool, but TypeScript language server (in your IDE) will likely break, while showing red squiggles 🤨.

A very simple fix is adding this to your tsconfig.json > compilerOptions.paths:

{
  "compilerOptions": {
    // …
    "paths": {
      // Make TS happy with absolute path
      "/content": ["./content"]
    }
  }
}

Development

Setup

Note: pnpm is the package manager of choice for developing this mono-repo.
macOS / Node >= 17 is the most tested environment. Please note that end-user can use anything recommended for a typical Astro project while using Astro Content distributables.

git clone git@github.com:JulianCataldo/astro-content.git
cd astro-content

pnpm -r i

# ———— Watch / build mono-repo. (turbo)
pnpm run dev

# ———— Doc. website (astro)
cd docs && pnpm run dev

Packages

Role Notes Name Artefact
Integration (Entrypoint) Extends Astro / Vite capabilities astro-content NPM
Server Data handlers, API provider, helpers generator @astro-content/server NPM
Command line Project setups and content manipulation @astro-content/cli NPM
Web app (Optional) Full-fledge content editor / monitor @astro-content/gui NPM
TypeScript typings Internal types for development use @astro-content/types NPM
Docs (Private) Using and demonstrating all tools above astro-content.netlify.app
Demo (Clonable) Minimal boilerplate ./demo

@astro-content/* are all internal dependencies of the main astro-content integration package, which act as a bridge for them.
Web GUI can be opted out by user settings.

Deployment environments

Branch Description Deployment URL
Feature (<feat_branch>) Preview experiments or future additions in isolation. [branch]--astro-content.netlify.app/__content
Production (master) Stable release. astro-content.netlify.app/__content
🆕  Next! (develop) All future features. develop--astro-content.netlify.app/__content

🔗  JulianCataldo.com