[piyusshhjangid]

Closes #285

Summary

Adds the quote-interview template for featuring an interview question and answer.

• Displays the question in the accent color with a Q mark and the answer with an A mark.
• Places the speaker’s name and role at the bottom, opposite the site name.
• Hides whitespace-only optional fields; the Q mark also hides when the question is empty.
• Shrinks and truncates long questions and answers.
• Darkens accent text on light backgrounds and keeps answer text readable.
• Exports and registers the template, with focused coverage for rendering and optional fields.

How I Tested This

• npm run check — passed with 0 errors and 0 warnings.
• npm run test -- --testTimeout 15000 — 1,427 tests passed across 69 files.
• npm run build — passed.
• git diff --check — passed.
• Tested locally with npm run dev: confirmed the editor loads the template, checked the default dark design and a white background with pale yellow accent.

AI Assistance

OpenAI Codex assisted with implementation, tests, and validation. I reviewed the changes.

Type of Change

• New template

Screenshots

Dark default and light background with pale accent:

Checklist

• This PR targets dev
• I was assigned the linked issue (assignment is still pending on Add the Interview Q&A quote template (quote-interview) #285)
• npm run check passes
• npm run test passes
• Tested locally with npm run dev
• Screenshots included for visual changes
• New template follows the Template Guidelines

[piyusshhjangid]

Hi @anurag629, sorry—I saw that you opened this issue for me and asked me to comment so you could assign it, but I missed checking that the assignment had gone through before opening PR #287. The linked-issue check is now failing. Could you assign #285 to me? I’ll verify the assignment before opening future PRs.

[anurag629]

Thanks @piyusshhjangid, this is close. Check, all 1427 tests and the build pass on top of dev, and the defaults, a white background with a pale accent, a long question and answer, and blank fields all look right.

Two things:

1. With a long author, role and site name (at your 48, 64 and 48 character limits), the site name runs off the right edge of the card. It has flexShrink: 0 (line 134), so a wide author column pushes it out. Letting it shrink and cut off with an ellipsis, or truncating it shorter, would keep it on the card.
2. With no question, the answer still gets its top border (line 108), so there's a divider at the top of the card with nothing above it. Could you drop the border when there's no question?

[anurag629]

Thanks @piyusshhjangid, the divider is fixed and the defaults still look right. The site name is closer but not there yet: with a long one ("THE WONDERFUL WEEKLY BUILDER NOTES MAGAZINE OK", inside your 48 character limit) the card now shows "EKLY BUILDE…", so the start of the name is cut off as well as the end. I think justifyContent: 'flex-end' pushes the overflowing text out past the left edge before the ellipsis cuts the right. Could you make it keep the start of the name, so a long one reads "THE WONDERFUL WEEKLY…", and check it with long values in all three footer fields?

[anurag629]

Thanks @piyusshhjangid, the long one now keeps the start of the name. Two things came with it though:

1. The site name lost its place on the right. Even in the default card, "THE BUILDER NOTES" now sits right after the role instead of at the right edge, because textAlign: 'right' doesn't move the text inside a flex span here.
2. The 21 character cap cuts names that have room, like newsletter.codercops.com, which becomes "newsletter.codercops…" with plenty of space next to it.

Could you keep it on the right with the footer's space-between, drop the fixed cap, and let the span shrink with an ellipsis only when the footer is actually full? Check the default, a normal domain and the long case.

[piyusshhjangid]

Updated the footer layout: the site name stays at the right edge, keeps its full text when there’s room, and shrinks with an ellipsis only when the footer is crowded. I checked the default name, a normal domain, and long author, role, and site name values. The focused tests pass.

[anurag629]

Thanks @piyusshhjangid, that's it. Check, all 1475 tests and the build pass on top of dev, and the site name is back on the right edge, shows a normal domain like newsletter.codercops.com in full, and keeps its start with an ellipsis at the end when the footer is full.