SveltePress

https://sveltepress.org/docs
Admin
SveltePress is a documentation and content management framework for SvelteKit applications,...
Tokens:5,624
Snippets:81
Trust Score:4.6
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install SveltePress Library with yarn

Source: https://sveltepress.org/docs

Add the SveltePress library to an existing SvelteKit project using yarn. This command installs the necessary package.

```bash
yarn add sveltepress
Copy

```

--------------------------------

### Run SveltePress Development Server

Source: https://sveltepress.org/docs

Navigate to your project directory and run this command to start the development server. Access the admin dashboard at http://localhost:5137/admin.

```bash
cd my-website
npm run start
Copy

```

--------------------------------

### Install SveltePress Library with npm

Source: https://sveltepress.org/docs

Add the SveltePress library to an existing SvelteKit project using npm. This command installs the necessary package.

```bash
npm install sveltepress
Copy

```

--------------------------------

### Create New SveltePress App with npm

Source: https://sveltepress.org/docs

Use this command to initialize a new SveltePress project using npm. Ensure you have Node.js and npm installed.

```bash
npm init sveltepress@latest
Copy

```

--------------------------------

### Create New SveltePress App with yarn

Source: https://sveltepress.org/docs

Use this command to initialize a new SveltePress project using yarn. Ensure you have Node.js and yarn installed.

```bash
yarn create sveltepress@latest
Copy

```

--------------------------------

### Initialize SveltePress with Supported Languages

Source: https://sveltepress.org/docs/multilingual

Configure SveltePress with an array of language codes to enable multilingual support. This setup is typically done in your `+layout.ts` file.

```typescript
import { SveltePress } from "sveltepress";
export const load = async (event) => {
  const pb = new SveltePress({
    fetch: event.fetch,
    languages: ["en", "es"],
  });
  return {
    pb,
  };
};

```

--------------------------------

### Add SveltePress Middleware to hooks.server.ts

Source: https://sveltepress.org/docs

Integrate SveltePress into your SvelteKit app by adding the SveltePressMiddleware to your hooks.server.ts file. This example shows how to wrap the default handler.

```typescript
import { SveltePressMiddleware } from "sveltepress/server";
export const handle = SveltePressMiddleware(({ event, resolve }) =>
  resolve(event)
);
Copy

```

--------------------------------

### Configure SveltePress Admin Credentials

Source: https://sveltepress.org/docs

Add SVELTEPRESS_EMAIL and SVELTEPRESS_PASSWORD to your .env file for admin features. Use the credentials created during provisioning.

```bash
SVELTEPRESS_EMAIL="test@example.com"
SVELTEPRESS_PASSWORD="password"
Copy

```

--------------------------------

### Configure SveltePress Connection URL

Source: https://sveltepress.org/docs

Set the SVELTEPRESS_URI environment variable in your .env file to connect to your SveltePress instance. Replace <instance-id> with your actual instance ID.

```bash
SVELTEPRESS_URI="http://<instance-id>.vm.sveltepress.org"
Copy

```

--------------------------------

### Initiate SveltePress Client in routes/+layout.ts

Source: https://sveltepress.org/docs

Initialize the SveltePress client in your SvelteKit application's layout file. This makes the SveltePress instance available for use.

```typescript
import { SveltePress } from "sveltepress";
export const load = async (event) => {
  const pb = new SveltePress({
    fetch: event.fetch,
  });
  return {
    pb,
  };
};
Copy

```

--------------------------------

### Sign In Action

Source: https://sveltepress.org/docs/users-auth

Handles user sign-in using `authWithPassword`. It saves the authentication cookie and redirects to the dashboard upon successful authentication. Errors during authentication are caught and re-thrown.

```typescript
export const actions = {
  default: async ({ locals, cookies }) => {
    const { pb } = locals;
    try {
      await pb
        .collection("users")
        .authWithPassword(form.data.email, form.data.password);
    } catch (e) {
      throw error(500);
    }
    pb.authStore.saveCookie(cookies);
    throw redirect("/dashboard");
  },
};
```

--------------------------------

### Update PocketBase Client for Custom Admin Path

Source: https://sveltepress.org/docs/admin-dashboard

If the admin path is customized, update the root layout loader to initialize the SveltePress client with the correct fetch configuration.

