Sections

Sections

Files: src/content/sections/english/ (and french/), page content files · Skill level: Beginner to edit, light code to add or move

A section is one full-width block of a page: a hero, a pricing table, an FAQ. Each section is two files that share a name:

src/layouts/components/sections/PricingSection.astro   ← how it looks (component)
src/content/sections/english/pricing-section.md        ← what it says (content)
src/content/sections/french/pricing-section.md

How Taskly Works explains the idea in full. This page is the practical reference.

Change A Section Everywhere

Edit its file in src/content/sections/english/ (and french/). The comments in each file list every option and its allowed values.

Each section checks its content against its schema (in src/sections.schema.ts) when the page renders. A wrong value, such as layout: "boxd" or rating: "five", shows an error in npm run dev and stops npm run build, with the field name. A misspelled key is not an error: it is ignored, so a change that does nothing usually means a typo in the key.

Hide A Section

• Everywhere: set enable: false at the top of its section file.

• On one page: add its block to that page’s file with enable: false:

  logosSection:
    enable: false

• On one page, for good: delete its line in the page’s route file in src/pages/[...lang]/.

Change A Section On One Page

Add a named block to the page’s content file, with only the keys you want to change. The block name is in the table below. Remember the merge rules: objects merge key by key, lists replace the whole list, and "" clears a value.

faqSection:
  title: "Questions about features"
  layout: "centered"

Copy the block name exactly. A block with a wrong name, for example faq: instead of faqSection:, is ignored without an error. npm run astro-check checks the values inside a correctly named block in the page files that have a schema (every page except contact/ and pricing/, whose blocks are checked when the page renders).

Every Section

The component of each file has the same name in PascalCase in src/layouts/components/sections/: stats-panel-section.md is StatsPanelSection.astro, and call-to-action.md is CallToAction.astro.

The Page Header

Inner pages start with the cream page header (src/layouts/components/ui/PageHeader.astro). It has no section file: its title is the page’s title, and the rest comes from the page’s pageHeader: block:

title: "Simple plans for *every* team"
pageHeader:
  tag: { label: "Plans", color: "sun" }
  description: "Start free, then pick the plan that fits."
  breadcrumb: true          # breadcrumb links above the title (off by default)
  layout: "default"         # default | split (see Section Layouts)
  primaryButton: { enable: true, label: "Start free", url: "/signup/", variant: "dark" }
  secondaryButton: { enable: true, label: "Talk to sales", url: "/contact/", variant: "fill-white" }

Breadcrumb labels come from the menu names, so they are translated with your menus.

Shared Pieces That Are Not Sections

src/content/widgets/english/ (and french/) holds the content of parts that appear inside sections or on every page:

• dashboard-mockup.md: the sample data of the coded product dashboard in the hero, the overview, and the stats panel
• announcement-bar.md: the strip above the header (Header)
• cookie-consent.md: the cookie banner (Cookies & Analytics)
• layout-gallery.md: the title and labels of the /elements/ page

Notes And Comment Pins

Two small decorations make the mockups feel like a design review:

• Annotations (ui/Annotation.astro): a DM Mono label in a bordered chip, with a dashed line and a dot pointing at the product. Their text comes from note and notes fields, for example notes in hero-section.md or note on a features card.
• Comment pins (ui/CommentPin.astro): an initial avatar and a speech-bubble chip, like a comment left on a design. They come from comment and comments fields with a name, a short text, and a pastel color.

Delete the field to hide the decoration. Keep the text short: they sit in fixed spots and are hidden on phones (the two hero comments, pinned on the dashboard, show from tablet width; most others from large screens).

Add A New Section

Follow the “Add a new section” recipe in SKILLS.md, by hand or with an AI assistant:

1. Create src/layouts/components/sections/<Name>Section.astro, starting from a similar section.
2. Create src/content/sections/english/<name>-section.md and french/<name>-section.md, with comments listing every option.
3. Add a schema to src/sections.schema.ts and register it in sectionsSchema as <name>Section, so pages can override it.
4. Add a line for it to a route in src/pages/[...lang]/.
5. Run npm run astro-check and open the page.

Do It With AI

On the about page, hide the overview section, and change the team section title to "[TITLE]".
Use named blocks in src/content/about-us/english/-index.md and french/-index.md (block names from
sectionsSchema in src/sections.schema.ts). Don't edit the section files, so other pages keep
their defaults.