From 40dbb7928f47bffd025bb0d81b4b425778675246 Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Wed, 12 Mar 2025 01:10:33 +0530 Subject: [PATCH 1/9] fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja --- src/components/ToggleDarkMode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index d3bd390b..f1687085 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -11,7 +11,7 @@ const ToggleDarkMode: React.FC = () => { setIsDarkMode(backgroundColor === "#121212"); }, [backgroundColor]); - const handleChange = () => { + const handleChange = (isChecked: boolean) => { toggleDarkMode(); setIsDarkMode((prev) => !prev); const newTheme = !isDarkMode ? "dark" : "light"; From c6bebfbaf02d90e9a994fabe1368cf19b69bd6e5 Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Fri, 14 Mar 2025 04:08:35 +0530 Subject: [PATCH 2/9] fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja --- src/components/ToggleDarkMode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index f1687085..d3bd390b 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -11,7 +11,7 @@ const ToggleDarkMode: React.FC = () => { setIsDarkMode(backgroundColor === "#121212"); }, [backgroundColor]); - const handleChange = (isChecked: boolean) => { + const handleChange = () => { toggleDarkMode(); setIsDarkMode((prev) => !prev); const newTheme = !isDarkMode ? "dark" : "light"; From 62954e92a5050a8c2496838049560880d4ae4268 Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Wed, 12 Mar 2025 01:10:33 +0530 Subject: [PATCH 3/9] fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja --- src/components/ToggleDarkMode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index d3bd390b..f1687085 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -11,7 +11,7 @@ const ToggleDarkMode: React.FC = () => { setIsDarkMode(backgroundColor === "#121212"); }, [backgroundColor]); - const handleChange = () => { + const handleChange = (isChecked: boolean) => { toggleDarkMode(); setIsDarkMode((prev) => !prev); const newTheme = !isDarkMode ? "dark" : "light"; From bbd34bfbaa44167b2bd2a27c099fb264575f9664 Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Sun, 16 Mar 2025 18:08:53 +0530 Subject: [PATCH 4/9] update is checked Signed-off-by: Dharma Teja --- src/components/ToggleDarkMode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index f1687085..d3bd390b 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -11,7 +11,7 @@ const ToggleDarkMode: React.FC = () => { setIsDarkMode(backgroundColor === "#121212"); }, [backgroundColor]); - const handleChange = (isChecked: boolean) => { + const handleChange = () => { toggleDarkMode(); setIsDarkMode((prev) => !prev); const newTheme = !isDarkMode ? "dark" : "light"; From 7d8e99e99c9f8db993615898d80433d8a831767e Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Wed, 12 Mar 2025 01:10:33 +0530 Subject: [PATCH 5/9] fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja --- src/components/ToggleDarkMode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index d3bd390b..f1687085 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -11,7 +11,7 @@ const ToggleDarkMode: React.FC = () => { setIsDarkMode(backgroundColor === "#121212"); }, [backgroundColor]); - const handleChange = () => { + const handleChange = (isChecked: boolean) => { toggleDarkMode(); setIsDarkMode((prev) => !prev); const newTheme = !isDarkMode ? "dark" : "light"; From 0301deec7836e15562b087f92eaa8f1192609930 Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Fri, 14 Mar 2025 04:08:35 +0530 Subject: [PATCH 6/9] fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja --- src/components/ToggleDarkMode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index f1687085..d3bd390b 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -11,7 +11,7 @@ const ToggleDarkMode: React.FC = () => { setIsDarkMode(backgroundColor === "#121212"); }, [backgroundColor]); - const handleChange = (isChecked: boolean) => { + const handleChange = () => { toggleDarkMode(); setIsDarkMode((prev) => !prev); const newTheme = !isDarkMode ? "dark" : "light"; From 56c502c5cb7e03ccae6ab3c5b4a355312c01cf5a Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Wed, 12 Mar 2025 01:10:33 +0530 Subject: [PATCH 7/9] fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja --- src/components/ToggleDarkMode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index d3bd390b..f1687085 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -11,7 +11,7 @@ const ToggleDarkMode: React.FC = () => { setIsDarkMode(backgroundColor === "#121212"); }, [backgroundColor]); - const handleChange = () => { + const handleChange = (isChecked: boolean) => { toggleDarkMode(); setIsDarkMode((prev) => !prev); const newTheme = !isDarkMode ? "dark" : "light"; From 891187fde86f0a2afd0787adceacad12f8574cc7 Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Sun, 16 Mar 2025 18:08:53 +0530 Subject: [PATCH 8/9] update is checked Signed-off-by: Dharma Teja --- src/components/ToggleDarkMode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index f1687085..d3bd390b 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -11,7 +11,7 @@ const ToggleDarkMode: React.FC = () => { setIsDarkMode(backgroundColor === "#121212"); }, [backgroundColor]); - const handleChange = (isChecked: boolean) => { + const handleChange = () => { toggleDarkMode(); setIsDarkMode((prev) => !prev); const newTheme = !isDarkMode ? "dark" : "light"; From 5c3244e51257877bd2db8b1fcd06259c8b7a902f Mon Sep 17 00:00:00 2001 From: Dharma Teja Date: Mon, 17 Mar 2025 09:41:44 +0530 Subject: [PATCH 9/9] feat(module): improve-styling-for-bash-code-snippets Signed-off-by: Dharma Teja --- src/components/Content.tsx | 30 +++++++-- src/styles/components/Content.ts | 103 +++++++++++++++++-------------- 2 files changed, 83 insertions(+), 50 deletions(-) diff --git a/src/components/Content.tsx b/src/components/Content.tsx index abfdda18..aac6b314 100644 --- a/src/components/Content.tsx +++ b/src/components/Content.tsx @@ -7,11 +7,15 @@ import { ContentContainer, NavigationButtons, NavigationButton, + CodeBlockContainer, + CopyButton, } from "../styles/components/Content"; import { LoadingOutlined, LeftOutlined, RightOutlined, + CopyOutlined, + CheckOutlined, } from "@ant-design/icons"; import { Spin } from "antd"; import fetchContent from "../utils/fetchContent"; @@ -23,6 +27,7 @@ const LearnContent: React.FC = ({ file }) => { const [content, setContent] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); + const [copied, setCopied] = useState(null); const navigate = useNavigate(); useEffect(() => { @@ -59,6 +64,12 @@ const LearnContent: React.FC = ({ file }) => { } }; + const copyToClipboard = (code: string) => { + navigator.clipboard.writeText(code); + setCopied(code); + setTimeout(() => setCopied(null), 2000); + }; + if (loading) { return (
= ({ file }) => { ( -
- {props.alt -
- ), + pre: ({ children }) => { + const codeElement = React.Children.toArray(children)[0] as React.ReactElement; + if (!codeElement || typeof codeElement !== "object") return 
{children}
; + + const codeText = codeElement.props.children || ""; + return ( + + 
{children}
+ copyToClipboard(codeText)}> + {copied === codeText ? : } + + + ); + }, }} > {content} diff --git a/src/styles/components/Content.ts b/src/styles/components/Content.ts index e1edaefc..39dc0985 100644 --- a/src/styles/components/Content.ts +++ b/src/styles/components/Content.ts @@ -1,48 +1,40 @@ import styled from "styled-components"; export const ContentContainer = styled.div` - padding: 20px; - max-width: 900px; + padding: 1.25rem; + max-width: 56.25rem; width: 100%; margin: 0 auto; - background-color: var(--bg-color) !important; - border-radius: 8px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + background-color: var(--bg-color); + border-radius: 0.5rem; + box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); box-sizing: border-box; - h1, - h2, - h3, - h4, - h5, - h6 { + h1, h2, h3, h4, h5, h6 { margin-top: 1em; margin-bottom: 0.5em; - color: var(--text-color) !important; + color: var(--text-color); } p { line-height: 1.6; margin-bottom: 1em; - color: var(--text-color) !important; + color: var(--text-color); } a { color: #19c6c7; text-decoration: none; - &:hover { text-decoration: underline; } } - ul, - ol { + ul, ol { margin: 1em 0; - li { margin-bottom: 0.5em; - color: var(--text-color) !important; + color: var(--text-color); } } @@ -58,40 +50,76 @@ export const ContentContainer = styled.div` justify-content: center; } - @media (max-width: 1200px) { + pre { + background-color: #282c34; + color: white; + padding: 0.75rem; + border-radius: 0.3125rem; + overflow-x: auto; + font-size: 0.875rem; + margin: 0.625rem 0; + } + + code { + font-family: "Fira Code", monospace; + white-space: pre-wrap; + } + + @media (max-width: 75rem) { max-width: 90%; } - @media (max-width: 768px) { - padding: 15px; + @media (max-width: 48rem) { + padding: 0.9375rem; + } +`; + +export const CodeBlockContainer = styled.div` + position: relative; + margin: 0.625rem 0; +`; + +export const CopyButton = styled.button` + position: absolute; + top: 0.5rem; + right: 0.625rem; + border: none; + background: rgba(255, 255, 255, 0.2); + color: white; + cursor: pointer; + padding: 0.3125rem; + border-radius: 0.25rem; + font-size: 0.75rem; + + &:hover { + background: rgba(255, 255, 255, 0.4); } `; export const NavigationButtons = styled.div` - margin-top: 60px; - margin-bottom: 20px; + margin-top: 3.75rem; + margin-bottom: 1.25rem; display: flex; justify-content: space-between; - @media (max-width: 768px) { + @media (max-width: 48rem) { flex-direction: column; align-items: stretch; - button { - margin-bottom: 10px; + margin-bottom: 0.625rem; } } `; export const NavigationButton = styled.button` - padding: 10px 20px; - border: 2px solid #19c6c7; - border-radius: 4px; + padding: 0.625rem 1.25rem; + border: 0.125rem solid #19c6c7; + border-radius: 0.25rem; background-color: white; color: #1b2540; cursor: pointer; font-weight: 600; - font-size: 16px; + font-size: 1rem; display: flex; align-items: center; justify-content: center; @@ -108,19 +136,4 @@ export const NavigationButton = styled.button` color: white; text-decoration: underline; } - - svg { - margin-right: 8px; - } - - &:nth-child(1) svg { - margin-right: 8px; - } - - &:nth-child(2) { - svg { - margin-right: 0; - margin-left: 8px; - } - } `;