chore: upgrade docusaurus v2 to v3

homarr-labs · Dec 20, 2023 · 7e05e75 · 7e05e75
1 parent 4b01eee
commit 7e05e75
Show file tree

Hide file tree

Showing 7 changed files with 3,777 additions and 2,547 deletions.
diff --git a/docs/configuration/community/custom-widget.mdx b/docs/configuration/community/custom-widget.mdx
@@ -0,0 +1,32 @@
+```tsx
+const definition = defineWidget({
+  id: 'your-widget-name',
+  icon: IconClock,
+  options: {},
+  gridstack: {
+    minWidth: 1,
+    minHeight: 1,
+    maxWidth: 12,
+    maxHeight: 12,
+  },
+  component: YourWidgetTile,
+});
+
+export type IYourWidget = IWidget<(typeof definition)['id'], typeof definition>;
+
+interface YourWidgetTileProps {
+  widget: IYourWidget;
+}
+
+function YourWidgetTile({ widget }: YourWidgetTileProps) {
+  /* hooks go here */
+...
+
+  /* return JSX */
+  return (
+    <span>Hello World</span>
+  );
+}
+
+export default definition;
+```
diff --git a/docs/configuration/community/developer-guides.mdx b/docs/configuration/community/developer-guides.mdx
@@ -7,6 +7,8 @@ tags:
   - Programming
 ---
 
+import CustomWidgetCodeBlock from './custom-widget.mdx';
+
 :::caution
 
 Hold on! This is a technical documentation that
