how to create a sapper theme

Creating a Sapper theme involves designing a set of reusable components, styles, and configurations that can be shared across multiple Sapper projects. Sapper, built on top of Svelte, allows you to create powerful web applications with a similar component-based architecture. Here’s a step-by-step guide to help you create a Sapper theme:

Step 1: Set Up Your Environment

Install Node.js and npm: Ensure you have Node.js and npm (or Yarn) installed. You can download and install from nodejs.org.

Create a New Sapper Project: Use the Sapper template to create a new project.

npx degit "sveltejs/sapper-template#rollup" sapper-theme
cd sapper-theme
npm install

Step 2: Organize Your Theme Directory

Create a theme Directory: Inside your Sapper project, create a directory for your theme components, styles, and utilities.
```
mkdir theme
cd theme
mkdir components styles utils
```
Create a package.json for Your Theme: Initialize the theme directory as a separate npm package.
```
npm init -y
```

Step 3: Develop Theme Components

Create a Button Component: Create a simple Button component as an example.

<!-- theme/components/Button.svelte -->
<script>
  export let className = '';
  export let onClick = () => {};
</script>

<button class="btn {className}" on:click={onClick}>
  <slot></slot>
</button>

<style>
  .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #0070f3;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .btn:hover {
    background-color: #005bb5;
  }
</style>

Step 4: Create a Theme Layout

Create a Layout Component: Add a layout component that includes a header and footer.

<!-- theme/components/Layout.svelte -->
<script>
  import Header from './Header.svelte';
  import Footer from './Footer.svelte';
</script>

<Header />
<slot />
<Footer />

Create Header and Footer Components:

<!-- theme/components/Header.svelte -->
<script>
  export let title = 'My Sapper Theme';
</script>

<header>
  <h1>{title}</h1>
</header>

<style>
  header {
    background-color: #0070f3;
    color: white;
    padding: 10px;
  }
</style>

<!-- theme/components/Footer.svelte -->
<footer>
  <p>&copy; 2024 My Sapper Theme</p>
</footer>

<style>
  footer {
    background-color: #0070f3;
    color: white;
    padding: 10px;
    text-align: center;
  }
</style>

Step 5: Configure Your Theme

Export Components and Styles: Create an index file to export your components and styles.

// theme/index.js
export { default as Button } from './components/Button.svelte';
export { default as Layout } from './components/Layout.svelte';

Step 6: Using Your Theme in a Sapper Project

Create a New Sapper Project: Create another Sapper project that will use the theme.

npx degit "sveltejs/sapper-template#rollup" my-sapper-site
cd my-sapper-site
npm install

Install Your Theme Locally: Link your theme package for local development.
```
npm link ../sapper-theme
```
Then add your theme as a dependency in my-sapper-site.
```
npm install sapper-theme
```

Use Theme Components and Layouts: Use the components and layouts from the theme in your project.

<!-- src/routes/index.svelte -->
<script>
  import { Button, Layout } from 'sapper-theme';
  let count = 0;
  const increment = () => count += 1;
</script>

<Layout>
  <h2>Welcome to My Sapper Site</h2>
  <Button on:click={increment}>Clicked {count} {count === 1 ? 'time' : 'times'}</Button>
</Layout>

Publish Your Theme to npm: If you want to share your theme, publish it to npm.
```
cd theme
npm publish --access public
```

Final Steps

Test Your Theme: Test the theme in different projects to ensure it works as expected.
Document Your Theme: Provide clear documentation on how to use and customize your theme in a README.md file.

By following these steps, you can create a reusable Sapper theme that includes components, styles, and configurations for shared functionality. This allows you to maintain a consistent design across multiple Sapper projects.