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

Add TypeScript, Prettier and ESLint

Browse Source
This commit is contained in:
MrTimscampi 2021-05-08 09:21:21 +02:00
parent fb00c877d1
commit 273e4c1776
20 changed files with 2118 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
.eslintignore Normal file
View File

@ -0,0 +1,20 @@
# Dependencies
/node_modules
# Production
/build
# Generated files
.docusaurus
.cache-loader
# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

32
.eslintrc.json Normal file
View File

@ -0,0 +1,32 @@
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended",
"prettier"
],
"globals": {
"JSX": "readonly"
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react", "@typescript-eslint", "jsx-a11y"],
"rules": {},
"settings": {
"react": {
"version": "detect"
}
}
}

20
.prettierignore Normal file
View File

@ -0,0 +1,20 @@
# Dependencies
/node_modules
# Production
/build
# Generated files
.docusaurus
.cache-loader
# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

5
.prettierrc Normal file
View File

@ -0,0 +1,5 @@
{
"semi": true,
"singleQuote": true,
"trailingComma": "none"
}

4
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,4 @@
{
"typescript.tsdk": "node_modules/typescript/lib",
"editor.formatOnSave": true
}

1873
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

24
package.json
View File

@ -10,7 +10,8 @@
"clear": "docusaurus clear",
"serve": "docusaurus serve",
"write-translations": "docusaurus write-translations",
"write-heading-ids": "docusaurus write-heading-ids"
"write-heading-ids": "docusaurus write-heading-ids",
"lint": "eslint --ext .ts,.js,.json,.jsx,.tsx ."
},
"dependencies": {
"@docusaurus/core": "2.0.0-alpha.75",
@ -36,5 +37,26 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@docusaurus/module-type-aliases": "^2.0.0-alpha.75",
"@tsconfig/docusaurus": "^1.0.2",
"@types/react": "^17.0.5",
"@types/react-helmet": "^6.1.1",
"@types/react-router-dom": "^5.1.7",
"@typescript-eslint/eslint-plugin": "^4.22.1",
"@typescript-eslint/parser": "^4.22.1",
"eslint": "^7.26.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-standard": "^16.0.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.3.1",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "2.2.1",
"typescript": "^4.2.4",
"typescript-plugin-css-modules": "^3.2.0"
}
}

34
src/components/BuiltByVolunteers.js
View File

@ -1,34 +0,0 @@
import React from 'react';
import Svg from '../../static/img/people.svg';
import styles from './BuiltByVolunteers.modules.css';
export default function BuiltByVolunteers() {
// When updating members count here, substract one to account for jellyfin-bot.
const members = 43;
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">
<h1>{members}</h1>
<h2>Members</h2>
</div>
<div className="display--flex flex-direction--column align-items--center">
<h1>{contributors}+</h1>
<h2>Contributors</h2>
</div>
</div>
<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>
<div>We rely entirely on contributions from volunteers. There is no corporation steering the ship. Everything is done by users, for users.</div>
</div>
</div>
</div>
</section>
);
}

43
src/components/BuiltByVolunteers.tsx Normal file
View File

@ -0,0 +1,43 @@
import React from 'react';
import Svg from '../../static/img/people.svg';
import styles from './BuiltByVolunteers.modules.css';
export default function BuiltByVolunteers() {
// When updating members count here, substract one to account for jellyfin-bot.
const members = 43;
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">
<h1>{members}</h1>
<h2>Members</h2>
</div>
<div className="display--flex flex-direction--column align-items--center">
<h1>{contributors}+</h1>
<h2>Contributors</h2>
</div>
</div>
<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>
<div>
We rely entirely on contributions from volunteers. There is no
corporation steering the ship. Everything is done by users, for
users.
</div>
</div>
</div>
</div>
</section>
);
}

12
src/components/CallToAction.js → src/components/CallToAction.tsx
View File

