frishi/threetwo-docs
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

🚀 Added a logo

Browse Source
This commit is contained in:
Rishi Ghan
2021-10-12 13:07:50 -07:00
parent 9d3ecfd9d5
commit 66832f9222
14 changed files with 78 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/resources.md Normal file
View File

@@ -0,0 +1,12 @@
---
sidebar_position: 3
id: resources
title: Resources & Help
---
### Quick Links
- The source code for `ThreeTwo!` is located here: https://github.com/rishighan/threetwo
- The official `Discord` server is here: https://discord.gg/DbpcSNuM
- If you encounter problems, the best recourse to getting help is creating an issue on the repo, https://github.com/rishighan/threetwo/issues
- For other questions just pop them into the Discord channel

4
docs/tutorial-basics/_category_.json
View File

@@ -1,4 +0,0 @@
{
"label": "Tutorial - Basics",
"position": 2
}

21
docs/tutorial-basics/congratulations.md
View File

@@ -1,21 +0,0 @@
---
sidebar_position: 6
---
# Congratulations!
You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.
Docusaurus has **much more to offer**!
Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**.
Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610)
## What's next?
- Read the [official documentation](https://docusaurus.io/).
- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
- Add a [search bar](https://docusaurus.io/docs/search)
- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)
- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support)

34
docs/tutorial-basics/create-a-blog-post.md
View File

@@ -1,34 +0,0 @@
---
sidebar_position: 3
---
# Create a Blog Post
Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed...
## Create your first Post
Create a file at `blog/2021-02-28-greetings.md`:
```md title="blog/2021-02-28-greetings.md"
---
slug: greetings
title: Greetings!
authors:
- name: Joel Marcey
title: Co-creator of Docusaurus 1
url: https://github.com/JoelMarcey
image_url: https://github.com/JoelMarcey.png
- name: Sébastien Lorber
title: Docusaurus maintainer
url: https://sebastienlorber.com
image_url: https://github.com/slorber.png
tags: [greetings]
---
Congratulations, you have made your first post!
Feel free to play around and edit this post as much you like.
```
A new blog post is now available at `http://localhost:3000/blog/greetings`.

55
docs/tutorial-basics/create-a-document.md
View File

@@ -1,55 +0,0 @@
---
sidebar_position: 2
---
# Create a Document
Documents are **groups of pages** connected through:
- a **sidebar**
- **previous/next navigation**
- **versioning**
## Create your first Doc
Create a markdown file at `docs/hello.md`:
```md title="docs/hello.md"
# Hello
This is my **first Docusaurus document**!
```
A new document is now available at `http://localhost:3000/docs/hello`.
## Configure the Sidebar
Docusaurus automatically **creates a sidebar** from the `docs` folder.
Add metadatas to customize the sidebar label and position:
```md title="docs/hello.md" {1-4}
---
sidebar_label: 'Hi!'
sidebar_position: 3
---
# Hello
This is my **first Docusaurus document**!
```
It is also possible to create your sidebar explicitly in `sidebars.js`:
```diff title="sidebars.js"
module.exports = {
tutorialSidebar: [
{
type: 'category',
label: 'Tutorial',
- items: [...],
+ items: ['hello'],
},
],
};
```

43
docs/tutorial-basics/create-a-page.md
View File

@@ -1,43 +0,0 @@
---
sidebar_position: 1
---
# Create a Page
Add **Markdown or React** files to `src/pages` to create a **standalone page**:
- `src/pages/index.js` -> `localhost:3000/`
- `src/pages/foo.md` -> `localhost:3000/foo`
- `src/pages/foo/bar.js` -> `localhost:3000/foo/bar`
## Create your first React Page
Create a file at `src/pages/my-react-page.js`:
```jsx title="src/pages/my-react-page.js"
import React from 'react';
import Layout from '@theme/Layout';
export default function MyReactPage() {
return (
<Layout>
<h1>My React page</h1>
<p>This is a React page</p>
</Layout>
);
}
```
A new page is now available at `http://localhost:3000/my-react-page`.
## Create your first Markdown Page
Create a file at `src/pages/my-markdown-page.md`:
```mdx title="src/pages/my-markdown-page.md"
# My Markdown page
This is a Markdown page
```
A new page is now available at `http://localhost:3000/my-markdown-page`.

