CreativeTech Wiki (internal)

Explore

Paid Post Kit

Structure

A list of the content of the Paid Post Kit folder, already coded (✅) or to be done (❓).

The links redirect to the documentation in GitHub. Visit the pages to get more information and usage examples.

Folder structure

📁 src Source code of the project.

📁 lib Components, styles and scripts that are reusable across different paid posts. The folder is aliased as $lib . If you find yourself modifying or adding new files, please consider contributing to the main repository.

📁 actions

📁 animations

✅ fadeUp.js

✅ parallaxY.js

❓📁 type

❓ lineByLine.js

❓ charByChar.js

❓📁 block

❓ unmask.js

📁 track

✅

trackWhenInViewport.js⁠

⁠

📁 components

📁 a11y

✅

ScreenReaderOnly⁠

⁠

❓ Transcript @ TBD: investigate on the opportunity.

📁 dev

✅

NYTTopBar⁠

⁠

✅

NYTFooter⁠

⁠

❓ LoremIpsum TBD: a way to create dynamics textual placeholders.

❓ PlaceHolder TBD: a way to create dynamics media placeholders.

📁 interactive

❓ ScrollSpy TBD: a wrapper component sync with a store and an accompanying nav element. Plus percentage progress.

📁 layout

✅

Container⁠

⁠

❓ Flex TBD: investigate on the opportunity.

Example⁠

✅

MediaQuery⁠

⁠

✅

RatioBox⁠

⁠

📁 media

✅

Image⁠

⁠

✅

Video⁠

⁠

✅

VideoHls⁠

⁠

📁 graphic

✅

Lottie.svelte⁠

A component to embed Lottie files and provide basic playback functions.

❓ SVG.svelte

A component to wrap SVGs and ensure accessibility and flexibility in colour and other attributes.

📁 data

📁 scripts

✅ getAssetsUrl.js

✅ trackEvent.js

📁 utils

⁠

componentUniqueId⁠

⁠

📁

tracking⁠

⁠

trackEvent.js

eventObject.js

📁

perf⁠

⁠

❓debounce.js

✅ throttle.js

📁

string⁠

⁠

✅ slugify.js

📁 number

❓padZeros.js

📁 stores

✅ prefersReducedMotion.js

❓ browser.js

❓ device.js

❓ touch.js

❓ viewport.js

📁styles

✅ mixins.scss TBD: split mixins in different files. Consider automatically prepend them to all svelte components.

✅ nyt-wrapper-fixes.scss

📁 project Components, styles and scripts specific to the paid posts. The folder is aliased as $proj .

📁 actions

📁 components

📁 base

✅

CTAButton⁠

⁠

✅

Footer⁠

⁠

✅

Header⁠

⁠

✅

Wrapper⁠

Used to add specific project styles to the page.

📁 demo Demo page component(s)

Example.svelte

📁 data

✅ content.yml

✅ settings.yml Scoop ID / Scoop assets base URL / Adobe Fonts Projects ID

☑️ Add more .yml files and import them in +layout.server.js if needed.

📁 scripts

✅ layout.j

📁 stores

📁 styles

✅ variable.css Imported in +page.svelte, it might be better to move the custom properties to base/Wrapper.svelte for consistency

📁 static Assets to be copied in the production folder.

📁 css

✅ nyt-reset.css The NYT website reset, imported during development to simulate the production styles cascade. To be moved to the src folder as it’s not needed in production.

📁 img Placeholders

📁 vid Placeholders

Folder structure

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.