Commit fc1173f8 authored by Jeff Avallone's avatar Jeff Avallone

Building site with just webpack

parent a6aab0a5
{
"presets": ["es2015"]
"presets": ["@babel/preset-env"]
}
module.exports = new Date().toISOString();
const handlebars = require('handlebars/runtime');
module.exports = function(selector) {
return new handlebars.SafeString(`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 8"><use xlink:href="${selector}" /></svg>`);
};
module.exports.register = function(handlebars) {
handlebars.registerHelper('icon', function(selector) {
return new handlebars.SafeString(`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 8"><use xlink:href="${selector}" /></svg>`);
});
};
var layouts = require('handlebars-layouts');
module.exports.register = function(handlebars) {
layouts.register(handlebars);
};
const styles = require('!!css-loader!sass-loader!../../src/sass/svg.scss');
module.exports = function() {
return styles.default.toString();
};
</main>
<footer>
<ul class="inline-list">
<li>Created by <a href="mailto:[email protected]">Jeff Avallone</a></li>
<li>
Generated images licensed:
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="Creative Commons License" src="https://licensebuttons.net/l/by/3.0/80x15.png" /></a>
</li>
</ul>
<script type="text/html" id="svg-container-base">
{{> "svg_template"}}
</script>
</footer>
{{> "open_iconic"}}
</body>
</html>
......@@ -4,7 +4,7 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Regexper{{#if file.frontMatter.title}} - {{file.frontMatter.title}}{{/if}}</title>
<title>Regexper{{#if htmlWebpackPlugin.options.title}} - {{htmlWebpackPlugin.options.title}}{{/if}}</title>
<meta name="description" content="Regular expression visualizer using railroad diagrams" />
<meta name="viewport" content="width=device-width" />
......@@ -13,8 +13,7 @@
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="author" href="humans.txt" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Bangers&text=Regxpr" />
<link rel="stylesheet" href="/css/main.css" />
<!-- Built: {{date}} -->
<!-- Built: {{htmlWebpackPlugin.options.date}} -->
</head>
<body>
<header>
......@@ -40,25 +39,3 @@
</header>
<main id="content">
{{#block "body"}}{{/block}}
</main>
<footer>
{{#block "footer"}}
<ul class="inline-list">
<li>Created by <a href="mailto:[email protected]">Jeff Avallone</a></li>
<li>
Generated images licensed:
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="Creative Commons License" src="https://licensebuttons.net/l/by/3.0/80x15.png" /></a>
</li>
</ul>
<script type="text/html" id="svg-container-base">
{{> "svg_template"}}
</script>
{{/block}}
</footer>
{{> "open_iconic"}}
</body>
</html>
......@@ -5,7 +5,7 @@
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
version="1.1">
<defs>
<style type="text/css">{{> svg_styles}}</style>
<style type="text/css">{{svg_styles}}</style>
</defs>
<metadata>
<rdf:RDF>
......
......@@ -12,22 +12,21 @@
"scripts": {
"pretest": "eslint .",
"test": "karma start --single-run",
"build": "gulp build",
"start": "gulp"
"build": "webpack",
"start": "webpack-dev-server"
},
"devDependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^7.1.1",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.16.0",
"babel-runtime": "^6.3.19",
"@babel/core": "^7.11.6",
"@babel/polyfill": "^7.11.5",
"@babel/preset-env": "^7.11.5",
"@babel/runtime": "^7.11.2",
"babel-loader": "^8.1.0",
"canopy": "^0.2.0",
"css-loader": "^0.28.4",
"css-loader": "^4.2.2",
"docco": "^0.7.0",
"eslint": "^7.8.1",
"eslint-plugin-jasmine": "^4.1.1",
"extract-loader": "^1.0.0",
"file-loader": "^0.11.2",
"file-loader": "^6.1.0",
"firebase-tools": "^6.2.2",
"folder-toc": "^0.1.0",
"gulp": "^3.8.10",
......@@ -39,8 +38,9 @@
"gulp-notify": "^3.0.0",
"gulp-rename": "^1.2.2",
"gulp-util": "^3.0.7",
"handlebars-layouts": "^3.1.2",
"imports-loader": "^0.7.1",
"handlebars-loader": "^1.7.1",
"html-webpack-plugin": "^4.4.1",
"imports-loader": "^1.1.0",
"jasmine-core": "^2.4.1",
"karma": "^1.1.2",
"karma-chrome-launcher": "^3.1.0",
......@@ -49,12 +49,18 @@
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.4",
"lodash": "^4.6.1",
"mini-css-extract-plugin": "^0.11.0",
"node-bourbon": "^4.2.3",
"node-sass": "^4.14.1",
"sass-loader": "^6.0.6",
"sass-loader": "^10.0.2",
"snapsvg": "^0.5.1",
"watchify": "^3.7.0",
"webpack": "^3.4.1"
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {}
"dependencies": {
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.1.0"
}
}
{{> page_top}}
<div class="error copy">
<h1>404: Not Found</h1>
<blockquote>
Some people, when confronted with a problem, think<br/>
&ldquo;I know, I'll use regular expressions.&rdquo; Now they have two problems.
</blockquote>
<p>Apparently, you have three problems&hellip;because the page you requested cannot be found.</p>
</div>
{{> page_bottom}}
---
title: Page Not Found
---
{{#extend "layout"}}
{{#content "body"}}
<div class="error copy">
<h1>404: Not Found</h1>
<blockquote>
Some people, when confronted with a problem, think<br/>
&ldquo;I know, I'll use regular expressions.&rdquo; Now they have two problems.
</blockquote>
<p>Apparently, you have three problems&hellip;because the page you requested cannot be found.</p>
</div>
{{/content}}
{{/extend}}
{{> page_top}}
<div class="copy changelog">
<dl>
{{#each htmlWebpackPlugin.options.changelog}}
<dt>{{label}}</dt>
{{#each changes}}
<dd>{{{this}}}</dd>
{{/each}}
{{/each}}
</dl>
</div>
{{> page_bottom}}
---
title: Changelog
---
{{#extend "layout"}}
{{#content "body"}}
<div class="copy changelog">
<dl>
{{#each changelog}}
<dt>{{label}}</dt>
{{#each changes}}
<dd>{{{this}}}</dd>
{{/each}}
{{/each}}
</dl>
</div>
{{/content}}
{{/extend}}
{{> page_top}}
<div class="copy documentation">
<section>
<h1>Reading Railroad Diagrams</h1>
<p>The images generated by Regexper are commonly referred to as "Railroad Diagrams". These diagram are a straight-forward way to illustrate what can sometimes become very complicated processing in a regular expression, with nested looping and optional elements. The easiest way to read these diagrams to to start at the left and follow the lines to the right. If you encounter a branch, then there is the option of following one of multiple paths (and those paths can loop back to earlier parts of the diagram). In order for a string to successfully match the regular expression in a diagram, you must be able to fulfill each part of the diagram as you move from left to right and proceed through the entire diagram to the end.</p>
<figure class="shift-right" data-expr="Lions(?: and|,) tigers,? and bears\. Oh my!"></figure>
<p>As an example, this expression will match "Lions and tigers and bears. Oh my!" or the more grammatically correct "Lions, tigers, and bears. Oh my!" (with or without an Oxford comma). The diagram first matches the string "Lions"; you cannot proceed without that in your input. Then there is a choice between a comma or the string " and". No matter what choice you make, the input string must then contain " tigers" followed by an optional comma (your path can either go through the comma or around it). Finally the string must end with " and bears. Oh my!".</p>
<section>
<h2>Basic parts of these diagrams</h2>
<p>The simplest pieces of these diagrams to understand are the parts that match some specific bit of text without an options. They are: Literals, Escape sequences, and "Any charater".</p>
<div class="section">
<h3>Literals</h3>
<figure class="shift-left" data-expr="A literal example"></figure>
<p>Literals match an exact string of text. They're displayed in a light blue box, and the contents are quoted (to make it easier to see any leading or trailing whitespace).</p>
</div>
<div class="section">
<h3>Escape sequences</h3>
<figure class="shift-left" data-expr="\w\x7f\u00bb\1\0"></figure>
<p>Escape sequences are displayed in a green box and contain a description of the type of character(s) they will match.</p>
</div>
<div class="section">
<h3>"Any character"</h3>
<figure class="shift-left" data-expr="."></figure>
<p>"Any character" is similar to an escape sequence. It matches any single character.</p>
</div>
</section>
<section>
<h2>Character Sets</h2>
<figure class="shift-left" data-expr="[#a-z\n][^$0-9\b]"></figure>
<p>Character sets will match or not match a collection of individual characters. They are shown as a box containing literals and escape sequences. The label at the top indicates that the character set will match "One of" the contained items or "None of" the contained items.</p>
</section>
<section>
<h2>Subexpressions</h2>
<figure class="shift-left" data-expr="(example\s)(?=content)"></figure>
<p>Subexpressions are indicated by a dotted outline around the items that are in the expression. Captured subexpressions are labeled with the group number they will be captured under. Positive and negative lookahead are labeled as such.</p>
</section>
<section>
<h2>Alternation</h2>
<figure class="shift-left" data-expr="one\s|two\W|three\t|four\n"></figure>
<p>Alternation provides choices for the regular experssion. It is indicated by the path for the expression fanning out into a number of choices.</p>
</section>
<section>
<h2>Quantifiers</h2>
<p>Quantifiers indicate if part of the expression should be repeated or optional. They are displayed similarly to Alternation, by the path through the diagram branching (and possibly looping back on itself). Unless indicated by an arrow on the path, the preferred path is to continue going straight.</p>
<div class="section">
<h3>Zero-or-more</h3>
<figure class="shift-left" data-expr="(?:greedy)*">
<figcaption>Greedy quantifier</figcaption>
</figure>
<figure class="shift-left" data-expr="(?:non-greedy)*?">
<figcaption>Non-greedy quantifier</figcaption>
</figure>
<p>The zero-or-more quantifier matches any number of repetitions of the pattern.</p>
</div>
<div class="section">
<h3>Required</h3>
<figure class="shift-left" data-expr="(?:greedy)+">
<figcaption>Greedy quantifier</figcaption>
</figure>
<figure class="shift-left" data-expr="(?:non-greedy)+?">
<figcaption>Non-greedy quantifier</figcaption>
</figure>
<p>The required quantifier matches one or more repetitions of the pattern. Note that it does not have the path that allows the pattern to be skipped like the zero-or-more quantifier.</p>
</div>
<div class="section">
<h3>Optional</h3>
<figure class="shift-left" data-expr="(?:greedy)?">
<figcaption>Greedy quantifier</figcaption>
</figure>
<figure class="shift-left" data-expr="(?:non-greedy)??">
<figcaption>Non-greedy quantifier</figcaption>
</figure>
<p>The optional quantifier matches the pattern at most once. Note that it does not have the path that allows the pattern to loop back on itself like the zero-or-more or required quantifiers.</p>
</div>
<div class="section">
<h3>Range</h3>
<figure class="shift-left" data-expr="(?:greedy){5,10}">
<figcaption>Greedy quantifier</figcaption>
</figure>
<figure class="shift-left" data-expr="(?:non-greedy){5,10}?">
<figcaption>Non-greedy quantifier</figcaption>
</figure>
<p>The ranged quantifier specifies a number of times the pattern may be repeated. The two examples provided here both have a range of "{5,10}", the label for the looping branch indicates the number of times that branch may be followed. The values are one less than specified in the expression since the pattern would have to be matched once before repeating it is an option. So, for these examples, the pattern would be matched once and then the loop would be followed 4 to 9 times, for a total of 5 to 10 matches of the pattern.</p>
</div>
</section>
</section>
</div>
{{> page_bottom}}
---
title: Documentation
---
{{#extend "layout"}}
{{#content "body"}}
<div class="copy documentation">
<section>
<h1>Reading Railroad Diagrams</h1>
<p>The images generated by Regexper are commonly referred to as "Railroad Diagrams". These diagram are a straight-forward way to illustrate what can sometimes become very complicated processing in a regular expression, with nested looping and optional elements. The easiest way to read these diagrams to to start at the left and follow the lines to the right. If you encounter a branch, then there is the option of following one of multiple paths (and those paths can loop back to earlier parts of the diagram). In order for a string to successfully match the regular expression in a diagram, you must be able to fulfill each part of the diagram as you move from left to right and proceed through the entire diagram to the end.</p>
<figure class="shift-right" data-expr="Lions(?: and|,) tigers,? and bears\. Oh my!"></figure>
<p>As an example, this expression will match "Lions and tigers and bears. Oh my!" or the more grammatically correct "Lions, tigers, and bears. Oh my!" (with or without an Oxford comma). The diagram first matches the string "Lions"; you cannot proceed without that in your input. Then there is a choice between a comma or the string " and". No matter what choice you make, the input string must then contain " tigers" followed by an optional comma (your path can either go through the comma or around it). Finally the string must end with " and bears. Oh my!".</p>
<section>
<h2>Basic parts of these diagrams</h2>
<p>The simplest pieces of these diagrams to understand are the parts that match some specific bit of text without an options. They are: Literals, Escape sequences, and "Any charater".</p>
<div class="section">
<h3>Literals</h3>
<figure class="shift-left" data-expr="A literal example"></figure>
<p>Literals match an exact string of text. They're displayed in a light blue box, and the contents are quoted (to make it easier to see any leading or trailing whitespace).</p>
</div>
<div class="section">
<h3>Escape sequences</h3>
<figure class="shift-left" data-expr="\w\x7f\u00bb\1\0"></figure>
<p>Escape sequences are displayed in a green box and contain a description of the type of character(s) they will match.</p>
</div>
<div class="section">
<h3>"Any character"</h3>
<figure class="shift-left" data-expr="."></figure>
<p>"Any character" is similar to an escape sequence. It matches any single character.</p>
</div>
</section>
<section>
<h2>Character Sets</h2>
<figure class="shift-left" data-expr="[#a-z\n][^$0-9\b]"></figure>
<p>Character sets will match or not match a collection of individual characters. They are shown as a box containing literals and escape sequences. The label at the top indicates that the character set will match "One of" the contained items or "None of" the contained items.</p>
</section>
<section>
<h2>Subexpressions</h2>
<figure class="shift-left" data-expr="(example\s)(?=content)"></figure>
<p>Subexpressions are indicated by a dotted outline around the items that are in the expression. Captured subexpressions are labeled with the group number they will be captured under. Positive and negative lookahead are labeled as such.</p>
</section>
<section>
<h2>Alternation</h2>
<figure class="shift-left" data-expr="one\s|two\W|three\t|four\n"></figure>
<p>Alternation provides choices for the regular experssion. It is indicated by the path for the expression fanning out into a number of choices.</p>
</section>
<section>
<h2>Quantifiers</h2>
<p>Quantifiers indicate if part of the expression should be repeated or optional. They are displayed similarly to Alternation, by the path through the diagram branching (and possibly looping back on itself). Unless indicated by an arrow on the path, the preferred path is to continue going straight.</p>
<div class="section">
<h3>Zero-or-more</h3>
<figure class="shift-left" data-expr="(?:greedy)*">
<figcaption>Greedy quantifier</figcaption>
</figure>
<figure class="shift-left" data-expr="(?:non-greedy)*?">
<figcaption>Non-greedy quantifier</figcaption>
</figure>
<p>The zero-or-more quantifier matches any number of repetitions of the pattern.</p>
</div>
<div class="section">
<h3>Required</h3>
<figure class="shift-left" data-expr="(?:greedy)+">
<figcaption>Greedy quantifier</figcaption>
</figure>
<figure class="shift-left" data-expr="(?:non-greedy)+?">
<figcaption>Non-greedy quantifier</figcaption>
</figure>
<p>The required quantifier matches one or more repetitions of the pattern. Note that it does not have the path that allows the pattern to be skipped like the zero-or-more quantifier.</p>
</div>
<div class="section">
<h3>Optional</h3>
<figure class="shift-left" data-expr="(?:greedy)?">
<figcaption>Greedy quantifier</figcaption>
</figure>
<figure class="shift-left" data-expr="(?:non-greedy)??">
<figcaption>Non-greedy quantifier</figcaption>
</figure>
<p>The optional quantifier matches the pattern at most once. Note that it does not have the path that allows the pattern to loop back on itself like the zero-or-more or required quantifiers.</p>
</div>
<div class="section">
<h3>Range</h3>
<figure class="shift-left" data-expr="(?:greedy){5,10}">
<figcaption>Greedy quantifier</figcaption>
</figure>
<figure class="shift-left" data-expr="(?:non-greedy){5,10}?">
<figcaption>Non-greedy quantifier</figcaption>
</figure>
<p>The ranged quantifier specifies a number of times the pattern may be repeated. The two examples provided here both have a range of "{5,10}", the label for the looping branch indicates the number of times that branch may be followed. The values are one less than specified in the expression since the pattern would have to be matched once before repeating it is an option. So, for these examples, the pattern would be matched once and then the loop would be followed 4 to 9 times, for a total of 5 to 10 matches of the pattern.</p>
</div>
</section>
</section>
</div>
{{/content}}
{{#content "footer" mode="append"}}
<script src="/js/main.js" async defer></script>
{{/content}}
{{/extend}}
{{> page_top}}
<div class="application">
<form id="regexp-form">
<textarea id="regexp-input" autofocus="autofocus" placeholder="Enter JavaScript-style regular expression to display"></textarea>
<button type="submit">Display</button>
<ul class="inline-list">
<li class="download-svg">
<a href="#" class="inline-icon" data-action="download-svg" download="image.svg" type="image/svg+xml">{{icon "#data-transfer-download"}}Download SVG</a>
</li>
<li class="download-png">
<a href="#" class="inline-icon" data-action="download-png" download="image.png" type="image/png">{{icon "#data-transfer-download"}}Download PNG</a>
</li>
<li class="permalink">
<a href="#" class="inline-icon" data-action="permalink">{{icon "#link-intact"}}Permalink</a>
</li>
</ul>
</form>
</div>
<div class="results">
<div id="error"></div>
<ul id="warnings"></ul>
<div id="regexp-render"></div>
</div>
{{> page_bottom}}
{{#extend "layout"}}
{{#content "body"}}
<div class="application">
<form id="regexp-form">
<textarea id="regexp-input" autofocus="autofocus" placeholder="Enter JavaScript-style regular expression to display"></textarea>
<button type="submit">Display</button>
<ul class="inline-list">
<li class="download-svg">
<a href="#" class="inline-icon" data-action="download-svg" download="image.svg" type="image/svg+xml">{{icon "#data-transfer-download"}}Download SVG</a>
</li>
<li class="download-png">
<a href="#" class="inline-icon" data-action="download-png" download="image.png" type="image/png">{{icon "#data-transfer-download"}}Download PNG</a>
</li>
<li class="permalink">
<a href="#" class="inline-icon" data-action="permalink">{{icon "#link-intact"}}Permalink</a>
</li>
</ul>
</form>
</div>
<div class="results">
<div id="error"></div>
<ul id="warnings"></ul>
<div id="regexp-render"></div>
</div>
{{/content}}
{{#content "footer" mode="append"}}
<script src="/js/main.js" async defer></script>
{{/content}}
{{/extend}}
......@@ -5,6 +5,8 @@
// test. Therefore, this code is kept as simple as possible to reduce the need
// to run it through automated tests.
import '../sass/main.scss';
import util from './util.js';
import Regexper from './regexper.js';
import Parser from './parser/javascript.js';
......
@import 'bourbon';
@import '~bourbon/app/assets/stylesheets/_bourbon.scss';