31
docs/tutorial-basics/deploy-your-site.md
View File

@@ -1,31 +0,0 @@
---
sidebar_position: 5
---
# Deploy your site
Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**).
It builds your site as simple **static HTML, JavaScript and CSS files**.
## Build your site
Build your site **for production**:
```bash
npm run build
```
The static files are generated in the `build` folder.
## Deploy your site
Test your production build locally:
```bash
npm run serve
```
The `build` folder is now served at `http://localhost:3000/`.
You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**).

144
docs/tutorial-basics/markdown-features.mdx
View File

@@ -1,144 +0,0 @@
---
sidebar_position: 4
---
# Markdown Features
Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**.
## Front Matter
Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
```text title="my-doc.md"
// highlight-start
---
id: my-doc-id
title: My document title
description: My document description
slug: /my-custom-url
---
// highlight-end
## Markdown heading
Markdown text with [links](./hello.md)
```
## Links
Regular Markdown links are supported, using url paths or relative file paths.
```md
Let's see how to [Create a page](/create-a-page).
```
```md
Let's see how to [Create a page](./create-a-page.md).
```
**Result:** Let's see how to [Create a page](./create-a-page.md).
## Images
Regular Markdown images are supported.
Add an image at `static/img/docusaurus.png` and display it in Markdown:
```md
![Docusaurus logo](/img/docusaurus.png)
```
![Docusaurus logo](/img/docusaurus.png)
## Code Blocks
Markdown code blocks are supported with Syntax highlighting.
```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
return (
<h1>Hello, Docusaurus!</h1>
)
}
```
```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
return <h1>Hello, Docusaurus!</h1>;
}
```
## Admonitions
Docusaurus has a special syntax to create admonitions and callouts:
:::tip My tip
Use this awesome feature option
:::
:::danger Take care
This action is dangerous
:::
:::tip My tip
Use this awesome feature option
:::
:::danger Take care
This action is dangerous
:::
## MDX and React Components
[MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**:
```jsx
export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '20px',
color: '#fff',
padding: '10px',
cursor: 'pointer',
}}
onClick={() => {
alert(`You clicked the color ${color} with label ${children}`)
}}>
{children}
</span>
);
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
This is <Highlight color="#1877F2">Facebook blue</Highlight> !
```
export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '20px',
color: '#fff',
padding: '10px',
cursor: 'pointer',
}}
onClick={() => {
alert(`You clicked the color ${color} with label ${children}`);
}}>
{children}
</span>
);
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
This is <Highlight color="#1877F2">Facebook blue</Highlight> !

4
docs/tutorial-extras/_category_.json
View File

@@ -1,4 +0,0 @@
{
"label": "Tutorial - Extras",
"position": 3
}

55
docs/tutorial-extras/manage-docs-versions.md
View File

@@ -1,55 +0,0 @@
---
sidebar_position: 1
---
# Manage Docs Versions
Docusaurus can manage multiple versions of your docs.
## Create a docs version
Release a version 1.0 of your project:
```bash
npm run docusaurus docs:version 1.0
```
The `docs` folder is copied into `versioned_docs/version-1.0` and `versions.json` is created.
Your docs now have 2 versions:
- `1.0` at `http://localhost:3000/docs/` for the version 1.0 docs
- `current` at `http://localhost:3000/docs/next/` for the **upcoming, unreleased docs**
## Add a Version Dropdown
To navigate seamlessly across versions, add a version dropdown.
Modify the `docusaurus.config.js` file:
```js title="docusaurus.config.js"
module.exports = {
themeConfig: {
navbar: {
items: [
// highlight-start
{
type: 'docsVersionDropdown',
},
// highlight-end
],
},
},
};
```
The docs version dropdown appears in your navbar:
![Docs Version Dropdown](/img/tutorial/docsVersionDropdown.png)
## Update an existing version
It is possible to edit versioned docs in their respective folder:
- `versioned_docs/version-1.0/hello.md` updates `http://localhost:3000/docs/hello`
- `docs/hello.md` updates `http://localhost:3000/docs/next/hello`

88
docs/tutorial-extras/translate-your-site.md
View File

