Skip to content

Commit e2aafcc

Browse files
Nemo64Nemo64
committed
implement prettier
1 parent d9a5ace commit e2aafcc

34 files changed

+1538
-890
lines changed

‎.editorconfig

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,4 @@ end_of_line = lf
44
indent_size = 2
55
indent_style = space
66
insert_final_newline = true
7-
max_line_length = 140
8-
9-
ij_html_attribute_wrap = off
10-
ij_typescript_align_multiline_parameters = false
11-
ij_typescript_enforce_trailing_comma = whenmultiline
12-
ij_typescript_force_semicolon_style = true
13-
ij_typescript_import_sort_members = true
14-
ij_typescript_import_sort_module_name = true
15-
ij_typescript_use_semicolon_after_statement = true
7+
max_line_length = 80

‎.eslintrc.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"extends": "next/core-web-vitals"
2+
"extends": ["next/core-web-vitals", "prettier"]
33
}

‎.prettierignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.next
2+
public/dist

‎.prettierrc.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎README.md

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,29 @@
1-
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
1+
# Clip - Video compression in browser
22

3-
## Getting Started
3+
This is the source code of [clip.marco.zone](https://clip.marco.zone/).
44

5-
First, run the development server:
5+
## Start the project locally
66

7-
```bash
7+
```shell
8+
npm install
89
npm run dev
9-
# or
10-
yarn dev
1110
```
1211

13-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
12+
The dev server is then running under http://localhost:3000.
1413

15-
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
14+
## Run code quality tools
1615

17-
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
18-
19-
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20-
21-
## Learn More
22-
23-
To learn more about Next.js, take a look at the following resources:
24-
25-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27-
28-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
16+
```shell
17+
npm run lint
18+
npm run prettier
19+
```
2920

30-
## Deploy on Vercel
21+
## Create translations
3122

32-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
23+
```shell
24+
npm run l10n
25+
```
3326

34-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
27+
This will update the files in the [`locales`](locales) folder.
28+
You can then either edit those files directly
29+
or use a tool like [texel](https://texel.marco.zone/)

‎components/button.tsx

Lines changed: 40 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
11
import classNames from "classnames";
2-
import {ButtonHTMLAttributes, ForwardedRef, forwardRef, MouseEvent, ReactElement, useState} from "react";
3-
import {Link, LinkProps} from "./link";
2+
import {
3+
ButtonHTMLAttributes,
4+
ForwardedRef,
5+
forwardRef,
6+
MouseEvent,
7+
ReactElement,
8+
useState,
9+
} from "react";
10+
import { Link, LinkProps as OriginalLinkProps } from "./link";
411

512
// <a href> buttons extensions
6-
export interface LinkAttributes extends LinkProps {
13+
export interface LinkProps extends OriginalLinkProps {
714
href: string; // enforce href for identification
815

9-
onClick?: (e: MouseEvent<HTMLAnchorElement>) => Promise<void> | void,
16+
onClick?: (e: MouseEvent<HTMLAnchorElement>) => Promise<void> | void;
1017
disabled?: boolean; // fixates disabled style
1118
}
1219

1320
// <button> buttons extensions
14-
export interface ButtonAttributes extends ButtonHTMLAttributes<HTMLButtonElement> {
15-
onClick?: (e: MouseEvent<HTMLButtonElement>) => Promise<void> | void,
21+
export interface ButtonProps
22+
extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "href"> {
23+
onClick?: (e: MouseEvent<HTMLButtonElement>) => Promise<void> | void;
1624
disabled?: boolean; // fixates disabled attribute and style
1725
}
1826

@@ -30,12 +38,11 @@ export interface ButtonAttributes extends ButtonHTMLAttributes<HTMLButtonElement
3038
* Don't use this for inline links, use {@see Link} instead.
3139
*/
3240
export const Button = forwardRef(function Button(
33-
{onClick, disabled, className, ...props}: LinkAttributes | ButtonAttributes,
34-
ref: ForwardedRef<HTMLAnchorElement> | ForwardedRef<HTMLButtonElement>,
41+
{ onClick, disabled, className, ...props }: LinkProps | ButtonProps,
42+
ref: ForwardedRef<HTMLAnchorElement> | ForwardedRef<HTMLButtonElement>
3543
): ReactElement {
36-
3744
const [busy, setBusy] = useState(false);
38-
const disabledOrBusy = disabled || busy;
45+
const isDisabled = disabled || busy;
3946

4047
// if onClick returns a promise, then disable the button until the promise resolves
4148
if (onClick !== undefined) {
@@ -51,31 +58,35 @@ export const Button = forwardRef(function Button(
5158
};
5259
}
5360

54-
const classes = classNames({
55-
'opacity-75 pointer-events-none cursor-not-allowed': disabledOrBusy,
56-
}, className);
61+
const classes = classNames(className, {
62+
"opacity-75 pointer-events-none cursor-not-allowed": isDisabled,
63+
});
5764

5865
if ("href" in props) {
5966
return (
60-
<Link {...props}
61-
role={props.role ?? "button"}
62-
ref={ref as ForwardedRef<HTMLAnchorElement>}
63-
prefetch={props.prefetch ?? !disabledOrBusy}
64-
href={disabledOrBusy ? undefined : props.href}
65-
onClick={disabledOrBusy ? undefined : onClick as (e: MouseEvent<HTMLAnchorElement>) => void}
66-
className={classes}
67-
aria-busy={busy ? true : undefined}
68-
aria-disabled={disabledOrBusy ? true : undefined}/>
67+
<Link
68+
{...props}
69+
role={props.role ?? "button"}
70+
ref={ref as ForwardedRef<HTMLAnchorElement>}
71+
prefetch={props.prefetch ?? !isDisabled}
72+
href={isDisabled ? undefined : props.href}
73+
onClick={isDisabled ? undefined : (onClick as LinkProps["onClick"])}
74+
className={classes}
75+
aria-busy={busy ? true : undefined}
76+
aria-disabled={isDisabled ? true : undefined}
77+
/>
6978
);
7079
} else {
7180
return (
72-
<button {...props}
73-
type={props.type ?? "button"}
74-
ref={ref as ForwardedRef<HTMLButtonElement>}
75-
onClick={disabledOrBusy ? undefined : onClick as (e: MouseEvent<HTMLButtonElement>) => void}
76-
className={classes}
77-
aria-busy={busy ? true : undefined}
78-
disabled={disabledOrBusy ? true : undefined}/>
81+
<button
82+
{...props}
83+
type={props.type ?? "button"}
84+
ref={ref as ForwardedRef<HTMLButtonElement>}
85+
onClick={isDisabled ? undefined : (onClick as ButtonProps["onClick"])}
86+
className={classes}
87+
aria-busy={busy ? true : undefined}
88+
disabled={isDisabled ? true : undefined}
89+
/>
7990
);
8091
}
8192
});

‎components/footer.tsx

Lines changed: 100 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,49 @@
11
import classNames from "classnames";
2-
import {useRouter} from "next/router";
2+
import { useRouter } from "next/router";
33
import useLocalStorage from "use-local-storage";
4-
import {t} from "../src/intl";
5-
import {TranslateIcon} from "./icons";
6-
import {Link} from "./link";
7-
import NextLink from "next/link"
4+
import { t } from "../src/intl";
5+
import { TranslateIcon } from "./icons";
6+
import { Link } from "./link";
7+
import NextLink from "next/link";
8+
import { ForwardedRef, forwardRef } from "react";
9+
10+
const FLink = forwardRef(function FooterLink(
11+
props: Omit<Parameters<typeof Link>[0], "className">,
12+
ref: ForwardedRef<HTMLAnchorElement>
13+
) {
14+
return <Link {...props} className="hover:text-slate-800" ref={ref} />;
15+
});
816

917
export function Footer() {
10-
const {locale: currentLocale, locales, asPath} = useRouter();
11-
const [matomoEnabled, setMatomoEnabled] = useLocalStorage('matomo', true);
18+
const { locale: currentLocale, locales, asPath } = useRouter();
19+
const [matomoEnabled, setMatomoEnabled] = useLocalStorage("matomo", true);
1220

1321
return (
1422
<div className="mt-16 min-h-[80vh] bg-slate-50">
15-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" className="w-full">
16-
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" className="fill-white" />
23+
<svg
24+
xmlns="http://www.w3.org/2000/svg"
25+
viewBox="0 0 1200 120"
26+
preserveAspectRatio="none"
27+
className="w-full"
28+
>
29+
<path
30+
d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
31+
className="fill-white"
32+
/>
1733
</svg>
1834
<footer className="max-w-lg mx-auto px-2 flex flex-row flex-wrap gap-2 text-slate-500 text-sm">
1935
{Array.isArray(locales) && (
2036
<div className="flex w-full">
21-
<TranslateIcon className="mr-2"/>
37+
<TranslateIcon className="mr-2" />
2238
Languages:
2339
<ul className="flex flex-row gap-2 mx-2">
24-
{locales.map(locale => (
25-
<li key={locale} className={classNames('inline-block', {'font-semibold': locale === currentLocale})}>
40+
{locales.map((locale) => (
41+
<li
42+
key={locale}
43+
className={classNames("inline-block", {
44+
"font-semibold": locale === currentLocale,
45+
})}
46+
>
2647
<NextLink href={asPath} locale={locale} scroll={false}>
2748
{locale}
2849
</NextLink>
@@ -32,66 +53,102 @@ export function Footer() {
3253
</div>
3354
)}
3455
<div className="flex-auto flex-col">
35-
36-
<h2>{t('footer.used_libraries.opensource')}</h2>
56+
<h2>{t("footer.used_libraries.opensource")}</h2>
3757
<ul className="list-disc pl-6">
3858
<li>
39-
<Link href="https://ffmpegwasm.netlify.app/" className="hover:text-slate-800">ffmpeg.wasm</Link>
40-
<Link href="https://www.ffmpeg.org/" className="hover:text-slate-800"> (FFmpeg,</Link>
41-
<Link href="https://emscripten.org/" className="hover:text-slate-800"> Emscripten)</Link>
59+
<FLink href="https://ffmpegwasm.netlify.app/">ffmpeg.wasm</FLink>
60+
{" ("}
61+
<FLink href="https://www.ffmpeg.org/">FFmpeg</FLink>
62+
{", "}
63+
<FLink href="https://emscripten.org/">Emscripten</FLink>
64+
{")"}
4265
</li>
4366
<li>
44-
<Link href="https://nextjs.org/" className="hover:text-slate-800">next.js</Link>
45-
<Link href="https://reactjs.org/" className="hover:text-slate-800"> (React,</Link>
46-
<Link href="https://webpack.js.org/" className="hover:text-slate-800"> Webpack,</Link>
47-
<Link href="https://www.typescriptlang.org/" className="hover:text-slate-800"> TypeScript)</Link>
67+
<FLink href="https://nextjs.org/">next.js</FLink>
68+
{" ("}
69+
<FLink href="https://reactjs.org/">React</FLink>
70+
{", "}
71+
<FLink href="https://webpack.js.org/">Webpack</FLink>
72+
{", "}
73+
<FLink href="https://www.typescriptlang.org/">TypeScript</FLink>
74+
{")"}
4875
</li>
4976
<li>
50-
<Link href="https://tailwindcss.com/" className="hover:text-slate-800">Tailwind CSS</Link>
51-
<Link href="https://heroicons.com/" className="hover:text-slate-800"> + Heroicons</Link>
77+
<FLink href="https://tailwindcss.com/">Tailwind CSS</FLink>
78+
{" + "}
79+
<FLink href="https://heroicons.com/">Heroicons</FLink>
5280
</li>
5381
<li>
54-
<Link href="https://www.shapedivider.app/" className="hover:text-slate-800">Custom Shape Dividers</Link>
82+
<FLink href="https://www.shapedivider.app/">
83+
Custom Shape Dividers
84+
</FLink>
5585
</li>
5686
<li>
57-
<Link href="https://www.i18next.com/" className="hover:text-slate-800">i18next</Link>
58-
<Link href="https://texel.marco.zone/" className="hover:text-slate-800"> (Texel,</Link>
59-
<Link href="https://github.com/i18next/i18next-parser" className="hover:text-slate-800"> i18next-parser)</Link>
87+
<FLink href="https://www.i18next.com/">i18next</FLink>
88+
{" ("}
89+
<FLink href="https://texel.marco.zone/">Texel</FLink>
90+
{", "}
91+
<FLink href="https://github.com/i18next/i18next-parser">
92+
i18next-parser
93+
</FLink>
94+
{")"}
6095
</li>
6196
<li>
6297
<Link href="https://matomo.org/">Matomo Analytics</Link>
6398
<label className="inline-block align-middle m-1 relative pr-3">
64-
<input type="checkbox"
65-
className="peer relative z-10 block appearance-none w-3 h-3 m-0.5 checked:translate-x-3 rounded-full shadow bg-white transition"
66-
checked={matomoEnabled} onChange={e => setMatomoEnabled(e.currentTarget.checked)}/>
67-
<span className="absolute inset-0 bg-slate-300 peer-checked:bg-red-700 rounded-full shadow-inner"/>
99+
<input
100+
type="checkbox"
101+
className="peer relative z-10 block appearance-none w-3 h-3 m-0.5 checked:translate-x-3 rounded-full shadow bg-white transition"
102+
checked={matomoEnabled}
103+
onChange={(e) => setMatomoEnabled(e.currentTarget.checked)}
104+
/>
105+
<span className="absolute inset-0 bg-slate-300 peer-checked:bg-red-700 rounded-full shadow-inner" />
68106
</label>
69107
</li>
70108
<li>
71-
<Link href="https://github.com/Nemo64/clip/blob/main/package.json" className="hover:text-slate-800">and more...</Link>
109+
<FLink href="https://github.com/Nemo64/clip/blob/main/package.json">
110+
and more...
111+
</FLink>
72112
</li>
73113
</ul>
74114

75-
<h2 className="mt-2">{t('footer.used_libraries.others')}</h2>
115+
<h2 className="mt-2">{t("footer.used_libraries.others")}</h2>
76116
<ul className="list-disc pl-6">
77-
<li><Link href="https://vercel.com/" className="hover:text-slate-800">Vercel</Link></li>
117+
<li>
118+
<FLink href="https://vercel.com/">Vercel</FLink>
119+
</li>
78120
</ul>
79-
80121
</div>
81122
<div className="flex-auto flex-col">
82-
83-
<h2>{t('footer.contribute.headline')}</h2>
123+
<h2>{t("footer.contribute.headline")}</h2>
84124
<ul className="list-disc pl-6">
85-
<li><Link href="https://github.com/Nemo64/clip">{t('footer.contribute.check')}</Link></li>
86-
<li><Link href="https://github.com/Nemo64/clip/issues">{t('footer.contribute.issues')}</Link></li>
125+
<li>
126+
<Link href="https://github.com/Nemo64/clip">
127+
{t("footer.contribute.check")}
128+
</Link>
129+
</li>
130+
<li>
131+
<Link href="https://github.com/Nemo64/clip/issues">
132+
{t("footer.contribute.issues")}
133+
</Link>
134+
</li>
87135
</ul>
88136

89-
<h2 className="mt-2">{t('footer.author.headline', {name: 'Marco Pfeiffer'})}</h2>
137+
<h2 className="mt-2">
138+
{t("footer.author.headline", { name: "Marco Pfeiffer" })}
139+
</h2>
90140
<ul className="list-disc pl-6">
91-
<li><Link href="https://twitter.com/TheTrueNemo">{t('footer.author.twitter')}</Link></li>
92-
<li><Link href="https://github.com/Nemo64">{t('footer.author.github')}</Link></li>
141+
<li>
142+
<Link href="https://twitter.com/TheTrueNemo">
143+
{t("footer.author.twitter")}
144+
</Link>
145+
</li>
146+
<li>
147+
<Link href="https://github.com/Nemo64">
148+
{t("footer.author.github")}
149+
</Link>
150+
</li>
93151
</ul>
94-
95152
</div>
96153
</footer>
97154
</div>

0 commit comments

Comments
 (0)