Backstitch Website

This is a website for Backstitch, a Godot plugin for real-time version control.

Project Structure

The Backstitch Website is a static site that uses Vue.js to render everything. Normal pages and compnents are stored in src/views and src/components respectively. Backstitch's docs are authored in src/content/docs and indexed in src/content/docs-pages.ts.

For CSS, we use Tailwind for most things, as well as a main CSS file for global styles. Occasionally, we put scoped styles inside individual components that need some bespoke behavior that would be difficult or impossible with Tailwind.

For local and production builds, see below for IDE setup and scripts.

Recommended IDE Setup

VS Code + Vue (Official) (and disable Vetur).

Recommended Browser Setup

• Chromium-based browsers (Chrome, Edge, Brave, etc.):
  • Vue.js devtools
  • Turn on Custom Object Formatter in Chrome DevTools
• Firefox:
  • Vue.js devtools
  • Turn on Custom Object Formatter in Firefox DevTools

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint