Switch out create-react-app site for gatsby site
This commit is contained in:
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
|
||||
}
|
||||
}
|
||||
69
site/.gitignore
vendored
Normal file
69
site/.gitignore
vendored
Normal file
@@ -0,0 +1,69 @@
|
||||
# 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
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Typescript v1 declaration files
|
||||
typings/
|
||||
|
||||
# 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
|
||||
|
||||
# Yarn
|
||||
yarn-error.log
|
||||
.pnp/
|
||||
.pnp.js
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
4
site/.prettierignore
Normal file
4
site/.prettierignore
Normal file
@@ -0,0 +1,4 @@
|
||||
.cache
|
||||
package.json
|
||||
package-lock.json
|
||||
public
|
||||
14
site/LICENSE
Normal file
14
site/LICENSE
Normal file
@@ -0,0 +1,14 @@
|
||||
The BSD Zero Clause License (0BSD)
|
||||
|
||||
Copyright (c) 2020 Gatsby Inc.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
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 -->
|
||||
|
||||
10
site/gatsby-config.js
Normal file
10
site/gatsby-config.js
Normal file
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* Configure your Gatsby site with this file.
|
||||
*
|
||||
* See: https://www.gatsbyjs.com/docs/gatsby-config/
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
/* Your site config here */
|
||||
plugins: [],
|
||||
};
|
||||
@@ -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 |
BIN
site/static/favicon.ico
Normal file
BIN
site/static/favicon.ico
Normal file
Binary file not shown.
|
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