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,
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint",
"jsx-a11y"
],
"plugins": ["react", "@typescript-eslint", "jsx-a11y"],
"rules": {
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": "error"
@ -36,4 +32,4 @@
"version": "detect"
}
}
}
}

2
babel.config.js
View File

@ -1,3 +1,3 @@
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"
}
}

2
docs/configuration/_category_.json
View File

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

2
docs/media/_category_.json
View File

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

2
docs/plugins/_category_.json
View File

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

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

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

2
docs/server/_category_.json
View File

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

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

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

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

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

2
docusaurus.config.js
View File

@ -87,7 +87,7 @@ module.exports = {
{
label: 'Contact',
to: '/contact'
},
}
],
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 = {
// 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
/*

26
src/components/BuiltByVolunteers.tsx
View File

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

16
src/components/CallToAction.tsx
View File

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

374
src/components/ContributorGuide.tsx
View File

@ -41,12 +41,9 @@ export default function ContributorGuide() {
<>
<div>
<button
className={clsx(
'button',
'button--secondary',
'margin-right--md',
{ 'button--active': contributorOption === ContributorOption.Code }
)}
className={clsx('button', 'button--secondary', 'margin-right--md', {
'button--active': contributorOption === ContributorOption.Code
})}
onClick={() => {
setContributorOption(ContributorOption.Code);
setOtherOption(null);
@ -55,12 +52,9 @@ export default function ContributorGuide() {
Code
</button>
<button
className={clsx(
'button',
'button--secondary',
'margin-right--md',
{ 'button--active': contributorOption === ContributorOption.Translations }
)}
className={clsx('button', 'button--secondary', 'margin-right--md', {
'button--active': contributorOption === ContributorOption.Translations
})}
onClick={() => {
setContributorOption(ContributorOption.Translations);
setCodeOption(null);
@ -72,11 +66,9 @@ export default function ContributorGuide() {
Translations
</button>
<button
className={clsx(
'button',
'button--secondary',
{ 'button--active': contributorOption === ContributorOption.Other }
)}
className={clsx('button', 'button--secondary', {
'button--active': contributorOption === ContributorOption.Other
})}
onClick={() => {
setContributorOption(ContributorOption.Other);
setCodeOption(null);
@ -95,13 +87,9 @@ export default function ContributorGuide() {
</div>
<div>
<button
className={clsx(
'button',
'button--secondary',
'margin-right--md',
'margin-top--md',
{ 'button--active': codeOption === CodeOption.CSharp }
)}
className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button--active': codeOption === CodeOption.CSharp
})}
onClick={() => {
if (codeOption !== CodeOption.CSharp) {
setCodeLanguageOption(null);
@ -112,13 +100,9 @@ export default function ContributorGuide() {
C#
</button>
<button
className={clsx(
'button',
'button--secondary',
'margin-right--md',
'margin-top--md',
{ 'button--active': codeOption === CodeOption.JavaScript }
)}
className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button--active': codeOption === CodeOption.JavaScript
})}
onClick={() => {
if (codeOption !== CodeOption.JavaScript) {
setCodeLanguageOption(null);
@ -130,13 +114,9 @@ export default function ContributorGuide() {
JavaScript
</button>
<button
className={clsx(
'button',
'button--secondary',
'margin-right--md',
'margin-top--md',
{ 'button--active': codeOption === CodeOption.Other }
)}
className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button--active': codeOption === CodeOption.Other
})}
onClick={() => {
setCodeOption(CodeOption.Other);
setCodeLanguageOption(null);
@ -150,18 +130,14 @@ export default function ContributorGuide() {
{codeOption === CodeOption.CSharp && (
<>
<div className='margin-top--md'>
The main core of Jellyfin as well as its plugins are written in C#.
You have a couple options to get started.
The main core of Jellyfin as well as its plugins are written in C#. You have a couple options to get
started.
</div>
<div>
<button
className={clsx(
'button',
'button--secondary',
'margin-right--md',
'margin-top--md',
{ 'button--active': codeLanguageOption === CodeLanguageOption.Bug }
)}
className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button--active': codeLanguageOption === CodeLanguageOption.Bug
})}
onClick={() => {
setCodeLanguageOption(CodeLanguageOption.Bug);
setCSharpFeatureOption(null);
@ -170,13 +146,9 @@ export default function ContributorGuide() {
Fix Bugs
</button>
<button
className={clsx(
'button',
'button--secondary',
'margin-right--md',
'margin-top--md',
{ 'button--active': codeLanguageOption === CodeLanguageOption.Feature }
)}
className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button--active': codeLanguageOption === CodeLanguageOption.Feature
})}
onClick={() => {
setCodeLanguageOption(CodeLanguageOption.Feature);
}}
@ -188,28 +160,26 @@ export default function ContributorGuide() {
{codeLanguageOption === CodeLanguageOption.Bug && (
<div className='margin-top--md'>
<p>
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/issues?q=is%3Aissue+is%3Aopen+label%3Abug'>
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/issues?q=is%3Aissue+is%3Aopen+label%3Abug'>
open Bug Issues page
</a> on GitHub, and find one that interests you.
If you find a bug that affects you already, it&apos;s 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.
</a>{' '}
on GitHub, and find one that interests you. If you find a bug that affects you already, it&apos;s 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.
</p>
<p>
Once you&apos;ve found a bug you&apos;d like to fix, head over to
the <a href='https://github.com/jellyfin/jellyfin'>GitHub page</a> for the server and begin
hacking.
Development documentation can be found on the <a href='/docs'>Documentation page</a>.
When the fix is ready, feel free to propose it to other users in the issue to get them to help
test as well.
Once you&apos;ve found a bug you&apos;d like to fix, head over to the{' '}
<a href='https://github.com/jellyfin/jellyfin'>GitHub page</a> for the server and begin hacking.
Development documentation can be found on the <a href='/docs'>Documentation page</a>. 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>
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.
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.
</p>
</div>
)}
@ -222,26 +192,22 @@ export default function ContributorGuide() {
complexity and scope of the feature.
</p>
<p>
First, check out our <a href='https://features.jellyfin.org'>Feature Requests tracker</a> 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.
First, check out our <a href='https://features.jellyfin.org'>Feature Requests tracker</a> 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.
</p>
<p className='margin--none'>
Most well-requested features will have a tag; as a C# developer, those tagged
as <b>&ldquo;Server&rdquo;</b> or <b>&ldquo;Plugin&rdquo;</b> are of the most interest to you.
Select the option below based on the tag on the feature.
Most well-requested features will have a tag; as a C# developer, those tagged as{' '}
<b>&ldquo;Server&rdquo;</b> or <b>&ldquo;Plugin&rdquo;</b> are of the most interest to you. Select
the option below based on the tag on the feature.
</p>
</div>
<div>
<button
className={clsx(
'button',
'button--secondary',
'margin-right--md',
'margin-top--md',
{ 'button--active': cSharpFeatureOption === CSharpFeatureOption.Server }
)}
className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button--active': cSharpFeatureOption === CSharpFeatureOption.Server
})}
onClick={() => {
setCSharpFeatureOption(CSharpFeatureOption.Server);
}}
@ -249,13 +215,9 @@ export default function ContributorGuide() {
Server
</button>
<button
className={clsx(
'button',
'button--secondary',
'margin-right--md',
'margin-top--md',
{ 'button--active': cSharpFeatureOption === CSharpFeatureOption.Plugin }
)}
className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button--active': cSharpFeatureOption === CSharpFeatureOption.Plugin
})}
onClick={() => {
setCSharpFeatureOption(CSharpFeatureOption.Plugin);
}}
@ -267,18 +229,16 @@ export default function ContributorGuide() {
{cSharpFeatureOption === CSharpFeatureOption.Server && (
<div className='margin-top--md'>
<p>
Features of this type should be implemented directly into the core server itself.
Once you&apos;ve found a feature you want to implement, head over to
the <a href='https://github.com/jellyfin/jellyfin'>GitHub page</a> for the server and begin
hacking.
Features of this type should be implemented directly into the core server itself. Once
you&apos;ve found a feature you want to implement, head over to the{' '}
<a href='https://github.com/jellyfin/jellyfin'>GitHub page</a> for the server and begin hacking.
Development documentation can be found on the <a href='/docs'>Documentation page</a>.
</p>
<p>
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.
(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.
</p>
</div>
)}
@ -286,31 +246,25 @@ export default function ContributorGuide() {
{cSharpFeatureOption === CSharpFeatureOption.Plugin && (
<div className='margin-top--md'>
<p>
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.
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.
</p>
<p>
Once you&apos;ve found a feature you want to implement with a plugin, check out
the <a href='https://github.com/jellyfin/jellyfin-plugin-template'>
Plugin Template repository
</a> and clone this repository into a new project.
Official plugins are named &ldquo;jellyfin-plugin-mycoolname&rdquo;.
You can use this template to get you started on writing the plugin.
You may also want to consult the <a href='/docs/plugin-api/index.html'>
Jellyfin API documentation
</a> to help learn the interfaces available.
Once you&apos;ve found a feature you want to implement with a plugin, check out the{' '}
<a href='https://github.com/jellyfin/jellyfin-plugin-template'>Plugin Template repository</a>{' '}
and clone this repository into a new project. Official plugins are named
&ldquo;jellyfin-plugin-mycoolname&rdquo;. You can use this template to get you started on
writing the plugin. You may also want to consult the{' '}
<a href='/docs/plugin-api/index.html'>Jellyfin API documentation</a> to help learn the
interfaces available.
</p>
<p>
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'>
contact the team on Matrix
</a>.
If your plugin passes our evaluation, we will add it to the official plugin catalogue, and can
GitHub and <a href='https://matrix.to/#/#jellyfin-dev:matrix.org'>contact the team on Matrix</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.
</p>
</div>
@ -323,18 +277,14 @@ export default function ContributorGuide() {
{codeOption === CodeOption.JavaScript && (
<>
<div className='margin-top--md'>
The primary Jellyfin web client is written primarily in Javascript.
You have a couple options to get started.
The primary Jellyfin web client is written primarily in Javascript. You have a couple options to get
started.
</div>
<div>
<button
className={clsx(
'button',
'button--secondary',
'margin-right--md',
'margin-top--md',
{ 'button--active': codeLanguageOption === CodeLanguageOption.Bug }
)}
className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button--active': codeLanguageOption === CodeLanguageOption.Bug
})}
onClick={() => {
setCodeLanguageOption(CodeLanguageOption.Bug);
}}
@ -342,13 +292,9 @@ export default function ContributorGuide() {
Fix Bugs
</button>
<button
className={clsx(
'button',
'button--secondary',
'margin-right--md',
'margin-top--md',
{ 'button--active': codeLanguageOption === CodeLanguageOption.Feature }
)}
className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button--active': codeLanguageOption === CodeLanguageOption.Feature
})}
onClick={() => {
setCodeLanguageOption(CodeLanguageOption.Feature);
}}
@ -356,13 +302,9 @@ export default function ContributorGuide() {
Implement a Feature
</button>
<button
className={clsx(
'button',
'button--secondary',
'margin-right--md',
'margin-top--md',
{ 'button--active': codeLanguageOption === CodeLanguageOption.Modernize }
)}
className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button--active': codeLanguageOption === CodeLanguageOption.Modernize
})}
onClick={() => {
setCodeLanguageOption(CodeLanguageOption.Modernize);
}}
@ -375,25 +317,26 @@ export default function ContributorGuide() {
<div className='margin-top--md'>
<p>
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
</a> on GitHub, and find one that interests you.
If you find a bug that affects you already, it&apos;s 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.
</a>{' '}
on GitHub, and find one that interests you. If you find a bug that affects you already, it&apos;s 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.
</p>
<p>
Once you&apos;ve found a bug you&apos;d like to fix, head over to
the <a href='https://github.com/jellyfin/jellyfin-web'>GitHub page</a> for the web client and begin
hacking.
Development documentation can be found on the <a href='/docs'>Documentation page</a>.
When the fix is ready, feel free to propose it to other users in the issue to get them to help test
as well.
Once you&apos;ve found a bug you&apos;d like to fix, head over to the{' '}
<a href='https://github.com/jellyfin/jellyfin-web'>GitHub page</a> for the web client and begin
hacking. Development documentation can be found on the <a href='/docs'>Documentation page</a>. 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>
You should always develop bugfixes on a dedicated Git branch within your own Fork of
Jellyfin&apos;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.
You should always develop bugfixes on a dedicated Git branch within your own Fork of Jellyfin&apos;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.
</p>
</div>
)}
@ -402,35 +345,32 @@ export default function ContributorGuide() {
<div className='margin-top--md'>
<p>
First, check out our <a href='https://features.jellyfin.org'>Feature Requests tracker</a> 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.
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.
</p>
<p>
Most well-requested features will have a tag; as a Javascript developer, those tagged
as <b>&ldquo;Web UI&rdquo;</b> are of the most interest to you.
Most well-requested features will have a tag; as a Javascript developer, those tagged as{' '}
<b>&ldquo;Web UI&rdquo;</b> are of the most interest to you.
</p>
<p>
Once you&apos;ve found a feature you&apos;d like to implement, head over to
the <a href='https://github.com/jellyfin/jellyfin'>GitHub page</a> for the server and begin
hacking.
Once you&apos;ve found a feature you&apos;d like to implement, head over to the{' '}
<a href='https://github.com/jellyfin/jellyfin'>GitHub page</a> for the server and begin hacking.
Development documentation can be found on the <a href='/docs'>Documentation page</a>.
</p>
<p>
You should always develop features on a dedicated Git branch within your own Fork of
Jellyfin&apos;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.
You should always develop features on a dedicated Git branch within your own Fork of Jellyfin&apos;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.
</p>
</div>
)}
{codeLanguageOption === CodeLanguageOption.Modernize && (
<div className='margin-top--md'>
Jellyfin&apos;s web client is being rewritten.
We&apos;re currently converting it to TypeScript and React.
Head over to the <a href='https://github.com/jellyfin/jellyfin-web/'>project page</a> on GitHub for
more information.
Jellyfin&apos;s web client is being rewritten. We&apos;re currently converting it to TypeScript and
React. Head over to the <a href='https://github.com/jellyfin/jellyfin-web/'>project page</a> on GitHub
for more information.
</div>
)}
</>
@ -439,21 +379,18 @@ export default function ContributorGuide() {
{codeOption === CodeOption.Other && (
<div className='margin-top--md'>
<p>
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.
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.
</p>
<ul>
<li>
<b>Kotlin/Java:</b> The <a
href='https://github.com/jellyfin/jellyfin-androidtv'
>Android TV</a> and <a
href='https://github.com/jellyfin/jellyfin-android'
>Android</a> apps are written in Kotlin and Java for some legacy code.
<b>Kotlin/Java:</b> The <a href='https://github.com/jellyfin/jellyfin-androidtv'>Android TV</a> and{' '}
<a href='https://github.com/jellyfin/jellyfin-android'>Android</a> apps are written in Kotlin and Java
for some legacy code.
</li>
<li>
<b>Python:</b> The <a
href='https://github.com/jellyfin/jellyfin-kodi'
>Kodi</a> client is written in Python.
<b>Python:</b> The <a href='https://github.com/jellyfin/jellyfin-kodi'>Kodi</a> client is written in
Python.
</li>
<li>
<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 && (
<div className='margin-top--md'>
Check our our <a href='https://translate.jellyfin.org/'>Weblate instance</a> and start helping to translate
strings to other languages!
Logging in will require a <a href='https://github.com'>GitHub</a> account.
strings to other languages! Logging in will require a <a href='https://github.com'>GitHub</a> account.
</div>
)}
@ -485,13 +421,9 @@ export default function ContributorGuide() {
</div>
<div>
<button
className={clsx(
'button',
'button--secondary',
'margin-right--md',
'margin-top--md',
{ 'button--active': otherOption === OtherOption.Documentation }
)}
className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button--active': otherOption === OtherOption.Documentation
})}
onClick={() => {
setOtherOption(OtherOption.Documentation);
}}
@ -499,13 +431,9 @@ export default function ContributorGuide() {
Write Documentation
</button>
<button
className={clsx(
'button',
'button--secondary',
'margin-right--md',
'margin-top--md',
{ 'button--active': otherOption === OtherOption.Troubleshoot }
)}
className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button--active': otherOption === OtherOption.Troubleshoot
})}
onClick={() => {
setOtherOption(OtherOption.Troubleshoot);
}}
@ -513,13 +441,9 @@ export default function ContributorGuide() {
Help People Troubleshoot
</button>
<button
className={clsx(
'button',
'button--secondary',
'margin-right--md',
'margin-top--md',
{ 'button--active': otherOption === OtherOption.Donation }
)}
className={clsx('button', 'button--secondary', 'margin-right--md', 'margin-top--md', {
'button--active': otherOption === OtherOption.Donation
})}
onClick={() => {
setOtherOption(OtherOption.Donation);
}}
@ -530,42 +454,36 @@ export default function ContributorGuide() {
{otherOption === OtherOption.Documentation && (
<div className='margin-top--md'>
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 <a href='https://github.com/jellyfin/jellyfin-docs'>our Documentation Repository</a>,
visible <a href='/docs'>here</a>.
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{' '}
<a href='https://github.com/jellyfin/jellyfin-docs'>our Documentation Repository</a>, visible{' '}
<a href='/docs'>here</a>.
</div>
)}
{otherOption === OtherOption.Troubleshoot && (
<div className='margin-top--md'>
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&apos;s operation, we welcome you to try to help
troubleshoot problems your fellow users are having.
Troubleshooting generally occurs in our <a href='https://matrix.to/#/#jellyfin:matrix.org'>
main
</a> and <a href='https://matrix.to/#/#jellyfin-troubleshooting:matrix.org'>
troubleshooting
</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!
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&apos;s operation, we welcome you to try to help troubleshoot
problems your fellow users are having. Troubleshooting generally occurs in our{' '}
<a href='https://matrix.to/#/#jellyfin:matrix.org'>main</a> and{' '}
<a href='https://matrix.to/#/#jellyfin-troubleshooting:matrix.org'>troubleshooting</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>
)}
{otherOption === OtherOption.Donation && (
<div className='margin-top--md'>
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.
We do not wish, support, nor intend donations to privilege any user&apos;s voice or priorities.
That said, if you do want to help us cover some operating expenses like our VPS hosting, domains,
developer licences, metadata API keys, and other incidental expenses, check out
our <a href='https://opencollective.com/jellyfin'>OpenCollective page</a> to donate.
Our entire budget as well as all expenses are publicly visible there.
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&apos;s voice or priorities. That said, if you do want to help
us cover some operating expenses like our VPS hosting, domains, developer licences, metadata API keys, and
other incidental expenses, check out our{' '}
<a href='https://opencollective.com/jellyfin'>OpenCollective page</a> to donate. Our entire budget as well
as all expenses are publicly visible there.
</div>
)}
</>

21
src/components/FreeSoftware.tsx
View File

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

14
src/components/Hero.tsx
View File

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

49
src/components/HomepageFeatures.tsx
View File

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

65
src/components/MoreClients.tsx
View File

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

120
src/pages/contact.tsx
View File

@ -23,148 +23,144 @@ import styles from './contact.module.css';
export default function Contact() {
return (
<Layout>
<div className="container margin-bottom--lg">
<div className='container margin-bottom--lg'>
<h1>Contact</h1>
<h2>Chat</h2>
<div className="row">
<div className="col col--12">
<div className='row'>
<div className='col col--12'>
<p>
The Jellyfin team and community are active on several messaging
platforms.
The Jellyfin team and community are active on several messaging platforms.
<br />
While Element is our main avenue of communication, it is bridged
to Discord and Libera Chat for convenience.
While Element is our main avenue of communication, it is bridged to Discord and Libera Chat for
convenience.
</p>
<div className={styles['contact-grid']}>
<a
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} />
<div className="display--flex flex-direction--column row-justify--center">
<h2 className="margin-bottom--none">Element</h2>
<Element className='margin--md' size={48} />
<div className='display--flex flex-direction--column row-justify--center'>
<h2 className='margin-bottom--none'>Element</h2>
<span>#jellyfin:matrix.org</span>
</div>
</a>
<a
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} />
<div className="display--flex flex-direction--column row-justify--center">
<h2 className="margin-bottom--none">Discord</h2>
<Discord className='margin--md' size={48} />
<div className='display--flex flex-direction--column row-justify--center'>
<h2 className='margin-bottom--none'>Discord</h2>
<span>discord.gg/zHBxVSXdBV</span>
</div>
</a>
<a
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>
<div className="display--flex flex-direction--column row-justify--center">
<h2 className="margin-bottom--none">Libera Chat</h2>
<div className='display--flex flex-direction--column row-justify--center'>
<h2 className='margin-bottom--none'>Libera Chat</h2>
<span>#jellyfin</span>
</div>
</a>
<a
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} />
<div className="display--flex flex-direction--column row-justify--center">
<h2 className="margin-bottom--none">Telegram</h2>
<Telegram className='margin--md' size={48} />
<div className='display--flex flex-direction--column row-justify--center'>
<h2 className='margin-bottom--none'>Telegram</h2>
<span>@JellyfinChat</span>
</div>
</a>
</div>
</div>
</div>
<h2 className="margin-top--md">Social</h2>
<div className="row">
<div className="col col--12">
<h2 className='margin-top--md'>Social</h2>
<div className='row'>
<div className='col col--12'>
<p>
If you want to follow Jellyfin news and engage the community, we
are active on several social media platforms.
If you want to follow Jellyfin news and engage the community, we are active on several social media
platforms.
</p>
<div className={styles['contact-grid']}>
<a
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} />
<div className="display--flex flex-direction--column row-justify--center">
<h2 className="margin-bottom--none">Reddit</h2>
<Reddit className='margin--md' size={48} />
<div className='display--flex flex-direction--column row-justify--center'>
<h2 className='margin-bottom--none'>Reddit</h2>
<span>/r/jellyfin</span>
</div>
</a>
<a
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} />
<div className="display--flex flex-direction--column row-justify--center">
<h2 className="margin-bottom--none">Twitter</h2>
<Twitter className='margin--md' size={48} />
<div className='display--flex flex-direction--column row-justify--center'>
<h2 className='margin-bottom--none'>Twitter</h2>
<span>@Jellyfin</span>
</div>
</a>
<a
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} />
<div className="display--flex flex-direction--column row-justify--center">
<h2 className="margin-bottom--none">Facebook</h2>
<Facebook className='margin--md' size={48} />
<div className='display--flex flex-direction--column row-justify--center'>
<h2 className='margin-bottom--none'>Facebook</h2>
<span>jellyfin.media</span>
</div>
</a>
</div>
</div>
</div>
<h2 className="margin-top--md">Other</h2>
<div className="row">
<div className="col col--12">
<p>
The following platforms allow you to contribute to, and to
support, Jellyfin.
</p>
<h2 className='margin-top--md'>Other</h2>
<div className='row'>
<div className='col col--12'>
<p>The following platforms allow you to contribute to, and to support, Jellyfin.</p>
<div className={styles['contact-grid']}>
<a
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} />
<div className="display--flex flex-direction--column row-justify--center">
<h2 className="margin-bottom--none">GitHub</h2>
<Github className='margin--md' size={48} />
<div className='display--flex flex-direction--column row-justify--center'>
<h2 className='margin-bottom--none'>GitHub</h2>
<span>Jellyfin</span>
</div>
</a>
<a
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} />
<div className="display--flex flex-direction--column row-justify--center">
<h2 className="margin-bottom--none">Weblate</h2>
<Weblate className='margin--md' size={48} />
<div className='display--flex flex-direction--column row-justify--center'>
<h2 className='margin-bottom--none'>Weblate</h2>
<span>Translate</span>
</div>
</a>
<a
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} />
<div className="display--flex flex-direction--column row-justify--center">
<h2 className="margin-bottom--none">Fider</h2>
<Jellyfin className='margin--md' size={48} />
<div className='display--flex flex-direction--column row-justify--center'>
<h2 className='margin-bottom--none'>Fider</h2>
<span>Request features</span>
</div>
</a>
<a
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} />
<div className="display--flex flex-direction--column row-justify--center">
<h2 className="margin-bottom--none">Open Collective</h2>
<Opencollective className='margin--md' size={48} />
<div className='display--flex flex-direction--column row-justify--center'>
<h2 className='margin-bottom--none'>Open Collective</h2>
<span>Help finance infrastructure</span>
</div>
</a>

24
src/pages/contribute.tsx
View File

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

156
src/pages/downloads.tsx
View File

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

26
src/pages/index.tsx
View File

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

2
tsconfig.json
View File

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