upgrade to Vuepress v2 (#152)

* start migration to Vuepress v2 * define config * remove bootstrap since it conflicts with styling * change the output folder * bring back the navbar * update algolia
bahmutov · Mar 30, 2023 · a7776af · a7776af
1 parent b9d8b67
commit a7776af
Show file tree

Hide file tree

Showing 5 changed files with 3,729 additions and 20,164 deletions.
diff --git a/.gitignore b/.gitignore
@@ -14,3 +14,5 @@ redirects
 people.json
 person.json
 out.json
+docs/.vuepress/.cache/
+docs/.vuepress/.temp/
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -1,29 +1,34 @@
+import { defineUserConfig } from 'vuepress'
+import { defaultTheme } from '@vuepress/theme-default'
+import { docsearchPlugin } from '@vuepress/plugin-docsearch'
+
 let _highlight
 
 const { findCypressVersion } = require('../../src/utils')
-const path = require('path')
+// const path = require('path')
 
 const cypressVersion = findCypressVersion()
 const base = `/cypress-examples/`
-const dest = path.join('public', 'cypress-examples')
+// const dest = path.join('public', 'cypress-examples')
+const dest = 'public/cypress-examples'
 console.log('output folder: %s', dest)
 const title = `Cypress examples (v${cypressVersion})`
 
-module.exports = {
+export default defineUserConfig({
   title,
   description:
     'Static site with Cypress examples tested right from the Markdown sources',
   base,
   dest,
   head: [
-    [
-      'link',
-      {
-        rel: 'stylesheet',
-        href:
-          'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css',
-      },
-    ],
+    // [
+    //   'link',
+    //   {
+    //     rel: 'stylesheet',
+    //     href:
+    //       'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css',
+    //   },
+    // ],
     [
       'style',
       {},
@@ -39,28 +44,35 @@ module.exports = {
         crossorigin: 'anonymous',
       },
     ],
-    [
-      'script',
-      {
-        src:
-          'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js',
-        integrity:
-          'sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx',
-        crossorigin: 'anonymous',
-      },
-    ],
+    // [
+    //   'script',
+    //   {
+    //     src:
+    //       'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js',
+    //     integrity:
+    //       'sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx',
+    //     crossorigin: 'anonymous',
+    //   },
+    // ],
   ],
-  plugins: [],
-  themeConfig: {
+  plugins: [
+    docsearchPlugin({
+      // DANGER 🧨💀: ONLY USE ALGOLIA PUBLIC SEARCH-ONLY API KEY
+      apiKey: 'd2cc2084df39806bdefb04f60f16e856',
+      indexName: 'cypress-examples',
+      appId: '48DTXR75RW',
+    }),
+  ],
+  theme: defaultTheme({
     // point pages back at the GitHub documents
     repo: 'bahmutov/cypress-examples',
     docsDir: 'docs',
     editLinks: true,
     editLinkText: 'Help us improve this page!',
-    nav: [
+    navbar: [
       {
         text: 'Commands',
-        items: [
+        children: [
           { text: 'Querying', link: '/commands/querying/' },
           {
             text: 'Traversal',
@@ -120,13 +132,7 @@ module.exports = {
       { text: 'Cypress API', link: '/cypress-api/' },
     ],
     sidebar: 'auto',
-    algolia: {
-      // DANGER 🧨💀: ONLY USE ALGOLIA PUBLIC SEARCH-ONLY API KEY
-      apiKey: 'd2cc2084df39806bdefb04f60f16e856',
-      indexName: 'cypress-examples',
-      appId: '48DTXR75RW',
-    },
-  },
+  }),
   markdown: {
     extendMarkdown(md) {
       if (!_highlight) {
@@ -155,4 +161,4 @@ module.exports = {
       }
     },
   },
-}
+})
diff --git a/docs/index.md b/docs/index.md
@@ -358,13 +358,14 @@ Some of the recipes use [cypress-map](https://github.com/bahmutov/cypress-map) q
 
 I have several Cypress courses at [cypress.tips/courses](https://cypress.tips/courses)
 
-- I cover the basics of E2E and Component testing in my free course [Cypress Version 10: Fundamentals](https://cypress.tips/courses)
+- I cover the very basics of E2E and Component testing in my free course [Cypress Version 10: Fundamentals](https://cypress.tips/courses)
+- You can fully learn E2E and React Component testing in my hands-on course [Testing The Swag Store](https://cypress.tips/courses/swag-store)
 - Interested in learning more about `cy.intercept`, `cy.request`, and the related commands? Take my [Cypress Network Testing Exercises](https://cypress.tips/courses) course
 - Need to step up your tests and take advantages of the [many Cypress plugins](https://on.cypress.io/plugins)? Take my course [Cypress Plugins](https://cypress.tips/courses/cypress-plugins) that covers 20+ plugins (I wrote most of them)
 
 ## Videos
 
-Some of the examples and the recipes listed here are explained through short videos I post on my [YouTube channel](https://www.youtube.com/glebbahmutov). The playlist [Cypress Tips & Tricks](https://www.youtube.com/playlist?list=PLP9o9QNnQuAYYRpJzDNWpeuOVTwxmIxcI) has 400+ videos!
+Some of the examples and the recipes listed here are explained through short videos I post on my [YouTube channel](https://www.youtube.com/glebbahmutov). The playlist [Cypress Tips & Tricks](https://www.youtube.com/playlist?list=PLP9o9QNnQuAYYRpJzDNWpeuOVTwxmIxcI) has 600+ videos! You can search them all from my page [cypress.tips/search](https://cypress.tips/search).
 
 ## The newsletter