Workflow

This is the ideal workflow you could follow to start a new paid post project.

1) Create a new repository

Clone the Kit

repository⁠

or use it as a template, clicking on the “Use this template” button in the repository top bar.

⁠

⁠

Name your repository following this format.

TBrandCreativeTech-paidpost-[YYYY]-[clientname]

Or, if necessary for clients with more than a project per year.

TBrandCreativeTech-paidpost-[YYYY]-[clientname]-[projectlabel]

Each paid post repository must be accessible by the

Creative Tech Team⁠

2) Spin up the project

Once you've cloned the template and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

3) Steps

This sequence represents the ideal steps to initiate the development of a custom build using the Paid Post Kit, though the process can vary and doesn't necessarily have to follow a linear order.

Create a new Scoop entry in the

Scoop Paid Post Console⁠

, or visit the existent entry. Take note of its ID, visible in the URL or in the metadata page. Sometimes the entry could be created by other people in the team, such as Audience Development. In case of doubt, doble check with them as this ID is used by other functions of the business.

Add the main data (check some YAML

docs⁠

)

Edit the file src/project/data/settings.yml

Add the SCOOP_ID value and edit the SCOOP_ASSETS_BASE_URL with the same ID.

If the project uses Adobe Fonts, add the project ID after creating a new Adobe Fonts Web Project.

If your project uses Google Fonts, add the required reference in src/routes/layout.svelte

Edit the file src/project/data/content.yml to create, based on the layout requirements, the data structure you’ll be using in the page. Very often this implies splitting the editorial content in chunks of HTML/Markdown, extracting labels or quotes, etc.

If you wants to organise the data differently, add other yaml files in the data folder, import them in src/routes/layout.server.js and return them from the load function, to make them available in your page.

The data will be loaded and available in src/routes/layout.svelte and src/routes/page.svelte where you can start developing you page.

Remember to delete the src/routes/demo folder and its content. It’s an utility folder to draft and test components during the Kit development. We might remove it.

Add the styles shared by the whole page in the files imported by the Wrapper component.

Develop your custom components, import them in src/routes/page.svelte and compose your page layout!

Bundle your project running npm run build and upload the build.zip file created root folder in the interactive tab of the Scoop entry.

1) Create a new repository

2) Spin up the project

3) Steps

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.