Add tutorials landing page (#940)

* progress * work on cards * Add logos * Add references cards * Adjust docs width * Add external icon * Update sidebar and remove old tutorial files * fix link
okteto · Dec 10, 2024 · 90a9b96 · 90a9b96
1 parent c14963e
commit 90a9b96
Show file tree

Hide file tree

Showing 102 changed files with 1,234 additions and 13,215 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -278,7 +278,7 @@ module.exports = {
               label: '1.21',
               path: '1.21',
               banner: 'unmaintained',
-            }
+            },
           },
           include: ['**/*.md', '**/*.mdx'],
         },
@@ -297,6 +297,16 @@ module.exports = {
     ],
   ],
   plugins: [
+    [
+      '@docusaurus/plugin-content-docs',
+      {
+        id: 'tutorials',
+        path: 'src/tutorials',
+        routeBasePath: 'tutorials',
+        sidebarPath: require.resolve('./sidebarTutorials.js'),
+        breadcrumbs: false,
+      },
+    ],
     'docusaurus-plugin-sass',
     [
       'docusaurus-plugin-copy',

diff --git a/package.json b/package.json
@@ -3,10 +3,10 @@
   "version": "3.1.0",
   "private": true,
   "dependencies": {
-    "@docusaurus/core": "^3.6.1",
-    "@docusaurus/plugin-client-redirects": "^3.6.1",
-    "@docusaurus/plugin-content-pages": "^3.4.0",
-    "@docusaurus/preset-classic": "^3.6.1",
+    "@docusaurus/core": "^3.6.3",
+    "@docusaurus/plugin-client-redirects": "^3.6.3",
+    "@docusaurus/plugin-content-pages": "^3.6.3",
+    "@docusaurus/preset-classic": "^3.6.3",
     "@mdx-js/react": "^3.0.0",
     "@sanity/client": "^3.2.0",
     "classnames": "^2.3.1",

diff --git a/sidebarTutorials.js b/sidebarTutorials.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2019-present, Okteto, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = {
+  docs: [
+    {
+      type: 'link',
+      label: 'Documentation',
+      href: '/docs',
+    },
+    {
+      type: 'category',
+      label: 'Tutorials',
+      className: 'sidebarCategoryHideLinks',
+      collapsed: false,
+      link: {
+        type: 'doc',
+        id: 'index',
+      },
+      items: [
+        'getting-started-with-okteto',
+        'aws-lambda',
+        'compose-getting-started',
+        'external-resources',
+        'webpack',
+      ],
+    },
+    {
+      type: 'link',
+      label: 'Community forum',
+      href: 'https://community.okteto.com/',
+    },
+  ],
+};
diff --git a/sidebars.js b/sidebars.js
@@ -12,41 +12,41 @@ module.exports = {
       label: 'Get Started',
       link: { type: 'doc', id: 'index' },
       items: [
-        "get-started/install-okteto-cli",
+        'get-started/install-okteto-cli',
         {
-          type: "category",
-          label: "Install Okteto Platform",
+          type: 'category',
+          label: 'Install Okteto Platform',
           link: { type: 'doc', id: 'get-started/install/index' },
           items: [
-            "get-started/install/amazon-eks",
-            "get-started/install/civo",
-            "get-started/install/digitalocean-doks",
-            "get-started/install/google-gke",
-            "get-started/install/microsoft-aks",
-            "get-started/install/openshift"
-          ]
+            'get-started/install/amazon-eks',
+            'get-started/install/civo',
+            'get-started/install/digitalocean-doks',
+            'get-started/install/google-gke',
+            'get-started/install/microsoft-aks',
+            'get-started/install/openshift',
+          ],
         },
         {
-          type: "category",
-          label: "Deploy your app",
+          type: 'category',
+          label: 'Deploy your app',
           link: { type: 'doc', id: 'get-started/deploy-your-app/index' },
           items: [
-            "get-started/deploy-your-app/deploy",
-            "get-started/deploy-your-app/dependencies",
-            "get-started/deploy-your-app/endpoints",
-            "get-started/deploy-your-app/build",
-          ]
+            'get-started/deploy-your-app/deploy',
+            'get-started/deploy-your-app/dependencies',
+            'get-started/deploy-your-app/endpoints',
+            'get-started/deploy-your-app/build',
+          ],
         },
         {
-          type: "category",
-          label: "For Developers",
+          type: 'category',
+          label: 'For Developers',
           items: [
-            "get-started/dev-quickstart",
-            "get-started/using-okteto-cli-and-dashboard",
-            "get-started/advanced-commands-and-concepts",
-          ]
+            'get-started/dev-quickstart',
+            'get-started/using-okteto-cli-and-dashboard',
+            'get-started/advanced-commands-and-concepts',
+          ],
         },
-        ],
+      ],
     },
     {
       type: 'category',
@@ -100,7 +100,7 @@ module.exports = {
                 'development/containers/file-sync/php',
                 'development/containers/file-sync/python',
                 'development/containers/file-sync/ruby',
-                ],
+              ],
             },
             {
               type: 'category',
@@ -113,7 +113,7 @@ module.exports = {
             },
           ],
         },
