drop-in Documentation

A Starlight project follows a specific directory structure for content and assets:

• src/content/docs/: The primary location for documentation. Starlight automatically exposes .md or .mdx files in this directory as routes based on their filenames.
• src/assets/: Place images here to embed them in Markdown using relative links.
• public/: Use this directory for static assets like favicons.
• astro.config.mjs: The configuration file for the Astro project.
• src/content.config.ts: Configuration for content collections.

.
├── public/
├── src/
│   ├── assets/
│   ├── content/
│   │   ├── docs/
│   └── content.config.ts
├── astro.config.mjs
├── package.json
└── tsconfig.json

When building a Svelte library with this tool:

• src/lib: Contains the actual code that is part of your library.
• src/routes: Used for creating a showcase or preview application to demonstrate your library.

To build local-first applications with Drop In, you should familiarize yourself with the underlying synchronization technologies:

• Zero Sync: Learn about the Zero synchronization engine via the Zero Docs.
• Zero Svelte: For Svelte-specific implementations, refer to the Zero Svelte Repo.

The $state module provides a mechanism for storing global state that is accessible across different routes and components. This is intended for state that is not tightly scoped to a single component or route.

To access the global store, import create_store from the $state/store.svelte module.

⚠️ Security Warning: Do not use $state for Server-Side Rendering (SSR) as your state may be insecure. This module is designed for client-side state management.

import { create_store } from '$state/store.svelte';

The Tabs component follows the WAI-ARIA Tabs pattern to ensure accessibility:

ARIA Roles

• role="tablist" is applied to the TabList.
• role="tab" is applied to Tab buttons.
• role="tabpanel" is applied to TabPanel components.
• aria-selected="true" is used to indicate the active tab.
• aria-controls and aria-labelledby link tabs to their respective panels.

Keyboard Navigation

• Tab: Move focus into or out of the tablist.
• Left/Right Arrow (horizontal orientation): Navigate between tabs.
• Up/Down Arrow (vertical orientation): Navigate between tabs.
• Home: Jump to the first tab.
• End: Jump to the last tab.
• Enter/Space: Activate the focused tab.

Pass handles authentication via a set of server routes managed by the pass_routes hook. This hook automatically handles server responses for logging in, logging out, signing up, resetting passwords, and verifying emails, meaning you do not need to manually create these API routes.

To enable Pass, you must include pass_routes in your src/hooks.server.ts file using the sequence function from @sveltejs/kit/hooks.

import { sequence } from '@sveltejs/kit/hooks';
import { pass_routes } from '@drop-in/pass';
import { drop_hook } from '@drop-in/plugin/hook';

// pass_routes handles auth authentication and the auth routes.
// drop_hook ensures drop-in.config.js is read and applied to globals.
export const handle = sequence(pass_routes, drop_hook);

To create a new project using the Starlight template with Astro, use the following command with pnpm:

pnpm create astro@latest -- --template starlight