1
0
mirror of https://github.com/verdaccio/verdaccio.git synced 2024-11-08 23:25:51 +01:00

Indiescripter/align website format lint configs (#2398)

* build: update deps dompurify, esbuild-loader, envinfo, express-rate-limit, fastify, handlebars, jsdom

* build: remove unused devDep wait-on

* build: update dep http-status-codes

* build: update devDeps @typescript-eslint/*; deps aws-sdk & memfs

* build: update devDep terser-webpack-plugin

* build: update devDep eslint-plugin-prettier

* build: update dev/devDeps node-fetch, react-hook-form

* build: update e2e-cli deps npm & pnpm

* build: update website devDev sass

* build: update ui-theme devDep github-markdown-css

* build: update logger dep pino minor version

* build: update web devDep node-html-parser

* build: remove some legacy flow-typed cruft

* style: eslint-config-airbnb-typescript => @verdaccio/eslint-config; use prettier width 100 in website

* fix: attempt eslint fix in Features.tsx as suggested by @semoal; website eslint still 1 error

* fix: attempt to fix eslint warn about hooks usage

Co-authored-by: Sergio Moreno <22656541+semoal@users.noreply.github.com>
This commit is contained in:
Justin Johansson 2021-09-02 02:45:15 +09:30 committed by GitHub
parent 2e51c931dd
commit b121e3662f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
37 changed files with 605 additions and 490 deletions

@ -4,7 +4,6 @@
**/types/custom.d.ts
build/
coverage/
flow-typed/
node_modules/
static/
website/

@ -1,4 +1,3 @@
## npm
npm-debug.log
yarn-error.log
@ -23,7 +22,6 @@ docs/
wiki/
## flow
flow-typed/
types/
# jest

@ -69,8 +69,8 @@
"@types/validator": "13.6.3",
"@types/webpack": "4.41.26",
"@types/webpack-env": "1.16.2",
"@typescript-eslint/eslint-plugin": "4.29.3",
"@typescript-eslint/parser": "4.29.3",
"@typescript-eslint/eslint-plugin": "4.30.0",
"@typescript-eslint/parser": "4.30.0",
"@verdaccio/benchmark": "workspace:*",
"@verdaccio/eslint-config": "workspace:*",
"@verdaccio/types": "workspace:*",
@ -90,12 +90,11 @@
"eslint": "7.32.0",
"eslint-config-google": "0.14.0",
"eslint-config-prettier": "8.3.0",
"eslint-config-airbnb-typescript": "14.0.0",
"eslint-plugin-babel": "5.3.1",
"eslint-plugin-import": "2.24.2",
"eslint-plugin-jest": "24.4.0",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "3.4.1",
"eslint-plugin-prettier": "4.0.0",
"eslint-plugin-react": "7.25.1",
"eslint-plugin-react-hooks": "4.2.0",
"eslint-plugin-simple-import-sort": "7.0.0",
@ -112,7 +111,7 @@
"kleur": "3.0.3",
"lint-staged": "9.5.0",
"nock": "12.0.3",
"node-fetch": "2.6.1",
"node-fetch": "3.0.0-beta.6-exportfix",
"nodemon": "2.0.12",
"npm-run-all": "4.1.5",
"prettier": "2.3.2",

@ -50,7 +50,7 @@
"@verdaccio/fastify-migration": "workspace:6.0.0-6-next.10",
"commander": "6.2.0",
"clipanion": "3.0.1",
"envinfo": "7.4.0",
"envinfo": "7.8.1",
"kleur": "3.0.3",
"semver": "7.3.5"
},

@ -38,7 +38,7 @@
},
"dependencies": {
"http-errors": "1.8.0",
"http-status-codes": "1.4.0"
"http-status-codes": "2.1.4"
},
"scripts": {
"clean": "rimraf ./build",

@ -40,8 +40,8 @@
"build"
],
"dependencies": {
"dompurify": "2.0.8",
"jsdom": "15.2.1",
"dompurify": "2.3.1",
"jsdom": "17.0.0",
"marked": "1.1.1"
},
"devDependencies": {

@ -39,7 +39,7 @@
"@verdaccio/logger": "workspace:6.0.0-6-next.4",
"@verdaccio/store": "workspace:6.0.0-6-next.10",
"debug": "4.3.2",
"fastify": "3.15.1",
"fastify": "3.20.2",
"fastify-plugin": "3.0.0"
},
"devDependencies": {

@ -33,7 +33,7 @@
"@verdaccio/commons-api": "workspace:11.0.0-alpha.3",
"@verdaccio/logger": "workspace:6.0.0-6-next.4",
"debug": "4.3.2",
"handlebars": "4.5.3",
"handlebars": "4.7.7",
"undici": "4.5.1",
"undici-fetch": "1.0.0-rc.4"
},

