[website] added logic to version switcher

Author: ilyabrower

website/algoliaConfig.ts

@@ -1,7 +1,4 @@
 export const algoliaConfig = {
   appName: 'PDUJZB0TBK',
   openKey: '9ad1935d853b24ce3fe9c0039bcf7b40',
-  mainSearchIndexName: 'intergalactic-docs',
-  iconsSearchIndexName: 'intergalactic-docs-icons',
-  illustrationsSearchIndexName: 'intergalactic-docs-illustrations',
 };

website/algoliaIndexes.ts

@@ -0,0 +1,7 @@
+import { currentBuildVersion } from './docs/.vitepress/vite.config';
+
+export const algoliaIndexes = {
+  mainSearchIndexName: `${currentBuildVersion}_intergalactic-docs`,
+  iconsSearchIndexName: `${currentBuildVersion}_intergalactic-docs-icons`,
+  illustrationsSearchIndexName: `${currentBuildVersion}_intergalactic-docs-illustrations`,
+};

website/docs/.vitepress/buildHooks.ts

@@ -10,6 +10,7 @@ import illustrationsList from '../style/illustration/illustrations-list.js';
 
 import 'dotenv/config';
 import { algoliaConfig } from '../../algoliaConfig.js';
+import { algoliaIndexes } from '../../algoliaIndexes.js';
 
 const excludeFromSearch = ['a11y-report'];
 