```typescript
import { SveltePress } from "sveltepress";
export const load = async (event) => {
  const pb = new SveltePress({
    fetch: event.fetch,
  });
  return {
    pb,
    user: pb.authStore.model,
  };
};
```

--------------------------------

### Customize Admin Path with Middleware

Source: https://sveltepress.org/docs/admin-dashboard

Configure the admin dashboard URL by setting the `adminPath` option in the SveltePress middleware. Ensure this matches the PocketBase client configuration.

```typescript
import { SveltePressMiddleware } from "sveltepress/server";
export const handle = SveltePressMiddleware(
  {
    adminPath: "/admin",
  },
  ({ event, resolve }) => resolve(event)
);
```

--------------------------------

### Access User in Universal Context

Source: https://sveltepress.org/docs/users-auth

In universal contexts (`+layout.ts`), the user is passed down from the root layout. Initialize SveltePress with `fetch` and access `pb.authStore.model`.

```typescript
export const load = async (event) => {
  const pb = new SveltePress({
    fetch: event.fetch,
  });
  return {
    pb,
    user: pb.authStore.model,
  };
};
```

--------------------------------

### Loading Content in SvelteKit Load Function

Source: https://sveltepress.org/docs/loading-content

Configure the universal load function in SvelteKit to initialize SveltePress and load page contents. This makes content available on both server and client.

```typescript
import { SveltePress } from "sveltepress";
export const load = async (event) => {
  const pb = new SveltePress({
    fetch: event.fetch,
  });
  const { contents, metadata } = await pb.contents.load(event);
  return {
    pb,
    contents,
    metadata,
  };
};

```

--------------------------------

### Fetch Posts in Universal Context

Source: https://sveltepress.org/docs/data-models

In `+page.ts`, only the current user context (`pb`) is available. This is suitable for universal data fetching accessible on both server and client.

```typescript
export const load = async ({ parent }) => {
  const { pb } = await parent();
  const posts = await pb.collection("posts").getFullList();
};
```

--------------------------------

### Enable Prerendering with Page Entries

Source: https://sveltepress.org/docs/loading-content

Use the `pageEntries` function to specify routes for SvelteKit's prerendering. This function takes the route pattern as an argument.

```typescript
import { pageEntries } from "sveltepress";
export const entries = pageEntries("/blog/[post-id]");
```

--------------------------------

### Load posts for index pages

Source: https://sveltepress.org/docs/index-pages

Use this to load all posts for a general index page. It fetches content from the specified collection.

```typescript
export const load = async (event) => {
  const { pb } = await event.parent();
  const posts = await pb.contents.getList("/blog/[slug]");
  return {
    posts,
  };
};
```

--------------------------------

### Fetch Metadata in Admin Context (Server)

Source: https://sveltepress.org/docs/data-models

Use the `admin` context in `+page.server.ts` to fetch all records from a collection. Ensure you have the necessary permissions.

```typescript
export const load = async ({ locals }) => {
  const { admin } = locals;
  const metadata = await admin.collection("metadata").getFullList();
};
```

--------------------------------

### Image Component for Media Management

Source: https://sveltepress.org/docs/loading-content

Incorporate the Image component to enable image selection or uploading via the image browser. A 'key' prop is required, and a 'placeholder' can be specified.

```svelte
<script>
  import { Image } from "sveltepress";
</script>
<Image key="featured-image" placeholder="/images/placeholder.png" />

```

--------------------------------

### Configure 404 Errors for Dynamic Routes

Source: https://sveltepress.org/docs/loading-content

Pass `throws404: true` in the route metadata to return a 404 error when content for a dynamic route is not found in the database. This is useful for preventing access to non-existent blog posts or other dynamic content.

```typescript
import { Metadata } from "sveltepress";
import type { RouteId } from "./$types";
const metadata = new Metadata("/blog/[post-id]" satisfies RouteId, {
  throws404: true,
});
export const load = async (event) => {
  return {
    metadata: await metadata.load(event),
  };
};
```

--------------------------------

### Fetch Posts in User Context (Server)

Source: https://sveltepress.org/docs/data-models

Use the `pb` (current user) context in `+page.server.ts` to fetch records. API rules on the collection can filter results to the current user.

```typescript
export const load = async ({ locals }) => {
  const { pb } = locals;
  const posts = await pb.collection("posts").getFullList();
};
```

