diff --git a/bun.lock b/bun.lock index e3e4b727..93abde6c 100644 --- a/bun.lock +++ b/bun.lock @@ -34,7 +34,7 @@ "@docusaurus/faster": "^3.8.1", "@docusaurus/preset-classic": "^3.8.1", "@mdx-js/react": "^3.0.0", - "@widlarzgroup/docusaurus-ui": "^0.0.2", + "@widlarzgroup/docusaurus-ui": "^0.0.3", "clsx": "^2.0.0", "docusaurus-lunr-search": "^3.6.0", "prism-react-renderer": "^2.3.0", @@ -45,8 +45,10 @@ "@docusaurus/module-type-aliases": "^3.8.1", "@docusaurus/tsconfig": "^3.8.1", "@docusaurus/types": "^3.8.1", + "@widlarzgroup/eslint-plugin-docusaurus": "^0.0.1", "docusaurus-plugin-llms": "^0.1.5", "docusaurus-plugin-typedoc": "^1.4.0", + "eslint": "^8.51.0", "typescript": "^5.2.2", }, }, @@ -1183,7 +1185,9 @@ "@webassemblyjs/wast-printer": ["@webassemblyjs/wast-printer@1.14.1", "", { "dependencies": { "@webassemblyjs/ast": "1.14.1", "@xtuc/long": "4.2.2" } }, "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw=="], - "@widlarzgroup/docusaurus-ui": ["@widlarzgroup/docusaurus-ui@0.0.2", "", { "peerDependencies": { "@docusaurus/core": "^3.9.2", "@docusaurus/theme-classic": "^3.9.2", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-ncO/RddO1/WwpRk+xs9GuQWbEWM2sy6Kj7byjwIyMfvcAqeyHJjXIASxLPCGqty+FPoEVqnBu1ASBez12tYABg=="], + "@widlarzgroup/docusaurus-ui": ["@widlarzgroup/docusaurus-ui@0.0.3", "", { "peerDependencies": { "@docusaurus/core": "^3.9.2", "@docusaurus/theme-classic": "^3.9.2", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-Yf6RAG9phlapVlDQDRp6NvTr67GrSDNC4VpFEtBYGhfC5gR7UKX79+iBkJQlBFCSKQC4KR8kmNpDqxz4UQAnBQ=="], + + "@widlarzgroup/eslint-plugin-docusaurus": ["@widlarzgroup/eslint-plugin-docusaurus@0.0.1", "", { "peerDependencies": { "@widlarzgroup/docusaurus-ui": "*", "eslint": ">=8.0.0" } }, "sha512-LKvLrUS5mqenAM3vgMPhcUR1dL2oc20xGJY3/zQX3NJuxWwnQf+qZQb04yE3QHoT1o/yup0M59Xfb0/pm/AnWQ=="], "@xmldom/xmldom": ["@xmldom/xmldom@0.8.11", "", {}, "sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw=="], diff --git a/docs/.eslintrc.js b/docs/.eslintrc.js new file mode 100644 index 00000000..d69fb1ea --- /dev/null +++ b/docs/.eslintrc.js @@ -0,0 +1,20 @@ +module.exports = { + root: true, + extends: ["../config/.eslintrc.js"], + parserOptions: { + tsconfigRootDir: __dirname, + project: true, + }, + plugins: ['@widlarzgroup/docusaurus'], + settings: { + '@widlarzgroup/docusaurus': { + extend: ['src/css/custom.css'], + }, + }, + overrides: [ + { + files: ['**/*.css'], + processor: '@widlarzgroup/docusaurus/.css', + }, + ], +}; diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts index 5379db51..75e2cc9b 100644 --- a/docs/docusaurus.config.ts +++ b/docs/docusaurus.config.ts @@ -20,7 +20,7 @@ const config: Config = { future: { experimental_faster: true, - v4: true + v4: true, }, i18n: { @@ -37,7 +37,7 @@ const config: Config = { lastVersion: '6.x', includeCurrentVersion: true, versions: { - current: { + 'current': { label: 'v7 Beta', path: 'v7', banner: 'none', @@ -105,8 +105,8 @@ const config: Config = { { type: 'docsVersionDropdown', versions: { - current: {label: 'v7 Beta'}, - '6.x': {label: 'v6'}, + 'current': { label: 'v7 Beta' }, + '6.x': { label: 'v6' }, }, position: 'right', }, @@ -154,7 +154,7 @@ const config: Config = { { name: 'API Reference', entryPoints: ['../packages/react-native-video/src'], - exclude: "../packages/react-native-video/src/index.ts", + exclude: '../packages/react-native-video/src/index.ts', tsconfig: '../packages/react-native-video/tsconfig.json', out: './docs/api-reference', watch: process.env.TYPEDOC_WATCH, @@ -162,12 +162,12 @@ const config: Config = { excludeProtected: true, excludeExternals: true, excludeInternal: true, - readme: "none", + readme: 'none', sidebar: { autoConfiguration: false, }, - parametersFormat: "table", - enumMembersFormat: "table", + parametersFormat: 'table', + enumMembersFormat: 'table', useCodeBlocks: true, }, ], @@ -178,10 +178,10 @@ const config: Config = { id: 'llms-v6', generateLLMsTxt: false, generateLLMsFullTxt: false, - docsDir: "versioned_docs/version-6.x", + docsDir: 'versioned_docs/version-6.x', pathTransformation: { ignorePaths: ['docs'], - addPaths: ['react-native-video/docs/v6'] + addPaths: ['react-native-video/docs/v6'], }, version: '6.x.x', customLLMFiles: [ @@ -199,8 +199,8 @@ const config: Config = { includePatterns: ['**/*.md', '**/*.mdx'], fullContent: true, }, - ] - } + ], + }, ], // LLMs txt generation for v7 [ @@ -209,10 +209,10 @@ const config: Config = { id: 'llms-v7', generateLLMsTxt: false, generateLLMsFullTxt: false, - docsDir: "docs", + docsDir: 'docs', pathTransformation: { ignorePaths: ['docs'], - addPaths: ['react-native-video/docs/v7'] + addPaths: ['react-native-video/docs/v7'], }, version: '7.x.x', customLLMFiles: [ @@ -229,10 +229,10 @@ const config: Config = { description: 'Complete documentation for React Native Video v7', includePatterns: ['docs/**/*.md'], fullContent: true, - } - ] - } - ] + }, + ], + }, + ], ], }; diff --git a/docs/package.json b/docs/package.json index 1d658499..fb513048 100644 --- a/docs/package.json +++ b/docs/package.json @@ -12,14 +12,15 @@ "serve": "docusaurus serve", "write-translations": "docusaurus write-translations", "write-heading-ids": "docusaurus write-heading-ids", - "typecheck": "tsc" + "typecheck": "tsc", + "lint": "eslint ." }, "dependencies": { "@docusaurus/core": "^3.8.1", "@docusaurus/faster": "^3.8.1", "@docusaurus/preset-classic": "^3.8.1", "@mdx-js/react": "^3.0.0", - "@widlarzgroup/docusaurus-ui": "^0.0.2", + "@widlarzgroup/docusaurus-ui": "^0.0.3", "clsx": "^2.0.0", "docusaurus-lunr-search": "^3.6.0", "prism-react-renderer": "^2.3.0", @@ -30,9 +31,11 @@ "@docusaurus/module-type-aliases": "^3.8.1", "@docusaurus/tsconfig": "^3.8.1", "@docusaurus/types": "^3.8.1", - "typescript": "^5.2.2", + "@widlarzgroup/eslint-plugin-docusaurus": "^0.0.1", + "docusaurus-plugin-llms": "^0.1.5", "docusaurus-plugin-typedoc": "^1.4.0", - "docusaurus-plugin-llms": "^0.1.5" + "eslint": "^8.51.0", + "typescript": "^5.2.2" }, "browserslist": { "production": [ diff --git a/docs/sidebars.ts b/docs/sidebars.ts index 99df7651..54206272 100644 --- a/docs/sidebars.ts +++ b/docs/sidebars.ts @@ -1,60 +1,60 @@ -import type { SidebarsConfig } from "@docusaurus/plugin-content-docs"; +import type { SidebarsConfig } from '@docusaurus/plugin-content-docs'; const sidebars: SidebarsConfig = { docsSidebar: [ { - type: "autogenerated", - dirName: ".", + type: 'autogenerated', + dirName: '.', }, { - type: "html", + type: 'html', value: '
', }, { - type: "link", - label: "Example Apps", - href: "https://github.com/TheWidlarzGroup/react-native-video/tree/master/example", + type: 'link', + label: 'Example Apps', + href: 'https://github.com/TheWidlarzGroup/react-native-video/tree/master/example', }, { - type: "doc", - label: "Useful Projects", - id: "projects", + type: 'doc', + label: 'Useful Projects', + id: 'projects', }, { - type: "html", + type: 'html', value: '
', }, { - type: "link", - label: "Offline Video SDK", - href: "https://www.thewidlarzgroup.com/offline-video-sdk/?utm_source=rnv&utm_medium=docs&utm_campaign=sidebar&utm_id=offline-video-sdk-button", + type: 'link', + label: 'Offline Video SDK', + href: 'https://www.thewidlarzgroup.com/offline-video-sdk/?utm_source=rnv&utm_medium=docs&utm_campaign=sidebar&utm_id=offline-video-sdk-button', }, { - type: "link", - label: "Enterprise Support", - href: "https://www.thewidlarzgroup.com/?utm_source=rnv&utm_medium=docs&utm_campaign=navbar&utm_id=enterprise#Contact", + type: 'link', + label: 'Enterprise Support', + href: 'https://www.thewidlarzgroup.com/?utm_source=rnv&utm_medium=docs&utm_campaign=navbar&utm_id=enterprise#Contact', }, { - type: "link", - label: "Boost Your Issue", - href: "https://www.thewidlarzgroup.com/issue-boost/?utm_source=rnv&utm_medium=docs&utm_campaign=sidebar&utm_id=issue-boost-button", + type: 'link', + label: 'Boost Your Issue', + href: 'https://www.thewidlarzgroup.com/issue-boost/?utm_source=rnv&utm_medium=docs&utm_campaign=sidebar&utm_id=issue-boost-button', }, { - type: "html", + type: 'html', value: '
', }, { - type: "doc", - label: "Updating", - id: "updating", + type: 'doc', + label: 'Updating', + id: 'updating', }, { - type: "link", - label: "Releases", - href: "https://github.com/TheWidlarzGroup/react-native-video/releases", + type: 'link', + label: 'Releases', + href: 'https://github.com/TheWidlarzGroup/react-native-video/releases', }, ], }; diff --git a/docs/src/components/HomepageFeatures/index.tsx b/docs/src/components/HomepageFeatures/index.tsx index 56799945..8bed550d 100644 --- a/docs/src/components/HomepageFeatures/index.tsx +++ b/docs/src/components/HomepageFeatures/index.tsx @@ -14,32 +14,24 @@ const FeatureList: FeatureItem[] = [ title: 'React Native First', Svg: require('@site/static/img/reactjs-icon.svg').default, description: ( - <> - React Native Video is a video player created for React Native. - + <>React Native Video is a video player created for React Native. ), }, { title: 'Multi Subtitles & Audio Tracks', Svg: require('@site/static/img/download-icon.svg').default, description: ( - <> - React Native Video supports multiple subtitles and audio tracks. - + <>React Native Video supports multiple subtitles and audio tracks. ), }, { title: 'DRM Protected Content', Svg: require('@site/static/img/drm-content-icon.svg').default, - description: ( - <> - React Native Video supports DRM protected content. - - ), + description: <>React Native Video supports DRM protected content., }, ]; -function Feature({title, Svg, description}: FeatureItem) { +function Feature({ title, Svg, description }: FeatureItem) { return (
diff --git a/docs/src/components/PlatformsList/PlatformsList.module.css b/docs/src/components/PlatformsList/PlatformsList.module.css index 230ac19b..2656e8cf 100644 --- a/docs/src/components/PlatformsList/PlatformsList.module.css +++ b/docs/src/components/PlatformsList/PlatformsList.module.css @@ -3,9 +3,6 @@ } .spanStyle { - /* font-family: var(--font-orbitron); - font-weight: 800; */ - font-family: "Orbitron", sans-serif; font-optical-sizing: auto; font-weight: 800; diff --git a/docs/src/components/PlatformsList/PlatformsList.tsx b/docs/src/components/PlatformsList/PlatformsList.tsx index 9570f23e..6e59a0d7 100644 --- a/docs/src/components/PlatformsList/PlatformsList.tsx +++ b/docs/src/components/PlatformsList/PlatformsList.tsx @@ -14,7 +14,7 @@ interface Platforms { types: Platform[]; } -function PlatformsList({types}: Platforms) { +function PlatformsList({ types }: Platforms) { return (

{types.length === 1 && !types.includes('All') diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 5a71deb4..15775321 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -1,7 +1,14 @@ +/** + * Custom CSS for this project. + * + * We import base styles from @widlarzgroup/docusaurus-ui which: + * - Overrides default Infima variables with our custom design system + * - Provides new CSS variables for colors (--color-accent-*, --color-secondary-*, etc.) + * - Adds custom component styles and utilities + * + * You can further customize any CSS variables here - they will take + * precedence over both Infima defaults and the imported package styles. + */ @import '@widlarzgroup/docusaurus-ui/css/custom.css'; -/** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. - */ \ No newline at end of file +/* Add your custom overrides below */ \ No newline at end of file diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index 0dba7b7f..3653f387 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -9,11 +9,11 @@ import { useMemo, type ReactNode } from 'react'; import styles from './index.module.css'; interface PreferredVersion { - preferredVersion: {label: string, mainDocId: string, path: string} | null; + preferredVersion: { label: string; mainDocId: string; path: string } | null; } function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); + const { siteConfig } = useDocusaurusContext(); const version = useDocsPreferredVersion() as PreferredVersion; @@ -28,15 +28,17 @@ function HomepageHeader() { return (

- TheWidlarzGroup Logo + TheWidlarzGroup Logo {siteConfig.title}

{siteConfig.tagline}

- + Get Started
@@ -46,11 +48,12 @@ function HomepageHeader() { } export default function Home(): ReactNode { - const {siteConfig} = useDocusaurusContext(); + const { siteConfig } = useDocusaurusContext(); return ( + description="Video player for React Native." + >
diff --git a/lefthook.yml b/lefthook.yml index 37d85095..329a1624 100644 --- a/lefthook.yml +++ b/lefthook.yml @@ -3,9 +3,15 @@ pre-commit: commands: lint: glob: "*.{js,ts,jsx,tsx}" + exclude: "docs/**/*" run: bun lint + lint-docs: + # using @widlarzgroup/eslint-plugin-docusaurus for CSS variable validation + root: "docs/" + glob: "**/*.{js,ts,jsx,tsx,css}" + run: bun run lint types: - glob: "*.{js,ts, jsx, tsx}" + glob: "*.{js,ts,jsx,tsx}" run: bun typecheck commit-msg: parallel: true