Better menu

.eslintrc.cjs

@@ -70,14 +70,6 @@ module.exports = {
         'unicorn/prevent-abbreviations': 'off',
       },
     },
-    {
-      env: {
-        'jest/globals': true,
-      },
-      extends: ['plugin:jest/recommended'],
-      files: ['*.test.*'],
-      plugins: ['jest'],
-    },
   ],
   parserOptions: {
     ecmaVersion: 'latest',
@@ -99,9 +91,4 @@ module.exports = {
     ],
     'unicorn/no-keyword-prefix': 'off',
   },
-  settings: {
-    jest: {
-      version: 29,
-    },
-  },
 };

package.json

@@ -12,7 +12,7 @@
     "preview": "astro preview",
     "astro": "astro",
     "lint": "eslint .",
-    "test": "jest --config jest.config.cjs",
+    "test": "vitest src/**/*.test.*",
     "deploy": "surge ./dist --domain https://webdoky4.surge.sh",
     "fix": "yarn lint --fix"
   },
@@ -61,14 +61,14 @@
     "unist-util-visit": "~5.0.0",
     "vfile-matter": "~5.0.0",
     "vite": "~4.5.2",
+    "vitest": "~1.2.2",
     "yaml": "~2.3.4"
   },
   "devDependencies": {
     "@astrojs/ts-plugin": "~1.4.0",
     "@cspell/dict-uk-ua": "~4.0.0",
     "@total-typescript/ts-reset": "0.5.1",
     "@types/hast": "~3.0.4",
-    "@types/jest": "~29.5.11",
     "@types/mdast": "~4.0.0",
     "@types/mustache": "~4.2.5",
     "@types/node": "~20.11.7",
@@ -88,15 +88,13 @@
     "eslint-plugin-astro": "0.31.3",
     "eslint-plugin-editorconfig": "~4.0.3",
     "eslint-plugin-import": "~2.25.2",
-    "eslint-plugin-jest": "~27.6.3",
     "eslint-plugin-jsx-a11y": "~6.8.0",
     "eslint-plugin-prettier": "~5.1.3",
     "eslint-plugin-promise": "~6.1.1",
     "eslint-plugin-react": "~7.33.2",
     "eslint-plugin-regexp": "~2.2.0",
     "eslint-plugin-tsdoc": "0.2.17",
     "eslint-plugin-unicorn": "~50.0.1",
-    "jest": "~29.7.0",
     "markdownlint-cli2": "0.12.1",
     "markdownlint-rule-search-replace": "~1.2.0",
     "postcss": "~8.4.33",
@@ -108,7 +106,6 @@
     "stylelint-config-html": "~1.1.0",
     "stylelint-config-standard-scss": "~13.0.0",
     "stylelint-scss": "~6.1.0",
-    "ts-jest": "~29.1.2",
     "ts-node": "~10.9.2",
     "vfile": "~6.0.1"
   }

src/components/DocumentBreadcrumbs.astro

