diff --git a/site/.gitignore b/site/.gitignore new file mode 100644 index 0000000..d436c6d --- /dev/null +++ b/site/.gitignore @@ -0,0 +1,18 @@ +# build output +dist + +# dependencies +node_modules/ +.snowpack/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/site/.npmrc b/site/.npmrc new file mode 100644 index 0000000..0cc653b --- /dev/null +++ b/site/.npmrc @@ -0,0 +1,2 @@ +## force pnpm to hoist +shamefully-hoist = true \ No newline at end of file diff --git a/site/.stackblitzrc b/site/.stackblitzrc new file mode 100644 index 0000000..43798ec --- /dev/null +++ b/site/.stackblitzrc @@ -0,0 +1,6 @@ +{ + "startCommand": "npm start", + "env": { + "ENABLE_CJS_IMPORTS": true + } +} \ No newline at end of file diff --git a/site/README.md b/site/README.md index 9c40dcd..1b16a82 100644 --- a/site/README.md +++ b/site/README.md @@ -1,68 +1,42 @@ -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). +# Welcome to [Astro](https://astro.build) -## Available Scripts +[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/snowpackjs/astro/tree/latest/examples/starter) -In the project directory, you can run: +> πŸ§‘β€πŸš€ **Seasoned astronaut?** Delete this file. Have fun! -### `yarn start` +## πŸš€ Project Structure -Runs the app in the development mode.
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser. +Inside of your Astro project, you'll see the following folders and files: -The page will reload if you make edits.
-You will also see any lint errors in the console. +``` +/ +β”œβ”€β”€ public/ +β”‚ β”œβ”€β”€ robots.txt +β”‚ └── favicon.ico +β”œβ”€β”€ src/ +β”‚ β”œβ”€β”€ components/ +β”‚ β”‚ └── Tour.astro +β”‚ └── pages/ +β”‚ └── index.astro +└── package.json +``` -### `yarn test` +Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. -Launches the test runner in the interactive watch mode.
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. +There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. -### `yarn build` +Any static assets, like images, can be placed in the `public/` directory. -Builds the app for production to the `build` folder.
-It correctly bundles React in production mode and optimizes the build for the best performance. +## 🧞 Commands -The build is minified and the filenames include the hashes.
-Your app is ready to be deployed! +All commands are run from the root of the project, from a terminal: -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. +| Command | Action | +|:----------------|:--------------------------------------------| +| `npm install` | Installs dependencies | +| `npm run dev` | Starts local dev server at `localhost:3000` | +| `npm run build` | Build your production site to `./dist/` | -### `yarn eject` +## πŸ‘€ Want to learn more? -**Note: this is a one-way operation. Once you `eject`, you can’t go back!** - -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. - -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. - -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. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -To learn React, check out the [React documentation](https://reactjs.org/). - -### Code Splitting - -This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting - -### Analyzing the Bundle Size - -This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size - -### Making a Progressive Web App - -This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app - -### Advanced Configuration - -This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration - -### Deployment - -This section has moved here: https://facebook.github.io/create-react-app/docs/deployment - -### `yarn build` fails to minify - -This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify +Feel free to check [our documentation](https://github.com/snowpackjs/astro) or jump into our [Discord server](https://astro.build/chat). diff --git a/site/astro.config.mjs b/site/astro.config.mjs new file mode 100644 index 0000000..9d9f9e1 --- /dev/null +++ b/site/astro.config.mjs @@ -0,0 +1,18 @@ +export default { + // projectRoot: '.', // Where to resolve all URLs relative to. Useful if you have a monorepo project. + // pages: './src/pages', // Path to Astro components, pages, and data + // dist: './dist', // When running `astro build`, path to final static output + // public: './public', // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing. + buildOptions: { + // site: 'http://example.com', // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs. + sitemap: true, // Generate sitemap (set to "false" to disable) + }, + devOptions: { + // hostname: 'localhost', // The hostname to run the dev server on. + // port: 3000, // The port to run the dev server on. + // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' + }, + renderers: [ + "@astrojs/renderer-react" + ], +}; diff --git a/site/package.json b/site/package.json index 9525e65..02afecf 100644 --- a/site/package.json +++ b/site/package.json @@ -1,37 +1,15 @@ { - "name": "serverless-fullstack-app-website", - "version": "0.1.0", + "name": "@example/starter", + "version": "0.0.1", "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" + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview" }, - "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" - ] + "devDependencies": { + "astro": "^0.20.7", + "@astrojs/renderer-react": "^0.2.1" } } diff --git a/site/public/android-chrome-192x192.png b/site/public/android-chrome-192x192.png deleted file mode 100644 index 050fdbf..0000000 Binary files a/site/public/android-chrome-192x192.png and /dev/null differ diff --git a/site/public/android-chrome-512x512.png b/site/public/android-chrome-512x512.png deleted file mode 100644 index 5e1f8ee..0000000 Binary files a/site/public/android-chrome-512x512.png and /dev/null differ diff --git a/site/public/apple-touch-icon.png b/site/public/apple-touch-icon.png deleted file mode 100644 index eadddf2..0000000 Binary files a/site/public/apple-touch-icon.png and /dev/null differ diff --git a/site/public/assets/logo.svg b/site/public/assets/logo.svg new file mode 100644 index 0000000..d751556 --- /dev/null +++ b/site/public/assets/logo.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/site/public/favicon-16x16.png b/site/public/favicon-16x16.png deleted file mode 100644 index 8a3c249..0000000 Binary files a/site/public/favicon-16x16.png and /dev/null differ diff --git a/site/public/favicon-32x32.png b/site/public/favicon-32x32.png deleted file mode 100644 index 0624682..0000000 Binary files a/site/public/favicon-32x32.png and /dev/null differ diff --git a/site/public/favicon.ico b/site/public/favicon.ico index abca195..9795f8e 100644 Binary files a/site/public/favicon.ico and b/site/public/favicon.ico differ diff --git a/site/public/index.html b/site/public/index.html deleted file mode 100644 index 8263f8f..0000000 --- a/site/public/index.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - Forget Me Not - - - -
- - diff --git a/site/public/manifest.json b/site/public/manifest.json deleted file mode 100644 index 2ffa886..0000000 --- a/site/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "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" -} diff --git a/site/public/robots.txt b/site/public/robots.txt index e9e57dc..1f53798 100644 --- a/site/public/robots.txt +++ b/site/public/robots.txt @@ -1,3 +1,2 @@ -# https://www.robotstxt.org/robotstxt.html User-agent: * -Disallow: +Disallow: / diff --git a/site/public/style/global.css b/site/public/style/global.css new file mode 100644 index 0000000..e1a3a6b --- /dev/null +++ b/site/public/style/global.css @@ -0,0 +1,28 @@ +* { + box-sizing: border-box; + margin: 0; +} + +:root { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; + font-size: 1rem; + --user-font-scale: 1rem - 16px; + font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem); +} + +body { + padding: 4rem 2rem; + width: 100%; + min-height: 100vh; + display: grid; + justify-content: center; + background: #f9fafb; + color: #111827; +} + +@media (prefers-color-scheme: dark) { + body { + background: #111827; + color: #fff; + } +} diff --git a/site/public/style/home.css b/site/public/style/home.css new file mode 100644 index 0000000..39de76a --- /dev/null +++ b/site/public/style/home.css @@ -0,0 +1,53 @@ +:root { + --font-mono: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', + 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; + --color-light: #f3f4f6; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-light: #1f2937; + } +} + +a { + color: inherit; +} + +header > div { + font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem); +} + +header > div { + display: flex; + flex-direction: column; + align-items: center; +} + +header h1 { + font-size: 1em; + font-weight: 500; +} +header img { + width: 2em; + height: 2.667em; +} + +h2 { + font-weight: 500; + font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem); +} + +.counter { + display: grid; + grid-auto-flow: column; + gap: 1em; + font-size: 2rem; + justify-content: center; + padding: 2rem 1rem; +} + +.counter > pre { + text-align: center; + min-width: 3ch; +} diff --git a/site/sandbox.config.json b/site/sandbox.config.json new file mode 100644 index 0000000..9178af7 --- /dev/null +++ b/site/sandbox.config.json @@ -0,0 +1,11 @@ +{ + "infiniteLoopProtection": true, + "hardReloadOnChange": false, + "view": "browser", + "template": "node", + "container": { + "port": 3000, + "startScript": "start", + "node": "14" + } +} diff --git a/site/serverless.yml b/site/serverless.yml index 845044b..f8d2181 100644 --- a/site/serverless.yml +++ b/site/serverless.yml @@ -6,6 +6,6 @@ inputs: src: src: ./ hook: npm run build - dist: build + dist: dist # Enable this when you want to set a custom domain. # domain: ${env:domain} diff --git a/site/src/App.js b/site/src/App.js deleted file mode 100644 index ce17c13..0000000 --- a/site/src/App.js +++ /dev/null @@ -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 ( - - - - - - - - - - - - - - - - ) - } -} - -/** - * 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 -} \ No newline at end of file diff --git a/site/src/App.module.css b/site/src/App.module.css deleted file mode 100644 index 14936b8..0000000 --- a/site/src/App.module.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/site/src/components/ReactCounter.jsx b/site/src/components/ReactCounter.jsx new file mode 100644 index 0000000..ca34627 --- /dev/null +++ b/site/src/components/ReactCounter.jsx @@ -0,0 +1,15 @@ +import { useState } from 'react'; + +export default function ReactCounter() { + const [count, setCount] = useState(0); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); + + return ( +
+ + 
{count}
+ +
+ ); +} diff --git a/site/src/components/Tour.astro b/site/src/components/Tour.astro new file mode 100644 index 0000000..71dbb74 --- /dev/null +++ b/site/src/components/Tour.astro @@ -0,0 +1,85 @@ +--- +import { Markdown } from 'astro/components'; +--- +
+ + +
+ + ## πŸš€ Project Structure + + Inside of your Astro project, you'll see the following folders and files: + + ``` + / + β”œβ”€β”€ public/ + β”‚ β”œβ”€β”€ robots.txt + β”‚ └── favicon.ico + β”œβ”€β”€ src/ + β”‚ β”œβ”€β”€ components/ + β”‚ β”‚ └── Tour.astro + β”‚ └── pages/ + β”‚ └── index.astro + └── package.json + ``` + + Astro looks for `.astro` or `.md` files in the `src/pages/` directory. + Each page is exposed as a route based on its file name. + + There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. + + Any static assets, like images, can be placed in the `public/` directory. + +
+ +
+

