Using This ScrollStory Template

Welcome! This page guides you through customizing this template for your own ScrollStory essay. Once you’re done editing (or feel like you got the hang of it), can you delete this file—it’s just for getting started.

What You Have

This template includes:

• Homepage that introduces your essay (index.md)
• Sample ScrollStory essay in the /your-story/ folder. You’ll rename this for your project.
• About page for general information about you or your project (about.md)
• Bibliography page for your sources (bibliography.md)

Start Editing!

If you’re not familiar with editing your site on GitHub, read through the directions on how to do that.

1. Customize the Homepage (index.md)

Edit index.md in the root folder to:

• Change the title and introduction
• Introduce your project, etc.

2. Edit the About Page (about.md)

Replace the sample content with:

• Information about you (author bio)
• Context for your essay or project
• Any acknowledgments or credits

3. Update the Bibliography (bibliography.md)

Add your sources and references:

• Books, articles, websites
• Images sources and credits
• Data sources

Editing Your ScrollStory

Understanding the Essay Structure

Open /your-story/index.md to see your essay content. The file includes:

Front Matter (top of file):

---
layout: scrollstory
title: Your Essay Title
---

ScrollStory Components:

• Background images that appear as you scroll
• Text “scrollboxes” that overlay the images
• Different scrolling effects (sticky, switching, side-scrolling)

Replacing Sample Content

1. Edit the text in your-story/index.md
   • Keep the special tags (like `

`)

• Replace the text inside scrollboxes with your content
• Update image paths to point to your own images

1. Add your images to your-story/images/:
   • Upload ALL images here
   • Use descriptive filenames (e.g., forest-view.jpg, historical-map.png)
2. Learn the components from the ScrollStory documentation:
   • How to add background images
   • How to switch between images
   • How to create side-scrolling sections

Renaming Your Essay Folder

Eventually you’ll want to rename /your-story/ to match your essay topic. Here’s how:

1. Rename the folder to your essay title:
   • Example: /scrollstory/ → /forest-history/
   • Keep the name lowercase with hyphens (no spaces)
2. Update navigation in _data/top-nav.yml:
   • Find the line with /your-story
   • Change it to /forest-history (obviously use your own folder name from step 1)
3. Update homepage link in index.md:
   • Find links pointing to /your-story
   • Update them to your new folder name

Adding Images

Where to Put Images

Put all your essay images in your essay folder’s images/ directory:

your-story/
├── index.md
└── images/
    ├── background-1.jpg
    ├── background-2.jpg
    └── detail-photo.png

Getting Help

Xanthan Documentation

• Browse local docs: /docs/ folder in your repository
• ScrollStory guides: /docs/scrollstories/ for detailed scrolling techniques
• Online docs: xanthan-web.github.io/xanthan/docs/

AI Assistance

Use AI tools like Claude or ChatGPT for help:

• “How do I change the background image in my ScrollStory?”
• “Can you help me add a new scrolling section?”
• “How do I fix this error in my code?”

See the Using AI Assistance guide for tips.

Clean Up When Done

Once you’re comfortable working with your site:

1. If you want, delete this file (instructions.md)
2. Remove it from the top nav Remove the title and url lines (in _data/top-nav.yml)
3. Remove the docs link from the top nav Remove the title and url lines (in _data/top-nav.yml)

Questions? Check the Xanthan documentation or report an issue.