Permalink
Please sign in to comment.
Showing
with
1,994 additions
and 0 deletions.
- +15 โ0 .gitignore
- +14 โ0 README.md
- +28 โ0 config/env.js
- +1 โ0 config/jest/CSSStub.js
- +1 โ0 config/jest/FileStub.js
- +57 โ0 config/paths.js
- +14 โ0 config/polyfills.js
- +197 โ0 config/webpack.config.dev.js
- +238 โ0 config/webpack.config.prod.js
- +91 โ0 package.json
- BIN public/bg.png
- +30 โ0 public/index.html
- BIN public/playfair/playfairdisplay-bold-webfont.woff
- BIN public/playfair/playfairdisplay-bold-webfont.woff2
- BIN public/playfair/playfairdisplay-bolditalic-webfont.woff
- BIN public/playfair/playfairdisplay-bolditalic-webfont.woff2
- BIN public/playfair/playfairdisplay-italic-webfont.woff
- BIN public/playfair/playfairdisplay-italic-webfont.woff2
- BIN public/playfair/playfairdisplay-regular-webfont.woff
- BIN public/playfair/playfairdisplay-regular-webfont.woff2
- +48 โ0 public/playfair/stylesheet.css
- +22 โ0 sample-savefile.json
- +205 โ0 scripts/build.js
- +268 โ0 scripts/start.js
- +19 โ0 scripts/test.js
- +31 โ0 src/About.js
- +72 โ0 src/Article.js
- +185 โ0 src/Editor.js
- +30 โ0 src/Menu.js
- +169 โ0 src/Saved.js
- +231 โ0 src/index.css
- +28 โ0 src/index.js
15
.gitignore
| @@ -0,0 +1,15 @@ | ||
| +# See http://help.github.com/ignore-files/ for more about ignoring files. | ||
| + | ||
| +# dependencies | ||
| +node_modules | ||
| + | ||
| +# testing | ||
| +coverage | ||
| + | ||
| +# production | ||
| +build | ||
| + | ||
| +# misc | ||
| +.DS_Store | ||
| +.env | ||
| +npm-debug.log |
14
README.md
| @@ -0,0 +1,14 @@ | ||
| +# Write | ||
| + | ||
| +A free, web-based writing app based on [Flowstate](http://flowstate.com). Built using React. | ||
| + | ||
| +The premise is simple. You set a duration during which you write; within that duration, if you stop typing for more than 5 seconds, all your progress is lost. | ||
| + | ||
| +The typical use case of Flowstate is to avoid writer's block and get something down in writing. Personally, I've been using it for journalling; it's been a good exercise getting all of my thoughts, latent or prominent, down in writing. The duration has also helped me keep a consistent routine; if I know it's only going to be fifteen minutes every session, it's easier to sit down and get through it. | ||
| + | ||
| +## Roadmap | ||
| + | ||
| +- [ ] Refactoring storage from localStorage to a backwards-compatible ORM-esque system. | ||
| +- [ ] Refactoring timekeeping with system time instead of setTimeout. | ||
| +- [ ] Setting up benchmarking + optimizing for speed. | ||
| +- [ ] Packaging as an Electron (Desktop) app. |
| @@ -0,0 +1,28 @@ | ||
| +// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be | ||
| +// injected into the application via DefinePlugin in Webpack configuration. | ||
| + | ||
| +var REACT_APP = /^REACT_APP_/i; | ||
| + | ||
| +function getClientEnvironment(publicUrl) { | ||
| + var processEnv = Object | ||
| + .keys(process.env) | ||
| + .filter(key => REACT_APP.test(key)) | ||
| + .reduce((env, key) => { | ||
| + env[key] = JSON.stringify(process.env[key]); | ||
| + return env; | ||
| + }, { | ||
| + // Useful for determining whether weโre running in production mode. | ||
| + // Most importantly, it switches React into the correct mode. | ||
| + 'NODE_ENV': JSON.stringify( | ||
| + process.env.NODE_ENV || 'development' | ||
| + ), | ||
| + // Useful for resolving the correct path to static assets in `public`. | ||
| + // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />. | ||
| + // This should only be used as an escape hatch. Normally you would put | ||
| + // images into the `src` and `import` them in code to get their paths. | ||
| + 'PUBLIC_URL': JSON.stringify(publicUrl) | ||
| + }); | ||
| + return {'process.env': processEnv}; | ||
| +} | ||
| + | ||
| +module.exports = getClientEnvironment; |
| @@ -0,0 +1 @@ | ||
| +module.exports = {}; |
| @@ -0,0 +1 @@ | ||
| +module.exports = "test-file-stub"; |
| @@ -0,0 +1,57 @@ | ||
| +var path = require('path'); | ||
| +var fs = require('fs'); | ||
| + | ||
| +// Make sure any symlinks in the project folder are resolved: | ||
| +// https://github.com/facebookincubator/create-react-app/issues/637 | ||
| +var appDirectory = fs.realpathSync(process.cwd()); | ||
| +function resolveApp(relativePath) { | ||
| + return path.resolve(appDirectory, relativePath); | ||
| +} | ||
| + | ||
| +// We support resolving modules according to `NODE_PATH`. | ||
| +// This lets you use absolute paths in imports inside large monorepos: | ||
| +// https://github.com/facebookincubator/create-react-app/issues/253. | ||
| + | ||
| +// It works similar to `NODE_PATH` in Node itself: | ||
| +// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders | ||
| + | ||
| +// We will export `nodePaths` as an array of absolute paths. | ||
| +// It will then be used by Webpack configs. | ||
| +// Jest doesnโt need this because it already handles `NODE_PATH` out of the box. | ||
| + | ||
| +var nodePaths = (process.env.NODE_PATH || '') | ||
| + .split(process.platform === 'win32' ? ';' : ':') | ||
| + .filter(Boolean) | ||
| + .map(resolveApp); | ||
| + | ||
| +// config after eject: we're in ./config/ | ||
| +module.exports = { | ||
| + appBuild: resolveApp('build'), | ||
| + appPublic: resolveApp('public'), | ||
| + appHtml: resolveApp('public/index.html'), | ||
| + appIndexJs: resolveApp('src/index.js'), | ||
| + appPackageJson: resolveApp('package.json'), | ||
| + appSrc: resolveApp('src'), | ||
| + testsSetup: resolveApp('src/setupTests.js'), | ||
| + appNodeModules: resolveApp('node_modules'), | ||
| + ownNodeModules: resolveApp('node_modules'), | ||
| + nodePaths: nodePaths | ||
| +}; | ||
| + | ||
| + | ||
| + | ||
| +// config before publish: we're in ./packages/react-scripts/config/ | ||
| +if (__dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1) { | ||
| + module.exports = { | ||
| + appBuild: resolveOwn('../../../build'), | ||
| + appPublic: resolveOwn('../template/public'), | ||
| + appHtml: resolveOwn('../template/public/index.html'), | ||
| + appIndexJs: resolveOwn('../template/src/index.js'), | ||
| + appPackageJson: resolveOwn('../package.json'), | ||
| + appSrc: resolveOwn('../template/src'), | ||
| + testsSetup: resolveOwn('../template/src/setupTests.js'), | ||
| + appNodeModules: resolveOwn('../node_modules'), | ||
| + ownNodeModules: resolveOwn('../node_modules'), | ||
| + nodePaths: nodePaths | ||
| + }; | ||
| +} |
| @@ -0,0 +1,14 @@ | ||
| +if (typeof Promise === 'undefined') { | ||
| + // Rejection tracking prevents a common issue where React gets into an | ||
| + // inconsistent state due to an error, but it gets swallowed by a Promise, | ||
| + // and the user has no idea what causes React's erratic future behavior. | ||
| + require('promise/lib/rejection-tracking').enable(); | ||
| + window.Promise = require('promise/lib/es6-extensions.js'); | ||
| +} | ||
| + | ||
| +// fetch() polyfill for making API calls. | ||
| +require('whatwg-fetch'); | ||
| + | ||
| +// Object.assign() is commonly used with React. | ||
| +// It will use the native implementation if it's present and isn't buggy. | ||
| +Object.assign = require('object-assign'); |
| @@ -0,0 +1,197 @@ | ||
| +var path = require('path'); | ||
| +var autoprefixer = require('autoprefixer'); | ||
| +var webpack = require('webpack'); | ||
| +var findCacheDir = require('find-cache-dir'); | ||
| +var HtmlWebpackPlugin = require('html-webpack-plugin'); | ||
| +var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); | ||
| +var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); | ||
| +var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); | ||
| +var getClientEnvironment = require('./env'); | ||
| +var paths = require('./paths'); | ||
| + | ||
| +// Webpack uses `publicPath` to determine where the app is being served from. | ||
| +// In development, we always serve from the root. This makes config easier. | ||
| +var publicPath = '/'; | ||
| +// `publicUrl` is just like `publicPath`, but we will provide it to our app | ||
| +// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. | ||
| +// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. | ||
| +var publicUrl = ''; | ||
| +// Get environment variables to inject into our app. | ||
| +var env = getClientEnvironment(publicUrl); | ||
| + | ||
| +// This is the development configuration. | ||
| +// It is focused on developer experience and fast rebuilds. | ||
| +// The production configuration is different and lives in a separate file. | ||
| +module.exports = { | ||
| + // This makes the bundle appear split into separate modules in the devtools. | ||
| + // We don't use source maps here because they can be confusing: | ||
| + // https://github.com/facebookincubator/create-react-app/issues/343#issuecomment-237241875 | ||
| + // You may want 'cheap-module-source-map' instead if you prefer source maps. | ||
| + devtool: 'eval', | ||
| + // These are the "entry points" to our application. | ||
| + // This means they will be the "root" imports that are included in JS bundle. | ||
| + // The first two entry points enable "hot" CSS and auto-refreshes for JS. | ||
| + entry: [ | ||
| + // Include an alternative client for WebpackDevServer. A client's job is to | ||
| + // connect to WebpackDevServer by a socket and get notified about changes. | ||
| + // When you save a file, the client will either apply hot updates (in case | ||
| + // of CSS changes), or refresh the page (in case of JS changes). When you | ||
| + // make a syntax error, this client will display a syntax error overlay. | ||
| + // Note: instead of the default WebpackDevServer client, we use a custom one | ||
| + // to bring better experience for Create React App users. You can replace | ||
| + // the line below with these two lines if you prefer the stock client: | ||
| + // require.resolve('webpack-dev-server/client') + '?/', | ||
| + // require.resolve('webpack/hot/dev-server'), | ||
| + require.resolve('react-dev-utils/webpackHotDevClient'), | ||
| + // We ship a few polyfills by default: | ||
| + require.resolve('./polyfills'), | ||
| + // Finally, this is your app's code: | ||
| + paths.appIndexJs | ||
| + // We include the app code last so that if there is a runtime error during | ||
| + // initialization, it doesn't blow up the WebpackDevServer client, and | ||
| + // changing JS code would still trigger a refresh. | ||
| + ], | ||
| + output: { | ||
| + // Next line is not used in dev but WebpackDevServer crashes without it: | ||
| + path: paths.appBuild, | ||
| + // Add /* filename */ comments to generated require()s in the output. | ||
| + pathinfo: true, | ||
| + // This does not produce a real file. It's just the virtual path that is | ||
| + // served by WebpackDevServer in development. This is the JS bundle | ||
| + // containing code from all our entry points, and the Webpack runtime. | ||
| + filename: 'static/js/bundle.js', | ||
| + // This is the URL that app is served from. We use "/" in development. | ||
| + publicPath: publicPath | ||
| + }, | ||
| + resolve: { | ||
| + // This allows you to set a fallback for where Webpack should look for modules. | ||
| + // We read `NODE_PATH` environment variable in `paths.js` and pass paths here. | ||
| + // We use `fallback` instead of `root` because we want `node_modules` to "win" | ||
| + // if there any conflicts. This matches Node resolution mechanism. | ||
| + // https://github.com/facebookincubator/create-react-app/issues/253 | ||
| + fallback: paths.nodePaths, | ||
| + // These are the reasonable defaults supported by the Node ecosystem. | ||
| + // We also include JSX as a common component filename extension to support | ||
| + // some tools, although we do not recommend using it, see: | ||
| + // https://github.com/facebookincubator/create-react-app/issues/290 | ||
| + extensions: ['.js', '.json', '.jsx', ''], | ||
| + alias: { | ||
| + // Support React Native Web | ||
| + // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ | ||
| + 'react-native': 'react-native-web' | ||
| + } | ||
| + }, | ||
| + | ||
| + module: { | ||
| + // First, run the linter. | ||
| + // It's important to do this before Babel processes the JS. | ||
| + preLoaders: [ | ||
| + { | ||
| + test: /\.(js|jsx)$/, | ||
| + loader: 'eslint', | ||
| + include: paths.appSrc, | ||
| + } | ||
| + ], | ||
| + loaders: [ | ||
| + // Process JS with Babel. | ||
| + { | ||
| + test: /\.(js|jsx)$/, | ||
| + include: paths.appSrc, | ||
| + loader: 'babel', | ||
| + query: { | ||
| + | ||
| + // This is a feature of `babel-loader` for webpack (not Babel itself). | ||
| + // It enables caching results in ./node_modules/.cache/react-scripts/ | ||
| + // directory for faster rebuilds. We use findCacheDir() because of: | ||
| + // https://github.com/facebookincubator/create-react-app/issues/483 | ||
| + cacheDirectory: findCacheDir({ | ||
| + name: 'react-scripts' | ||
| + }) | ||
| + } | ||
| + }, | ||
| + // "postcss" loader applies autoprefixer to our CSS. | ||
| + // "css" loader resolves paths in CSS and adds assets as dependencies. | ||
| + // "style" loader turns CSS into JS modules that inject <style> tags. | ||
| + // In production, we use a plugin to extract that CSS to a file, but | ||
| + // in development "style" loader enables hot editing of CSS. | ||
| + { | ||
| + test: /\.css$/, | ||
| + loader: 'style!css?importLoaders=1!postcss' | ||
| + }, | ||
| + // JSON is not enabled by default in Webpack but both Node and Browserify | ||
| + // allow it implicitly so we also enable it. | ||
| + { | ||
| + test: /\.json$/, | ||
| + loader: 'json' | ||
| + }, | ||
| + // "file" loader makes sure those assets get served by WebpackDevServer. | ||
| + // When you `import` an asset, you get its (virtual) filename. | ||
| + // In production, they would get copied to the `build` folder. | ||
| + { | ||
| + test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/, | ||
| + loader: 'file', | ||
| + query: { | ||
| + name: 'static/media/[name].[hash:8].[ext]' | ||
| + } | ||
| + }, | ||
| + // "url" loader works just like "file" loader but it also embeds | ||
| + // assets smaller than specified size as data URLs to avoid requests. | ||
| + { | ||
| + test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/, | ||
| + loader: 'url', | ||
| + query: { | ||
| + limit: 10000, | ||
| + name: 'static/media/[name].[hash:8].[ext]' | ||
| + } | ||
| + } | ||
| + ] | ||
| + }, | ||
| + | ||
| + // We use PostCSS for autoprefixing only. | ||
| + postcss: function() { | ||
| + return [ | ||
| + autoprefixer({ | ||
| + browsers: [ | ||
| + '>1%', | ||
| + 'last 4 versions', | ||
| + 'Firefox ESR', | ||
| + 'not ie < 9', // React doesn't support IE8 anyway | ||
| + ] | ||
| + }), | ||
| + ]; | ||
| + }, | ||
| + plugins: [ | ||
| + // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.: | ||
| + // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> | ||
| + // In development, this will be an empty string. | ||
| + new InterpolateHtmlPlugin({ | ||
| + PUBLIC_URL: publicUrl | ||
| + }), | ||
| + // Generates an `index.html` file with the <script> injected. | ||
| + new HtmlWebpackPlugin({ | ||
| + inject: true, | ||
| + template: paths.appHtml, | ||
| + }), | ||
| + // Makes some environment variables available to the JS code, for example: | ||
| + // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`. | ||
| + new webpack.DefinePlugin(env), | ||
| + // This is necessary to emit hot updates (currently CSS only): | ||
| + new webpack.HotModuleReplacementPlugin(), | ||
| + // Watcher doesn't work well if you mistype casing in a path so we use | ||
| + // a plugin that prints an error when you attempt to do this. | ||
| + // See https://github.com/facebookincubator/create-react-app/issues/240 | ||
| + new CaseSensitivePathsPlugin(), | ||
| + // If you require a missing module and then `npm install` it, you still have | ||
| + // to restart the development server for Webpack to discover it. This plugin | ||
| + // makes the discovery automatic so you don't have to restart. | ||
| + // See https://github.com/facebookincubator/create-react-app/issues/186 | ||
| + new WatchMissingNodeModulesPlugin(paths.appNodeModules) | ||
| + ], | ||
| + // Some libraries import Node modules but don't use them in the browser. | ||
| + // Tell Webpack to provide empty mocks for them so importing them works. | ||
| + node: { | ||
| + fs: 'empty', | ||
| + net: 'empty', | ||
| + tls: 'empty' | ||
| + } | ||
| +}; |
Oops, something went wrong.
0 comments on commit
32d77fb