docs: add eslint (#4805)

* docs: add eslint

* chore: remove @eslint/css

* feat(docs): add custom eslint rule for css variables

* ci: check lint on css changes in docs

* ci: update lefthook configuration

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 (
     <div className={clsx('col col--4')}>
       <div className="text--center">

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;

docs/src/components/PlatformsList/PlatformsList.tsx

@@ -14,7 +14,7 @@ interface Platforms {
   types: Platform[];
 }
 
-function PlatformsList({types}: Platforms) {
+function PlatformsList({ types }: Platforms) {
   return (
     <p className={styles.paragraphStyle}>
       {types.length === 1 && !types.includes('All')

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.
- */
+/* Add your custom overrides below */

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 (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
-        <img src="./img/twg-logo.png" alt="TheWidlarzGroup Logo" className={styles.logo} />
+        <img
+          src="./img/twg-logo.png"
+          alt="TheWidlarzGroup Logo"
+          className={styles.logo}
+        />
         <Heading as="h1" className="hero__title">
           {siteConfig.title}
         </Heading>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to={link}>
+          <Link className="button button--secondary button--lg" to={link}>
             Get Started
           </Link>
         </div>
@@ -46,11 +48,12 @@ function HomepageHeader() {
 }
 
 export default function Home(): ReactNode {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
       title={`${siteConfig.title}`}
-      description="Video player for React Native.">
+      description="Video player for React Native."
+    >
       <HomepageHeader />
       <main>
         <HomepageFeatures />