For production posts, prefer an explicit social_image when the hero image is not already cropped for social cards. The recommended size is 1200x630.

Hero and Social Images

The front matter for this page sets both hero.image and social_image. The essay layout should render the hero image above this content, while SEO/social metadata should use the explicit social_image value.

Figures

Inline figures use the figure.html include. The default layout stays within the text measure and lazy-loads the image.

The same include can opt into a wide layout when an image benefits from more horizontal space.

Video

Apollo can turn a YouTube, Vimeo, or direct video URL into a responsive player. Use the include when you want a caption:

{% include video.html
  src="https://www.youtube.com/watch?v=M7lc1UVf-VE"
  caption="Embedded video players keep the same rhythm as figures."
%}

Standalone video links also become players:

https://vimeo.com/76979871

Code Blocks

Language labels and copy buttons are added after render. This TypeScript block should display a TypeScript label.

type FeatureFlag = {
  key: 'math' | 'mermaid' | 'figures' | 'codeCopy';
  enabled: boolean;
};

const enabled = (features: FeatureFlag[]) => {
  return features.filter((feature) => feature.enabled).map((feature) => feature.key);
};

console.log(enabled([
  { key: 'math', enabled: true },
  { key: 'mermaid', enabled: true },
  { key: 'figures', enabled: true },
  { key: 'codeCopy', enabled: true }
]));

Diff fences should highlight inserted and deleted lines.

- image: /assets/images/og/essays/welcome.png
+ hero:
+   image: /assets/images/essays/welcome-demo.png
+   alt: A readable description
+ social_image: /assets/images/og/essays/welcome.png

Mermaid

With mermaid: true, Mermaid fences are converted from highlighted code into a diagram container and rendered by the client-side Mermaid bundle.

flowchart LR
  Content[Markdown Content] --> Render[Jekyll Render]
  Render --> Enhance[Content Enhancements]
  Enhance --> Browser[Browser Scripts]
  Browser --> Reader[Reader Experience]

Math

With math: true, MathJax renders inline expressions like $a^2 + b^2 = c^2$ and display equations:

Expected Result

When this page is built locally, it should show a hero image with a caption, two captioned figures, responsive video players, copyable code blocks with labels, highlighted diff lines, a rendered Mermaid diagram, and rendered math.

Typography

Apollo uses Newsreader for body text, a typeface designed specifically for on-screen reading. It pairs elegant serifs with a clean monospace font for code.

“Typography is the craft of endowing human language with a durable visual form.”

Headers are bold and distinct, while body text is set at a comfortable size with generous line height.

Features at a Glance

• Responsive Design: Looks great on mobile and desktop.
• Dark Mode: Automatic theme switching based on system preference.
• Syntax Highlighting: Beautiful code blocks for various languages.
• Math Support: Render mathematical content easily.

Images and Media

Images expand to fill the available width, maintaining a visual balance with the text.

Next Steps

Check out the Technical Demo to see code highlighting and advanced formatting in action, or read Thoughts on AI Safety for a long-form content example.

The Current Landscape

AI safety research has evolved significantly over the past decade. We’ve moved from theoretical concerns to practical implementations, with major research institutions dedicating substantial resources to understanding and mitigating AI risks.

Key Areas of Focus

1. Alignment: Ensuring AI systems pursue intended goals
2. Robustness: Building systems that perform reliably across diverse conditions
3. Interpretability: Understanding how AI systems make decisions
4. Control: Maintaining human oversight and intervention capabilities

Challenges Ahead

The path forward in AI safety is not without obstacles. Some of the most significant challenges include:

• Balancing capability advancement with safety measures
• Coordinating research efforts across organizations
• Addressing both near-term and long-term risks
• Ensuring inclusive and diverse perspectives in safety research

A Path Forward

Effective AI safety requires collaboration between researchers, policymakers, and industry leaders. We need robust testing frameworks, transparent research practices, and continued investment in fundamental safety research.

The stakes are high, but so is the potential for positive impact. By prioritizing safety alongside capability, we can work toward AI systems that benefit humanity while minimizing risks.

Syntax Highlighting

Apollo supports syntax highlighting for over 100 languages. Code blocks adapt to both light and dark modes automatically.

Python

def fibonacci(n):
    if n <= 1:
        return n
    else:
        return fibonacci(n-1) + fibonacci(n-2)

print([fibonacci(i) for i in range(10)])
# Output: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

TypeScript / JavaScript

interface User {
  id: number;
  name: string;
  role: 'admin' | 'user';
}

const greet = (user: User): string => {
  return `Hello, ${user.name}!`;
};

const admin: User = { id: 1, name: "Apollo", role: "admin" };
console.log(greet(admin));

Rust

fn main() {
    let greetings = ["Hello", "Hola", "Bonjour"];

    for greeting in greetings.iter() {
        println!("{}, world!", greeting);
    }
}

Diff

- const theme = "light";
+ const theme = userPreference ?? "light";

Diagrams

flowchart LR
  Draft[Draft] --> Preview[Preview]
  Preview --> Publish[Publish]

Mathematical Notation

You can include math equations using LaTeX syntax by setting math: true in front matter.

Lists and Formatting

• Unordered lists are clean and spacious.
• They support bold and italic text.
  • And nested items.

1. Ordered lists are also supported.
2. Perfect for tutorials or step-by-step guides.

The theme handles all standard Markdown elements gracefully, ensuring your technical content is as readable as your prose.