diff --git a/.gitignore b/.gitignore index 4b3d9eb..7b65aa4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,29 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + node_modules package-lock.json -.env \ No newline at end of file +.env + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..3f77cd8 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,22 @@ +{ + "workbench.colorCustomizations": { + "activityBar.activeBackground": "#3399ff", + "activityBar.activeBorder": "#bf0060", + "activityBar.background": "#3399ff", + "activityBar.foreground": "#15202b", + "activityBar.inactiveForeground": "#15202b99", + "activityBarBadge.background": "#bf0060", + "activityBarBadge.foreground": "#e7e7e7", + "sash.hoverBorder": "#3399ff", + "statusBar.background": "#007fff", + "statusBar.foreground": "#e7e7e7", + "statusBarItem.hoverBackground": "#3399ff", + "statusBarItem.remoteBackground": "#007fff", + "statusBarItem.remoteForeground": "#e7e7e7", + "titleBar.activeBackground": "#007fff", + "titleBar.activeForeground": "#e7e7e7", + "titleBar.inactiveBackground": "#007fff99", + "titleBar.inactiveForeground": "#e7e7e799" + }, + "peacock.color": "#007fff" +} \ No newline at end of file diff --git a/index.js b/index.js deleted file mode 100644 index a02e4f6..0000000 --- a/index.js +++ /dev/null @@ -1,87 +0,0 @@ -const Express = require('express') -const app = Express() -const port = (process.env.PORT || 3030) - -const axios = require('axios') -require('dotenv').config() - -const favicon = require('serve-favicon'); -app.use(favicon(__dirname + '/public/favicon.ico')); - -const hbs = require('hbs') - -hbs.registerPartials(__dirname + '/views/partials') -app.set('view engine', 'hbs') - -app.use(Express.static('public')); - -app.get('/', (req, res) => { - res.render('index') -}) - -app.get('/auth', async (req, res) => { - - async function requestAccessToken() { - try { - const reqData = { - code: req.query.code, - grant_type: "authorization_code", - redirect_uri: "https://telegram-to-notion.herokuapp.com/auth" - } - - const auth = { - Authorization: "Basic " + Buffer.from(`${process.env.NOTION_INTEGRATION_ID}:${process.env.NOTION_INTEGRATION_SECRET}`).toString('base64') - } - - console.log(auth) - - const response = await axios({ - method: "POST", - url: "https://api.notion.com/v1/oauth/token", - data: reqData, - auth: { - username: Buffer.from(process.env.NOTION_INTEGRATION_ID.toString('base64')), - password: Buffer.from(process.env.NOTION_INTEGRATION_SECRET.toString('base64')) - } //THANK YOU https://stackoverflow.com/questions/67534080/notion-api-invalid-client-oauth-integration/68699544#68699544?newreg=949504cf865c4a52b2c0ce7afe936c9b - }) - - console.log(response.status) //400 in positive case - console.log(response.data) - - /** - * access_token: string, - * token_type: string, - * bot_id: string, - * workspace_name: string, - * workspace_icon: string, - * workspace_id: string - */ - - return response - } - catch (error) { - console.log("error") - console.log(error) - - return {status: 400} - } - } - - const response = await requestAccessToken() - - res.render('auth', { - name: "fran", - success: response.status === 200 ? true : false, - data: response.data - }) -}) - -app.get('/privacy-policy', (req, res) => { - res.render('privacy-policy') -}) - -app.get('/terms-of-use', (req, res) => { - res.render('terms-of-use') -}) - -app.listen(port, () => console.log('port', port)) \ No newline at end of file diff --git a/package.json b/package.json index 1ac8c52..dda291d 100644 --- a/package.json +++ b/package.json @@ -1,29 +1,42 @@ { "name": "telegram-to-notion-website", - "version": "1.0.0", - "description": "Website for the Telegram to Notion Bot", - "main": "index.js", - "scripts": { - "dev": "nodemon index.js", - "start": "node index.js" - }, - "keywords": [ - "telegram", - "notion", - "bot", - "website" - ], - "author": "FranP-Code", - "license": "ISC", - "devDependencies": { - "nodemon": "^2.0.15" - }, + "version": "0.1.0", + "private": true, "dependencies": { + "@testing-library/jest-dom": "^5.16.4", + "@testing-library/react": "^13.0.1", + "@testing-library/user-event": "^13.5.0", + "@uiball/loaders": "^1.2.4", "axios": "^0.26.1", - "dotenv": "^16.0.0", - "express": "^4.17.3", - "hbs": "^4.2.0", - "path": "^0.12.7", - "serve-favicon": "^2.5.0" + "react": "^18.0.0", + "react-dom": "^18.0.0", + "react-scripts": "5.0.1", + "styled-components": "^5.3.5", + "web-vitals": "^2.1.4", + "wouter": "^2.8.0-alpha.2" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] } } diff --git a/public/_redirects b/public/_redirects new file mode 100644 index 0000000..f824337 --- /dev/null +++ b/public/_redirects @@ -0,0 +1 @@ +/* /index.html 200 \ No newline at end of file diff --git a/public/css/auth.css b/public/css/auth.css deleted file mode 100644 index f5a785c..0000000 --- a/public/css/auth.css +++ /dev/null @@ -1,29 +0,0 @@ -.request-success { - - display: flex; - align-items: center; - - background-color: #ffebcd; - - padding: 3vh 0px 3vh 2vw; - - user-select: all; - -webkit-user-select: all; -} - -.request-success code { - overflow-wrap: anywhere; -} - -.request-success img { - - width: 50px; - - margin-right: 3vw; - - user-select: none; -} - -.request-error { - color: rgb(143, 0, 0) -} \ No newline at end of file diff --git a/public/css/global.css b/public/css/global.css deleted file mode 100644 index c20e0a9..0000000 --- a/public/css/global.css +++ /dev/null @@ -1,21 +0,0 @@ -html, body { - margin: 0; - padding: 0; -} - -body { - margin: 0vh 3vw; - font-family: 'Be Vietnam Pro', sans-serif; -} - -#beta-banner { - background-color: #F38181; - color: #393E46; - - padding: 2vh 0.5vw; - margin: 0px -3vw; -} - -#beta-banner p { - margin: 0; -} \ No newline at end of file diff --git a/public/css/index.css b/public/css/index.css deleted file mode 100644 index 2a346e1..0000000 --- a/public/css/index.css +++ /dev/null @@ -1,26 +0,0 @@ -.main { - display: flex; - flex-direction: column; -} - -.button { - width: fit-content; - - background-color: #4797ff; - color: #fff; - - padding: 2vh 5vw; - - border-radius: 5px; - - text-decoration: none; - font-weight: bold; -} - -ul { - margin-top: 5vh; -} -ul li{ - font-size: 20pt; - font-weight: bold; -} \ No newline at end of file diff --git a/public/favicon.ico b/public/favicon.ico index b69e332..04ffce0 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..5b58cf0 --- /dev/null +++ b/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + Telegram to Notion Bot + + + +
+ + + diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..080d6c7 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/readme.MD b/readme.MD deleted file mode 100644 index 7d112d8..0000000 --- a/readme.MD +++ /dev/null @@ -1,20 +0,0 @@ -# Telegram to Notion Bot's website - -This is the complementary platform to the [Telegram to Notion Bot](https://t.me/TelegrmToNotionBot). - - - -Right now is on **beta version**, because it haves all the features needed but it needs a little more of styling in the differents pages. - -## Link - -**[Here](https://telegram-to-notion.herokuapp.com) you can visit it** - -## Credits - -- Copy icon from [feather](https://feathericons.com) -- Main font is [Be Vietnam Pro](https://fonts.google.com/specimen/Be+Vietnam+Pro) - -## Additional - -Dont forget to check also the [Telegram to Notion Bot](https://github.com/FranP-code/Telegram-to-Notion-Bot) repository. diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 0000000..2dc65c7 --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,27 @@ +import React from 'react' +import {Route} from 'wouter' + +//Components +import Header from './components/Header/Header' + +//Pages +import About from './Pages/About/About' +import Auth from './Pages/Auth/Auth' +import PrivacyPolicy from './Pages/PrivacyPolicy/PrivacyPolicy' +import TermsOfUse from './Pages/TermsOfUse/TermsOfUse' +import Index from './Pages/Index/Index' + +function App() { + return ( + <> +
+ } /> + } /> + } /> + } /> + } /> + + ); +} + +export default App; \ No newline at end of file diff --git a/src/Pages/About/About.jsx b/src/Pages/About/About.jsx new file mode 100644 index 0000000..b6e6a4c --- /dev/null +++ b/src/Pages/About/About.jsx @@ -0,0 +1,50 @@ +import React from 'react' +import styled from 'styled-components' +import { Link } from 'wouter' + +const About = () => { + + const Style = styled.main` + padding: 0px 3vw; + + section { + margin-bottom: 5vh; + } + + a { + color: #4d77ff + } + ` + + return ( + + ) +} + +export default About \ No newline at end of file diff --git a/src/Pages/Auth/Auth.jsx b/src/Pages/Auth/Auth.jsx new file mode 100644 index 0000000..07b34fa --- /dev/null +++ b/src/Pages/Auth/Auth.jsx @@ -0,0 +1,103 @@ +import React, {useState} from "react" +import axios from 'axios' + +import Loading from "../../components/Loading/Loading" + +import authImage from './auth_copy.svg' + +import './auth-style.css' +import Notification from "../../components/Notification/Notification" + +function Auth() { + + const [loading, setLoading] = useState(true) + const [permanentCode, setPermanentCode] = useState(false) + const [notification, setNotification] = useState(false) + + const getPermanentCode = () => { + + const temporalCode = new URLSearchParams(window.location.search).get("code") + + if (!temporalCode) { + setPermanentCode("empty") + setLoading(false) + return + } + + let requestUrl + + if (process.env.REACT_APP_ENV_MODE === "production") { + requestUrl = "http://localhost:5050/api/v1/auth" + } else { + requestUrl = "https://telegram-to-notion-backend.herokuapp.com/api/v1/auth" + } + + axios({ + method: "POST", + url: requestUrl, + headers: {'Content-Type': 'application/json'}, + data: {code: temporalCode} + }) + .then(res => { + console.log(res) + setPermanentCode(res ? res.data : null) + }) + .catch(err => { + console.log(err.response) + setPermanentCode(false) + }) + .finally(() => { + setLoading(false) + }) + } + React.useEffect(() => { + getPermanentCode() + }, []) + + + return ( +
+ { + loading ? + + : + <> + { + permanentCode && permanentCode !== "empty" ? + <> +

Copy the following code on Telegram chat

+
+ Copy text + { + navigator.clipboard.writeText(permanentCode) + setNotification("Text copied to clipboard!") + }} + > + {permanentCode} + +
+ + : + <> + { + permanentCode === "empty" ? +
+

There is no temporal code. Please try again later.

+
+ : +
+

There has been an error getting the code. Please try again later.

+
+ } + + } + + } + +
+ ) +} + +export default Auth \ No newline at end of file diff --git a/src/Pages/Auth/auth-style.css b/src/Pages/Auth/auth-style.css new file mode 100644 index 0000000..9a46685 --- /dev/null +++ b/src/Pages/Auth/auth-style.css @@ -0,0 +1,27 @@ +.auth { + padding: 1vh 3vw; +} +.auth h2, .auth h3 { + margin-top: 5vh; +} +.auth .success { + display: flex; + align-items: center; + background-color: #ffebcd; + padding: 5vh 2vw; + margin-top: 5vh; + border-radius: 20px; +} +.auth .success img { + width: 75px; + height: 75px; + margin-right: 3vw; +} +.auth .success .code-selection { + -webkit-user-select: all; + -moz-user-select: all; + user-select: all; + overflow-wrap: anywhere; + color: rgb(73, 70, 50); + font-size: 1.2em; +}/*# sourceMappingURL=auth-style.css.map */ \ No newline at end of file diff --git a/src/Pages/Auth/auth-style.css.map b/src/Pages/Auth/auth-style.css.map new file mode 100644 index 0000000..3fd769f --- /dev/null +++ b/src/Pages/Auth/auth-style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["auth-style.scss","auth-style.css"],"names":[],"mappings":"AAAA;EACI,gBAAA;ACCJ;ADCI;EACI,eAAA;ACCR;ADEI;EAEI,aAAA;EACA,mBAAA;EAEA,yBAAA;EAEA,gBAAA;EAEA,eAAA;EAEA,mBAAA;ACLR;ADOQ;EACI,WAAA;EACA,YAAA;EAEA,iBAAA;ACNZ;ADSQ;EACI,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,uBAAA;EAEA,sBAAA;EACA,gBAAA;ACRZ","file":"auth-style.css"} \ No newline at end of file diff --git a/src/Pages/Auth/auth-style.scss b/src/Pages/Auth/auth-style.scss new file mode 100644 index 0000000..21915ad --- /dev/null +++ b/src/Pages/Auth/auth-style.scss @@ -0,0 +1,37 @@ +.auth { + padding: 1vh 3vw; + + h2, h3 { + margin-top: 5vh; + } + + .success { + + display: flex; + align-items: center; + + background-color: #ffebcd; + + padding: 5vh 2vw; + + margin-top: 5vh; + + border-radius: 20px; + + img { + width: 75px; + height: 75px; + + margin-right: 3vw; + } + + .code-selection { + user-select: all; + overflow-wrap: anywhere; + + color: rgb(73, 70, 50); + font-size: 1.2em; + + } + } +} \ No newline at end of file diff --git a/public/img/auth_copy.svg b/src/Pages/Auth/auth_copy.svg similarity index 100% rename from public/img/auth_copy.svg rename to src/Pages/Auth/auth_copy.svg diff --git a/src/Pages/Index/Index.jsx b/src/Pages/Index/Index.jsx new file mode 100644 index 0000000..a060059 --- /dev/null +++ b/src/Pages/Index/Index.jsx @@ -0,0 +1,111 @@ +import background from './background.svg' +import styled from "styled-components" + +function Index() { + + const IndexStyles = styled.div` + + height: calc(100vh - 15vh - 1px); //Minus header height and 1 pixel for prevent scrollbar + width: 100%; + + display: flex; + flex-direction: column; + + aspect-ratio: 960/300; + + background-image: url(${background}); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + .title-list { + + color: #000; + + li { + + display: flex; + align-items: flex-end; + + margin-bottom: 1vh; + + a { + + width: fit-content; + color: #000; + text-decoration: none; + + &:hover h2 { + text-decoration: underline!important; + } + } + + h2 { + display: inline-block; + margin: 0; + font-size: 25pt; + } + + span { + display: inline-block; + + color: #999; + + margin-top: 5px; + + align-self: center; + } + } + } + + .link-to-bot { + + width: fit-content; + + color: #fff; + background-color: #4797ff; + + border-radius: 5px; + + margin-top: 3vh; + margin-left: 1vw; + padding: 3vh 6vw; + + font-size: 20pt; + font-weight: bold; + text-decoration: none; + + transition: 0.4s ease-in-out; + + &:hover { + background-color: #0088cc; + transition: 0.4s ease-in-out; + } + } + ` + + const listData = [ + {text: "Free"}, + {text: "Open Source", link: "https://github.com/FranP-code/Telegram-to-Notion-Bot"}, + {text: "Unlimited"}, + {text: "Forever", secondaryText: "(while I can afford it)"} + ] + + return ( + + + + + ) +} + +export default Index \ No newline at end of file diff --git a/src/Pages/Index/background.svg b/src/Pages/Index/background.svg new file mode 100644 index 0000000..89d7bdd --- /dev/null +++ b/src/Pages/Index/background.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Pages/Index/icon (rounded borders).png b/src/Pages/Index/icon (rounded borders).png new file mode 100644 index 0000000..da6f91a Binary files /dev/null and b/src/Pages/Index/icon (rounded borders).png differ diff --git a/views/privacy-policy.hbs b/src/Pages/PrivacyPolicy/PrivacyPolicy.jsx similarity index 98% rename from views/privacy-policy.hbs rename to src/Pages/PrivacyPolicy/PrivacyPolicy.jsx index d6e50a2..59d4439 100644 --- a/views/privacy-policy.hbs +++ b/src/Pages/PrivacyPolicy/PrivacyPolicy.jsx @@ -1,9 +1,9 @@ -{{> global }} +import React from 'react' - - {{> betaBanner }} -
-

Privacy Policy

+const PrivacyPolicy = () => { + return ( + - \ No newline at end of file +
+ ) +} + +export default PrivacyPolicy \ No newline at end of file diff --git a/views/terms-of-use.hbs b/src/Pages/TermsOfUse/TermsOfUse.jsx similarity index 97% rename from views/terms-of-use.hbs rename to src/Pages/TermsOfUse/TermsOfUse.jsx index 72c20d8..33cbe57 100644 --- a/views/terms-of-use.hbs +++ b/src/Pages/TermsOfUse/TermsOfUse.jsx @@ -1,8 +1,8 @@ -{{> global cssFile="index"}} - - {{> betaBanner }} -
-

Terms and conditions

+const TermsOfUse = () => { + + return ( +
+

Terms and conditions

These terms and conditions (“Agreement”) set forth the general terms and conditions of your use of the “Telegram to Notion Bot” mobile application (“Mobile Application” or “Service”) and any of its related products and services (collectively, “Services”). This Agreement is legally binding between you (“User”, “you” or “your”) and this Mobile Application developer (“Operator”, “we”, “us” or “our”). If you are entering into this agreement on behalf of a business or other legal entity, you represent that you have the authority to bind such entity to this agreement, in which case the terms “User”, “you” or “your” shall refer to such entity. If you do not have such authority, or if you do not agree with the terms of this agreement, you must not accept this agreement and may not access and use the Mobile Application and Services. By accessing and using the Mobile Application and Services, you acknowledge that you have read, understood, and agree to be bound by the terms of this Agreement. You acknowledge that this Agreement is a contract between you and the Operator, even though it is electronic and is not physically signed by you, and it governs your use of the Mobile Application and Services. This terms and conditions policy was created with the help of the terms and conditions generator.

Accounts and membership

You must be at least 16 years of age to use the Mobile Application and Services. By using the Mobile Application and Services and by agreeing to this Agreement you warrant and represent that you are at least 16 years of age.

@@ -20,5 +20,8 @@

If you have any questions, concerns, or complaints regarding this Agreement, we encourage you to contact us using the details below:

franpessano1@gmail.com

This document was last updated on April 11, 2022

-
- \ No newline at end of file +
+ ) +} + +export default TermsOfUse \ No newline at end of file diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx new file mode 100644 index 0000000..f69bfb1 --- /dev/null +++ b/src/components/Header/Header.jsx @@ -0,0 +1,88 @@ +import icon from './icon.png' +import styled from 'styled-components' +import { Link } from 'wouter' + +function Header() { + + const HeaderStyles = styled.header` + + height: 15vh; + + display: flex; + justify-content: space-between; + align-items: center; + + padding: 0px 2vw; + + border-bottom: 1px solid #eee; + + user-select: none; + + .logotype { + display: flex; + align-items: center; + cursor: pointer; + + img { + width: 80px; + height: 80px; + + margin-right: 1vw; + + &:hover { + animation: rotate-image 0.5s cubic-bezier(1.000, 0.000, 0.000, 1.000) both; + } + } + + @keyframes rotate-image { + 0% { + transform: rotate(0deg) + } + + 100% { + transform: rotate(360deg) + } + } + } + + .links { + display: flex; + flex-direction: column; + + a { + color: #000; + font-weight: bold; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } + + ` + + return ( + + +
+ Page icon +

Telegram to Notion Bot

+
+ +
+ + About + + + Privacy policy + + + Terms of use + +
+ + ) +} + +export default Header \ No newline at end of file diff --git a/src/components/Header/icon.png b/src/components/Header/icon.png new file mode 100644 index 0000000..5b4cc61 Binary files /dev/null and b/src/components/Header/icon.png differ diff --git a/src/components/Loading/Loading.jsx b/src/components/Loading/Loading.jsx new file mode 100644 index 0000000..164c276 --- /dev/null +++ b/src/components/Loading/Loading.jsx @@ -0,0 +1,31 @@ +import React from 'react' +import styled from 'styled-components' +import {DotSpinner} from '@uiball/loaders' + +const Loading = () => { + + const Styles = styled.div` + width: 100%; + height: 100%; + + display: flex; + justify-content: center; + align-items: center; + + box-sizing: border-box; + + padding-bottom: 20vh; + + * { + width: 10vw !important; + height: 10vw !important; + } + ` + return ( + + + + ) +} + +export default Loading \ No newline at end of file diff --git a/src/components/Notification/Notification.jsx b/src/components/Notification/Notification.jsx new file mode 100644 index 0000000..0daf90f --- /dev/null +++ b/src/components/Notification/Notification.jsx @@ -0,0 +1,36 @@ +import React from 'react' + +import './notification-style.css' + +const Notification = ({notification, setNotification}) => { + React.useEffect(() => { + if (notification === false) { + return + } + + setTimeout(() => { + const elem = document.querySelector("#notification-element") + elem.classList.remove('fade-in') + elem.classList.add('fade-out') + }, 2000) + + setTimeout(() => { + setNotification(false) + }, 2400) + + }, [notification]) + + return ( + <> + { + notification ? +
+

{notification}

+
+ : null + } + + ) +} + +export default Notification \ No newline at end of file diff --git a/src/components/Notification/notification-style.css b/src/components/Notification/notification-style.css new file mode 100644 index 0000000..a2edbe5 --- /dev/null +++ b/src/components/Notification/notification-style.css @@ -0,0 +1,17 @@ +.notification { + width: 15vw; + min-width: 300px; + background-color: rgba(71, 151, 255, 0.1647058824); + box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.541); + position: absolute; + top: 80%; + left: 50%; + transform: translate(-50%, 0); + padding: 2vh 3vw; + border-radius: 10px; +} +.notification p { + overflow-wrap: anywhere; + text-align: center; + font-weight: bold; +}/*# sourceMappingURL=notification-style.css.map */ \ No newline at end of file diff --git a/src/components/Notification/notification-style.css.map b/src/components/Notification/notification-style.css.map new file mode 100644 index 0000000..aab429b --- /dev/null +++ b/src/components/Notification/notification-style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["notification-style.scss","notification-style.css"],"names":[],"mappings":"AAAA;EAEI,WAAA;EACA,gBAAA;EAEA,kDAAA;EACA,6CAAA;EAEA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,6BAAA;EAEA,gBAAA;EAEA,mBAAA;ACJJ;ADMI;EACI,uBAAA;EACA,kBAAA;EACA,iBAAA;ACJR","file":"notification-style.css"} \ No newline at end of file diff --git a/src/components/Notification/notification-style.scss b/src/components/Notification/notification-style.scss new file mode 100644 index 0000000..3462cc2 --- /dev/null +++ b/src/components/Notification/notification-style.scss @@ -0,0 +1,25 @@ +.notification { + + width: 15vw; + min-width: 300px; + + background-color: #4797ff2a; + box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.541); + + position: absolute; + top: 80%; + left: 50%; + transform: translate(-50%, 0); + + padding: 2vh 3vw; + + border-radius: 10px; + + p { + overflow-wrap: anywhere; + text-align: center; + font-weight: bold; + } + + +} \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..fac8de9 --- /dev/null +++ b/src/index.js @@ -0,0 +1,18 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; + +import './styles.css' + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + // //!WTF React + + // //Thank you: https://stackoverflow.com/a/61091205/18740899 +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js new file mode 100644 index 0000000..5253d3a --- /dev/null +++ b/src/reportWebVitals.js @@ -0,0 +1,13 @@ +const reportWebVitals = onPerfEntry => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/src/setupTests.js b/src/setupTests.js new file mode 100644 index 0000000..8f2609b --- /dev/null +++ b/src/setupTests.js @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom'; diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..d2ab772 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,98 @@ +html, body { + margin: 0; + padding: 0; +} + +body { + @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap"); + font-family: "Inter", sans-serif; +} + +html, body, #root { + height: 100%; +} + +#root { + display: flex; + flex-direction: column; +} + +.fullscreen { + flex-grow: 1; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; +} + +img { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.fade-in { + -webkit-animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both; + animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both; +} + +/* ---------------------------------------------- + * Generated by Animista on 2022-4-25 17:26:50 + * Licensed under FreeBSD License. + * See http://animista.net/license for more info. + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ +/** + * ---------------------------------------- + * animation fade-in + * ---------------------------------------- + */ +@-webkit-keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +.fade-out { + -webkit-animation: fade-out 1s ease-out both; + animation: fade-out 1s ease-out both; +} + +/* ---------------------------------------------- + * Generated by Animista on 2022-4-25 17:27:42 + * Licensed under FreeBSD License. + * See http://animista.net/license for more info. + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ +/** + * ---------------------------------------- + * animation fade-out + * ---------------------------------------- + */ +@-webkit-keyframes fade-out { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes fade-out { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +}/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/src/styles.css.map b/src/styles.css.map new file mode 100644 index 0000000..1eeff8c --- /dev/null +++ b/src/styles.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["styles.scss","styles.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;ACCJ;;ADEA;EACY,+FAAA;EACR,gCAAA;ACCJ;;ADEA;EACI,YAAA;ACCJ;;ADEA;EACI,aAAA;EACA,sBAAA;ACCJ;;ADEA;EACI,YAAA;ACCJ;;ADEA;EACI,SAAA;ACCJ;;ADEA;EACI,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;ACCJ;;ADIA;EACC,wEAAA;EACG,gEAAA;ACDJ;;ADIA;;;;;mDAAA;AAOA;;;;EAAA;AAKC;EACG;IACE,UAAA;ECFJ;EDIE;IACE,UAAA;ECFJ;AACF;ADIA;EACI;IACI,UAAA;ECFN;EDIE;IACI,UAAA;ECFN;AACF;ADKA;EACC,4CAAA;EACG,oCAAA;ACHJ;;ADKA;;;;;mDAAA;AAOA;;;;EAAA;AAKC;EACG;IACI,UAAA;ECHN;EDKE;IACI,UAAA;ECHN;AACF;ADKI;EACA;IACI,UAAA;ECHN;EDKE;IACI,UAAA;ECHN;AACF","file":"styles.css"} \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss new file mode 100644 index 0000000..30f497c --- /dev/null +++ b/src/styles.scss @@ -0,0 +1,100 @@ +html, body { + margin: 0; + padding: 0; +} + +body { + @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap'); + font-family: 'Inter', sans-serif; +} + +html, body, #root { + height: 100%; +} + +#root { + display: flex; + flex-direction: column; +} + +.fullscreen { + flex-grow: 1; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; +} + +img { + user-select: none; +} + +//Animations + +.fade-in { + -webkit-animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; + animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; +} + +/* ---------------------------------------------- + * Generated by Animista on 2022-4-25 17:26:50 + * Licensed under FreeBSD License. + * See http://animista.net/license for more info. + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ + +/** + * ---------------------------------------- + * animation fade-in + * ---------------------------------------- + */ + @-webkit-keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } + } +@keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.fade-out { + -webkit-animation: fade-out 1s ease-out both; + animation: fade-out 1s ease-out both; +} +/* ---------------------------------------------- + * Generated by Animista on 2022-4-25 17:27:42 + * Licensed under FreeBSD License. + * See http://animista.net/license for more info. + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ + +/** + * ---------------------------------------- + * animation fade-out + * ---------------------------------------- + */ + @-webkit-keyframes fade-out { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + @keyframes fade-out { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + \ No newline at end of file diff --git a/views/auth.hbs b/views/auth.hbs deleted file mode 100644 index bcc32c1..0000000 --- a/views/auth.hbs +++ /dev/null @@ -1,19 +0,0 @@ -{{> global cssFile="auth"}} - - - {{> betaBanner }} -
- {{#if success}} -

Copy the following code on the Telegram chat

-
- copy - {{data.access_token}} -
- {{else}} -
-

There has been an error authorizing the app, please try again

-
- {{/if}} -
- - \ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs deleted file mode 100644 index 398aa23..0000000 --- a/views/index.hbs +++ /dev/null @@ -1,14 +0,0 @@ -{{> global cssFile="index"}} - - - {{> betaBanner }} -
-

Telegram to Notion Bot's website

- Here you can visit it! -
    -
  • 100% Free
    • -
  • Unlimited messages
    • -
  • Forever
    • -
-
- \ No newline at end of file diff --git a/views/partials/betaBanner.hbs b/views/partials/betaBanner.hbs deleted file mode 100644 index 54c4b75..0000000 --- a/views/partials/betaBanner.hbs +++ /dev/null @@ -1,3 +0,0 @@ -
-

This website is on beta version. Futures updates will be to make more aesthetic the website for all users. Thanks for the compression

-
\ No newline at end of file diff --git a/views/partials/global.hbs b/views/partials/global.hbs deleted file mode 100644 index 07af0e2..0000000 --- a/views/partials/global.hbs +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - Telegram to Notion Bot - - - \ No newline at end of file