Merge pull request #20 from AmruthPillai/feature/documentation

Feature: Revised Documentation

.firebaserc

@@ -1,5 +1,17 @@
 {
   "projects": {
     "default": "rx-resume"
+  },
+  "targets": {
+    "rx-resume": {
+      "hosting": {
+        "app": [
+          "rx-resume"
+        ],
+        "docs": [
+          "docs-rx-resume"
+        ]
+      }
+    }
   }
-}
+}

.gitignore

@@ -17,6 +17,9 @@
 # tailwind
 tailwind.css
 
+# vuepress
+docs/.vuepress/dist
+
 # misc
 .DS_Store
 .env.local

README.md

@@ -2,106 +2,14 @@
 
 # Reactive Resume
 
-A one-of-a-kind resume builder that keeps your privacy in mind,
-completely secure, customizable, portable, open-source, and free forever.
-Try it out today!
-
-**Visit https://rx-resume.web.app to build your resume!**
-
 ![Build and Deploy](https://github.com/AmruthPillai/Reactive-Resume/workflows/Build%20and%20Deploy/badge.svg)
-![Dependencies](https://david-dm.org/AmruthPillai/Reactive-Resume.svg)
-[![Code Style](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)
+![Code Style](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)
 ![GitHub last commit](https://img.shields.io/github/last-commit/AmruthPillai/Reactive-Resume)
 ![GitHub](https://img.shields.io/github/license/AmruthPillai/Reactive-Resume)
 ![Uptime Robot status](https://img.shields.io/uptimerobot/status/m784631082-7c9a2e95377145a9cbaadc18)
 
-## I'd like to donate, how do I do that?
+#### A Free and Open-Source Resume Builder That Respects Your Privacy
 
-I've been getting close to my limit on hosting at Firebase and I would like to sustain this for as long as possible. Please sponsor the project, as little as possible, so that it would keep the website running. Please reach out to me on my email (given below) if you would like to donate.
+Welcome to the front page of **Reactive Resume**, a free and open-source Resume Builder web app that focuses on one thing, **Privacy**. And also few other important features such as minimalistic UI/UX, customizability, portability, regularly updated templates, etc. But the important thing is that, your personal data is yours alone.
 
-<img src="https://i.imgur.com/EF0CaLH.png" width="400px" /> 
-
-Thank you so much :)
-
-## Do you have a demo?
-
-Why yes, I do! Click the thumbnail below to watch the app in action.
-
-[![Demo Video of Reactive Resume](http://img.youtube.com/vi/4OM0LEPzDO8/0.jpg)](http://www.youtube.com/watch?v=4OM0LEPzDO8 "Reactive Resume")
-
-## What's so special about it?
-
-| Feature | Description |
-| ------- | ----------- |
-| **Secure** | It is entirely secure, as in, your information never leaves the browser, powered by web technologies (HTML5 Local Storage API) that allow for data to be stored locally and quickly. |
-| **Offline** | The app is a PWA and also has no connection to any servers, thus keeping it entirely offline. It survives refreshes, disconnections, and can also be exported or imported through JSON. |
-| **Customizable** | Choose your fonts, play with the colors, pick any layout by merely enabling/disabling sections. A simple and easy to use interface that helps you get a resume in no time! |
-| **Templates** | I've been continuously designing new templates and will be releasing new ones as I have the time. Please support development by using the app and leaving a like/comment or sharing it with your peers. |
-| **Portable** | Your information can be exported to JSON and imported back into the application from anywhere, all you need is your JSON file. This feature makes it easy to update your resume, upload your file (or have it preloaded from local storage), edit the resume and download it again or print it as PDF. |
-| **Minimalistic Design** | As a designer, I felt I had to put this over the top of all other features. Built with minimalism and minimal interaction in mind, it looks clean, is simple to use, and I only hope to make the process more streamlined through your inputs and feedback. |
-| **Progressive Web App** | The web app is responsive, which means you can edit your resume on your phone as well and even install it as an app if you're on Android/Chrome. The app is quick to load and would also work if your internet is disconnected. |
-| **No Ads, Open Source, and Free** | As with all my projects, I made the app only to help others, so it will always remain free, and I would not be monetizing on it at any point. But if you do feel generous, I'm open to donations :) |
-
-<p align="center">
-  <img src="https://i.imgur.com/INN0f2Y.png" alt="Reactive Resume Thumbnail" width="600px" />
-</p>
-
-## What did you use to build this?
-
-* [ReactJS](https://reactjs.org/) + Hooks 🎉
-* [Tailwind CSS](https://tailwindcss.com/)
-* [Google Fonts](https://fonts.google.com/)
-* [Material Icons](https://material.io/resources/icons/)
-* [PostCSS](https://postcss.org/)
-* [PurgeCSS](https://purgecss.com/)
-
-## How does it look?
-
-<img src="https://i.imgur.com/Rv0IeWj.png" alt="Minimalistic UI" />
-
-| | Feature | Cards | |
-| :---: | :---: | :---: | :---: |
-| <img src="https://i.imgur.com/jbTuaPA.png" alt="Tailor Made Templates" width="200px" /> | <img src="https://i.imgur.com/vPGMbAa.png" alt="Custom Color Options" width="200px" /> | <img src="https://i.imgur.com/7lO6WQr.png" alt="Custom Font Picker" width="200px" /> | <img src="https://i.imgur.com/8X1vdWf.png" alt="Exhaustive Sections" width="200px" /> |
-| <img src="https://i.imgur.com/R5vtxQ5.png" alt="Personalized in Every Way" width="200px" /> | <img src="https://i.imgur.com/EfdxUL7.png" alt="Quick Resume Updates" width="200px" /> | <img src="https://i.imgur.com/oQ6L1sM.png" alt="Save as PDF or Print Directly" width="200px" /> | <img src="https://i.imgur.com/u4DXkA9.png" alt="Secure, Offline & Portable" width="200px" /> |
-
-## How can I contribute?
-
-Right now, I don't have many avenues for quick and easy contribution. If you are well versed in React + Tailwind CSS, you can design a few templates yourself. Otherwise, the best way you can contribute is to **star the repository**, **share the app with your friends**, and if possible, **leave some feedback on the app** so that I can better improve it.
-
-## How do I run the project source?
-
-I'm glad you asked :) Here is a step-by-step procedure on getting you started with installation and deployment of the application.
-
-1. Download & Install Node.js (https://nodejs.org/), make sure you can run `npm` in the command line
-2. `git clone https://github.com/AmruthPillai/Reactive-Resume.git`
-3. `cd Reactive-Resume`
-4. `npm install`
-5. `npm start` - to start the development server
-5. `npm run build` - to build a production version of the app
-
-## How do I deploy the project myself
-
-One way is to deploy to Netlify
-
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/AmruthPillai/Reactive-Resume)
-
-## What's changed since the release?
-
-- Added Castform Template ([Preview](https://i.imgur.com/an0op8f.png))
-- Added Entry Animation to App
-- Added Languages & References Section
-- Updated Templates
-- Added Nunito Font
-- Fixed [Issue #2](https://github.com/AmruthPillai/Reactive-Resume/issues/2)
-- Added Markdown Support in Descriptions
-- Added Gengar Template
-
-## Why did you make this free?
-
-A lot of people have asked me for help in designing their resumes as I have made mine. I just wanted a more natural way to generate resumes and have it easy to update cause updating a resume is always the uphill task. Once I thought of the idea, it was only a matter of time to design and develop the app. I am a big supporter of the open-source development movement as I have been directly benefitted by so many other projects that developers have shared. So needless to say, this project is entirely open-source and free as well :)
-
-Hope you enjoyed using the app, please let me know if you found it helpful.
-You can reach me on my website: https://www.amruthpillai.com/
-or by email: im.amruth@gmail.com
-
-Thank you!
+### [Go to App](https://rxresu.me/) | [Documentation](https://docs.rxresu.me/)

app.json

@@ -0,0 +1,12 @@
+{
+  "name": "Reactive Resume",
+  "description": "A one-of-a-kind resume builder that's not out to get your data. Completely secure, customizable, portable, open-source and free forever.",
+  "website": "https://rxresu.me/",
+  "repository": "https://github.com/AmruthPillai/Reactive-Resume",
+  "logo": "https://i.imgur.com/ugpElge.png",
+  "keywords": [
+    "react",
+    "resume",
+    "static"
+  ]
+}

docs/.vuepress/components/GitHubContributors.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="contributors">
+    <div v-for="i in items">
+      <a :href="i.html_url" target="_blank" rel="noopener noreferrer">
+        <img :src="i.avatar_url" />
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+const axios = require('axios');
+const repo = 'AmruthPillai/Reactive-Resume';
+
+export default {
+  data() {
+    return {
+      items: [],
+    };
+  },
+  beforeMount() {
+    axios
+      .get(`https://api.github.com/repos/${repo}/contributors`)
+      .then(response => {
+        this.$data.items = response.data;
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  },
+};
+</script>
+
+<style>
+.contributors {
+  margin-top: 20px;
+  display: grid;
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+  gap: 1rem;
+}
+</style>

docs/.vuepress/config.js

@@ -0,0 +1,24 @@
+module.exports = {
+  title: 'Reactive Resume',
+  description:
+    "A one-of-a-kind resume builder that's not out to get your data. Completely secure, customizable, portable, open-source and free forever.",
+  themeConfig: {
+    logo: '/logo.png',
+    repo: 'AmruthPillai/Reactive-Resume',
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Go to App', link: 'https://rxresu.me/' },
+    ],
+    sidebar: [
+      '/',
+      '/features/',
+      '/templates/',
+      '/technology/',
+      '/contributing/',
+      '/building-from-source/',
+      '/deployment/',
+      '/changelog/',
+    ],
+    smoothScroll: true,
+  },
+};

docs/.vuepress/dist/assets/img/search.83621669.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>

docs/README.md

@@ -0,0 +1,29 @@
+---
+title: Home
+---
+
+<img src="./images/logo.png" width="256px">
+
+# Reactive Resume
+
+#### A Free and Open-Source Resume Builder That Respects Your Privacy
+
+![Build and Deploy](https://github.com/AmruthPillai/Reactive-Resume/workflows/Build%20and%20Deploy/badge.svg)
+![Code Style](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)
+![GitHub last commit](https://img.shields.io/github/last-commit/AmruthPillai/Reactive-Resume)
+![GitHub](https://img.shields.io/github/license/AmruthPillai/Reactive-Resume)
+![Uptime Robot status](https://img.shields.io/uptimerobot/status/m784631082-7c9a2e95377145a9cbaadc18)
+
+Welcome to the front page of **Reactive Resume**, a free and open-source Resume Builder web app that focuses on one thing, **Privacy**. And also few other important features such as minimalistic UI/UX, customizability, portability, regularly updated templates, etc. But the important thing is that, your personal data is yours alone.
+
+We're going to use this coveted space to discuss about the features of the application, new changes that were introduced since the release and also other information like how to keep the project running through donations and open-source code contribution.
+
+Let's begin, shall we?
+
+## Links of Interest
+
+- [Web App ](https://rxresu.me/)
+- [GitHub Repository ](https://github.com/AmruthPillai/Reactive-Resume)
+- [Open Collective ](https://opencollective.com/reactive-resume)
+- [Product Hunt ](https://www.producthunt.com/posts/reactive-resume)
+- [Hacker News ](https://news.ycombinator.com/item?id=22709183)

docs/building-from-source/README.md

@@ -0,0 +1,86 @@
+---
+title: Building from Source
+---
+
+# Building from Source
+
+So, you would like to run the project on your local machine, or your own network server? You've come to the right place. It takes about 5-6 minutes to get the project running on your local, and this is how:
+
+## Building the App
+
+### 1. Install Node.js & NPM
+
+You might have already setup Node.js on your system before, but in case you haven't, this is where you can download and install the required applications from: [nodejs.org ](https://nodejs.org/en/)
+
+Verify whether you are able to run `node` and `npm` commands on your command line:
+
+```
+> node -v
+v13.11.0
+
+> npm -v
+6.14.4
+```
+
+### 2. Clone the Repository
+
+Download the repository as an archive from GitHub, or clone the repository from the command line depending on whether you require the latest updates or not.
+
+```
+wget https://github.com/AmruthPillai/Reactive-Resume/archive/master.zip
+```
+
+<p style="text-align: center">
+  <strong>OR</strong>
+</p>
+
+```
+git clone https://github.com/AmruthPillai/Reactive-Resume.git
+cd Reactive-Resume
+```
+
+### 3. Install Project Dependencies
+
+Install the dependencies required for the project to run. For a bird's eye view of all the dependencies it would install, you can check `package.json`.
+
+```
+npm install
+```
+
+### 4. Start the Development Server
+
+You can run the project locally to check if everything is working alright, through this command:
+
+```
+npm start
+```
+
+### 5. Build Production App
+
+This will produce a production version of the app and return a folder `build` which contains static files ready to be uploaded on the web. For more info on how to deploy, go to the Deployment page.
+
+```
+npm build
+```
+
+## Building the Documentation
+
+### 1. Follow Steps 1 - 3 from [Building the App](#building-the-app)
+
+The initial steps to build and install the documentation server is similar to how you would build the app, as both of them reside in a monorepo.
+
+### 2. Start the Development Server
+
+You can edit the documentation and run it locally using this command:
+
+```
+npm run docs:dev
+```
+
+### 3. Build Static Documentation
+
+This will produce static files under the folder `docs/.vuepress/dist`. This folder can be uploaded anywhere such as Shared Hosting/Firebase/Netlify/Cloud etc.
+
+```
+npm run docs:build
+```

docs/changelog/README.md

@@ -0,0 +1,52 @@
+---
+title: Changelog
+---
+
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## March 2020
+
+### March 29, 2020
+
+- Add Issue Templates in GitHub for Bug Reports and Feature Requests
+- Rewriting Documentation in VuePress
+- Implement "Deploy to Netlify" button, by [hwang381](https://github.com/hwang381)
+
+### March 28, 2020
+
+- Add About Tab in the Right Sidebar
+- JSON Migration Bugfix, by [Panzki](https://github.com/Panzki)
+- Designed Castform Template
+
+### March 27, 2020
+
+- Add Google Site Verification Tag
+- Fix bug with Gengar Template not respecting enable values
+- Add Language & References Section to Resumes
+- Update Onyx, Pikachu & Gengar Templates
+- Add Nunito Font, removed few other fonts
+- Add Entry Animation using [animate.css](https://daneden.github.io/animate.css/)
+- Fix Awkward Page Breaks in Resume when Printing
+- Make Links Clickable in the Resume PDF
+
+### March 26, 2020
+
+- Fix bug in Pikachu Template where photo was not visible
+- Add option to enter any font family stored locally on system
+- Allow printing of more than one page
+- Add Markdown Support to Descriptions
+- Designed Gengar Template
+
+### March 25, 2020
+
+- Released App to Public through Firebase Hosting
+- Add Firebase Analytics
+- Add Progressive Web App Caching
+- Designed Pikachu Template
+
+### March 24, 2020
+
+- Initiating Development of App
+- Designed Onyx Template

docs/contributing/README.md

@@ -0,0 +1,45 @@
+---
+title: Contributing
+---
+
+# Contributing
+
+I've tried to make the project as simple and accessible to everyone: developers, translators and users alike. The project grows in quality and features through your feedback and support, so please do reach out to me whenever you have a new feature request, or when you find a bug, and we as a team will get it squashed as soon as possible.
+
+**Here are a few ways you can contribute to the project:**
+
+## Donate/Sponsor
+
+This is an open that's open to most. Even the smallest donation can help the project thrive and keep the website running. I didn't think I would ever reach my Firebase Hosting limits until I released this project, and it makes me both worried and happy.
+
+If you would like to support the development and uptime of the project, you can donate through Open Collective, which is a recognized non-profit organization that funnels in donations only to those who are verified. For example, every time you donate, I get the money only after I show an invoice related to the project expense. So you have complete transparency in where your money is going.
+
+[Donate on Open Collective ](https://opencollective.com/reactive-resume)
+
+## Find & Report Bugs
+
+This is quite possible the easiest of the options, other than donating. All you have to do is keep using the app and if you run into any trouble, just let me know by raising an issue on GitHub. The progress of fixing that bug can be tracked from there.
+
+[Raise an Issue on GitHub ](https://github.com/AmruthPillai/Reactive-Resume/issues/new/choose)
+
+## Request New Features
+
+Something that's missing on the app that's halting your progress from making the best version of your resume? Let us know and we'll try and implement that for you. GitHub's Issue Tracking System is pretty flexible when it comes to things like these, so all you need to do to suggest a new feature is raise an issue on GitHub with the Feature Request template.
+
+[Raise an Issue on GitHub ](https://github.com/AmruthPillai/Reactive-Resume/issues/new/choose)
+
+## Translation
+
+Currently, there is no translation engine in place that allows for people to easily make translations. I'm still figuring out the most elegant way to implement this feature with minimal code and maximum reach. For now, if you would like to see this feature, please vote in the GitHub Issue linked below and if you are willing to contribute, mention in the comments of the issue which language you would like to translate to.
+
+[Vote for Translation Engine Feature ](https://github.com/AmruthPillai/Reactive-Resume/issues/18)
+
+## Commit Code
+
+If you are a developer, and a ReactJS developer at that, then you're in demand! Take a look at the code and see how you can make it better, cause I definitely would have made a lot of mistakes. You can setup test cases or extract a particular section of code into a function to improve code reuse. All you need to do is fork the repository on GitHub, make your changes and submit a Pull Request for the same and we'll review it.
+
+[GitHub Repository ](https://github.com/AmruthPillai/Reactive-Resume)
+
+## GitHub Contributors
+
+<GitHubContributors />

docs/deployment/README.md

@@ -0,0 +1,26 @@
+---
+title: Deployment
+---
+
+# Deployment
+
+You've built the source code successfully and now you're on your way to deploying the app. There are some methods setup to deploy a version of the app without even having to build the source, so we'll run through all the steps here:
+
+## Deploying to Heroku
+
+Heroku is a cloud platform that lets companies build, deliver, monitor and scale apps — we're the fastest way to go from idea to URL, bypassing all those infrastructure headaches.
+
+[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)
+
+## Deploying to Netlify
+
+Used by more than 800,000 web developers and businesses, the Netlify platform provides modern build workflows, serverless functions and a global Application Delivery Network to deliver the most performant, secure and scalable websites and applications.
+
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/AmruthPillai/Reactive-Resume)
+
+## Deploy to Shared Hosting/VPS
+
+Here, you're kinda on your own as there are no one-click buttons to help you through, but it's a simple process. Once you've built the app, you can copy the contents of the `build` folder to your `public_html` folder and you will have the app running on your designated domain or IP address.
+
+Here is a great tutorial on how to set up a web server on your machine by DigitalOcean:  
+[How To Install Nginx on Ubuntu 18.04 ](https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-18-04)

docs/features/README.md

@@ -0,0 +1,59 @@
+---
+title: Features
+---
+
+# Features
+
+I've tried to maintain some core principles to the app that will always remain unchanged, just to set a fixed direction in which development and ideas can move forward.
+
+<p style="text-align: center">
+  <iframe width="100%" height="420" src="https://www.youtube.com/embed/4OM0LEPzDO8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</p>
+
+## Secure
+
+![](./images/4.png)
+
+It is entirely secure, as in, your information never leaves the browser, powered by web technologies (HTML5 Local Storage API) that allow for data to be stored locally and quickly.
+
+## Offline
+
+![](./images/7.png)
+
+The app is a PWA and also has no connection to any servers, thus keeping it entirely offline. It survives refreshes, disconnections, and can also be exported or imported through JSON.
+
+## Customizable
+
+![](./images/9.png)
+
+Choose your fonts, play with the colors, pick any layout by merely enabling/disabling sections. A simple and easy to use interface that helps you get a resume in no time!
+
+## Templates
+
+![](./images/8.png)
+
+I've been continuously designing new templates and will be releasing new ones as I have the time. Please support development by using the app and leaving a like/comment or sharing it with your peers.
+
+## Portable
+
+![](./images/2.png)
+
+Your information can be exported to JSON and imported back into the application from anywhere, all you need is your JSON file. This feature makes it easy to update your resume, upload your file (or have it preloaded from local storage), edit the resume and download it again or print it as PDF.
+
+## Minimalistic Design
+
+![](./images/1.png)
+
+As a designer, I felt I had to put this over the top of all other features. Built with minimalism and minimal interaction in mind, it looks clean, is simple to use, and I only hope to make the process more streamlined through your inputs and feedback.
+
+## Progressive Web App
+
+![](./images/4.png)
+
+The web app is responsive, which means you can edit your resume on your phone as well and even install it as an app if you're on Android/Chrome. The app is quick to load and would also work if your internet is disconnected.
+
+## Free and Open-Source
+
+![](./images/7.png)
+
+As with all my projects, I made the app only to help others, so it will always remain free, and I would not be monetizing on it at any point. But if you do feel generous, [I'm open to donations](https://opencollective.com/reactive-resume).

docs/technology/README.md

@@ -0,0 +1,57 @@
+---
+title: Technology
+---
+
+# Technology
+
+A credit to all the projects and open source packages that have helped during the building of this project. Truly, without these projects, Reactive Resume wouldn't exist.
+
+## ReactJS + Hooks 🎉
+
+React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
+
+Hooks solve a wide variety of seemingly unconnected problems in React that we’ve encountered over five years of writing and maintaining tens of thousands of components. Whether you’re learning React, use it daily, or even prefer a different library with a similar component model, you might recognize some of these problems.
+
+[Learn more → ](https://reactjs.org/)
+
+## Tailwind CSS
+
+Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
+
+[Learn more → ](https://tailwindcss.com/)
+
+## Lodash
+
+A modern JavaScript utility library delivering modularity, performance & extras. Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc.
+
+[Learn more → ](https://lodash.com/)
+
+## Google Fonts
+
+Google Fonts is a great repository of open type fonts that are allowed to be used on the web. Reactive Resume uses Google Fonts to load different font families and allow the user to choose which font he/she would like on their resume.
+
+[Learn more → ](https://fonts.google.com/)
+
+## Material Icons
+
+Material icons are delightful, beautifully crafted symbols for common actions and items. Download on desktop to use them in your digital products for Android, iOS, and web.
+
+[Learn more → ](https://material.io/resources/icons/)
+
+## PostCSS
+
+PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
+
+[Learn more → ](https://postcss.org/)
+
+## PurgeCSS
+
+PurgeCSS analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files.
+
+[Learn more → ](https://github.com/FullHuman/purgecss)
+
+## VuePress
+
+VuePress is what made this documentation possible, with it's clean design and quick setup as well as the ability to use markdown to generate content, VuePress seemed like the best way to set up a cleaner documentation.
+
+[Learn more → ](https://vuepress.vuejs.org/)

docs/templates/README.md

@@ -0,0 +1,25 @@
+---
+title: Templates
+---
+
+# Templates
+
+<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
+">
+  <div>
+    <h2 id="onyx"><a href="#onyx" class="header-anchor">#</a> Onyx</h2>
+    <img src="./images/Onyx.png" />
+  </div>
+  <div>
+    <h2 id="pikachu"><a href="#pikachu" class="header-anchor">#</a> Pikachu</h2>
+    <img src="./images/Pikachu.png" />
+  </div>
+  <div>
+    <h2 id="gengar"><a href="#gengar" class="header-anchor">#</a> Gengar</h2>
+    <img src="./images/Gengar.png" />
+  </div>
+  <div>
+    <h2 id="castform"><a href="#castform" class="header-anchor">#</a> Castform</h2>
+    <img src="./images/Castform.png" />
+  </div>
+</div>

firebase.json

@@ -1,16 +1,35 @@
 {
-  "hosting": {
-    "public": "build",
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
-    ],
-    "rewrites": [
-      {
-        "source": "**",
-        "destination": "/index.html"
-      }
-    ]
-  }
+  "hosting": [
+    {
+      "target": "app",
+      "public": "build",
+      "ignore": [
+        "firebase.json",
+        "docs",
+        "**/.*",
+        "**/node_modules/**"
+      ],
+      "rewrites": [
+        {
+          "source": "**",
+          "destination": "/index.html"
+        }
+      ]
+    },
+    {
+      "target": "docs",
+      "public": "docs/.vuepress/dist",
+      "ignore": [
+        "firebase.json",
+        "**/.*",
+        "**/node_modules/**"
+      ],
+      "rewrites": [
+        {
+          "source": "**",
+          "destination": "/index.html"
+        }
+      ]
+    }
+  ]
 }

package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.3.0",
     "@testing-library/react": "^10.0.1",
     "@testing-library/user-event": "^10.0.0",
+    "axios": "^0.19.2",
     "lodash": "^4.17.15",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -18,6 +19,8 @@
   "scripts": {
     "css": "postcss src/assets/tailwind/tailwind.src.css -o src/assets/tailwind/tailwind.css",
     "css:prod": "postcss src/assets/tailwind/tailwind.src.css -o src/assets/tailwind/tailwind.css --env production",
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs",
     "prestart": "npm run css",
     "start": "react-scripts start",
     "prebuild": "npm run css:prod",
@@ -25,7 +28,11 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "predeploy": "npm run build",
-    "deploy": "firebase deploy"
+    "deploy": "firebase deploy",
+    "predeploy:app": "npm run build",
+    "deploy:app": "firebase deploy --only hosting:app",
+    "predeploy:docs": "npm run docs:build",
+    "deploy:docs": "firebase deploy --only hosting:docs"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -54,6 +61,7 @@
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^3.0.0",
     "postcss-cli": "^7.1.0",
-    "tailwindcss": "^1.2.0"
+    "tailwindcss": "^1.2.0",
+    "vuepress": "^1.4.0"
   }
 }