--------------------------------

### Enable Admin Bar in Root Layout

Source: https://sveltepress.org/docs/admin-dashboard

Integrate the Admin Bar component into your root layout (`+layout.svelte`) to enable editing functionalities on pages.

```svelte
<script lang="ts">
  import { AdminBar } from "sveltepress";
</script>
<AdminBar />
<slot />
```

--------------------------------

### Load Taxonomy Data in Root Layout

Source: https://sveltepress.org/docs/metadata

Load taxonomy data for categories, tags, and authors in your root layout to make them available to all child pages. This uses the SveltePress contents.taxonomies method.

```typescript
import { SveltePress } from "sveltepress";
export const load = async (event) => {
  const pb = new SveltePress({
    fetch: event.fetch,
  });
  const { contents, metadata } = await pb.contents.load(event);
  return {
    pb,
    contents,
    metadata,
    taxonomies: await pb.contents.taxonomies("/blog/[slug]"),
  };
}
```

```typescript
import { SveltePress } from "sveltepress";
export const load = async (event) => {
  const pb = new SveltePress({
    fetch: event.fetch,
  });
  const { contents, metadata } = await pb.contents.load(event);
  return {
    pb,
    contents,
    metadata,
    taxonomies: await pb.contents.taxonomies("/blog/[slug]"),
  };
}
```

--------------------------------

### Import Editing Store in Svelte

Source: https://sveltepress.org/docs/custom-editors

Import the 'editing' store from 'sveltepress' to manage the editable state of custom editors.

```svelte
<script lang="ts">
  import { editing } from "sveltepress";
</script>
Copy
```

--------------------------------

### Define Page Metadata in Universal Loader

Source: https://sveltepress.org/docs/metadata

Use the Metadata constructor in your universal loader to set default metadata properties for a specific route. This allows for easy editing in admin mode.

```typescript
import { Metadata } from "sveltepress"
import type { RouteId } from './$types';
const metadata = new Metadata('/blog/[slug]' satisfies RouteId, {
  title: "Default title",
  tagline: "Default tagline",
  tags: ["Data"],
  categories: ["Application"],
  author: "John Doe",
  published_at: new Date()
});
export const load: async (event) => {
  return {
    metadata: await metadata.load(event),
  }
}
```

```typescript
import { Metadata } from "sveltepress"
import type { RouteId } from './$types';
const metadata = new Metadata('/blog/[slug]' satisfies RouteId, {
  title: "Default title",
  tagline: "Default tagline",
  tags: ["Data"],
  categories: ["Application"],
  author: "John Doe",
  published_at: new Date()
});
export const load: async (event) => {
  return {
    metadata: await metadata.load(event),
  }
}
```

--------------------------------

### Using PlainText, RichText, and Markdown Editors

Source: https://sveltepress.org/docs/loading-content

Integrate PlainText, RichText, and Markdown components into your Svelte pages for editable content. Each component requires a unique 'key' prop for saving and loading.

```svelte
<script>
  import { PlainText, RichText, Markdown } from "sveltepress";
</script>
<h1>
  <PlainText key="main-title">
    Default placeholder title
  </PlainText>
</h1>
<RichText key="main-page-content">Default placeholder content</RichText>
<Markdown key="main-post" placeholder="# Markdown placeholder" />
<p>This text is static and not editable.</p>

```

--------------------------------

### Update app.d.ts for Server Locals

Source: https://sveltepress.org/docs

If using TypeScript, update your app.d.ts file to include the SveltePress server locals. This ensures proper type checking for admin and pb instances.

```typescript
import { SveltePress } from "sveltepress";
declare global {
  namespace App {
    interface Locals {
      admin: SveltePress;
      pb: SveltePress;
    }
  }
}
Copy

```

--------------------------------

### Load Page Content with Language Information

Source: https://sveltepress.org/docs/multilingual

When loading page content, the `pb.contents.load` function returns available languages for that specific page. This data can be used to build UI elements like language selectors.

```typescript
import { SveltePress } from "sveltepress";
export const load = async (event) => {
  const pb = new SveltePress({
    fetch: event.fetch,
    languages: ["en", "es"],
  });
  const { contents, metadata, languages } = await pb.contents.load(event);
  return {
    pb,
    contents,
    metadata,
    languages,
  };
};

```

