chore: add tasks-docker first in starter templates list #20169

bcpeinhardt · 2025-10-03T21:41:49Z

This PR:

Adds the tasks-docker template to the embeded template examples
Makes the tasks-docker template the leading template on the starter-templates page
Makes the tasks-docker template the leading template on the featured templates list (in EmptyTemplates)

closes #19718

Screen.Recording.2025-10-03.at.4.24.43.PM.mov

bcpeinhardt · 2025-10-03T21:44:27Z

site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx

 const sortVisibleTemplates = (templates: TemplateExample[]) => {
-	// The docker template should be the first template in the list,
-	// as it's the easiest way to get started with Coder.
-	const dockerTemplateId = "docker";


Previously, the docker template was being moved to the front of the list in the frontend. We simply swapped that for the tasks-docker template.

Just to make sure I'm understanding the product goal: are we okay with dropping the old Docker template entirely, or would we still want it to be second in the list? We still have the Docker template as the second one for the empty templates component

The docker template is just no longer the very first template displayed. It's still in the list we're sorting it's just ordered based on its name rather than being manually pulled to the front.

Product wise I think these are meant to be different lists. The EmptyTemplates component is only ever seen when your deployment has no templates pushed, whereas the starter-templates page is more likely to be encountered by a typical developer looking to make a quick template.
But also I'm okay with simply making the docker template second here too.

bcpeinhardt · 2025-10-03T21:46:36Z

examples/examples.go

 	//go:embed templates/kubernetes-devcontainer
 	//go:embed templates/nomad-docker
 	//go:embed templates/scratch
+	//go:embed templates/tasks-docker


We currently embed the starter template in the binary. This is where we add the tasks-docker template to the list (the examples/templates/tasks-docker directory contains its contents copied from https://github.com/coder/registry/tree/main/registry/coder-labs/templates/tasks-docker).

…mplates

…-starter-templates

Parkreiner

Looks good to me overall. The StarterTemplate page has some Emotion styling still, but I have a PR that removes that, so it's not a big deal to take care of that here

Parkreiner · 2025-10-06T14:46:08Z

examples/templates/tasks-docker/README.md

+
+![Tasks](../../.images/tasks-screenshot.png)
+
+This is a fantastic starting point for working with AI agents with Coder Tasks. Try prompts such as:


Nit: I feel like "fantastic" feels too qualitative and feels kinda like AI output

Haha I copied this source directly from the existing template in the registry, It should probably stay the same until we integrate registry into the core product, but I agree it feels like an AI wrote this.

Parkreiner · 2025-10-06T14:47:54Z

site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx

 const sortVisibleTemplates = (templates: TemplateExample[]) => {
-	// The docker template should be the first template in the list,
-	// as it's the easiest way to get started with Coder.
-	const dockerTemplateId = "docker";


Just to make sure I'm understanding the product goal: are we okay with dropping the old Docker template entirely, or would we still want it to be second in the list? We still have the Docker template as the second one for the empty templates component

Parkreiner · 2025-10-06T15:02:47Z

site/src/pages/TemplatesPage/EmptyTemplates.tsx

 import { docs } from "utils/docs";

 // Those are from https://github.com/coder/coder/tree/main/examples/templates
 const featuredExampleIds = [


Nothing wrong with this file, but it looks like it'd be pretty easy to swap in Tailwind here.

If we get rid of the styles object, we should be able to add className="max-w-[50%] h-80 overflow-hidden opacity-85 [&_img]:max-w-full" to the div, and that should be equivalent

I'm down to look at doing this together 😎

aslilac · 2025-10-06T17:21:53Z

why are we unpinning the regular docker template?

bcpeinhardt · 2025-10-06T17:35:39Z

why are we unpinning the regular docker template?

The ticket ask was to pin the Tasks on Docker Template first. I can update the PR to keep the Docker template pinned in the second slot. From the code I sort of thought the idea was to have one pinned template at a time and the rest organized by name. I think maybe the better solution though is to have the set of "featured templates" apply to the starter-templates page as well as the EmptyTemplates component.

aslilac · 2025-10-06T22:07:20Z

agreed. having a simple template front and center that doesn't require spending a bunch of cloud provider money is a great way to ease into the product.

david-fraley · 2025-10-09T18:28:59Z

@bcpeinhardt Agree with your approach and thoughts here. Having the Tasks On Docker first makes for a super easy entry point to Tasks, but it wasn't the intention to have the Docker template fall to the wayside. Having it be the 2nd in the list is what I was hoping for! I like the idea of a "featured templates" section!
cc @aslilac

Addresses review feedback to keep the regular 'docker' template as the second featured template after 'tasks-docker'. Sorting order is now: 1. tasks-docker (easiest entry point) 2. docker (keeps original docker template featured) 3. All others sorted alphabetically 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

…-starter-templates

aslilac

this sort algorithm feels like too much now imo. I really liked your idea of just breaking things up into a "featured" section and everything else.

even if we don't do that yet, in utils/starterTemplates.ts there's a function that this templates value we end up with is coming from, and that does some processing already. I think we could update that function to pull this logic out of React and consolidate things.

aslilac · 2025-10-14T23:57:43Z

site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx

+		if (a.id === tasksDockerTemplateId) {
+			return -1;
+		}
+		if (b.id === tasksDockerTemplateId) {
+			return 1;
+		}


this is technically an unstable sort because you're not handling a.id === b.id. there shouldn't ever be duplicates, but it's worth thinking about the ramifications.

aslilac · 2025-10-15T00:00:55Z

site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx

 		if (a.id === dockerTemplateId) {
 			return -1;
 		}


I also worry that it's super unclear why this sort works the way it does. I kinda wish templates just didn't include the docker or tasks-docker templates at all so that it could have a normal sort, and that things sorted "manually" were just in an obvious order, rather than having a complicated looking algorithm that takes up more lines of code than hardcoding the order would.

this pattern was already too clever for it's own good, but with this additional case now it's even more so.

bcpeinhardt requested review from Parkreiner and aslilac as code owners October 3, 2025 21:41

github-actions bot assigned bcpeinhardt Oct 3, 2025

bcpeinhardt commented Oct 3, 2025

View reviewed changes

bcpeinhardt added 4 commits October 3, 2025 16:52

add tasks-docker example template

10c7326

add tasks icon to site/static and get example codegen working

4048dec

add tasks-template to front of starter-templates page and featured te…

03b067b

…mplates

rename function back to sortVisibleTemplates

b865e8a

bcpeinhardt force-pushed the bcpeinhardt/add-run-coder-tasks-on-docker-to-starter-templates branch from 6974c83 to b865e8a Compare October 3, 2025 21:52

bcpeinhardt marked this pull request as draft October 3, 2025 21:52

bcpeinhardt marked this pull request as ready for review October 3, 2025 22:06

bcpeinhardt and others added 4 commits October 3, 2025 22:33

make gen to update docs

2610294

use same fill as rust to see if some wacky css applies

854780a

put svg back to original and add the externalImages.ts

9bcae05

Merge branch 'main' into bcpeinhardt/add-run-coder-tasks-on-docker-to…

c56ea12

…-starter-templates

Parkreiner approved these changes Oct 6, 2025

View reviewed changes

bcpeinhardt added traiage and removed traiage labels Oct 14, 2025

bcpeinhardt and others added 2 commits October 14, 2025 16:03

Merge branch 'main' into bcpeinhardt/add-run-coder-tasks-on-docker-to…

d6fef54

…-starter-templates

aslilac reviewed Oct 15, 2025

View reviewed changes


		![Tasks](../../.images/tasks-screenshot.png)

		This is a fantastic starting point for working with AI agents with Coder Tasks. Try prompts such as:

chore: add tasks-docker first in starter templates list #20169

Are you sure you want to change the base?

chore: add tasks-docker first in starter templates list #20169

Conversation

bcpeinhardt commented Oct 3, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bcpeinhardt Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Parkreiner left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Parkreiner Oct 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aslilac commented Oct 6, 2025

Uh oh!

bcpeinhardt commented Oct 6, 2025

Uh oh!

aslilac commented Oct 6, 2025

Uh oh!

david-fraley commented Oct 9, 2025

Uh oh!

aslilac left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

bcpeinhardt Oct 3, 2025 •

edited

Loading

Parkreiner Oct 6, 2025 •

edited

Loading