Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/aurora-cosmos/llms.txt

Use this file to discover all available pages before exploring further.

The Writing page (/writing) is titled “Signal Transmissions” in the template, with the subtitle “Transmissions from the Dev Console.” It presents articles and blog posts in a visually varied feed where each post has its own distinct card style to match its content type. The three post styles — waveform, log, and paper — give the feed personality and break the visual monotony of identical cards.

​
Layout overview

The page is constrained to max-w-5xl mx-auto py-12. The post list is a space-y-12 vertical stack where each post is a motion.div that enters via whileInView scroll animation. Three layout styles are used:

Waveform layout

A dark glass-panel card with a border-l-4 border-l-aurora-turquoise left accent. An animated waveform (20 bars with animate={{ height: ["20%", "100%", "20%"] }}) renders on the right side of the card at opacity-20 resting and group-hover:opacity-40. Content sits in a w-2/3 left section.

Log layout

A borderless bg-space-900 border border-cosmic-violet/30 rounded-sm font-mono card styled like a terminal log entry. A cosmic-violet gradient line runs across the top. Tags are prefixed with > instead of #.

Paper layout

A light bg-[#f8fafc] text-slate-800 card that contrasts sharply with the dark theme. It has a transform rotate-1 hover:rotate-0 transition-transform tilt effect and a handwriting-style annotation on the left margin (hidden on mobile).

​
Post card data shape

Each post in the array includes:
  • id — unique integer key
  • title — the article heading
  • type — the content category label (e.g. “Reflection”, “Bug Report”, “General Audience”)
  • date — displayed as a “Stardate” string in the template
  • icon — a lucide-react icon (Radio, Satellite, BookOpen in the template)
  • layout — "waveform" | "log" | "paper" — controls which card style renders
  • excerpt — short description paragraph
  • tags — string array of topic tags

​
Waveform card details

The waveform card enters with initial={{ opacity: 0, x: -20 }} → whileInView={{ opacity: 1, x: 0 }}. The animated bars use {...Array(20)} spread to render 20 motion.div elements with staggered delay: index * 0.1 and infinite height keyframe animation. 
// Waveform bars (right side decoration)
{[...Array(20)].map((_, i) => (
  <motion.div
    key={i}
    animate={{ height: ["20%", "100%", "20%"] }}
    transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.1 }}
    className="w-1 bg-aurora-turquoise rounded-full"
  />
))}
Tags in the waveform style use bg-aurora-turquoise/10 text-aurora-turquoise rounded with a # prefix: #CSS, #Humor, etc.

​
Log card details

The log card enters from the right: initial={{ opacity: 0, x: 20 }} → whileInView={{ opacity: 1, x: 0 }}. It has no rounded corners (rounded-sm) to reinforce the terminal aesthetic. The top gradient border is bg-gradient-to-r from-cosmic-violet to-transparent opacity-50. Tags use > prefix and text-slate-500 with no background.

​
Paper card details

The paper card enters from below: initial={{ opacity: 0, y: 20 }} → whileInView={{ opacity: 1, y: 0 }}. The rotate-1 hover:rotate-0 transition makes it look like a slightly skewed sticky note. It uses font-serif for the excerpt text and standard bg-slate-100 tag badges — the only light-background element in the entire template. The left annotation reads “Important note for future self” and uses a font-handwriting class.
The paper card sits inside max-w-3xl mx-auto, making it narrower than the waveform and log cards. This width constraint, combined with the light background, makes it read as a physical document in the feed.

​
Color tokens used

ElementToken / class
Page heading gradientfrom-cosmic-violet to-aurora-turquoise
Waveform left borderborder-l-aurora-turquoise
Waveform barsbg-aurora-turquoise
Waveform tagsbg-aurora-turquoise/10 text-aurora-turquoise
Log borderborder-cosmic-violet/30
Log top gradientfrom-cosmic-violet to-transparent
Log type labeltext-cosmic-violet
Paper backgroundbg-[#f8fafc] (light, intentional contrast)
Paper annotationtext-aurora-teal
Paper tagsbg-slate-100 text-slate-600

​
Customization guide

1

Add a new post

The post data is compiled into the je array in assets/main.js. To add posts, fork the original source and add an object to the posts array before rebuilding. Pick any layout value ("waveform", "log", or "paper"). The render function dispatches to the correct card style based on post.layout:
const posts = [
  {
    id: 4,
    title: "Your Article Title",
    type: "Tutorial",
    date: "Stardate 47999.01",  // or a real date string
    icon: BookOpen,
    layout: "waveform",         // "waveform" | "log" | "paper"
    excerpt: "A short summary of what this article covers.",
    tags: ["React", "Performance"],
  },
];
2

Use a real date format

The template uses a fictional “Stardate” convention. Replace with a real date string like "June 2025" or "2025-06-15" — the date value is rendered as plain text in font-mono text-xs text-slate-500 so any format works. The paper card replaces the word “Stardate” with “Date:” via .replace("Stardate", "Date:").
3

Add a 'Read more' link

The template cards show excerpts only. To link to a full article, add a url field to each post object and render an <a> or React Router <Link> in the card footer:
// Add to each post object:
url: "https://your-blog.com/your-post-slug",

// Add inside the card JSX:
<a href={post.url} className="flex items-center space-x-1 text-sm
                               text-aurora-turquoise hover:text-white
                               transition-colors mt-4">
  <span>Read full post</span>
  <ArrowRight size={14} />
</a>
4

Change the page title

Replace “Signal Transmissions” in the <h1> and “Transmissions from the Dev Console.” in the <p> to match your brand voice:
<h1 className="text-4xl md:text-5xl font-display font-bold mb-4
               text-transparent bg-clip-text
               bg-gradient-to-r from-cosmic-violet to-aurora-turquoise">
  Writing {/* ← change this */}
</h1>
<p className="text-xl text-slate-400 font-mono">
  Thoughts on code and craft. {/* ← change this */}
</p>
The three card styles (waveform, log, paper) work best when used intentionally. Consider mapping them to content types: waveform for tutorials/how-tos, log for technical post-mortems or incident reports, and paper for personal essays or general-audience pieces.

Build docs developers (and LLMs) love

Get started for freeTalk to us