Skip to content

Add the Error Explained tutorial template (tutorial-error-explained) #283

Closed

Description

@anurag629

Part of #5. For posts that explain an error message and how to fix it.

Idea
A small "Error explained" label in the accent color at the top, with a language pill next to it ("JavaScript"). Under it, the error message in a monospace box with a red tint ("TypeError: Cannot read properties of undefined (reading 'map')"). Then two short lines, what it means ("You called .map() on something that isn't an array yet") and how to fix it ("Start the state as [] or check before mapping"), and the site name at the bottom.

Template details

  • File: src/templates/tutorial/error-explained.ts, id tutorial-error-explained
  • Fields: commonFields.title (the error message, shown in the monospace box), language (text, optional, default "JavaScript"), meaning (text, optional, default "You called .map() on something that isn't an array yet"), fix (text, optional, default "Start the state as [] or check before mapping"), commonFields.siteName, commonFields.bgColor, commonFields.accentColor, commonFields.textColor

Where to look

  • Closest reference: src/templates/tutorial/glossary.ts (a term with what it means), src/templates/quote/code-comment.ts (text set in JetBrains Mono inside a box)

Acceptance criteria

  • A long error message shrinks with autoFontSize() and then truncates inside the box without running off it, and an empty language, meaning, fix or site name (or only spaces) hides cleanly
  • The error box, its text and any accent text stay readable on a light background
  • Re-exported in src/templates/tutorial/index.ts and registered in the Tutorial block of src/templates/registry.ts
  • Meets the shared template checklist in Add new card-style OG image templates #5

One template per contributor at a time, so more people get a chance.


Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off dev, and open your PR against dev with Closes #283 in the description.

Activity

  1. anurag629 commented on Oct 27, 2026

    @anurag629
    MemberAuthor

    Opened this for @anurag2787, who asked for #279. anurag2787, drop a comment here so GitHub lets me assign it to you.

  2. anurag2787 commented on Oct 27, 2026

    @anurag2787
    Contributor

    HI @anurag629 could you please assign this to me

  3. anurag629 commented on Oct 27, 2026

    @anurag629
    MemberAuthor

    Hey @anurag2787, it's yours!

  4. anurag2787 commented on Oct 27, 2026

    @anurag2787
    Contributor

    Hi @anurag629 is their is any other issue i can work on?

  5. anurag629 commented on Oct 27, 2026

    @anurag629
    MemberAuthor

    Hey @anurag2787, it's one template at a time, so let's get #286 in first. Once it's merged I'll have another one ready for you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

good first issueGood for newcomershacktoberfestGood pick for Hacktoberfest contributorstemplatesTemplate additions and improvements

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions