feat(templates): add "Open prompt in" dropdown with Replit Agent support#106
Open
thisistonydang wants to merge 2 commits into
Open
feat(templates): add "Open prompt in" dropdown with Replit Agent support#106thisistonydang wants to merge 2 commits into
thisistonydang wants to merge 2 commits into
Conversation
Templates that ship a replit-prompt.md now render an "Open prompt in"
dropdown next to Copy prompt. The Replit menu item opens replit.com
with the prompt lz-string-compressed into the URL, so Replit Agent
picks it up on landing.
Plumbing:
- readReplitPrompt(rootDir, tier, slug) reads from any of the three
template tiers (examples, recipes, cookbooks)
- replitPromptsBySlug exposed by both the cookbooks plugin and the
content-entries plugin
- useReplitPrompt(slug) aggregates across all three plugin sources so
detail pages stay tier-agnostic
- Replit prompts live next to goal.md but stay out of ContentSections
-- they're an export target, not rendered content
- Validator accepts replit-prompt.md in resource and cookbook folders
UI:
- New OpenPromptInButton (returns null when no targets are available)
- New PromptTarget abstraction in src/lib/prompt-targets.ts, ready for
more targets (Cursor, v0, Lovable, ...) via a one-line registry entry
- New ReplitIcon brand mark (Simple Icons CC0)
- Replit URL includes the documented-required stack=Build parameter
- track("open_prompt_in", { target, slug, title, permalink }) on click,
symmetric with the existing copy_prompt event
Initial 10 Replit prompts:
- Examples: saas-tracker, vacation-rentals, inventory-intelligence,
content-moderator
- Cookbooks: genie-analytics-app, operational-data-analytics
- Recipes: genie-conversational-analytics, genie-multi-space,
medallion-architecture-from-cdc, volume-file-upload
Tests:
- prompt-targets.test.ts: target shape, stack=Build, UTM, lz-string
roundtrip
- validate-content.test.ts: replit-prompt.md allowed in both folder
types
- e2e/open-prompt-in.spec.ts: dropdown render/hide, URL roundtrip to
source file, analytics payload contract
Also fixes a pre-existing aspect-[16/9] -> aspect-video lint warning in
three detail pages while touching them.
| @@ -0,0 +1,100 @@ | |||
| # Build a Genie Analytics App with Databricks on Replit | |||
Collaborator
There was a problem hiding this comment.
Could this be:
content/replit-preamble.md + optional content/<content-piece>/replit.md + content/<content-piece>/something-else-generic-that-may-be-useful-to-add.md
Seems like a bunch of copy-pasted content right now. Maybe we can split it up and concatenate?
| const REPLIT_PATH = | ||
| "M2 1.5A1.5 1.5 0 0 1 3.5 0h7A1.5 1.5 0 0 1 12 1.5V8H3.5A1.5 1.5 0 0 1 2 6.5ZM12 8h8.5A1.5 1.5 0 0 1 22 9.5v5a1.5 1.5 0 0 1-1.5 1.5H12ZM2 17.5A1.5 1.5 0 0 1 3.5 16H12v6.5a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 2 22.5Z"; | ||
|
|
||
| export function ReplitIcon(props: SVGProps<SVGSVGElement>) { |
Collaborator
There was a problem hiding this comment.
Lol AI is so silly sometimes. Not worth changing but just funny
Collaborator
🤨 alignment? |
Using Radix's --radix-dropdown-menu-trigger-width CSS variable makes the dropdown's width track the "Open prompt in" trigger button exactly, so the menu tucks under it with matching left and right edges. Replaces the prior min-w-44 (176px) which overhung the trigger on the right, then a brief intermediate state where dropping the override fell back to the shadcn default min-w-[8rem] (128px) and left the dropdown narrower than the trigger.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
replit-prompt.mdnow render an Open prompt in dropdown next to Copy prompt on the agent usage card. The Replit menu item opensreplit.com/?stack=Build&prompt=…with the prompt lz-string-compressed into the URL, so Replit Agent picks it up on landing.PromptTargetregistry in src/lib/prompt-targets.ts — adding future targets is a one-line entry there. Surfaced through a tier-agnosticuseReplitPrompt(slug)hook so detail pages don't need to know whether the template is an example, recipe, or cookbook.goal.mdbut stay out ofContentSections— they're an export target, not part of the rendered template content, so the content-sections pipeline isn't polluted.What's in scope
readReplitPrompt(rootDir, tier, slug)helper in src/lib/content-markdown.ts;replitPromptsBySlugexposed by both plugins/cookbooks.ts and plugins/content-entries.ts; aggregator hook in src/lib/use-raw-content-markdown.ts. Validator now acceptsreplit-prompt.mdin resource + cookbook folders.nullwhen no targets, so non-Replit templates are unchanged); new src/components/icons/replit-icon.ts brand mark (Simple Icons, CC0);slugprop threaded through agent-usage-card.tsx.track("open_prompt_in", { target, slug, title, permalink })fires on menu item click — symmetric with the existingcopy_promptevent. Action-named UTM (utm_content=open-prompt-in) so analytics history stays continuous if the dropdown is relocated.stack=Buildparameter (per Replit's Open in Replit docs).aspect-[16/9]→aspect-videolint warnings in the detail pages I touched.Initial 10 Replit prompts
Templates without a
replit-prompt.mdare unchanged — the agent usage card hides the dropdown entirely.Tests
stack=Buildpresence, UTM attribution, lz-string lossless roundtripreplit-prompt.mdaccepted in both resource and cookbook foldersopen_prompt_inanalytics event fires with the exact payloadTogether these protect every regression surface I could think of: the
stack=Buildfix, lz-string encoding, validator allow-list, plugin pipeline, dropdown render conditions, and analytics payload contract.Test plan
open_prompt_inevent lands in Vercel analytics withtarget=replitand per-templateslug/title/permalinkbreakdownsLockfile note
The added
lz-string@^1.5.0dep hadnpm installwritenpm-proxy.cloud.databricks.cominto the resolved URL (4th time this has happened on the repo — see 4085dc2, 064497a, b8a7b17). Rewrote it toregistry.npmjs.orgso Vercel can resolve it. Integrity hash unchanged.Worth considering a follow-up PR with a repo-level
.npmrcpinningregistry=https://registry.npmjs.org/so future engineers don't hit this.Future targets
Adding future targets later is a one-line push in
getPromptTargets({...}). The analytics event already uses atargetproperty keyed by id, so dashboards filtering on that will pick up new targets automatically.Out of scope
useReplitTemplateIdshook that walks the same three plugin-data sources we already expose, plus a checkbox intemplate-filters.tsx.CopyPromptButtonto a split-button variant — explored in an earlier branch, but Copy and Open-in-X are semantically different actions, so they read cleaner as two siblings.