Blog Post Guidelines

This document provides guidelines for creating and formatting blog posts in this project.

File Structure

Each blog post should be an page.mdx file.
Place each page.mdx file within its own descriptive sub-folder inside app/blog/. For example, a blog post titled "My Awesome Post" would live at app/blog/my-awesome-post/page.mdx.

Metadata

At the beginning of each page.mdx file, you must include a metadata export. This object provides essential information for SEO and how the blog post is displayed.

export const metadata = {
  title: 'Your Blog Post Title', // The main title of the blog post
  description: 'A concise summary of your blog post content (around 150-160 characters).',
  alternates: {
    canonical: '/blog/your-blog-post-slug', // The unique URL slug for this post
  },
  // Optional: Add other metadata fields as needed, e.g., openGraph, twitter, etc.
};

Fields:

title (String, Required): The title of your blog post. This will be used in the browser tab, search engine results, and social media shares.
description (String, Required): A brief description of the blog post's content. Keep it concise and informative.
alternates.canonical (String, Required): The canonical URL for the blog post. This should match the folder structure, e.g., /blog/your-post-title-slug.

Cover Image

You can include a cover image at the top of your blog post using the <Cover /> component. This component should be placed after the metadata export and before the main title heading (#).

<Cover
  src="https://your-image-url.com/image.jpg" // URL of the cover image
  alt="A descriptive alt text for the image" // Important for accessibility
  caption="Optional: Source or caption for the image" // e.g., "Photo by Jane Doe" or "cosmos.com"
/>

Props:

src (String, Required): The direct URL to the image you want to use as a cover.
alt (String, Required): Alternative text for the image. This is crucial for accessibility and SEO. Describe the image concisely.
caption (String, Optional): A caption to display below the image, often used for attribution or a brief comment.

Content

Main Title: The main title of your blog post should be an <h1> heading, written in Markdown as # Your Blog Post Title. This should typically match or be very similar to the title in your metadata.
Structure: Use Markdown headings (##, ###, etc.) to structure your content logically.
Horizontal Rules: Use --- to create thematic breaks or separate major sections in your content.
Custom Components: Feel free to use other custom React components available in the project within your MDX.

Example Structure (`page.mdx`)

export const metadata = {
  title: 'Exploring the Intersection of Design, AI, and Design Engineering',
  description:
    'Design and artificial intelligence (AI) are increasingly intertwined, driving innovation across industries. As technology evolves, the role of design engineering is more critical than ever, bridging creativity and functionality.',
  alternates: {
    canonical: '/blog/exploring-the-intersection-of-design-ai-and-design-engineering',
  },
};

<Cover
  src="https://cdn.cosmos.so/affd4b79-e848-4dfd-bd42-5f2c4a847365?format=jpeg"
  alt="Abstract representation of AI and design"
  caption="Image from cosmos.com"
/>

# Exploring the Intersection of Design, AI, and Design Engineering

Your main blog content starts here...

---

## A New Section

More content...

### A Sub-section

Details...