diff --git a/frontend/frontend/src/components/Card/SVG.js b/frontend/frontend/src/components/Card/SVG.js index 320ad01f..380c2362 100644 --- a/frontend/frontend/src/components/Card/SVG.js +++ b/frontend/frontend/src/components/Card/SVG.js @@ -14,6 +14,10 @@ import { default as router } from '../../backend/.vercel/output/functions/api.fu import axios from 'axios'; import { HOST } from '../../constants'; import { DEMO_STATS_CARD } from './demoData/statsCard'; +import { DEMO_TOPLANGS_CARD } from './demoData/topLangsCard'; +import { DEMO_PIN_CARD } from './demoData/pinCard'; +import { DEMO_GIST_CARD } from './demoData/gistCard'; +import { DEMO_WAKATIME_CARD } from './demoData/wakatimeCard'; const SvgInline = (props) => { const [svg, setSvg] = useState(null); @@ -37,6 +41,22 @@ const SvgInline = (props) => { status = 200; body = DEMO_STATS_CARD; break; + case `https://${HOST}/api/top-langs?username=anuraghazra&langs_count=4&client=wizard`: + status = 200; + body = DEMO_TOPLANGS_CARD; + break; + case `https://${HOST}/api/pin?repo=anuraghazra/github-readme-stats&client=wizard`: + status = 200; + body = DEMO_PIN_CARD; + break; + case `https://${HOST}/api/gist?id=bbfce31e0217a3689c8d961a356cb10d&client=wizard`: + status = 200; + body = DEMO_GIST_CARD; + break; + case `https://${HOST}/api/wakatime?username=ffflabs&langs_count=6&card_width=450&client=wizard`: + status = 200; + body = DEMO_WAKATIME_CARD; + break; default: const isAuthenticated = userId && userId.length > 0; diff --git a/frontend/frontend/src/components/Card/demoData/gistCard.js b/frontend/frontend/src/components/Card/demoData/gistCard.js new file mode 100644 index 00000000..0dc3d3f5 --- /dev/null +++ b/frontend/frontend/src/components/Card/demoData/gistCard.js @@ -0,0 +1,135 @@ +export const DEMO_GIST_CARD = ` + + + + + + + + + + + + + + + + + countries.json + + + + + + + + List of countries and territories in English and Spanish:name, continent, capital, dial code, country codes, TLD,and area in sq km. Lista de países y territorios enInglés y Español: nombre, continente, capital,código de teléfono, códigos de país,dominio y área en km cuadrados. Updated 2024 + + + + + + + JSON + + + + + + 41 + + + + 14 + + + + + `; diff --git a/frontend/frontend/src/components/Card/demoData/pinCard.js b/frontend/frontend/src/components/Card/demoData/pinCard.js new file mode 100644 index 00000000..8787a59e --- /dev/null +++ b/frontend/frontend/src/components/Card/demoData/pinCard.js @@ -0,0 +1,155 @@ +export const DEMO_PIN_CARD = ` + + + + + + + + + + + + + + + + + github-readme-stats + + + + + + + + + + ⚡ Dynamically generated stats for your github readmes + + + + + + + JavaScript + + + + + + 76.9k + + + + 26.8k + + + + + + + + + + `; diff --git a/frontend/frontend/src/components/Card/demoData/topLangsCard.js b/frontend/frontend/src/components/Card/demoData/topLangsCard.js new file mode 100644 index 00000000..aae9416a --- /dev/null +++ b/frontend/frontend/src/components/Card/demoData/topLangsCard.js @@ -0,0 +1,203 @@ +export const DEMO_TOPLANGS_CARD = ` + + + + + + + + + + + + + Most Used Languages + + + + + + + + + + JavaScript + 72.12% + + + + + + + + + + + + HTML + 14.66% + + + + + + + + + + + + TypeScript + 9.43% + + + + + + + + + + + + CSS + 3.79% + + + + + + + + + + + + + + + `; diff --git a/frontend/frontend/src/components/Card/demoData/wakatimeCard.js b/frontend/frontend/src/components/Card/demoData/wakatimeCard.js new file mode 100644 index 00000000..bb852a8b --- /dev/null +++ b/frontend/frontend/src/components/Card/demoData/wakatimeCard.js @@ -0,0 +1,265 @@ +export const DEMO_WAKATIME_CARD = ` + + + + + + + + + + + + + WakaTime Stats (last year) + + + + + + + + + + Other: + 143 hrs 35 mins + + + + + + + + + + + + TypeScript: + 25 hrs 21 mins + + + + + + + + + + + + PHP: + 18 hrs 56 mins + + + + + + + + + + + + Blade Template: + 10 hrs 58 mins + + + + + + + + + + + + Vue.js: + 7 hrs 31 mins + + + + + + + + + + + + JavaScript: + 7 hrs 28 mins + + + + + + + + + + + + + + + `; diff --git a/frontend/frontend/src/pages/Home/stages/Login.js b/frontend/frontend/src/pages/Home/stages/Login.js index f03404c8..5da14333 100644 --- a/frontend/frontend/src/pages/Home/stages/Login.js +++ b/frontend/frontend/src/pages/Home/stages/Login.js @@ -4,7 +4,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useDispatch, useSelector } from 'react-redux'; -import { Button, Card, Image } from '../../../components'; +import { Button, Image } from '../../../components'; import { classnames } from '../../../utils'; import { GITHUB_PRIVATE_AUTH_URL, @@ -226,9 +226,9 @@ const LoginStage = ({ setCurrItem }) => { // Calculate arch position // Arch center is far to the right (1500px to the right) // Radius of the arch - const radius = 800; - const centerX = 1500; - const centerY = 300; + const radius = 40; + const centerX = 50; + const centerY = 50; // Angle for each card (spreading them in an arch) // Cards arranged from top-left to bottom-left @@ -245,12 +245,12 @@ const LoginStage = ({ setCurrItem }) => { return (
{
diff --git a/frontend/frontend/src/pages/Home/stages/SelectCard.js b/frontend/frontend/src/pages/Home/stages/SelectCard.js index b3bb7ea5..372010b0 100644 --- a/frontend/frontend/src/pages/Home/stages/SelectCard.js +++ b/frontend/frontend/src/pages/Home/stages/SelectCard.js @@ -14,14 +14,14 @@ const SelectCardStage = ({ selectedCard, setSelectedCard, setImageSrc }) => { { title: 'GitHub Stats Card', description: 'your overall GitHub statistics', - imageSrc: `?username=${userId}`, + imageSrc: `?username=${userId || 'anuraghazra'}`, demoCustomization: '&include_all_commits=true', cardType: 'stats', }, { title: 'Top Languages Card', description: 'your most frequently used languages', - imageSrc: `/top-langs?username=${userId}`, + imageSrc: `/top-langs?username=${userId || 'anuraghazra'}`, demoCustomization: '&langs_count=4', cardType: 'top-langs', },