...
 
Commits (247)
{
"presets": ["es2015"]
}
node_modules
.sass-cache
build
docs
tmp
# Logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Dependency directories
node_modules/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Yarn Integrity file
.yarn-integrity
# Build output
build/
script/__build__/
# Coverage reports
coverage/
# Favicon cache
.wwp-cache/
image: node:latest
stages:
- setup
- test
- build
- deploy
.shared_runner: &shared_runner
tags:
- shared
.cache_consumer: &cache_consumer
cache:
policy: pull
paths:
- node_modules
.preview_job: &preview_job
only:
- react # TODO: Change to master once merged
.production_job: &production_job
only:
- /^release-.*$/
.build_template: &build_template
<<: *shared_runner
<<: *cache_consumer
stage: build
dependencies: []
artifacts:
paths:
- build/
script:
- yarn build
.deploy_template: &deploy_template
<<: *shared_runner
<<: *cache_consumer
stage: deploy
script:
- yarn deploy
setup:
<<: *shared_runner
stage: setup
cache:
paths:
- node_modules
script:
- yarn install
test:
<<: *shared_runner
<<: *cache_consumer
stage: test
coverage: '/^Statements\s*:\s*([^%]+)/'
artifacts:
paths:
- coverage/
script:
- yarn test
build_preview:
<<: *build_template
<<: *preview_job
variables:
BANNER: preview
DEPLOY_ENV: preview
GA_PROPERTY: $PREVIEW_GA_PROPERTY
build_production:
<<: *build_template
<<: *production_job
variables:
DEPLOY_ENV: production
GA_PROPERTY: $PROD_GA_PROPERTY
deploy_preview:
<<: *deploy_template
<<: *preview_job
dependencies:
- build_preview
environment:
name: preview
url: https://preview.regexper.com
variables:
CLOUD_FRONT_ID: $PREVIEW_CLOUDFRONT_ID
DEPLOY_BUCKET: $PREVIEW_DEPLOY_BUCKET
deploy_production:
<<: *deploy_template
<<: *production_job
dependencies:
- build_production
environment:
name: production
url: https://regexper.com
variables:
CLOUD_FRONT_ID: $PROD_CLOUDFRONT_ID
DEPLOY_BUCKET: $PROD_DEPLOY_BUCKET
{
"requireCurlyBraces": [
"if",
"else",
"for",
"while",
"do",
"try",
"catch"
],
"requireSpaceAfterKeywords": [
"if",
"else",
"for",
"while",
"do",
"switch",
"case",
"return",
"try",
"typeof"
],
"requireSpaceBeforeBlockStatements": true,
"requireParenthesesAroundIIFE": true,
"requireSpacesInConditionalExpression": true,
"disallowSpacesInNamedFunctionExpression": {
"beforeOpeningRoundBrace": true
},
"disallowSpacesInFunctionDeclaration": {
"beforeOpeningRoundBrace": true
},
"requireSpaceBetweenArguments": true,
"requireMultipleVarDecl": "onevar",
"requireVarDeclFirst": true,
"requireBlocksOnNewline": true,
"disallowEmptyBlocks": true,
"disallowSpacesInsideArrayBrackets": true,
"disallowSpacesInsideParentheses": true,
"requireCommaBeforeLineBreak": true,
"disallowSpaceAfterPrefixUnaryOperators": true,
"disallowSpaceBeforePostfixUnaryOperators": true,
"disallowSpaceBeforeBinaryOperators": [
","
],
"requireSpacesInForStatement": true,
"requireSpacesInAnonymousFunctionExpression": {
"beforeOpeningCurlyBrace": true
},
"requireSpaceBeforeBinaryOperators": true,
"requireSpaceAfterBinaryOperators": true,
"disallowKeywords": [
"with",
"continue"
],
"validateIndentation": 2,
"disallowMixedSpacesAndTabs": true,
"disallowTrailingWhitespace": true,
"disallowTrailingComma": true,
"disallowKeywordsOnNewLine": [
"else"
],
"requireLineFeedAtFileEnd": true,
"requireCapitalizedConstructors": true,
"requireDotNotation": true,
"disallowNewlineBeforeBlockStatements": true,
"disallowMultipleLineStrings": true,
"requireSpaceBeforeObjectValues": true
}
language: node_js
node_js:
- "node"
addons:
firefox: "latest"
before_script:
- "export DISPLAY=:99.0"
- "sh -e /etc/init.d/xvfb start"
- sleep 3
script: yarn test
registry "https://registry.yarnpkg.com"
# Regexper [![Build Status](https://travis-ci.org/javallone/regexper-static.svg?branch=master)](https://travis-ci.org/javallone/regexper-static)
# Regexper
Code for the http://regexper.com/ site.
......@@ -20,13 +20,42 @@ To start a development server, run:
$ yarn start
This will build the site into the ./build directory, start a local start on port 8080, and begin watching the source files for modifications. The site will automatically be rebuilt when files are changed. Also, if you browser has the LiveReload extension, then the page will be reloaded.
### Translating
These other gulp tasks are available:
A helper tool is available to support maintaining translations. Running `yarn i18n:scrub` will update locale data files under `src/locales` by normalizing YAML syntax across all the files, maintaining a `missing.yaml` file under each locale, and indicating any existing translations that appear to be no longer used. For this, the `src/locales/en/translation.yaml` file is used as a source of truth.
$ gulp docs # Build documentation into the ./docs directory
$ gulp build # Build the site into the ./build directory
$ yarn test # Run JSCS lint and Karma tests
To add a new locale, first create a directory for the locale under `src/locales` (no files need to be added at this point), then run `yarn i18n:scrub`. This will create a `src/locales/<locale name>/missing.yaml` file that contains required translations. Add a `src/locales/<locale name>/translation.yaml` file and at a minimum add a translation for the `/displayName` value. This should be the translated name of the locale your are adding.
If you are looking to translation missing text for a locale that is already present in the project, start by running `yarn i18n:scrub`. Check the `src/locales/<locale name>/missing.yaml` file for translations that are needed. Add any updated translations to `src/locales/<locale name>/translation.yaml`.
Before committing any updated translations, run `yarn i18n:scrub` again to maintain syntax in the YAML files and remove any translated entries from `missing.yaml`. Commit any changes to the `translation.yaml` and `missing.yaml` files.
### Available scripts
* `yarn start` - Start a development server on port 8080
* `yarn start:prod` - Run a build and start a web server on port 8080. This will not automatically rebuild.
* `yarn build` - Run a production build (used for deployments and for rebuilding when running `yarn start:prod`)
* `yarn deploy` - Deploy application to AWS S3 bucket
* `yarn test` - Run lint and unit tests
* `yarn test:lint` - Run eslint
* `yarn test:unit` - Run jest unit tests
* `yarn test:watch` - Run jest in watch mode
* `yarn test:bundle-analyzer` - Generate webpack-bundle-analyzer report
* `yarn i18n:scrub` - Scrubs i18n locale configs. Adds missing keys and normalizes YAML formatting
## Configuration
Several environment variables are used to configure the application at build-time. None of these values are required during testing.
* `NODE_ENV` - Effects build-time optimizations. Set to `"production"` for builds and unit tests in package.json. Setting to anything else will show a banner in the application's header.
* `GA_PROPERTY` - Google Analytics property ID.
* `SENTRY_KEY` - Sentry.io DSN key for error reporting.
* `CI_COMMIT_REF_SLUG`, `CI_COMMIT_SHA` - GitLab CI values used to generate build ID. Displayed in application footer and used in Sentry.io error reports.
* `CLOUD_FRONT_ID` - AWS CloudFront distribution ID to invalidating when running `yarn deploy`
* `DEPLOY_BUCKET` - AWS S3 bucket to deploy application to when running `yarn deploy`.
* `DEPLOY_ENV` - Environment the application will be deployed to. Used to report environment in Sentry.io error reports. Typically set to either "preview" or "production".
* `BANNER` - Text to display in header banner. Generally generated from `NODE_ENV`
* `BUILD_ID` - Application build ID. Generated from `CI_COMMIT_REF_SLUG` and `CI_COMMIT_SHA` if not set.
## License
......
var path = require('path'),
_ = require('lodash'),
buildRoot = process.env.BUILD_PATH || path.join(__dirname, './build'),
buildPath = _.bind(path.join, path, buildRoot);
module.exports = {
buildRoot: buildRoot,
buildPath: buildPath,
globs: {
other: './src/**/*.!(hbs|scss|js|peg)',
templates: './src/**/*.hbs',
data: ['./lib/data/**/*.json', './lib/data/**/*.js'],
helpers: './lib/helpers/**/*.js',
partials: './lib/partials/**/*.hbs',
sass: './src/**/*.scss',
svg_sass: './src/sass/svg.scss',
js: ['./src/**/*.js', './src/**/*.peg'],
spec: './spec/**/*_spec.js',
lint: [
'./lib/**/*.js',
'./src/**/*.js',
'./spec/**/*.js',
'./*.js'
]
},
lintRoots: ['lib', 'src', 'spec'],
browserify: {
debug: true,
fullPaths: false
}
};
const path = require('path');
module.exports = {
s3Bucket: process.env.DEPLOY_BUCKET,
cloudFrontId: process.env.CLOUD_FRONT_ID,
deployFrom: path.resolve(__dirname, 'build'),
paths: [
{
match: /^service-worker.js/,
CacheControl: 'max-age=0'
},
{
match: /^(js|css|icons-\w{8})/,
CacheControl: 'public, max-age=31536000'
},
{ // Default config. MUST BE LAST
match: /./,
CacheControl: 'public, max-age=96400'
}
]
};
const gulp = require('gulp-help')(require('gulp')),
_ = require('lodash'),
notify = require('gulp-notify'),
folderToc = require('folder-toc'),
docco = require('gulp-docco'),
connect = require('gulp-connect'),
hb = require('gulp-hb'),
frontMatter = require('gulp-front-matter'),
rename = require('gulp-rename'),
config = require('./config'),
gutil = require('gulp-util'),
webpack = require('webpack')
webpackConfig = require('./webpack.config'),
fs = require('fs');
gulp.task('default', 'Auto-rebuild site on changes.', ['server', 'docs'], function() {
gulp.watch(config.globs.other, ['static']);
gulp.watch(_.flatten([
config.globs.templates,
config.globs.data,
config.globs.helpers,
config.globs.partials,
config.globs.svg_sass
]), ['markup']);
gulp.watch(_.flatten([
config.globs.sass,
config.globs.js
]), ['webpack']);
gulp.watch(config.globs.js, ['docs']);
});
gulp.task('docs', 'Build documentation into ./docs directory.', ['docs:files'], function() {
folderToc('./docs', {
filter: '*.html'
});
});
gulp.task('docs:files', false, function() {
return gulp.src(config.globs.js)
.pipe(docco())
.pipe(gulp.dest('./docs'));
});
gulp.task('server', 'Start development server.', ['build'], function() {
gulp.watch(config.buildPath('**/*'), function(file) {
return gulp.src(file.path).pipe(connect.reload());
});
return connect.server({
root: config.buildRoot,
livereload: true
});
});
gulp.task('build', 'Build site into ./build directory.', ['static', 'webpack', 'markup']);
gulp.task('static', 'Build static files into ./build directory.', function() {
return gulp.src(config.globs.other, { base: './src' })
.pipe(gulp.dest(config.buildRoot));
});
gulp.task('markup', 'Build markup into ./build directory.', ['webpack'], function() {
var hbStream = hb({
data: config.globs.data,
helpers: config.globs.helpers,
partials: config.globs.partials,
parsePartialName: function(option, file) {
return _.last(file.path.split(/\\|\//)).replace('.hbs', '');
},
bustCache: true
});
hbStream.partials({
svg_styles: fs.readFileSync(config.buildRoot + '/css/svg.css').toString()
});
if (process.env.GA_PROP) {
hbStream.data({
'gaPropertyId': process.env.GA_PROP
});
}
if (process.env.SENTRY_KEY) {
hbStream.data({
'sentryKey': process.env.SENTRY_KEY
});
}
return gulp.src(config.globs.templates)
.pipe(frontMatter())
.pipe(hbStream)
.on('error', notify.onError())
.pipe(rename({ extname: '.html' }))
.pipe(gulp.dest(config.buildRoot));
});
gulp.task('webpack', 'Build JS & CSS into ./build directory.', function(callback) {
webpack(webpackConfig, function(err, stats) {
if (err) {
throw new gutil.PluginError('webpack', err);
}
gutil.log('[webpack]', stats.toString());
callback();
});
});
module.exports = function(karma) {
karma.set({
frameworks: ['jasmine'],
files: [ 'spec/test_index.js' ],
preprocessors: {
'spec/test_index.js': ['webpack', 'sourcemap']
},
reporters: ['progress', 'notify'],
colors: true,
logLevel: karma.LOG_INFO,
browsers: ['Firefox'],
autoWatch: true,
singleRun: false,
webpack: {
devtool: 'inline-source-map',
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: require.resolve('snapsvg'),
loader: 'imports-loader?this=>window,fix=>module.exports=0'
},
{
test: /\.peg$/,
loader: require.resolve('./lib/canopy-loader')
}
]
}
}
});
};
var canopy = require('canopy');
module.exports = function(source) {
this.cacheable();
return canopy.compile(source);
};
[
{
"label": "February 10, 2018 Release",
"changes": [
"Adding 'sticky' and 'unicode' flag support",
"Encoding parenthesis in the permalink and browser URLs",
"Adding PNG download support"
]
},
{
"label": "July 31, 2016 Release",
"changes": [
"Merged code to enable automated testing with Travis CI from <a href=\"https://github.com/Byron\">Sebastian Thiel</a>",
"Merged feature to show an informational tooltip on loop labels from <a href=\"https://github.com/ThibWeb\">Thibaud Colas</a>",
"Fixed issue with '^' and '$' not being allowed in the middle of a fragment (see <a href=\"https://github.com/javallone/regexper-static/issues/29\">GitHub issue</a>)",
"Updating several dependencies",
"Some stylistic code cleanup"
]
},
{
"label": "May 31, 2016 Release",
"changes": [
"Putting separate CSS for generated SVG images back into the build. Downloaded images have been broken since the March 10 release because the SVG styles were merged into the page styles."
]
},
{
"label": "May 23, 2016 Release",
"changes": [
"Refactored tracking code to support latest Google Analytics setup"
]
},
{
"label": "March 10, 2016 Release",
"changes": [
"Embedding SVG icon images into markup",
"Some changes for minor performance improvements",
"Updating several dependencies"
]
},
{
"label": "March 8, 2016 Release",
"changes": [
"Replaced icon font with individual SVG images"
]
},
{
"label": "March 3, 2016 Release",
"changes": [
"Merged some code cleanup and a bugfix from <a href=\"https://github.com/Byron\">Sebastian Thiel</a>",
"Updated notice for IE8 users to no longer include link to legacy site"
]
},
{
"label": "December 21, 2015 Release",
"changes": [
"Updating NPM dependencies to fix JS error that only appeared when running site from a local development environment (see <a href=\"https://github.com/javallone/regexper-static/issues/21\">GitHub issue</a>)"
]
},
{
"label": "November 10, 2015 Release",
"changes": [
"Fixing Babel integration to include polyfills"
]
},
{
"label": "November 1, 2015 Release",
"changes": [
"Switching from Compass to node-sass and Bourbon (no more need for Ruby)",
"Switching to Babel instead of es6ify",
"Improving sourcemap generation",
"Cleanup of the build process"
]
},
{
"label": "October 31, 2015 Release",
"changes": [
"Reducing file size for title font",
"Cleaning up gulpfile",
"Upgrading most dependencies",
"Switching to Handlebars for template rendering"
]
},
{
"label": "September 17, 2015 Release",
"changes": [
"Fixing styling of labels on repetitions",
"Fixing issue with vertical centering of alternation expressions that include empty expressions (see <a href=\"https://github.com/javallone/regexper-static/pull/16\">GitHub issue</a>)"
]
},
{
"label": "September 2, 2015 Release",
"changes": [
"Merging fix for error reporting from (see <a href=\"https://github.com/javallone/regexper-static/pull/15\">GitHub pull request</a>)"
]
},
{
"label": "July 5, 2015 Release",
"changes": [
"Updating Creative Commons license badge URL so it isn't pointing to a redirecting URL anymore"
]
},
{
"label": "June 22, 2015 Release",
"changes": [
"Tweaking buggy Firefox hash detection code based on JavaScript errors that were logged"
]
},
{
"label": "June 16, 2015 Release",
"changes": [
"Fixes issue with expressions containing a \"%\" not rendering in Firefox (see <a href=\"https://github.com/javallone/regexper-static/issues/12\">GitHub issue</a>)",
"Fixed rendering in IE that was causing \"--&gt;\" to display at the top of the page."
]
},
{
"label": "April 14, 2015 Release",
"changes": [
"Rendering speed improved. Most users will probably not see much improvement since logging data indicates that expressing rendering time is typically less than 1 second. Using the <a href=\"http://www.ex-parrot.com/pdw/Mail-RFC822-Address.html\">RFC822 email regular expression</a> though shows a rendering speed improvement from ~120 seconds down to ~80 seconds.",
"Fixing a bug that would only occur when attempting to render an expression while another is in the process of rendering"
]
},
{
"label": "March 14, 2015 Release",
"changes": [
"Removing use of Q for promises in favor of \"native\" ES6 promises (even though they aren't quite native everywhere yet)"
]
},
{
"label": "March 13, 2015 Release",
"changes": [
"Fixes bug with numbering of nested subexpressions (see <a href=\"https://github.com/javallone/regexper-static/issues/7\">GitHub issue</a>)"
]
},
{
"label": "February 11, 2015 Release",
"changes": [
"Various adjustments to analytics: tracking expression rendering time and JS errors",
"Escape sequences that match to a specific character now display their hexadecimal code (actually done on January 25, but I forgot to update the changelog)",
"Fixing styling issue with header links (see <a href=\"https://github.com/javallone/regexper-static/issues/5\">GitHub issue</a>)"
]
},
{
"label": "December 30, 2014 Release",
"changes": [
"Fixing bug that prevented rendering empty subexpressions",
"Fixing minor styling bug when permalink is disabled",
"Cleaning up some duplicated styles and JS"
]
},
{
"label": "December 29, 2014 Release",
"changes": [
"Tweaking analytics data to help with addressing issues in deployed code (work will likely continue on this)",
"Added progress bars on the documentation page",
"Removed the loading spinner everywhere",
"Animated the progress bars"
]
},
{
"label": "December 26, 2014 Release",
"changes": [
"Freshened up design",
"Multiline regular expression input field (press Shift-Enter to render)",
"Added a changelog",
"Added documentation",
"All parsing and rendering happens client-side (using <a href=\"http://canopy.jcoglan.com/\">Canopy</a> and <a href=\"http://snapsvg.io/\">Snap.svg</a>)",
"Added Download link (not available in older browsers)",
"Added display of regular expression flags (ignore case, global, multiline)",
"Added indicator of quantifier greedy-ness",
"Various improvements to parsing of regular expression",
"Rendering of a regular expression can be canceled by pressing Escape"
]
}
]
module.exports = new Date().toISOString();
module.exports.register = function(handlebars) {
handlebars.registerHelper('icon', function(selector, context) {
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);
};
{{#if gaPropertyId}}
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', '{{{gaPropertyId}}}', 'auto');
ga('send', 'pageview');
</script>
{{/if}}
<!DOCTYPE html>
<html>
<head>
<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>
<meta name="description" content="Regular expression visualizer using railroad diagrams" />
<meta name="viewport" content="width=device-width" />
<meta name="theme-color" content="#bada55" />
{{> "google_analytics"}}
<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}} -->
</head>
<body>
<header>
<div class="logo">
<h1><a href="/">Regexper</a></h1>
<!-- n. One who regexpes -->
<span>You thought you only had two problems&hellip;</span>
</div>
<nav>
<ul>
<li>
<a class="inline-icon" href="/changelog.html">{{icon "#list-rich"}}Changelog</a>
</li>
<li>
<a class="inline-icon" href="/documentation.html">{{icon "#document"}}Documentation</a>
</li>
<li>
<a class="inline-icon" href="https://github.com/javallone/regexper-static">{{icon "#code"}}Source on GitHub</a>
</li>
</ul>
</nav>
</header>
<main id="content">
{{#block "body"}}{{/block}}
</main>
<footer>
{{#block "footer"}}
<ul class="inline-list">
<li>Created by <a href="mailto:jeff.avallone@gmail.com">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>
{{> "sentry"}}
{{/block}}
</footer>
{{> "open_iconic"}}
</body>
</html>
<svg xmlns="http://www.w3.org/2000/svg" id="open-iconic">
<!-- These icon are from the Open Iconic project https://useiconic.com/open/ -->
<defs>
<g id="code">
<path d="M5 0l-3 6h1l3-6h-1zm-4 1l-1 2 1 2h1l-1-2 1-2h-1zm5 0l1 2-1 2h1l1-2-1-2h-1z" transform="translate(0 1)" />
</g>
<g id="data-transfer-download">
<path d="M3 0v3h-2l3 3 3-3h-2v-3h-2zm-3 7v1h8v-1h-8z" />
</g>
<g id="document">
<path d="M0 0v8h7v-4h-4v-4h-3zm4 0v3h3l-3-3zm-3 2h1v1h-1v-1zm0 2h1v1h-1v-1zm0 2h4v1h-4v-1z" />
</g>
<g id="link-intact">
<path d="M5.88.03c-.18.01-.36.03-.53.09-.27.1-.53.25-.75.47a.5.5 0 1 0 .69.69c.11-.11.24-.17.38-.22.35-.12.78-.07 1.06.22.39.39.39 1.04 0 1.44l-1.5 1.5c-.44.44-.8.48-1.06.47-.26-.01-.41-.13-.41-.13a.5.5 0 1 0-.5.88s.34.22.84.25c.5.03 1.2-.16 1.81-.78l1.5-1.5c.78-.78.78-2.04 0-2.81-.28-.28-.61-.45-.97-.53-.18-.04-.38-.04-.56-.03zm-2 2.31c-.5-.02-1.19.15-1.78.75l-1.5 1.5c-.78.78-.78 2.04 0 2.81.56.56 1.36.72 2.06.47.27-.1.53-.25.75-.47a.5.5 0 1 0-.69-.69c-.11.11-.24.17-.38.22-.35.12-.78.07-1.06-.22-.39-.39-.39-1.04 0-1.44l1.5-1.5c.4-.4.75-.45 1.03-.44.28.01.47.09.47.09a.5.5 0 1 0 .44-.88s-.34-.2-.84-.22z" />
</g>
<g id="list-rich">
<path d="M0 0v3h3v-3h-3zm4 0v1h4v-1h-4zm0 2v1h3v-1h-3zm-4 2v3h3v-3h-3zm4 0v1h4v-1h-4zm0 2v1h3v-1h-3z" />
</g>
<g id="warning">
<path d="M3.09 0c-.06 0-.1.04-.13.09l-2.94 6.81c-.02.05-.03.13-.03.19v.81c0 .05.04.09.09.09h6.81c.05 0 .09-.04.09-.09v-.81c0-.05-.01-.14-.03-.19l-2.94-6.81c-.02-.05-.07-.09-.13-.09h-.81zm-.09 3h1v2h-1v-2zm0 3h1v1h-1v-1z" />
</g>
</defs>
</svg>
{{#if sentryKey}}
<script src="https://cdn.ravenjs.com/3.17.0/raven.min.js" crossorigin="anonymous"></script>
<script>
Raven.config('{{{sentryKey}}}', {
whitelistUrls: [/https:\/\/(.*\.)?regexper\.com/]
}).install()
</script>
{{/if}}
<div class="svg">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
version="1.1">
<defs>
<style type="text/css">{{> svg_styles}}</style>
</defs>
<metadata>
<rdf:RDF>
<cc:License rdf:about="http://creativecommons.org/licenses/by/3.0/">
<cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction" />
<cc:permits rdf:resource="http://creativecommons.org/ns#Distribution" />
<cc:requires rdf:resource="http://creativecommons.org/ns#Notice" />
<cc:requires rdf:resource="http://creativecommons.org/ns#Attribution" />
<cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
</cc:License>
</rdf:RDF>
</metadata>
</svg>
</div>
<div class="progress">
<div style="width:0;"></div>
</div>
{
"name": "regexper",
"version": "1.0.0",
"description": "Regular expression visualization tool",
"description": "Regular expression visualization tool using railroad diagrams",
"homepage": "http://regexper.com",
"author": {
"name": "Jeffrey Avallone",
......@@ -10,48 +10,177 @@
"license": "MIT",
"private": true,
"scripts": {
"pretest": "jscs lib/ src/ spec/",
"test": "karma start --single-run",
"build": "gulp build",
"start": "gulp"
"start": "webpack-dev-server --config webpack.dev.js",
"start:prod": "run-s build start:http-server",
"start:http-server": "http-server -c0 ./build",
"build": "cross-env NODE_ENV=production run-s build:webpack:web build:webpack:prerender build:prerender",
"build:webpack:web": "webpack --config webpack.prod-web.js",
"build:webpack:prerender": "webpack --config webpack.prod-prerender.js",
"build:prerender": "node ./script/__build__/prerender.js",
"deploy": "node ./script/s3-upload.js deploy.config.js",
"test": "run-s test:lint 'test:unit --coverage'",
"test:unit": "cross-env NODE_ENV=production jest",
"test:lint": "eslint --ignore-path .gitignore .",
"test:watch": "yarn test:unit --watch",
"test:bundle-analyzer": "cross-env NODE_ENV=production webpack --config webpack.bundle-analyzer.js",
"i18n:scrub": "node ./script/i18n-scrub.js",
"precommit": "run-s test:lint"
},
"browserslist": [
">1%",
"not ie < 11"
],
"babel": {
"presets": [
"env",
"react"
],
"plugins": [
"transform-runtime",
"transform-class-properties",
"transform-object-rest-spread",
"transform-decorators-legacy",
"syntax-dynamic-import"
]
},
"postcss": {
"plugins": {
"postcss-import": {},
"postcss-cssnext": {
"features": {
"rem": false
}
}
}
},
"jest": {
"clearMocks": true,
"setupTestFrameworkScriptFile": "<rootDir>/src/setup/jest.js",
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"modulePaths": [
"src",
"node_modules"
],
"moduleNameMapper": {
"\\.svg$": "__mocks__/svgMock.js",
"\\.css$": "identity-obj-proxy"
},
"collectCoverageFrom": [
"src/**/*.js",
"!src/i18n.js",
"!src/prerender.js",
"!src/setup/service-worker.js",
"!src/setup/jest.js",
"!src/pages/**/config.js",
"!src/pages/**/browser.js"
],
"coverageReporters": [
"text-summary",
"html"
]
},
"eslintConfig": {
"env": {
"browser": true,
"es6": true,
"node": true,
"jest/globals": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parser": "babel-eslint",
"parserOptions": {
"sourceType": "module"
},
"plugins": [
"react",
"jest"
],
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
},
"dependencies": {
"@alienfast/i18next-loader": "^1.0.14",
"aws-sdk": "^2.247.1",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-jest": "^23.0.1",
"babel-loader": "^7.1.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"cheerio": "^1.0.0-rc.2",
"colors": "^1.1.2",
"copy-webpack-plugin": "^4.4.1",
"cross-env": "^5.1.3",
"css-loader": "^0.28.9",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.1",
"eslint": "^4.17.0",
"eslint-plugin-jest": "^21.8.0",
"eslint-plugin-react": "^7.6.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"feather-icons": "^4.5.0",
"html-webpack-plugin": "^3.0.0",
"i18next": "^11.3.2",
"i18next-browser-languagedetector": "^2.1.0",
"identity-obj-proxy": "^3.0.0",
"immutable": "^3.8.2",
"jest": "^23.1.0",
"mime-types": "^2.1.18",
"npm-run-all": "^4.1.2",
"postcss-cssnext": "^3.1.0",
"postcss-import": "^11.1.0",
"postcss-loader": "^2.1.0",
"raven-js": "^3.22.2",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-ga": "^2.4.1",
"react-i18next": "^7.3.6",
"react-test-renderer": "^16.3.0",
"recursive-readdir": "^2.2.2",
"style-loader": "^0.21.0",
"svg-react-loader": "^0.4.5",
"uglifyjs-webpack-plugin": "^1.1.8",
"url-search-params": "^0.10.0",
"webapp-webpack-plugin": "^2.1.0",
"webpack": "^4.1.1",
"webpack-cli": "^3.0.1",
"webpack-merge": "^4.1.1",
"webpack-node-externals": "^1.6.0",
"workbox-webpack-plugin": "^3.0.1"
},
"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",
"canopy": "^0.2.0",
"css-loader": "^0.28.4",
"docco": "^0.7.0",
"extract-loader": "^1.0.0",
"file-loader": "^0.11.2",
"folder-toc": "^0.1.0",
"gulp": "^3.8.10",
"gulp-connect": "^5.0.0",
"gulp-docco": "0.0.4",
"gulp-front-matter": "^1.3.0",
"gulp-hb": "^6.0.2",
"gulp-help": "^1.6.1",
"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",
"jasmine-core": "^2.4.1",
"jscs": "^3.0.7",
"karma": "^1.1.2",
"karma-firefox-launcher": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-notify-reporter": "^1.0.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.4",
"lodash": "^4.6.1",
"node-bourbon": "^4.2.3",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"snapsvg": "^0.5.1",
"watchify": "^3.7.0",
"webpack": "^3.4.1"
"http-server": "^0.11.1",
"husky": "^0.14.3",
"js-yaml": "^3.10.0",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-dev-server": "^3.1.1"
}
}
......@@ -4,7 +4,7 @@
# TEAM
Creator: Jeff Avallone
Site: http://github.com/javallone
Site: http://gitlab.com/javallone
Twitter: @javallone
# THANKS
......@@ -13,4 +13,4 @@
# TECHNOLOGY COLOPHON
HTML5, CSS3, SVG, Sass, Open Iconic
HTML5, CSS3, SVG, React, Feather Icons
const util = require('util');
const path = require('path');
const fs = require('fs');
const yaml = require('js-yaml');
const colors = require('colors/safe');
const readdir = util.promisify(fs.readdir);
const readFile = util.promisify(fs.readFile);
const writeFile = util.promisify(fs.writeFile);
const localesDir = path.resolve(__dirname, '../src/locales');
const loadLocales = async () => {
const languages = (await readdir(localesDir)).filter(name => name !== 'index.js');
let localeData = {};
await Promise.all(languages.map(async lang => {
const langDir = path.resolve(localesDir, lang);
const namespaces = (await readdir(langDir))
.filter(file => /\.yaml$/.test(file));
localeData[lang] = {};
await Promise.all(namespaces.map(async ns => {
const nsFile = path.resolve(langDir, ns);
localeData[lang][ns.replace('.yaml', '')] = yaml.safeLoad(await readFile(nsFile));
}));
}));
return localeData;
};
const saveLocales = async locales => {
await Promise.all(Object.keys(locales).map(async langName => {
const lang = locales[langName];
await Promise.all(Object.keys(lang).map(async nsName => {
const nsFile = path.resolve(localesDir, langName, `${ nsName }.yaml`);
const yamlDump = yaml.safeDump(lang[nsName], {
sortKeys: true
});
await writeFile(nsFile, yamlDump);
}));
}));
};
loadLocales()
.then(async locales => {
const sourceLocale = locales.en.translation;
const requiredKeys = Object.keys(sourceLocale);
const languages = Object.keys(locales).filter(lang => lang !== 'en');
languages.forEach(langName => {
const lang = locales[langName];
const presentKeys = Object.keys(lang).filter(nsName => nsName !== 'missing').reduce((list, nsName) => {
return list.concat(Object.keys(lang[nsName]));
}, []);
const missingKeys = requiredKeys.filter(key => !presentKeys.includes(key));
const extraKeys = presentKeys.filter(key => !requiredKeys.includes(key));
if (!lang.translation) {
lang.translation = {};
}
if (!lang.missing) {
lang.missing = {};
}
missingKeys.forEach(key => {
if (lang.missing[key]) {
return;
}
console.log(colors.yellow.bold('MISSING:'), `${ langName } needs value for "${ colors.bold(key) }".`); //eslint-disable-line no-console
lang.missing[key] = sourceLocale[key];
});
presentKeys.forEach(key => {
if (!lang.missing[key]) {
return;
}
console.log(colors.yellow.bold('DEFINED:'), `Removing "${ colors.bold(key) }" from ${ langName}.missing. It is defined elsewhere.`); // eslint-disable-line no-console
delete lang.missing[key];
});
extraKeys.forEach(key => {
console.log(colors.yellow.bold('EXTRA:'), `${ langName } has extra key for "${ colors.bold(key) }". It should be removed.`); // eslint-disable-line no-console
});
});
return locales;
})
.then(saveLocales)
.then(() => {
console.log('Done updating locales'); // eslint-disable-line no-console
})
.catch(e => {
console.error(colors.red.bold('FAILED:'), e); // eslint-disable-line no-console
process.exit(1);
});
// NOTE: This script *MUST* be built with webpack since it requires React
// components. The script is built and run as part of `yarn build`
import React from 'react';
import { renderToString } from 'react-dom/server';
import fs from 'fs';
import util from 'util';
import cheerio from 'cheerio';
import colors from 'colors/safe';
import 'i18n';
const readdir = util.promisify(fs.readdir);
const readFile = util.promisify(fs.readFile);
const writeFile = util.promisify(fs.writeFile);
readdir('./src/pages')
.then(pages => (
Promise.all(pages.map(async page => {
const Component = (await import(`pages/${ page }/Component`)).default;
const pagePath = `./build/${ page }.html`;
const markup = cheerio.load(await readFile(pagePath));
markup('#root').html(renderToString(<Component/>));
await writeFile(pagePath, markup.html());
console.log(colors.green.bold('PRERENDERED:'), `${ page }.html`); // eslint-disable-line no-console
}))
))
.then(() => console.log('Done prerendering')) // eslint-disable-line no-console
.catch(e => {
console.error(colors.red.bold('FAIL:'), e); // eslint-disable-line no-console
process.exit(1);
});
/* eslint-disable no-console */
const path = require('path');
const fs = require('fs');
const colors = require('colors/safe');
const readdir = require('recursive-readdir');
const AWS = require('aws-sdk');
const mime = require('mime-types');
const s3 = new AWS.S3();
const cloudFront = new AWS.CloudFront();
const config = require(path.resolve(process.argv[2]));
const configFor = path => {
const { match, ...conf } = config.paths.find(conf => conf.match.test(path)); // eslint-disable-line no-unused-vars
return {
ContentType: mime.lookup(path) || 'application/octet-stream',
...conf
};
};
const bucketContents = s3.listObjectsV2({
Bucket: config.s3Bucket
}).promise()
.then(result => {
return result.Contents.map(item => item.Key);
})
.catch(err => {
console.error(colors.red.bold('Failed to fetch bucket contents:'), err);
process.exit(1);
});
const uploadDetails = readdir(config.deployFrom)
.then(paths => paths.map(p => {
const key = path.relative(config.deployFrom, p);
return {
Key: key,
Body: fs.createReadStream(p),
...configFor(key)
};
}))
.catch(err => {
console.error(colors.red.bold('Error:'), err);
process.exit(1);
});
Promise.all([bucketContents, uploadDetails]).then(([bucket, upload]) => {
const deleteKeys = bucket.filter(key => !upload.find(conf => key === conf.Key));
const uploadPromises = upload.map(params => {
console.log(`Starting upload for ${ params.Key }`);
return s3.upload({
Bucket: config.s3Bucket,
...params
}).promise()
.then(() => console.log(colors.green(`${ params.Key } successful`)))
.catch(err => {
console.error(colors.red.bold(`${ params.Key } failed`));
return Promise.reject(err);
});
});
return Promise.all(uploadPromises)
.then(() => {
if (deleteKeys.length === 0) {
console.log('No files to delete');
return Promise.resolve();