jellyfin/jellyfin.org
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin.org.git synced 2024-10-06 19:03:28 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Run eslint fix

Browse Source
This commit is contained in:
Bill Thornton 2022-08-04 13:28:54 -04:00
parent eda2756501
commit 5a224a7c77
24 changed files with 380 additions and 543 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.eslintrc.json
View File

@ -22,11 +22,7 @@
"ecmaVersion": 12, "ecmaVersion": 12,
"sourceType": "module" "sourceType": "module"
}, },
"plugins": [ "plugins": ["react", "@typescript-eslint", "jsx-a11y"],
"react",
"@typescript-eslint",
"jsx-a11y"
],
"rules": { "rules": {
"no-unused-vars": "off", "no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": "error" "@typescript-eslint/no-unused-vars": "error"
@ -36,4 +32,4 @@
"version": "detect" "version": "detect"
} }
} }
} }

2
babel.config.js
View File

@ -1,3 +1,3 @@
module.exports = { module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')], presets: [require.resolve('@docusaurus/core/lib/babel/preset')]
}; };

2
docs/clients/_category_.json
View File

@ -1,3 +1,3 @@
{ {
"label": "Client configuration" "label": "Client configuration"
} }

2
docs/configuration/_category_.json
View File

@ -1,3 +1,3 @@
{ {
"label": "Server configuration" "label": "Server configuration"
} }

2
docs/media/_category_.json
View File

@ -1,3 +1,3 @@
{ {
"label": "Organizing your media" "label": "Organizing your media"
} }

2
docs/plugins/_category_.json
View File

@ -1,3 +1,3 @@
{ {
"label": "Plugins" "label": "Plugins"
} }

2
docs/reverse-proxy/_category_.json
View File

@ -1,3 +1,3 @@
{ {
"label": "Using with a reverse proxy" "label": "Using with a reverse proxy"
} }

2
docs/server/_category_.json
View File

@ -1,3 +1,3 @@
{ {
"label": "Server administration" "label": "Server administration"
} }

2
docs/server/users/_category_.json
View File

@ -1,3 +1,3 @@
{ {
"label": "Users" "label": "Users"
} }

2
docs/tips-and-tricks/_category_.json
View File

@ -1,3 +1,3 @@
{ {
"label": "Tips & tricks" "label": "Tips & tricks"
} }

2
docusaurus.config.js
View File

@ -87,7 +87,7 @@ module.exports = {
{ {
label: 'Contact', label: 'Contact',
to: '/contact' to: '/contact'
}, }
], ],
copyright: `Site content is licensed <a href='http://creativecommons.org/licenses/by-nd/4.0/'>CC-BY-ND-4.0</a>` copyright: `Site content is licensed <a href='http://creativecommons.org/licenses/by-nd/4.0/'>CC-BY-ND-4.0</a>`
} }

2
sidebars.js
View File

