STICKnoLOGIC · STICKnoLOGIC · Mar 24, 2025 · Mar 21, 2025 · Mar 22, 2025 · Mar 23, 2025
@@ -1,10 +1,10 @@
 <p align="center">
-    <img alt="Open Source Love" src="./logo_md_l.webp" class="index-logo">
+    <img alt="Open Source Love" src="/logo_md_l.webp" class="index-logo">
     <br>
     <a href="https://github.com/STICKnoLOGIC/First-Accord" alt="Open Source Love">
         <img alt="Open Source Love" src="https://STICKnoLOGIC.github.io/open-source-badges/badges/open-source-v1/open-source.svg">
     </a>
-    <a href="./LICENSE" alt="License: MIT">
+    <a href="/LICENSE" alt="License: MIT">
         <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-green.svg" >
     </a>
     <img alt="HTML" src="https://img.shields.io/badge/html5-%23E34F26.svg?style=flat&logo=html5&logoColor=white" >
@@ -20,7 +20,7 @@
  First Accord is an open source project designed to help beginners dive into contributing. It's a simple and beginner-friendly way to get started with GitHub and make your very first contribution. The process is quick, straightforward, and perfect for building your confidence!
 
 ## Documentation
-<a href="./docs" alt="rtfd">
+<a href="/docs" alt="rtfd">
     <img alt="rtfd" src="https://img.shields.io/badge/Readthedocs-%23000000.svg?style=flat&logo=readthedocs&logoColor=white" >
 </a>
 

@@ -287,11 +287,14 @@ function closeAbout(){
     hide(about);
 }
 
+const aboutBody=document.getElementById('dial-about');
+
 function showAbout(){
     if(about.classList.contains('hidden'))
-    {
-        about.classList.toggle('hidden');
-    }
+        {
+            about.classList.toggle('hidden');
+        }
+    aboutBody.scroll(0,0);
 }
 
 //readme.md or about
