website: write into and sidebar and developing plugins pages

website/astro.config.mjs

@@ -1,17 +1,20 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
 
-import tailwindcss from '@tailwindcss/vite';
+import tailwindcss from "@tailwindcss/vite";
 
-import react from '@astrojs/react';
+import react from "@astrojs/react";
 
-import mdx from '@astrojs/mdx';
+import mdx from "@astrojs/mdx";
 
 // https://astro.build/config
 export default defineConfig({
   vite: {
-    plugins: [tailwindcss()]
+    plugins: [tailwindcss()],
+  },
+  integrations: [react(), mdx()],
+  redirects: {
+    "/docs": "/docs/get-started/introduction",
+    "/docs/get-started": "/docs/get-started/introduction",
   },
-
-  integrations: [react(), mdx()]
 });

website/src/collections/app.ts

@@ -14,7 +14,7 @@ import { LuHouse, LuNewspaper, LuDownload, LuBook } from "react-icons/lu";
 export const routes: Record<string, [string, IconType|null]> = {
 	"/": ["Home", LuHouse],
 	"/blog": ["Blog", LuNewspaper],
-	"/docs/get-started/introduction": ["Docs", LuBook],
+	"/docs": ["Docs", LuBook],
 	"/downloads": ["Downloads", LuDownload],
 	"/about": ["About", null],
 };

website/src/components/navigation/DocSideBar.astro

@@ -57,13 +57,13 @@ const sections: [
   (prefix: string) => Promise<CollectionEntry<"docs">[]>,
 ][] = [
   ["Get Started", "get-started/", queryCollection],
-  ["Guides", "guides/", queryCollection],
-  ["Design System", "design/", queryCollection],
-  ["Tailwind Components", "tailwind/", queryCollection],
-  ["Functional Components", "components/", queryMetaCollection],
-  ["Headless Components", "headless/", queryCollection],
-  ["Integrations", "integrations/", queryMetaCollection],
-  ["Resources", "resources/", queryCollection],
+  ["Developing Plugins", "developing-plugins/", queryCollection],
+  // ["Design System", "design/", queryCollection],
+  // ["Tailwind Components", "tailwind/", queryCollection],
+  // ["Functional Components", "components/", queryMetaCollection],
+  // ["Headless Components", "headless/", queryCollection],
+  // ["Integrations", "integrations/", queryMetaCollection],
+  // ["Resources", "resources/", queryCollection],
 ];
 
 // Build navigation dynamically

website/src/components/navigation/TopBar.astro

@@ -4,6 +4,7 @@ import { FaGithub } from "react-icons/fa6";
 import SidebarButton from "./sidebar-button";
 
 const pathname = Astro.url.pathname;
+console.log("pathname:", pathname);
 ---
 
 <header class="flex justify-between items-center px-4 bg-surface">
