Added New Code Style and Render Logic Prompts

Summary

Added three new prompt documents to guide component architecture, styling approaches, and dynamic routing implementation in the Astro-based site. These prompts establish best practices for component refactoring, CSS architecture, and content rendering.

Changes Made

  • Created three new prompt documents in the /content/lost-in-public/prompts/ directory:
    • code-style/Move-Functionality-and-Style-to-Specific-Components.md
    • code-style/Move-Styles-from-Tailwind-to-CSS-using-our-Styles.md
    • render-logic/Integrate-Concepts-into-More-About.md
  • Established guidelines for component-based architecture
  • Documented approach for transitioning from Tailwind to semantic CSS
  • Provided implementation details for integrating concepts collection into dynamic routing

Impact

  • Improved Code Organization : Established patterns for component refactoring and organization
  • Enhanced Maintainability : Documented approach for moving from utility classes to semantic CSS
  • Expanded Content Access : Created framework for rendering concepts alongside vocabulary
  • Standardized Implementation : Provided reference documentation for future similar tasks
  • Consistent Architecture : Ensured component and styling approaches follow project standards

Content Details

1. Move-Functionality-and-Style-to-Specific-Components.md

This prompt outlines the approach for refactoring page-level component rendering into dedicated component files:
  • Objective : Move vocabulary and concept rendering from page files to dedicated components
  • Target Components :
    • @components/reference/VocabularyPreviewCard.astro
    • @components/reference/ConceptPreviewCard.astro
  • Implementation Status : Completed and implemented

2. Move-Styles-from-Tailwind-to-CSS-using-our-Styles.md

This prompt establishes guidelines for transitioning from Tailwind utility classes to component-specific CSS:
  • Context : Moving away from inline Tailwind classes toward a more maintainable CSS architecture
  • Approach :
    • Using semantic BEM-style class naming
    • Leveraging project CSS variables
    • Adding comprehensive comments
    • Maintaining consistent styling patterns
  • Implementation Status : Applied to reference components

3. Integrate-Concepts-into-More-About.md

This prompt documents the implementation of dynamic routing for the concepts collection:
  • Objective : Render content/concepts markdown files through the same /more-about dynamic router used for vocabulary
  • Key Components :
    • Dynamic route handler using catch-all pattern
    • Index pages for browsing collections
    • Title generation from filenames
    • Consistent styling across collections
  • Implementation Status : Fully implemented and documented

Documentation

  • Implementation details are documented in the respective prompt files
  • Code changes are tracked in the code changelog: content/changelog--code/2025-04-12_03.md
  • The concepts collection is documented in: content/changelog--content/2025-04-10_01.md

List of New Files

  • [[content/lost-in-public/prompts/code-style/Move-Functionality-and-Style-to-Specific-Components.md]]
  • [[content/lost-in-public/prompts/code-style/Move-Styles-from-Tailwind-to-CSS-using-our-Styles.md]]
  • Integrate Concepts into More About