@ -7,8 +7,16 @@ export default function CallToAction() {
<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>
<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>
</div>
</div>

16
src/components/FreeSoftware.js → src/components/FreeSoftware.tsx
View File

@ -10,11 +10,21 @@ export default function FreeSoftware() {
<div className="col col--6">
<Svg className={styles.logo} />
<h1>Your media, your server, your way</h1>
<div className="margin-bottom--sm"><b>Jellyfin is fully self-hosted and fully open source.</b></div>
<div>We don'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 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.
</div>
</div>
<div className="col col--6 padding--lg">
<img className="shadow--md" src={require('../../static/img/home-10.7.png').default} />
<img
alt="Jellyfin home screen"
className="shadow--md"
src={require('../../static/img/home-10.7.png').default}
/>
</div>
</div>
</div>

47
src/components/HomepageFeatures.js → src/components/HomepageFeatures.tsx
View File

@ -8,18 +8,20 @@ const FeatureList = [
Svg: require('../../static/img/undraw_home_cinema.svg').default,
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',
Svg: require('../../static/img/undraw_Video_streaming_re.svg').default,
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',
@ -28,47 +30,44 @@ const FeatureList = [
<>
Listen to music, your artists and your playlists, at home or on the go.
</>
),
)
},
{
title: 'Live TV & DVR',
Svg: require('../../static/img/undraw_game_day.svg').default,
description: (
<>
Watch TV and set automatic recordings to expand your library.
</>
),
<>Watch TV and set automatic recordings to expand your library.</>
)
},
{
title: 'Books',
Svg: require('../../static/img/undraw_book_lover.svg').default,
description: (
<>
Read your books, comics, and magazines.
</>
),
description: <>Read your books, comics, and magazines.</>
},
{
title: 'Photos',
Svg: require('../../static/img/undraw_group_selfie.svg').default,
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',
Svg: require('../../static/img/undraw_real_time_collaboration.svg').default,
description: (
<>
Sharing a movie night remotely has never been so easy.
</>
),
description: <>Sharing a movie night remotely has never been so easy.</>
}
];
function Feature({Svg, title, description}) {
function Feature({
Svg,
title,
description
}: {
Svg: any;
title: string;
description: JSX.Element;
key: number;
}) {
return (
<div className={clsx('col col--3')}>
<div className="text--center">

14
src/components/MoreClients.js → src/components/MoreClients.tsx
View File

@ -1,7 +1,13 @@
import React from 'react';
import Web from '../../static/img/web.svg';
import Desktop from '../../static/img/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/img/plus-thick.svg';
export default function MoreClients() {
@ -11,7 +17,11 @@ export default function MoreClients() {
<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.</div>
<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.
</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">

2
src/pages/clients.js → src/pages/clients.tsx
View File

@ -8,4 +8,4 @@ export default function Clients() {
<p>Placeholder page</p>
</Layout>
);
}
}

2
src/pages/contact.js → src/pages/contact.tsx
View File

@ -8,4 +8,4 @@ export default function Contact() {
<p>Placeholder page</p>
</Layout>
);
}
}

2
src/pages/contribute.js → src/pages/contribute.tsx
View File

@ -8,4 +8,4 @@ export default function Contribute() {
<p>Placeholder page</p>
</Layout>
);
}
}

2
src/pages/downloads.js → src/pages/downloads.tsx
View File

@ -8,4 +8,4 @@ export default function Downloads() {
<p>Placeholder page</p>
</Layout>
);
}
}

31
src/pages/index.js → src/pages/index.tsx
View File

@ -1,7 +1,6 @@
import React from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import HomepageFeatures from '../components/HomepageFeatures';
import FreeSoftware from '../components/FreeSoftware';
import BuiltByVolunteers from '../components/BuiltByVolunteers';
@ -9,7 +8,6 @@ import MoreClients from '../components/MoreClients';
import CallToAction from '../components/CallToAction';
function HomepageHeader() {
const {siteConfig} = useDocusaurusContext();
return (
<header className={clsx('hero')}>
<div className="hero-overlay hero-overlay--gradient"></div>
@ -19,10 +17,27 @@ function HomepageHeader() {
<div className="hero-content">
<div className="hero-content-inner">
<h1 className="hero-title">The Free Software Media System</h1>
<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">See it in Action</a>
<a href="/downloads" className="button button button--primary margin-horiz--md">Download Now</a>
<a href="" className="button button--secondary button--outline scroll">Learn More</a>
<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"
>
See it in Action
</a>
<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>
</div>
</div>
</div>
@ -32,11 +47,11 @@ function HomepageHeader() {
}
export default function Home() {
const {siteConfig} = useDocusaurusContext();
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."
>
<HomepageHeader />
<main>
<HomepageFeatures />

6
src/svg.d.ts vendored Normal file
View File

@ -0,0 +1,6 @@
import React from 'react';
declare module '*.svg' {
const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
export default content;
}

7
tsconfig.json Normal file
View File

@ -0,0 +1,7 @@
{
"extends": "@tsconfig/docusaurus/tsconfig.json",
"include": ["src/"],
"compilerOptions": {
"plugins": [{ "name": "typescript-plugin-css-modules" }]
}
}