From 5bd3d90d3c73460788b039573df979c264ff7a98 Mon Sep 17 00:00:00 2001 From: Arik Chakma Date: Wed, 29 Mar 2023 20:30:18 +0600 Subject: [PATCH 1/8] feat: integrate astro --- astro.config.mjs | 101 ++++++++++++++++++++-------------------- package.json | 82 +++++++++++++++++---------------- pnpm-lock.yaml | 117 +++++++++++++++++++++++++++++++++++++++++++++-- tsconfig.json | 8 +++- 4 files changed, 212 insertions(+), 96 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index fc3860775..03ec12575 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -5,56 +5,57 @@ import compress from 'astro-compress'; import { defineConfig } from 'astro/config'; import rehypeExternalLinks from 'rehype-external-links'; import { serializeSitemap, shouldIndexPage } from './sitemap.mjs'; +import preact from '@astrojs/preact'; +// https://astro.build/config export default defineConfig({ - site: 'https://roadmap.sh/', - markdown: { - shikiConfig: { - theme: 'dracula', - }, - rehypePlugins: [ - [ - rehypeExternalLinks, - { - target: '_blank', - rel: function (element) { - const href = element.properties.href; - const whiteListedStarts = [ - '/', - '#', - 'mailto:', - 'https://github.com/kamranahmedse', - 'https://thenewstack.io', - 'https://cs.fyi', - 'https://roadmap.sh' - ]; - - if (whiteListedStarts.some((start) => href.startsWith(start))) { - return []; - } - - return 'noopener noreferrer nofollow'; - }, - }, - ], - ], - }, - build: { - format: 'file', - }, - integrations: [ - tailwind({ - config: { - applyBaseStyles: false, - }, - }), - sitemap({ - filter: shouldIndexPage, - serialize: serializeSitemap, - }), - compress({ - css: false, - js: false, - }), - ], + site: 'https://roadmap.sh/', + markdown: { + shikiConfig: { + theme: 'dracula', + }, + rehypePlugins: [ + [ + rehypeExternalLinks, + { + target: '_blank', + rel: function (element) { + const href = element.properties.href; + const whiteListedStarts = [ + '/', + '#', + 'mailto:', + 'https://github.com/kamranahmedse', + 'https://thenewstack.io', + 'https://cs.fyi', + 'https://roadmap.sh', + ]; + if (whiteListedStarts.some((start) => href.startsWith(start))) { + return []; + } + return 'noopener noreferrer nofollow'; + }, + }, + ], + ], + }, + build: { + format: 'file', + }, + integrations: [ + tailwind({ + config: { + applyBaseStyles: false, + }, + }), + sitemap({ + filter: shouldIndexPage, + serialize: serializeSitemap, + }), + compress({ + css: false, + js: false, + }), + preact(), + ], }); diff --git a/package.json b/package.json index 3ad71e7b7..4d700dc5d 100644 --- a/package.json +++ b/package.json @@ -1,42 +1,44 @@ { - "name": "roadmap.sh", - "type": "module", - "version": "0.0.1", - "private": true, - "scripts": { - "dev": "astro dev", - "start": "astro dev", - "build": "astro build", - "preview": "astro preview", - "astro": "astro", - "deploy": "NODE_DEBUG=gh-pages gh-pages -d dist -t", - "compress:jsons": "node bin/compress-jsons.cjs", - "upgrade": "ncu -u", - "roadmap-links": "node bin/roadmap-links.cjs", - "roadmap-dirs": "node bin/roadmap-dirs.cjs", - "roadmap-content": "node bin/roadmap-content.cjs", - "best-practice-dirs": "node bin/best-practice-dirs.cjs", - "test:e2e": "playwright test" - }, - "dependencies": { - "@astrojs/sitemap": "^1.2.1", - "@astrojs/tailwind": "^3.1.1", - "astro": "^2.1.7", - "astro-compress": "^1.1.35", - "node-html-parser": "^6.1.5", - "npm-check-updates": "^16.8.0", - "rehype-external-links": "^2.0.1", - "roadmap-renderer": "^1.0.4", - "tailwindcss": "^3.2.7" - }, - "devDependencies": { - "@playwright/test": "^1.32.1", - "@tailwindcss/typography": "^0.5.9", - "gh-pages": "^5.0.0", - "js-yaml": "^4.1.0", - "markdown-it": "^13.0.1", - "openai": "^3.2.1", - "prettier": "^2.8.7", - "prettier-plugin-astro": "^0.8.0" - } + "name": "roadmap.sh", + "type": "module", + "version": "0.0.1", + "private": true, + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview", + "astro": "astro", + "deploy": "NODE_DEBUG=gh-pages gh-pages -d dist -t", + "compress:jsons": "node bin/compress-jsons.cjs", + "upgrade": "ncu -u", + "roadmap-links": "node bin/roadmap-links.cjs", + "roadmap-dirs": "node bin/roadmap-dirs.cjs", + "roadmap-content": "node bin/roadmap-content.cjs", + "best-practice-dirs": "node bin/best-practice-dirs.cjs", + "test:e2e": "playwright test" + }, + "dependencies": { + "@astrojs/preact": "^2.1.0", + "@astrojs/sitemap": "^1.2.1", + "@astrojs/tailwind": "^3.1.1", + "astro": "^2.1.7", + "astro-compress": "^1.1.35", + "node-html-parser": "^6.1.5", + "npm-check-updates": "^16.8.0", + "preact": "^10.6.5", + "rehype-external-links": "^2.0.1", + "roadmap-renderer": "^1.0.4", + "tailwindcss": "^3.2.7" + }, + "devDependencies": { + "@playwright/test": "^1.32.1", + "@tailwindcss/typography": "^0.5.9", + "gh-pages": "^5.0.0", + "js-yaml": "^4.1.0", + "markdown-it": "^13.0.1", + "openai": "^3.2.1", + "prettier": "^2.8.7", + "prettier-plugin-astro": "^0.8.0" + } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dd276377a..35d7956b3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,6 +1,7 @@ lockfileVersion: 5.4 specifiers: + '@astrojs/preact': ^2.1.0 '@astrojs/sitemap': ^1.2.1 '@astrojs/tailwind': ^3.1.1 '@playwright/test': ^1.32.1 @@ -13,6 +14,7 @@ specifiers: node-html-parser: ^6.1.5 npm-check-updates: ^16.8.0 openai: ^3.2.1 + preact: ^10.6.5 prettier: ^2.8.7 prettier-plugin-astro: ^0.8.0 rehype-external-links: ^2.0.1 @@ -20,15 +22,17 @@ specifiers: tailwindcss: ^3.2.7 dependencies: + '@astrojs/preact': 2.1.0_preact@10.13.2 '@astrojs/sitemap': 1.2.1 '@astrojs/tailwind': 3.1.1_xwlinsvcxfu6nyuevlo4g7jv7y astro: 2.1.7 astro-compress: 1.1.35 node-html-parser: 6.1.5 npm-check-updates: 16.8.0 + preact: 10.13.2 rehype-external-links: 2.0.1 roadmap-renderer: 1.0.4 - tailwindcss: 3.2.7 + tailwindcss: 3.2.7_postcss@8.4.21 devDependencies: '@playwright/test': 1.32.1 @@ -103,6 +107,22 @@ packages: - supports-color dev: false + /@astrojs/preact/2.1.0_preact@10.13.2: + resolution: {integrity: sha512-1AnXpnjC24/mWJyq+EN5DoWp+w9Hg/y3dwFX3728rlBhyuY573jx+4+VHuG/g0A1alzJuIAhSPtqCP0YQktUnw==} + engines: {node: '>=16.12.0'} + peerDependencies: + preact: ^10.6.5 + dependencies: + '@babel/core': 7.20.7 + '@babel/plugin-transform-react-jsx': 7.20.7_@babel+core@7.20.7 + '@preact/signals': 1.1.3_preact@10.13.2 + babel-plugin-module-resolver: 5.0.0 + preact: 10.13.2 + preact-render-to-string: 5.2.6_preact@10.13.2 + transitivePeerDependencies: + - supports-color + dev: false + /@astrojs/prism/2.1.0: resolution: {integrity: sha512-+II6nfIFGZ7iH0FunhRGcj/J1mCxjcHl85cZRuFePKLoIhFHJT3nC3myQnUw386hUaIn2W20McxxtAVf4leeRQ==} engines: {node: '>=16.12.0'} @@ -128,7 +148,7 @@ packages: autoprefixer: 10.4.13_postcss@8.4.21 postcss: 8.4.21 postcss-load-config: 4.0.1_postcss@8.4.21 - tailwindcss: 3.2.7 + tailwindcss: 3.2.7_postcss@8.4.21 transitivePeerDependencies: - ts-node dev: false @@ -790,6 +810,19 @@ packages: config-chain: 1.1.13 dev: false + /@preact/signals-core/1.2.3: + resolution: {integrity: sha512-Kui4p7PMcEQevBgsTO0JBo3gyQ88Q3qzEvsVCuSp11t0JcN4DmGCTJcGRVSCq7Bn7lGxJBO+57jNSzDoDJ+QmA==} + dev: false + + /@preact/signals/1.1.3_preact@10.13.2: + resolution: {integrity: sha512-N09DuAVvc90bBZVRwD+aFhtGyHAmJLhS3IFoawO/bYJRcil4k83nBOchpCEoS0s5+BXBpahgp0Mjf+IOqP57Og==} + peerDependencies: + preact: 10.x + dependencies: + '@preact/signals-core': 1.2.3 + preact: 10.13.2 + dev: false + /@proload/core/0.3.3: resolution: {integrity: sha512-7dAFWsIK84C90AMl24+N/ProHKm4iw0akcnoKjRvbfHifJZBLhaDsDus1QJmhG12lXj4e/uB/8mB/0aduCW+NQ==} dependencies: @@ -818,7 +851,7 @@ packages: lodash.isplainobject: 4.0.6 lodash.merge: 4.6.2 postcss-selector-parser: 6.0.10 - tailwindcss: 3.2.7 + tailwindcss: 3.2.7_postcss@8.4.21 dev: true /@tootallnate/once/2.0.0: @@ -1215,6 +1248,17 @@ packages: - debug dev: true + /babel-plugin-module-resolver/5.0.0: + resolution: {integrity: sha512-g0u+/ChLSJ5+PzYwLwP8Rp8Rcfowz58TJNCe+L/ui4rpzE/mg//JVX0EWBUYoxaextqnwuGHzfGp2hh0PPV25Q==} + engines: {node: '>= 16'} + dependencies: + find-babel-config: 2.0.0 + glob: 8.0.3 + pkg-up: 3.1.0 + reselect: 4.1.7 + resolve: 1.22.1 + dev: false + /bail/2.0.2: resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==} dev: false @@ -2070,6 +2114,14 @@ packages: dependencies: to-regex-range: 5.0.1 + /find-babel-config/2.0.0: + resolution: {integrity: sha512-dOKT7jvF3hGzlW60Gc3ONox/0rRZ/tz7WCil0bqA1In/3I8f1BctpXahRnEKDySZqci7u+dqq93sZST9fOJpFw==} + engines: {node: '>=16.0.0'} + dependencies: + json5: 2.2.2 + path-exists: 4.0.0 + dev: false + /find-cache-dir/3.3.2: resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==} engines: {node: '>=8'} @@ -2079,6 +2131,13 @@ packages: pkg-dir: 4.2.0 dev: true + /find-up/3.0.0: + resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==} + engines: {node: '>=6'} + dependencies: + locate-path: 3.0.0 + dev: false + /find-up/4.1.0: resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==} engines: {node: '>=8'} @@ -2883,6 +2942,14 @@ packages: strip-bom: 3.0.0 dev: false + /locate-path/3.0.0: + resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==} + engines: {node: '>=6'} + dependencies: + p-locate: 3.0.0 + path-exists: 3.0.0 + dev: false + /locate-path/5.0.0: resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==} engines: {node: '>=8'} @@ -3903,6 +3970,13 @@ packages: yocto-queue: 0.1.0 dev: false + /p-locate/3.0.0: + resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==} + engines: {node: '>=6'} + dependencies: + p-limit: 2.3.0 + dev: false + /p-locate/4.1.0: resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==} engines: {node: '>=8'} @@ -3997,6 +4071,11 @@ packages: tslib: 2.4.1 dev: false + /path-exists/3.0.0: + resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==} + engines: {node: '>=4'} + dev: false + /path-exists/4.0.0: resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} engines: {node: '>=8'} @@ -4068,6 +4147,13 @@ packages: dependencies: find-up: 4.1.0 + /pkg-up/3.1.0: + resolution: {integrity: sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==} + engines: {node: '>=8'} + dependencies: + find-up: 3.0.0 + dev: false + /playwright-core/1.32.1: resolution: {integrity: sha512-KZYUQC10mXD2Am1rGlidaalNGYk3LU1vZqqNk0gT4XPty1jOqgup8KDP8l2CUlqoNKhXM5IfGjWgW37xvGllBA==} engines: {node: '>=14'} @@ -4162,6 +4248,19 @@ packages: picocolors: 1.0.0 source-map-js: 1.0.2 + /preact-render-to-string/5.2.6_preact@10.13.2: + resolution: {integrity: sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==} + peerDependencies: + preact: '>=10' + dependencies: + preact: 10.13.2 + pretty-format: 3.8.0 + dev: false + + /preact/10.13.2: + resolution: {integrity: sha512-q44QFLhOhty2Bd0Y46fnYW0gD/cbVM9dUVtNTDKPcdXSMA7jfY+Jpd6rk3GB0lcQss0z5s/6CmVP0Z/hV+g6pw==} + dev: false + /prebuild-install/7.1.1: resolution: {integrity: sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==} engines: {node: '>=10'} @@ -4216,6 +4315,10 @@ packages: engines: {node: '>=10.13.0'} hasBin: true + /pretty-format/3.8.0: + resolution: {integrity: sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==} + dev: false + /prismjs/1.29.0: resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==} engines: {node: '>=6'} @@ -4465,6 +4568,10 @@ packages: engines: {node: '>=0.10.0'} dev: false + /reselect/4.1.7: + resolution: {integrity: sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A==} + dev: false + /resolve-alpn/1.2.1: resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==} dev: false @@ -4965,10 +5072,12 @@ packages: '@pkgr/utils': 2.3.1 tslib: 2.4.1 - /tailwindcss/3.2.7: + /tailwindcss/3.2.7_postcss@8.4.21: resolution: {integrity: sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==} engines: {node: '>=12.13.0'} hasBin: true + peerDependencies: + postcss: ^8.0.9 dependencies: arg: 5.0.2 chokidar: 3.5.3 diff --git a/tsconfig.json b/tsconfig.json index 77da9dd00..6dbd39320 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,3 +1,7 @@ { - "extends": "astro/tsconfigs/strict" -} \ No newline at end of file + "extends": "astro/tsconfigs/strict", + "compilerOptions": { + "jsx": "react-jsx", + "jsxImportSource": "preact" + } +} From 52d110dffebcad12164d93200fb4e013f17f2c48 Mon Sep 17 00:00:00 2001 From: Arik Chakma Date: Wed, 29 Mar 2023 21:48:46 +0600 Subject: [PATCH 2/8] chore: login popup design --- src/components/Login/LoginComponent.tsx | 37 +++++++++++++++++++++++++ src/components/Login/LoginPopup.astro | 9 ++++++ src/components/RoadmapHeader.astro | 14 ++++++++++ 3 files changed, 60 insertions(+) create mode 100644 src/components/Login/LoginComponent.tsx create mode 100644 src/components/Login/LoginPopup.astro diff --git a/src/components/Login/LoginComponent.tsx b/src/components/Login/LoginComponent.tsx new file mode 100644 index 000000000..61863d285 --- /dev/null +++ b/src/components/Login/LoginComponent.tsx @@ -0,0 +1,37 @@ +import type { FunctionComponent } from 'preact'; + +export default function LoginComponent() { + return ( +
+
+ + +
+
+ +
+ Don't have an account?{' '} + + Sign up + +
+
+ ); +} + +const Button: FunctionComponent<{ className?: string }> = ({ + children, + className, +}) => { + return ( + + ); +}; diff --git a/src/components/Login/LoginPopup.astro b/src/components/Login/LoginPopup.astro new file mode 100644 index 000000000..413df0b72 --- /dev/null +++ b/src/components/Login/LoginPopup.astro @@ -0,0 +1,9 @@ +--- +import Popup from '../Popup/Popup.astro'; +import LoginComponent from './LoginComponent' +--- + + + + + diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro index b518ef1bc..9608ebfec 100644 --- a/src/components/RoadmapHeader.astro +++ b/src/components/RoadmapHeader.astro @@ -1,6 +1,8 @@ --- import DownloadPopup from './DownloadPopup.astro'; import Icon from './Icon.astro'; +import LoginComponent from './Login/LoginComponent'; +import LoginPopup from './Login/LoginPopup.astro'; import RoadmapHint from './RoadmapHint.astro'; import RoadmapNote from './RoadmapNote.astro'; import SubscribePopup from './SubscribePopup.astro'; @@ -23,6 +25,7 @@ const { title, description, roadmapId, tnsBannerLink, isUpcoming = false, hasSea const isRoadmapReady = !isUpcoming; --- + @@ -75,6 +78,17 @@ const isRoadmapReady = !isUpcoming; Subscribe + ) } From 130d460b94ffd96ceada361a81c030c13f28cc12 Mon Sep 17 00:00:00 2001 From: Arik Chakma Date: Wed, 29 Mar 2023 22:08:56 +0600 Subject: [PATCH 3/8] chore: data-popup changed --- src/components/RoadmapHeader.astro | 15 ++------------- src/components/TopicOverlay/TopicOverlay.astro | 4 ++-- 2 files changed, 4 insertions(+), 15 deletions(-) diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro index 9608ebfec..611987a75 100644 --- a/src/components/RoadmapHeader.astro +++ b/src/components/RoadmapHeader.astro @@ -55,7 +55,7 @@ const isRoadmapReady = !isUpcoming; {isRoadmapReady && ( - ) } diff --git a/src/components/TopicOverlay/TopicOverlay.astro b/src/components/TopicOverlay/TopicOverlay.astro index ce322a61a..13cc7f9ce 100644 --- a/src/components/TopicOverlay/TopicOverlay.astro +++ b/src/components/TopicOverlay/TopicOverlay.astro @@ -21,7 +21,7 @@ const { contentContributionLink } = Astro.props;
@@ -23,15 +19,22 @@ export default function LoginComponent() { ); } -const Button: FunctionComponent<{ className?: string }> = ({ - children, +export const GithubLoginButton: FunctionComponent<{ className?: string }> = ({ className, }) => { return ( - + ); +}; + +export const GoogleLoginButton: FunctionComponent<{ className?: string }> = ({ + className, +}) => { + return ( + ); }; From b424404bfd9411369ca5fdc7ec3d5f478ba108fb Mon Sep 17 00:00:00 2001 From: Arik Chakma Date: Wed, 29 Mar 2023 22:40:59 +0600 Subject: [PATCH 5/8] chore: signup page --- src/pages/signup.astro | 37 +++++-------------------------------- 1 file changed, 5 insertions(+), 32 deletions(-) diff --git a/src/pages/signup.astro b/src/pages/signup.astro index 3ca70402c..615d947c2 100644 --- a/src/pages/signup.astro +++ b/src/pages/signup.astro @@ -1,6 +1,7 @@ --- import CaptchaFields from '../components/Captcha/CaptchaFields.astro'; import CaptchaScripts from '../components/Captcha/CaptchaScripts.astro'; +import { GithubLoginButton, GoogleLoginButton } from '../components/Login/LoginComponent'; import BaseLayout from '../layouts/BaseLayout.astro'; --- @@ -24,38 +25,10 @@ import BaseLayout from '../layouts/BaseLayout.astro';

-
- - - - - - - - - - - +
+ + +
From 678363f77d45852835ab26b8517785dc30d9155f Mon Sep 17 00:00:00 2001 From: Arik Chakma Date: Thu, 30 Mar 2023 00:33:55 +0600 Subject: [PATCH 6/8] chore: login popup design --- src/components/Login/LoginComponent.tsx | 100 ++++++++++++++++++++++-- src/components/Login/LoginPopup.astro | 2 +- 2 files changed, 93 insertions(+), 9 deletions(-) diff --git a/src/components/Login/LoginComponent.tsx b/src/components/Login/LoginComponent.tsx index 3b3d4e70b..a15e8c2fa 100644 --- a/src/components/Login/LoginComponent.tsx +++ b/src/components/Login/LoginComponent.tsx @@ -2,14 +2,46 @@ import type { FunctionComponent } from 'preact'; export default function LoginComponent() { return ( -
-
+
+
+

+ Welcome back +

+

+ Please enter your details. +

+
+ +
-
-
+
+
+ OR +
+
+ +
+ + + +
+ +
Don't have an account?{' '} Sign up @@ -23,8 +55,21 @@ export const GithubLoginButton: FunctionComponent<{ className?: string }> = ({ className, }) => { return ( - ); }; @@ -33,8 +78,47 @@ export const GoogleLoginButton: FunctionComponent<{ className?: string }> = ({ className, }) => { return ( - ); }; + +function GoogleLogo() { + return ( + + + + + + + + + ); +} diff --git a/src/components/Login/LoginPopup.astro b/src/components/Login/LoginPopup.astro index 413df0b72..2f5948035 100644 --- a/src/components/Login/LoginPopup.astro +++ b/src/components/Login/LoginPopup.astro @@ -3,7 +3,7 @@ import Popup from '../Popup/Popup.astro'; import LoginComponent from './LoginComponent' --- - + From 77de8fdd3d87b722f043427eb0decceac9e02322 Mon Sep 17 00:00:00 2001 From: Arik Chakma Date: Thu, 30 Mar 2023 00:39:08 +0600 Subject: [PATCH 7/8] chore: signup page design --- src/components/Login/LoginComponent.tsx | 43 +++++++++++++++---------- src/pages/signup.astro | 12 +++++-- 2 files changed, 36 insertions(+), 19 deletions(-) diff --git a/src/components/Login/LoginComponent.tsx b/src/components/Login/LoginComponent.tsx index a15e8c2fa..1910c4146 100644 --- a/src/components/Login/LoginComponent.tsx +++ b/src/components/Login/LoginComponent.tsx @@ -23,23 +23,7 @@ export default function LoginComponent() {
-
- - - -
+
Don't have an account?{' '} @@ -85,6 +69,31 @@ export const GoogleLoginButton: FunctionComponent<{ className?: string }> = ({ ); }; +export const EmailLoginButton: FunctionComponent<{}> = () => { + return ( +
+ + + +
+ ); +}; + function GoogleLogo() { return (
-
+
+ +
+
+ OR +
+
+ +
From 174803dc2a1ac0cb8125c34927dc078bb38a82fe Mon Sep 17 00:00:00 2001 From: Arik Chakma Date: Thu, 30 Mar 2023 04:37:39 +0600 Subject: [PATCH 8/8] chore: auth divider --- src/components/Login/LoginComponent.tsx | 22 +++++++++++++++------- src/pages/signup.astro | 10 +++------- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/src/components/Login/LoginComponent.tsx b/src/components/Login/LoginComponent.tsx index 1910c4146..04fd93ed5 100644 --- a/src/components/Login/LoginComponent.tsx +++ b/src/components/Login/LoginComponent.tsx @@ -17,13 +17,9 @@ export default function LoginComponent() {
-
-
- OR -
-
+ - +
Don't have an account?{' '} @@ -35,6 +31,18 @@ export default function LoginComponent() { ); } +export const Divider: FunctionComponent<{ className?: string }> = ({ + className, +}) => { + return ( +
+
+ OR +
+
+ ); +}; + export const GithubLoginButton: FunctionComponent<{ className?: string }> = ({ className, }) => { @@ -69,7 +77,7 @@ export const GoogleLoginButton: FunctionComponent<{ className?: string }> = ({ ); }; -export const EmailLoginButton: FunctionComponent<{}> = () => { +export const EmailLoginForm: FunctionComponent<{}> = () => { return (
-
-
- OR -
-
+ - +