@@ -73,8 +75,8 @@ There are other packages as well, but those are not of significant importance to
 If you want to know those technologies are used for production builds & deplyoments, check out the [deployments section](#deployments).
 
 <details>
-  <summary>Online documentation</summary>
-  <div>
+<summary>Online documentation</summary>
+<div>
 
 The above only covers the application itself.
 For the online documentation, we are using different technologies
@@ -91,7 +93,7 @@ that builds the nessesary data at build.
 
 Graphs can be written using [mermaid.js](https://mermaid.js.org), which were in fact used for this page.
 
-  </div>
+</div>
 </details>
 
 ## Principles and conventions
@@ -204,42 +206,7 @@ Creating your own widget may look overwheling at first, but using this guide, it
 <ul>
 <li>Widgets are located in the directory <code>/src/widgets</code>. Choose a name for your widget and create a directory with this name</li>
 <li>Inside the directory, create a new <code>.tsx</code> file, that has the name of the widget, suffixed by <code>WidgetTile.tsx</code> (example: <code>VideoStreamWidgetTile.tsx</code>)</li>
-<li>Copy and paste the following code in your new file:
-
-```tsx
-const definition = defineWidget({
-  id: 'your-widget-name',
-  icon: IconClock,
-  options: {},
-  gridstack: {
-    minWidth: 1,
-    minHeight: 1,
-    maxWidth: 12,
-    maxHeight: 12,
-  },
-  component: YourWidgetTile,
-});
-
-export type IYourWidget = IWidget<(typeof definition)['id'], typeof definition>;
-
-interface YourWidgetTileProps {
-  widget: IYourWidget;
-}
-
-function YourWidgetTile({ widget }: YourWidgetTileProps) {
-    /* hooks go here */
-    ...
-
-    /* return JSX */
-    return (
-        <span>Hello World</span>
-    );
-}
-
-export default definition;
-```
-
-</li>
+<li>Copy and paste the following code in your new file: <CustomWidgetCodeBlock /></li>
 <li>Replace all <code>YourWidget</code> in the above example with your widget name.
 Now you can start writing the UI of your widget.</li>
 <li>If your widget makes requests over the network, it is recommended that

diff --git a/docs/configuration/customizations/board-customization.mdx b/docs/configuration/customizations/board-customization.mdx
@@ -54,7 +54,7 @@ To change the screen size you are editing, simply resize the browser.
 |-------------|------------|-------------------|
 | Large       | >1400px    | 10                |
 | Medium      | >768px     | 6                 |
-| Small       | <768px     | 3                 |
+| Small       | \<768px    | 3                 |
 
 The amount of columns can be configured in the gridstack settings.
 

diff --git a/docs/dashboards/widgets/media-server.mdx b/docs/dashboards/widgets/media-server.mdx
@@ -33,7 +33,7 @@ Check out our documentation on [editing tiles](/docs/getting-started/introductio
 Is the widget not working? Please try out the following tips and tricks to possibly resolve your issue:
 
 <Tabs>
-  <TabItem value="jellyfin" label="Jellyfin" default>
+<TabItem value="jellyfin" label="Jellyfin" default>
 
 
 - Use a URL that does not terminate on a single ``/`` or something like ``/web`` or ``index.html``. This may break the integration. Only use the main domain of your server.
@@ -42,8 +42,8 @@ Is the widget not working? Please try out the following tips and tricks to possi
 - Permit access to the required libraries and grant the required permissions.
 
 
-  </TabItem>
-  <TabItem value="plex" label="Plex">
+</TabItem>
+<TabItem value="plex" label="Plex">
 
 
 - Use a URL that does not terminate on a single ``/`` or something like ``/web`` or ``index.html``. This may break the integration. Only use the main domain of your server.
@@ -55,7 +55,7 @@ Is the widget not working? Please try out the following tips and tricks to possi
 - Permit access to the required libraries and grant the required permissions.
 
 
-  </TabItem>
+</TabItem>
 </Tabs>
 
 ---

diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -1,7 +1,6 @@
 /* eslint-disable no-undef */
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+import { themes as prismThemes } from 'prism-react-renderer';
 const a11yEmoji = require('@fec/remark-a11y-emoji');
 
 /** @type {import('@docusaurus/types').Config} */
@@ -46,6 +45,7 @@ const config = async function createConfig() {
             sidebarPath: require.resolve('./sidebars.js'),
             editUrl: 'https://github.com/ajnart/homarr-docs/edit/master',
             remarkPlugins: [a11yEmoji],
+            exclude: ['**/custom-widget.mdx']
           },
           blog: {
             showReadingTime: true,
@@ -186,8 +186,8 @@ const config = async function createConfig() {
           copyright: `Copyright © ${new Date().getFullYear()} Homarr — <a href="/docs/configuration/community/license">License</a>`,
         },
         prism: {
-          theme: lightCodeTheme,
-          darkTheme: darkCodeTheme,
+          theme: prismThemes.github,
+          darkTheme: prismThemes.dracula,
           defaultLanguage: 'bash',
         },
         colorMode: {

diff --git a/package.json b/package.json
@@ -19,38 +19,38 @@
   },
   "dependencies": {
     "@cmfcmf/docusaurus-search-local": "^0.11.0",
-    "@dipakparmar/docusaurus-plugin-umami": "^2.1.1",
-    "@docusaurus/core": "^2.4.3",
-    "@docusaurus/plugin-sitemap": "^2.4.3",
-    "@docusaurus/preset-classic": "^2.4.3",
-    "@mdx-js/react": "^1.6.22",
+    "@dipakparmar/docusaurus-plugin-umami": "^2.1.2",
+    "@docusaurus/core": "^3.0.1",
+    "@docusaurus/plugin-sitemap": "^3.0.1",
+    "@docusaurus/preset-classic": "^3.0.1",
+    "@mdx-js/react": "^3.0.0",
     "@tabler/icons": "^1.119.0",
     "autoprefixer": "^10.4.16",
     "clsx": "^1.2.1",
     "leader-line-new": "^1.1.9",
     "plugin-image-zoom": "^1.2.0",
-    "postcss": "^8.4.31",
-    "prism-react-renderer": "^1.3.5",
+    "postcss": "^8.4.32",
+    "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "swiper": "^9.4.1",
-    "tailwindcss": "^3.3.3"
+    "tailwindcss": "^3.4.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.4.3",
+    "@docusaurus/module-type-aliases": "^3.0.1",
     "@fec/remark-a11y-emoji": "^3.1.0",
     "@tsconfig/docusaurus": "^1.0.7",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "eslint": "^8.51.0",
+    "eslint": "^8.56.0",
     "eslint-plugin-markdown": "^3.0.1",
     "eslint-plugin-unused-imports": "^2.0.0",
     "prettier": "^2.8.8",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@docusaurus/theme-common": "^2.1.0",
-    "@docusaurus/theme-mermaid": "^2.4.3"
+    "@docusaurus/theme-common": "^3.0.1",
+    "@docusaurus/theme-mermaid": "^3.0.1"
   },
   "browserslist": {
     "production": [
@@ -63,5 +63,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "engines": {
+    "node": ">=18.0"
   }
 }