πŸ‘€ Want to learn more?

+

Feel free to check our documentation or jump into our Discord server.

+
+ +
+ + diff --git a/site/src/fragments/Loading/Loading.js b/site/src/fragments/Loading/Loading.js deleted file mode 100644 index a6d7725..0000000 --- a/site/src/fragments/Loading/Loading.js +++ /dev/null @@ -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 ( -
-
- - {`Loading`} - -

loading...

- -
-
- ) - } -} \ No newline at end of file diff --git a/site/src/fragments/Loading/Loading.module.css b/site/src/fragments/Loading/Loading.module.css deleted file mode 100644 index 6e319f5..0000000 --- a/site/src/fragments/Loading/Loading.module.css +++ /dev/null @@ -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); - } -} - diff --git a/site/src/fragments/Loading/index.js b/site/src/fragments/Loading/index.js deleted file mode 100644 index 51e3f8b..0000000 --- a/site/src/fragments/Loading/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Loading' \ No newline at end of file diff --git a/site/src/index.css b/site/src/index.css deleted file mode 100644 index 5ee888f..0000000 --- a/site/src/index.css +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/site/src/index.js b/site/src/index.js deleted file mode 100644 index 9e3c542..0000000 --- a/site/src/index.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom' -import App from './App' -import './index.css' - -/** - * Render App - */ - -ReactDOM.render( - - - , - document.getElementById('root') -) \ No newline at end of file diff --git a/site/src/pages/Auth/Auth.js b/site/src/pages/Auth/Auth.js deleted file mode 100644 index 3477728..0000000 --- a/site/src/pages/Auth/Auth.js +++ /dev/null @@ -1,249 +0,0 @@ -import React, { Component } from 'react' -import { - Link, - withRouter, -} from 'react-router-dom' -import Loading from '../../fragments/Loading' -import styles from './Auth.module.css' -import { - userRegister, - userLogin, - userGet, - saveSession, -} from '../../utils' - -class Auth extends Component { - - constructor(props) { - super(props) - - const pathName = window.location.pathname.replace('/', '') - - this.state = {} - this.state.state = pathName - this.state.loading = true - this.state.error = null - this.state.formEmail = '' - this.state.formPassword = '' - - // Bindings - this.handleFormInput = this.handleFormInput.bind(this) - this.handleFormSubmit = this.handleFormSubmit.bind(this) - this.handleFormTypeChange = this.handleFormTypeChange.bind(this) - } - - /** - * Component did mount - */ - componentDidMount() { - this.setState({ - loading: false - }) - - // Clear query params - const url = document.location.href - window.history.pushState({}, '', url.split('?')[0]) - } - - /** - * Handles a form change - */ - handleFormTypeChange(type) { - this.setState({ state: type }, - () => { - this.props.history.push(`/${type}`) - }) - } - - /** - * Handle text changes within form fields - */ - handleFormInput(field, value) { - value = value.trim() - - const nextState = {} - nextState[field] = value - - this.setState(Object.assign(this.state, nextState)) - } - - /** - * Handles form submission - * @param {object} evt - */ - async handleFormSubmit(evt) { - evt.preventDefault() - - this.setState({ loading: true }) - - // Validate email - if (!this.state.formEmail) { - return this.setState({ - loading: false, - formError: 'email is required' - }) - } - - // Validate password - if (!this.state.formPassword) { - return this.setState({ - loading: false, - formError: 'password is required' - }) - } - - let token - try { - if (this.state.state === 'register') { - token = await userRegister(this.state.formEmail, this.state.formPassword) - } else { - token = await userLogin(this.state.formEmail, this.state.formPassword) - } - } catch (error) { - console.log(error) - if (error.message) { - this.setState({ - formError: error.message, - loading: false - }) - } else { - this.setState({ - formError: 'Sorry, something unknown went wrong. Please try again.', - loading: false - }) - } - return - } - - // Fetch user record and set session in cookie - let user = await userGet(token.token) - user = user.user - saveSession(user.id, user.email, token.token) - - window.location.replace('/') - } - - render() { - - return ( -
-
- - { /* Logo */} - - - serverless-fullstack-application - - - { /* Loading */} - - {this.state.loading && ( -
- {< Loading className={styles.containerLoading} />} -
- )} - - { /* Registration Form */} - - {!this.state.loading && ( -
-
{ this.handleFormTypeChange('register') }}> - Register -
-
{ this.handleFormTypeChange('login') }}> - Sign-In -
-
- )} - - {this.state.state === 'register' && !this.state.loading && ( -
- -
-
- - { this.handleFormInput('formEmail', e.target.value) }} - /> -
-
- - { this.handleFormInput('formPassword', e.target.value) }} - /> -
- - {this.state.formError && ( -
{this.state.formError}
- )} - - - -
-
- )} - - {this.state.state === 'login' && !this.state.loading && ( -
- -
-
- - { this.handleFormInput('formEmail', e.target.value) }} - /> -
-
- - { this.handleFormInput('formPassword', e.target.value) }} - /> -
- - {this.state.formError && ( -
{this.state.formError}
- )} - - -
-
- )} -
-
- ) - } -} - -export default withRouter(Auth) \ No newline at end of file diff --git a/site/src/pages/Auth/Auth.module.css b/site/src/pages/Auth/Auth.module.css deleted file mode 100644 index 044b349..0000000 --- a/site/src/pages/Auth/Auth.module.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/site/src/pages/Dashboard/Dashboard.js b/site/src/pages/Dashboard/Dashboard.js deleted file mode 100644 index 20dfd8d..0000000 --- a/site/src/pages/Dashboard/Dashboard.js +++ /dev/null @@ -1,82 +0,0 @@ -import React, { Component } from 'react' -import { - withRouter -} from 'react-router-dom' -import styles from './Dashboard.module.css' -import { - getSession, - deleteSession -} from '../../utils' - -class Dashboard extends Component { - - constructor(props) { - super(props) - this.state = {} - - // Bindings - this.logout = this.logout.bind(this) - } - - async componentDidMount() { - - const userSession = getSession() - - this.setState({ - session: userSession, - }) - } - - /** - * Log user out by clearing cookie and redirecting - */ - logout() { - deleteSession() - this.props.history.push(`/`) - } - - render() { - - return ( -
-
- - { /* Navigation */ } - -
-
- { this.state.session ? this.state.session.userEmail : '' } -
-
- logout -
-
- - { /* Content */ } - -
- -
- serverless-fullstack-application -
- -
- Welcome to your serverless fullstack dashboard... -
- -
- -
-
- ) - } -} - -export default withRouter(Dashboard) \ No newline at end of file diff --git a/site/src/pages/Dashboard/Dashboard.module.css b/site/src/pages/Dashboard/Dashboard.module.css deleted file mode 100644 index 9bcde3f..0000000 --- a/site/src/pages/Dashboard/Dashboard.module.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/site/src/pages/Home/Home.js b/site/src/pages/Home/Home.js deleted file mode 100644 index a9675d7..0000000 --- a/site/src/pages/Home/Home.js +++ /dev/null @@ -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 ( -
-
- - { /* Hero Artwork */} - -
- serverless-fullstack-application -
-
- serverless-fullstack-application -
- - { /* Hero Description */} - -
- A serverless full-stack application built with AWS Lambda, AWS HTTP API, Express.js, React & AWS DynamoDB. -
- - { /* Call To Action */} - -
- - - - - - sign-in -
-
-
- ) - } -} - -export default withRouter(Home) \ No newline at end of file diff --git a/site/src/pages/Home/Home.module.css b/site/src/pages/Home/Home.module.css deleted file mode 100644 index f30d520..0000000 --- a/site/src/pages/Home/Home.module.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro new file mode 100644 index 0000000..60ba465 --- /dev/null +++ b/site/src/pages/index.astro @@ -0,0 +1,58 @@ +--- +// Component Imports +import Tour from '../components/Tour.astro'; +// You can import components from any supported Framework here! +import ReactCounter from '../components/ReactCounter.jsx'; + +// Component Script: +// You can write any JavaScript/TypeScript that you'd like here. +// It will run during the build, but never in the browser. +// All variables are available to use in the HTML template below. +let title = 'My Astro Site'; + +// Full Astro Component Syntax: +// https://docs.astro.build/core-concepts/astro-components/ +--- + + + + + {title} + + + + + + + + + +
+
+
+ Astro logo +

