Fresh start

All code moved over to use gatsby.js & client-side technologies (except a cloud function or two)

.eslintignore

@@ -0,0 +1,5 @@
+src/images/*
+**/*.json
+**/*.lock
+lib/build/*
+node_modules/

.eslintrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  globals: {
+    __PATH_PREFIX__: true,
+  },
+  extends: `react-app`,
+  rules: {
+    "import/no-anonymous-default-export": "off",
+  },
+}

.gitignore

@@ -1,28 +1,71 @@
-# OS or Editor folders
-.DS_Store
-Thumbs.db
-.cache
-.idea
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
 
-# Sublime editor files
-*.sublime-project
-*.sublime-workspace
+# node-waf configuration
+.lock-wscript
 
-# Byte-compiled / optimized / DLL files
-__pycache__/
-*.py[cod]
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
 
-# npm stuff
-node_modules
-npm-debug.log
+# Dependency directories
+node_modules/
+jspm_packages/
 
-# python modules
-python_modules
+# Typescript v1 declaration files
+typings/
 
-# Built files
-public/
-build/
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variable files
+.env*
+
+# gatsby files
+.cache/
+public
+
+# Mac files
+.DS_Store
 
-# Private keys
-service-account-key.json
-bitly_api_key.cfg
+# Yarn
+yarn-error.log
+.pnp/
+.pnp.js
+# Yarn Integrity file
+.yarn-integrity
+/runtime.json
+.firebase/

.prettierignore

@@ -0,0 +1,4 @@
+.cache
+package.json
+package-lock.json
+public

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "arrowParens": "avoid",
+  "semi": false
+}

CONTRIBUTING.md

@@ -2,48 +2,25 @@
 
 Want to contribute? Great! First, read this page (including the small print at the end).
 
-
 ## Technology overview
 
-The Demos & Tools site back end runs on [Google App Engine for Python](https://cloud.google.com/appengine/docs/python/) using the [webapp2](https://webapp-improved.appspot.com/) framework and [Jinja2](http://jinja.pocoo.org/) templates. Its front-end code is written in JavaScript (ES2015) and [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html), compiled to ES5 via [Babel](https://babeljs.io/), and built using [Webpack](https://webpack.github.io/) and [Gulp](http://gulpjs.com/).
-
-### Templates
-
-The templates get their data primarily from the `meta.yaml` file. It contains all of the demo/tool names as well as site-wide information and common links. The navigation is populated from the list of projects, and each project can optionally have a list of pages.
-
-### Routes / request handlers
-
-The `BaseHandler` class handles all requests that do not require any back-end logic and fit into the `<project>/<page>` hierarchy. Demos/tools that require additional logic can create their own handlers and add them to the routes in `lib/app.`
-
-### Authentication
-
-Authorization is handled site-wide via the [Embed API](https://developers.google.com/analytics/devguides/reporting/embed/), and both client-side and server-side authorization is supported. Demos/tools that require authorization can either extend the `user-auth.html` template or the `server-auth.html` template. Server-side authorization grants read-only API access to the Demos & Tools appspot.com view.
-
-### JavaScript
-
-The JavaScript build system is configured to generate several JavaScript files: one file called `app.js`, which includes all modules common to the entire site, and several project-specific files that contain only the modules referenced by that particular project.
-
-The dependency tree is automatically determined by Webpack, so you don't have to worry about it. Any file matching `src/javascript/**/index.js` will generate its own output file and you can reference it in the templates.
+The Demos & Tools site back end runs on [Gatsby](https://www.gatsbyjs.org/) which is a React-based, GraphQL powered static site generator. Gatsby will transform the demos into directories with single HTML files and static assets.
 
 ### CSS
 
-The CSS is compiled using [PostCSS](https://github.com/postcss/postcss) via [CSSNext](http://cssnext.io/) and roughly follows the [SuitCSS](http://suitcss.github.io/) methodology. New demos/tools that require additional styling should try to use or extend existing styles before creating their own one-off styles.
+The CSS is using [Material UI](https://material-ui.com/styles). Text specifically should be handled with [Typography](https://material-ui.com/components/typography/).
 
 ### Images
 
-Source images should be at 2x resolution and have their filenames end with `-2x.png`. The build system automatically creates non-2x versions of the files without the `-2x` in the filename. `<img>` elements in the templates should use the [`srcset`](https://webkit.org/demos/srcset/) attribute to indicate which version of the image to use.
-
+Source images should be at 2x resolution and have their filenames end with `-2x.png`. Images should be placed in the `/images` folder. [Gatsby-Image](https://www.gatsbyjs.org/packages/gatsby-image/) handles images with [GraphQL](https://www.gatsbyjs.org/docs/graphql/)
 
 ## Adding a new demo/tool
 
 New demos or tools can be created by following these steps:
 
-1. Add the demo/tool's project information to `meta.yaml`. Refer to the existing entires to see what kind of information needs to be included.
-2. Create a template file at `templates/<project-slug>/index.html`, where `<project-slug>` is the value from `meta.yaml`. If the project has pages, create additional files at `templates/<project-slug>/<page-slug>.html`. Refer to the `templates/embed-api` directory for an example of a project that contains pages.
-3. If the demo/tool does not require any back-end functionality then it does not need its own request handler. Adding its data to the `meta.yaml` file is sufficient to have the default handler automatically detect it. If it does require back-end functionality, refer to `lib/app` and `lib/handlers/server_side_auth.py` for an example of how add a new request handler for a specific project.
-4. If the demo/tool requires JavaScript, add a new JavaScript entry file at `src/javascript/<project-name>/index.js`. Any dependencies you need should be imported at the top of this file (refer to `lib/javascript/hit-builder/index.js` for an example). The build process will automatically detect new entry points and create a corresponding output file at `public/javascript/<project-slug>.js` that you can reference from your template in the `foot_scripts` block.
-5. If the demo/tool needs images, create a 2x-resolution image and save it to the `src/images` directory. Images with the `-2x.png` suffix are automatically converted to their `1x` equivalents at build time and output to `public/images`. To reference the image in a template, refer to `template/spreadsheet-add-on/index.html` for an example.
-
+1. Add a new folder to `/pages` with the title of the demo. Within that folder, add JSX files related to the demo, including `index.tsx`
+2. If the demo/tool needs images, create a 2x-resolution image and save it to the `/images` directory.
+3. If the demo/tool links to any URLs, place URL constants in `constants.ts`
 
 ## Legal
 

LICENSE

@@ -1,4 +1,4 @@
-Copyright 2014 Google Inc. All rights reserved.
+Copyright 2020 Google Inc. All rights reserved.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.