From 49a552c1c1f4b956078da7b796a9722f797932bf Mon Sep 17 00:00:00 2001 From: Strek Date: Mon, 15 Nov 2021 23:53:25 +0530 Subject: [PATCH] Fix prettier CI and add it to pre commit (#4100) * Add prettier before commit and during CI * Add workflow * Reverse merge main to branch * dry run prettier * dry run prettier * [warn] jsxBracketSameLine is deprecated so replaced it to bracketSameLine * Revert "[warn] jsxBracketSameLine is deprecated so replaced it to bracketSameLine" This reverts commit 43dbe9ed3fba10b03a90d989cf90b4af4efd2212. * Revert "dry run prettier" This reverts commit b62948042cd8f8addf8ee23110de4096a8630926. * Revert "dry run prettier" This reverts commit 382f9a4691dee04673e461b3eda0d52c1aefda3b. * Revert "Reverse merge main to branch" This reverts commit 43667eaf29b9ab4266397251c8d781f611dcdcf8. * [warn] jsxBracketSameLine is deprecated so replaced it to bracketSameLine --- .github/workflows/beta_site_lint.yml | 27 +++ beta/.husky/pre-commit | 3 +- beta/.prettierrc | 2 +- beta/plugins/remark-header-custom-ids.js | 16 +- beta/src/components/Button.tsx | 6 +- beta/src/components/Layout/Nav/MobileNav.tsx | 3 +- beta/src/components/Layout/Nav/NavLink.tsx | 3 +- .../components/Layout/Sidebar/SidebarLink.tsx | 3 +- .../components/MDX/CodeBlock/CodeBlock.tsx | 162 +++++++++--------- beta/src/components/MDX/ExpandableExample.tsx | 6 +- beta/src/components/MDX/MDXComponents.tsx | 11 +- beta/src/components/Seo.tsx | 5 +- beta/src/utils/forwardRefWithAs.tsx | 2 +- 13 files changed, 142 insertions(+), 107 deletions(-) create mode 100644 .github/workflows/beta_site_lint.yml diff --git a/.github/workflows/beta_site_lint.yml b/.github/workflows/beta_site_lint.yml new file mode 100644 index 00000000..40d1c3f8 --- /dev/null +++ b/.github/workflows/beta_site_lint.yml @@ -0,0 +1,27 @@ +name: Beta Site Lint + +on: + pull_request: + types: [opened, synchronize, reopened] + +jobs: + lint: + runs-on: ubuntu-latest + + name: Lint on node 12.x and ubuntu-latest + + steps: + - uses: actions/checkout@v1 + - name: Use Node.js 12.x + uses: actions/setup-node@v1 + with: + node-version: 12.x + + - name: Install deps and build (with cache) + uses: bahmutov/npm-install@v1.6.0 + with: + working-directory: 'beta' + + + - name: Lint codebase + run: cd beta && yarn ci-check diff --git a/beta/.husky/pre-commit b/beta/.husky/pre-commit index 5911559f..76eedade 100755 --- a/beta/.husky/pre-commit +++ b/beta/.husky/pre-commit @@ -4,4 +4,5 @@ cd beta yarn generate-ids git add -u src/pages/**/*.md -yarn lint:fix \ No newline at end of file +yarn prettier +yarn lint:fix diff --git a/beta/.prettierrc b/beta/.prettierrc index 6ba2b300..36b8264e 100644 --- a/beta/.prettierrc +++ b/beta/.prettierrc @@ -1,7 +1,7 @@ { "bracketSpacing": false, "singleQuote": true, - "jsxBracketSameLine": true, + "bracketSameLine": true, "trailingComma": "es5", "printWidth": 80 } diff --git a/beta/plugins/remark-header-custom-ids.js b/beta/plugins/remark-header-custom-ids.js index e446fec1..bf51e98e 100644 --- a/beta/plugins/remark-header-custom-ids.js +++ b/beta/plugins/remark-header-custom-ids.js @@ -36,27 +36,27 @@ module.exports = ({ // A bit weird: this is to support MDX 2 comments in expressions, // while we’re still on MDX 1, which doesn’t support them. if (!tail || tail.type !== 'text' || tail.value !== '/}') { - return + return; } - tail = children[children.length - 2] + tail = children[children.length - 2]; if (!tail && tail.type !== 'emphasis') { - return + return; } - const id = toString(tail) + const id = toString(tail); - tail = children[children.length - 3] + tail = children[children.length - 3]; if (!tail || tail.type !== 'text' || !tail.value.endsWith('{/')) { - return + return; } // Remove the emphasis and trailing `/}` - children.splice(children.length - 2, 2) + children.splice(children.length - 2, 2); // Remove the `{/` - tail.value = tail.value.replace(/[ \t]*\{\/$/, '') + tail.value = tail.value.replace(/[ \t]*\{\/$/, ''); const data = patch(node, 'data', {}); diff --git a/beta/src/components/Button.tsx b/beta/src/components/Button.tsx index 7d318f4b..9d4d0cf2 100644 --- a/beta/src/components/Button.tsx +++ b/beta/src/components/Button.tsx @@ -32,8 +32,10 @@ export function Button({ className, 'text-base leading-tight font-bold border rounded-lg py-2 px-4 focus:ring-1 focus:ring-offset-2 focus:ring-link active:bg-link active:border-link active:text-white active:ring-0 active:ring-offset-0 outline-none inline-flex items-center my-1', { - 'bg-link border-link text-white hover:bg-link focus:bg-link active:bg-link': active, - 'bg-transparent text-secondary dark:text-secondary-dark bg-secondary-button dark:bg-secondary-button-dark hover:text-link focus:text-link border-transparent': !active, + 'bg-link border-link text-white hover:bg-link focus:bg-link active:bg-link': + active, + 'bg-transparent text-secondary dark:text-secondary-dark bg-secondary-button dark:bg-secondary-button-dark hover:text-link focus:text-link border-transparent': + !active, } )}> {children} diff --git a/beta/src/components/Layout/Nav/MobileNav.tsx b/beta/src/components/Layout/Nav/MobileNav.tsx index a6b6cc91..2b310b43 100644 --- a/beta/src/components/Layout/Nav/MobileNav.tsx +++ b/beta/src/components/Layout/Nav/MobileNav.tsx @@ -74,7 +74,8 @@ function TabButton({ const classes = cn( 'inline-flex items-center w-full border-b-2 justify-center text-base leading-9 px-3 py-0.5 hover:text-link hover:gray-5', { - 'text-link dark:text-link-dark dark:border-link-dark border-link font-bold': isActive, + 'text-link dark:text-link-dark dark:border-link-dark border-link font-bold': + isActive, 'border-transparent': !isActive, } ); diff --git a/beta/src/components/Layout/Nav/NavLink.tsx b/beta/src/components/Layout/Nav/NavLink.tsx index d97d63f5..3fddc6e1 100644 --- a/beta/src/components/Layout/Nav/NavLink.tsx +++ b/beta/src/components/Layout/Nav/NavLink.tsx @@ -16,7 +16,8 @@ interface NavLinkProps { export default function NavLink({href, children, isActive}: NavLinkProps) { const classes = cn( { - 'text-link border-link dark:text-link-dark dark:border-link-dark font-bold': isActive, + 'text-link border-link dark:text-link-dark dark:border-link-dark font-bold': + isActive, }, {'border-transparent': !isActive}, 'inline-flex w-full items-center border-b-2 justify-center text-base leading-9 px-3 py-0.5 hover:text-link dark:hover:text-link-dark whitespace-nowrap' diff --git a/beta/src/components/Layout/Sidebar/SidebarLink.tsx b/beta/src/components/Layout/Sidebar/SidebarLink.tsx index 93aa8e0d..72383a55 100644 --- a/beta/src/components/Layout/Sidebar/SidebarLink.tsx +++ b/beta/src/components/Layout/Sidebar/SidebarLink.tsx @@ -65,7 +65,8 @@ export function SidebarLink({ 'dark:text-primary-dark text-primary': heading, 'text-base text-secondary dark:text-secondary-dark': !selected && !heading, - 'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark': selected, + 'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark': + selected, } )}> {title} diff --git a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx index 95d44045..3ea90674 100644 --- a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx +++ b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx @@ -21,94 +21,90 @@ interface InlineHiglight { endColumn: number; } -const CodeBlock = React.forwardRef(function CodeBlock - ( - { - children, - className = 'language-js', - metastring, - noMargin, - noMarkers, - }: { - children: string; - className?: string; - metastring: string; - noMargin?: boolean; - noMarkers?: boolean; - }, - ref?: React.Ref - ) { - const getDecoratedLineInfo = () => { - if (!metastring) { - return []; - } +const CodeBlock = React.forwardRef(function CodeBlock( + { + children, + className = 'language-js', + metastring, + noMargin, + noMarkers, + }: { + children: string; + className?: string; + metastring: string; + noMargin?: boolean; + noMarkers?: boolean; + }, + ref?: React.Ref +) { + const getDecoratedLineInfo = () => { + if (!metastring) { + return []; + } - const linesToHighlight = getHighlightLines(metastring); - const highlightedLineConfig = linesToHighlight.map((line) => { - return { - className: 'bg-github-highlight dark:bg-opacity-10', - line, - }; - }); + const linesToHighlight = getHighlightLines(metastring); + const highlightedLineConfig = linesToHighlight.map((line) => { + return { + className: 'bg-github-highlight dark:bg-opacity-10', + line, + }; + }); - const inlineHighlightLines = getInlineHighlights(metastring, children); - const inlineHighlightConfig = inlineHighlightLines.map( - (line: InlineHiglight) => ({ - ...line, - elementAttributes: {'data-step': `${line.step}`}, - className: cn( - 'code-step bg-opacity-10 relative rounded-md p-1 ml-2', - { - 'pl-3 before:content-[attr(data-step)] before:block before:w-4 before:h-4 before:absolute before:top-1 before:-left-2 before:rounded-full before:text-white before:text-center before:text-xs before:leading-4': !noMarkers, - 'bg-blue-40 before:bg-blue-40': line.step === 1, - 'bg-yellow-40 before:bg-yellow-40': line.step === 2, - 'bg-green-40 before:bg-green-40': line.step === 3, - 'bg-purple-40 before:bg-purple-40': line.step === 4, - } - ), - }) - ); + const inlineHighlightLines = getInlineHighlights(metastring, children); + const inlineHighlightConfig = inlineHighlightLines.map( + (line: InlineHiglight) => ({ + ...line, + elementAttributes: {'data-step': `${line.step}`}, + className: cn('code-step bg-opacity-10 relative rounded-md p-1 ml-2', { + 'pl-3 before:content-[attr(data-step)] before:block before:w-4 before:h-4 before:absolute before:top-1 before:-left-2 before:rounded-full before:text-white before:text-center before:text-xs before:leading-4': + !noMarkers, + 'bg-blue-40 before:bg-blue-40': line.step === 1, + 'bg-yellow-40 before:bg-yellow-40': line.step === 2, + 'bg-green-40 before:bg-green-40': line.step === 3, + 'bg-purple-40 before:bg-purple-40': line.step === 4, + }), + }) + ); - return highlightedLineConfig.concat(inlineHighlightConfig); - }; + return highlightedLineConfig.concat(inlineHighlightConfig); + }; - // e.g. "language-js" - const language = className.substring(9); - const filename = '/index.' + language; - const decorators = getDecoratedLineInfo(); - return ( -
- + - - - - - - -
- ); - } -); + }, + }}> + + + + + + + + ); +}); export default CodeBlock; diff --git a/beta/src/components/MDX/ExpandableExample.tsx b/beta/src/components/MDX/ExpandableExample.tsx index 09939e46..3419b9ca 100644 --- a/beta/src/components/MDX/ExpandableExample.tsx +++ b/beta/src/components/MDX/ExpandableExample.tsx @@ -60,8 +60,10 @@ function ExpandableExample({