@@ -33,12 +34,14 @@ const pathname = Astro.url.pathname;
     {
       Object.entries(routes).map((route) => {
         const Icon = route[1][1];
+        const isActive =
+          route[0] === "/" ? pathname === "/" : pathname.startsWith(route[0]);
 
         return (
           <a href={route[0]}>
             <button
               type="button"
-              class={`btn flex gap-2 ${route[0] === "/downloads" ? "preset-tonal-secondary" : "preset-tonal-surface"} ${pathname.endsWith(route[0]) ? "underline" : ""}`}
+              class={`btn flex gap-2 ${route[0] === "/downloads" ? "preset-tonal-secondary" : "preset-tonal-surface"} ${isActive ? "underline" : ""}`}
             >
               {Icon && <Icon />}
               {route[1][0]}

website/src/content/docs/developing-plugins/introduction.mdx

@@ -0,0 +1,60 @@
+---
+layout: "layouts/DocLayout.astro"
+title: Introduction
+description: Learn how to develop plugins for Spotube
+order: 0
+---
+
+Plugins in Spotube are used for fetching metadata (Playlist, Album, Artist, Track Info, Search etc) and scrobbling. It gives developers
+access to Spotube's internal APIs to create custom metadata providers and audio [scrobblers][scrobbler_wiki].
+
+Plugins needs to be written in [hetu_script][hetu_script_link], which is a Dart-based scripting language.
+You probably never heard of it before.
+
+## Requirements
+
+To develop plugins for Spotube, you need to have the following requirements:
+
+- Basic programming knowledge
+- [Dart][dart] and [Flutter][flutter] knowledge
+- [Visual Studio Code][vscode] or any other code editor
+
+Spotube uses [hetu_script][hetu_script_link]. It's kind of similar to Typescript.
+Learning it shouldn't take much time if you already know Dart or Javascript.
+
+Go to Hetu Script's [official website and documentation][hetu_script_link] to learn more about it.
+
+## Resources
+
+The [`hetu_script`][hetu_script_link] programming/scripting language is relatively new. So there's no ecosystem around it yet.
+However, we created some helpful libraries to aid with Spotube plugin development. The [hetu-community][hetu_community] is a
+community driven effort to create libraries and tools for Hetu Script. Below are available libraries:
+
+#### Core Libraries
+
+- [**hetu-community/hetu_std**][hetu_std]: A standard library for Hetu Script. Provides basic functionality like Http client, DateTime, Cryptography API,
+  encoding/decoding (JSON, Utf8, Base32) etc.
+- [**KRTirtho/hetu_spotube_plugin**][hetu_spotube_plugin]: A library for Spotube plugin development. It provides access to Spotube's internal APIs
+  (Webview, Forms, LocalStorage etc.) and utilities for fetching metadata and scrobbling.
+
+> You can find more libraries in the [hetu-community GitHub organization][hetu_community].
+
+#### Programming aid
+
+- [Hetu Script Plugin for VSCode][hetu_script_vscode]: A VSCode extension for Hetu Script. It provides basic syntax highlighting
+  support. But it doesn't support [LSP (Language Server Protocol)][lsp] yet so no autocompletion or linting is available.
+- [hetu_script_dev_tools][hetu_script_dev_tools]: A CLI tool for compiling hetu script files to bytecode or directly running them and a REPL
+
+{/* Link Variables */}
+[hetu_script_link]: https://hetu-script.github.io/
+[scrobbler_wiki]: https://en.wikipedia.org/wiki/Scrobbling
+[dart]: https://dart.dev/
+[flutter]: https://flutter.dev/
+[vscode]: https://code.visualstudio.com/
+[lsp]: https://en.wikipedia.org/wiki/Language_Server_Protocol
+[hetu_script_vscode]: https://marketplace.visualstudio.com/items?itemName=hetu-script.hetuscript
+[hetu_community]: https://github.com/hetu-community
+[hetu_std]: https://github.com/hetu-community/hetu_std
+[hetu_otp_util]: https://github.com/hetu-community/hetu_otp_util
+[hetu_spotube_plugin]: https://github.com/KRTirtho/hetu_spotube_plugin
+[hetu_script_dev_tools]: https://pub.dev/packages/hetu_script_dev_tools

website/src/content/docs/get-started/installing-plugins.mdx

@@ -0,0 +1,28 @@
+---
+layout: 'layouts/DocLayout.astro'
+title: Installing plugins
+description: Learn how to install and manage plugins in Spotube
+order: 1
+---
+
+Let's first learn how to install plugins in Spotube. It's pretty simple.
+
+1. Open Spotube (duh!)
+1. Go to Settings
+1. Then go to the top option, "Metadata provider plugins"
+1. You can see a list of all the plugins that are available to install
+
+![Lmafo](/docs/getting-started/installing-plugins/navigate.webp)
+
+## More ways to install new plugins
+
+Usually, Spotube will list public repositories of plugins from github and codeberg in the _Available plugins_ section.
+This is a non curated list, so be careful when installing plugins. Always check the source before installing.
+A malicious plugin given full access can easily steal your credentials. So be careful!
+
+Try to use the `Official` tagged plugins all the time if you don't want to deal with potential security risks.
+
+- **Upload plugin from local file**: You can also install plugins from local file (plugin.smplug) using the *Orange Upload button* on the top right beside the text field.
+- **Install plugin from URL**: If you have a direct link to a plugin file, you can just paste the URL in the text field and use the gray download button beside it
+
+> If you're a developer, you can create your own plugins and share them with the community. Check out the [Plugin Development Guide](/docs/developing-plugins) for more information.

website/src/content/docs/get-started/introduction.mdx

@@ -1,8 +1,20 @@
 ---
 layout: 'layouts/DocLayout.astro'
 title: Introduction
-description: Intro to Spotube Docs
+description: ""
 order: 0
 ---
 
-## Spotube Docs
+Spotube is an extensible music player designed to give users full control over their listening experience. With a flexible configuration system, Spotube can be tailored to fit individual preferences and workflows.
+
+## Key Features
+
+- **Extensible Architecture:** Spotube supports a powerful plugin system, allowing users to integrate with any music metadata service or extend functionality as needed.
+- **Multiple Integrations:** Out of the box, Spotube connects with various music services, making it easy to access and manage your library.
+- **Customizable Experience:** Users can configure Spotube to match their unique requirements, from interface themes to playback options.
+
+## Why Spotube?
+
+Spotube is built for music enthusiasts who want more than a standard player. Whether you need advanced metadata management, custom integrations, or a personalized interface, Spotube provides the tools to create your ideal music environment.
+
+Explore the documentation to learn how to set up Spotube, install plugins, and make the most of its features.

website/src/layouts/DocLayout.astro

@@ -60,7 +60,10 @@ const { frontmatter, headings } = Astro.props;
       </p>
     </header>
     <!-- Content -->
-    <article class="space-y-8" data-pagefind-body>
+    <article
+      class="space-y-8 prose lg:prose-xl dark:prose-invert"
+      data-pagefind-body
+    >
       <slot />
     </article>
     <!-- Footer -->
@@ -70,16 +73,6 @@ const { frontmatter, headings } = Astro.props;
   <aside
     class="hidden xl:block self-start sticky top-[70px] h-[calc(100vh-70px)] py-4 xl:py-10 space-y-8 overflow-y-auto"
   >
-    <!-- Carbon Ads -->
-    <script
-      is:inline
-      async
-      type="text/javascript"
-      src="//cdn.carbonads.com/carbon.js?serve=CWYD627U&placement=carbonadsnet"
-      id="_carbonads_js"></script>
-    <!-- Table of Contents -->
     <TableOfContents {headings} />
-    <!-- Promot -->
-    <!-- <div class="card aspect-video flex justify-center items-center preset-tonal">(promo)</div> -->
   </aside>
 </div>