Customization

The PutOut eBook-to-Website tool offers several ways to customize the look and feel of your generated ebook site.

1. Themes

There are a few theme options to choose from as well – default (light), dark, glass, etc.

Switching Themes

Choose a Theme: The tool comes with a few pre-built themes. Find the available theme names in src/styles/themes.js.
Update site.js file: Open src/_data/site.js and change the theme property to the name of your desired theme:

module.exports = {
  // ... Other options
  theme: "glass", // Options: "default", "glass", "dark"
};

And as soon as you save the file, the changes will be refelected immediately on the local development server.

Creating Custom Themes

Open themes.js: Navigate to the src/styles/themes.js file.
Add Your Theme: Add an object with your theme's name and styles to the themes object:

module.exports = {
  // ... other themes
  purpleLight: {
    body: 'bg-purple-50 text-purple-900',
    header: 'bg-purple-100 text-purple-900',
    card: 'bg-white border border-purple-200 shadow-sm',
    button: 'bg-purple-200 text-purple-900 hover:bg-purple-300 border border-purple-300',
    prose: 'prose prose-purple',
    icons: 'text-purple-400 hover:text-purple-900 transition-colors duration-300'
  }
};

Like shown above, you can quickly add a new theme to the tool (purpleLight is the above theme). You can use Tailwind CSS classes to define styles for the following elements:

body: The overall body styles.
header: Styles for the website header.
card: Styles applied to chapter cards on the homepage.
button: Styles for buttons (e.g., "Read Chapter" button).
prose: Styles for the main prose content.
icons: Styles for social media icons on the homepage.

2. Templates

You can even modify the website's HTML structure and layout using the Nunjucks templates found in the src/_includes/ directory.

base.njk: The base template, extended by other templates.
chapter.njk: The layout for individual chapter pages.
chapterCard.njk: The structure of chapter cards on the homepage.
homepage.njk: The homepage template.

You can refer to the Nunjucks documentation for advanced template syntax and features.

3. Adding Social Links

Open site.js: Open src/_data/site.js file for editing.
Modify socialLinks: Update the socialLinks array with your social profiles.

socialLinks: [
  { platform: "twitter", url: "https://twitter.com/yourusername" },
  { platform: "github", url: "https://github.com/yourusername" },
  { platform: "linkedin", url: "https://linkedin.com/in/yourusername" },
  { platform: "website", url: "https://putout.org/" }
]