From 2a2eb7edbc827cd5ed2a77cc5b1f4103139d2050 Mon Sep 17 00:00:00 2001 From: Kim T Date: Wed, 14 Apr 2021 23:09:46 -0700 Subject: [PATCH] Lint code --- package.json | 2 +- pages/_app.tsx | 6 +- pages/docs/[slug].tsx | 111 +++++++------- pages/docs/index.tsx | 111 +++++++------- pages/index.tsx | 107 +++++++++---- pages/plugins/[slug].tsx | 322 +++++++++++++++++++++++---------------- pages/plugins/index.tsx | 149 +++++++++++------- 7 files changed, 474 insertions(+), 334 deletions(-) diff --git a/package.json b/package.json index b8fd70ec..cd82dc5d 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "scripts": { "dev": "next dev", "build": "next build && next export", - "format": "prettier --write \"pages/**/*.ts\"", + "format": "prettier --write \"pages/**/*.{ts,tsx}\"", "lint": "tslint -p tsconfig.json", "start": "next start", "test": "echo 'No tests were run'" diff --git a/pages/_app.tsx b/pages/_app.tsx index 6cdcdc2d..0ecb97e0 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,6 @@ -import '../styles/global.css' -import { AppProps } from 'next/app' +import '../styles/global.css'; +import { AppProps } from 'next/app'; export default function App({ Component, pageProps }: AppProps) { - return + return ; } diff --git a/pages/docs/[slug].tsx b/pages/docs/[slug].tsx index e8b547d1..7e4fa881 100644 --- a/pages/docs/[slug].tsx +++ b/pages/docs/[slug].tsx @@ -1,82 +1,77 @@ -import { Component } from 'react' -import Container from '../../components/container' -import Layout from '../../components/layout' -import { getDocBySlug, getAllDocs } from '../../lib/api' -import Doc from '../../types/doc' -import markdownStyles from '../../styles/doc.module.css' -import remark from 'remark' -import html from 'remark-html' -import { withRouter, Router } from 'next/router' +import { Component } from 'react'; +import Container from '../../components/container'; +import Layout from '../../components/layout'; +import { getDocBySlug, getAllDocs } from '../../lib/api'; +import Doc from '../../types/doc'; +import markdownStyles from '../../styles/doc.module.css'; +import remark from 'remark'; +import html from 'remark-html'; +import { withRouter, Router } from 'next/router'; type DocProps = { - allDocs: Doc[], - doc: Doc, - router: Router -} - -class DocPage extends Component { + allDocs: Doc[]; + doc: Doc; + router: Router; +}; +class DocPage extends Component< + DocProps, + { + allDocs: Doc[]; + doc: Doc; + router: Router; + } +> { constructor(props: DocProps) { - super(props) + super(props); this.state = { allDocs: props.allDocs, doc: props.doc, - router: props.router - } + router: props.router, + }; } convertToSlug(text: string) { return text - .toLowerCase() - .replace(/ /g,'-') - .replace(/[^\w-]+/g,'') + .toLowerCase() + .replace(/ /g, '-') + .replace(/[^\w-]+/g, ''); } render() { - let content = this.state.doc.content.replace('/docs', `${this.state.router.basePath}/docs`) - content = content.replace(/

(.*?)<\/h2>/g, (tag, title) => `${tag}`) + let content = this.state.doc.content.replace('/docs', `${this.state.router.basePath}/docs`); + content = content.replace( + /

(.*?)<\/h2>/g, + (tag, title) => `${tag}` + ); return ( - - -

{this.state.doc.title}

-
- - - ) + + +

{this.state.doc.title}

+
+ + + ); } } -export default withRouter(DocPage) +export default withRouter(DocPage); type Params = { params: { - slug: string - } -} + slug: string; + }; +}; async function markdownToHtml(markdown: string) { - const result = await remark().use(html).process(markdown) - return result.toString() + const result = await remark().use(html).process(markdown); + return result.toString(); } export async function getStaticProps({ params }: Params) { - const allDocs = getAllDocs([ - 'title', - 'slug' - ]) + const allDocs = getAllDocs(['title', 'slug']); - const doc = getDocBySlug(params.slug, [ - 'title', - 'slug', - 'content' - ]) as Doc - const content = await markdownToHtml(doc.content || '') + const doc = getDocBySlug(params.slug, ['title', 'slug', 'content']) as Doc; + const content = await markdownToHtml(doc.content || ''); return { props: { @@ -86,11 +81,11 @@ export async function getStaticProps({ params }: Params) { content, }, }, - } + }; } export async function getStaticPaths() { - const docs = getAllDocs(['slug']) as Doc[] + const docs = getAllDocs(['slug']) as Doc[]; return { paths: docs.map((doc) => { @@ -98,8 +93,8 @@ export async function getStaticPaths() { params: { slug: doc.slug, }, - } + }; }), fallback: false, - } -} \ No newline at end of file + }; +} diff --git a/pages/docs/index.tsx b/pages/docs/index.tsx index 26fea9d8..f4cf0e6d 100644 --- a/pages/docs/index.tsx +++ b/pages/docs/index.tsx @@ -1,69 +1,76 @@ -import { Component } from 'react' -import Container from '../../components/container' -import Layout from '../../components/layout' -import styles from '../../styles/doc.module.css' -import { getAllDocs } from '../../lib/api' -import Head from 'next/head' -import Doc from '../../types/doc' -import { withRouter, Router } from 'next/router' +import { Component } from 'react'; +import Container from '../../components/container'; +import Layout from '../../components/layout'; +import styles from '../../styles/doc.module.css'; +import { getAllDocs } from '../../lib/api'; +import Head from 'next/head'; +import Doc from '../../types/doc'; +import { withRouter, Router } from 'next/router'; type DocListProps = { - allDocs: Doc[], - router: Router -} - -class DocList extends Component { + allDocs: Doc[]; + router: Router; +}; +class DocList extends Component< + DocListProps, + { + allDocs: Doc[]; + router: Router; + } +> { constructor(props: DocListProps) { - super(props) + super(props); this.state = { allDocs: props.allDocs, - router: props.router - } + router: props.router, + }; } render() { return ( - <> - - - Documentation - - -

Getting started

-

System Requirements:

-
    -
  • Linux, MacOS or Windows
    • -
  • NodeJS 12+
    • -
-

To install the command line tool, run the command:

- 
npm install @studiorack/cli -g
-

Verify the tool has been installed by running:

- 
studiorack --version
-

Music producers

-

Follow our guide on how to start a music project and install plugins:

-

Create a project config >

-

Plugin developers

-

Jump straight to the advanced guide on how to create your own audio plugins:

-

Develop new plugins >

- - - - ) + <> + + + Documentation + + +

Getting started

+

System Requirements:

+
    +
  • Linux, MacOS or Windows
    • +
  • NodeJS 12+
    • +
+

To install the command line tool, run the command:

+ 
npm install @studiorack/cli -g
+

Verify the tool has been installed by running:

+ 
studiorack --version
+

Music producers

+

Follow our guide on how to start a music project and install plugins:

+

+ + Create a project config > + +

+

Plugin developers

+

Jump straight to the advanced guide on how to create your own audio plugins:

+

+ + Develop new plugins > + +

+ + + + ); } } -export default withRouter(DocList) +export default withRouter(DocList); export const getStaticProps = async () => { - const allDocs = getAllDocs([ - 'title', - 'slug' - ]) + const allDocs = getAllDocs(['title', 'slug']); return { props: { allDocs }, - } -} + }; +}; diff --git a/pages/index.tsx b/pages/index.tsx index d4b3f3e6..27fdf7f8 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,25 +1,27 @@ -import { Component } from 'react' -import Head from 'next/head' -import Layout, { siteTitle } from '../components/layout' -import styles from '../styles/index.module.css' -import { withRouter, Router } from 'next/router' +import { Component } from 'react'; +import Head from 'next/head'; +import Layout, { siteTitle } from '../components/layout'; +import styles from '../styles/index.module.css'; +import { withRouter, Router } from 'next/router'; type HomeProps = { - router: Router, - query: string -} - -class Home extends Component { + router: Router; + query: string; +}; +class Home extends Component< + HomeProps, + { + router: Router; + query: string; + } +> { constructor(props: HomeProps) { - super(props) + super(props); this.state = { router: props.router, - query: '' - } + query: '', + }; } render() { @@ -31,41 +33,84 @@ class Home extends Component
- Open source + Open source

An open-source audio plugin ecosystem

-

Our tools are built using GitHub and open-source libraries, ensuring you will always be able to access them.

- Browse plugins +

+ Our tools are built using GitHub and open-source libraries, ensuring you will always be able to access + them. +

+ + Browse plugins +
- +
- Producers + Producers

Easy plugin installation & management

-

Our app and command line tools allow you to search our plugin registry for free plugins. You can install and manage plugin versions all from one place.

- Download the app Install the CLI +

+ Our app and command line tools allow you to search our plugin registry for free plugins. You can install + and manage plugin versions all from one place. +

+ + Download the app + {' '} + + Install the CLI +
- Creators + Creators

Automate your plugin publishing workflow

-

Our plugin starter templates use GitHub Actions to automatically build your plugin, publishing Windows, Mac and Linux versions directly to GitHub Releases.

- Dplug - iPlug - JUCE - Steinberg +

+ Our plugin starter templates use GitHub Actions to automatically build your plugin, publishing Windows, + Mac and Linux versions directly to GitHub Releases. +

+ + Dplug + + + iPlug + + + JUCE + + + Steinberg +
- ) + ); } } -export default withRouter(Home) +export default withRouter(Home); diff --git a/pages/plugins/[slug].tsx b/pages/plugins/[slug].tsx index 156c7bfb..c1ef0114 100644 --- a/pages/plugins/[slug].tsx +++ b/pages/plugins/[slug].tsx @@ -1,200 +1,258 @@ -import { Component } from 'react' -import Layout from '../../components/layout' -import Head from 'next/head' -import styles from '../../styles/plugin.module.css' -import { GetStaticPaths } from 'next' -import { withRouter, Router } from 'next/router' -import { PluginInterface, pluginGet, pluginsGet } from '@studiorack/core' -import { idToSlug, slugToId } from '../../node_modules/@studiorack/core/dist/utils' +import { Component } from 'react'; +import Layout from '../../components/layout'; +import Head from 'next/head'; +import styles from '../../styles/plugin.module.css'; +import { GetStaticPaths } from 'next'; +import { withRouter, Router } from 'next/router'; +import { PluginInterface, pluginGet, pluginsGet } from '@studiorack/core'; +import { idToSlug, slugToId } from '../../node_modules/@studiorack/core/dist/utils'; type PluginProps = { - plugin: PluginInterface, - router: Router -} - -class PluginPage extends Component { + plugin: PluginInterface; + router: Router; +}; +class PluginPage extends Component< + PluginProps, + { + isPlaying: boolean; + router: Router; + plugin: PluginInterface; + } +> { constructor(props: PluginProps) { - super(props) + super(props); this.state = { isPlaying: false, plugin: props.plugin, - router: props.router - } + router: props.router, + }; } - formatBytes(bytes:number, decimals = 2) { - if (bytes === 0) return '0 Bytes' - const k = 1024 - const dm = decimals < 0 ? 0 : decimals - const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] - const i = Math.floor(Math.log(bytes) / Math.log(k)) - return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i] + formatBytes(bytes: number, decimals = 2) { + if (bytes === 0) return '0 Bytes'; + const k = 1024; + const dm = decimals < 0 ? 0 : decimals; + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; } - timeSince(date:string) { - const seconds = Math.floor((new Date().getTime() - new Date(date).getTime()) / 1000) - let interval = seconds / 31536000 + timeSince(date: string) { + const seconds = Math.floor((new Date().getTime() - new Date(date).getTime()) / 1000); + let interval = seconds / 31536000; if (interval > 1) { - return Math.floor(interval) + " years" + return Math.floor(interval) + ' years'; } - interval = seconds / 2592000 + interval = seconds / 2592000; if (interval > 1) { - return Math.floor(interval) + " months" + return Math.floor(interval) + ' months'; } - interval = seconds / 86400 + interval = seconds / 86400; if (interval > 1) { - return Math.floor(interval) + " days" + return Math.floor(interval) + ' days'; } - interval = seconds / 3600 + interval = seconds / 3600; if (interval > 1) { - return Math.floor(interval) + " hours" + return Math.floor(interval) + ' hours'; } - interval = seconds / 60 + interval = seconds / 60; if (interval > 1) { - return Math.floor(interval) + " minutes" + return Math.floor(interval) + ' minutes'; } - return Math.floor(seconds) + " seconds" + return Math.floor(seconds) + ' seconds'; } play = () => { - const el = document.getElementById('audio') as HTMLAudioElement + const el = document.getElementById('audio') as HTMLAudioElement; if (el.paused) { - el.removeEventListener('ended', this.ended) - el.addEventListener('ended', this.ended) - el.currentTime = 0 - el.play() - this.setState({ isPlaying: true }) + el.removeEventListener('ended', this.ended); + el.addEventListener('ended', this.ended); + el.currentTime = 0; + el.play(); + this.setState({ isPlaying: true }); } - } + }; pause = () => { - const el = document.getElementById('audio') as HTMLAudioElement + const el = document.getElementById('audio') as HTMLAudioElement; if (!el.paused) { - el.pause() - this.setState({ isPlaying: false }) + el.pause(); + this.setState({ isPlaying: false }); } - } + }; ended = () => { - this.setState({ isPlaying: false }) - } + this.setState({ isPlaying: false }); + }; getPlayButton() { if (this.state.isPlaying) { - return Pause + return ( + Pause + ); } else { - return Play + return ( + Play + ); } } render() { return ( - - - {this.state.plugin.name || ''} - -
-
-
-
-
- {this.state.plugin.files.audio ? - this.getPlayButton() - : '' - } - {this.state.plugin.files.image ? - {this.state.plugin.name - : '' - } + + + {this.state.plugin.name || ''} + +
+
+
+
+
+ {this.state.plugin.files.audio ? this.getPlayButton() : ''} + {this.state.plugin.files.image ? ( + {this.state.plugin.name + ) : ( + '' + )} +
+ {this.state.plugin.files.audio ? ( + + ) : ( + '' + )}
- {this.state.plugin.files.audio ? - - : '' - } -
-
-

{this.state.plugin.name || ''} v{this.state.plugin.version}

-

By {this.state.plugin.author}

-

{this.state.plugin.description}

-
- {/*
Filesize {this.formatBytes(this.state.plugin.size)}
*/} -
Date updated {this.timeSince(this.state.plugin.date)} ago
-
- Tags +
+

+ {this.state.plugin.name || ''} v{this.state.plugin.version} +

+

+ By{' '} + + {this.state.plugin.author} + +

+

{this.state.plugin.description}

+
+ {/*
Filesize {this.formatBytes(this.state.plugin.size)}
*/} +
+ Date updated{' '} + {this.timeSince(this.state.plugin.date)} ago +
+
+ Tags
    - {this.state.plugin.tags.map((tag: string, tagIndex: number) => ( -
  • {tag},
    • - ))} -
+ {this.state.plugin.tags.map((tag: string, tagIndex: number) => ( +
  • + {tag}, +
    • + ))} + +
    -
    -
    -
    -
    -

    Download and install manually:

    - { this.state.plugin.files.linux ? - Linux - : '' - } - { this.state.plugin.files.mac ? - MacOS - : '' - } - { this.state.plugin.files.win ? - Windows - : '' - } -
    -
    -

    Install via command line:

    - 
    studiorack install {this.state.plugin.id}
    +
    +
    +
    +

    Download and install manually:

    + {this.state.plugin.files.linux ? ( + + Linux + + ) : ( + '' + )} + {this.state.plugin.files.mac ? ( + + MacOS + + ) : ( + '' + )} + {this.state.plugin.files.win ? ( + + Windows + + ) : ( + '' + )} +
    +
    +

    Install via command line:

    + 
    studiorack install {this.state.plugin.id}
    +
    -
    -
    -     - ) +
    +     + ); } } -export default withRouter(PluginPage) +export default withRouter(PluginPage); export const getStaticPaths: GetStaticPaths = async () => { - const paths = await pluginsGet() - const list = [] + const paths = await pluginsGet(); + const list = []; for (const pluginId in paths) { list.push({ params: { - slug: idToSlug(pluginId) - } - }) + slug: idToSlug(pluginId), + }, + }); } return { paths: list, - fallback: false - } -} + fallback: false, + }; +}; type Params = { params: { - slug: string - } -} + slug: string; + }; +}; export async function getStaticProps({ params }: Params) { - const pluginId = slugToId(params.slug) - const plugin: PluginInterface = await pluginGet(pluginId) + const pluginId = slugToId(params.slug); + const plugin: PluginInterface = await pluginGet(pluginId); console.log(plugin); return { props: { - plugin - } - } + plugin, + }, + }; } diff --git a/pages/plugins/index.tsx b/pages/plugins/index.tsx index 6ce79137..a6c4e3e0 100644 --- a/pages/plugins/index.tsx +++ b/pages/plugins/index.tsx @@ -1,58 +1,62 @@ -import { Component, ChangeEvent, SyntheticEvent } from 'react' -import Head from 'next/head' -import Layout, { siteTitle } from '../../components/layout' -import styles from '../../styles/plugins.module.css' -import Link from 'next/link' -import { GetStaticProps } from 'next' -import { withRouter, Router } from 'next/router' -import { PluginInterface, pluginLatest, pluginsGet } from '@studiorack/core' -import { idToSlug } from '../../node_modules/@studiorack/core/dist/utils' +import { Component, ChangeEvent, SyntheticEvent } from 'react'; +import Head from 'next/head'; +import Layout, { siteTitle } from '../../components/layout'; +import styles from '../../styles/plugins.module.css'; +import Link from 'next/link'; +import { GetStaticProps } from 'next'; +import { withRouter, Router } from 'next/router'; +import { PluginInterface, pluginLatest, pluginsGet } from '@studiorack/core'; +import { idToSlug } from '../../node_modules/@studiorack/core/dist/utils'; type PluginListProps = { - plugins: PluginInterface[], - router: Router -} - -class PluginList extends Component { + plugins: PluginInterface[]; + router: Router; +}; +class PluginList extends Component< + PluginListProps, + { + pluginsFiltered: PluginInterface[]; + router: Router; + query: string; + } +> { constructor(props: PluginListProps) { - super(props) + super(props); this.state = { pluginsFiltered: props.plugins || [], router: props.router, - query: '' - } + query: '', + }; } handleChange = (event: ChangeEvent) => { - const el = event.target as HTMLInputElement - const query = el.value ? el.value.toLowerCase() : '' + const el = event.target as HTMLInputElement; + const query = el.value ? el.value.toLowerCase() : ''; const filtered = this.props.plugins.filter((plugin: PluginInterface) => { - if (plugin.name.toLowerCase().indexOf(query) !== -1 || + if ( + plugin.name.toLowerCase().indexOf(query) !== -1 || plugin.description.toLowerCase().indexOf(query) !== -1 || - plugin.tags.includes(query)) { - return plugin + plugin.tags.includes(query) + ) { + return plugin; } - return false - }) + return false; + }); this.setState({ pluginsFiltered: filtered || [], - query - }) - } + query, + }); + }; imageError = (event: SyntheticEvent) => { - const el = event.target as HTMLImageElement - const fallback = `${this.state.router.basePath}/images/plugin.png` + const el = event.target as HTMLImageElement; + const fallback = `${this.state.router.basePath}/images/plugin.png`; if (el.getAttribute('src') !== fallback) { - el.setAttribute('src', fallback) + el.setAttribute('src', fallback); } - return undefined - } + return undefined; + }; render() { return ( @@ -62,50 +66,81 @@ class PluginList extends Component
    -

    Plugins ({this.state.pluginsFiltered.length})

    - +

    + Plugins ({this.state.pluginsFiltered.length}) +

    +
    {this.state.pluginsFiltered.map((plugin: PluginInterface, pluginIndex: number) => ( - +
    -

    {plugin.name} v{plugin.version}

    - Download +

    + {plugin.name} v{plugin.version} +

    + + Download +
      - Tags + Tags {plugin.tags.map((tag: string, tagIndex: number) => ( -
    • {tag},
      • +
    • + {tag}, +
      • ))}
    - { plugin.files.image ? - {plugin.name} - : "" - } + {plugin.files.image ? ( + {plugin.name} + ) : ( + '' + )}
    ))}
    - ) + ); } } -export default withRouter(PluginList) +export default withRouter(PluginList); export const getStaticProps: GetStaticProps = async () => { - const plugins = await pluginsGet() - const list:PluginInterface[] = [] + const plugins = await pluginsGet(); + const list: PluginInterface[] = []; for (const pluginId in plugins) { - const plugin: PluginInterface = pluginLatest(plugins[pluginId]) - list.push(plugin) + const plugin: PluginInterface = pluginLatest(plugins[pluginId]); + list.push(plugin); } return { props: { - plugins: list - } - } -} + plugins: list, + }, + }; +};