Component Structure Guidelines & Variables Name Convention

Component Structure Guidelines ⚙️

Note: This applies to any kind of component (React, Astro, etc).

1. Components should use one type/interface. Extra types only if an array is needed.

1.1 No array needed:

interface Props {
  title: string;
  paragraphs: string;
  propX: string;
  propY: string;
  propZ: string;
  ...
}

1.2 Array needed:

interface Props {
  title: string;
  paragraphs: string;
  cardData: Card[];
}

interface Card {
  title: string;
  paragraphs: string;
  cta?: {
    url: string;
    title: string;
  }
}

2. Components should name the interface/type Props.
3. Components should take only one prop on-page. No need for one const per component prop.

---
const data = {
    title: "Enroll Now",
  paragraphs: "Lorem ipsum",
  propX: "X",
  propY: "Y",
  propZ: "Z",
}
---
<CTASection props={...data}>

4. Component data for props should come from the page frontmatter. No external data.js file for it’s data is needed.
5. Component names should follow Pascal Case (ComponentName.astro ✅ | component-name.astro ❌)
6. Components should always use set:html-like strategies to inject props
7. Icons on components should be used as tags (<svg>, <FaIconName>, etc) and never as an import (exceptions include svg not provided, obviously)

Recommended Folder Structure 📁

src/
  components/
    general/
      Hero.astro
      Footer.astro
      Navbar.astro
      NavbarContact.astro
    specific/
      BlogCard.astro
      BlogFeed.astro
      BlogRelatedPosts.astro
      SectionImageAndDescription.astro
      SectionIcons.astro
      Bento.astro
      Socials.astro
      ImageComp.astro
      FormattedDate.astro
    forms/
      FormComp.astro
      FormField.astro
      FormContact.astro
      FormDiscoveryFlight.astro
    widgets/
      ChatWidget.astro
      ElfSightGoogleReviews.astro
      GoogleMaps.astro

Variables Namming Convention 📝

1. Heading tags use title
2. Text on top of a heading use upperTitle
3. Paragraph tags use paragraph or paragraphs (array)
4. CTA links use url
5. CTA buttons text use label
6. Apply this logic recursively
7. If more than one title, use titles and it becames an array. Same thing for the other variables.

Example:

interface Props {
  upperTitle: string;
  title: string;
  paragraphs: string[];
  cardData: Card[]
  cta: {
    url: string;
    label: string;
  }
}

interface Card {
  title: string;
  paragraphs: string[];
    cta: {
    url: string;
    label: string;
  }
}