-        "development/images",
+        'development/images',
         {
           type: 'category',
           label: 'Deploy environments',
@@ -131,18 +131,13 @@ module.exports = {
       type: 'category',
       label: 'Okteto Test',
       link: { type: 'doc', id: 'testing/index' },
-      items: [
-        'testing/getting-started-test',
-      ],
+      items: ['testing/getting-started-test'],
     },
     {
       type: 'category',
       label: 'Preview Environments',
       link: { type: 'doc', id: 'previews/index' },
-      items: [
-        'previews/using-github-actions',
-        'previews/using-gitlab-cicd',
-      ],
+      items: ['previews/using-github-actions', 'previews/using-gitlab-cicd'],
     },
     {
       type: 'category',
@@ -166,10 +161,7 @@ module.exports = {
         {
           type: 'category',
           label: 'Private Repositories',
-          items: [
-            'admin/private-repositories/github-app',
-            'admin/private-repositories/ssh-key',
-          ],
+          items: ['admin/private-repositories/github-app', 'admin/private-repositories/ssh-key'],
         },
         {
           type: 'category',
@@ -255,19 +247,17 @@ module.exports = {
       ],
     },
     {
-      type: 'category',
-      label: 'Tutorials',
-      items: [
-        'tutorials/aws-lambda',
-        'tutorials/compose-getting-started',
-        'tutorials/getting-started-with-okteto',
-        'tutorials/external-resources',
-        'tutorials/webpack',
-      ],
+      type: 'html',
+      value: '<p class="sidebarHeading">Resources</p>',
+      defaultStyle: true,
     },
     {
       type: 'category',
       label: 'References',
+      link: {
+        type: 'doc',
+        id: 'reference/index',
+      },
       items: [
         'reference/okteto-cli',
         'reference/okteto-manifest',
@@ -279,18 +269,17 @@ module.exports = {
       ],
     },
     {
-      type: 'category',
-      label: 'Community and support',
-      items: [
-        'reference/faqs',
-        {
-          type: 'link',
-          label: 'Community forum',
-          href: 'https://community.okteto.com/',
-        },
-      ],
+      type: 'link',
+      label: 'Tutorials',
+      href: '/tutorials',
+    },
+    'reference/faqs',
+    'release-notes',
+    {
+      type: 'link',
+      label: 'Community forum',
+      href: 'https://community.okteto.com/',
     },
-    "release-notes",
     {
       type: 'link',
       label: 'Archives',

diff --git a/src/content/reference/index.mdx b/src/content/reference/index.mdx
@@ -0,0 +1,7 @@
+---
+title: References
+---
+
+import CardsList from "@theme/CardsList"
+
+<CardsList />
diff --git a/src/content/saas-vs-self-hosted.mdx b/src/content/saas-vs-self-hosted.mdx
@@ -13,7 +13,7 @@ In addition to Okteto's [CLI](get-started/install-okteto-cli.mdx) we optionally
 
 Additionally, you can use the Okteto CLI without using the Okteto Platform, but there are important considerations with that use case.
 
-Some examples of what the Okteto Platform manages are: [configuring variables](core/okteto-variables.mdx), adding [external resources](tutorials/external-resources.mdx) into your development environment, and build and push container images to the [Okteto Registry](core/container-registry.mdx). For a more comprehensive list of features, check out our [docs](self-hosted/index.mdx).
+Some examples of what the Okteto Platform manages are: [configuring variables](core/okteto-variables.mdx), adding [external resources](/docs/tutorials/external-resources) into your development environment, and build and push container images to the [Okteto Registry](core/container-registry.mdx). For a more comprehensive list of features, check out our [docs](self-hosted/index.mdx).
 
 # Important things to know