Switch out create-react-app site for gatsby site
This commit is contained in:
@@ -1,99 +0,0 @@
|
||||
<!-- AUTO-GENERATED-CONTENT:START (STARTER) -->
|
||||
<p align="center">
|
||||
<a href="https://www.gatsbyjs.com">
|
||||
<img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
|
||||
</a>
|
||||
</p>
|
||||
<h1 align="center">
|
||||
Gatsby's hello-world starter
|
||||
</h1>
|
||||
|
||||
Kick off your project with this hello-world boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
|
||||
|
||||
_Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.com/docs/gatsby-starters/)._
|
||||
|
||||
## 🚀 Quick start
|
||||
|
||||
1. **Create a Gatsby site.**
|
||||
|
||||
Use the Gatsby CLI to create a new site, specifying the hello-world starter.
|
||||
|
||||
```shell
|
||||
# create a new Gatsby site using the hello-world starter
|
||||
gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world
|
||||
```
|
||||
|
||||
1. **Start developing.**
|
||||
|
||||
Navigate into your new site’s directory and start it up.
|
||||
|
||||
```shell
|
||||
cd my-hello-world-starter/
|
||||
gatsby develop
|
||||
```
|
||||
|
||||
1. **Open the source code and start editing!**
|
||||
|
||||
Your site is now running at `http://localhost:8000`!
|
||||
|
||||
_Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.com/tutorial/part-five/#introducing-graphiql)._
|
||||
|
||||
Open the `my-hello-world-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
|
||||
|
||||
## 🧐 What's inside?
|
||||
|
||||
A quick look at the top-level files and directories you'll see in a Gatsby project.
|
||||
|
||||
.
|
||||
├── node_modules
|
||||
├── src
|
||||
├── .gitignore
|
||||
├── .prettierrc
|
||||
├── gatsby-browser.js
|
||||
├── gatsby-config.js
|
||||
├── gatsby-node.js
|
||||
├── gatsby-ssr.js
|
||||
├── LICENSE
|
||||
├── package-lock.json
|
||||
├── package.json
|
||||
└── README.md
|
||||
|
||||
1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
|
||||
|
||||
2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
|
||||
|
||||
3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
|
||||
|
||||
4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
|
||||
|
||||
5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.com/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
|
||||
|
||||
6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.com/docs/gatsby-config/) for more detail).
|
||||
|
||||
7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.com/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
|
||||
|
||||
8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.com/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
|
||||
|
||||
9. **`LICENSE`**: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license.
|
||||
|
||||
10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
|
||||
|
||||
11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
|
||||
|
||||
12. **`README.md`**: A text file containing useful reference information about your project.
|
||||
|
||||
## 🎓 Learning Gatsby
|
||||
|
||||
Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start:
|
||||
|
||||
- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
|
||||
|
||||
- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.com/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
|
||||
|
||||
## 💫 Deploy
|
||||
|
||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-hello-world)
|
||||
|
||||
[](https://vercel.com/import/project?template=https://github.com/gatsbyjs/gatsby-starter-hello-world)
|
||||
|
||||
<!-- AUTO-GENERATED-CONTENT:END -->
|
||||
@@ -1,32 +0,0 @@
|
||||
{
|
||||
"name": "gatsby-starter-hello-world",
|
||||
"private": true,
|
||||
"description": "A simplified bare-bones starter for Gatsby",
|
||||
"version": "0.1.0",
|
||||
"license": "0BSD",
|
||||
"scripts": {
|
||||
"build": "gatsby build",
|
||||
"develop": "gatsby develop",
|
||||
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,yml}\"",
|
||||
"start": "npm run develop",
|
||||
"serve": "gatsby serve",
|
||||
"clean": "gatsby clean",
|
||||
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
|
||||
},
|
||||
"dependencies": {
|
||||
"gatsby": "^2.25.3",
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint-config-prettier": "^6.15.0",
|
||||
"prettier": "^2.1.2"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/gatsbyjs/gatsby/issues"
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
export default function Home() {
|
||||
return <div>Hello world!</div>;
|
||||
}
|
||||
11
site/.eslintrc.json
Normal file
11
site/.eslintrc.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"extends": ["eslint:recommended", "prettier"],
|
||||
"env": {
|
||||
"node": false,
|
||||
"browser": true,
|
||||
"es6": true
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2018
|
||||
}
|
||||
}
|
||||
105
site/README.md
105
site/README.md
@@ -1,68 +1,99 @@
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
<!-- AUTO-GENERATED-CONTENT:START (STARTER) -->
|
||||
<p align="center">
|
||||
<a href="https://www.gatsbyjs.com">
|
||||
<img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
|
||||
</a>
|
||||
</p>
|
||||
<h1 align="center">
|
||||
Gatsby's hello-world starter
|
||||
</h1>
|
||||
|
||||
## Available Scripts
|
||||
Kick off your project with this hello-world boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
|
||||
|
||||
In the project directory, you can run:
|
||||
_Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.com/docs/gatsby-starters/)._
|
||||
|
||||
### `yarn start`
|
||||
## 🚀 Quick start
|
||||
|
||||
Runs the app in the development mode.<br />
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
||||
1. **Create a Gatsby site.**
|
||||
|
||||
The page will reload if you make edits.<br />
|
||||
You will also see any lint errors in the console.
|
||||
Use the Gatsby CLI to create a new site, specifying the hello-world starter.
|
||||
|
||||
### `yarn test`
|
||||
```shell
|
||||
# create a new Gatsby site using the hello-world starter
|
||||
gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world
|
||||
```
|
||||
|
||||
Launches the test runner in the interactive watch mode.<br />
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
1. **Start developing.**
|
||||
|
||||
### `yarn build`
|
||||
Navigate into your new site’s directory and start it up.
|
||||
|
||||
Builds the app for production to the `build` folder.<br />
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
```shell
|
||||
cd my-hello-world-starter/
|
||||
gatsby develop
|
||||
```
|
||||
|
||||
The build is minified and the filenames include the hashes.<br />
|
||||
Your app is ready to be deployed!
|
||||
1. **Open the source code and start editing!**
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
Your site is now running at `http://localhost:8000`!
|
||||
|
||||
### `yarn eject`
|
||||
_Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.com/tutorial/part-five/#introducing-graphiql)._
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
|
||||
Open the `my-hello-world-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
|
||||
|
||||
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
## 🧐 What's inside?
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
|
||||
A quick look at the top-level files and directories you'll see in a Gatsby project.
|
||||
|
||||
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
|
||||
.
|
||||
├── node_modules
|
||||
├── src
|
||||
├── .gitignore
|
||||
├── .prettierrc
|
||||
├── gatsby-browser.js
|
||||
├── gatsby-config.js
|
||||
├── gatsby-node.js
|
||||
├── gatsby-ssr.js
|
||||
├── LICENSE
|
||||
├── package-lock.json
|
||||
├── package.json
|
||||
└── README.md
|
||||
|
||||
## Learn More
|
||||
1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
|
||||
|
||||
### Code Splitting
|
||||
4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
|
||||
|
||||
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
|
||||
5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.com/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.com/docs/gatsby-config/) for more detail).
|
||||
|
||||
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
|
||||
7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.com/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
|
||||
|
||||
### Making a Progressive Web App
|
||||
8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.com/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
|
||||
|
||||
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
|
||||
9. **`LICENSE`**: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license.
|
||||
|
||||
### Advanced Configuration
|
||||
10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
|
||||
|
||||
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
|
||||
11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
|
||||
|
||||
### Deployment
|
||||
12. **`README.md`**: A text file containing useful reference information about your project.
|
||||
|
||||
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
|
||||
## 🎓 Learning Gatsby
|
||||
|
||||
### `yarn build` fails to minify
|
||||
Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start:
|
||||
|
||||
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
|
||||
- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
|
||||
|
||||
- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.com/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
|
||||
|
||||
## 💫 Deploy
|
||||
|
||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-hello-world)
|
||||
|
||||
[](https://vercel.com/import/project?template=https://github.com/gatsbyjs/gatsby-starter-hello-world)
|
||||
|
||||
<!-- AUTO-GENERATED-CONTENT:END -->
|
||||
|
||||
@@ -1,37 +1,36 @@
|
||||
{
|
||||
"name": "serverless-fullstack-app-website",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^4.2.4",
|
||||
"@testing-library/react": "^9.3.2",
|
||||
"@testing-library/user-event": "^7.1.2",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-scripts": "3.4.3",
|
||||
"js-cookie": "^2.2.1",
|
||||
"moment": "^2.24.0",
|
||||
"react-router-dom": "^5.1.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
"name": "forget-me-not-site",
|
||||
"private": true,
|
||||
"description": "Forget Me Not site for saving bookmarks",
|
||||
"version": "0.1.0",
|
||||
"license": "0BSD",
|
||||
"scripts": {
|
||||
"build": "gatsby build",
|
||||
"develop": "gatsby develop",
|
||||
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,yml}\"",
|
||||
"start": "npm run develop",
|
||||
"serve": "gatsby serve",
|
||||
"clean": "gatsby clean",
|
||||
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
|
||||
},
|
||||
"dependencies": {
|
||||
"gatsby": "^2.25.3",
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-router-dom": "^5.1.2",
|
||||
"js-cookie": "^2.2.1",
|
||||
"moment": "^2.24.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^7.12.1",
|
||||
"eslint-config-prettier": "^6.15.0",
|
||||
"prettier": "^2.1.2"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/gatsbyjs/gatsby/issues"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 338 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 149 KiB |
@@ -1,27 +1 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
href="%PUBLIC_URL%/favicon.ico"
|
||||
/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="A ready-to-use serverless fullstack application template. Built with AWS Lambda, Express.js, React, AWS HTTP API, AWS DynamoDB and more!"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<title>Serverless Fullstack Application</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="note" content="environment=development"/><script src="/socket.io/socket.io.js"></script></head><body><div id="___gatsby"></div><script src="/polyfill.js" nomodule=""></script><script src="/commons.js"></script></body></html>
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"short_name": "Serverless Fullstack Application",
|
||||
"name": "Serverless Fullstack Application",
|
||||
"short_name": "Forget Me Not",
|
||||
"name": "Forget Me Not",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
|
||||
@@ -6,6 +6,6 @@ inputs:
|
||||
src:
|
||||
src: ./
|
||||
hook: npm run build
|
||||
dist: build
|
||||
dist: public
|
||||
# Enable this when you want to set a custom domain.
|
||||
# domain: ${env:domain}
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
import React, { Component } from 'react'
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Switch,
|
||||
Route,
|
||||
} from 'react-router-dom'
|
||||
import Home from './pages/Home/Home'
|
||||
import Auth from './pages/Auth/Auth'
|
||||
import Dashboard from './pages/Dashboard/Dashboard'
|
||||
import { getSession } from './utils'
|
||||
|
||||
export default class App extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {}
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
// console.log(getSession())
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Router>
|
||||
<Switch>
|
||||
|
||||
<Route path='/register'>
|
||||
<Auth />
|
||||
</Route>
|
||||
|
||||
<Route path='/login'>
|
||||
<Auth />
|
||||
</Route>
|
||||
|
||||
<PrivateRoute
|
||||
exact
|
||||
path='/'
|
||||
component={Dashboard}
|
||||
/>
|
||||
|
||||
</Switch>
|
||||
</Router>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A component to protect routes.
|
||||
* Shows Auth page if the user is not authenticated
|
||||
*/
|
||||
const PrivateRoute = ({ component, ...options }) => {
|
||||
|
||||
const session = getSession()
|
||||
|
||||
const finalComponent = session ? Dashboard : Home
|
||||
return <Route {...options} component={finalComponent} />
|
||||
}
|
||||
@@ -1,333 +0,0 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.containerInner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-self: center;
|
||||
max-width: 700px;
|
||||
padding: 50px 15px 30px 15px;
|
||||
}
|
||||
|
||||
.containerLoading {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
padding: 160px 0 0 0;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.heroArtwork {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.heroArtwork img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
max-height: 100%;
|
||||
max-width: 500px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.heroTitle img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
max-height: 100%;
|
||||
max-width: 500px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.heroDescription {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
margin: 10px 0 32px 0px;
|
||||
}
|
||||
|
||||
.error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin: 18px 0;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: #FD5750;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.success {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin: 32px 0;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
text-transform: lowercase;
|
||||
color: #78f542;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.containerRegister {}
|
||||
|
||||
.containerSignIn {}
|
||||
|
||||
.socialButtons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
margin: 15px auto 0px auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.buttonGithub {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto 10px auto;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 19px;
|
||||
font-weight: 500;
|
||||
opacity: 0.6;
|
||||
transition: all 0.3s ease;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.buttonGithub:hover {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.buttonGithub img {
|
||||
max-height: 28px;
|
||||
margin-right: 13px;
|
||||
margin-top: 1.5px;
|
||||
}
|
||||
|
||||
.buttonGoogle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 19px;
|
||||
font-weight: 500;
|
||||
opacity: 0.6;
|
||||
transition: all 0.3s ease;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.buttonGoogle:hover {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.buttonGoogle img {
|
||||
max-height: 25px;
|
||||
margin-right: 11px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.formType {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0px auto 0px auto;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
font-size: 22px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
text-transform: lowercase;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.formTypeRegister {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
padding: 5px 40px 5px 0;
|
||||
justify-content: flex-end;
|
||||
border-right: 2px solid rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.formTypeRegister:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.formTypeSignIn {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
padding: 5px 0 5px 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.formTypeSignIn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.formTypeActive {
|
||||
color: rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 380px;
|
||||
width: 100%;
|
||||
margin: 10px auto 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.formField {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
|
||||
.formLabel {
|
||||
font-size: 19px;
|
||||
font-weight: 500;
|
||||
margin: 0 0 10px 0;
|
||||
user-select: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.formInput {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
padding: 10px 0px 22px 0px;
|
||||
border-bottom: 1.5px solid rgba(255,255,255,0.4);
|
||||
border-top: 1.5px solid transparent;
|
||||
border-right: 1.5px solid transparent;
|
||||
border-left: 1.5px solid transparent;
|
||||
transition: all 0.6s ease;
|
||||
background: none;
|
||||
outline: none;
|
||||
color: #ffffff;
|
||||
caret-color: white;
|
||||
}
|
||||
|
||||
.formInput::placeholder {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.formInput:focus {
|
||||
border-bottom: 1.5px solid rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
.formError {
|
||||
margin: 10px 0 10px 0;
|
||||
color: #FD5750;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.formButton {
|
||||
margin: 16px auto 0 auto!important;
|
||||
}
|
||||
|
||||
.formButton:hover {
|
||||
cursor: pointer;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.formButton:active {
|
||||
cursor: pointer;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.forgotPassword {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
margin: 20px auto 5px auto;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
font-size: 19px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.forgotPassword:hover {
|
||||
cursor: pointer;
|
||||
color: rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
.githubLink {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
margin: 26px 0 40px 0;
|
||||
}
|
||||
|
||||
.githubLink a {
|
||||
font-size: 20px;
|
||||
color: #FD5750;
|
||||
opacity: 0.7;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.githubLink:hover a {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -1,9 +1,7 @@
|
||||
import React, { Component } from 'react'
|
||||
import {
|
||||
Link,
|
||||
withRouter,
|
||||
} from 'react-router-dom'
|
||||
import Loading from '../../fragments/Loading'
|
||||
Link
|
||||
} from 'gatsby'
|
||||
import styles from './Auth.module.css'
|
||||
import {
|
||||
userRegister,
|
||||
@@ -143,7 +141,7 @@ class Auth extends Component {
|
||||
|
||||
{this.state.loading && (
|
||||
<div>
|
||||
{< Loading className={styles.containerLoading} />}
|
||||
loading, man!
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -246,4 +244,4 @@ class Auth extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(Auth)
|
||||
export default Auth
|
||||
0
site/src/components/Auth/Auth.module.css
Normal file
0
site/src/components/Auth/Auth.module.css
Normal file
0
site/src/components/Dashboard/Dashboard.module.css
Normal file
0
site/src/components/Dashboard/Dashboard.module.css
Normal file
@@ -1,32 +0,0 @@
|
||||
import React, { Component } from 'react'
|
||||
import styles from './Loading.module.css'
|
||||
|
||||
export default class Loading extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {}
|
||||
}
|
||||
|
||||
async componentDidMount() {}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={`${this.props.className}`}>
|
||||
<div className={`${styles.container}`}>
|
||||
|
||||
<img
|
||||
draggable={false}
|
||||
alt={`Loading`}
|
||||
src={
|
||||
'https://s3.amazonaws.com/dashboard.serverless.com/images/icon-serverless-framework.png'
|
||||
}
|
||||
/>
|
||||
|
||||
<p>loading...</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: auto;
|
||||
height: 100px;
|
||||
opacity: 0.45;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container img {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
margin: 0 0 20px 0;
|
||||
animation-duration: 0.4s;
|
||||
animation-name: pulse;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
animation-timing-function: ease;
|
||||
filter: none;
|
||||
-webkit-filter: grayscale(100%);
|
||||
-moz-filter: grayscale(100%);
|
||||
-ms-filter: grayscale(100%);
|
||||
-o-filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.container p {
|
||||
font-size: 22px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
from {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export { default } from './Loading'
|
||||
@@ -1,123 +0,0 @@
|
||||
html, body, #root {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-weight: 500;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
div, h1, h2, h3, h4, h5, h6, p, span, input, button, li {
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/**
|
||||
* Links
|
||||
*/
|
||||
|
||||
a, .link {
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: rgba(255,255,255,0.6);
|
||||
text-decoration: none;
|
||||
transition: all 0.14s ease;
|
||||
}
|
||||
|
||||
a:hover, .link:hover {
|
||||
cursor: pointer;
|
||||
color: rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
a:active, .link:active {
|
||||
color: rgba(255,255,255,0.6);
|
||||
}
|
||||
|
||||
/**
|
||||
* Buttons
|
||||
*/
|
||||
|
||||
.buttonPrimaryLarge {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
height: auto;
|
||||
margin: 20px 0 0 0;
|
||||
padding: 24px 24px 28px 24px;
|
||||
background: #fd5750;
|
||||
color: #fff;
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
border-radius: 4px;
|
||||
border: 0px;
|
||||
transition: all 0.14s ease;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.buttonPrimaryLarge:hover {
|
||||
cursor: pointer;
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.buttonPrimaryLarge:active {
|
||||
cursor: pointer;
|
||||
transform: scale(1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Animations
|
||||
*/
|
||||
|
||||
.animateFadeIn {
|
||||
animation: fadeIn 0.45s;
|
||||
}
|
||||
|
||||
.animateScaleIn {
|
||||
animation: scaleIn 0.35s;
|
||||
}
|
||||
|
||||
.animateFlicker {
|
||||
animation: flicker 2.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flicker {
|
||||
0% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import App from './App'
|
||||
import './index.css'
|
||||
|
||||
/**
|
||||
* Render App
|
||||
*/
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
)
|
||||
@@ -1,231 +0,0 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.containerInner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-self: center;
|
||||
max-width: 700px;
|
||||
padding: 50px 15px 30px 15px;
|
||||
}
|
||||
|
||||
.containerLoading {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
padding: 160px 0 0 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
max-height: 100%;
|
||||
max-width: 400px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin: 18px 0;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: #FD5750;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.success {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin: 32px 0;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
text-transform: lowercase;
|
||||
color: #78f542;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.containerRegister {}
|
||||
|
||||
.containerSignIn {}
|
||||
|
||||
.formType {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 26px auto 0px auto;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
font-size: 22px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
text-transform: lowercase;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.formTypeRegister {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
padding: 5px 40px 5px 0;
|
||||
justify-content: flex-end;
|
||||
border-right: 2px solid rgba(255,255,255,0.15);
|
||||
color: rgba(255,255,255,0.6);
|
||||
}
|
||||
|
||||
.formTypeRegister:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.formTypeSignIn {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
padding: 5px 0 5px 40px;
|
||||
text-align: left;
|
||||
color: rgba(255,255,255,0.6);
|
||||
}
|
||||
|
||||
.formTypeSignIn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.formTypeActive {
|
||||
color: rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 380px;
|
||||
width: 100%;
|
||||
margin: 10px auto 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.formField {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
|
||||
.formLabel {
|
||||
font-size: 19px;
|
||||
font-weight: 500;
|
||||
margin: 0 0 10px 0;
|
||||
user-select: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.formInput {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
padding: 10px 0px 22px 0px;
|
||||
border-bottom: 1.5px solid rgba(255,255,255,0.4);
|
||||
border-top: 1.5px solid transparent;
|
||||
border-right: 1.5px solid transparent;
|
||||
border-left: 1.5px solid transparent;
|
||||
transition: all 0.6s ease;
|
||||
background: none;
|
||||
outline: none;
|
||||
color: #ffffff;
|
||||
caret-color: white;
|
||||
}
|
||||
|
||||
.formInput::placeholder {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.formInput:focus {
|
||||
border-bottom: 1.5px solid rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
.formError {
|
||||
margin: 10px 0 10px 0;
|
||||
color: #FD5750;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.formButton {
|
||||
margin: 16px auto 0 auto!important;
|
||||
}
|
||||
|
||||
.formButton:hover {
|
||||
cursor: pointer;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.formButton:active {
|
||||
cursor: pointer;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.forgotPassword {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
margin: 20px auto 5px auto;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
font-size: 19px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.forgotPassword:hover {
|
||||
cursor: pointer;
|
||||
color: rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
.githubLink {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
margin: 26px 0 40px 0;
|
||||
}
|
||||
|
||||
.githubLink a {
|
||||
font-size: 20px;
|
||||
color: #FD5750;
|
||||
opacity: 0.7;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.githubLink:hover a {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.containerInner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 0 30px 0;
|
||||
}
|
||||
|
||||
.navigationContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-content: center;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
padding: 25px 45px 0 45px;
|
||||
}
|
||||
|
||||
.navigationContainer div {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.contentContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 7% 15px 45px 15px;
|
||||
}
|
||||
|
||||
.welcomeMessage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.artwork {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.artwork img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
max-height: 100%;
|
||||
max-width: 500px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Special
|
||||
*/
|
||||
|
||||
::-moz-selection {
|
||||
background: #fd5750;
|
||||
color: #ffffff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #fd5750;
|
||||
color: #ffffff;
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
import React, { Component } from 'react'
|
||||
import {
|
||||
Link,
|
||||
withRouter
|
||||
} from 'react-router-dom'
|
||||
import styles from './Home.module.css'
|
||||
|
||||
class Home extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {}
|
||||
}
|
||||
|
||||
async componentDidMount() { }
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<div className={`${styles.container} animateFadeIn`}>
|
||||
<div className={styles.containerInner}>
|
||||
|
||||
{ /* Hero Artwork */}
|
||||
|
||||
<div className={`${styles.heroArtwork} animateFlicker`}>
|
||||
<img
|
||||
draggable='false'
|
||||
src={'./fullstack-app-artwork.png'}
|
||||
alt='serverless-fullstack-application'
|
||||
/>
|
||||
</div>
|
||||
<div className={`${styles.heroTitle}`}>
|
||||
<img
|
||||
draggable='false'
|
||||
src={'./fullstack-app-title.png'}
|
||||
alt='serverless-fullstack-application'
|
||||
/>
|
||||
</div>
|
||||
|
||||
{ /* Hero Description */}
|
||||
|
||||
<div className={`${styles.heroDescription}`}>
|
||||
A serverless full-stack application built with AWS Lambda, AWS HTTP API, Express.js, React & AWS DynamoDB.
|
||||
</div>
|
||||
|
||||
{ /* Call To Action */}
|
||||
|
||||
<div className={`${styles.containerCta}`}>
|
||||
|
||||
<Link to='/register'>
|
||||
<button className={`buttonPrimaryLarge`}>
|
||||
Register
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<Link to='/login' className={`${styles.linkSignIn}`}>sign-in</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(Home)
|
||||
@@ -1,105 +0,0 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.containerInner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-self: center;
|
||||
max-width: 700px;
|
||||
padding: 50px 15px 30px 15px;
|
||||
}
|
||||
|
||||
.heroArtwork {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.heroArtwork img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
max-height: 100%;
|
||||
max-width: 500px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.heroTitle img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
max-height: 100%;
|
||||
max-width: 500px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.heroDescription {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
margin: 32px 0px 52px 0;
|
||||
}
|
||||
|
||||
.containerCta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.containerCta button {
|
||||
margin: 0px auto 20px auto;
|
||||
}
|
||||
|
||||
.containerCta .linkSignIn {
|
||||
padding: 10px;
|
||||
color: #fd5750;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.containerCta .linkSignIn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Special
|
||||
*/
|
||||
|
||||
::-moz-selection {
|
||||
background: #fd5750;
|
||||
color: #ffffff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #fd5750;
|
||||
color: #ffffff;
|
||||
opacity: 1;
|
||||
}
|
||||
11
site/src/pages/index.js
Normal file
11
site/src/pages/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from "react";
|
||||
import Auth from "../components/Auth/Auth";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div>
|
||||
<p>Hello world!</p>
|
||||
<Auth/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
* Utils: Back-end
|
||||
*/
|
||||
|
||||
import config from '../config'
|
||||
import config from '../../config'
|
||||
|
||||
/**
|
||||
* Register a new user
|
||||
@@ -68,4 +68,4 @@ export const requestApi = async (
|
||||
}
|
||||
|
||||
return await response.json()
|
||||
}
|
||||
}
|
||||
|
||||
BIN
site/static/android-chrome-192x192.png
Normal file
BIN
site/static/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
site/static/android-chrome-512x512.png
Normal file
BIN
site/static/android-chrome-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
site/static/apple-touch-icon.png
Normal file
BIN
site/static/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
site/static/favicon-16x16.png
Normal file
BIN
site/static/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 568 B |
BIN
site/static/favicon-32x32.png
Normal file
BIN
site/static/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
25
site/static/manifest.json
Normal file
25
site/static/manifest.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"short_name": "Forget Me Not",
|
||||
"name": "Forget Me Not",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "android-chrome-192x192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "android-chrome-512x512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
3
site/static/robots.txt
Normal file
3
site/static/robots.txt
Normal file
@@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
Reference in New Issue
Block a user