recloudstream
/
website
mirror of https://github.com/recloudstream/website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add grouping to markdown stuff

This commit is contained in:
Cloudburst 2022-08-28 11:59:41 +02:00
parent 96bd6eed57
commit 400285e8a2
17 changed files with 120 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/cards/docs.jsx
View File

@ -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>

46
src/components/drawer.jsx
View File

@ -4,30 +4,54 @@ 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 {
nodes {
frontmatter {
title
}
fileAbsolutePath
}
allMarkdownRemark(sort: {fields: frontmatter___order}) {
nodes {
frontmatter {
title
order
parent
}
fileAbsolutePath
}
}
}
`}
render={data => (
<>{data.allMarkdownRemark.nodes.map(it => {
return <li><Link to={node2slug(it)}>{it.frontmatter.title}</Link></li>
})}</>
<ChildrenNodes nodes={Array.from(data.allMarkdownRemark.nodes)} parent={null} />
)}
/>
</ul>)

34
src/components/layout.jsx
View File

@ -6,19 +6,31 @@ import Drawer from "./drawer"
import './layout.css'
const Layout = ({ children }) => (
<div className="drawer bg-base">
<input id="drawer" type="checkbox" className="drawer-toggle" />
<div className="drawer-content items-center flex flex-none flex-col">
<Navbar />
<div className="pb-10 w-full text-base-content">
{children}
<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 min-h-screen">
<Navbar />
<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 className="drawer-side">
<label for="drawer" className="drawer-overlay backdrop-blur-sm"></label>
<Drawer />
</div>
</div>
)
export default Layout

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

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

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

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

2
src/pages/docs/devs/index.md
View File

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

2
src/pages/docs/devs/scraping/devtools_detectors.md
View File

@ -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)

2
src/pages/docs/devs/scraping/disguising_your_scraper.md
View File

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

2
src/pages/docs/devs/scraping/finding_video_links.md
View File

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

2
src/pages/docs/devs/scraping/index.md
View File

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

2
src/pages/docs/devs/scraping/starting.md
View File

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

2
src/pages/docs/devs/scraping/using_apis.md
View File

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

2
src/pages/docs/devs/using-plugin-template.md
View File

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

9
src/pages/docs/index.js
View File

@ -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>
<meta property="og:title" content="Cloudstream" />
<title>Cloudstream Docs</title>
<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" />

2
src/pages/docs/users/index.md
View File

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

2
src/pages/docs/users/local-plugins.md
View File

@ -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.

35
src/templates/default.jsx
View File

@ -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"
@ -28,10 +29,10 @@ const componentMap = {
return <li className="step" {...props} />
},
table: (props) => {
return <table className="table w-full" {...props} />
return <table className="table w-full" {...props} />
},
tr: (props) => {
return <tr className="hover" {...props} />
return <tr className="hover" {...props} />
},
hr: (props) => {
return <div className="divider" {...props} />
@ -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
}
}
}
`