feat: Edit on github feature and some tweaks

Author: AmanuelCh

public/github.svg

@@ -5,10 +5,12 @@ import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { useParams } from 'react-router-dom';
 import remarkGfm from 'remark-gfm';
 import CustomLink from './Link';
+import GitHubButton from './ui/github-button';
 
 const MarkdownViewer = () => {
   const { category, topic } = useParams();
   const [markdown, setMarkdown] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     const fetchMarkdown = async () => {
@@ -23,10 +25,14 @@ const MarkdownViewer = () => {
     fetchMarkdown();
   }, [category, topic]);
 
+  setTimeout(() => {
+    setIsLoading(false);
+  }, 1000);
+
   return (
     <div className='min-h-[100vh]'>
       <div className='container mx-auto py-1 leading-relaxed px-4 pb-12 dark:text-neutral-300'>
-        <div className='max-w-3xl mx-auto mt-12 markdown-file'>
+        <div className='max-w-3xl mx-auto mt-12 markdown-file flex flex-col gap-8'>
           <ReactMarkdown
             remarkPlugins={[[remarkGfm]]}
             components={{
@@ -55,6 +61,14 @@ const MarkdownViewer = () => {
           >
             {markdown}
           </ReactMarkdown>
+
+          <div className='flex items-end justify-end w-full'>
+            {!isLoading ? (
+              <GitHubButton
+                to={`https://github.com/AmanuelCh/gopher-notes/src/data/${category}/${topic}`}
+              />
+            ) : null}
+          </div>
         </div>
       </div>
     </div>

src/components/MarkdownViewer.tsx

@@ -0,0 +1,26 @@
+type Props = {
+  to: string;
+};
+
+const GitHubButton = ({ to }: Props) => {
+  return (
+    <a
+      className='flex overflow-hidden items-center text-sm font-medium  bg-slate-800 text-white shadow px-4 py-3 whitespace-pre md:flex group relative w-max justify-center gap-2 rounded-md transition-all duration-300 ease-out   cursor-pointer hover:bg-slate-700'
+      href={to}
+      target='_blank'
+    >
+      <span className='absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 bg-white opacity-10 transition-all duration-1000 ease-out group-hover:-translate-x-24'></span>
+      <div className='flex items-center justify-center gap-3'>
+        <svg
+          viewBox='0 0 438.549 438.549'
+          className='w-4 h-4 fill-current'
+        >
+          <path d='M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z'></path>
+        </svg>
+        <span className='text-white text-[12px]'>Edit on GitHub</span>
+      </div>
+    </a>
+  );
+};
+
+export default GitHubButton;

src/components/ui/github-button.tsx

@@ -1,7 +1,5 @@
 # Introduction to Go (Golang)
 
-## What is Go?
-
 Go is a statically typed, compiled programming language designed by Google. It's all about simplicity and efficiency, making it super easy to write clean and maintainable code. Think of it as the cool kid on the block that combines the best features of C, C++, and Python, but with its own unique flair!
 
 ## Key Features of Go

src/data/intro/go-introduction.md

@@ -19,34 +19,35 @@
   blockquote {
     @apply rounded-2xl p-4 dark:bg-slate-950 border border-transparent dark:border-white/[0.2] border-slate-700 relative z-20;
   }
+  .bookmarkBtn {
+    @apply w-[100px] h-[35px] rounded-[40px] border border-[#ffffff59] bg-[#0c0c0c] flex items-center justify-center cursor-pointer duration-300 overflow-hidden;
+  }
+  .IconContainer {
+    @apply w-[25px] h-[25px] rounded-[50px] flex items-center justify-center overflow-hidden z-20 duration-300;
+  }
 }
 
 body {
   font-family: Inter, sans-serif;
 }
 
 h1 {
-  font-size: 2em;
+  font-size: 2.1em;
   font-weight: bold;
-  margin: 20px 0;
+  margin: 20px 0 0 0;
   line-height: 3rem;
 }
 
 h2 {
-  font-size: 1.5em;
+  font-size: 1.6em;
   font-weight: bold;
-  margin: 20px 0;
+  /* margin: 20px 0; */
 }
 
 h3 {
   font-size: 1.2em;
   font-weight: bold;
-  margin: 20px 0;
-}
-ol,
-ul,
-li {
-  margin: 20px 0;
+  /* margin: 20px 0; */
 }
 img {
   margin: 30px 0;
@@ -55,12 +56,20 @@ blockquote {
   padding: 20px;
   margin: 20px;
 }
+code {
+  /* margin-bottom: 20px; */
+}
 
 .links {
   text-decoration: underline;
 }
-.markdown-file ul {
+.markdown-file ul,
+.markdown-file ol {
   list-style: inside;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin: 10px auto 10px 20px;
 }
 
 .switch {
@@ -112,32 +121,8 @@ blockquote {
   box-shadow: none;
 }
 
-/* From Uiverse.io by vinodjangid07 */
-.bookmarkBtn {
-  width: 100px;
-  height: 35px;
-  border-radius: 40px;
-  border: 1px solid rgba(255, 255, 255, 0.349);
-  background-color: rgb(12, 12, 12);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition-duration: 0.3s;
-  overflow: hidden;
-}
-
 .IconContainer {
-  width: 25px;
-  height: 25px;
   background: linear-gradient(to bottom, rgb(255, 136, 255), rgb(172, 70, 255));
-  border-radius: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  z-index: 2;
-  transition-duration: 0.3s;
 }
 
 .icon {