Skip to content

Commit

Permalink
Formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bashamega
Bashamega committed Jul 29, 2024
1 parent e11f9d2 commit 5cf92ed
Show file tree
Hide file tree
Showing 4 changed files with 134 additions and 91 deletions.
5 changes: 4 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@
href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<meta name="google-site-verification" content="%VITE_GOOGLE_SITE_VERIFICATION%" />
<meta
name="google-site-verification"
content="%VITE_GOOGLE_SITE_VERIFICATION%"
/>
</head>
<body>
<div id="root"></div>
Expand Down
2 changes: 1 addition & 1 deletion public/posts/getting_started_with_github_issues_and_setup.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,4 +80,4 @@ GitHub Issues is a feature that allows you to track tasks, bugs, and feature req

GitHub is an essential tool for modern software development, and mastering its basics will set you up for success. By setting up your GitHub account, understanding how to manage issues, and using best practices, you’ll be well on your way to effective project management and collaboration. Happy coding!

> Written by **Sakib Ahmed** | [GitHub](https://github.com/devvsakib)
> Written by **Sakib Ahmed** | [GitHub](https://github.com/devvsakib)
204 changes: 122 additions & 82 deletions src/pages/Doc/single doc/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,91 +64,131 @@ const DocDetail = () => {
}
setHeadings(headings);
};
if (loading) return <div className="flex justify-center items-center h-screen"><Spin size="large" /></div>;
if (error) return <Alert message="Error" description={error} type="error" />;
const headingToId = (children) => String(children).toLowerCase().replace(/\s+/g, '-');
if (loading)
return (
<Layout>
<section className="container mx-auto p-4 min-h-screen">
<h3 className="text-2xl md:text-3xl capitalize text-center my-10 mb-20 font-semibold">
{slug.replace(/_/g, ' ')}
</h3>
<div className="flex">
<aside className="sticky top-20 w-1/4 p-4 h-0">
<h2 className="text-xl font-bold mb-2">Table of Contents</h2>
<ul className='grid gap-2'>
{headings.map((heading, index) => (
<li key={index} className={`ml-${heading.level} ${activeSection === heading.title.replace(/\s+/g, '-').toLowerCase() && 'text-green-500 font-semibold'}`}>
<a href={`#${heading.title.replace(/\s+/g, '-').toLowerCase()}`}

onClick={() => setActiveSection(heading.title.replace(/\s+/g, '-')?.toLowerCase())}
>
{heading.title}
</a>
</li>
))}
</ul>
</aside>
<div className="prose lg:prose-xl w-3/4">
<ReactMarkdown
remarkPlugins={[remarkGfm]}
components={{
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || '');
return !inline && match ? (
<SyntaxHighlighter
style={a11yDark}
language={match[1]}
PreTag="div"
{...props}
>
{String(children).replace(/\n$/, '')}
</SyntaxHighlighter>
) : (
<code className={className} {...props}>
{children}
</code>
);
},
h1({ node, children }) {
return <h1 className='text-xl font-normal mt-10 mb-3' id={headingToId(children)}> {children}</h1>;
},
h2({ node, children }) {
return <h2 className='text-xl font-normal mt-10 mb-3' id={headingToId(children)}>🌿 {children}</h2>;
},
h3({ node, children }) {
return <h3 className='text-xl font-normal mt-10 mb-3' id={headingToId(children)}>🌿 {children}</h3>;
},
blockquote({ node, children }) {
return <span className='bg-gray-100 p-4 pl-0 text-sm my-4 block text-gray'>{children}</span>;
},
table: Table,
tr: TableRow,
td: TableCell,
th: TableHeader,
li({ node, children }) {
return <li className='list-disc ml-4'>{children}</li>;
},
ul({ node, children }) {
return <ul className='list-disc ml-4 mb-2'>{children}</ul>;
},
ol({ node, children }) {
return <ul className='list-disc ml-4 mb-2'>{children}</ul>;
},
img({ node, src, alt }) {
return <img src={src} alt={alt} className='mb-4 rounded-md' />;
}

}}
>
{content}
</ReactMarkdown>
</div>
</div>
</section>
</Layout>
<div className="flex justify-center items-center h-screen">
<Spin size="large" />
</div>
);
if (error) return <Alert message="Error" description={error} type="error" />;
const headingToId = (children) =>
String(children).toLowerCase().replace(/\s+/g, "-");
return (
<Layout>
<section className="container mx-auto p-4 min-h-screen">
<h3 className="text-2xl md:text-3xl capitalize text-center my-10 mb-20 font-semibold">
{slug.replace(/_/g, " ")}
</h3>
<div className="flex">
<aside className="sticky top-20 w-1/4 p-4 h-0">
<h2 className="text-xl font-bold mb-2">Table of Contents</h2>
<ul className="grid gap-2">
{headings.map((heading, index) => (
<li
key={index}
className={`ml-${heading.level} ${activeSection === heading.title.replace(/\s+/g, "-").toLowerCase() && "text-green-500 font-semibold"}`}
>
<a
href={`#${heading.title.replace(/\s+/g, "-").toLowerCase()}`}
onClick={() =>
setActiveSection(
heading.title.replace(/\s+/g, "-")?.toLowerCase(),
)
}
>
{heading.title}
</a>
</li>
))}
</ul>
</aside>
<div className="prose lg:prose-xl w-3/4">
<ReactMarkdown
remarkPlugins={[remarkGfm]}
components={{
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || "");
return !inline && match ? (
<SyntaxHighlighter
style={a11yDark}
language={match[1]}
PreTag="div"
{...props}
>
{String(children).replace(/\n$/, "")}
</SyntaxHighlighter>
) : (
<code className={className} {...props}>
{children}
</code>
);
},
h1({ node, children }) {
return (
<h1
className="text-xl font-normal mt-10 mb-3"
id={headingToId(children)}
>
{" "}
{children}
</h1>
);
},
h2({ node, children }) {
return (
<h2
className="text-xl font-normal mt-10 mb-3"
id={headingToId(children)}
>
🌿 {children}
</h2>
);
},
h3({ node, children }) {
return (
<h3
className="text-xl font-normal mt-10 mb-3"
id={headingToId(children)}
>
🌿 {children}
</h3>
);
},
blockquote({ node, children }) {
return (
<span className="bg-gray-100 p-4 pl-0 text-sm my-4 block text-gray">
{children}
</span>
);
},
table: Table,
tr: TableRow,
td: TableCell,
th: TableHeader,
li({ node, children }) {
return <li className="list-disc ml-4">{children}</li>;
},
ul({ node, children }) {
return <ul className="list-disc ml-4 mb-2">{children}</ul>;
},
ol({ node, children }) {
return <ul className="list-disc ml-4 mb-2">{children}</ul>;
},
img({ node, src, alt }) {
return (
<img src={src} alt={alt} className="mb-4 rounded-md" />
);
},
}}
>
{content}
</ReactMarkdown>
</div>
</div>
</section>
</Layout>
);
if (error) return <Alert message="Error" description={error} type="error" />;

return (
<Layout>
Expand Down
14 changes: 7 additions & 7 deletions vite.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@ import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({

plugins: [
react(),
{
name: 'html-transform',
name: "html-transform",
transformIndexHtml(html) {
return html.replace(
'%VITE_GOOGLE_SITE_VERIFICATION%',
process.env.VITE_GOOGLE_SITE_VERIFICATION
"%VITE_GOOGLE_SITE_VERIFICATION%",
process.env.VITE_GOOGLE_SITE_VERIFICATION,
);
}
}],
})
},
},
],
});

0 comments on commit 5cf92ed

Please sign in to comment.