288 Toolkit

This is a collection of package that Deux Huit Huit uses to build websites. They are meant to be used with Svelte, Sveltekit and Craft CMS.

Packages

• @288-toolkit/animations
• @288-toolkit/arrays
• @288-toolkit/base64-filters
• @288-toolkit/component-loader
• @288-toolkit/components
  • @288-toolkit/components/back-to-top
  • @288-toolkit/components/cookie-popup
  • @288-toolkit/components/copyright
  • @288-toolkit/components/dev-error-page
  • @288-toolkit/components/dismissable
  • @288-toolkit/components/html-elements
  • @288-toolkit/components/marquee
  • @288-toolkit/components/minimap
  • @288-toolkit/components/pagination
  • @288-toolkit/components/slideshow
  • @288-toolkit/components/sprite-animation
  • @288-toolkit/components/video-embed
• @288-toolkit/css
• @288-toolkit/dates
• @288-toolkit/device
• @288-toolkit/format
• @288-toolkit/forms
• @288-toolkit/functions
• @288-toolkit/graphql
• @288-toolkit/hooks
• @288-toolkit/html-parser
• @288-toolkit/http
• @288-toolkit/i18n
• @288-toolkit/math
• @288-toolkit/page-transition
• @288-toolkit/shares
• @288-toolkit/strings
• @288-toolkit/timeout
• @288-toolkit/typed-context
• @288-toolkit/types
• @288-toolkit/ui
• @288-toolkit/url
• @288-toolkit/vite-plugin-svelte-inline-component
• @288-toolkit/vite-plugin-svelte-replacers

Deprecated and removed

• Copy to clipboard on click: use https://github.com/ghostdevv/svelte-copy instead

Development

Create a package

To easily create a package:

• Install pnpm globally:

npm i -g pnpm

• Clone the repo locally

git clone https://github.com/DeuxHuitHuit/288-toolkit

• Create a new branch

git checkout -b <package-name>

• Run the make-pkg script:

pnpm make-pkg

This will scaffold a basic workspace inside the packages folder.

Publish a package

The process relies 100% on the github actions workflow and the changeset process. Once your PR or first commit is created, add a changeset file by running:

pnpm cs

Make sure to follow the instructions on screen and add a changelog message. Commit this file.

Merging the PR into the main branch will trigger a build action. This will open a new pull request with the build changes. Once the pull request is merged, the main branch needs to be merged into the release branch.

git checkout release
git fetch --all
git merge --ff-only origin/main
git push origin release

This will trigger a publication action and open yet another pull request. Once this PR is merged, the packages are published to npm.

The release commit made in the release branch now needs to be fast-forwarded to main and pushed to github.

git checkout main
git fetch --all
git merge --ff-only origin/release
git push origin main

Here's a diagram to help you understand the process:

PR → main ──────┐
                ↓
          [Build Action]
                │
                ↓
            New PR ──────┐
                         ↓
             Manually fast-forward main → release
                         │
                         ↓
                   [Publish Action]
                         │
                         ↓
                     New PR ──────┐
                                  ↓
                            [Publish to npm]
                                  │
                ┌─────────────────┘
    Manually fast-forward release → main

License

This package is part of the 288-toolkit collection, developed by Deux Huit Huit.

See the LICENSE file for more information.