Tim/new landing page

docusaurus.config.js

@@ -1,8 +1,8 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const lightCodeTheme = require('prism-react-renderer').themes.github;
+const darkCodeTheme = require('prism-react-renderer').themes.dracula;
 
 // [item, [[], [], []]]
 const apiConfig = require('./dev-docs-openapi.js');
@@ -31,7 +31,11 @@ const config = {
     'src/css/custom.css',
     {
       href: 'https://cdn.tailwindcss.com/2.2.19/tailwind.min.css'
-    }
+    },
+    {
+      href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap',
+      rel: 'stylesheet',
+    },
   ],
   title: 'Your Dev-Docs',
   tagline: 'Lets Dev-Doc and Roll',
@@ -45,15 +49,19 @@ const config = {
   // If you aren't using GitHub pages, you don't need these.
   organizationName: 'facebook', // Usually your GitHub org/user name.
   projectName: 'docusaurus', // Usually your repo name.
-  plugins: ['docusaurus-plugin-sass', "@orama/plugin-docusaurus",
+  plugins: [
+    'docusaurus-plugin-sass',
+    // "@orama/plugin-docusaurus",
+    // '@docusaurus/plugin-content-docs',
     [
       'docusaurus-plugin-openapi-docs',
       {
         id: "apiDocs",
         docsPluginId: "classic",
         config: openApiCongfig
       },
-    ], async function myPlugin(context, options) {
+    ],
+    async function myPlugin(context, options) {
       return {
         name: "docusaurus-tailwindcss",
         configurePostCss(postcssOptions) {
@@ -81,7 +89,7 @@ const config = {
       ({
         docs: {
           docItemComponent: "@theme/ApiItem",
-          docLayoutComponent: "@theme/DocPage",
+          // docLayoutComponent: "@theme/DocPage",
           sidebarPath: require.resolve('./sidebars.js'),
           sidebarCollapsed: true,
           // Please change this to your repo.
@@ -101,7 +109,7 @@ const config = {
                 console.log("###########")
                 console.log(blogPosts)
                 return defaultCreateFeedItems({
-              
+
                   // keep only the 10 most recent blog posts in the feed
                   blogPosts: blogPosts.filter((item, index) => index < 10),
                   ...rest,

package.json

@@ -18,85 +18,92 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "2.4.3",
-    "@docusaurus/preset-classic": "2.4.3",
-    "@docusaurus/theme-live-codeblock": "2.4.3",
-    "@fontsource/inter": "^5.0.8",
+    "@docusaurus/core": "^3.5.2",
+    "@docusaurus/plugin-content-docs": "^3.5.2",
+    "@docusaurus/preset-classic": "^3.5.2",
+    "@docusaurus/theme-live-codeblock": "^3.5.2",
+    "@fontsource/inter": "^5.1.0",
     "@gocapsule/column-extension": "^1.0.0-beta-3",
-    "@lyrasearch/plugin-docusaurus": "^0.0.2",
-    "@mdx-js/react": "^1.6.22",
-    "@monaco-editor/react": "^4.4.6",
-    "@orama/orama": "^1.2.6",
-    "@orama/plugin-docusaurus": "^1.2.6",
+    "@lyrasearch/plugin-docusaurus": "^0.1.0",
+    "@mdx-js/react": "^3.0.1",
+    "@monaco-editor/react": "^4.6.0",
+    "@orama/orama": "^2.1.0",
+    "@orama/plugin-docusaurus": "^2.1.0",
     "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@tabler/icons-react": "^2.46.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@react-three/fiber": "^8.17.7",
+    "@tabler/icons-react": "^3.16.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tiptap/core": "^2.0.0-beta.205",
-    "@tiptap/extension-code-block-lowlight": "^2.0.3",
-    "@tiptap/extension-color": "^2.0.0-beta.212",
-    "@tiptap/extension-image": "^2.0.0-beta.202",
-    "@tiptap/extension-link": "^2.0.0-beta.213",
-    "@tiptap/extension-table": "^2.0.0-beta.217",
-    "@tiptap/extension-table-cell": "^2.0.0-beta.217",
-    "@tiptap/extension-table-header": "^2.0.0-beta.217",
-    "@tiptap/extension-table-row": "^2.0.0-beta.217",
-    "@tiptap/extension-task-item": "^2.0.0-beta.213",
-    "@tiptap/extension-task-list": "^2.0.0-beta.213",
-    "@tiptap/extension-text-align": "^2.0.0-beta.212",
-    "@tiptap/extension-text-style": "^2.0.0-beta.212",
-    "@tiptap/pm": "^2.0.0-beta.212",
-    "@tiptap/react": "^2.0.0-beta.202",
-    "@tiptap/starter-kit": "^2.0.0-beta.202",
-    "autoprefixer": "^10.4.16",
-    "axios": "^1.3.4",
-    "cheerio": "^1.0.0-rc.12",
-    "chroma-js": "^2.4.2",
+    "@tiptap/core": "^2.6.6",
+    "@tiptap/extension-code-block-lowlight": "^2.6.6",
+    "@tiptap/extension-color": "^2.6.6",
+    "@tiptap/extension-image": "^2.6.6",
+    "@tiptap/extension-link": "^2.6.6",
+    "@tiptap/extension-table": "^2.6.6",
+    "@tiptap/extension-table-cell": "^2.6.6",
+    "@tiptap/extension-table-header": "^2.6.6",
+    "@tiptap/extension-table-row": "^2.6.6",
+    "@tiptap/extension-task-item": "^2.6.6",
+    "@tiptap/extension-task-list": "^2.6.6",
+    "@tiptap/extension-text-align": "^2.6.6",
+    "@tiptap/extension-text-style": "^2.6.6",
+    "@tiptap/pm": "^2.6.6",
+    "@tiptap/react": "^2.6.6",
+    "@tiptap/starter-kit": "^2.6.6",
+    "@types/three": "^0.168.0",
+    "autoprefixer": "^10.4.20",
+    "axios": "^1.7.7",
+    "caniuse-lite": "^1.0.30001660",
+    "cheerio": "^1.0.0",
+    "chroma-js": "^3.1.1",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
-    "docusaurus-plugin-openapi-docs": "^2.0.1",
+    "clsx": "^2.1.1",
+    "docusaurus-plugin-openapi-docs": "^4.0.1",
     "docusaurus-plugin-sass": "^0.2.2",
-    "docusaurus-theme-openapi-docs": "^2.0.1",
-    "embla-carousel-react": "^8.0.2",
-    "framer-motion": "^6.5.1",
-    "highlight.js": "^11.8.0",
+    "docusaurus-theme-openapi-docs": "^4.0.1",
+    "embla-carousel-react": "^8.2.1",
+    "framer-motion": "^11.8.0",
+    "highlight.js": "^11.10.0",
     "js-yaml": "^4.1.0",
-    "lowlight": "^2.9.0",
-    "lucide-react": "^0.294.0",
-    "marked": "^4.2.12",
+    "lowlight": "^3.1.0",
+    "lucide-react": "^0.441.0",
+    "marked": "^14.1.2",
     "mini-svg-data-uri": "^1.4.4",
-    "postcss": "^8.4.32",
-    "postcss-import": "^15.1.0",
-    "prism-react-renderer": "^1.3.5",
-    "prosemirror-history": "^1.3.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-monaco-editor": "^0.52.0",
+    "postcss": "^8.4.45",
+    "postcss-import": "^16.1.0",
+    "prism-react-renderer": "^2.4.0",
+    "prosemirror-history": "^1.4.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-monaco-editor": "^0.56.1",
     "react-resizable": "^3.0.5",
-    "rehype-react": "^7.1.2",
-    "rehype-sanitize": "^5.0.1",
-    "remark": "^14.0.2",
-    "remark-parse": "^10.0.1",
+    "react-router-dom": "^6.26.2",
+    "react-transition-group": "^4.4.5",
+    "rehype-react": "^8.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark": "^15.0.1",
+    "remark-parse": "^11.0.0",
     "remark-react": "^9.0.1",
-    "remark-rehype": "^10.1.0",
-    "sass": "^1.56.0",
-    "sharp": "^0.33.2",
-    "simplex-noise": "^4.0.1",
-    "tailwind-merge": "^2.1.0",
-    "tailwindcss": "^3.3.6",
+    "remark-rehype": "^11.1.0",
+    "sass": "^1.78.0",
+    "sharp": "^0.33.5",
+    "simplex-noise": "^4.0.3",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss": "^3.4.11",
     "tailwindcss-animate": "^1.0.7",
+    "three": "^0.168.0",
     "tiptap": "^1.32.2",
-    "unified": "^10.1.2"
+    "unified": "^11.0.5"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.4.3",
-    "@tsconfig/docusaurus": "^1.0.5",
-    "typescript": "^4.7.4"
+    "@docusaurus/module-type-aliases": "^3.5.2",
+    "@tsconfig/docusaurus": "^2.0.3",
+    "typescript": "^5.6.2"
   },
   "browserslist": {
     "production": [

src/components/MarkdownEditor.jsx

@@ -26,11 +26,14 @@ import js from 'highlight.js/lib/languages/javascript'
 import python from 'highlight.js/lib/languages/python'
 import ts from 'highlight.js/lib/languages/typescript'
 import html from 'highlight.js/lib/languages/xml'
-import { lowlight } from 'lowlight'
+// import lowlight from 'lowlight'
+import { createLowlight } from 'lowlight';
 import Accordion from "./Accordion";
 import Tabs from "./Tabs";
 import Heading from "@tiptap/extension-heading"
 
+const lowlight = createLowlight();
+
 const HeadingWithID = Heading.extend({
   addAttributes() {
     return {
@@ -58,7 +61,7 @@ export const inputRegex = /https:\/\/www\.youtube\.com\/[a-zA-Z?=\-0-9&_]+|https
 const Iframe = Node.create({
 	name: "iframe",
 	group: "block",
-	defaultOptions: {
+	addOptions: {
 		allowFullscreen: true,
 		HTMLAttributes: {
 			class: "iframe-wrapper"
@@ -102,11 +105,11 @@ const Iframe = Node.create({
 	},
 })
 
-lowlight.registerLanguage('html', html)
-lowlight.registerLanguage('css', css)
-lowlight.registerLanguage('js', js)
-lowlight.registerLanguage('ts', ts)
-lowlight.registerLanguage('python', python)
+lowlight.register('html', html)
+lowlight.register('css', css)
+lowlight.register('js', js)
+lowlight.register('ts', ts)
+lowlight.register('python', python)
 
 const MenuBar = ({ editor }) => {
   if (!editor) {