@ -48,7 +48,7 @@
},
"devDependencies": {
"@types/pino": "6.3.11",
"pino": "6.11.3"
"pino": "6.13.1"
},
"funding": {
"type": "opencollective",

@ -42,7 +42,7 @@
"@verdaccio/logger-prettify": "workspace:6.0.0-alpha.3",
"debug": "4.3.2",
"lodash": "4.17.21",
"pino": "6.11.3"
"pino": "6.13.1"
},
"devDependencies": {
"@types/pino": "6.3.11",

@ -65,9 +65,6 @@ export function setSecurityWebHeaders(
next();
}
// flow: express does not match properly
// flow info
// https://github.com/flowtype/flow-typed/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+express
export function validateName(
req: $RequestExtend,
res: $ResponseExtend,
@ -85,9 +82,6 @@ export function validateName(
}
}
// flow: express does not match properly
// flow info
// https://github.com/flowtype/flow-typed/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+express
export function validatePackage(
req: $RequestExtend,
res: $ResponseExtend,

@ -33,7 +33,7 @@
"dependencies": {
"express": "4.17.1",
"https-proxy-agent": "5.0.0",
"node-fetch": "2.6.1"
"node-fetch": "3.0.0-beta.6-exportfix"
},
"devDependencies": {
"@verdaccio/types": "workspace:11.0.0-6-next.7",

@ -33,7 +33,7 @@
"dependencies": {
"@verdaccio/commons-api": "workspace:11.0.0-alpha.3",
"@verdaccio/streams": "workspace:11.0.0-alpha.3",
"aws-sdk": "2.978.0"
"aws-sdk": "2.980.0"
},
"devDependencies": {
"@verdaccio/types": "workspace:11.0.0-6-next.7",

@ -35,7 +35,7 @@
"@verdaccio/streams": "workspace:11.0.0-alpha.3",
"memory-fs": "0.5.0",
"debug": "4.3.2",
"memfs": "3.2.2"
"memfs": "3.2.3"
},
"devDependencies": {
"@verdaccio/types": "workspace:11.0.0-6-next.7"

@ -39,7 +39,7 @@
"emotion-theming": "10.0.27",
"file-loader": "5.1.0",
"friendly-errors-webpack-plugin": "1.7.0",
"github-markdown-css": "3.0.1",
"github-markdown-css": "4.0.0",
"harmony-reflect": "1.6.2",
"history": "^4.10.1",
"html-webpack-plugin": "5.3.2",
@ -60,7 +60,7 @@
"react": "17.0.2",
"react-autosuggest": "10.1.0",
"react-dom": "17.0.2",
"react-hook-form": "7.14.0",
"react-hook-form": "7.14.2",
"react-hot-loader": "4.13.0",
"react-i18next": "11.11.4",
"react-router": "5.2.1",
@ -77,10 +77,9 @@
"stylelint-processor-styled-components": "1.10.0",
"stylelint-webpack-plugin": "^2.2.1",
"supertest": "6.1.6",
"terser-webpack-plugin": "5.1.4",
"terser-webpack-plugin": "5.2.0",
"url-loader": "4.1.1",
"validator": "13.6.0",
"wait-on": "5.2.0",
"webpack": "5.33.2",
"webpack-bundle-analyzer": "3.8.0",
"webpack-bundle-size-analyzer": "3.1.0",

@ -44,7 +44,7 @@
"compression": "1.7.4",
"cors": "2.8.5",
"express": "4.17.1",
"express-rate-limit": "5.2.3",
"express-rate-limit": "5.3.0",
"lodash": "4.17.21"
},
"devDependencies": {

@ -22,7 +22,7 @@
},
"devDependencies": {
"autocannon": "7.4.0",
"node-fetch": "2.6.1",
"node-fetch": "3.0.0-beta.6-exportfix",
"ts-node": "10.2.1"
}
}

@ -21,7 +21,6 @@ module.exports = {
'<rootDir>/../tools',
'<rootDir>/../wiki',
'<rootDir>/../systemd',
'<rootDir>/../flow-typed',
'<rootDir>unit/partials/mock-store/.*/package.json',
'<rootDir>functional/store/.*/package.json',
'<rootDir>/../build',

@ -46,7 +46,7 @@
"devDependencies": {
"@verdaccio/types": "workspace:11.0.0-6-next.7",
"body-parser": "1.19.0",
"node-html-parser": "2.2.1",
"node-html-parser": "4.1.4",
"supertest": "6.1.6",
"verdaccio-auth-memory": "workspace:11.0.0-alpha.3",
"verdaccio-memory": "workspace:11.0.0-6-next.4"

659
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

@ -4,8 +4,8 @@
"version": "1.0.1-alpha.0",
"dependencies": {
"debug": "4.3.2",
"npm": "7.0.15",
"pnpm": "5.13.5",
"npm": "7.21.1",
"pnpm": "6.14.5",
"request": "2.87.0",
"yarn": "1.22.11"
},

@ -10,7 +10,7 @@ module.exports = {
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'airbnb-typescript'
'@verdaccio/eslint-config'
],
rules: {
"@typescript-eslint/no-use-before-define": "warn",
@ -19,4 +19,4 @@ module.exports = {
"react/prop-types": "off",
"react/require-default-props": "off",
}
};
};

@ -1,7 +0,0 @@
{
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 120,
"useTabs": false
}

@ -54,9 +54,9 @@
"@tsconfig/docusaurus": "^1.0.2",
"docusaurus-plugin-sass": "^0.2.1",
"esbuild": "0.12.24",
"esbuild-loader": "^2.13.1",
"esbuild-loader": "2.15.1",
"prism-react-renderer": "^1.2.1",
"sass": "^1.35.2",
"sass": "1.38.2",
"sass-loader": "^12.1.0",
"url-loader": "4.1.1"
}

@ -32,8 +32,7 @@ const CommandWithLogo = ({ image, command, alt }: CommandWithLogoProps): React.R
aria-label={translate({
message: 'Copy code to clipboard',
})}
onClick={handleCopyCode}
>
onClick={handleCopyCode}>
{copied ? <Translate>Copied</Translate> : <Translate>Copy</Translate>}
</button>
</div>

@ -7,7 +7,10 @@ type DividerProps = {
spacer?: number;
};
const Divider = ({ vertical, spacer }: DividerProps): React.ReactElement => (
<div className={clsx(styles.divider, vertical && styles['divider--vertical'])} style={{ margin: `${spacer}rem` }} />
<div
className={clsx(styles.divider, vertical && styles['divider--vertical'])}
style={{ margin: `${spacer}rem` }}
/>
);
export default Divider;

@ -1,6 +1,6 @@
import React from 'react';
import Translate, { translate } from '@docusaurus/Translate';
import useBaseUrl from '@docusaurus/useBaseUrl';
import { useBaseUrlUtils } from '@docusaurus/useBaseUrl';
import { Link } from '@docusaurus/router';
import FeatureCard from './FeatureCard';
@ -41,19 +41,23 @@ const FEATURES = [
},
];
const Features = (): React.ReactElement => (
<section className={styles.features}>
<div className={styles['features--wrap']}>
{FEATURES.map(({ image, title, subtitle }) => (
<FeatureCard key={title} image={useBaseUrl(image)} title={title} subtitle={subtitle} />
))}
</div>
<div className={styles.linkFeatures}>
<Link to={useBaseUrl('/docs/configuration')} className="link-primary">
<Translate>Discover more features</Translate>
</Link>
</div>
</section>
);
const Features = (): React.ReactElement => {
const { withBaseUrl } = useBaseUrlUtils();
return (
<section className={styles.features}>
<div className={styles['features--wrap']}>
{FEATURES.map(({ image, title, subtitle }) => (
<FeatureCard key={title} image={withBaseUrl(image)} title={title} subtitle={subtitle} />
))}
</div>
<div className={styles.linkFeatures}>
<Link to={withBaseUrl('/docs/configuration')} className="link-primary">
<Translate>Discover more features</Translate>
</Link>
</div>
</section>
);
};
export default Features;

@ -13,7 +13,11 @@ const Header = (): React.ReactElement => {
return (
<div className={styles.header}>
<div className={styles['header--wrap']}>
<img className={styles['header--imageLogo']} src={useBaseUrl('/img/verdaccio-tiny.svg')} alt="Verdaccio Logo" />
<img
className={styles['header--imageLogo']}
src={useBaseUrl('/img/verdaccio-tiny.svg')}
alt="Verdaccio Logo"
/>
<div className={styles['header--mt-2']}>
<h1 className={styles['header--title']}>Verdaccio</h1>
<p className={styles['header--subtitle']}>
@ -26,7 +30,9 @@ const Header = (): React.ReactElement => {
<Link to={useBaseUrl('/docs/what-is-verdaccio')} className="link-primary">
<Translate>GET STARTED</Translate>
</Link>
<a href="https://github.com/verdaccio/verdaccio/blob/master/CONTRIBUTING.md" className="link-secondary">
<a
href="https://github.com/verdaccio/verdaccio/blob/master/CONTRIBUTING.md"
className="link-secondary">
<Translate>CONTRIBUTE</Translate>
</a>
</div>
@ -40,7 +46,10 @@ const Header = (): React.ReactElement => {
</div>
<div className={styles['header--absolute-links']}>
<div>
<Follow username="verdaccio_npm" options={{ size: 'large', dnt: true, lang: i18n.currentLocale }} />
<Follow
username="verdaccio_npm"
options={{ size: 'large', dnt: true, lang: i18n.currentLocale }}
/>
</div>
</div>
</div>

@ -45,9 +45,10 @@ const PackageManagers = (): React.ReactElement => (
npm: <b>npm</b>,
yarn: <b>yarn</b>,
pnpm: <b>pnpm</b>,
}}
>
{'Package managers such as {npm}, {yarn}, and {pnpm} are part of any development workflow.'}
}}>
{
'Package managers such as {npm}, {yarn}, and {pnpm} are part of any development workflow.'
}
</Translate>
</p>
</div>
@ -73,9 +74,10 @@ const PackageManagers = (): React.ReactElement => (
values={{
docker: <b>Docker</b>,
helm: <b>Kubernetes Helm</b>,
}}
>
{'We have an official {docker} image ready to use and {helm} support for easy deployment.'}
}}>
{
'We have an official {docker} image ready to use and {helm} support for easy deployment.'
}
</Translate>
</p>
</div>

@ -16,11 +16,13 @@ .loader {
}
@-webkit-keyframes load6 {
0% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em,
0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em,
0 -0.83em 0 -0.477em;
}
10%,
59% {
@ -32,20 +34,23 @@ .loader {
-0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
-0.82em -0.09em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em,
-0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em,
0 -0.83em 0 -0.477em;
}
}
@keyframes load6 {
0% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em,
0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em,
0 -0.83em 0 -0.477em;
}
10%,
59% {
@ -57,11 +62,12 @@ @keyframes load6 {
-0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
-0.82em -0.09em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em,
-0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em,
0 -0.83em 0 -0.477em;
}
}
@-webkit-keyframes round {

@ -9,8 +9,7 @@ const Testimonials = (): React.ReactElement => (
<Translate
values={{
italicVerdaccio: <i>Verdaccio</i>,
}}
>
}}>
{"Here's what people have to say about {italicVerdaccio}"}
</Translate>
</h3>
@ -27,7 +26,9 @@ const Testimonials = (): React.ReactElement => (
/>
</div>
<p>
<Translate>Many greats developers and companies are enjoying Verdaccio, join the community!</Translate>
<Translate>
Many greats developers and companies are enjoying Verdaccio, join the community!
</Translate>
</p>
</section>
);

@ -9,7 +9,7 @@ import useClampedIsInViewport from './hooks/useClampedIsInViewport';
import styles from './TwitterCarrousel.module.scss';
const Carrousel = ({ data }: { data: Array<Array<string>> }): React.ReactElement => {
const Carrousel = ({ data }: { data: string[][] }): React.ReactElement => {
const { isDarkTheme } = useThemeContext();
const { i18n } = useDocusaurusContext();
const [page, setPage] = useState(0);
@ -26,7 +26,7 @@ const Carrousel = ({ data }: { data: Array<Array<string>> }): React.ReactElement
setPage(pageToGo);
setLoading(true);
},
[page],
[page]
);
return (

@ -25,7 +25,12 @@ const UsedBy = (): React.ReactElement => (
url: 'https://www.gatsbyjs.com/',
},
].map((sponsor) => (
<SponsorImage key={sponsor.name} name={sponsor.name} image={sponsor.image} url={sponsor.url} />
<SponsorImage
key={sponsor.name}
name={sponsor.name}
image={sponsor.image}
url={sponsor.url}
/>
))}
<Divider vertical />
<b>
@ -63,7 +68,12 @@ const UsedBy = (): React.ReactElement => (
url: 'https://storybook.js.org/',
},
].map((sponsor) => (
<SponsorImage key={sponsor.name} name={sponsor.name} image={sponsor.image} url={sponsor.url} />
<SponsorImage
key={sponsor.name}
name={sponsor.name}
image={sponsor.image}
url={sponsor.url}
/>
))}
</div>
<p className={styles['usedBy--footer']}>