--------------------------------

### Supported Metadata Data Types

Source: https://sveltepress.org/docs/metadata

Define the supported data types for your metadata. Ensure you use real placeholder values, not null or undefined, as types are inferred.

```typescript
type SupportedTypes = string | string[] | Date | number | boolean;
```

```typescript
type SupportedTypes = string | string[] | Date | number | boolean;
```

--------------------------------

### Sign Out Action

Source: https://sveltepress.org/docs/users-auth

Clears the authentication cookie and redirects the user to the root path. This action is typically used for logging out.

```typescript
export const load = async ({ locals, cookies }) => {
  const { pb } = locals;
  pb.authStore.clearCookie(cookies);
  throw redirect("/");
};
```

--------------------------------

### Configure Refresh Token Interval

Source: https://sveltepress.org/docs/users-auth

Customize the authentication token refresh interval by passing the desired interval in milliseconds to `setRefreshTokenInterval`.

```typescript
const interval = setRefreshTokenInterval(1000 * 60 * 60);
```

--------------------------------

### Access User via Parent in Page/Layout

Source: https://sveltepress.org/docs/users-auth

To access the user object in child pages or layouts, use the `await parent()` call within your `load` function.

```typescript
export const load = async ({ parent }) => {
  const { user } = await parent();
};
```

--------------------------------

### Access User in Server Context

Source: https://sveltepress.org/docs/users-auth

In server-side contexts (`+page.server.ts` or `+layout.server.ts`), the authenticated user object is directly available in `locals`.

```typescript
export const load = async ({ locals }) => {
  const { user } = locals;
};
```

--------------------------------

### Set Refresh Token Interval

Source: https://sveltepress.org/docs/users-auth

Instantiate `setRefreshTokenInterval` in the root layout to periodically refresh authentication tokens. The default interval is one hour.

```svelte
<script>
  import { onMount } from "svelte";
  import { setRefreshTokenInterval } from "sveltepress";
  onMount(() => {
    const interval = setRefreshTokenInterval();
    return () => clearInterval(interval);
  });
</script>
```

--------------------------------

### Load filtered posts for taxonomy pages

Source: https://sveltepress.org/docs/index-pages

Use this to load posts filtered by metadata attributes for taxonomy pages like categories or tags. It fetches content from the specified collection and applies metadata filters.

```typescript
export const load = async (event) => {
  const { pb } = await event.parent();
  const posts = await pb.contents.getList("/blog/[slug]", 1, 30, {
    metadata: {
      categories: event.params.slug,
    },
  });
  return {
    posts,
  };
};
```

--------------------------------

### Protect Page with Route Layout

Source: https://sveltepress.org/docs/users-auth

A route layout can protect pages by checking for an active user session. If no user is found, the user is redirected to the sign-in page.

```typescript
export const load = async ({ parent }) => {
  const { user } = await parent();
  if (!user) {
    throw redirect("/signin");
  }
};
```

--------------------------------

### Accessing Loaded Content in Svelte Component

Source: https://sveltepress.org/docs/loading-content

Access the loaded content within your Svelte component's script context via the 'contents' key in the page's data prop. This allows dynamic rendering based on loaded content.

```svelte
<script>
  export let data;
  $: console.log(data.contents.title);
</script>

```

--------------------------------

### Access Metadata in Svelte Component

Source: https://sveltepress.org/docs/metadata

Access the loaded metadata within your Svelte component's <svelte:head> tag to dynamically set page titles or other meta tags.

```svelte
<script lang="ts">
  export let data;
</script>
<svelte:head>
  <title>{data.metadata.title}</title>
</svelte:head>
```

```svelte
<script lang="ts">
  export let data;
</script>
<svelte:head>
  <title>{data.metadata.title}</title>
</svelte:head>
```

--------------------------------

### EditableComponent for Svelte Component Props

Source: https://sveltepress.org/docs/loading-content

Use EditableComponent to allow editing of Svelte component props directly within a page. Pass the component, a unique key, and default values.

```svelte
<script>
  import { EditableComponent } from "sveltepress";
</script>
<EditableComponent component={Button} key="button" title="Default placeholder" let:props>
  <Button {...props} />
</EditableComponent>

```
Tokens:
Raw