From 69f99b345faa71cf59bc39e15098a2faf13d47aa Mon Sep 17 00:00:00 2001 From: Peaches_MLG Date: Thu, 14 Mar 2024 23:10:00 +0000 Subject: [PATCH] Refactored the ContributeGuide.tsx file --- .../contribute/ContributorGuide.tsx | 495 ------------------ src/components/node/Node.tsx | 38 ++ src/data/contributeData.tsx | 284 ++++++++++ src/pages/contribute.tsx | 5 +- 4 files changed, 325 insertions(+), 497 deletions(-) delete mode 100644 src/components/contribute/ContributorGuide.tsx create mode 100644 src/components/node/Node.tsx create mode 100644 src/data/contributeData.tsx diff --git a/src/components/contribute/ContributorGuide.tsx b/src/components/contribute/ContributorGuide.tsx deleted file mode 100644 index cedb960d4..000000000 --- a/src/components/contribute/ContributorGuide.tsx +++ /dev/null @@ -1,495 +0,0 @@ -import Link from '@docusaurus/Link'; -import clsx from 'clsx'; -import React, { useState } from 'react'; - -enum ContributorOption { - Code, - Translations, - Other -} - -enum CodeOption { - CSharp, - JavaScript, - Other -} - -enum CodeLanguageOption { - Bug, - Feature, - Modernize -} - -enum CSharpFeatureOption { - Server, - Plugin -} - -enum OtherOption { - Documentation, - Troubleshoot, - Donation -} - -export default function ContributorGuide() { - const [contributorOption, setContributorOption] = useState(null); - const [codeOption, setCodeOption] = useState(null); - const [codeLanguageOption, setCodeLanguageOption] = useState(null); - const [cSharpFeatureOption, setCSharpFeatureOption] = useState(null); - const [otherOption, setOtherOption] = useState(null); - - return ( - <> -
- - - -
- - {contributorOption === ContributorOption.Code && ( - <> -
- There are a couple ways to get involved with Jellyfin depending on your skillset. -
-
- - - -
- - {codeOption === CodeOption.CSharp && ( - <> -
- The main core of Jellyfin as well as its plugins are written in C#. You have a couple options to get - started. -
-
- - -
- - {codeLanguageOption === CodeLanguageOption.Bug && ( -
-

- There are always bugs to fix in Jellyfin. If you want to find an existing bug to fix, head over to - the{' '} - - open Bug Issues page - {' '} - on GitHub, and find one that interests you. If you find a bug that affects you already, it is a good - candidate to fix as you should be quickly able to test it; otherwise, the bug report should list - steps to reproduce the bug. -

-

- Once you have found a bug you would like to fix, head over to the{' '} - GitHub page for the server and begin hacking. - Development documentation can be found on the Documentation page. When the - fix is ready, feel free to propose it to other users in the issue to get them to help test as well. -

-

- You should always develop bugfixes on a dedicated Git branch within your own Fork of Jellyfin (the - fork+branch model). Once your bugfix is ready, submit a Pull Request on GitHub from your feature - branch to the Master branch of the project. It will be reviewed and, when it passes review, accepted - into Jellyfin. -

-
- )} - - {codeLanguageOption === CodeLanguageOption.Feature && ( - <> -
-

- New features for Jellyfin are generally implemented in one of two ways, depending on the - complexity and scope of the feature. -

-

- First, check out our Feature Requests tracker and find - something that looks interesting or useful to you. Please comment on the issue to indicate that - you are working on it in order to let everyone know. -

-

- Most well-requested features will have a tag; as a C# developer, those tagged as{' '} - “Server” or “Plugin” are of the most interest to you. Select - the option below based on the tag on the feature. -

-
- -
- - -
- - {cSharpFeatureOption === CSharpFeatureOption.Server && ( -
-

- Features of this type should be implemented directly into the core server itself. Once you have - found a feature you want to implement, head over to the{' '} - GitHub page for the server and begin hacking. - Development documentation can be found on the Documentation page. -

-

- You should always develop features on a dedicated Git branch within your own Fork of Jellyfin - (the fork+branch model). Once your feature is ready, submit a Pull Request on GitHub from your - feature branch to the Master branch of the project. It will be reviewed and, if it passes - review, accepted into Jellyfin. -

-
- )} - - {cSharpFeatureOption === CSharpFeatureOption.Plugin && ( -
-

- Features of this type should be implemented as external plugins. Plugins help extend the - functionality of Jellyfin without integrating the code into the main core. This lets users - select the features they want and install them dynamically, without complicating the server as a - whole. For developers, they also help keep the code clean and focused on the functionality, - without worrying about the backend. -

-

- Once you have found a feature you want to implement with a plugin, check out the{' '} - Plugin Template repository{' '} - and clone this repository into a new project. Official plugins are named - “jellyfin-plugin-mycoolname”. You can use this template to get you started on - writing the plugin. - {/* FIXME: The plugin-api docs need a new home */} - {/* You may also want to consult the{' '} - Jellyfin API documentation to help learn the - interfaces available. */} -

-

- Once your plugin is working as expected, and all information filled out, publish your code to - GitHub and contact the team on Matrix - . If your plugin passes our evaluation, we will add it to the official plugin catalogue, and can - optionally transfer ownership of the plugin to the Jellyfin organization on GitHub. -

-
- )} - - )} - - )} - - {codeOption === CodeOption.JavaScript && ( - <> -
- The primary Jellyfin web client is written primarily in JavaScript. You have a couple options to get - started. -
-
- - - -
- - {codeLanguageOption === CodeLanguageOption.Bug && ( -
-

- There are always bugs to fix in Jellyfin. If you want to find an existing bug to fix, head over to - the{' '} - - open Bug Issues page - {' '} - on GitHub, and find one that interests you. If you find a bug that affects you already, it is a good - candidate to fix as you should be quickly able to test it; otherwise, the bug report should list - steps to reproduce the bug. -

-

- Once you have found a bug you would like to fix, head over to the{' '} - GitHub page for the web client and begin - hacking. Development documentation can be found on the Documentation page. - When the fix is ready, feel free to propose it to other users in the issue to get them to help test - as well. -

-

- You should always develop bugfixes on a dedicated Git branch within your own Fork of Jellyfin's - web client (the fork+branch model). Once your bugfix is ready, submit a Pull Request on GitHub from - your feature branch to the Master branch of the project. It will be reviewed and, if it passes - review, accepted into Jellyfin. -

-
- )} - - {codeLanguageOption === CodeLanguageOption.Feature && ( -
-

- First, check out our Feature Requests tracker and find - something that looks interesting or useful to you. Please comment on the issue to indicate that you - are working on it in order to let everyone know. -

-

- Most well-requested features will have a tag; as a JavaScript developer, those tagged as{' '} - “Web UI” are of the most interest to you. -

-

- Once you have found a feature you would like to implement, head over to the{' '} - GitHub page for the server and begin hacking. - Development documentation can be found on the Documentation page. -

-

- You should always develop features on a dedicated Git branch within your own Fork of Jellyfin's - web client (the fork+branch model). Once your feature is ready, submit a Pull Request on GitHub from - your feature branch to the Master branch of the project. It will be reviewed and, if it passes - review, accepted into Jellyfin. -

-
- )} - - {codeLanguageOption === CodeLanguageOption.Modernize && ( -
- Jellyfin's web client is being rewritten. We are currently converting it to TypeScript and React. - Head over to the project page on GitHub for - more information. -
- )} - - )} - - {codeOption === CodeOption.Other && ( -
-

- Jellyfin has several other sub-projects that use various languages. If any of these suit you, head over - to the relevant project page and begin hacking. -

-
    -
  • - Kotlin/Java: The Android TV and{' '} - Android apps are written in Kotlin and Java - for some legacy code. -
    • -
  • - Python: The Kodi client is written in - Python. -
    • -
  • - BrightScript: The Roku client is - written in BrightScript. -
    • -
-

- Feel free to browse around the project page for the full list - of official sub-projects. -

-
- )} - - )} - - {contributorOption === ContributorOption.Translations && ( -
- Check our our Weblate instance and start helping to translate - strings to other languages! Logging in will require a GitHub account. -
- )} - - {contributorOption === ContributorOption.Other && ( - <> -
- Even if you are not a developer or able to speak multiple languages, there are still lots of things you can - do to help Jellyfin. -
-
- - - -
- - {otherOption === OtherOption.Documentation && ( -
- Documentation is simultaneously very important, but very neglected in a lot of projects. We want to be - different, and you can help! If you come across anything that you think should be documented, such as how - to do things, configuration steps, or just general helpful pointers, we welcome contributions to{' '} - our Documentation Repository, visible{' '} - here. -
- )} - - {otherOption === OtherOption.Troubleshoot && ( -
- We have a large and diverse userbase, with so many features that the combinations and configurations are - almost endless. But as a volunteer-run project, the contributors can often be limited in the help they can - provide. If you are well-versed in Jellyfin's operation, we welcome you to try to help troubleshoot - problems your fellow users are having. Troubleshooting generally occurs in our{' '} - main and{' '} - troubleshooting Matrix rooms and on{' '} - our Forum. Hanging around those places and helping your fellow - users, in a kind, courteous, and respectful manner, earns our eternal gratitude! -
- )} - - {otherOption === OtherOption.Donation && ( -
- As a project, we generally do not like asking for donations - we are entirely volunteer-run and intend to - keep Jellyfin free as in beer, as well as free as in speech, forever. We do not wish, support, nor intend - donations to privilege any user's voice or priorities. That said, if you do want to help us cover - some operating expenses like our VPS hosting, domains, developer licenses, metadata API keys, and other - incidental expenses, check out our OpenCollective page{' '} - to donate. Our entire budget as well as all expenses are publicly visible there. -
- )} - - )} - - ); -} diff --git a/src/components/node/Node.tsx b/src/components/node/Node.tsx new file mode 100644 index 000000000..5ccb8e623 --- /dev/null +++ b/src/components/node/Node.tsx @@ -0,0 +1,38 @@ +import React, { ReactNode } from 'react'; +import clsx from 'clsx'; + +export interface NodeData { + body?: ReactNode; + links: NodeLink[]; +} + +interface NodeLink { + title: string; + node: NodeData; +} + +export default function Node({ data }: { data: NodeData }) { + const [selected, setSelected] = React.useState(''); + const selectedNode = data.links.find((link) => link.title === selected)?.node; + + return ( + <> +
{data.body && data.body}
+
+ {data.links.map((link, index) => ( + + ))} +
+ + {selectedNode && } + + ); +} diff --git a/src/data/contributeData.tsx b/src/data/contributeData.tsx new file mode 100644 index 000000000..c0a1c44bd --- /dev/null +++ b/src/data/contributeData.tsx @@ -0,0 +1,284 @@ +import { NodeData } from '../components/node/Node'; +import React from 'react'; +import Link from '@docusaurus/Link'; + +export const contributeData: NodeData = { + links: [ + { + title: 'Code', + node: { + body:
There are a couple ways to get involved with Jellyfin depending on your skillset.
, + links: [ + { + title: 'C#', + node: { + body: ( +
+ The main core of Jellyfin as well as its plugins are written in C#. You have a couple options to get + started. +
+ ), + links: [ + { + title: 'Fix Bugs', + node: { + body: ( +
+

+ There are always bugs to fix in Jellyfin. If you want to find an existing bug to fix, head + over to the{' '} + + open Bug Issues page + {' '} + on GitHub, and find one that interests you. If you find a bug that affects you already, it is + a good candidate to fix as you should be quickly able to test it; otherwise, the bug report + should list steps to reproduce the bug. +

+

+ Once you have found a bug you would like to fix, head over to the{' '} + GitHub page for the server and begin + hacking. Development documentation can be found on the{' '} + Documentation page. When the fix is ready, feel free to propose it to + other users in the issue to get them to help test as well. +

+

+ You should always develop bugfixes on a dedicated Git branch within your own Fork of Jellyfin + (the fork+branch model). Once your bugfix is ready, submit a Pull Request on GitHub from your + feature branch to the Master branch of the project. It will be reviewed and, when it passes + review, accepted into Jellyfin. +

+
+ ), + links: [] + } + }, + { + title: 'Implement a Feature', + node: { + body: ( +
+

+ New features for Jellyfin are generally implemented in one of two ways, depending on the + complexity and scope of the feature. +

+

+ First, check out our Feature Requests tracker and + find something that looks interesting or useful to you. Please comment on the issue to + indicate that you are working on it in order to let everyone know. +

+

+ Most well-requested features will have a tag; as a C# developer, those tagged as{' '} + “Server” or “Plugin” are of the most interest to you. + Select the option below based on the tag on the feature. +

+
+ ), + links: [] + } + } + ] + } + }, + { + title: 'JavaScript', + node: { + body: ( +
+ The primary Jellyfin web client is written primarily in JavaScript. You have a couple options to get + started. +
+ ), + links: [ + { + title: 'Fix Bugs', + node: { + body: ( +
+

+ There are always bugs to fix in Jellyfin. If you want to find an existing bug to fix, head + over to the{' '} + + open Bug Issues page + {' '} + on GitHub, and find one that interests you. If you find a bug that affects you already, it is + a good candidate to fix as you should be quickly able to test it; otherwise, the bug report + should list steps to reproduce the bug. +

+

+ Once you have found a bug you would like to fix, head over to the{' '} + GitHub page for the web client and + begin hacking. Development documentation can be found on the{' '} + Documentation page. When the fix is ready, feel free to propose it to + other users in the issue to get them to help test as well. +

+

+ You should always develop bugfixes on a dedicated Git branch within your own Fork of + Jellyfin's web client (the fork+branch model). Once your bugfix is ready, submit a Pull + Request on GitHub from your feature branch to the Master branch of the project. It will be + reviewed and, if it passes review, accepted into Jellyfin. +

+
+ ), + links: [] + } + }, + { + title: 'Implement a Feature', + node: { + body: ( +
+

+ First, check out our Feature Requests tracker and + find something that looks interesting or useful to you. Please comment on the issue to + indicate that you are working on it in order to let everyone know. +

+

+ Most well-requested features will have a tag; as a JavaScript developer, those tagged as{' '} + “Web UI” are of the most interest to you. +

+

+ Once you have found a feature you would like to implement, head over to the{' '} + GitHub page for the server and begin + hacking. Development documentation can be found on the{' '} + Documentation page. +

+

+ You should always develop features on a dedicated Git branch within your own Fork of + Jellyfin's web client (the fork+branch model). Once your feature is ready, submit a Pull + Request on GitHub from your feature branch to the Master branch of the project. It will be + reviewed and, if it passes review, accepted into Jellyfin. +

+
+ ), + links: [] + } + }, + { + title: 'Help Modernize the Web Client', + node: { + body: ( +
+ Jellyfin's web client is being rewritten. We are currently converting it to TypeScript and + React. Head over to the project page on + GitHub for more information. +
+ ), + links: [] + } + } + ] + } + }, + { + title: 'Other', + node: { + body: ( +
+

+ Jellyfin has several other sub-projects that use various languages. If any of these suit you, head + over to the relevant project page and begin hacking. +

+
    +
  • + Kotlin/Java: The Android TV{' '} + and Android apps are written in Kotlin + and Java for some legacy code. +
    • +
  • + Python: The Kodi client is written + in Python. +
    • +
  • + BrightScript: The Roku client is + written in BrightScript. +
    • +
+

+ Feel free to browse around the project page for the full + list of official sub-projects. +

+
+ ), + links: [] + } + } + ] + } + }, + { + title: 'Translations', + node: { + body: ( +
+ Check out our Weblate instance and start helping to translate + strings to other languages! Logging in will require a GitHub account. +
+ ), + links: [] + } + }, + { + title: 'Other', + node: { + body: ( +
+ Even if you are not a developer or able to speak multiple languages, there are still lots of things you can + do to help Jellyfin. +
+ ), + links: [ + { + title: 'Write Documentation', + node: { + body: ( +
+ Documentation is simultaneously very important, but very neglected in a lot of projects. We want to be + different, and you can help! If you come across anything that you think should be documented, such as + how to do things, configuration steps, or just general helpful pointers, we welcome contributions to{' '} + our Documentation Repository, visible{' '} + here. +
+ ), + links: [] + } + }, + { + title: 'Help People Troubleshoot', + node: { + body: ( +
+ We have a large and diverse userbase, with so many features that the combinations and configurations + are almost endless. But as a volunteer-run project, the contributors can often be limited in the help + they can provide. If you are well-versed in Jellyfin's operation, we welcome you to try to help + troubleshoot problems your fellow users are having. Troubleshooting generally occurs in our{' '} + main and{' '} + troubleshooting Matrix rooms + and on our Forum. Hanging around those places and helping + your fellow users, in a kind, courteous, and respectful manner, earns our eternal gratitude! +
+ ), + links: [] + } + }, + { + title: 'Help Pay for Expenses', + node: { + body: ( +
+ As a project, we generally do not like asking for donations - we are entirely volunteer-run and intend + to keep Jellyfin free as in beer, as well as free as in speech, forever. We do not wish, support, nor + intend donations to privilege any user's voice or priorities. That said, if you do want to help + us cover some operating expenses like our VPS hosting, domains, developer licenses, metadata API keys, + and other incidental expenses, check out our{' '} + OpenCollective page to donate. Our entire budget as + well as all expenses are publicly visible there. +
+ ), + links: [] + } + } + ] + } + } + ] +}; diff --git a/src/pages/contribute.tsx b/src/pages/contribute.tsx index dd328e55d..e3d8bab4d 100644 --- a/src/pages/contribute.tsx +++ b/src/pages/contribute.tsx @@ -4,10 +4,11 @@ import Layout from '@theme/Layout'; import clsx from 'clsx'; import React from 'react'; -import ContributorGuide from '../components/contribute/ContributorGuide'; import Hero from '../components/common/Hero'; import styles from './contribute.module.scss'; +import Node from '../components/node/Node'; +import { contributeData } from '../data/contributeData'; export default function Contribute() { return ( @@ -34,7 +35,7 @@ export default function Contribute() {
- +