Add code higlighting

Author: MatiPl01

packages/docs/docusaurus.config.ts

@@ -29,12 +29,14 @@ const config: Config = {
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
   organizationName: 'MatiPl01', // Usually your GitHub org/user name.
-
   plugins: [
     function webpackPlugin() {
       return {
         configureWebpack() {
           return {
+            infrastructureLogging: {
+              level: 'error'
+            },
             mergeStrategy: {
               'resolve.extensions': 'prepend'
             },
@@ -73,7 +75,6 @@ const config: Config = {
       };
     }
   ],
-
   presets: [
     [
       'classic',

packages/docs/package.json

@@ -4,9 +4,9 @@
   "private": true,
   "scripts": {
     "browserslist:update": "npx update-browserslist-db@latest",
-    "docusaurus": "docusaurus",
-    "start": "docusaurus start",
-    "build": "docusaurus build",
+    "docusaurus": "BROWSERSLIST_IGNORE_OLD_DATA=1 docusaurus",
+    "start": "BROWSERSLIST_IGNORE_OLD_DATA=1 docusaurus start",
+    "build": "BROWSERSLIST_IGNORE_OLD_DATA=1 docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",

packages/docs/src/components/InteractiveExample/index.tsx

@@ -3,6 +3,7 @@ import { useColorMode } from '@docusaurus/theme-common';
 import CodeBlock from '@theme/CodeBlock';
 import { clsx } from 'clsx';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 import styles from './styles.module.css';
 
@@ -280,11 +281,11 @@ export default function InteractiveExample({
                   </div>
                 }>
                 {() => (
-                  <div className={styles.gestureHandlerRoot}>
+                  <GestureHandlerRootView className={styles.gestureHandlerRoot}>
                     <React.Fragment key={key}>
                       <Component />
                     </React.Fragment>
-                  </div>
+                  </GestureHandlerRootView>
                 )}
               </BrowserOnly>
             </div>

packages/docs/src/examples/AutoScroll.tsx

@@ -6,6 +6,7 @@ import Sortable from 'react-native-sortables';
 const DATA = Array.from({ length: 30 }, (_, index) => `Item ${index + 1}`);
 
 export default function AutoScrollExample() {
+  // highlight-next-line
   const scrollableRef = useAnimatedRef<Animated.ScrollView>();
 
   const renderItem = useCallback(
@@ -20,6 +21,7 @@ export default function AutoScrollExample() {
   return (
     <Animated.ScrollView
       contentContainerStyle={styles.contentContainer}
+      // highlight-next-line
       ref={scrollableRef}
       style={{
         height: 400 // Limit height to enable scrolling in demo
@@ -30,6 +32,7 @@ export default function AutoScrollExample() {
         data={DATA}
         renderItem={renderItem}
         rowGap={10}
+        // highlight-next-line
         scrollableRef={scrollableRef} // required for auto scroll
       />
     </Animated.ScrollView>

packages/docs/src/examples/CustomHandle.tsx

@@ -10,10 +10,12 @@ export default function CustomHandleExample() {
       <View style={styles.card}>
         <Text style={styles.text}>{item}</Text>
         {/* Wraps the handle component */}
+        {/* highlight-next-line */}
         <Sortable.Handle>
           <View style={styles.handle}>
             <Text style={styles.handleText}>::</Text>
           </View>
+          {/* highlight-next-line */}
         </Sortable.Handle>
       </View>
     ),
@@ -29,6 +31,7 @@ export default function CustomHandleExample() {
         overDrag='vertical'
         renderItem={renderItem}
         rowGap={10}
+        // highlight-next-line
         customHandle // must be set to use a custom handle
       />
     </View>

packages/docs/src/examples/DifferentHeights.tsx

@@ -9,6 +9,7 @@ const HEIGHTS = [120, 80, 150, 60, 100, 130, 90, 70, 110, 140, 50, 85];
 export default function DifferentItemHeightsExample() {
   const renderItem = useCallback(
     ({ index, item }: { item: string; index: number }) => (
+      // highlight-next-line
       <View style={[styles.card, { height: HEIGHTS[index % HEIGHTS.length] }]}>
         <Text style={styles.text}>{item}</Text>
       </View>

packages/docs/src/examples/DropIndicatorCustomComponent.tsx

@@ -84,6 +84,7 @@ export default function DropIndicatorCustomComponentExample() {
 
   return (
     <View style={styles.container}>
+      // highlight-next-line
       <Sortable.Grid
         columnGap={10}
         columns={3}

packages/docs/src/examples/DropIndicatorCustomStyle.tsx

@@ -16,6 +16,7 @@ export default function DropIndicatorCustomStyleExample() {
 
   return (
     <View style={styles.container}>
+      // highlight-next-line
       <Sortable.Grid
         columnGap={10}
         columns={3}

packages/docs/src/examples/DropIndicatorDefault.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import Sortable from 'react-native-sortables';
 
@@ -22,6 +22,7 @@ export default function DropIndicatorDefaultExample() {
         data={DATA}
         renderItem={renderItem}
         rowGap={10}
+        // highlight-next-line
         showDropIndicator
       />
     </View>

packages/docs/src/examples/FixedItems.tsx

@@ -3,12 +3,14 @@ import { StyleSheet, Text, View } from 'react-native';
 import Sortable from 'react-native-sortables';
 
 const DATA = Array.from({ length: 12 }, (_, index) => `Item ${index + 1}`);
-const FIXED_ITEMS = [DATA[0], DATA[7], DATA[11]];
+const FIXED_ITEMS = new Set([DATA[0], DATA[7], DATA[11]]);
 
 export default function FixedItemsExample() {
   const renderItem = useCallback(({ item }: { item: string }) => {
-    const isFixed = FIXED_ITEMS.includes(item);
+    const isFixed = FIXED_ITEMS.has(item);
+
     return (
+      // highlight-next-line
       <Sortable.Handle mode={isFixed ? 'fixed-order' : 'draggable'}>
         <View
           style={[
@@ -21,6 +23,7 @@ export default function FixedItemsExample() {
           ]}>
           <Text style={styles.text}>{item}</Text>
         </View>
+        {/* highlight-next-line */}
       </Sortable.Handle>
     );
   }, []);
@@ -33,6 +36,7 @@ export default function FixedItemsExample() {
         data={DATA}
         renderItem={renderItem}
         rowGap={10}
+        // highlight-next-line
         customHandle
       />
     </View>