SEO

packages/docs/src/routes/docs/cli/index.mdx

@@ -1,3 +1,7 @@
+---
+title: CLI - Mitosis
+---
+
 # CLI
 
 We currently have two CLI commands: `mitosis build` and `mitosis compile`.

packages/docs/src/routes/docs/components/index.mdx

@@ -1,3 +1,7 @@
+---
+title: Components - Mitosis
+---
+
 # Components
 
 ## At a glance

packages/docs/src/routes/docs/configuration/index.mdx

@@ -1,3 +1,7 @@
+---
+title: Configuration - Mitosis
+---
+
 # Configuration
 
 ## Mitosis Configuration

packages/docs/src/routes/docs/context/index.mdx

@@ -1,3 +1,7 @@
+---
+title: Context - Mitosis
+---
+
 # Context
 
 Mitosis Contexts must be:

packages/docs/src/routes/docs/customizability/index.mdx

@@ -1,3 +1,7 @@
+---
+title: Customization - Mitosis
+---
+
 # Customization
 
 When building Mitosis components, you might sometimes have unique and special needs. If you want to transform your Mitosis-generated output to fit your needs, by doing things like:

packages/docs/src/routes/docs/figma/index.mdx

@@ -1,3 +1,7 @@
+---
+title: Syncing design systems from Figma - Mitosis
+---
+
 # Syncing design systems from Figma
 
 You can leverage Mitosis in conjunction with [Visual Copilot](https://www.builder.io/m/design-to-code) to efficiently translate Figma designs into code.

packages/docs/src/routes/docs/gotchas/index.mdx

@@ -1,3 +1,7 @@
+---
+title: Gotchas - Mitosis
+---
+
 # Gotchas and limitations
 
 We have put together ESLint rules that will warn you when encountering these limitations (and many more). The rules themselves are a great source of documentation. Make sure to read up on them [here](../packages/eslint-plugin/docs/rules/)

packages/docs/src/routes/docs/hooks/index.mdx

@@ -1,3 +1,7 @@
+---
+title: Hooks - Mitosis
+---
+
 # Hooks
 
 ## useStore and useState

packages/docs/src/routes/docs/overview/index.mdx

@@ -1,8 +1,8 @@
 ---
-title: Mitosis Overview
+title: Overview - Mitosis
 ---
 
-# Mitosis Overview
+# Overview - Mitosis
 
 ## What is Mitosis?
 
@@ -18,7 +18,7 @@ Using Mitosis, you can:
 
 - Maintain a consistent design system across multiple frameworks ([example](https://github.com/db-ui/mono))
 - Build high quality cross-framework SDKs ([example](https://github.com/BuilderIO/builder/tree/main/packages/sdks#builderio-sdks))
-- Avoid the [pitfalls of web components](https://mitosis.builder.io/docs/overview/) by compiling to native framework code
+- Avoid the [pitfalls of web components](#challenges-with-web-components) by compiling to native framework code
 
 ## Why use Mitosis?
 

packages/docs/src/routes/docs/project-structure/index.mdx

@@ -1,3 +1,7 @@
+---
+title: Project structure - Mitosis
+---
+
 # Project structure
 
 For a practical example of the below structure, check out [our example project](../examples/basic/).

packages/docs/src/routes/docs/quickstart/index.mdx

@@ -1,3 +1,7 @@
+---
+title: Quickstart - Mitosis
+---
+
 # Quickstart
 
 ### Create a new project

packages/docs/src/routes/index.tsx

@@ -47,7 +47,8 @@ export const head: DocumentHead = {
  meta: [
  {
  name: 'description',
- content: 'Build multi-framework design systems with confidence.',
+ content:
+ 'Build multi-framework design systems with confidence. Compiles to React, Angular, Vue, Svelte, and more.',
  },
  ],
 };

packages/docs/src/routes/playground/index.tsx

@@ -1,5 +1,5 @@
 import { $, component$, useSignal, useVisibleTask$ } from '@builder.io/qwik';
-import { routeLoader$, useLocation } from '@builder.io/qwik-city';
+import { DocumentHead, routeLoader$, useLocation } from '@builder.io/qwik-city';
 import { ContentLoaderCode } from 'qwik-content-loader';
 import { CodeEditor } from '~/components/code-editor';
 import Select from '~/components/select';
@@ -254,3 +254,13 @@ export default component$(() => {
  </div>
  );
 });
+
+export const head: DocumentHead = {
+ title: 'Mitosis Playground',
+ meta: [
+ {
+ name: 'description',
+ content: 'Write components once, run everywhere.',
+ },
+ ],
+};