Raw Prompt

Give me a prompt to implement my personal website - I’m going to use it as my personal engineering prompt saver.

Enhanced Prompt

Here is a comprehensive prompt you can copy and paste into a generic coding LLM (like Claude 3.5 Sonnet or GPT-4o) to generate your website.

I have chosen a Static Site Generator (Astro) approach for this.

• Why? It is incredibly fast, free to host (GitHub Pages/Vercel), and “posting” is as simple as dropping a Markdown file into a folder. It is the gold standard for engineering blogs right now.

---

The Prompt to Copy/Paste

Act as a Senior Frontend Engineer. I need to build a personal “Engineering Prompt Saver” website. This will be a lightweight blog/library where I store useful LLM prompts, code snippets, and engineering notes.

The Tech Stack:

• Framework: Astro (latest version)
• Styling: Tailwind CSS
• Content: MDX (Markdown + JSX)
• Interactivity: React (only where necessary)
• Deployment: Vercel

Key Features Required:

1. Homepage: A clean grid or list of recent prompts.
2. Categorization: A sidebar or top bar allowing me to filter content by “Category” (e.g., Coding, DevOps, Writing, Email) and “Tags” (e.g., Python, AWS, Regex).
3. Search: A simple client-side search bar to find prompts quickly.
4. The “Post” View:
   • Must render Markdown code blocks nicely with syntax highlighting (Shiki).
   • Crucial Feature: Every code block/prompt block must have a “Copy to Clipboard” button in the top right corner.
5. Dark Mode: Default to system preference, but include a toggle.

Deliverable: Please provide the project structure and the code for the essential files:

• astro.config.mjs
• src/layouts/Layout.astro
• src/pages/index.astro (Homepage with search/filter)
• src/components/PromptCard.astro
• src/layouts/MarkdownPostLayout.astro
• A sample MDX file showing how I should format my frontmatter (title, tags, category).
• The logic for the “Copy to Clipboard” button.

Keep the design minimal, utilitarian, and high-contrast (engineering aesthetic).