tailscale.dev

This site is powered by Next.js, Tailwind CSS and ContentLayer.

Local Development

Quick start

Running tool/yarn install will install all required dependencies. Once complete, use tool/yarn dev to start the development server which defaults to port 3000.

Development tools

Following the Tailscale OSS repository, we use a ./tool directory to manage tool dependencies. Versions are pinned via *.rev files in the projects' root and installed via ./tool/redo.sh using the *.cmd.do files also in the project's root.

Flakes are provided for Nix users, with nix develop for the environment.

The following tools are available:

• ./tool/node - Node for future JavaScript tooling
• ./tool/yarn - Yarn package manager
• ./tool/redo.sh - Redo build/automation tool (for deps)

If available, direnv will place these tools in your PATH per our .envrc config. Installation instructions for direnv are available here.

Code formatting

If you're using VSCode, the project includes a .vscode/ directory with a settings.json file that will automatically format your code on save. We also have the Prettier as a recommended extension in the extensions.json file.

A pre-commit hook is added when you run yarn for the first time which will ensure ESLint and Prettier are run on the staged files and will apply fixes automatically.

Posts

All blog posts and events are stored as MDX files under the data directory. MDX can be treated like traditional Markdown, with the benefit that it supports JSX, JavaScript expressions, and ESM import and export statements.

Markdown is of the Github style, which is documented here.

Blog Post

Blog posts are located under data/blog with the following front matter:

• title* (string)
• date* (string, ANSI date)
• summary* (string)
• tags (array)
• lastmod (string, ANSI date)
• authors (array): if not specified will use the "default" author (data/authors/default.mdx)
• layout (string)

* denotes required properties

Events

Events are located under data/events with the following front matter:

• title* (string)
• date* (string, ANSI date)
• location* (string)
• summary* (string)
• endsDate (string, ANSI date): last day of the event, defaults to date
• displayDate (string)
• displayTime (string)
• link (string)
• authors (array): if not specified will use the "default" author (data/authors/default.mdx)
• layout (string)

* denotes required properties

Authors

Authors are located under data/authors with the following front matter:

• name* (string)
• avatar* (string)
• handle (string)
• tailscalar (boolean)
• twitter (string)
• linkedin (string)
• github (string)
• website (string)
• fediverse (string)
• layout (string)

* denotes required properties

JSX Components

Components are made available globally by defining them in the ComponentMap.

The following JSX components are available to all content types:

<Image />

Extends next/image. Only required properties of next/image listed here, for additional options, reference the next/image documentation.

property (* required)	type	default	description
src*	string		path of the image
width*	string		rendered width in pixels
height*	string		rendered height in pixels
alt*	string		description of the image for screen readers and search engines
showCaption	boolean	false	displays the alt text below the image
href	string		URL or path to navicate to

<HeroImage />

property (* required)	type	default	description
src*	string		path of the image
desc*	string		description of the image or the prompt used if generator=true
width*	string		rendered width in pixels
height*	string		rendered height in pixels
generator	string	false	what was used to create the image

<ConvSnippet />

property (* required)	type	default	description
authors*	array		list of authors {props.authors}
name*	string		name of the author
children*	ReactNode

<TOCInline />

Generates an inline table of contents

property (* required)	type	default	description
toc*	array		{props.toc}
indentDepth	number	3
fromHeading	number	1
toHeading	number	6
asDisclosure	boolean	false
exclude	string|array

<NewsletterRepublishing />

Displays a notice of a partial re-publishing from our monthly newsletter and provides a link to signup for future newsletters.