@@ -1,88 +0,0 @@
---
sidebar_position: 2
---
# Translate your site
Let's translate `docs/intro.md` to French.
## Configure i18n
Modify `docusaurus.config.js` to add support for the `fr` locale:
```js title="docusaurus.config.js"
module.exports = {
i18n: {
defaultLocale: 'en',
locales: ['en', 'fr'],
},
};
```
## Translate a doc
Copy the `docs/intro.md` file to the `i18n/fr` folder:
```bash
mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/
cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md
```
Translate `i18n/fr/docusaurus-plugin-content-docs/current/intro.md` in French.
## Start your localized site
Start your site on the French locale:
```bash
npm run start -- --locale fr
```
Your localized site is accessible at `http://localhost:3000/fr/` and the `Getting Started` page is translated.
:::caution
In development, you can only use one locale at a same time.
:::
## Add a Locale Dropdown
To navigate seamlessly across languages, add a locale dropdown.
Modify the `docusaurus.config.js` file:
```js title="docusaurus.config.js"
module.exports = {
themeConfig: {
navbar: {
items: [
// highlight-start
{
type: 'localeDropdown',
},
// highlight-end
],
},
},
};
```
The locale dropdown now appears in your navbar:
![Locale Dropdown](/img/tutorial/localeDropdown.png)
## Build your localized site
Build your site for a specific locale:
```bash
npm run build -- --locale fr
```
Or build your site to include all the locales at once:
```bash
npm run build
```

64
docs/unraid_install.md Normal file
View File

@@ -0,0 +1,64 @@
---
sidebar_position: 2
id: unraid_install
title: Install ThreeTwo! on unRaid
---
### Notes
- Currently, `ThreeTwo!` is installed along with its dependencies using `docker-compose`. The easiest way to install it on `unRAID` is to use a VM.
- Skip the VM creation steps, if you already have a Debian VM
### Pre-requisites
This guide assumes the following is installed or readily available:
- `unRaid 6.9.2` (this version was tested against `6.9.2`)
- `Debian 10.x` (Grab the install `.iso` [here](https://cdimage.debian.org/debian-cd/current/amd64/iso-cd/debian-11.1.0-amd64-netinst.iso))
### Getting the VM up and running
1. Download the `Debian` install `.iso`
2. Place it in a folder accessible by the VM
3. Go to the `VM` tab in your `unRaid` navigation
4. Click `Add VM`
5. From the list presented to you, click `Debian` under `Linux`
6. On the VM configration page, enter the desired options for memory, CPU cores, vdisk allocation
7. Make sure that you have set the volume containing the comics correctly for `Unraid Share`
8. Make sure that you have also set the `Unraid Mount tag` option
9. Make sure that the network bridge is set to `br0`
10. Set a password for `VNC` so you can follow through with a graphical install if you so wish
### Installing Debian on the VM
1. Launch the VM via `VNC Remote` option
2. Follow the steps of the graphical installer
3. Create a `root` user and a normal `user` and set the passwords for both
### Docker pre-requisites
1. [Make sure you have](https://unix.stackexchange.com/questions/354928/bash-sudo-command-not-found) `sudo`
2. Make sure you have `ssh` access for the user you created earlier
3. `ssh` into the VM as the non-root user
4. Install [Docker Engine](https://docs.docker.com/engine/install/debian/)
5. Install [docker-compose](https://docs.docker.com/compose/install/#install-compose-on-linux-systems)
6. Verify that `docker` and `docker-compose` commands work
### Installation
1. Clone the repo: `git clone https://github.com/rishighan/threetwo.git`
2. Change the directory: `cd threetwo`
3. Create directories within `threetwo`
```bash
mkdir comics userdata
mkdir userdata/covers userdata/temporary userdata/expanded
```
4. Create an external docker network using `sudo docker network create proxy`
5. Run `sudo docker-compose up --build -d`
6. Wait for a hot minute
### Post-install checks
1. Once the `docker-compose up` command successfully completes, you can check the spun-up containers using `docker ps`
2.

4
docusaurus.config.js
View File

@@ -43,10 +43,10 @@ const config = {
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */ /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({ ({
navbar: { navbar: {
title: 'My Site', title: 'ThreeTwo!',
logo: { logo: {
alt: 'My Site Logo', alt: 'My Site Logo',
src: 'img/logo.svg', src: 'img/threetwo.png',
}, },
items: [ items: [
{ {

BIN
static/img/threetwo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB