d3m0k1d/d3m0k1d.ru
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: types #17

Merged
d3m0k1d merged 2 commits from develop into master 2026-02-15 15:02:48 +00:00
Conversation 0 Commits 2 Files Changed 1 +39 -64
1 changed files with 39 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
frontend/src/pages/BlogPost.tsx
View File

@@ -52,9 +52,7 @@ function BlogPost() {
}; };
const copyCode = useCallback((code: string) => { const copyCode = useCallback((code: string) => {
navigator.clipboard.writeText(code).then(() => { navigator.clipboard.writeText(code);
// Можно добавить toast позже
});
}, []); }, []);
if (isLoading) { if (isLoading) {
@@ -118,14 +116,15 @@ function BlogPost() {
<ReactMarkdown <ReactMarkdown
remarkPlugins={[remarkGfm]} remarkPlugins={[remarkGfm]}
components={{ components={{
code({ node, inline, className, children, ...props }) { code(props) {
const { children, className, ...rest } = props;
const match = /language-(\w+)/.exec(className || ""); const match = /language-(\w+)/.exec(className || "");
const language = match ? match[1] : "text"; const language = match ? match[1] : "text";
if (inline) { if (!match) {
return ( return (
<code className="inline-code"> <code {...rest} className="inline-code">
{String(children).replace(/\n$/, "")} {children}
</code> </code>
); );
} }
@@ -142,21 +141,17 @@ function BlogPost() {
<span>Copy</span> <span>Copy</span>
</button> </button>
<SyntaxHighlighter <SyntaxHighlighter
{...props} style={theme}
style={{
...theme,
'pre[class*="language-"]': {
...theme['pre[class*="language-"]'],
background: "rgb(15, 15, 25) !important",
marginBottom: "0 !important",
borderRadius: "0 0 12px 12px !important",
},
}}
language={language} language={language}
PreTag="div" PreTag="div"
showLineNumbers customStyle={{
wrapLines background: "rgb(12, 12, 22)",
className="code-highlighter" margin: 0,
padding: "1.75rem 1.5rem 1.5rem",
borderRadius: "0 0 12px 12px",
fontSize: "0.875rem",
lineHeight: "1.65",
}}
> >
{String(children).replace(/\n$/, "")} {String(children).replace(/\n$/, "")}
</SyntaxHighlighter> </SyntaxHighlighter>
@@ -198,6 +193,10 @@ function BlogPost() {
padding-left: 1.5em; padding-left: 1.5em;
} }
.blog-content li {
color: #ffffff !important;
}
/* Inline код */ /* Inline код */
.inline-code { .inline-code {
color: #ffffff !important; color: #ffffff !important;
@@ -205,28 +204,28 @@ function BlogPost() {
padding: 0.2em 0.4em !important; padding: 0.2em 0.4em !important;
border-radius: 6px !important; border-radius: 6px !important;
font-size: 0.875em !important; font-size: 0.875em !important;
font-family: 'Commit_Mono', monospace !important;
} }
/* 🔥 КОНТЕЙНЕР КОДА */ /* Контейнер кода */
.code-container { .code-container {
position: relative; position: relative;
margin: 2em 0; margin: 2em 0;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
background: linear-gradient(145deg, rgb(10,10,20) 0%, rgb(20,20,35) 100%); background: linear-gradient(145deg, rgb(8,8,18) 0%, rgb(18,18,32) 100%);
border: 1px solid rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 8px 32px rgba(0,0,0,0.4); box-shadow: 0 12px 40px rgba(0,0,0,0.5);
backdrop-filter: blur(20px);
} }
/* ✨ АНИМИРОВАННАЯ КНОПКА COPY */ /* Анимированная кнопка */
.copy-button { .copy-button {
position: absolute; position: absolute;
top: 14px; top: 14px;
right: 14px; right: 14px;
z-index: 20; z-index: 20;
background: linear-gradient(135deg, rgba(117,43,255,0.2) 0%, rgba(117,43,255,0.1) 100%); background: linear-gradient(135deg, rgba(117,43,255,0.25) 0%, rgba(117,43,255,0.15) 100%);
border: 1px solid rgba(117,43,255,0.4); border: 1px solid rgba(117,43,255,0.5);
color: #ffffff; color: #ffffff;
padding: 8px 16px; padding: 8px 16px;
border-radius: 8px; border-radius: 8px;
@@ -236,53 +235,30 @@ function BlogPost() {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-family: 'Commit_Mono', monospace; font-family: 'Commit_Mono', monospace;
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
box-shadow: 0 4px 14px rgba(117,43,255,0.2); box-shadow: 0 4px 16px rgba(117,43,255,0.25);
transform: translateY(0);
} }
.copy-button:hover { .copy-button:hover {
background: linear-gradient(135deg, hsl(270,73%,63%) 0%, hsl(270,73%,55%) 100%); background: linear-gradient(135deg, hsl(270,73%,65%) 0%, hsl(270,73%,55%) 100%);
transform: translateY(-2px) scale(1.02); transform: translateY(-3px) scale(1.03);
box-shadow: 0 8px 25px rgba(117,43,255,0.4); box-shadow: 0 12px 30px rgba(117,43,255,0.45);
border-color: hsl(270,73%,70%); border-color: hsl(270,73%,75%);
} }
.copy-button:active { .copy-button:active {
transform: translateY(0) scale(0.98); transform: translateY(-1px) scale(0.98);
transition: all 0.1s; transition: all 0.1s;
} }
.copy-button span {
position: relative;
}
/* SyntaxHighlighter */
.code-highlighter {
margin: 0 !important;
border-radius: 0 0 12px 12px !important;
font-family: 'Commit_Mono', monospace !important;
font-size: 0.875rem !important;
line-height: 1.65 !important;
}
.code-highlighter pre[class*="language-"] {
margin: 0 !important;
padding: 1.75rem 1.5rem 1.5rem !important;
background: transparent !important;
border-radius: 0 0 12px 12px !important;
overflow-x: auto !important;
}
/* Номера строк */
.code-highlighter .token-line {
padding-left: 1.25rem !important;
counter-increment: line;
position: relative;
}
/* Заголовки */ /* Заголовки */
.blog-content h1, .blog-content h2, .blog-content h3 { .blog-content h1, .blog-content h2, .blog-content h3 {
color: hsl(270, 73%, 63%) !important; color: hsl(270, 73%, 63%) !important;
margin-top: 2em;
margin-bottom: 0.75em;
}
.blog-content a {
color: hsl(270, 73%, 63%) !important;
} }
/* Responsive */ /* Responsive */
@@ -292,7 +268,6 @@ function BlogPost() {
border-radius: 0; border-radius: 0;
border-left: none; border-left: none;
border-right: none; border-right: none;
box-shadow: none;
} }
.copy-button { .copy-button {
top: 10px; top: 10px;