add grouping to markdown stuff

src/components/cards/docs.jsx

@@ -2,9 +2,9 @@ import React from "react";
 import { Link } from "gatsby";
 import { node2slug } from "../../utils";
 
-const DocsCard = ({ md }) => {
+const DocsCard = ({ md, width }) => {
 
-    return <article className="card card bg-base-200 shadow-xl w-full mx-10 md:w-2/3 mb-5">
+    return <article className={"card card bg-base-200 shadow-xl mx-10 mb-5 " + (width || "w-full md:w-2/3")}>
         <div className="card-body">
             <h2 className="card-title">{md.frontmatter.title}</h2>
             <p>

src/components/drawer.jsx

@@ -4,20 +4,46 @@ import React from "react"
 import { Link } from "gatsby"
 import { node2slug } from "../utils"
 
+function ChildrenNodes({nodes, parent}) {
+    const filtered = nodes.filter(it => {
+        return it.frontmatter.parent === parent
+    })
+
+    if (filtered.length < 1) return <></>
+
+    if (parent === null) {
+        return <>{filtered.map(it => {
+            return <li>
+                <Link to={node2slug(it)}>{it.frontmatter.title}</Link>
+                <ChildrenNodes nodes={nodes} parent={it.frontmatter.title} />
+            </li> 
+        })}</>
+    }
+
+    return <a><details>{filtered.map(it => {
+        return <li>
+            <Link to={node2slug(it)}>{it.frontmatter.title}</Link>
+            <ChildrenNodes nodes={nodes} parent={it.frontmatter.title} />
+        </li> 
+    })}</details></a>
+}
+
 const Drawer = () => (
     <ul className="menu p-4 overflow-y-auto w-80 bg-base-100 text-base-content">
         <li><Link to="/">Home</Link></li>
         <li><Link to="/repos">Repositories</Link></li>
         <div className="divider">Docs</div>
-        <li><Link to="/docs">Documentation</Link></li>
         <li><a href="/dokka/">Dokka</a></li>
+        <li><Link to="/docs">Documentation</Link></li>
         <StaticQuery
             query={graphql`
                 query {
-                    allMarkdownRemark {
+                    allMarkdownRemark(sort: {fields: frontmatter___order}) {
                         nodes {
                         frontmatter {
                             title
+                            order
+                            parent
                         }
                         fileAbsolutePath
                         }
@@ -25,9 +51,7 @@ const Drawer = () => (
                 }
             `}
             render={data => (
-                <>{data.allMarkdownRemark.nodes.map(it => {
+                <ChildrenNodes nodes={Array.from(data.allMarkdownRemark.nodes)} parent={null} />
-                    return <li><Link to={node2slug(it)}>{it.frontmatter.title}</Link></li> 
-                })}</>
             )}
         />
     </ul>)

src/components/layout.jsx

@@ -6,19 +6,31 @@ import Drawer from "./drawer"
 import './layout.css'
 
 const Layout = ({ children }) => (
-<div className="drawer bg-base">
+    <div className="drawer bg-base min-h-screen">
         <input id="drawer" type="checkbox" className="drawer-toggle" />
-    <div className="drawer-content items-center flex flex-none flex-col">
+        <div className="drawer-content items-center flex flex-none flex-col min-h-screen">
             <Navbar />
-        <div className="pb-10 w-full text-base-content">
+            <div className="pb-10 w-full text-base-content grow">
                 {children}
             </div>
+            <footer class="footer footer-center p-10 mt-15 bg-base-200 text-base-content rounded gap-2">
+                <div class="grid grid-flow-col gap-4">
+                    <a class="link link-hover" href="https://discord.gg/5Hus6fM">Contact</a>
+                    <a class="link link-hover" href="https://github.com/recloudstream/">Github</a>
+                    <a class="link link-hover" href="https://discord.gg/5Hus6fM">Discord</a>
+                    <a class="link link-hover" href="https://matrix.to/#/#lagrapps:matrix.org">Matrix</a>
+                    <a class="link link-hover" onClick={() => {window.open("https://www.youtube.com/watch?v=f-UIBVsRSDQ")}}>DMCA</a>
+                </div>
+                <div>
+                    <p>Website by <a className="link" href="https://wilkins.ml" target="_blank">Cloudburst</a></p>
+                </div>
+            </footer>
         </div>
         <div className="drawer-side">
             <label for="drawer" className="drawer-overlay backdrop-blur-sm"></label>
             <Drawer />
         </div>
-</div>
+    </div>
 )
 
 export default Layout

src/pages/docs/devs/create-your-own-json-repository.md

@@ -1,5 +1,7 @@
 ---
 title: Creating your own JSON repository
+parent: For extension developers
+order: 4
 ---
 
 # Creating your own JSON repository

src/pages/docs/devs/create-your-own-providers.md

@@ -1,5 +1,7 @@
 ---
 title: Creating your own providers
+parent: For extension developers
+order: 2
 ---
 
 # Creating your own Providers

src/pages/docs/devs/index.md

@@ -1,5 +1,7 @@
 ---
 title: For extension developers
+parent: null
+order: 2
 ---
 
 # For extension developers

src/pages/docs/devs/scraping/devtools_detectors.md

@@ -1,5 +1,7 @@
 ---
 title: Devtools detector
+parent: Scraping tutorial
+order: 3
 ---
 
 **TL;DR**: You are going to get fucked by sites detecting your devtools, the easiest bypass for this is using [a web sniffer extension](https://chrome.google.com/webstore/detail/web-sniffer/ndfgffclcpdbgghfgkmooklaendohaef?hl=en)

src/pages/docs/devs/scraping/disguising_your_scraper.md

@@ -1,5 +1,7 @@
 ---
 title: Disguishing your scrapers
+parent: Scraping tutorial
+order: 4
 ---
 
 # Disguishing your scrapers

src/pages/docs/devs/scraping/finding_video_links.md

@@ -1,5 +1,7 @@
 ---
 title: Finding video links
+parent: Scraping tutorial
+order: 5
 ---
 
 # Finding video links

src/pages/docs/devs/scraping/index.md

@@ -1,5 +1,7 @@
 ---
 title: Scraping tutorial
+parent: For extension developers
+order: 3
 ---
 
 # Requests based scraping tutorial

src/pages/docs/devs/scraping/starting.md

@@ -1,5 +1,7 @@
 ---
 title: Starting
+parent: Scraping tutorial
+order: 1
 ---
 
 Scraping is just downloading a webpage and getting the wanted information from it. 

src/pages/docs/devs/scraping/using_apis.md

@@ -1,5 +1,7 @@
 ---
 title: Using APIs
+parent: Scraping tutorial
+order: 2
 ---
 
 ### About

src/pages/docs/devs/using-plugin-template.md

@@ -1,5 +1,7 @@
 ---
 title: Using plugin template
+parent: For extension developers
+order: 1
 ---
 
 # Using the template

src/pages/docs/index.js

@@ -11,7 +11,10 @@ const DocsPage = () => {
             <StaticQuery
                 query={graphql`
                 query {
-                    allMarkdownRemark {
+                    allMarkdownRemark(
+                        sort: {fields: frontmatter___order}
+                        filter: {frontmatter: {parent: {eq: null}}}
+                    ) {
                             nodes {
                                 id
                                 frontmatter {
@@ -40,8 +43,8 @@ export default DocsPage
 export function Head() {
     return (
         <>
-            <title>Cloudstream 404</title>
+            <title>Cloudstream Docs</title>
-            <meta property="og:title" content="Cloudstream" />
+            <meta property="og:title" content="Cloudstream Docs" />
             <meta property="og:description" content="Cloudstream is an Android app for streaming and downloading Movies, TV-Series and Anime." />
             <meta property="og:image" content={bgImage} />
             <meta property="og:image:type" content="image/png" />

src/pages/docs/users/index.md

@@ -1,5 +1,7 @@
 ---
 title: For users
+parent: null
+order: 1
 ---
 
 # Cloudstream

src/pages/docs/users/local-plugins.md

@@ -1,5 +1,7 @@
 ---
 title: Using local extensions
+parent: For users
+order: 1
 ---
 
 It is possible to use extensions without using repositories. This can be useful when prototyping. 

src/templates/default.jsx

@@ -2,6 +2,7 @@ import React from "react"
 import { Link, graphql } from "gatsby"
 import Layout from "../components/layout"
 import bgImage from "../media/phones.png"
+import DocsCard from "../components/cards/docs"
 
 import rehypeReact from "rehype-react"
 
@@ -39,7 +40,7 @@ const componentMap = {
 }
 
 
-export default function PageTemplate({ data: { markdownRemark } }) {
+export default function PageTemplate({ data: { markdownRemark, allMarkdownRemark } }) {
   const renderAst = new rehypeReact({
     createElement: React.createElement,
     components: componentMap,
@@ -48,6 +49,10 @@ export default function PageTemplate({ data: { markdownRemark } }) {
     }
   }).Compiler
 
+  const filtered = allMarkdownRemark.nodes.filter(it => it.frontmatter.parent === markdownRemark.frontmatter.title).map(it => {
+    return <DocsCard md={it} key={it} width="w-full" />
+  })
+
   return (
     <Layout>
       <div className="flex items-center w-full flex-col">
@@ -60,16 +65,22 @@ export default function PageTemplate({ data: { markdownRemark } }) {
         </div>
         <div className="w-full mx-10 md:w-2/3 card bg-base-200 shadow-xl">
           <div className="card-body">
-            <h2 class="card-title">{markdownRemark.frontmatter.title}</h2>
+            <h1 class="card-title text-xl">{markdownRemark.frontmatter.title}</h1>
             {renderAst(markdownRemark.htmlAst)}
           </div>
         </div>
+        {filtered.length > 0 && <>
+          <div class="divider text-xl mt-5">Children</div>
+          <div className="grid gap-5 w-full px-10 place-items-center auto-rows-max grid-flow-row-dense grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+            {filtered}
+          </div></>}
+
       </div>
     </Layout>
   )
 }
 
-export function Head({data}) {
+export function Head({ data }) {
   return (
     <>
       <title>{data.markdownRemark.frontmatter.title}</title>
@@ -92,5 +103,19 @@ export const pageQuery = graphql`
       excerpt
       htmlAst
     }
+    allMarkdownRemark(
+      sort: {fields: frontmatter___order}
+      filter: {frontmatter: {parent: {ne: null}}}
+    ) {
+      nodes {
+        frontmatter {
+          title
+          order
+          parent
+        }
+        fileAbsolutePath
+        excerpt
+      }
+    }
   }
 `