Astro

Astro

A simple guide on how to use Astro Components in .astro and .mdx files.

:choco-info: Callout Component Used In Examples Below

For the purpose of this documentation page, the <Callout /> Component will be used along with Lorem Ipsum to simulate a real use case scenario. More information on Components can be found in the Astro documentation.

General Items for Both File Types

Things to note:

  • imports should be grouped together by "Scripts and types" or Components.
  • imports should be alphabetized within their grouped scope by file or module name.
  • A variable should be descriptive as to what it is and should avoid using confusing contractions.
  • A variable name can not be defined twice on the page.
  • When passing in a variable to a Component, use { } instead of " ".
// Scripts and types import { getCollection } from 'astro:content'; import { generateContentToc } from '@scripts/generate-content-toc.ts'; import { generateContentTree } from '@scripts/generate-content-tree.ts'; // Components import Breadcrumbs from '@components/Breadcrumbs.astro'; import Children from '@components/Children.astro'; import LayoutDocs from '@layouts/LayoutDocs.astro'; import TableOfContents from '@components/toc/TableOfContents.astro';

Using Components in .mdx

Things to note:

  • The import of the Component comes directly after the top frontmatter, and must have one line break below it separating it from page content.

Passing in an Object to the Component in .mdx

Things to note:

  • The export const keywords must be used when defining the variable.
  • There must be one line break after the variable is defined.
--- order: 1 xref: astro title: Astro description: A simple guide on how to use Astro Components in .astro and .mdx files. --- import Callout from '@choco/components/Callout.astro'; Donec congue, nisi ut dignissim mattis, mi tortor eleifend augue, volutpat semper neque leo in urna. Quisque vel vulputate turpis, eget lacinia odio. export const callout1 = { title: 'Custom title for info callout', type: 'info' }; A basic callout: This is used for general notes. In auctor, nunc a molestie varius, mauris ligula dictum risus, quis varius mauris dolor eu turpis. Curabitur eget est finibus, eleifend tellus eu, dignissim nulla.

Passing in Options on Component in .mdx

--- order: 1 xref: astro title: Astro description: A simple guide on how to use Astro Components in .astro and .mdx files. --- import Callout from '@choco/components/Callout.astro'; Donec congue, nisi ut dignissim mattis, mi tortor eleifend augue, volutpat semper neque leo in urna. Quisque vel vulputate turpis, eget lacinia odio. A basic callout: This is used for general notes. In auctor, nunc a molestie varius, mauris ligula dictum risus, quis varius mauris dolor eu turpis. Curabitur eget est finibus, eleifend tellus eu, dignissim nulla.

Using Components in .astro

Things to note:

  • The import of the Component comes directly inside the top frontmatter after any imported scripts or types and before any variables are defined.
  • There should always be a line break after the frontmatter before any page content.

Passing in an Object to the Component in .astro

--- import Callout from '@choco/components/Callout.astro'; const callout1 = { title: 'Custom title for info callout', type: 'info' }; --- Donec congue, nisi ut dignissim mattis, mi tortor eleifend augue, volutpat semper neque leo in urna. Quisque vel vulputate turpis, eget lacinia odio. A basic callout: This is used for general notes. In auctor, nunc a molestie varius, mauris ligula dictum risus, quis varius mauris dolor eu turpis. Curabitur eget est finibus, eleifend tellus eu, dignissim nulla.

Passing in Options on Component in .astro

--- import Callout from '@choco/components/Callout.astro'; --- Donec congue, nisi ut dignissim mattis, mi tortor eleifend augue, volutpat semper neque leo in urna. Quisque vel vulputate turpis, eget lacinia odio. A basic callout: This is used for general notes. In auctor, nunc a molestie varius, mauris ligula dictum risus, quis varius mauris dolor eu turpis. Curabitur eget est finibus, eleifend tellus eu, dignissim nulla.