tus.io

Development

Getting ready

• git clone github.com/tus/tus.io && cd tus.io
• yarn install
• yarn dev

The site is automatically published to GitHub Pages on any commits to the main branch.

Philosophy/rules

• Do not hydrate components unless strictly necessary
  • This reduces the amount of JavaScript shipped to users' browsers.
• Write scoped CSS as much as possible.
  • Avoids CSS collisions.
  • Makes CSS dependencies explicit, allowing for easier editing.
  • Astro components and CSS Modules import for Preact components make this easy.
• Write semantic HTML.
• Use Astro components for static reusable components.
• Use Preact components for interactive components.

Content editing

Page content is located in src/pages. Routing is file-based, meaning that both the directory and names of files determine the URL of the page. For example, src/pages/docs/clients/node.md will be available at /docs/clients/node.

It is possible to write pages in Markdown, MDX or Astro. The latter two allow for interactive features, such as embedding Preact components. If you want to use an interactive component on a page, make sure you instruct Astro to hydrate the component. See src/pages/demo.mdx for an example of how that would look.

Content collections, currently blog posts, features and protocols, are placed in src/content. Pages are not automatically generated from content collections. Instead, the content collections are consumed in pages, for instance in src/pages/blog/index.astro for the blog feed page. Route generation for single blog posts is handled in src/pages/blog/[...slug].astro. The pages are generally also where layouts are applied.

Not automatically generating pages is useful because content collections can be used in various ways. The features collection for instance, does not have pages, but it's Markdown contents are instead rendered on the homepage.

The protocols contents are generated by yarn inject and should not be edited manually.

Directory structure

• src/pages - Pages
• src/components - Reusable components
• src/content - Content collections and their configuration
• src/layouts - Layouts
• src/styles - Global styles
• src/assets - Any images placed here and linked to from img tags in Astro templates, Markdown image definitions, or imported from .ts(x) files will be automatically optimized by Astro
• src/lib - Utility functions
• src/types - Type definitions

Releasing a new version of the tus protocol

Assuming tus/tus-resumable-upload-protocol has been updated with the new version.

• Add the new version to ./scripts/inject-protocol.sh
• chmod +x ./scripts/inject-protocol.sh
• yarn inject
• Commit the changes and push