Welcome to Astro

+
+
+ + + + + +
+ + diff --git a/site/src/utils/helpers.js b/site/src/utils/helpers.js deleted file mode 100644 index 73c63ac..0000000 --- a/site/src/utils/helpers.js +++ /dev/null @@ -1,76 +0,0 @@ -import Cookies from 'js-cookie' - -/** - * Format Org and Username correctly for the Serverless Platform backend - */ -export const formatOrgAndUsername = (name = '') => { - name = name.toString().toLowerCase().replace(/[^a-z\d-]+/gi, '-') - // Remove multiple instances of hyphens - name = name.replace(/-{2,}/g, '-') - if (name.length > 40) { - name = name.substring(0, 40) - } - return name -} - -/** - * Parse query parameters in a URL - * @param {*} searchString - */ -export const parseQueryParams = (searchString = null) => { - if (!searchString) { - return null - } - - // Clone string - let clonedParams = (' ' + searchString).slice(1) - - return clonedParams - .substr(1) - .split('&') - .filter((el) => el.length) - .map((el) => el.split('=')) - .reduce( - (accumulator, currentValue) => - Object.assign(accumulator, { - [decodeURIComponent(currentValue.shift())]: decodeURIComponent(currentValue.pop()) - }), - {} - ) -} - -/** - * Parse hash fragment parameters in a URL - */ -export const parseHashFragment = (hashString) => { - const hashData = {} - let hash = decodeURI(hashString) - hash = hash.split('&') - hash.forEach((val) => { - val = val.replace('#', '') - hashData[val.split('=')[0]] = val.split('=')[1] - }) - return hashData -} - -/** - * Save session in browser cookie - */ -export const saveSession = (userId, userEmail, userToken) => { - Cookies.set('serverless', { userId, userEmail, userToken }) -} - -/** - * Get session in browser cookie - */ -export const getSession = () => { - const data = Cookies.get('serverless') - return data ? JSON.parse(data) : null -} - -/** - * Delete session in browser cookie - */ -export const deleteSession = () => { - Cookies.remove('serverless') -} \ No newline at end of file diff --git a/site/src/utils/index.js b/site/src/utils/index.js index 5bfa17a..201fc0f 100644 --- a/site/src/utils/index.js +++ b/site/src/utils/index.js @@ -1,2 +1 @@ -export * from './helpers' export * from './api' \ No newline at end of file diff --git a/site/tsconfig.json b/site/tsconfig.json new file mode 100644 index 0000000..44465b1 --- /dev/null +++ b/site/tsconfig.json @@ -0,0 +1,3 @@ +{ + "moduleResolution": "node" +}