The gallery is full of helpful design patterns for different genres of projects. But adapting them into new things is hard, because there's a lot of content, and sometimes behavior, that's specific to an example, but not essential to the design pattern.
What's the design idea?
The basic concept would be to extract all of these design patterns, and create starter projects that have placeholder content to be extended, and extensive documentation to explain how they work. This would be very helpful for learning contexts, where a teacher might want to say, "Copy the video template and ..." or "Copy the character mover template and..." We could curate a set of design patterns, and then either make a dedicated gallery for them or even a separate section from galleries (since it's not really a gallery). They could also be included at the end of the tutorial, and referenced in various places in documentation as examples.
Design specification
The design would include the following:
[x] We would call these "templates", invoking the way the word is used throughout other creative platforms
[x] The new project button, instead of creating the basic starter, would bring up a dialog
[x] The initial design of the dialog would contain the following project preview options with a plus next to them, sorted by complexity:
[x] Blank
[x] Animated phrase
[x] Animation sequence
[x] Moveable phrase
[x] Video filter
[x] Sound filter
[x] Prompt and response
[x] Song lyrics
[x] All template project names should be localized, and all projects should be localized in all supported locales
[x] Clicking on any of them would make a new project with the starter code
Implementation
[x] Create example templates in static/examples using the standard example format
[x] Update src/examples/examples.ts to localize the example by stripping unneeded localization
[x] src/routes/projects/+page.svelte should be revised to show a dialog and show templates, using the examples.ts functionality. Use ProjectPreview to display them, and on click, create a new project with the template code.
[x] Create a unit test in examples.test.ts to verify that none of the templates have defects
[x] Create a unit test in examples.test.ts to verify that each name and doc in the template is localized in all of the supported locales
[x] Remove newProject from Locale
[x] Update newProject in gallery/[gallyeryid]/+page.svelte
What's the problem?
The gallery is full of helpful design patterns for different genres of projects. But adapting them into new things is hard, because there's a lot of content, and sometimes behavior, that's specific to an example, but not essential to the design pattern.
What's the design idea?
The basic concept would be to extract all of these design patterns, and create starter projects that have placeholder content to be extended, and extensive documentation to explain how they work. This would be very helpful for learning contexts, where a teacher might want to say, "Copy the video template and ..." or "Copy the character mover template and..." We could curate a set of design patterns, and then either make a dedicated gallery for them or even a separate section from galleries (since it's not really a gallery). They could also be included at the end of the tutorial, and referenced in various places in documentation as examples.
Design specification
The design would include the following:
Implementation
static/examples
using the standard example formatsrc/examples/examples.ts
to localize the example by stripping unneeded localizationsrc/routes/projects/+page.svelte
should be revised to show a dialog and show templates, using theexamples.ts
functionality. UseProjectPreview
to display them, and on click, create a new project with the template code.examples.test.ts
to verify that none of the templates have defectsexamples.test.ts
to verify that each name and doc in the template is localized in all of the supported localesnewProject
from LocalenewProject
ingallery/[gallyeryid]/+page.svelte