@@ -75,6 +75,8 @@ const crumbs = [
     padding: 8px 16px !important;
 
     .c-breadcrumbs__crumb {
+      @apply w-full md:w-auto justify-between;
+
       &:first-child,
       &:last-child {
         @apply hidden lg:flex;

src/layouts/Layout/components/Header.astro

@@ -35,9 +35,9 @@ const documentationHierarchy = await getHierarchy('processed-content');
     </div>
   </div>
   <MenuItems
-    class="hidden lg:flex max-h-screen overflow-auto md:overflow-visible">
-    <ul class="flex flex-col lg:flex-row lg:gap-5 items-center mb-0">
-      <li class="w-full">
+    class="hidden lg:flex max-h-screen overflow-auto md:overflow-visible grow">
+    <ul class="flex flex-col lg:flex-row lg:gap-5 items-center mb-0 grow">
+      <li class="w-full md:w-auto">
         <Dropdown class="group">
           <button
             class="flex items-center gap-5 min-h-12 md:min-h-auto justify-between w-full md:w-max">
@@ -57,7 +57,7 @@ const documentationHierarchy = await getHierarchy('processed-content');
           </button>
           <DropdownItems class="relative">
             <div
-              class="lg:absolute bg-white top-2 border shadow rounded w-full md:w-40">
+              class="lg:absolute bg-white top-2 border shadow rounded w-full md:w-80">
               <ul class="m-0">
                 <li class="font-semibold p-2 w-full">
                   <a
@@ -77,7 +77,7 @@ const documentationHierarchy = await getHierarchy('processed-content');
           </DropdownItems>
         </Dropdown>
       </li>
-      <li class="w-full">
+      <li class="w-full md:w-auto">
         <Dropdown class="group">
           <button
             class="flex items-center gap-5 min-h-12 md:min-h-auto justify-between w-full md:w-max">
@@ -97,7 +97,7 @@ const documentationHierarchy = await getHierarchy('processed-content');
           </button>
           <DropdownItems class="relative">
             <div
-              class="lg:absolute bg-white top-2 border shadow rounded w-full md:w-40">
+              class="lg:absolute bg-white top-2 border shadow rounded w-full md:w-80">
               <ul>
                 {
                   documentationHierarchy.map((entry) => (
@@ -110,7 +110,7 @@ const documentationHierarchy = await getHierarchy('processed-content');
             </div>
           </DropdownItems>
         </Dropdown>
-        <li class="w-full">
+        <li class="w-full md:w-auto md:ml-auto">
           <a
             aria-label="Ми на GitHub"
             href={GITHUB_LINK}
@@ -122,7 +122,7 @@ const documentationHierarchy = await getHierarchy('processed-content');
             <Icon name="mdi:github" class="w-6 h-6" />
           </a>
         </li>
-        <li class="w-full">
+        <li class="w-full md:w-auto">
           <ToggleDarkMode client:idle />
         </li>
       </li>

src/layouts/Layout/components/HeaderDropdownItem.astro

@@ -9,22 +9,33 @@ export interface Props {
   hierarchyEntry: HierarchyEntry;
 }
 const { depth = 1, hierarchyEntry } = Astro.props;
-const dropdownSubmenuClass =
-  depth === 1 ? 'group/submenu' : 'group/nestedsubmenu';
+const hasChildren = hierarchyEntry.children.length > 0;
+const areChildrenShownOnDesktop =
+  hierarchyEntry.children.length <= 10 && depth < 2;
 ---
 
-{
-  hierarchyEntry.children.length === 0 && (
-    <a
-      class="no-underline hover:underline"
-      href={getPathFromSlug(hierarchyEntry.slug)}>
-      {hierarchyEntry.title}
-    </a>
-  )
-}
+<a
+  class:list={[
+    'no-underline hover:underline',
+    {
+      hidden: hasChildren,
+      'md:hidden': areChildrenShownOnDesktop,
+      'md:inline': !areChildrenShownOnDesktop,
+    },
+  ]}
+  href={getPathFromSlug(hierarchyEntry.slug)}>
+  {hierarchyEntry.title}
+</a>
 {
   hierarchyEntry.children.length > 0 && (
-    <DropdownSubmenu class:list={dropdownSubmenuClass}>
+    <DropdownSubmenu
+      class:list={[
+        {
+          'group/submenu': depth === 1,
+          'group/nestedsubmenu': depth > 1,
+          'md:hidden': !areChildrenShownOnDesktop,
+        },
+      ]}>
       <button class="flex w-full items-center justify-between font-semibold open-trigger gap-5 min-h-12 md:min-h-auto">
         <span class="text-left">{hierarchyEntry.title}</span>
         <svg

src/plugins/remark/__snapshots__/extract-description.test.ts.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`extractDescription sets the description and sets it in the frontmatter 1`] = `
+exports[`extractDescription > sets the description and sets it in the frontmatter 1`] = `
 {
   "data": {
     "astro": {

src/plugins/remark/definition-list/__snapshots__/expand-definitions.test.ts.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`parseDefinitions works with multiple definitions 1`] = `
+exports[`parseDefinitions > works with multiple definitions 1`] = `
 {
   "children": [
     {

src/plugins/remark/definition-list/expand-definitions.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, test } from 'vitest';
+
 import richInput from './expand-definitions.input.json' assert { type: 'json' };
 import expandDefinitions from './expand-definitions.js';
 import data from './test-ast-parsed.json' assert { type: 'json' };

src/plugins/remark/definition-list/parse-definitions.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, test } from 'vitest';
+
 import parseDefinitions from './parse-definitions.js';
 import expectedData from './test-ast-parsed.json' assert { type: 'json' };
 import data from './test-ast-raw.json' assert { type: 'json' };

src/plugins/remark/definition-list/stringify-mdast-to-html.test.ts

@@ -1,4 +1,5 @@
 import type { Html, Text } from 'mdast';
+import { describe, expect, test } from 'vitest';
 
 import stringifyMdastToHtml from './stringify-mdast-to-html.js';
 

src/plugins/remark/extract-description.test.ts

@@ -1,4 +1,5 @@
 import type { Root } from 'mdast';
+import { describe, expect, test } from 'vitest';
 
 import { extractDescriptionPlugin } from './extract-description.js';
 import type { AstroFile } from './validate-astro-file.ts';

src/plugins/remark/inject-history/get-submodule-path.test.ts

@@ -1,10 +1,12 @@
+import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest';
+
 import getSubmodulePath from './get-submodule-path.ts';
 
 describe('get-submodule-path', () => {
   const OLD_ENV = process.env;
 
   beforeEach(() => {
-    jest.resetModules(); // Most important - it clears the cache
+    vi.resetModules(); // Most important - it clears the cache
     process.env = {
       PATH_TO_LOCALIZED_CONTENT: 'path/to/localized/content',
       TARGET_LOCALE: 'uk',

src/plugins/remark/inject-history/parse-output.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import parseOutput from './parse-output.ts';
 
 describe('parseOutput', () => {

src/plugins/remark/macros/__snapshots__/expand.test.ts.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`expandMacros expands macros 1`] = `
+exports[`expandMacros > expands macros 1`] = `
 {
   "children": [
     {

src/plugins/remark/macros/expand.test.ts

@@ -1,4 +1,5 @@
 import type { Root } from 'mdast';
+import { describe, expect, test } from 'vitest';
 
 import expandMacros from './expand.js';
 

src/plugins/remark/macros/extract-macros-from-text.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, test } from 'vitest';
+
 import extractMacrosFromText from './extract-macros-from-text.js';
 
 describe('extractMacrosFromText', () => {

src/plugins/utils/strip-macros.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, test } from 'vitest';
+
 import stripMacros from './strip-macros.ts';
 
 describe('stripMacros', () => {

src/utils/get-hierarchy.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import getHierarchy from './get-hierarchy.ts';
+
+vi.mock('astro:content', () => ({
+  getCollection: vi.fn().mockResolvedValue([
+    { data: { title: 'A' }, slug: 'a' },
+    { data: { title: 'B' }, slug: 'a/b' },
+    { data: { title: 'C' }, slug: 'a/b/c' },
+
+    { data: { title: 'D' }, slug: 'd' },
+    { data: { title: 'E' }, slug: 'd/e' },
+    { data: { title: 'F' }, slug: 'd/e/f' },
+
+    { data: { title: 'G' }, slug: 'g' },
+  ]),
+}));
+
+describe('getHierarchy', () => {
+  it('should return the correct hierarchy', async () => {
+    const hierarchy = await getHierarchy('processed-content');
+    expect(hierarchy).toEqual([
+      {
+        title: 'A',
+        slug: 'a',
+        children: [
+          {
+            title: 'B',
+            slug: 'a/b',
+            children: [
+              {
+                title: 'C',
+                slug: 'a/b/c',
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        title: 'D',
+        slug: 'd',
+        children: [
+          {
+            title: 'E',
+            slug: 'd/e',
+            children: [
+              {
+                title: 'F',
+                slug: 'd/e/f',
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        title: 'G',
+        slug: 'g',
+        children: [],
+      },
+    ]);
+  });
+});

src/utils/get-hierarchy.ts

@@ -44,7 +44,7 @@ function processRecursively(
 
 export default async function getHierarchy(
   collectionName: CollectionKey,
-  maxDepth: number = 2,
+  // maxDepth: number = 2,
 ) {
   const entries = await getCollection(collectionName);
   const hierarchy: HierarchyEntry[] = [];
@@ -54,9 +54,9 @@ export default async function getHierarchy(
     return entryA.slug < entryB.slug ? -1 : 1;
   });
   for (let entry of entries) {
-    if (getDepth(entry.slug) > maxDepth || entry.slug.includes('Glossary/')) {
-      continue;
-    }
+    // if (getDepth(entry.slug) > maxDepth || entry.slug.includes('Glossary/')) {
+    //   continue;
+    // }
     const kin = getKin(entry.slug);
     if (kin.length === 1) {
       hierarchy.push({
@@ -78,9 +78,10 @@ export default async function getHierarchy(
             children: [],
           });
           break;
+        } else {
+          console.warn('No parent found for', entry.slug);
         }
       }
-      console.warn('No parent found for', entry.slug);
     }
   }
   hierarchy.sort((entryA, entryB) => {