From 79b78df0783b9951c76024fe2abee0009e8a2ddc Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Mon, 9 Mar 2026 15:14:51 +0000 Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=A7=B9=20Refactor=20ProfileCard=20to?= =?UTF-8?q?=20use=20smaller=20internal=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com> --- src/components/ProfileCard.tsx | 283 +++++++++++++++++---------------- 1 file changed, 150 insertions(+), 133 deletions(-) diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx index 4d9d41b..fc379e6 100644 --- a/src/components/ProfileCard.tsx +++ b/src/components/ProfileCard.tsx @@ -4,6 +4,151 @@ type Props = { profile: UserProfile; }; +// Internal components for modularity +const Avatar = ({ url, login }: { url: string; login: string }) => ( +
+
+ {login} +
+); + +const ProfileMeta = ({ profile, joinDate }: { profile: UserProfile; joinDate: string }) => ( +
+ {profile.company && ( + + + {profile.company} + + )} + {profile.location && ( + + + {profile.location} + + )} + {profile.blog && ( + + + {profile.blog.replace(/^https?:\/\//, "")} + + )} + + + Joined {joinDate} + +
+); + +const ProfileStats = ({ profile }: { profile: UserProfile }) => ( +
+
+
+ {profile.followers.toLocaleString()} +
+
Followers
+
+
+
+ {profile.following.toLocaleString()} +
+
Following
+
+
+
+ {profile.public_repos.toLocaleString()} +
+
Repos
+
+
+); + +const Organizations = ({ orgs }: { orgs: UserProfile["orgs"] }) => { + if (orgs.length === 0) return null; + + return ( +
+

Organizations

+
+ {orgs.map((org) => ( + + {org.login} + {org.login} + + ))} +
+
+ ); +}; + +const PinnedRepos = ({ repos }: { repos: UserProfile["pinnedRepos"] }) => { + if (repos.length === 0) return null; + + return ( +
+

Pinned Repositories

+
+ {repos.map((repo) => ( + +
+
+ + {repo.name} + +
+ {repo.description && ( +

+ {repo.description} +

+ )} +
+ +
+ {repo.primaryLanguage && ( + + + {repo.primaryLanguage.name} + + )} + + + {repo.stargazerCount.toLocaleString()} + +
+ + ))} +
+
+ ); +}; + export default function ProfileCard({ profile }: Props) { const joinDate = new Date(profile.created_at).toLocaleDateString("en-US", { year: "numeric", @@ -13,17 +158,8 @@ export default function ProfileCard({ profile }: Props) { return (
- {/* Avatar */} -
-
- {profile.login} -
+ - {/* Info */}

@@ -36,132 +172,13 @@ export default function ProfileCard({ profile }: Props) {

{profile.bio}

)} - {/* Meta */} -
- {profile.company && ( - - - {profile.company} - - )} - {profile.location && ( - - - {profile.location} - - )} - {profile.blog && ( - - - {profile.blog.replace(/^https?:\/\//, "")} - - )} - - - Joined {joinDate} - -
- - {/* Stats */} -
-
-
- {profile.followers.toLocaleString()} -
-
Followers
-
-
-
- {profile.following.toLocaleString()} -
-
Following
-
-
-
- {profile.public_repos.toLocaleString()} -
-
Repos
-
-
+ +

- {/* Organizations */} - {profile.orgs.length > 0 && ( -
-

Organizations

-
- {profile.orgs.map((org) => ( - - {org.login} - {org.login} - - ))} -
-
- )} - - {/* Pinned Repos */} - {profile.pinnedRepos.length > 0 && ( -
-

Pinned Repositories

-
- {profile.pinnedRepos.map((repo) => ( - -
-
- - {repo.name} - -
- {repo.description && ( -

- {repo.description} -

- )} -
- -
- {repo.primaryLanguage && ( - - - {repo.primaryLanguage.name} - - )} - - - {repo.stargazerCount.toLocaleString()} - -
- - ))} -
-
- )} + +
); } From 68ede9d591fe71548d70451143ba287f4024db90 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Fri, 13 Mar 2026 06:40:19 +0000 Subject: [PATCH 2/5] refactor(CardGenerator): replace img element with next/image Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com> --- pr_body.md | 11 +++++++++++ src/components/CardGenerator.tsx | 4 ++-- 2 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 pr_body.md diff --git a/pr_body.md b/pr_body.md new file mode 100644 index 0000000..adbb8e8 --- /dev/null +++ b/pr_body.md @@ -0,0 +1,11 @@ +🎯 **What:** The code health issue addressed +Replaced the plain `` element in `src/components/CardGenerator.tsx` with Next.js's `` component, which is the recommended way to handle images in Next.js applications, resolving an `@next/next/no-img-element` ESLint bypass. + +💡 **Why:** How this improves maintainability +The usage of `` component is a Next.js standard best practice that usually provides automatic optimizations. Although this particular instance requires `unoptimized` because it relies on a local dynamically generated data URL from `html-to-image`, using the uniform standard throughout the application helps remove linting suppression rules, keeping code clean and maintaining consistent components across the codebase. + +✅ **Verification:** How you confirmed the change is safe +Ran the lint check (`npm run lint`), which no longer produces the ESLint warning on `CardGenerator.tsx`. Also ran the full unit test suite (`npm run test`) which executed 100 tests with no failures, verifying that we didn't break anything. + +✨ **Result:** The improvement achieved +A clean resolution to the `@next/next/no-img-element` linting rule in `CardGenerator.tsx` by upgrading it to use the standard `` element from `next/image`. diff --git a/src/components/CardGenerator.tsx b/src/components/CardGenerator.tsx index c663121..58f731c 100644 --- a/src/components/CardGenerator.tsx +++ b/src/components/CardGenerator.tsx @@ -2,6 +2,7 @@ import { useState, useRef, useCallback, useEffect } from "react"; import { createPortal } from "react-dom"; +import Image from "next/image"; import { toPng, toBlob } from "html-to-image"; import type { @@ -394,8 +395,7 @@ export default function CardGenerator({ summary }: Props) {

Generating preview...

) : previewUrl ? ( - // eslint-disable-next-line @next/next/no-img-element - Card Preview Date: Fri, 13 Mar 2026 06:40:59 +0000 Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=A7=B9=20code=20health:=20extract=20C?= =?UTF-8?q?ardGeneratorModal=20from=20CardGenerator?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Extracts the modal and generation logic from `CardGenerator.tsx` into a separate `CardGeneratorModal.tsx` component to resolve the 'Overly long component function' issue. - `CardGenerator.tsx` is simplified to manage trigger state. - Modal content, state (e.g. `isGenerating`, `previewUrl`), and tabs moved to `CardGeneratorModal.tsx`. - Ensured existing functionality, layout saving, and behavior are preserved. Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com> --- src/components/CardGenerator.tsx | 471 +------------------------ src/components/CardGeneratorModal.tsx | 474 ++++++++++++++++++++++++++ 2 files changed, 482 insertions(+), 463 deletions(-) create mode 100644 src/components/CardGeneratorModal.tsx diff --git a/src/components/CardGenerator.tsx b/src/components/CardGenerator.tsx index c663121..a0213d1 100644 --- a/src/components/CardGenerator.tsx +++ b/src/components/CardGenerator.tsx @@ -1,252 +1,15 @@ "use client"; -import { useState, useRef, useCallback, useEffect } from "react"; -import { createPortal } from "react-dom"; -import { toPng, toBlob } from "html-to-image"; - -import type { - CardBlockId, - CardDisplayOptions, - CardLayout, - UserSummary, -} from "@/lib/types"; -import { - cloneDefaultCardLayout, - LAYOUT_STORAGE_KEY, - normalizeCardLayout, - toggleBlockVisibility, -} from "@/lib/cardLayout"; - -import BusinessCard from "./BusinessCard"; -import LayoutEditor from "./LayoutEditor"; +import { useState } from "react"; +import type { UserSummary } from "@/lib/types"; +import CardGeneratorModal from "./CardGeneratorModal"; type Props = { summary: UserSummary; }; -const DEFAULT_DISPLAY_OPTIONS: CardDisplayOptions = { - showCompany: false, - showLocation: false, - showWebsite: false, - showTwitter: false, - showJoinedDate: false, - showTopics: false, - showContributionBreakdown: false, - showStreaks: false, - showInterests: false, - showActivityBreakdown: false, -}; - -const MAIN_BLOCKS: Array<{ id: CardBlockId; label: string }> = [ - { id: "avatar", label: "Show Avatar" }, - { id: "bio", label: "Show Bio" }, - { id: "stats", label: "Show Stats" }, - { id: "topLanguages", label: "Top Languages" }, - { id: "topRepos", label: "Top Repositories" }, -]; - -const DETAIL_OPTIONS: Array<{ key: keyof CardDisplayOptions; label: string }> = - [ - { key: "showCompany", label: "Show Company" }, - { key: "showLocation", label: "Show Location" }, - { key: "showWebsite", label: "Show Website" }, - { key: "showTwitter", label: "Show Twitter" }, - { key: "showJoinedDate", label: "Joined Date" }, - { key: "showTopics", label: "Show Topics" }, - { key: "showContributionBreakdown", label: "Contribution Details" }, - { key: "showStreaks", label: "Show Streaks" }, - { key: "showInterests", label: "Show Interests" }, - { key: "showActivityBreakdown", label: "Activity Breakdown" }, - ]; - export default function CardGenerator({ summary }: Props) { const [isOpen, setIsOpen] = useState(false); - const [previewUrl, setPreviewUrl] = useState(null); - const [isGenerating, setIsGenerating] = useState(false); - const [copyStatus, setCopyStatus] = useState<"idle" | "copied" | "error">( - "idle", - ); - const [mounted, setMounted] = useState(false); - const [isLayoutHydrated, setIsLayoutHydrated] = useState(false); - const [activeTab, setActiveTab] = useState<"settings" | "layout">("settings"); - - const [layout, setLayout] = useState(cloneDefaultCardLayout()); - const [displayOptions, setDisplayOptions] = useState( - DEFAULT_DISPLAY_OPTIONS, - ); - - const cardRef = useRef(null); - const modalRef = useRef(null); - const previousFocusRef = useRef(null); - - useEffect(() => { - setMounted(true); - }, []); - - useEffect(() => { - if (!mounted) { - return; - } - - try { - const raw = localStorage.getItem(LAYOUT_STORAGE_KEY); - if (raw) { - const parsed = JSON.parse(raw); - setLayout(normalizeCardLayout(parsed)); - } else { - setLayout(cloneDefaultCardLayout()); - } - } catch { - setLayout(cloneDefaultCardLayout()); - } finally { - setIsLayoutHydrated(true); - } - }, [mounted]); - - useEffect(() => { - if (!mounted || !isLayoutHydrated) { - return; - } - - try { - localStorage.setItem(LAYOUT_STORAGE_KEY, JSON.stringify(layout)); - } catch { - // Ignore storage write failures (private mode, quota exceeded, etc.) - } - }, [layout, mounted, isLayoutHydrated]); - - const handleClose = useCallback(() => { - setIsOpen(false); - setPreviewUrl(null); - }, []); - - const generateImage = useCallback(async () => { - if (!cardRef.current) return null; - try { - const dataUrl = await toPng(cardRef.current, { - cacheBust: true, - pixelRatio: 1, - backgroundColor: "#0d1117", - }); - return dataUrl; - } catch (err) { - console.error("Failed to generate image", err); - return null; - } - }, []); - - useEffect(() => { - if (isOpen) { - previousFocusRef.current = document.activeElement as HTMLElement; - - if (modalRef.current) { - modalRef.current.focus(); - } - - const handleKeyDown = (e: KeyboardEvent) => { - if (e.key === "Escape") { - handleClose(); - } - }; - - document.addEventListener("keydown", handleKeyDown); - - return () => { - document.removeEventListener("keydown", handleKeyDown); - if (previousFocusRef.current) { - previousFocusRef.current.focus(); - } - }; - } - }, [isOpen, handleClose]); - - useEffect(() => { - if (isOpen && !previewUrl) { - let isCancelled = false; - setIsGenerating(true); - - const generate = async () => { - try { - await document.fonts.ready; - const url = await generateImage(); - if (!isCancelled) { - setPreviewUrl(url); - } - } catch (err) { - console.error("Failed to generate image", err); - if (!isCancelled) { - setPreviewUrl(null); - } - } finally { - if (!isCancelled) { - setIsGenerating(false); - } - } - }; - - let rafId: number; - const timer = setTimeout(() => { - rafId = requestAnimationFrame(() => { - generate(); - }); - }, 100); - - return () => { - isCancelled = true; - clearTimeout(timer); - if (rafId) cancelAnimationFrame(rafId); - }; - } - }, [isOpen, previewUrl, generateImage]); - - useEffect(() => { - if (isOpen) { - setPreviewUrl(null); - } - }, [layout, displayOptions, isOpen]); - - const handleDownload = useCallback(() => { - if (!previewUrl) return; - const link = document.createElement("a"); - link.download = `${summary.profile?.login || "github"}-summary-card.png`; - link.href = previewUrl; - link.click(); - }, [previewUrl, summary.profile?.login]); - - const handleCopy = useCallback(async () => { - if (!cardRef.current) return; - try { - setCopyStatus("idle"); - const blob = await toBlob(cardRef.current, { - cacheBust: true, - backgroundColor: "#0d1117", - }); - if (!blob) throw new Error("Failed to create blob"); - - await navigator.clipboard.write([ - new ClipboardItem({ "image/png": blob }), - ]); - setCopyStatus("copied"); - setTimeout(() => setCopyStatus("idle"), 2000); - } catch (err) { - console.error("Failed to copy", err); - setCopyStatus("error"); - } - }, []); - - const toggleMainBlockVisibility = (blockId: CardBlockId) => { - setLayout((prev) => toggleBlockVisibility(prev, blockId)); - }; - - const toggleDisplayOption = (key: keyof CardDisplayOptions) => { - setDisplayOptions((prev) => ({ ...prev, [key]: !prev[key] })); - }; - - const isBlockVisible = (blockId: CardBlockId): boolean => { - return ( - layout.blocks.find((block) => block.id === blockId)?.visible ?? false - ); - }; if (!summary.profile) return null; @@ -275,229 +38,11 @@ export default function CardGenerator({ summary }: Props) { Card - {mounted && - createPortal( - isOpen && ( - <> -
{ - if (e.key === "Enter" || e.key === " " || e.key === "Escape") { - e.preventDefault(); - handleClose(); - } - }} - > -
e.stopPropagation()} - tabIndex={-1} - > -
-

- Profile Card -

- -
- -
- - -
- - {activeTab === "settings" && ( -
- {MAIN_BLOCKS.map(({ id, label }) => ( - - ))} - - {DETAIL_OPTIONS.map(({ key, label }) => ( - - ))} -
- )} - - {activeTab === "layout" && ( -
- -
- )} - -
- {isGenerating ? ( -
-
-

Generating preview...

-
- ) : previewUrl ? ( - // eslint-disable-next-line @next/next/no-img-element - Card Preview - ) : ( -

Failed to generate preview.

- )} -
- -
- - - -
-
-
- -
-
- -
-
- - ), - document.body, - )} + setIsOpen(false)} + /> ); } diff --git a/src/components/CardGeneratorModal.tsx b/src/components/CardGeneratorModal.tsx new file mode 100644 index 0000000..fb37210 --- /dev/null +++ b/src/components/CardGeneratorModal.tsx @@ -0,0 +1,474 @@ +"use client"; + +import { useState, useRef, useCallback, useEffect } from "react"; +import { createPortal } from "react-dom"; +import { toPng, toBlob } from "html-to-image"; + +import type { + CardBlockId, + CardDisplayOptions, + CardLayout, + UserSummary, +} from "@/lib/types"; +import { + cloneDefaultCardLayout, + LAYOUT_STORAGE_KEY, + normalizeCardLayout, + toggleBlockVisibility, +} from "@/lib/cardLayout"; + +import BusinessCard from "./BusinessCard"; +import LayoutEditor from "./LayoutEditor"; + +const DEFAULT_DISPLAY_OPTIONS: CardDisplayOptions = { + showCompany: false, + showLocation: false, + showWebsite: false, + showTwitter: false, + showJoinedDate: false, + showTopics: false, + showContributionBreakdown: false, + showStreaks: false, + showInterests: false, + showActivityBreakdown: false, +}; + +const MAIN_BLOCKS: Array<{ id: CardBlockId; label: string }> = [ + { id: "avatar", label: "Show Avatar" }, + { id: "bio", label: "Show Bio" }, + { id: "stats", label: "Show Stats" }, + { id: "topLanguages", label: "Top Languages" }, + { id: "topRepos", label: "Top Repositories" }, +]; + +const DETAIL_OPTIONS: Array<{ key: keyof CardDisplayOptions; label: string }> = + [ + { key: "showCompany", label: "Show Company" }, + { key: "showLocation", label: "Show Location" }, + { key: "showWebsite", label: "Show Website" }, + { key: "showTwitter", label: "Show Twitter" }, + { key: "showJoinedDate", label: "Joined Date" }, + { key: "showTopics", label: "Show Topics" }, + { key: "showContributionBreakdown", label: "Contribution Details" }, + { key: "showStreaks", label: "Show Streaks" }, + { key: "showInterests", label: "Show Interests" }, + { key: "showActivityBreakdown", label: "Activity Breakdown" }, + ]; + +type Props = { + summary: UserSummary; + isOpen: boolean; + onClose: () => void; +}; + +export default function CardGeneratorModal({ summary, isOpen, onClose }: Props) { + const [previewUrl, setPreviewUrl] = useState(null); + const [isGenerating, setIsGenerating] = useState(false); + const [copyStatus, setCopyStatus] = useState<"idle" | "copied" | "error">( + "idle", + ); + const [mounted, setMounted] = useState(false); + const [isLayoutHydrated, setIsLayoutHydrated] = useState(false); + const [activeTab, setActiveTab] = useState<"settings" | "layout">("settings"); + + const [layout, setLayout] = useState(cloneDefaultCardLayout()); + const [displayOptions, setDisplayOptions] = useState( + DEFAULT_DISPLAY_OPTIONS, + ); + + const cardRef = useRef(null); + const modalRef = useRef(null); + const previousFocusRef = useRef(null); + + useEffect(() => { + setMounted(true); + }, []); + + useEffect(() => { + if (!mounted) { + return; + } + + try { + const raw = localStorage.getItem(LAYOUT_STORAGE_KEY); + if (raw) { + const parsed = JSON.parse(raw); + setLayout(normalizeCardLayout(parsed)); + } else { + setLayout(cloneDefaultCardLayout()); + } + } catch { + setLayout(cloneDefaultCardLayout()); + } finally { + setIsLayoutHydrated(true); + } + }, [mounted]); + + useEffect(() => { + if (!mounted || !isLayoutHydrated) { + return; + } + + try { + localStorage.setItem(LAYOUT_STORAGE_KEY, JSON.stringify(layout)); + } catch { + // Ignore storage write failures (private mode, quota exceeded, etc.) + } + }, [layout, mounted, isLayoutHydrated]); + + const handleClose = useCallback(() => { + onClose(); + setPreviewUrl(null); + }, [onClose]); + + const generateImage = useCallback(async () => { + if (!cardRef.current) return null; + try { + const dataUrl = await toPng(cardRef.current, { + cacheBust: true, + pixelRatio: 1, + backgroundColor: "#0d1117", + }); + return dataUrl; + } catch (err) { + console.error("Failed to generate image", err); + return null; + } + }, []); + + useEffect(() => { + if (isOpen) { + previousFocusRef.current = document.activeElement as HTMLElement; + + if (modalRef.current) { + modalRef.current.focus(); + } + + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === "Escape") { + handleClose(); + } + }; + + document.addEventListener("keydown", handleKeyDown); + + return () => { + document.removeEventListener("keydown", handleKeyDown); + if (previousFocusRef.current) { + previousFocusRef.current.focus(); + } + }; + } + }, [isOpen, handleClose]); + + useEffect(() => { + if (isOpen && !previewUrl) { + let isCancelled = false; + setIsGenerating(true); + + const generate = async () => { + try { + await document.fonts.ready; + const url = await generateImage(); + if (!isCancelled) { + setPreviewUrl(url); + } + } catch (err) { + console.error("Failed to generate image", err); + if (!isCancelled) { + setPreviewUrl(null); + } + } finally { + if (!isCancelled) { + setIsGenerating(false); + } + } + }; + + let rafId: number; + const timer = setTimeout(() => { + rafId = requestAnimationFrame(() => { + generate(); + }); + }, 100); + + return () => { + isCancelled = true; + clearTimeout(timer); + if (rafId) cancelAnimationFrame(rafId); + }; + } + }, [isOpen, previewUrl, generateImage]); + + useEffect(() => { + if (isOpen) { + setPreviewUrl(null); + } + }, [layout, displayOptions, isOpen]); + + const handleDownload = useCallback(() => { + if (!previewUrl) return; + const link = document.createElement("a"); + link.download = `${summary.profile?.login || "github"}-summary-card.png`; + link.href = previewUrl; + link.click(); + }, [previewUrl, summary.profile?.login]); + + const handleCopy = useCallback(async () => { + if (!cardRef.current) return; + try { + setCopyStatus("idle"); + const blob = await toBlob(cardRef.current, { + cacheBust: true, + backgroundColor: "#0d1117", + }); + if (!blob) throw new Error("Failed to create blob"); + + await navigator.clipboard.write([ + new ClipboardItem({ "image/png": blob }), + ]); + setCopyStatus("copied"); + setTimeout(() => setCopyStatus("idle"), 2000); + } catch (err) { + console.error("Failed to copy", err); + setCopyStatus("error"); + } + }, []); + + const toggleMainBlockVisibility = (blockId: CardBlockId) => { + setLayout((prev) => toggleBlockVisibility(prev, blockId)); + }; + + const toggleDisplayOption = (key: keyof CardDisplayOptions) => { + setDisplayOptions((prev) => ({ ...prev, [key]: !prev[key] })); + }; + + const isBlockVisible = (blockId: CardBlockId): boolean => { + return ( + layout.blocks.find((block) => block.id === blockId)?.visible ?? false + ); + }; + + if (!isOpen || !mounted) return null; + + return createPortal( + <> +
{ + if (e.key === "Enter" || e.key === " " || e.key === "Escape") { + e.preventDefault(); + handleClose(); + } + }} + > +
e.stopPropagation()} + tabIndex={-1} + > +
+

+ Profile Card +

+ +
+ +
+ + +
+ + {activeTab === "settings" && ( +
+ {MAIN_BLOCKS.map(({ id, label }) => ( + + ))} + + {DETAIL_OPTIONS.map(({ key, label }) => ( + + ))} +
+ )} + + {activeTab === "layout" && ( +
+ +
+ )} + +
+ {isGenerating ? ( +
+
+

Generating preview...

+
+ ) : previewUrl ? ( + // eslint-disable-next-line @next/next/no-img-element + Card Preview + ) : ( +

Failed to generate preview.

+ )} +
+ +
+ + + +
+
+
+ +
+
+ +
+
+ , + document.body, + ); +} From 8713d79250112a72fb0a4902bb786437e8f289d1 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Fri, 13 Mar 2026 06:43:04 +0000 Subject: [PATCH 4/5] refactor: extract DisplayOptions and ReadmeCardUrl into subcomponents Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com> --- dev_output.log | 30 +++ src/components/DashboardSettingsClient.tsx | 217 +-------------------- src/components/DisplayOptionsSection.tsx | 52 +++++ src/components/ReadmeCardUrlSection.tsx | 184 +++++++++++++++++ 4 files changed, 274 insertions(+), 209 deletions(-) create mode 100644 dev_output.log create mode 100644 src/components/DisplayOptionsSection.tsx create mode 100644 src/components/ReadmeCardUrlSection.tsx diff --git a/dev_output.log b/dev_output.log new file mode 100644 index 0000000..0355cf1 --- /dev/null +++ b/dev_output.log @@ -0,0 +1,30 @@ + +> github-user-summary@0.1.0 dev +> next dev + +▲ Next.js 16.1.6 (Turbopack) +- Local: http://localhost:3000 +- Network: http://192.168.0.2:3000 + +✓ Starting... +✓ Ready in 1120ms +○ Compiling /dashboard/settings ... +[next-auth][warn][NEXTAUTH_URL] +https://next-auth.js.org/warnings#nextauth_url + GET /dashboard/settings 307 in 5.9s (compile: 5.5s, render: 388ms) + GET / 200 in 769ms (compile: 692ms, render: 77ms) +[next-auth][warn][NEXTAUTH_URL] +https://next-auth.js.org/warnings#nextauth_url + GET /api/auth/session 200 in 2.4s (compile: 2.4s, render: 52ms) + GET / 200 in 106ms (compile: 6ms, render: 99ms) + GET /api/auth/session 200 in 40ms (compile: 27ms, render: 12ms) +⚠ metadataBase property in metadata export is not set for resolving social open graph or twitter images, using "http://localhost:3000". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase +React expects the `children` prop of tags to be a string, number, bigint, or object with a novel `toString` method but found an Array with length 4 instead. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert `children` of <title> tags to a single string value which is why Arrays of length greater than 1 are not supported. When using JSX it can be common to combine text nodes and value nodes. For example: <title>hello {nameOfUser}. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop is using this form try rewriting it using a template string: {`hello ${nameOfUser}`}. + GET /api/auth/session 200 in 41ms (compile: 28ms, render: 13ms) + GET /test-settings 200 in 3.8s (compile: 2.1s, render: 1679ms) + GET /test-settings 200 in 974ms (compile: 740ms, render: 235ms) +[next-auth][warn][NEXTAUTH_URL] +https://next-auth.js.org/warnings#nextauth_url + GET /api/auth/session 200 in 369ms (compile: 294ms, render: 75ms) + GET /api/auth/session 200 in 38ms (compile: 9ms, render: 30ms) +✓ Compiled in 61ms diff --git a/src/components/DashboardSettingsClient.tsx b/src/components/DashboardSettingsClient.tsx index e6ef1ca..9c1526c 100644 --- a/src/components/DashboardSettingsClient.tsx +++ b/src/components/DashboardSettingsClient.tsx @@ -1,10 +1,11 @@ "use client"; -import { useMemo } from "react"; import { useState } from "react"; import { useSession } from "next-auth/react"; import LayoutEditor from "@/components/LayoutEditor"; +import DisplayOptionsSection from "@/components/DisplayOptionsSection"; +import ReadmeCardUrlSection from "@/components/ReadmeCardUrlSection"; import { getDefaultCardSettings, loadCardSettings, @@ -12,19 +13,6 @@ import { } from "@/lib/cardSettings"; import type { CardBlockId, CardDisplayOptions, CardLayout } from "@/lib/types"; -const toggles: Array<{ key: keyof CardDisplayOptions; label: string }> = [ - { key: "showCompany", label: "Company" }, - { key: "showLocation", label: "Location" }, - { key: "showWebsite", label: "Website" }, - { key: "showTwitter", label: "Twitter" }, - { key: "showJoinedDate", label: "Joined date" }, - { key: "showTopics", label: "Topics" }, - { key: "showContributionBreakdown", label: "Contribution breakdown" }, - { key: "showStreaks", label: "Streaks" }, - { key: "showInterests", label: "Interests" }, - { key: "showActivityBreakdown", label: "Activity breakdown" }, -]; - export default function DashboardSettingsClient() { const { data: session } = useSession(); const [layout, setLayout] = useState( @@ -34,11 +22,6 @@ export default function DashboardSettingsClient() { () => loadCardSettings().options, ); const [status, setStatus] = useState(""); - const [readmeTheme, setReadmeTheme] = useState<"light" | "dark">("light"); - const [readmeCols, setReadmeCols] = useState<1 | 2>(1); - const [includeStreak, setIncludeStreak] = useState(false); - const [includeHeatmap, setIncludeHeatmap] = useState(false); - const [copyState, setCopyState] = useState(""); const onSave = () => { saveCardSettings(layout, options); @@ -62,106 +45,6 @@ export default function DashboardSettingsClient() { })); }; - const readmeUrl = useMemo(() => { - const username = session?.user?.login; - if (!username) { - return ""; - } - - const blockMap: Record< - CardBlockId, - "bio" | "stats" | "langs" | "repos" | null - > = { - avatar: null, - bio: "bio", - stats: "stats", - topLanguages: "langs", - topRepos: "repos", - }; - - const selected = layout.blocks - .filter((block) => block.visible) - .map((block) => blockMap[block.id]) - .filter((block): block is "bio" | "stats" | "langs" | "repos" => - Boolean(block), - ); - - const selectedBlocks: Array< - "bio" | "stats" | "langs" | "repos" | "streak" | "heatmap" - > = [...selected]; - - if (includeStreak) { - selectedBlocks.push("streak"); - } - - if (includeHeatmap) { - selectedBlocks.push("heatmap"); - } - - const uniqueBlocks = Array.from(new Set(selectedBlocks)); - - const layoutParts = layout.blocks - .filter((block) => block.visible && blockMap[block.id]) - .map((block) => { - const target = blockMap[block.id]; - if (!target) { - return null; - } - return `${block.column}:${target}`; - }) - .filter((value): value is string => Boolean(value)); - - const hide = []; - if (options.showContributionBreakdown === false) { - hide.push("stars"); - } - if (options.showActivityBreakdown === false) { - hide.push("forks"); - } - - const params = new URLSearchParams(); - params.set("format", "png"); - params.set("theme", readmeTheme); - params.set("cols", String(readmeCols)); - params.set( - "blocks", - uniqueBlocks.length > 0 ? uniqueBlocks.join(",") : "bio,stats,langs", - ); - if (layoutParts.length > 0) { - params.set("layout", layoutParts.join(",")); - } - if (hide.length > 0) { - params.set("hide", hide.join(",")); - } - params.set("width", "600"); - - const origin = typeof window !== "undefined" ? window.location.origin : ""; - return `${origin}/api/card/${encodeURIComponent(username)}?${params.toString()}`; - }, [ - session?.user?.login, - layout.blocks, - options.showContributionBreakdown, - options.showActivityBreakdown, - readmeTheme, - readmeCols, - includeStreak, - includeHeatmap, - ]); - - const onCopyReadmeUrl = async () => { - if (!readmeUrl) { - setCopyState("Sign in to generate URL"); - return; - } - - try { - await navigator.clipboard.writeText(readmeUrl); - setCopyState("Copied!"); - } catch { - setCopyState("Copy failed"); - } - }; - return (
@@ -182,97 +65,13 @@ export default function DashboardSettingsClient() { /> -
-

Display Options

-
- {toggles.map((toggle) => { - const checked = Boolean(options[toggle.key]); - return ( - - ); - })} -
-
- -
-

README Card URL

-
- - - - -
+ -
- {readmeUrl || "Sign in to generate your README URL"} -
- -
- - {copyState ? ( - {copyState} - ) : null} -
-
+
+ {copyState ? ( + {copyState} + ) : null} +
+ + ); +} From a2b6204d6e59f81dc5a7e80fbec8e95dac48adf0 Mon Sep 17 00:00:00 2001 From: is0692vs Date: Sat, 14 Mar 2026 22:05:35 +0900 Subject: [PATCH 5/5] Remove stray dev output from consolidated UI PR --- dev_output.log | 30 ------------------------------ 1 file changed, 30 deletions(-) delete mode 100644 dev_output.log diff --git a/dev_output.log b/dev_output.log deleted file mode 100644 index 0355cf1..0000000 --- a/dev_output.log +++ /dev/null @@ -1,30 +0,0 @@ - -> github-user-summary@0.1.0 dev -> next dev - -▲ Next.js 16.1.6 (Turbopack) -- Local: http://localhost:3000 -- Network: http://192.168.0.2:3000 - -✓ Starting... -✓ Ready in 1120ms -○ Compiling /dashboard/settings ... -[next-auth][warn][NEXTAUTH_URL] -https://next-auth.js.org/warnings#nextauth_url - GET /dashboard/settings 307 in 5.9s (compile: 5.5s, render: 388ms) - GET / 200 in 769ms (compile: 692ms, render: 77ms) -[next-auth][warn][NEXTAUTH_URL] -https://next-auth.js.org/warnings#nextauth_url - GET /api/auth/session 200 in 2.4s (compile: 2.4s, render: 52ms) - GET / 200 in 106ms (compile: 6ms, render: 99ms) - GET /api/auth/session 200 in 40ms (compile: 27ms, render: 12ms) -⚠ metadataBase property in metadata export is not set for resolving social open graph or twitter images, using "http://localhost:3000". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase -React expects the `children` prop of tags to be a string, number, bigint, or object with a novel `toString` method but found an Array with length 4 instead. Browsers treat all child Nodes of <title> tags as Text content and React expects to be able to convert `children` of <title> tags to a single string value which is why Arrays of length greater than 1 are not supported. When using JSX it can be common to combine text nodes and value nodes. For example: <title>hello {nameOfUser}. While not immediately apparent, `children` in this case is an Array with length 2. If your `children` prop is using this form try rewriting it using a template string: {`hello ${nameOfUser}`}. - GET /api/auth/session 200 in 41ms (compile: 28ms, render: 13ms) - GET /test-settings 200 in 3.8s (compile: 2.1s, render: 1679ms) - GET /test-settings 200 in 974ms (compile: 740ms, render: 235ms) -[next-auth][warn][NEXTAUTH_URL] -https://next-auth.js.org/warnings#nextauth_url - GET /api/auth/session 200 in 369ms (compile: 294ms, render: 75ms) - GET /api/auth/session 200 in 38ms (compile: 9ms, render: 30ms) -✓ Compiled in 61ms