Post Lifecycle

Post Lifecycle

Manage your stories from draft to publication. Blogify provides a streamlined workflow for creating, refining, and managing your content using a Markdown-first approach.

Creating a Post

To create a new post, you must be authenticated. Navigate to the New Post button on the feed or go directly to /posts/new.

The creation process involves four main components:

• Title: A clear, engaging headline for your story.
• Featured Image: An optional cover image that appears at the top of your post and on the feed.
• Tags: A comma-separated list of keywords to help readers discover your content.
• Content Editor: A distraction-free area that supports full Markdown syntax.

Markdown Support

Blogify uses React Markdown to render your content. You can use standard Markdown syntax for:

• Formatting: Headers (#), bold (**), italics (*), and blockquotes (>).
• Code: Inline code snippets and syntax-highlighted code blocks.
• Math: Support for LaTeX mathematical expressions via remark-math and rehype-katex.
• Lists: Ordered and unordered lists.

Handling Images

You can include images in two ways:

1. Featured Image: Uploaded via the main image field to represent the post.
2. Inline Images: Use the "Upload Image" utility within the editor to insert images directly into your Markdown content. Uploaded images are stored securely via Supabase Storage.

![Image Description](https://your-image-url.com)

Viewing and Discovery

Once published, posts are immediately visible on the Global Feed.

• Metadata: Each post automatically calculates a Reading Time and displays the publication date.
• Tag Navigation: Clicking a tag on any post will filter the feed to show other stories with that specific tag.
• Ownership: If you are the author of a post, "Edit" and "Delete" actions will be available to you on the post detail page.

Editing a Post

Authors can update their content at any time. When you enter the edit mode (/posts/[id]/edit), the system performs an ownership check to ensure only the original creator can modify the content.

The editor fetches the current state of the post, allowing you to:

• Revise the title or body text.
• Add or remove tags.
• Replace the featured image.

When you save changes, the updated_at timestamp is refreshed, and the changes are pushed live immediately.

Deleting a Post

If you need to remove a story, use the Delete button found on the post detail page.

• Authentication Required: You must be logged in and be the verified owner of the post.
• Permanent Action: Deletion is permanent. This action removes the post record from the database and detaches it from your profile.
• Cleanup: Associated metadata and references are cleared, though images uploaded to storage may require separate management depending on your storage configuration.

Data Structure for Developers

When interacting with the API or extending the lifecycle, the following TypeScript interfaces define the post structure:

export interface Post {
  id: string;
  title: string;
  content: string;
  user_id: string;
  tags: string[];
  image_url?: string;
  created_at: string;
  updated_at: string | null;
}

export interface PostCreate {
  title: string;
  content: string;
  user_id: string;
  tags?: string[];
  image_url?: string;
}