@@ -304,11 +307,10 @@ const md = window.markdownit({
 fetch('https://raw.githubusercontent.com/sticknologic/first-accord/main/README.md')
   .then((response) => response.text())
   .then((text) => {
-    document.getElementById('dial-about').innerHTML =md.render(text);
+    aboutBody.innerHTML =md.render(text);
   })
 
 // about checker
-
 if(localStorage.getItem('snl_fa_about')=='true'){
     closeAbout();
     document.getElementById('show-about').checked=true;

@@ -105,7 +105,7 @@ body.light-mode .toggle-button::before {
 content: "\f186" ;
 }
 body.light-mode .fa-logo {
-content: url('../logo_l.webp');
+content: url('/logo_l.webp');
 }
 body.light-mode .fa-xl{
     color: #1e1e1e;
@@ -125,6 +125,10 @@ body.light-mode .floating-text {
     color: var(--color); /* Dark text color for light mode */
 }
 
+body.light-mode .snl-info{
+    background-color: white !important;
+}
+
 .floating-text:hover{
     animation-play-state: paused;
     cursor: grab;
@@ -179,6 +183,7 @@ body.light-mode .dial-card{
     mask-image: linear-gradient(to bottom, transparent 0%, black 8px, black calc(100% - 48px), transparent 100%);
 }
 
+
 .dial-body::-webkit-scrollbar {
     width: 8px;
   }

@@ -2,21 +2,47 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Docs - First Accord</title>
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-  <meta name="description" content="Description">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+   <!-- favicon -->
+   <link rel="icon" type="image/x-icon" href="/fav.ico">
+
+  <!-- Google / Search Engine Tags -->
+  <meta itemprop="name" content="Docs -First Accord" />
+  <meta itemprop="description" content="Explore the comprehensive guide on how to contribute to First Accord. Learn about participation guidelines, contribution steps, and collaboration tools to make a meaningful impact" />
+  <meta itemprop="image" content="https://raw.githubusercontent.com/STICKnoLOGIC/First-Accord/refs/heads/gh-pages/og_image.png" />
+
+  <!-- Facebook Meta Tags -->
+  <meta property="og:url" content="https://First-Accord.js.org/docs" />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="Docs - First Accord" />
+  <meta property="og:description" content="Explore the comprehensive guide on how to contribute to First Accord. Learn about participation guidelines, contribution steps, and collaboration tools to make a meaningful impact" />
+  <meta property="og:image" content="https://raw.githubusercontent.com/STICKnoLOGIC/First-Accord/refs/heads/gh-pages/og_image.png" />
+
+  <!-- Twitter Meta Tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Docs - First Accord" />
+  <meta name="twitter:description" content="Explore the comprehensive guide on how to contribute to First Accord. Learn about participation guidelines, contribution steps, and collaboration tools to make a meaningful impact" />
+  <meta name="twitter:image" content="https://raw.githubusercontent.com/STICKnoLOGIC/First-Accord/refs/heads/gh-pages/og_image.png" />
+
+  <!-- Apple Meta Tags -->
+  <meta name="apple-mobile-web-app-title" content="Docs - First Accord" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link rel="preload" as="style" href="/styles/habilight.css">
+  <link rel="preload" as="style" href="/styles/darcula.css">
   <script>
     var file = location.pathname.split( "/" ).pop();
 
     var link = document.createElement( "link" );
     link.type = "text/css";
     link.rel = "stylesheet";
-    if(localStorage.getItem('snl_fa_theme')!=='true'){
-      link.href = './styles/habilight.css';
+    if(localStorage.getItem('snl_fa_theme')==='true'){
+      link.href = '/styles/habilight.css';
     }else{
-      link.href = './styles/darcula.css';
+      link.href = '/styles/darcula.css';
     }
     document.getElementsByTagName( "head" )[0].appendChild( link );
   </script>
@@ -26,6 +52,7 @@
   <div id="app"></div>
   <script>
     window.$docsify = {
+      homepage: 'readme.md',
       name: 'Docs - First Accord',
       repo: 'https://github.com/STICKnoLOGIC/First-Accord',
       loadSidebar:true,

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <!-- favicon -->
-    <link rel="icon" type="image/x-icon" href="./fav.ico">
+    <link rel="icon" type="image/x-icon" href="/fav.ico">
 
     <!-- HTML Meta Tags -->
     <title>First Accord - Make Your First Contribution in Github.</title>
@@ -36,24 +36,24 @@
       <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 
     <!-- css -->
-    <link rel="stylesheet"  href="./assets/snl-styles.css">
+    <link rel="stylesheet"  href="/assets/snl-styles.css">
     <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
 
     <!-- js -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/purify.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/markdown-it.min.js"></script>
 
     <!-- preload image/s -->
-    <link rel="preload" as="image" href="./logo_l.webp">
+    <link rel="preload" as="image" href="/logo_l.webp">
 </head>
 <body>
     <div>
-        <a href="/" alt="home"><img src="./logo.webp" class="fa-logo" alt="fa-logo" height="32" style="padding: 1rem;"></a>
+        <a href="/" alt="home"><img src="/logo.webp" class="fa-logo" alt="fa-logo" height="32" style="padding: 1rem;"></a>
         <i class="fa-solid fa-sun fa-xl toggle-button" onclick="toggleMode()"></i>
-        <a href="./docs" class="doc-b" target="_blank" alt="Documentation" style="color:#f0f0f0;text-decoration: none; position: absolute; top: 24px; right: 64px;"><i class="fa-solid fa-book fa-xl"></i> <span class="doc-text">Docs</span></a>
+        <a href="/docs" class="doc-b" target="_blank" alt="Documentation" style="color:#f0f0f0;text-decoration: none; position: absolute; top: 24px; right: 64px;"><i class="fa-solid fa-book fa-xl"></i> <span class="doc-text">Docs</span></a>
         <a alt="About" class="about-b" onclick="showAbout()" style="color:#f0f0f0;text-decoration: none; position: absolute; top: 24px; right: 158px;"><i class="fa-solid fa-circle-question fa-xl about-button"></i> <span class="doc-text">About</span></a>
     </div>
-        <p style="align-self: center; justify-self: center; text-align: center;">Interested in contributing? Kindly check out our <a href="docs/getting-started" style="color: orangered;">guide here</a> for details.</p>
+        <p style="align-self: center; justify-self: center; text-align: center; background-color:#282c34; z-index: 101;" class="snl-info">Interested in contributing? Kindly check out our <a href="docs/#/getting-started" style="color: orangered;">guide here</a> for details.</p>
         <div class="search-container">
             <input type="text" class="snl-search-bar" id="snl-search-bar" placeholder="Search Contributor...">
             <div class="snl-search-button" onclick="searchContributor()">Check</div>
@@ -103,7 +103,7 @@ <h3>My TOP Resources:</h3>
         </div>
         </div>
     </div>
-    <script src="./assets/snl-script.js">
+    <script src="/assets/snl-script.js">
     </script>
 </body>
 </html>