@ -13,11 +13,12 @@ const WhatIs = (): React.ReactElement => (
</h1>
<p className={styles['whatIs--p']}>
<Translate>
Verdaccio is a simple, zero-config-required local private NPM registry. No need for an entire database just to
get started. Verdaccio comes out of the box with its own tiny database, and the ability to proxy other
registries (eg. npmjs.org), also introduces caching the downloaded modules along the way. For those who are
looking to extend their storage capabilities, Verdaccio supports various community-made plugins to hook into
services such as Amazon&apos;s S3, Google Cloud Storage or create your own plugin.
Verdaccio is a simple, zero-config-required local private NPM registry. No need for an
entire database just to get started. Verdaccio comes out of the box with its own tiny
database, and the ability to proxy other registries (eg. npmjs.org), also introduces caching
the downloaded modules along the way. For those who are looking to extend their storage
capabilities, Verdaccio supports various community-made plugins to hook into services such
as Amazon&apos;s S3, Google Cloud Storage or create your own plugin.
</Translate>
</p>
<Link to={useBaseUrl('/docs/installation')} className="link-primary">

@ -5,7 +5,9 @@ import Translate, { translate } from '@docusaurus/Translate';
import styles from './contributors.module.scss';
const Contributors = (): React.ReactElement => (
<Layout title="Contributors" description="Verdaccio Contributors, thanks to the community Verdaccio keeps running">
<Layout
title="Contributors"
description="Verdaccio Contributors, thanks to the community Verdaccio keeps running">
<div className={styles.wrapper}>
<header>
<h1>
@ -13,8 +15,8 @@ const Contributors = (): React.ReactElement => (
</h1>
<p>
<Translate>
Thanks to everyone involved in maintaining and improving Verdaccio, this page is to thank you every minute
spent here.
Thanks to everyone involved in maintaining and improving Verdaccio, this page is to
thank you every minute spent here.
</Translate>{' '}
<b>
<Translate>Thanks</Translate>

@ -9,13 +9,114 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './help.module.scss';
const _SupportLinks = (lang: string) => [
{
title: 'Browse Docs',
content: (
<Translate
values={{
link: (
<Link to={useBaseUrl('/docs/what-is-verdaccio')}>
<Translate>documentation on this site</Translate>
</Link>
),
}}>
{'Learn more about Verdaccio using the {link}'}
</Translate>
),
},
{
title: 'Twitter',
content: (
<Translate
values={{
follow: (
<Follow username="verdaccio_npm" options={{ showCount: false, dnt: true, lang }} />
),
}}>
{'You can follow and contact us on {follow}'}
</Translate>
),
},
{
title: 'GitHub',
content: (
<Translate
values={{
link: (
<a href="https://github.com/verdaccio/verdaccio/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Aquestion+">
<Translate>Question Database</Translate>
</a>
),
}}>
{'If the documentation is not enough help, you can try browsing into our {link}'}
</Translate>
),
},
{
title: 'Stackoverflow',
content: (
<Translate
values={{
link: (
<a href="https://stackoverflow.com/questions/tagged/verdaccio">
<Translate>Stackoverflow Questions</Translate>
</a>
),
}}>
{'Browse questions at Stackoverflow also could be useful {link}'}
</Translate>
),
},
{
title: 'Discord',
content: (
<Translate
values={{
link: <a href="https://discord.gg/T7gJmBM6nv">Discord</a>,
}}>
{'and also you can chat with the Verdaccio community at {link}'}
</Translate>
),
},
{
title: 'pnpm Chat',
content: (
<Translate
values={{
link: (
<a href="https://discord.gg/PKwUpW">
<Translate>Community Chat</Translate>
</a>
),
}}>
{'If you have specific pnpm questions, join their community chat {link}'}
</Translate>
),
},
{
title: 'Yarn Chat',
content: (
<Translate
values={{
link: (
<a href="https://discord.gg/x9F2jJ">
<Translate>Community Chat</Translate>
</a>
),
}}>
{'If you have specific yarn questions, join their community chat {link}'}
</Translate>
),
},
];
const Help = (): React.ReactElement => {
const { i18n } = useDocusaurusContext();
return (
<Layout
title="Help"
description="Verdaccio Help, where you'll find all the links to find help and assistance from Verdaccio contributors"
>
description="Verdaccio Help, where you'll find all the links to find help and assistance from Verdaccio contributors">
<div className={styles.wrapper}>
<header>
<h1>
@ -26,8 +127,14 @@ const Help = (): React.ReactElement => {
</p>
</header>
<main className={clsx(styles.grid, styles['items-center'], styles['grid-2-1fr'])}>
<div className={clsx(styles.grid, styles['mt-2'], styles['grid-columns-fill'], styles['gap-2'])}>
{SUPPORT_LINKS(i18n.currentLocale).map((supportSections) => (
<div
className={clsx(
styles.grid,
styles['mt-2'],
styles['grid-columns-fill'],
styles['gap-2']
)}>
{_SupportLinks(i18n.currentLocale).map((supportSections) => (
<article className={styles['article-card']} key={supportSections.title}>
<h2>{supportSections.title}</h2>
<p>{supportSections.content}</p>
@ -49,110 +156,3 @@ const Help = (): React.ReactElement => {
};
export default Help;
const SUPPORT_LINKS = (lang: string) => [
{
title: 'Browse Docs',
content: (
<Translate
values={{
link: (
<Link to={useBaseUrl('/docs/what-is-verdaccio')}>
<Translate>documentation on this site</Translate>
</Link>
),
}}
>
{'Learn more about Verdaccio using the {link}'}
</Translate>
),
},
{
title: 'Twitter',
content: (
<Translate
values={{
follow: <Follow username="verdaccio_npm" options={{ showCount: false, dnt: true, lang }} />,
}}
>
{'You can follow and contact us on {follow}'}
</Translate>
),
},
{
title: 'GitHub',
content: (
<Translate
values={{
link: (
<a href="https://github.com/verdaccio/verdaccio/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Aquestion+">
<Translate>Question Database</Translate>
</a>
),
}}
>
{'If the documentation is not enough help, you can try browsing into our {link}'}
</Translate>
),
},
{
title: 'Stackoverflow',
content: (
<Translate
values={{
link: (
<a href="https://stackoverflow.com/questions/tagged/verdaccio">
<Translate>Stackoverflow Questions</Translate>
</a>
),
}}
>
{'Browse questions at Stackoverflow also could be useful {link}'}
</Translate>
),
},
{
title: 'Discord',
content: (
<Translate
values={{
link: <a href="https://discord.gg/T7gJmBM6nv">Discord</a>,
}}
>
{'and also you can chat with the Verdaccio community at {link}'}
</Translate>
),
},
{
title: 'pnpm Chat',
content: (
<Translate
values={{
link: (
<a href="https://discord.gg/PKwUpW">
<Translate>Community Chat</Translate>
</a>
),
}}
>
{'If you have specific pnpm questions, join their community chat {link}'}
</Translate>
),
},
{
title: 'Yarn Chat',
content: (
<Translate
values={{
link: (
<a href="https://discord.gg/x9F2jJ">
<Translate>Community Chat</Translate>
</a>
),
}}
>
{'If you have specific yarn questions, join their community chat {link}'}
</Translate>
),
},
];