@ -11,7 +11,7 @@
module.exports = { module.exports = {
// By default, Docusaurus generates a sidebar from the docs folder structure // By default, Docusaurus generates a sidebar from the docs folder structure
tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }]
// But you can create a sidebar manually // But you can create a sidebar manually
/* /*

26
src/components/BuiltByVolunteers.tsx
View File

@ -8,32 +8,28 @@ export default function BuiltByVolunteers() {
const contributors = 1000; const contributors = 1000;
return ( return (
<section className="landing-section padding-vert--xl"> <section className='landing-section padding-vert--xl'>
<div className="container"> <div className='container'>
<div className="row"> <div className='row'>
<div className="col col--6 padding--lg"> <div className='col col--6 padding--lg'>
<div className="display--flex flex-direction--column align-items--center margin-bottom--md"> <div className='display--flex flex-direction--column align-items--center margin-bottom--md'>
<h1>{members}</h1> <h1>{members}</h1>
<h2>Members</h2> <h2>Members</h2>
</div> </div>
<div className="display--flex flex-direction--column align-items--center"> <div className='display--flex flex-direction--column align-items--center'>
<h1>{contributors}+</h1> <h1>{contributors}+</h1>
<h2>Contributors</h2> <h2>Contributors</h2>
</div> </div>
</div> </div>
<div className="col col--6"> <div className='col col--6'>
<Svg className={styles.logo} /> <Svg className={styles.logo} />
<h1>Built by volunteers, community-driven</h1> <h1>Built by volunteers, community-driven</h1>
<div className="margin-bottom--sm"> <div className='margin-bottom--sm'>
<b> <b>Jellyfin is entirely funded through donations and built by its users.</b>
Jellyfin is entirely funded through donations and built by its
users.
</b>
</div> </div>
<div> <div>
We rely entirely on contributions from volunteers. There is no We rely entirely on contributions from volunteers. There is no corporation steering the ship. Everything
corporation steering the ship. Everything is done by users, for is done by users, for users.
users.
</div> </div>
</div> </div>
</div> </div>

16
src/components/CallToAction.tsx
View File

@ -4,17 +4,11 @@ import styles from './CallToAction.modules.css';
export default function CallToAction() { export default function CallToAction() {
return ( return (
<div className={styles.cta}> <div className={styles.cta}>
<div className="container"> <div className='container'>
<div className="cta-inner"> <div className='cta-inner'>
<h2 className="cta-title">Get Started Now</h2> <h2 className='cta-title'>Get Started Now</h2>
<p className="cta-sub"> <p className='cta-sub'>Check out our Getting Started guide to download and set up your server today.</p>
Check out our Getting Started guide to download and set up your <a href='/downloads' className='button button--primary button--lg margin-top--lg'>
server today.
</p>
<a
href="/downloads"
className="button button--primary button--lg margin-top--lg"
>
Download Jellyfin Download Jellyfin
</a> </a>
</div> </div>

374
src/components/ContributorGuide.tsx
View File

@ -41,12 +41,9 @@ export default function ContributorGuide() {
<> <>
<div> <div>
<button <button
className={clsx( className={clsx('button', 'button--secondary', 'margin-right--md', {
'button', 'button--active': contributorOption === ContributorOption.Code
'button--secondary', })}
'margin-right--md',
{ 'button--active': contributorOption === ContributorOption.Code }
)}
onClick={() => { onClick={() => {
setContributorOption(ContributorOption.Code); setContributorOption(ContributorOption.Code);
setOtherOption(null); setOtherOption(null);
@ -55,12 +52,9 @@ export default function ContributorGuide() {
Code Code
</button> </button>
<button <button
className={clsx( className={clsx('button', 'button--secondary', 'margin-right--md', {
'button', 'button--active': contributorOption === ContributorOption.Translations
'button--secondary', })}
'margin-right--md',
{ 'button--active': contributorOption === ContributorOption.Translations }
)}
onClick={() => { onClick={() => {
setContributorOption(ContributorOption.Translations); setContributorOption(ContributorOption.Translations);
setCodeOption(null); setCodeOption(null);
@ -72,11 +66,9 @@ export default function ContributorGuide() {
Translations Translations
</button> </button>
<button <button
className={clsx( className={clsx('button', 'button--secondary', {
'button', 'button--active': contributorOption === ContributorOption.Other
'button--secondary', })}
{ 'button--active': contributorOption === ContributorOption.Other }
)}
onClick={() => { onClick={() => {
setContributorOption(ContributorOption.Other); setContributorOption(ContributorOption.Other);
setCodeOption(null); setCodeOption(null);
@ -95,13 +87,9 @@ export default function ContributorGuide() {
</div> </div>
<div> <div>
<button <button
className={clsx( className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button', 'button--active': codeOption === CodeOption.CSharp
'button--secondary', })}
'margin-right--md',
'margin-top--md',
{ 'button--active': codeOption === CodeOption.CSharp }
)}
onClick={() => { onClick={() => {
if (codeOption !== CodeOption.CSharp) { if (codeOption !== CodeOption.CSharp) {
setCodeLanguageOption(null); setCodeLanguageOption(null);
@ -112,13 +100,9 @@ export default function ContributorGuide() {
C# C#
</button> </button>
<button <button
className={clsx( className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button', 'button--active': codeOption === CodeOption.JavaScript
'button--secondary', })}
'margin-right--md',
'margin-top--md',
{ 'button--active': codeOption === CodeOption.JavaScript }
)}
onClick={() => { onClick={() => {
if (codeOption !== CodeOption.JavaScript) { if (codeOption !== CodeOption.JavaScript) {
setCodeLanguageOption(null); setCodeLanguageOption(null);
@ -130,13 +114,9 @@ export default function ContributorGuide() {
JavaScript JavaScript
</button> </button>
<button <button
className={clsx( className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button', 'button--active': codeOption === CodeOption.Other
'button--secondary', })}
'margin-right--md',
'margin-top--md',
{ 'button--active': codeOption === CodeOption.Other }
)}
onClick={() => { onClick={() => {
setCodeOption(CodeOption.Other); setCodeOption(CodeOption.Other);
setCodeLanguageOption(null); setCodeLanguageOption(null);
@ -150,18 +130,14 @@ export default function ContributorGuide() {
{codeOption === CodeOption.CSharp && ( {codeOption === CodeOption.CSharp && (
<> <>
<div className='margin-top--md'> <div className='margin-top--md'>
The main core of Jellyfin as well as its plugins are written in C#. The main core of Jellyfin as well as its plugins are written in C#. You have a couple options to get
You have a couple options to get started. started.
</div> </div>
<div> <div>
<button <button
className={clsx( className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button', 'button--active': codeLanguageOption === CodeLanguageOption.Bug
'button--secondary', })}
'margin-right--md',
'margin-top--md',
{ 'button--active': codeLanguageOption === CodeLanguageOption.Bug }
)}
onClick={() => { onClick={() => {
setCodeLanguageOption(CodeLanguageOption.Bug); setCodeLanguageOption(CodeLanguageOption.Bug);
setCSharpFeatureOption(null); setCSharpFeatureOption(null);
@ -170,13 +146,9 @@ export default function ContributorGuide() {
Fix Bugs Fix Bugs
</button> </button>
<button <button
className={clsx( className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button', 'button--active': codeLanguageOption === CodeLanguageOption.Feature
'button--secondary', })}
'margin-right--md',
'margin-top--md',
{ 'button--active': codeLanguageOption === CodeLanguageOption.Feature }
)}
onClick={() => { onClick={() => {
setCodeLanguageOption(CodeLanguageOption.Feature); setCodeLanguageOption(CodeLanguageOption.Feature);
}} }}
@ -188,28 +160,26 @@ export default function ContributorGuide() {
{codeLanguageOption === CodeLanguageOption.Bug && ( {codeLanguageOption === CodeLanguageOption.Bug && (
<div className='margin-top--md'> <div className='margin-top--md'>
<p> <p>
There are always bugs to fix in Jellyfin. There are always bugs to fix in Jellyfin. If you want to find an existing bug to fix, head over to
If you want to find an existing bug to fix, head over to the{' '}
the <a href='https://github.com/jellyfin/jellyfin/issues?q=is%3Aissue+is%3Aopen+label%3Abug'> <a href='https://github.com/jellyfin/jellyfin/issues?q=is%3Aissue+is%3Aopen+label%3Abug'>
open Bug Issues page open Bug Issues page
</a> on GitHub, and find one that interests you. </a>{' '}
If you find a bug that affects you already, it&apos;s a good candidate to fix as you should be on GitHub, and find one that interests you. If you find a bug that affects you already, it&apos;s a
quickly able to test it; otherwise, the bug report should list steps to reproduce the bug. good candidate to fix as you should be quickly able to test it; otherwise, the bug report should
list steps to reproduce the bug.
</p> </p>
<p> <p>
Once you&apos;ve found a bug you&apos;d like to fix, head over to Once you&apos;ve found a bug you&apos;d like to fix, head over to the{' '}
the <a href='https://github.com/jellyfin/jellyfin'>GitHub page</a> for the server and begin <a href='https://github.com/jellyfin/jellyfin'>GitHub page</a> for the server and begin hacking.
hacking. Development documentation can be found on the <a href='/docs'>Documentation page</a>. When the fix
Development documentation can be found on the <a href='/docs'>Documentation page</a>. is ready, feel free to propose it to other users in the issue to get them to help test as well.
When the fix is ready, feel free to propose it to other users in the issue to get them to help
test as well.
</p> </p>
<p> <p>
You should always develop bugfixes on a dedicated Git branch within your own Fork of Jellyfin (the You should always develop bugfixes on a dedicated Git branch within your own Fork of Jellyfin (the
fork+branch model). fork+branch model). Once your bugfix is ready, submit a Pull Request on GitHub from your feature
Once your bugfix is ready, submit a Pull Request on GitHub from your feature branch to the Master branch to the Master branch of the project. It will be reviewed and, when it passes review, accepted
branch of the project. into Jellyfin.
It will be reviewed and, when it passes review, accepted into Jellyfin.
</p> </p>
</div> </div>
)} )}
@ -222,26 +192,22 @@ export default function ContributorGuide() {
complexity and scope of the feature. complexity and scope of the feature.
</p> </p>
<p> <p>
First, check out our <a href='https://features.jellyfin.org'>Feature Requests tracker</a> and First, check out our <a href='https://features.jellyfin.org'>Feature Requests tracker</a> and find
find something that looks interesting or useful to you. something that looks interesting or useful to you. Please comment on the issue to indicate that
Please comment on the issue to indicate that you are working on it in order to let everyone know. you are working on it in order to let everyone know.
</p> </p>
<p className='margin--none'> <p className='margin--none'>
Most well-requested features will have a tag; as a C# developer, those tagged Most well-requested features will have a tag; as a C# developer, those tagged as{' '}
as <b>&ldquo;Server&rdquo;</b> or <b>&ldquo;Plugin&rdquo;</b> are of the most interest to you. <b>&ldquo;Server&rdquo;</b> or <b>&ldquo;Plugin&rdquo;</b> are of the most interest to you. Select
Select the option below based on the tag on the feature. the option below based on the tag on the feature.
</p> </p>
</div> </div>
<div> <div>
<button <button
className={clsx( className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button', 'button--active': cSharpFeatureOption === CSharpFeatureOption.Server
'button--secondary', })}
'margin-right--md',
'margin-top--md',
{ 'button--active': cSharpFeatureOption === CSharpFeatureOption.Server }
)}
onClick={() => { onClick={() => {
setCSharpFeatureOption(CSharpFeatureOption.Server); setCSharpFeatureOption(CSharpFeatureOption.Server);
}} }}
@ -249,13 +215,9 @@ export default function ContributorGuide() {
Server Server
</button> </button>
<button <button
className={clsx( className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button', 'button--active': cSharpFeatureOption === CSharpFeatureOption.Plugin
'button--secondary', })}
'margin-right--md',
'margin-top--md',
{ 'button--active': cSharpFeatureOption === CSharpFeatureOption.Plugin }
)}
onClick={() => { onClick={() => {
setCSharpFeatureOption(CSharpFeatureOption.Plugin); setCSharpFeatureOption(CSharpFeatureOption.Plugin);
}} }}
@ -267,18 +229,16 @@ export default function ContributorGuide() {
{cSharpFeatureOption === CSharpFeatureOption.Server && ( {cSharpFeatureOption === CSharpFeatureOption.Server && (
<div className='margin-top--md'> <div className='margin-top--md'>
<p> <p>
Features of this type should be implemented directly into the core server itself. Features of this type should be implemented directly into the core server itself. Once
Once you&apos;ve found a feature you want to implement, head over to you&apos;ve found a feature you want to implement, head over to the{' '}
the <a href='https://github.com/jellyfin/jellyfin'>GitHub page</a> for the server and begin <a href='https://github.com/jellyfin/jellyfin'>GitHub page</a> for the server and begin hacking.
hacking.
Development documentation can be found on the <a href='/docs'>Documentation page</a>. Development documentation can be found on the <a href='/docs'>Documentation page</a>.
</p> </p>
<p> <p>
You should always develop features on a dedicated Git branch within your own Fork of Jellyfin You should always develop features on a dedicated Git branch within your own Fork of Jellyfin
(the fork+branch model). (the fork+branch model). Once your feature is ready, submit a Pull Request on GitHub from your
Once your feature is ready, submit a Pull Request on GitHub from your feature branch to the feature branch to the Master branch of the project. It will be reviewed and, if it passes
Master branch of the project. review, accepted into Jellyfin.
It will be reviewed and, if it passes review, accepted into Jellyfin.
</p> </p>
</div> </div>
)} )}
@ -286,31 +246,25 @@ export default function ContributorGuide() {
{cSharpFeatureOption === CSharpFeatureOption.Plugin && ( {cSharpFeatureOption === CSharpFeatureOption.Plugin && (
<div className='margin-top--md'> <div className='margin-top--md'>
<p> <p>
Features of this type should be implemented as external plugins. Features of this type should be implemented as external plugins. Plugins help extend the
Plugins help extend the functionality of Jellyfin without integrating the code into the main functionality of Jellyfin without integrating the code into the main core. This lets users
core. select the features they want and install them dynamically, without complicating the server as a
This lets users select the features they want and install them dynamically, without whole. For developers, they also help keep the code clean and focused on the functionality,
complicating the server as a whole. without worrying about the backend.
For developers, they also help keep the code clean and focused on the functionality, without
worrying about the backend.
</p> </p>
<p> <p>
Once you&apos;ve found a feature you want to implement with a plugin, check out Once you&apos;ve found a feature you want to implement with a plugin, check out the{' '}
the <a href='https://github.com/jellyfin/jellyfin-plugin-template'> <a href='https://github.com/jellyfin/jellyfin-plugin-template'>Plugin Template repository</a>{' '}
Plugin Template repository and clone this repository into a new project. Official plugins are named
</a> and clone this repository into a new project. &ldquo;jellyfin-plugin-mycoolname&rdquo;. You can use this template to get you started on
Official plugins are named &ldquo;jellyfin-plugin-mycoolname&rdquo;. writing the plugin. You may also want to consult the{' '}
You can use this template to get you started on writing the plugin. <a href='/docs/plugin-api/index.html'>Jellyfin API documentation</a> to help learn the
You may also want to consult the <a href='/docs/plugin-api/index.html'> interfaces available.
Jellyfin API documentation
</a> to help learn the interfaces available.
</p> </p>
<p> <p>
Once your plugin is working as expected, and all information filled out, publish your code to Once your plugin is working as expected, and all information filled out, publish your code to
GitHub and <a href='https://matrix.to/#/#jellyfin-dev:matrix.org'> GitHub and <a href='https://matrix.to/#/#jellyfin-dev:matrix.org'>contact the team on Matrix</a>
contact the team on Matrix . If your plugin passes our evaluation, we will add it to the official plugin catalogue, and can
</a>.
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. optionally transfer ownership of the plugin to the Jellyfin organization on GitHub.
</p> </p>
</div> </div>
@ -323,18 +277,14 @@ export default function ContributorGuide() {
{codeOption === CodeOption.JavaScript && ( {codeOption === CodeOption.JavaScript && (
<> <>
<div className='margin-top--md'> <div className='margin-top--md'>
The primary Jellyfin web client is written primarily in Javascript. The primary Jellyfin web client is written primarily in Javascript. You have a couple options to get
You have a couple options to get started. started.
</div> </div>
<div> <div>
<button <button
className={clsx( className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button', 'button--active': codeLanguageOption === CodeLanguageOption.Bug
'button--secondary', })}
'margin-right--md',
'margin-top--md',
{ 'button--active': codeLanguageOption === CodeLanguageOption.Bug }
)}
onClick={() => { onClick={() => {
setCodeLanguageOption(CodeLanguageOption.Bug); setCodeLanguageOption(CodeLanguageOption.Bug);
}} }}
@ -342,13 +292,9 @@ export default function ContributorGuide() {
Fix Bugs Fix Bugs
</button> </button>
<button <button
className={clsx( className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button', 'button--active': codeLanguageOption === CodeLanguageOption.Feature
'button--secondary', })}
'margin-right--md',
'margin-top--md',
{ 'button--active': codeLanguageOption === CodeLanguageOption.Feature }
)}
onClick={() => { onClick={() => {
setCodeLanguageOption(CodeLanguageOption.Feature); setCodeLanguageOption(CodeLanguageOption.Feature);
}} }}
@ -356,13 +302,9 @@ export default function ContributorGuide() {
Implement a Feature Implement a Feature
</button> </button>
<button <button
className={clsx( className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button', 'button--active': codeLanguageOption === CodeLanguageOption.Modernize
'button--secondary', })}
'margin-right--md',
'margin-top--md',
{ 'button--active': codeLanguageOption === CodeLanguageOption.Modernize }
)}
onClick={() => { onClick={() => {
setCodeLanguageOption(CodeLanguageOption.Modernize); setCodeLanguageOption(CodeLanguageOption.Modernize);
}} }}
@ -375,25 +317,26 @@ export default function ContributorGuide() {
<div className='margin-top--md'> <div className='margin-top--md'>
<p> <p>
There are always bugs to fix in Jellyfin. If you want to find an existing bug to fix, head over to There are always bugs to fix in Jellyfin. If you want to find an existing bug to fix, head over to
the <a href='https://github.com/jellyfin/jellyfin-web/issues?q=is%3Aissue+is%3Aopen+label%3Abug'> the{' '}
<a href='https://github.com/jellyfin/jellyfin-web/issues?q=is%3Aissue+is%3Aopen+label%3Abug'>
open Bug Issues page open Bug Issues page
</a> on GitHub, and find one that interests you. </a>{' '}
If you find a bug that affects you already, it&apos;s a good candidate to fix as you should be on GitHub, and find one that interests you. If you find a bug that affects you already, it&apos;s a
quickly able to test it; otherwise, the bug report should list steps to reproduce the bug. good candidate to fix as you should be quickly able to test it; otherwise, the bug report should
list steps to reproduce the bug.
</p> </p>
<p> <p>
Once you&apos;ve found a bug you&apos;d like to fix, head over to Once you&apos;ve found a bug you&apos;d like to fix, head over to the{' '}
the <a href='https://github.com/jellyfin/jellyfin-web'>GitHub page</a> for the web client and begin <a href='https://github.com/jellyfin/jellyfin-web'>GitHub page</a> for the web client and begin
hacking. hacking. Development documentation can be found on the <a href='/docs'>Documentation page</a>. When
Development documentation can be found on the <a href='/docs'>Documentation page</a>. the fix is ready, feel free to propose it to other users in the issue to get them to help test as
When the fix is ready, feel free to propose it to other users in the issue to get them to help test well.
as well.
</p> </p>
<p> <p>
You should always develop bugfixes on a dedicated Git branch within your own Fork of You should always develop bugfixes on a dedicated Git branch within your own Fork of Jellyfin&apos;s
Jellyfin&apos;s web client (the fork+branch model). web client (the fork+branch model). Once your bugfix is ready, submit a Pull Request on GitHub from
Once your bugfix is ready, submit a Pull Request on GitHub from your feature branch to the Master your feature branch to the Master branch of the project. It will be reviewed and, if it passes
branch of the project. It will be reviewed and, if it passes review, accepted into Jellyfin. review, accepted into Jellyfin.
</p> </p>
</div> </div>
)} )}
@ -402,35 +345,32 @@ export default function ContributorGuide() {
<div className='margin-top--md'> <div className='margin-top--md'>
<p> <p>
First, check out our <a href='https://features.jellyfin.org'>Feature Requests tracker</a> and find First, check out our <a href='https://features.jellyfin.org'>Feature Requests tracker</a> and find
something that looks interesting or useful to you. something that looks interesting or useful to you. Please comment on the issue to indicate that you
Please comment on the issue to indicate that you are working on it in order to let everyone know. are working on it in order to let everyone know.
</p> </p>
<p> <p>
Most well-requested features will have a tag; as a Javascript developer, those tagged Most well-requested features will have a tag; as a Javascript developer, those tagged as{' '}
as <b>&ldquo;Web UI&rdquo;</b> are of the most interest to you. <b>&ldquo;Web UI&rdquo;</b> are of the most interest to you.
</p> </p>
<p> <p>
Once you&apos;ve found a feature you&apos;d like to implement, head over to Once you&apos;ve found a feature you&apos;d like to implement, head over to the{' '}
the <a href='https://github.com/jellyfin/jellyfin'>GitHub page</a> for the server and begin <a href='https://github.com/jellyfin/jellyfin'>GitHub page</a> for the server and begin hacking.
hacking.
Development documentation can be found on the <a href='/docs'>Documentation page</a>. Development documentation can be found on the <a href='/docs'>Documentation page</a>.
</p> </p>
<p> <p>
You should always develop features on a dedicated Git branch within your own Fork of You should always develop features on a dedicated Git branch within your own Fork of Jellyfin&apos;s
Jellyfin&apos;s web client (the fork+branch model). web client (the fork+branch model). Once your feature is ready, submit a Pull Request on GitHub from
Once your feature is ready, submit a Pull Request on GitHub from your feature branch to the Master your feature branch to the Master branch of the project. It will be reviewed and, if it passes
branch of the project. review, accepted into Jellyfin.
It will be reviewed and, if it passes review, accepted into Jellyfin.
</p> </p>
</div> </div>
)} )}
{codeLanguageOption === CodeLanguageOption.Modernize && ( {codeLanguageOption === CodeLanguageOption.Modernize && (
<div className='margin-top--md'> <div className='margin-top--md'>
Jellyfin&apos;s web client is being rewritten. Jellyfin&apos;s web client is being rewritten. We&apos;re currently converting it to TypeScript and
We&apos;re currently converting it to TypeScript and React. React. Head over to the <a href='https://github.com/jellyfin/jellyfin-web/'>project page</a> on GitHub
Head over to the <a href='https://github.com/jellyfin/jellyfin-web/'>project page</a> on GitHub for for more information.
more information.
</div> </div>
)} )}
</> </>
@ -439,21 +379,18 @@ export default function ContributorGuide() {
{codeOption === CodeOption.Other && ( {codeOption === CodeOption.Other && (
<div className='margin-top--md'> <div className='margin-top--md'>
<p> <p>
Jellyfin has several other sub-projects that use various languages. Jellyfin has several other sub-projects that use various languages. If any of these suit you, head over
If any of these suit you, head over to the relevant project page and begin hacking. to the relevant project page and begin hacking.
</p> </p>
<ul> <ul>
<li> <li>
<b>Kotlin/Java:</b> The <a <b>Kotlin/Java:</b> The <a href='https://github.com/jellyfin/jellyfin-androidtv'>Android TV</a> and{' '}
href='https://github.com/jellyfin/jellyfin-androidtv' <a href='https://github.com/jellyfin/jellyfin-android'>Android</a> apps are written in Kotlin and Java
>Android TV</a> and <a for some legacy code.
href='https://github.com/jellyfin/jellyfin-android'
>Android</a> apps are written in Kotlin and Java for some legacy code.
</li> </li>
<li> <li>
<b>Python:</b> The <a <b>Python:</b> The <a href='https://github.com/jellyfin/jellyfin-kodi'>Kodi</a> client is written in
href='https://github.com/jellyfin/jellyfin-kodi' Python.
>Kodi</a> client is written in Python.
</li> </li>
<li> <li>
<b>BrightScript:</b> The <a href='https://github.com/jellyfin/jellyfin-roku'>Roku</a> client is <b>BrightScript:</b> The <a href='https://github.com/jellyfin/jellyfin-roku'>Roku</a> client is
@ -472,8 +409,7 @@ export default function ContributorGuide() {
{contributorOption === ContributorOption.Translations && ( {contributorOption === ContributorOption.Translations && (
<div className='margin-top--md'> <div className='margin-top--md'>
Check our our <a href='https://translate.jellyfin.org/'>Weblate instance</a> and start helping to translate Check our our <a href='https://translate.jellyfin.org/'>Weblate instance</a> and start helping to translate
strings to other languages! strings to other languages! Logging in will require a <a href='https://github.com'>GitHub</a> account.
Logging in will require a <a href='https://github.com'>GitHub</a> account.
</div> </div>
)} )}
@ -485,13 +421,9 @@ export default function ContributorGuide() {
</div> </div>
<div> <div>
<button <button
className={clsx( className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button', 'button--active': otherOption === OtherOption.Documentation
'button--secondary', })}
'margin-right--md',
'margin-top--md',
{ 'button--active': otherOption === OtherOption.Documentation }
)}
onClick={() => { onClick={() => {
setOtherOption(OtherOption.Documentation); setOtherOption(OtherOption.Documentation);
}} }}
@ -499,13 +431,9 @@ export default function ContributorGuide() {
Write Documentation Write Documentation
</button> </button>
<button <button
className={clsx( className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button', 'button--active': otherOption === OtherOption.Troubleshoot
'button--secondary', })}
'margin-right--md',
'margin-top--md',
{ 'button--active': otherOption === OtherOption.Troubleshoot }
)}
onClick={() => { onClick={() => {
setOtherOption(OtherOption.Troubleshoot); setOtherOption(OtherOption.Troubleshoot);
}} }}
@ -513,13 +441,9 @@ export default function ContributorGuide() {
Help People Troubleshoot Help People Troubleshoot
</button> </button>
<button <button
className={clsx( className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button', 'button--active': otherOption === OtherOption.Donation
'button--secondary', })}
'margin-right--md',
'margin-top--md',
{ 'button--active': otherOption === OtherOption.Donation }
)}
onClick={() => { onClick={() => {
setOtherOption(OtherOption.Donation); setOtherOption(OtherOption.Donation);
}} }}
@ -530,42 +454,36 @@ export default function ContributorGuide() {
{otherOption === OtherOption.Documentation && ( {otherOption === OtherOption.Documentation && (
<div className='margin-top--md'> <div className='margin-top--md'>
Documentation is simultaneously very important, but very neglected in a lot of projects. Documentation is simultaneously very important, but very neglected in a lot of projects. We want to be
We want to be different, and you can help! different, and you can help! If you come across anything that you think should be documented, such as how
If you come across anything that you think should be documented, such as how to do things, configuration to do things, configuration steps, or just general helpful pointers, we welcome contributions to{' '}
steps, or just general helpful pointers, we welcome contributions <a href='https://github.com/jellyfin/jellyfin-docs'>our Documentation Repository</a>, visible{' '}
to <a href='https://github.com/jellyfin/jellyfin-docs'>our Documentation Repository</a>, <a href='/docs'>here</a>.
visible <a href='/docs'>here</a>.
</div> </div>
)} )}
{otherOption === OtherOption.Troubleshoot && ( {otherOption === OtherOption.Troubleshoot && (
<div className='margin-top--md'> <div className='margin-top--md'>
We have a large and diverse userbase, with so many features that the combinations and configurations are 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 almost endless. But as a volunteer-run project, the contributors can often be limited in the help they can
can provide. If you are well-versed in Jellyfin&apos;s operation, we welcome you to try to help provide. If you are well-versed in Jellyfin&apos;s operation, we welcome you to try to help troubleshoot
troubleshoot problems your fellow users are having. problems your fellow users are having. Troubleshooting generally occurs in our{' '}
Troubleshooting generally occurs in our <a href='https://matrix.to/#/#jellyfin:matrix.org'> <a href='https://matrix.to/#/#jellyfin:matrix.org'>main</a> and{' '}
main <a href='https://matrix.to/#/#jellyfin-troubleshooting:matrix.org'>troubleshooting</a> Matrix rooms and on{' '}
</a> and <a href='https://matrix.to/#/#jellyfin-troubleshooting:matrix.org'> <a href='https://reddit.com/r/jellyfin'>our Reddit Subreddit</a>. Hanging around those places and helping
troubleshooting your fellow users, in a kind, courteous, and respectful manner, earns our eternal gratitude!
</a> Matrix rooms and on <a href='https://reddit.com/r/jellyfin'>
our Reddit Subreddit
</a>.
Hanging around those places and helping your fellow users, in a kind, courteous, and respectful manner,
earns our eternal gratitude!
</div> </div>
)} )}
{otherOption === OtherOption.Donation && ( {otherOption === OtherOption.Donation && (
<div className='margin-top--md'> <div className='margin-top--md'>
As a project, we generally don&apos;t like asking for donations - we&apos;re entirely volunteer-run and As a project, we generally don&apos;t like asking for donations - we&apos;re entirely volunteer-run and
intend to keep Jellyfin free as in beer, as well as free as in speech, forever. intend to keep Jellyfin free as in beer, as well as free as in speech, forever. We do not wish, support,
We do not wish, support, nor intend donations to privilege any user&apos;s voice or priorities. nor intend donations to privilege any user&apos;s voice or priorities. That said, if you do want to help
That said, if you do want to help us cover some operating expenses like our VPS hosting, domains, us cover some operating expenses like our VPS hosting, domains, developer licences, metadata API keys, and
developer licences, metadata API keys, and other incidental expenses, check out other incidental expenses, check out our{' '}
our <a href='https://opencollective.com/jellyfin'>OpenCollective page</a> to donate. <a href='https://opencollective.com/jellyfin'>OpenCollective page</a> to donate. Our entire budget as well
Our entire budget as well as all expenses are publicly visible there. as all expenses are publicly visible there.
</div> </div>
)} )}
</> </>

21
src/components/FreeSoftware.tsx
View File

@ -4,25 +4,24 @@ import styles from './FreeSoftware.modules.css';
export default function FreeSoftware() { export default function FreeSoftware() {
return ( return (
<section className="landing-section padding-vert--xl"> <section className='landing-section padding-vert--xl'>
<div className="container"> <div className='container'>
<div className="row"> <div className='row'>
<div className="col col--6"> <div className='col col--6'>
<Svg className={styles.logo} /> <Svg className={styles.logo} />
<h1>Your media, your server, your way</h1> <h1>Your media, your server, your way</h1>
<div className="margin-bottom--sm"> <div className='margin-bottom--sm'>
<b>Jellyfin is fully self-hosted and fully open source.</b> <b>Jellyfin is fully self-hosted and fully open source.</b>
</div> </div>
<div> <div>
We don&apos;t do tracking or paid plans. There is no forced We don&apos;t do tracking or paid plans. There is no forced connection to a remote server. You are in
connection to a remote server. You are in control from start to control from start to finish.
finish.
</div> </div>
</div> </div>
<div className="col col--6 padding--lg"> <div className='col col--6 padding--lg'>
<img <img
alt="Jellyfin home screen" alt='Jellyfin home screen'
className="shadow--md" className='shadow--md'
src={require('/static/images/screenshots/home-10.7.png').default} src={require('/static/images/screenshots/home-10.7.png').default}
/> />
</div> </div>

14
src/components/Hero.tsx
View File

@ -4,16 +4,12 @@ import React, { FunctionComponent, ReactNode } from 'react';
import './Hero.css'; import './Hero.css';
type HeroProps = { type HeroProps = {
children?: ReactNode, children?: ReactNode;
title: string, title: string;
large?: boolean large?: boolean;
} };
const Hero: FunctionComponent<HeroProps> = ({ const Hero: FunctionComponent<HeroProps> = ({ children, title, large = false }: HeroProps) => (
children,
title,
large = false
}: HeroProps) => (
<header className={clsx('hero', { 'hero--large': large })}> <header className={clsx('hero', { 'hero--large': large })}>
<div className='hero__overlay hero__overlay--gradient'></div> <div className='hero__overlay hero__overlay--gradient'></div>
<div className='hero__inner'> <div className='hero__inner'>

49
src/components/HomepageFeatures.tsx
View File

@ -5,38 +5,22 @@ const FeatureList = [
{ {
title: 'Movies', title: 'Movies',
Svg: require('/static/images/illustrations/undraw_home_cinema.svg').default, Svg: require('/static/images/illustrations/undraw_home_cinema.svg').default,
description: ( description: <>Enjoy your entire movie collection, easy to browse and with beautiful artwork.</>
<>
Enjoy your entire movie collection, easy to browse and with beautiful
artwork.
</>
)
}, },
{ {
title: 'Shows', title: 'Shows',
Svg: require('/static/images/illustrations/undraw_Video_streaming_re.svg').default, Svg: require('/static/images/illustrations/undraw_Video_streaming_re.svg').default,
description: ( description: <>Watch your favorite shows, automatically sorted by season and ready to binge.</>
<>
Watch your favorite shows, automatically sorted by season and ready to
binge.
</>
)
}, },
{ {
title: 'Music', title: 'Music',
Svg: require('/static/images/illustrations/undraw_compose_music.svg').default, Svg: require('/static/images/illustrations/undraw_compose_music.svg').default,
description: ( description: <>Listen to music, your artists and your playlists, at home or on the go.</>
<>
Listen to music, your artists and your playlists, at home or on the go.
</>
)
}, },
{ {
title: 'Live TV & DVR', title: 'Live TV & DVR',
Svg: require('/static/images/illustrations/undraw_game_day.svg').default, Svg: require('/static/images/illustrations/undraw_game_day.svg').default,
description: ( description: <>Watch TV and set automatic recordings to expand your library.</>
<>Watch TV and set automatic recordings to expand your library.</>
)
}, },
{ {
title: 'Books', title: 'Books',
@ -46,9 +30,7 @@ const FeatureList = [
{ {
title: 'Photos', title: 'Photos',
Svg: require('/static/images/illustrations/undraw_group_selfie.svg').default, Svg: require('/static/images/illustrations/undraw_group_selfie.svg').default,
description: ( description: <>Organize your photos and share memories with your friends and family.</>
<>Organize your photos and share memories with your friends and family.</>
)
}, },
{ {
title: 'SyncPlay', title: 'SyncPlay',
@ -57,22 +39,13 @@ const FeatureList = [
} }
]; ];
function Feature({ function Feature({ Svg, title, description }: { Svg: any; title: string; description: JSX.Element; key: number }) {
Svg,
title,
description
}: {
Svg: any;
title: string;
description: JSX.Element;
key: number;
}) {
return ( return (
<div className="col col--3"> <div className='col col--3'>
<div className="text--center"> <div className='text--center'>
<Svg className={styles.featureSvg} alt={title} /> <Svg className={styles.featureSvg} alt={title} />
</div> </div>
<div className="text--center padding-horiz--md"> <div className='text--center padding-horiz--md'>
<h3>{title}</h3> <h3>{title}</h3>
<p>{description}</p> <p>{description}</p>
</div> </div>
@ -83,8 +56,8 @@ function Feature({
export default function HomepageFeatures() { export default function HomepageFeatures() {
return ( return (
<section className={`${styles.features} landing-section padding-vert--xl`}> <section className={`${styles.features} landing-section padding-vert--xl`}>
<div className="container--fluid"> <div className='container--fluid'>
<div className="row row-justify--center padding-horiz--sm"> <div className='row row-justify--center padding-horiz--sm'>
{FeatureList.map((props, idx) => ( {FeatureList.map((props, idx) => (
<Feature key={idx} {...props} /> <Feature key={idx} {...props} />
))} ))}

65
src/components/MoreClients.tsx
View File

@ -1,60 +1,53 @@
import React from 'react'; import React from 'react';
import Web from '../../static/images/icons/web.svg'; import Web from '../../static/images/icons/web.svg';
import Desktop from '../../static/images/icons/monitor.svg'; import Desktop from '../../static/images/icons/monitor.svg';
import { import { Android, Apple, Roku, Amazon, Kodi } from '@icons-pack/react-simple-icons';
Android,
Apple,
Roku,
Amazon,
Kodi
} from '@icons-pack/react-simple-icons';
import Plus from '../../static/images/icons/plus-thick.svg'; import Plus from '../../static/images/icons/plus-thick.svg';
export default function MoreClients() { export default function MoreClients() {
return ( return (
<section className="landing-section padding-vert--xl"> <section className='landing-section padding-vert--xl'>
<div className="container"> <div className='container'>
<div className="row"> <div className='row'>
<div className="col col--12 display--flex flex-direction--column align-items--center"> <div className='col col--12 display--flex flex-direction--column align-items--center'>
<h1>More clients than you can count</h1> <h1>More clients than you can count</h1>
<div> <div>
With a large array of official and third-party clients, Jellyfin With a large array of official and third-party clients, Jellyfin is available on every platform. Your
is available on every platform. Your media is ready to follow you, media is ready to follow you, wherever you go.
wherever you go.
</div> </div>
<div className="display--flex flex-wrap--wrap align-items--center fill--white margin-top--md"> <div className='display--flex flex-wrap--wrap align-items--center fill--white margin-top--md'>
<div className="display--flex flex-direction--column align-items--center client-icon-block margin-top--md"> <div className='display--flex flex-direction--column align-items--center client-icon-block margin-top--md'>
<Web /> <Web />
<span className="margin-top--sm">Web</span> <span className='margin-top--sm'>Web</span>
</div> </div>
<div className="display--flex flex-direction--column align-items--center client-icon-block margin-top--md"> <div className='display--flex flex-direction--column align-items--center client-icon-block margin-top--md'>
<Desktop /> <Desktop />
<span className="margin-top--sm">Desktop</span> <span className='margin-top--sm'>Desktop</span>
</div> </div>
<div className="display--flex flex-direction--column align-items--center client-icon-block margin-top--md"> <div className='display--flex flex-direction--column align-items--center client-icon-block margin-top--md'>
<Android color="#ffffff" size={48} /> <Android color='#ffffff' size={48} />
<span className="margin-top--sm">Android</span> <span className='margin-top--sm'>Android</span>
</div> </div>
<div className="display--flex flex-direction--column align-items--center client-icon-block margin-top--md"> <div className='display--flex flex-direction--column align-items--center client-icon-block margin-top--md'>
<Apple color="#ffffff" size={48} /> <Apple color='#ffffff' size={48} />
<span className="margin-top--sm">Apple</span> <span className='margin-top--sm'>Apple</span>
</div> </div>
<div className="display--flex flex-direction--column align-items--center client-icon-block margin-top--md"> <div className='display--flex flex-direction--column align-items--center client-icon-block margin-top--md'>
<Roku color="#ffffff" size={48} /> <Roku color='#ffffff' size={48} />
<span className="margin-top--sm">Roku</span> <span className='margin-top--sm'>Roku</span>
</div> </div>
<div className="display--flex flex-direction--column align-items--center client-icon-block margin-top--md"> <div className='display--flex flex-direction--column align-items--center client-icon-block margin-top--md'>
<Kodi color="#ffffff" size={48} /> <Kodi color='#ffffff' size={48} />
<span className="margin-top--sm">Kodi</span> <span className='margin-top--sm'>Kodi</span>
</div> </div>
<div className="display--flex flex-direction--column align-items--center client-icon-block margin-top--md"> <div className='display--flex flex-direction--column align-items--center client-icon-block margin-top--md'>
<Amazon color="#ffffff" size={48} /> <Amazon color='#ffffff' size={48} />
<span className="margin-top--sm">Amazon</span> <span className='margin-top--sm'>Amazon</span>
</div> </div>
<div className="display--flex flex-direction--column align-items--center client-icon-block margin-top--md"> <div className='display--flex flex-direction--column align-items--center client-icon-block margin-top--md'>
<Plus /> <Plus />
<span className="margin-top--sm">And more</span> <span className='margin-top--sm'>And more</span>
</div> </div>
</div> </div>
</div> </div>

120
src/pages/contact.tsx
View File

@ -23,148 +23,144 @@ import styles from './contact.module.css';
export default function Contact() { export default function Contact() {
return ( return (
<Layout> <Layout>
<div className="container margin-bottom--lg"> <div className='container margin-bottom--lg'>
<h1>Contact</h1> <h1>Contact</h1>
<h2>Chat</h2> <h2>Chat</h2>
<div className="row"> <div className='row'>
<div className="col col--12"> <div className='col col--12'>
<p> <p>
The Jellyfin team and community are active on several messaging The Jellyfin team and community are active on several messaging platforms.
platforms.
<br /> <br />
While Element is our main avenue of communication, it is bridged While Element is our main avenue of communication, it is bridged to Discord and Libera Chat for
to Discord and Libera Chat for convenience. convenience.
</p> </p>
<div className={styles['contact-grid']}> <div className={styles['contact-grid']}>
<a <a
className={`${styles.element} ${styles['contact-card']} display--flex padding--md shadow--md`} className={`${styles.element} ${styles['contact-card']} display--flex padding--md shadow--md`}
href="https://matrix.to/#/#jellyfin:matrix.org" href='https://matrix.to/#/#jellyfin:matrix.org'
> >
<Element className="margin--md" size={48} /> <Element className='margin--md' size={48} />
<div className="display--flex flex-direction--column row-justify--center"> <div className='display--flex flex-direction--column row-justify--center'>
<h2 className="margin-bottom--none">Element</h2> <h2 className='margin-bottom--none'>Element</h2>
<span>#jellyfin:matrix.org</span> <span>#jellyfin:matrix.org</span>
</div> </div>
</a> </a>
<a <a
className={`${styles.discord} ${styles['contact-card']} display--flex padding--md shadow--md`} className={`${styles.discord} ${styles['contact-card']} display--flex padding--md shadow--md`}
href="https://discord.gg/zHBxVSXdBV" href='https://discord.gg/zHBxVSXdBV'
> >
<Discord className="margin--md" size={48} /> <Discord className='margin--md' size={48} />
<div className="display--flex flex-direction--column row-justify--center"> <div className='display--flex flex-direction--column row-justify--center'>
<h2 className="margin-bottom--none">Discord</h2> <h2 className='margin-bottom--none'>Discord</h2>
<span>discord.gg/zHBxVSXdBV</span> <span>discord.gg/zHBxVSXdBV</span>
</div> </div>
</a> </a>
<a <a
className={`${styles.libera} ${styles['contact-card']} display--flex padding--md shadow--md`} className={`${styles.libera} ${styles['contact-card']} display--flex padding--md shadow--md`}
href="ircs://irc.libera.chat:6697/#jellyfin" href='ircs://irc.libera.chat:6697/#jellyfin'
> >
<span className={`${styles['libera-icon']} margin--md`}>#</span> <span className={`${styles['libera-icon']} margin--md`}>#</span>
<div className="display--flex flex-direction--column row-justify--center"> <div className='display--flex flex-direction--column row-justify--center'>
<h2 className="margin-bottom--none">Libera Chat</h2> <h2 className='margin-bottom--none'>Libera Chat</h2>
<span>#jellyfin</span> <span>#jellyfin</span>
</div> </div>
</a> </a>
<a <a
className={`${styles.telegram} ${styles['contact-card']} display--flex padding--md shadow--md`} className={`${styles.telegram} ${styles['contact-card']} display--flex padding--md shadow--md`}
href="https://t.me/jellyfinchat" href='https://t.me/jellyfinchat'
> >
<Telegram className="margin--md" size={48} /> <Telegram className='margin--md' size={48} />
<div className="display--flex flex-direction--column row-justify--center"> <div className='display--flex flex-direction--column row-justify--center'>
<h2 className="margin-bottom--none">Telegram</h2> <h2 className='margin-bottom--none'>Telegram</h2>
<span>@JellyfinChat</span> <span>@JellyfinChat</span>
</div> </div>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<h2 className="margin-top--md">Social</h2> <h2 className='margin-top--md'>Social</h2>
<div className="row"> <div className='row'>
<div className="col col--12"> <div className='col col--12'>
<p> <p>
If you want to follow Jellyfin news and engage the community, we If you want to follow Jellyfin news and engage the community, we are active on several social media
are active on several social media platforms. platforms.
</p> </p>
<div className={styles['contact-grid']}> <div className={styles['contact-grid']}>
<a <a
className={`${styles.reddit} ${styles['contact-card']} display--flex padding--md shadow--md`} className={`${styles.reddit} ${styles['contact-card']} display--flex padding--md shadow--md`}
href="https://www.reddit.com/r/jellyfin" href='https://www.reddit.com/r/jellyfin'
> >
<Reddit className="margin--md" size={48} /> <Reddit className='margin--md' size={48} />
<div className="display--flex flex-direction--column row-justify--center"> <div className='display--flex flex-direction--column row-justify--center'>
<h2 className="margin-bottom--none">Reddit</h2> <h2 className='margin-bottom--none'>Reddit</h2>
<span>/r/jellyfin</span> <span>/r/jellyfin</span>
</div> </div>
</a> </a>
<a <a
className={`${styles.twitter} ${styles['contact-card']} display--flex padding--md shadow--md`} className={`${styles.twitter} ${styles['contact-card']} display--flex padding--md shadow--md`}
href="https://www.twitter.com/jellyfin" href='https://www.twitter.com/jellyfin'
> >
<Twitter className="margin--md" size={48} /> <Twitter className='margin--md' size={48} />
<div className="display--flex flex-direction--column row-justify--center"> <div className='display--flex flex-direction--column row-justify--center'>
<h2 className="margin-bottom--none">Twitter</h2> <h2 className='margin-bottom--none'>Twitter</h2>
<span>@Jellyfin</span> <span>@Jellyfin</span>
</div> </div>
</a> </a>
<a <a
className={`${styles.facebook} ${styles['contact-card']} display--flex padding--md shadow--md`} className={`${styles.facebook} ${styles['contact-card']} display--flex padding--md shadow--md`}
href="https://www.facebook.com/jellyfin.media/" href='https://www.facebook.com/jellyfin.media/'
> >
<Facebook className="margin--md" size={48} /> <Facebook className='margin--md' size={48} />
<div className="display--flex flex-direction--column row-justify--center"> <div className='display--flex flex-direction--column row-justify--center'>
<h2 className="margin-bottom--none">Facebook</h2> <h2 className='margin-bottom--none'>Facebook</h2>
<span>jellyfin.media</span> <span>jellyfin.media</span>
</div> </div>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<h2 className="margin-top--md">Other</h2> <h2 className='margin-top--md'>Other</h2>
<div className="row"> <div className='row'>
<div className="col col--12"> <div className='col col--12'>
<p> <p>The following platforms allow you to contribute to, and to support, Jellyfin.</p>
The following platforms allow you to contribute to, and to
support, Jellyfin.
</p>
<div className={styles['contact-grid']}> <div className={styles['contact-grid']}>
<a <a
className={`${styles.github} ${styles['contact-card']} display--flex padding--md shadow--md`} className={`${styles.github} ${styles['contact-card']} display--flex padding--md shadow--md`}
href="https://github.com/jellyfin" href='https://github.com/jellyfin'
> >
<Github className="margin--md" size={48} /> <Github className='margin--md' size={48} />
<div className="display--flex flex-direction--column row-justify--center"> <div className='display--flex flex-direction--column row-justify--center'>
<h2 className="margin-bottom--none">GitHub</h2> <h2 className='margin-bottom--none'>GitHub</h2>
<span>Jellyfin</span> <span>Jellyfin</span>
</div> </div>
</a> </a>
<a <a
className={`${styles.weblate} ${styles['contact-card']} display--flex padding--md shadow--md`} className={`${styles.weblate} ${styles['contact-card']} display--flex padding--md shadow--md`}
href="https://translate.jellyfin.org/" href='https://translate.jellyfin.org/'
> >
<Weblate className="margin--md" size={48} /> <Weblate className='margin--md' size={48} />
<div className="display--flex flex-direction--column row-justify--center"> <div className='display--flex flex-direction--column row-justify--center'>
<h2 className="margin-bottom--none">Weblate</h2> <h2 className='margin-bottom--none'>Weblate</h2>
<span>Translate</span> <span>Translate</span>
</div> </div>
</a> </a>
<a <a
className={`${styles.jellyfin} ${styles['contact-card']} display--flex padding--md shadow--md`} className={`${styles.jellyfin} ${styles['contact-card']} display--flex padding--md shadow--md`}
href="https://features.jellyfin.org/" href='https://features.jellyfin.org/'
> >
<Jellyfin className="margin--md" size={48} /> <Jellyfin className='margin--md' size={48} />
<div className="display--flex flex-direction--column row-justify--center"> <div className='display--flex flex-direction--column row-justify--center'>
<h2 className="margin-bottom--none">Fider</h2> <h2 className='margin-bottom--none'>Fider</h2>
<span>Request features</span> <span>Request features</span>
</div> </div>
</a> </a>
<a <a
className={`${styles['open-collective']} ${styles['contact-card']} display--flex padding--md shadow--md`} className={`${styles['open-collective']} ${styles['contact-card']} display--flex padding--md shadow--md`}
href="https://features.jellyfin.org/" href='https://features.jellyfin.org/'
> >
<Opencollective className="margin--md" size={48} /> <Opencollective className='margin--md' size={48} />
<div className="display--flex flex-direction--column row-justify--center"> <div className='display--flex flex-direction--column row-justify--center'>
<h2 className="margin-bottom--none">Open Collective</h2> <h2 className='margin-bottom--none'>Open Collective</h2>
<span>Help finance infrastructure</span> <span>Help finance infrastructure</span>
</div> </div>
</a> </a>

24
src/pages/contribute.tsx
View File

@ -8,26 +8,21 @@ export default function Contribute() {
<Layout title='How to Contribute'> <Layout title='How to Contribute'>
<Hero title='How to Contribute'> <Hero title='How to Contribute'>
<p className='hero__text'> <p className='hero__text'>
Jellyfin is a community project run by volunteers. Jellyfin is a community project run by volunteers. We&apos;re always looking for additional help.
We&apos;re always looking for additional help.
</p> </p>
</Hero> </Hero>
<main className='margin-vert--lg text--center'> <main className='margin-vert--lg text--center'>
<section className='container margin-bottom--lg'> <section className='container margin-bottom--lg'>
<p> <p>
If you&apos;re interesting in helping the Jellyfin project, there are a few different ways to If you&apos;re interesting in helping the Jellyfin project, there are a few different ways to contribute
contribute depending on your skills and availability. depending on your skills and availability. Of course, simply using Jellyfin, finding issues, and reporting
Of course, simply using Jellyfin, finding issues, and reporting them, are a major help to our them, are a major help to our project, even if none of these apply to you!
project, even if none of these apply to you!
</p> </p>
<p> <p>
Before contributing, please read over Before contributing, please read over our{' '}
our <a href='https://jellyfin.org/docs/general/community-standards.html'> <a href='https://jellyfin.org/docs/general/community-standards.html'>Community&nbsp;Standards</a> and&nbsp;
Community&nbsp;Standards <a href='https://jellyfin.org/docs/general/contributing/index.html'>Contributing&nbsp;Guide</a>.
</a> and&nbsp;<a href='https://jellyfin.org/docs/general/contributing/index.html'>
Contributing&nbsp;Guide
</a>.
</p> </p>
</section> </section>
@ -36,10 +31,7 @@ export default function Contribute() {
</section> </section>
<h2>Meet the people that bring you Jellyfin</h2> <h2>Meet the people that bring you Jellyfin</h2>
<div <div className='margin-bottom--lg' style={{ overflow: 'auto' }}>
className='margin-bottom--lg'
style={{ overflow: 'auto' }}
>
<object <object
data='https://opencollective.com/jellyfin/contributors.svg?width=1000&button=false' data='https://opencollective.com/jellyfin/contributors.svg?width=1000&button=false'
type='image/svg+xml' type='image/svg+xml'

156
src/pages/downloads.tsx
View File

@ -48,37 +48,32 @@ export default function Downloads() {
return ( return (
<Layout title='Downloads'> <Layout title='Downloads'>
<Hero title='Downloads'> <Hero title='Downloads'>
<p className='hero__text'> <p className='hero__text'>You can download the latest releases of Jellyfin Server below!</p>
You can download the latest releases of Jellyfin Server below!
</p>
</Hero> </Hero>
<main className='margin-vert--lg'> <main className='margin-vert--lg'>
<section className='container'> <section className='container'>
<h2>Stable or Unstable?</h2> <h2>Stable or Unstable?</h2>
<p> <p>
Generally, if you&apos;re a new user or value stability use the stable version. Generally, if you&apos;re a new user or value stability use the stable version. It won&apos;t change very
It won&apos;t change very often. often. If you want to help test the latest improvements and features and can handle some occasional
If you want to help test the latest improvements and features and can handle some occasional breakage, use breakage, use the unstable version. Always back up your existing configuration before testing unstable
the unstable version. releases.
Always back up your existing configuration before testing unstable releases.
</p> </p>
<h3> <h3>
Docker Docker
<span className="badge badge--success margin-left--sm">Official</span> <span className='badge badge--success margin-left--sm'>Official</span>
</h3> </h3>
<p> <p>
Run Jellyfin in Docker. Run Jellyfin in Docker. Example commands store data in <code>/srv/jellyfin</code> and assume your media is
Example commands store data in <code>/srv/jellyfin</code> and assume your media is stored stored under <code>/media</code>.
under <code>/media</code>.
</p> </p>
<p> <p>
<button <button
className={clsx( className={clsx('button button--primary margin-right--md margin-bottom--md', {
'button button--primary margin-right--md margin-bottom--md', 'button--active': installOption === InstallOption.DockerStable
{ 'button--active': installOption === InstallOption.DockerStable } })}
)}
onClick={() => { onClick={() => {
setInstallOption(InstallOption.DockerStable); setInstallOption(InstallOption.DockerStable);
}} }}
@ -86,10 +81,9 @@ export default function Downloads() {
Stable Stable
</button> </button>
<button <button
className={clsx( className={clsx('button button--secondary margin-right--md margin-bottom--md', {
'button button--secondary margin-right--md margin-bottom--md', 'button--active': installOption === InstallOption.DockerUnstable
{ 'button--active': installOption === InstallOption.DockerUnstable } })}
)}
onClick={() => { onClick={() => {
setInstallOption(InstallOption.DockerUnstable); setInstallOption(InstallOption.DockerUnstable);
}} }}
@ -103,24 +97,27 @@ export default function Downloads() {
Docker Hub Docker Hub
</a> </a>
{installOption === InstallOption.DockerStable && ( {installOption === InstallOption.DockerStable && (
<pre><code>{InstallInstructions.Docker.Stable}</code></pre> <pre>
<code>{InstallInstructions.Docker.Stable}</code>
</pre>
)} )}
{installOption === InstallOption.DockerUnstable && ( {installOption === InstallOption.DockerUnstable && (
<pre><code>{InstallInstructions.Docker.Unstable}</code></pre> <pre>
<code>{InstallInstructions.Docker.Unstable}</code>
</pre>
)} )}
</p> </p>
<h3> <h3>
Debian and Ubuntu Debian and Ubuntu
<span className="badge badge--success margin-left--sm">Official</span> <span className='badge badge--success margin-left--sm'>Official</span>
</h3> </h3>
<p>Install Jellyfin via our Apt repository or via manual archives (.deb).</p> <p>Install Jellyfin via our Apt repository or via manual archives (.deb).</p>
<p> <p>
<button <button
className={clsx( className={clsx('button button--primary margin-right--md margin-bottom--md', {
'button button--primary margin-right--md margin-bottom--md', 'button--active': installOption === InstallOption.DebianStable
{ 'button--active': installOption === InstallOption.DebianStable } })}
)}
onClick={() => { onClick={() => {
setInstallOption(InstallOption.DebianStable); setInstallOption(InstallOption.DebianStable);
}} }}
@ -128,10 +125,9 @@ export default function Downloads() {
Stable Stable
</button> </button>
<button <button
className={clsx( className={clsx('button button--secondary margin-right--md margin-bottom--md', {
'button button--secondary margin-right--md margin-bottom--md', 'button--active': installOption === InstallOption.DebianUnstable
{ 'button--active': installOption === InstallOption.DebianUnstable } })}
)}
onClick={() => { onClick={() => {
setInstallOption(InstallOption.DebianUnstable); setInstallOption(InstallOption.DebianUnstable);
}} }}
@ -151,24 +147,27 @@ export default function Downloads() {
All Ubuntu Versions All Ubuntu Versions
</a> </a>
{installOption === InstallOption.DebianStable && ( {installOption === InstallOption.DebianStable && (
<pre><code>{InstallInstructions.Debian.Stable}</code></pre> <pre>
<code>{InstallInstructions.Debian.Stable}</code>
</pre>
)} )}
{installOption === InstallOption.DebianUnstable && ( {installOption === InstallOption.DebianUnstable && (
<pre><code>{InstallInstructions.Debian.Unstable}</code></pre> <pre>
<code>{InstallInstructions.Debian.Unstable}</code>
</pre>
)} )}
</p> </p>
<h3> <h3>
Arch Linux Arch Linux
<span className="badge badge--info margin-left--sm">Community</span> <span className='badge badge--info margin-left--sm'>Community</span>
</h3> </h3>
<p>Install Jellyfin via the Arch User Repository.</p> <p>Install Jellyfin via the Arch User Repository.</p>
<p> <p>
<button <button
className={clsx( className={clsx('button button--primary margin-right--md margin-bottom--md', {
'button button--primary margin-right--md margin-bottom--md', 'button--active': installOption === InstallOption.ArchStable
{ 'button--active': installOption === InstallOption.ArchStable } })}
)}
onClick={() => { onClick={() => {
setInstallOption(InstallOption.ArchStable); setInstallOption(InstallOption.ArchStable);
}} }}
@ -176,10 +175,9 @@ export default function Downloads() {
Stable Stable
</button> </button>
<button <button
className={clsx( className={clsx('button button--secondary margin-right--md margin-bottom--md', {
'button button--secondary margin-right--md margin-bottom--md', 'button--active': installOption === InstallOption.ArchUnstable
{ 'button--active': installOption === InstallOption.ArchUnstable } })}
)}
onClick={() => { onClick={() => {
setInstallOption(InstallOption.ArchUnstable); setInstallOption(InstallOption.ArchUnstable);
}} }}
@ -193,66 +191,62 @@ export default function Downloads() {
AUR AUR
</a> </a>
{installOption === InstallOption.ArchStable && ( {installOption === InstallOption.ArchStable && (
<pre><code>{InstallInstructions.Arch.Stable}</code></pre> <pre>
<code>{InstallInstructions.Arch.Stable}</code>
</pre>
)} )}
{installOption === InstallOption.ArchUnstable && ( {installOption === InstallOption.ArchUnstable && (
<pre><code>{InstallInstructions.Arch.Unstable}</code></pre> <pre>
<code>{InstallInstructions.Arch.Unstable}</code>
</pre>
)} )}
</p> </p>
{installOption === InstallOption.ArchStable && ( {installOption === InstallOption.ArchStable && (
<> <>
<p> <p>
<b>Note:</b> The third command should give you output similar <b>Note:</b> The third command should give you output similar to{' '}
to <code>deb [arch=(architecture)] https://repo.jellyfin.org/(distribution) (release) main</code>. <code>deb [arch=(architecture)] https://repo.jellyfin.org/(distribution) (release) main</code>. We
We support <code>amd64</code>, <code>armhf</code>, and <code>arm64</code> for support <code>amd64</code>, <code>armhf</code>, and <code>arm64</code> for architectures,{' '}
architectures, <code>debian</code> and <code>ubuntu</code> for <code>debian</code> and <code>ubuntu</code> for distributions, <code>buster</code> and{' '}
distributions, <code>buster</code> and <code>bullseye</code> for Debian releases <code>bullseye</code> for Debian releases and <code>bionic</code>, <code>focal</code>,{' '}
and <code>bionic</code>, <code>focal</code>, <code>impish</code> and <code>jammy</code> for Ubuntu <code>impish</code> and <code>jammy</code> for Ubuntu releases. If you see something different in your
releases. output, you might need to manually modify it. Use the closest equivalent Debian or Ubuntu version
If you see something different in your output, you might need to manually modify it. instead.
Use the closest equivalent Debian or Ubuntu version instead.
</p> </p>
<p> <p>
Once installed, Jellyfin will be running as a service. Once installed, Jellyfin will be running as a service. Manage it with{' '}
Manage it with <code>{ <code>{'sudo systemctl {action} jellyfin.service'}</code> or{' '}
'sudo systemctl {action} jellyfin.service' <code>{'sudo service jellyfin {action}'}</code>.
}</code> or <code>{
'sudo service jellyfin {action}'
}</code>.
</p> </p>
</> </>
)} )}
{installOption === InstallOption.ArchUnstable && ( {installOption === InstallOption.ArchUnstable && (
<> <>
<p> <p>
<b>Note:</b> The third command should give you output similar <b>Note:</b> The third command should give you output similar to{' '}
to <code>deb [arch=(architecture)] https://repo.jellyfin.org/(distribution) (release) main</code>. <code>deb [arch=(architecture)] https://repo.jellyfin.org/(distribution) (release) main</code>. We
We support <code>amd64</code>, <code>armhf</code>, and <code>arm64</code> for support <code>amd64</code>, <code>armhf</code>, and <code>arm64</code> for architectures,{' '}
architectures, <code>debian</code> and <code>ubuntu</code> for <code>debian</code> and <code>ubuntu</code> for distributions, <code>buster</code> and{' '}
distributions, <code>buster</code> and <code>bullseye</code> for Debian releases <code>bullseye</code> for Debian releases and <code>bionic</code>, <code>focal</code>,{' '}
and <code>bionic</code>, <code>focal</code>, <code>impish</code> and <code>jammy</code> for Ubuntu <code>impish</code> and <code>jammy</code> for Ubuntu releases. If you see something different in your
releases. output, you might need to manually modify it. Use the closest equivalent Debian or Ubuntu version
If you see something different in your output, you might need to manually modify it. instead.
Use the closest equivalent Debian or Ubuntu version instead.
</p> </p>
<p> <p>
<b>Note:</b> Both the <code>main</code> and <code>unstable</code> are needed as <b>Note:</b> Both the <code>main</code> and <code>unstable</code> are needed as the{' '}
the <code>jellyfin-ffmpeg</code> package is only in the <code>main</code> component. <code>jellyfin-ffmpeg</code> package is only in the <code>main</code> component.
</p> </p>
<p> <p>
Once installed, Jellyfin will be running as a service. Once installed, Jellyfin will be running as a service. Manage it with{' '}
Manage it with <code>{ <code>{'sudo systemctl {action} jellyfin.service'}</code> or{' '}
'sudo systemctl {action} jellyfin.service' <code>{'sudo service jellyfin {action}'}</code>.
}</code> or <code>{
'sudo service jellyfin {action}'
}</code>.
</p> </p>
</> </>
)} )}
<h3> <h3>
Fedora and CentOS Fedora and CentOS
<span className="badge badge--info margin-left--sm">Community</span> <span className='badge badge--info margin-left--sm'>Community</span>
</h3> </h3>
<p>RPM archives for both Fedora and CentOS are provided.</p> <p>RPM archives for both Fedora and CentOS are provided.</p>
<p> <p>
@ -284,7 +278,7 @@ export default function Downloads() {
<h3> <h3>
Generic Linux Generic Linux
<span className="badge badge--success margin-left--sm">Official</span> <span className='badge badge--success margin-left--sm'>Official</span>
</h3> </h3>
<p>Linux self-contained binary TAR archives (.tar.gz) are provided.</p> <p>Linux self-contained binary TAR archives (.tar.gz) are provided.</p>
<p> <p>
@ -310,7 +304,7 @@ export default function Downloads() {
<h3> <h3>
MacOS MacOS
<span className="badge badge--success margin-left--sm">Official</span> <span className='badge badge--success margin-left--sm'>Official</span>
</h3> </h3>
<p>Both installers (.dmg) and manual ZIP archives (.tar.gz) are provided.</p> <p>Both installers (.dmg) and manual ZIP archives (.tar.gz) are provided.</p>
<p> <p>
@ -336,7 +330,7 @@ export default function Downloads() {
<h3> <h3>
Windows Windows
<span className="badge badge--success margin-left--sm">Official</span> <span className='badge badge--success margin-left--sm'>Official</span>
</h3> </h3>
<p>Both installers (.exe) and manual ZIP archives (.zip) are provided.</p> <p>Both installers (.exe) and manual ZIP archives (.zip) are provided.</p>
<p> <p>
@ -366,7 +360,7 @@ export default function Downloads() {
<h3> <h3>
Portable Portable
<span className="badge badge--success margin-left--sm">Official</span> <span className='badge badge--success margin-left--sm'>Official</span>
</h3> </h3>
<p>The portable version can be run on any system with a .NET Core runtime.</p> <p>The portable version can be run on any system with a .NET Core runtime.</p>
<p> <p>

26
src/pages/index.tsx
View File

@ -11,30 +11,20 @@ export default function Home() {
return ( return (
<Layout <Layout
title={`The Free Software Media System`} title={`The Free Software Media System`}
description="The volunteer-built media solution that puts you in control of your media. Stream to any device from your own server, with no strings attached." description='The volunteer-built media solution that puts you in control of your media. Stream to any device from your own server, with no strings attached.'
> >
<Hero title="The Free Software Media System" large> <Hero title='The Free Software Media System' large>
<p className="hero__text"> <p className='hero__text'>
Jellyfin is the volunteer-built media solution that puts{' '} Jellyfin is the volunteer-built media solution that puts <em>you</em> in control of your media. Stream to any
<em>you</em> in control of your media. Stream to any device from device from your own server, with no strings attached. Your media, your server, your way.
your own server, with no strings attached. Your media, your
server, your way.
</p> </p>
<a <a href='https://demo.jellyfin.org/stable' className='button button--secondary button--outline'>
href="https://demo.jellyfin.org/stable"
className="button button--secondary button--outline"
>
See it in Action See it in Action
</a> </a>
<a <a href='/downloads' className='button button button--primary margin-horiz--md'>
href="/downloads"
className="button button button--primary margin-horiz--md"
>
Download Now Download Now
</a> </a>
<button className="button button--secondary button--outline scroll"> <button className='button button--secondary button--outline scroll'>Learn More</button>
Learn More
</button>
</Hero> </Hero>
<main> <main>
<HomepageFeatures /> <HomepageFeatures />

2
tsconfig.json
View File

@ -4,4 +4,4 @@
"compilerOptions": { "compilerOptions": {
"plugins": [{ "name": "typescript-plugin-css-modules" }] "plugins": [{ "name": "typescript-plugin-css-modules" }]
} }
} }