@@ -158,9 +159,9 @@ const buildEnd: UserConfig<DefaultTheme.Config>['buildEnd'] = async ({ outDir })
   if (process.env.CI) {
     // await fs.writeFile('search-index.json', JSON.stringify(searchObjects, null, 2));
     const client = algoliasearch(algoliaConfig.appName, process.env.ALGOLIA_SECRET_KEY!);
-    const mainSearchIndex = client.initIndex(algoliaConfig.mainSearchIndexName);
-    const iconsSearchIndex = client.initIndex(algoliaConfig.iconsSearchIndexName);
-    const illustrationsSearchIndex = client.initIndex(algoliaConfig.illustrationsSearchIndexName!);
+    const mainSearchIndex = client.initIndex(algoliaIndexes.mainSearchIndexName);
+    const iconsSearchIndex = client.initIndex(algoliaIndexes.iconsSearchIndexName);
+    const illustrationsSearchIndex = client.initIndex(algoliaIndexes.illustrationsSearchIndexName!);
 
     const iconsSearchObjects = iconsList.icons.map((o, i) => ({ objectID: i, ...o }));
     const illustrationsSearchObjects = illustrationsList.illustrations.map((o, i) => ({

website/docs/.vitepress/config.ts

@@ -1,21 +1,41 @@
 import 'dotenv/config';
 
+import { resolve as resolvePath } from 'path';
+
 import { defineConfig } from 'vitepress';
+
+import { buildHooks } from './buildHooks';
+import { figmaIcon } from './figma-icon';
 import { configureMarkdownIt } from './markdown-it-config';
-import { viteConfig } from './vite.config';
 import { sideBarConfig } from './sidebarConfig';
-import { buildHooks } from './buildHooks';
+import { viteConfig, currentBuildVersion, LATEST } from './vite.config';
 import { algoliaConfig } from '../../algoliaConfig';
-import { figmaIcon } from './figma-icon';
-import { resolve as resolvePath } from 'path';
+import { algoliaIndexes } from '../../algoliaIndexes';
 
+const availableVersions = (process.env.AVAILABLE_VERSIONS ?? '').split(',');
 const gtmKey = 'GTM-PP7RKT7';
 
+const links = availableVersions.filter((version) => {
+  return version !== currentBuildVersion;
+});
+
+let versions: any = null;
+
+if (links.length > 0) {
+  versions = {
+    currentVersion: currentBuildVersion,
+    items: links.reverse(),
+  };
+}
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  base: '/intergalactic/',
-  outDir: resolvePath(__dirname, 'dist/intergalactic/'),
-  title: 'Intergalactic',
+  base: viteConfig.base,
+  outDir: resolvePath(
+    __dirname,
+    `dist/intergalactic/${currentBuildVersion !== LATEST ? `${currentBuildVersion}/` : ''}`,
+  ),
+  title: 'Intergalactic Design System',
   description: 'Design System',
   markdown: {
     config(md) {
@@ -87,7 +107,7 @@ export default defineConfig({
       options: {
         appId: algoliaConfig.appName,
         apiKey: algoliaConfig.openKey,
-        indexName: algoliaConfig.mainSearchIndexName,
+        indexName: algoliaIndexes.mainSearchIndexName,
         searchParameters: {
           attributesToRetrieve: [
             'hierarchy',
@@ -103,16 +123,15 @@ export default defineConfig({
       },
     },
     editLink: {
-      pattern: 'https://github.com/semrush/intergalactic/edit/master/website/docs/:path',
+      pattern: `https://github.com/semrush/intergalactic/edit/${currentBuildVersion}/website/docs/:path`,
       text: 'Edit this page on GitHub',
     },
+
+    // @ts-ignore. Need this for custom versions switcher
+    versions,
+
     // https://vitepress.dev/reference/default-theme-config
     nav: [
-      // {
-      //   text: 'Roadmap',
-      //   link: 'https://github.com/orgs/semrush/projects/3/views/2',
-      //   target: '_blank',
-      // },
       {
         text: 'Releases',
         link: 'https://github.com/semrush/intergalactic/releases',
@@ -131,12 +150,12 @@ export default defineConfig({
       {
         icon: 'github',
         link: 'https://github.com/semrush/intergalactic',
-        ariaLabel: 'Go to GitHub repository',
+        ariaLabel: 'GitHub repository',
       },
       {
         icon: { svg: figmaIcon },
         link: 'https://figma.com/@semrush',
-        ariaLabel: 'Go to Intergalactic Design System Figma libraries',
+        ariaLabel: 'Figma libraries',
       },
     ],
   },

website/docs/.vitepress/theme/VPNavBarMenu.vue

@@ -1,17 +1,42 @@
 <script lang="ts" setup>
-import { useData } from 'vitepress'
+import { computed } from 'vue'
+import { useData } from 'vitepress';
 import VPNavBarMenuLink from 'vitepress/dist/client/theme-default/components/VPNavBarMenuLink.vue'
 import VPNavBarMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavBarMenuGroup.vue'
 import VPFlyout from 'vitepress/dist/client/theme-default/components/VPFlyout.vue'
 import PreferenceSwitch from './PreferenceSwitch.vue';
 import { preferSemcoreUi } from './preferences'
 
-const { theme } = useData()
+const { theme, page } = useData()
+
+const versionSwitcherSettings = computed(() => {
+  if (!theme.value.versions) {
+    return null;
+  }
+
+  const currentVersion = theme.value.versions.currentVersion;
+
+  return {
+    text: currentVersion,
+    items: theme.value.versions.items.map((v: string) => {
+      const link = `${window.location.origin}/intergalactic/${v === 'latest' ? '' : `${v}/`}${page.value.relativePath}`;
+
+      return {
+        text: v,
+        target: '_blank',
+        link,
+      }
+    }),
+  }
+
+});
+
 </script>
 
 <template>
   <nav v-if="theme.nav" aria-labelledby="main-nav-aria-label" class="VPNavBarMenu">
     <span id="main-nav-aria-label" class="visually-hidden">Main Navigation</span>
+    <VPNavBarMenuGroup v-if="versionSwitcherSettings" :item="versionSwitcherSettings" />
     <template v-for="item in theme.nav" :key="item.text">
       <VPNavBarMenuLink v-if="'link' in item" :item="item" />
       <VPNavBarMenuGroup v-else :item="item" />

website/docs/.vitepress/vite.config.ts

@@ -9,8 +9,11 @@ import { unpluginStatic } from './unplugins/unplugin-static';
 import { unpluginIllustrations } from './unplugins/unplugin-illustrations';
 import { fileURLToPath, URL } from 'url';
 
+export const LATEST = 'latest';
+export const currentBuildVersion = process.env.DOCS_VERSION ?? LATEST;
+
 export const viteConfig = defineConfig({
-  base: '/intergalactic/',
+  base: `/intergalactic${currentBuildVersion !== LATEST ? `/${currentBuildVersion}` : ''}/`,
   plugins: [
     pluginReact(),
     createUnplugin<{}>(() => ({
@@ -62,6 +65,7 @@ export const viteConfig = defineConfig({
   ],
   build: {
     chunkSizeWarningLimit: 1500,
+    emptyOutDir: false,
   },
   resolve: {
     alias: [