Scroll is different than other static site generators because it uses the easily extendible Scrolldown, so you can invent new languages to better fit your content.
The basics of Scrolldown are even simpler than Markdown. For example, the keyword for title is title.
You can stick to the basics or easily define new keywords to better fit your content and workflows. A simple indent is all you need to include sublanguages. No complex encoding needed.
Imagine you run a cooking blog where you share recipes. It may be useful to present recipes to your readers in a specialized style. You could create a recipe keyword and write a post like this:
title My Snowball Cookies paragraph Bet you can't eat just one! recipe ingredients 6 large eggs 1/2 cup sugar step Beat eggs until foamy step Add sugar step Heat oven to 350 degrees step Bake for 10 minutes
Your grammar extension might generate beautiful custom HTML for that recipe section and also perhaps allow users to vote on it, or include it in a CSV export, et cetera. Scrolldown let's you combine mini-languages in a simple and non-conflicting way. What you do with those languages is up to you.
(Warning: the cookie recipe above has not been tested)
For a working example of extending Scroll check out this one which adds node types for Markdown, Textile, and BBCode.
Scroll work great for blogs, collaborative databases, newspapers, intranets and other types of static sites as well.
The instant way is to try Scroll in GitPod.
Scroll is a command line app you install on your local machine. Scroll requires basic familiarity with the command line and NodeJs >=14. If you do not have NodeJs on your machine, one way is to install n which makes it easy to get NodeJs.
If you would like to use Scroll but aren't familiar with the command line, please open an issue and we may be able to help.
Once you have NodeJs installed you can install from GitHub or npm. Scroll is scroll-cli on npm.
You can install from GitHub:
git clone https://github.com/publicdomaincompany/scroll cd scroll npm install -g .
Or you can install Scroll with npm by typing:
npm install -g scroll-cli
Scroll is a command line app. To see the commands type:
Post an issue in this GitHub or email us.
A scroll is a single folder containing Scrolldown files and a `scroll.settings` file. Scroll compiles those Scrolldown files into a static index.html page.
Scroll is also the name of the command line app that includes a simple fs watch app for live preview.
Scrolldown is the name of a Tree Language defined in this grammar.
A typical Scroll project folder, excluding the html files built by Scroll, looks like this:
📁yourDomainName.org about.scroll publishedArticle.scroll anImageInTheArticle.png scroll.settings
The `scroll.settings` file let's Scroll know that a folder contains a Scroll.
When you "build" a Scroll site, you are simply generating the `index.html` and `[article].html` files in the site's folder.
With Scroll your site's Scroll files and static files and generated html are all in one public folder and checked into version control. Though often you may want to add `*.html` to your `.gitignore`.
Have a draft scroll next to your published scroll. For example:
📁drafts someDraft.scroll scroll.settings 📁yourDomainName.org publishedArticle.scroll scroll.settings
Scroll articles are written as Scrolldown files with the file extension `scroll`. The grammar for Scrolldown is defined here.
TypeScript may be used in the future but Scroll may never get over 1kloc so that might not be necessary.
Scroll is designed for git. A single article is stored as a single file tracked by git.
Yes! Scroll is also 100% focused on helping people build internal or public domain sites and everything is designed with that assumption.
The default Scroll theme is designed to make it easier for syntopic reading. Being able to scan the page like a newspaper. This allows you to read at a higher level—to "get in the author's head"— compared to reading one article at a time from beginning to end.
And if anyone prefers to read a scroll in a different way—they can! Scroll is for public domain sites. People are free to arrange the symbols any way they wish.
This was originally a bug. But then it turns out to be a feature, as it gives older articles, which are often more important, more visibility.
Yes. In the Tree Language Designer.
Go to your project folder and create the file below:
mkdir -p .github/workflows touch .github/workflows/buildAndDeployScroll.yaml
Then open that file and paste in this code:
# Adapted from https://github.com/JamesIves/github-pages-deploy-action name: Build and Deploy Scroll on: push: branches: - main jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout 🛎️ uses: firstname.lastname@example.org - name: Install and Build run: | npm install scroll-cli ./node_modules/scroll-cli/scroll.js build # Uncomment the line below if you are ignoring *.html files in your gitignore file # rm .gitignore - name: Deploy 🚀 uses: JamesIvesemail@example.com with: branch: scroll-output # The branch the action should deploy to. folder: .
Commit and push. Now go to your GitHub Repo and then `Settings`, then `Pages`, and select the `scroll-output` branch as the Source for the pages. Click save. Your built site should be live.
Scroll does not check for broken links. For that, try linkinator.
# npm install -g linkinator linkinator https://scroll.pub > brokenLinks.txt
Scroll does not have browser perf tools built in. For that, try lighthouse.
# npm install -g lighthouse lighthouse https://scroll.pub --output-path scrollBrowserPerf.html; open scrollBrowserPerf.html
Any web server works. You can even host your scroll for free using GitHub Pages, just like this site.
Just buy a domain and point it to your web server or web host (such as GitHub Pages). Google Domains is where this domain is registered and is a great service.
If you have your own web server try rsync. Here's a bash one liner:
# deploy.sh # swap "/var/www/html" with the path to your website's location on your web server rsync -vr /[path/to/your/site]/* [yourdomain.com]:/var/www/html
Add a section like the one below to your ~.ssh/config to save your username and correct key pair.
Host example.com User yourUserName IdentityFile ~/.ssh/example_id_rsa IdentitiesOnly yes
Pandoc is one way to do it. If you are on a Mac and have Homebrew installed:
brew install pandoc pandoc index.html -o book.epub
# apt-get install goaccess goaccess /var/log/nginx/access.log -o /var/www/html/YOUR_SECRET_REPORT_URL.html --log-format=COMBINED --real-time-html --ws-url=wss://YOURDOMAIN.com
Yes. By default the first image and first paragraph of an article will be used for the "og:" tags. Unfortunately Twitter doesn't support relative image links so you need to specify `baseUrl` in your `scroll.settings` file. For more help check out the debuggers from Facebook and Twitter.
Yes! Scroll includes a simple API for changing the style of your site. This is an active area of development so please reach out if you'd like to customize the look of your Scroll.
Hopefully someone will build a package or site that does this. For now, on your Twitter settings, download an archive of your data and convert the tweets JSON into scroll files. Or to experiment faster use this tool to grab some tweets as a TSV.
View the releaseNotes.
File issues. Share your Scroll sites.
You can submit pull requests too. The shorter the better.
# cd your_slow_scroll # you may need to update the path below so it points to your scroll code node --cpu-prof --cpu-prof-name=scrollNodePerf.cpuprofile ~/scroll/scroll.js build # Now ➡️ open a new Chrome tab ➡️ open devtools ➡️ click Performance ➡️ click "Load Profile..." ➡️ select your scrollNodePerf.cpuprofile
Scrolldown and Web Components are similar in that both empower users to define their own reusable components. But Scrolldown is higher level than web components. For example, in addition to easily targetting HTML and web components, Scrolldown also plays really nicely with version control and 2D editors. Scrolldown encourages encoding semantic content with as little noise as possible, which creates benefits in many places.
# Assuming you've already done `jtree register YOUR_PATH/jtree/langs/grammar/grammar.grammar` jtree format scrolldown.grammar
For that we use BrowserStack.