wideColumns
keyword2*4*2
or inline \KaTeX X_{2_i}.katex
node in your file and will load the KaTeX code via CDN.program
keyword for Program Links. See blog post for details.<!DOCTYPE html>
to improve performance on Google Lighthouse.<html lang></html>
back as you need that to get proper hyphenation. Added test.htmlLang
keyword for overriding the default lang which is set to "en"text-align: justify;
on paragraphs to Gazette and Tufte themes.tufteCss
beta theme.###
, ####
and #####
headers.title
can be thought of as h0
.gazetteHeader
is now pageHeader
and gazetteFooter
is now pageFooter
. Headers and footers can be independent of themes.\n\*
\n
.\n\* [a-z]
search first to find any paragraphs that start with a lowercase letter.<!
, as they will be parsed as HTML nodes.katex
keyword. KaTeX: "The fastest math typesetting library for the web."tag
keyword to thought nodes so you can change the compiled html tag (needed in rare circumstances)thought
keyword and standardized vocab to calling the thought node the main node that most nodes extend.style
keyword to provide inline html styles to a thought node.No one should be affected. This was an internal rewrite to upstream the imports code to TreeFileSystem
in Jtree. No changes for Scroll users.
scrollKeywords
is no longer exportedDefaultScrollCompiler
is now DefaultScrollParser
ScrollDiskFileSystem
and ScrollInMemoryFileSystem
replaced by ScrollFileSystem
Simplify theme building.
gazetteTheme
is now gazetteCss
.// Change `gazetteTheme noTags` to:
gazetteCss
tags false
Maintenance release. Update packages and remove unused package and specify required NodeJs versions accurately.
This is The Theme Release.
author
node is now byLine
. author
is kept for now but updating is recommended.scrollCssTag
is gone. use gazetteTheme
for previous behavior. scrollCss
is gone, use gazetteTheme noTag
.gazetteTheme
now contains that CSS code.scrollHeader
is now gazetteHeader
and scrollFooter
is now gazetteFooter
scrollHeaderComponent
=> gazetteHeader
, scrollFooterComponent
=> gazetteFooter
kpiTable
is now dashboard
Node
to Parser
).abstractScrollWithRequirementsNode
and use it for copyButtons
and map
to only include the external JS and CSS once.compileSettings
as an input in all Scroll nodes rather than maintaining state on instancesThis was a big internal refactor to remove the outdated concept of ScrollFolder
and rely on the file system parameter instead. This makes it easier to build webapps serving dynamic Scroll pages. It also simplifies the upcoming isomorphic release.
ScrollFolder
. Exports now include ScrollDiskFileSystem
and ScrollInMemoryFileSystem
. To get the same behavior as new ScrollFolder("folder").buildFiles()
use new ScrollDiskFileSystem().buildFilesInFolder("folder")
.new ScrollFolder(__dirname).defaultScrollCompiler
use DefaultScrollCompiler
compileSnippet
should now be compileEmbeddedVersion
file.folder.folder
use file.folderPath
loop
may be affected:relativeLink
to linkRelativeToCompileTarget
canonicalLink
if you need to include query strings in canonical link.canonicalLink https://scroll.pub/tests/kitchenSink/maps.html?canonLinkTest=true
map
using LeafletJScopyButtons
keyword. Use that to give code blocks a copy-to-clipboard button on hover.nodejs
node for including small node.js scripts inside a Scroll file, similar to a PHP snippet. . The snippet is written to disk and then require is used to run it. Exports variables are then replaced throughout the script.ScrollFolder
constructor now requires an argument. You can now pass an object as a second param to use a virtual filesystem.DefaultScrollCompiler
export. Instead use new ScrollFolder().defaultScrollCompiler
buildNeeded
method only used programmatically by PLDB. Switching that to dynamic generation which is a better pattern.quickHtml
node. A line starting with <
will be treated as an html
node. So these are the same:html <hr>
<hr>
*
) node.---
//
. Previously it was only comment
scroll init
now creates a .gitignore
file and also runs git init
.image
keyword now supports class
and id
tagsclass
tag with just a class will now apply to the whole parent element and not insert a spanabstractItemsProviderNode
[]
and [x]
-
are now indentableloop
node type:loop
words #2a2d34ff #009ddcff #f26430ff #6761a8ff #009b72ff
javascript `<span style="background-color: ${item}; width: 30px; height: 30px; display: inline-block;"> </span>`
startColumns
clear the section stack. Simpler behavior.getFullyExpandedFile
is no longer exported. Instead use: new ScrollFile(undefined, filePath).importResults.code
ScrollFile
have changed. absoluteFilePath
is now param #2, instaed of #3.css
one liners- ๐ added support for `css` one liners
class blueOneLiner
css .blueOneLiner { color: blue;}
title
nodes are now proper aftertext nodes and can use all features of aftertexthidden
keyword can now be used on any aftertext nodepermalink
on a file the title
node won't output an a tagtitle
blocks now start a section like #
and ##
, so you may need to add an empty line to end the section, for example if you previously had a startColumns
right after the title tag.snippets
nodes can now accept multiple groups and also groups can be in different folders. Syntax is [folderPath]/[groupName]
For example:title The Long Beach Pub
snippets 2023/index stories/index 2022/index
jtree
66. If you are extending Scroll you may need to migrate extensions.scroll init
aboveAsCode
and belowAsCode
now take an optional number for showing multiple nodes.1. One
2. Two
3. Three
table
grammar error messagetable
keyword which supports custom delimiters:name | score |
---|---|
kaia | 400 |
pemma | 100 |
table &&
name&&score
kaia&&400
pemma&&100
class
aftertext directive now inserts a span across the whole element content if no text search is provided.css
.classDemo {color:blue;}
This whole text will be blue.
class classDemo
This whole text will be blue.
replaceJs
keyword.youTube
CORS fix to work whether someone includes www.youtube or not.watch
command. nodemon
can be used for hot reloading. Install with sudo npm install -g nodemon
. Then run:nodemon -e scroll -x "scroll build"
Or alias it:
alias watch="nodemon -e scroll -x 'scroll build'"
You can add the following code to the page(s) you are working on to have them reload without manually refreshing the browser:
html <meta http-equiv="refresh" content="1;">
scroll init
no longer starts with a viewSourceBaseUrl
. If not provided then the View Source link is to the scroll file, so new sites don't start with broken links.link
nodes can now have target
. This link will open in blank tab.- ๐ `link` nodes can now have `target`. This link will open in blank tab.
https://scroll.pub This link
target _blank
title Title can also be set.
youTube
nodes can now have captions.youTube
links are converted to proper embed links to fix CORS issues.scrollImageComponent
CSS class changed to scrollCaptionedComponent
. If you were overwriting the previous class may need to update.note
keyword under link
nodes has been renamed to title
and instead of it being a block just the line is used. This is to better reflect what it does. See example above.youTube
definition was missing a cell type for url.redirectTo
definition was missing a cell type for url.*
nodes previously supported multiple lines of text. This now throws an errors. If you need the old behavior you can copy/paste the old node's Grammar code into your project.*
node with just a link now works correctly. Previously was rendering blank.html
now also supports quick oneliners:html <b>here is some html</b>
here is some html
importOnly
buildNeeded
returns whether the folder needs to be rebuilt. You can use this to skip unnecessary builds for faster perf.scroll build
now does not overwrite unmodified files. Now mtime
reflects when the generated HTML last changed instead of when the scroll build
command was last run. This speeds up rsync
deploys.Sections
. Headers (#
, ##
and ?
) now start a section, and a blank line ends it. A section will not be split across columns.listCommand
now much faster (~33% in pldb) because findScrollsInDirRecursive
will now skip node_modules
folders entirely.notes
keyword. Referencing a footnote is done the same way but now footnotes just print immediately like you'd expect.For example^exampleFootnote
For example1
1 This is an example footnote. โฎ
^exampleFootnote This is an example footnote.
viewSource
keyword.footnote
and caveat
directives to hoverNote
to avoid confusion with footnotes.startRuledColumns
which doesn't appear to be used anywhereyouTube
keyword for embedding youTube videos with proper responsive sizing.This release simplifies and removes things from the default install.
github
keyword is now git
to make it clearer what it does. The git SVG is now used in the default theme.twitter
keyword and removed the Twitter link from default theme.SVGS
is no longer exported.printFeed
, meaning pubDate and lastBuildDate are included.stumpNoSnippet
for advanced use case of PLDB until we have better support for custom grammars when using as a library.doNotPrint
class to header and footer elements for better printability.startColumns
keywordThis is a major breaking refactor. Scroll now generates flat html. This release is NOT recommended for the feint of heart. Wait a day or two until the bugs are ironed out.
metaTags
keyword.
,
,
, and
tags. Unnecessary. Modern browsers don't need them. HTML never should have had head/body split.SCROLL_CSS
export.stump
keyword works nowscrollCss
works nowThis is a major breaking refactor. All the implicit imports are gone. Everything must be explicitly included now (perhaps with a few slight exceptions like meta tags). This migration guide is a work in progress. This release is NOT recommended for the feint of heart. Wait a day or two until the bugs are ironed out.
maxColumns
and columnWidth
and template
scrollHeader
and scrollFooter
. The previous behavior of scrollHeader
and scrollFooter
has been removed.startColumns
and endColumns
.scrollCssTag
. The previous behavior of scrollCss
has been removed. Also printScrollCss
is now scrollCss
.Brockton is a city in Massachusetts2. It was incorporated in 18813.
2 A state in the United States. โฎ
3 Incorporated as a city in 1881, but as a town in 1821. Wikipedia. โฎ
This is the title
simplification refactor release.
description
keyword for use in open graph description generation.hidden
keyword on title
nodes for setting title
without printing it.title
in their HTML by default. Must set manually.siteTitle
and siteDescription
keywords. Those concepts no longer make sense after the introduction of groups
concept. Generally if you rename siteTitle
to title
and siteDescription
to description
it should work well.htmlTitle
keyword.http
quick links were not matching.SVGS
export when using as a library.- some item
) compiler was generating an extra p
tag.a
tags automatically. Note: if an a
tag is detected in the node Linkify will be DISABLED for that node.scroll check
is now scroll test
search ^# (\d+\.\d+\.\d+) (\d+)\-(\d+)\-(\d+)
replace # $1 $4.$2.$3
caption
now extends the thought (*
) node.You can now use all aftertext directives like bold in caption nodes. Note: in the future we may just remove the keyword caption
and you can just use *
directly.
scroll init
no longer creates a feed.xml
file by default. You can easily add an XML feed manually with the 2 steps below:comment Add the content below to feed.scroll
import settings.scroll
permalink feed.xml
template blank
printFeed index
comment Add the line below to your posts and/or settings import file.
rssFeedUrl feed.xml
aftertext
node in favor of *
nodes. Regex [search replace] to upgrade: ^aftertext\n
*
paragraph
node. Regex [search replace] to upgrade: ^paragraph\n
*
question
node. Regex [search replace] to upgrade: ^question
?
section
node. Regex [search replace] to upgrade: ^section
#
subsection
node. Regex [search replace] to upgrade: ^subsection
##
list
node.orderedList
node.unorderedList
node. ([^ ]+)๐([^ ]+)
2">1
The goal of this release is to simplify and speed up Scroll by removing legacy features.
This is a major release that removes a bunch of the original keywords in favor of the newer more advanced aftertext nodes.
If you don't want to upgrade at this time, it's very easy to just add the removed grammar definitions from this commit into your existing scrolls using the normal extension pattern.
You can also easily alias the newer aftertext node types with the original keywords above if you'd prefer.
*
nodes bug- ๐ Added new better way to do lists.
findScrollsInDirRecursive
.redirectTo
tagscroll list | scroll build
execute
method on ScrollCli class to executeUsersInstructionsFromShell
where
command is now list
?
, #
and ##
*
, footnote
, and readingList
This is a thought. It's like a condensed form of aftertext with bold and italics and code
turned on by default.
* This is a _thought_. It's like a condensed form of aftertext with *bold* and _italics_ and `code` turned on by default.
hoverNote default
And it supports hover notes!
Projects I'm very actively working on:
readingList
https://pldb.com PLDB.com
https://scroll.pub Scroll
https://breckyunits.com A Blog by Breck Yunits
openGraphImage
nodereplace
now supports multiline stringsabstract
. You can then remove all occurrences of the keyword abstract
from your grammar node definitions.getFullyExpandedFile(str)
replace with getFullyExpandedFile(str).code
author
and kpiTable
node typesThis is a major update that radically simplifies Scroll and adds significant new capabilities.
scroll.settings
and *.grammar
files are gone. Everything is now done with .scroll
files, and now every keyword is documented and usable on try.scroll.com and type checked.
Use import [filepath]
to import one file into another. Use replace
and replaceDefault
for variables.
Define new nodeTypes or create your own aliases on a per file basis. Use the import keyword and build your own collection of common reusable node types for your project(s).
Add files to one or more groups and then customize how each group page prints. No more magic or implicit creation of collection pages.
The new language features (imports, grammar nodes, and variables) required a change from a 1 one stage compilation process to a multi-stage compiler pass pattern. The compilers passes run in this order: imports, grammar extensions, then variables. So variables cannot be used in imports or grammar extensions.
git
setting is renamed to viewSourceBaseUrl
sourceLink
setting is renamed to viewSourceUrl
skipIndexPage
. Instead you now opt-in to group pages like this: groups index.html
scroll.settings
concept. Use import settings.scroll
now.footer
is now scrollFooter
and header
is now scrollHeader
ignoreGrammarFiles
. Custom grammar extensions must now be explicitly imported and/or be in .scroll
files.css
setting is now scrollCss
buildFiles
now. See 'full.scroll', index.scroll
, feed.scroll
, and style.scroll
in tests/kitchenSink
for how to implement those in new pattern.scrollArticleDateComponent => scrollDateComponent
scrollArticlePageComponent => scrollFilePageComponent
scrollSingleArticleTitle => scrollFilePageTitle
scrollIndexPageArticleContainerComponent => scrollGroupPageFileContainerComponent
scrollArticleSourceLinkComponent => scrollFileViewSourceUrlComponent
scrollIndexPageComponent => scrollGroupPageComponent
scrollIndexPageFileContainerComponent => scrollGroupPageFileContainerComponent
comment Put this in a file named style.scroll
permalink style.css
settings
noTemplate
printScrollCSS
scroll where
keyboardNav
nodepermalink
lines in .scroll
files need .html
. Run scroll migrate
to find and update automatically.new ScrollPage('title Hello world')
treeTable
treeTable
row
name Javascript
example
console.log("Hello world")
row
name Python
example
# A code block
print "Hello world"
name | example |
---|---|
Javascript | console.log("Hello world") |
Python | # A code block print "Hello world" |
htmlTitle
and sourceLink
keywords so an article can override the defaultscss split
to write CSS to scroll.css
instead of inline, or css none
to not generate CSS.wrap
keyword for advanced custom wraps in aftertext.Some simple and advanced usages. An absolute link and a relative link. Show some added text or some deleted text.
Some !simple! and *advanced* usages. An #absolute link# and @@@a relative link@@@. Show some ++added text++ or some --deleted text--.
wrap ! em
wrap * b
wrap # https://example.com
wrap @@@ a href="potato.html"
wrap ++ span style="color:green"
wrap -- span style="color:red; text-decoration: line-through;"
wrapsOn
keyword to aftertext.Support for traditional bold, code
, and italics in aftertext with the keyword wrapsOn
.
Support for traditional *bold*, `code`, and _italics_ in aftertext with the keyword `wrapsOn`.
This tiny release adds some ways to include more caveats and context around words and references.
This is a great idea.
This is a great idea.
hoverNote great
I'm not actually sure if this is a great idea. But often I want to include a comment and link it
back to the text, but don't quite want to footnote it.
This report showed the treatment had a big impact.
This report showed the treatment had a big impact.
https://example.com/report This report
title The average growth in the treatment group was 14.2x higher than the control group.
Example demonstrating the above:
aftertext
Click here to go to the middle paragraph.
link #middleParagraph Click here
loremIpsum 20
aftertext
Here is the middle paragraph.
id middleParagraph
loremIpsum 20
pipeTable
name|nameLink
Wikipedia|https://wikipedia.org
name |
---|
Wikipedia |
By default the article's date will be used but you can also provide a custom date.
A truck transporting llamas collided into a pajama factory late last night.
dateline 2/21/2020
February 21, 2020 โ A truck transporting llamas collided into a pajama factory late last night.
To migrate and keep your existing datelines use the command scroll migrate
.
How much wood can a woodchuck chuck if a woodchuck could chuck wood?
How much wood can a woodchuck chuck if a woodchuck could chuck wood?
https://en.wikipedia.org/wiki/Groundhog woodchuck
matchAll
class standout wood
match 0 3
css
.standout {
background-color: yellow;
border: 1px dashed red;
padding: 5px;
}
You write some text. After your text, you add your markup instructions with selectors to select the text to markup, one command per line. For example, this paragraph is written in Aftertext and the source code looks like:
You write some text. After your text, you add your markup instructions with selectors to select the text to markup, one command per line. For example, this paragraph is written in Aftertext and the source code looks like:
italics After your text
italics selectors
This is a caption
image blog/screenshot.png
caption This is a caption
question
nodes?Question and answer structures are literally older than the Socratic Method. Such a common semantic pattern deserves it's own keywords.
The below regex may help.
Find ^title\d (.+\?)
ReplaceWith question $1
Find ^title\d (.+)
ReplaceWith section $1
what | why |
---|---|
PipeTable | Because it's awesome! |
To use an image node:
image foo.jpg
QuickParagraphs are now an error. When you want to drop in some HTML, do so with HTML node:
html
<b>anything goes here</b>
scroll check
commandFor single word links in paragraph nodes only (for now) you can now do:
paragraph
This is a link๐example.com
Below is a regex for migrating existing *.scroll
files.
<a href="https://([^"]+)">([^ ]+)</a>
$2๐$1
The ๐link tag only supports single word links. Like everything with ScrollScript, you have a number of options if the conventional design doesn't work for you. Your options are:
foo ๐link bar ๐link
Now you can! Sometimes you just want to publish an independent page without including it in the index. To do that, just add skipIndexPage
.