From a16e1b4cda6f112822b74a11ce8555cfffdec047 Mon Sep 17 00:00:00 2001
From: Sabrina <sf@matterlabs.dev>
Date: Mon, 1 Apr 2024 14:02:20 -0400
Subject: [PATCH] feat: create code switcher tab (#8)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# What :computer:
* Create a component that tabs content for display
* Create a component that displays partial markdown files for re-use
across documents

# Why :hand:
* Breaks down complex instructions that will be hidden in tabs into
partials for easier editing.
* Makes it easier to re-use content versus re-writing content.

# Evidence :camera:
![Screenshot 2024-03-27 at 3 21
48 PM](https://github.com/matter-labs/zksync-docs/assets/812331/2ff1eb91-fa1f-4231-82de-51f61dd51702)

Example set up in the Getting Started page to show how it can be used.
NuxtUI has a UTabs component that can be used plainly if we didn't want
to use this. This new component provides a way to have tabbed content
that can be loaded from partial markdown files to help split up content
and make editing potentially easier.

A future feature to implement in this component would be to have a way
to track which tab is actively selected and update similar tabs to the
same selected tab. Also store this selected tab in localStorage
potentially so that the preferred tab for the user is always selected
across the site.
---
 components/content/ContentSwitcher.vue        | 37 +++++++++++++++++++
 components/content/DisplayPartial.vue         | 16 ++++++++
 content/10.getting-started/1.index.md         | 18 +++++++++
 .../_getting-started/_aPartial.md             |  5 +++
 .../_getting-started/_anotherPartial.md       |  5 +++
 content/_partials/setting-up-your-wallet.md   |  9 +++++
 types/CodeSwitcher.d.ts                       | 14 +++++++
 7 files changed, 104 insertions(+)
 create mode 100644 components/content/ContentSwitcher.vue
 create mode 100644 components/content/DisplayPartial.vue
 create mode 100644 content/10.getting-started/_getting-started/_aPartial.md
 create mode 100644 content/10.getting-started/_getting-started/_anotherPartial.md
 create mode 100644 content/_partials/setting-up-your-wallet.md
 create mode 100644 types/CodeSwitcher.d.ts

diff --git a/components/content/ContentSwitcher.vue b/components/content/ContentSwitcher.vue
new file mode 100644
index 00000000..21dd8de6
--- /dev/null
+++ b/components/content/ContentSwitcher.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineProps<{
+  items: ContentSwitcherItem[];
+}>();
+
+const selectedIndex = ref(0);
+
+function onTabChange(index: number) {
+  selectedIndex.value = index;
+}
+const route = useRoute();
+</script>
+
+<template>
+  <div>
+    <UTabs
+      :items="items"
+      :ui="{ list: { width: 'w-auto' } }"
+      @change="onTabChange"
+    />
+    <div
+      v-for="(item, index) in items"
+      v-show="selectedIndex === index"
+      :key="item.partial"
+    >
+      <ContentQuery
+        v-slot="{ data }"
+        :path="$route.path"
+        find="one"
+        :where="{ _partial: true, _path: { $icontains: item.partial } }"
+      >
+        <ContentRenderer :value="data" />
+      </ContentQuery>
+    </div>
+    <UDivider />
+  </div>
+</template>
diff --git a/components/content/DisplayPartial.vue b/components/content/DisplayPartial.vue
new file mode 100644
index 00000000..3fb99ffd
--- /dev/null
+++ b/components/content/DisplayPartial.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  partial: string;
+}>();
+</script>
+
+<template>
+  <ContentQuery
+    v-slot="{ data }"
+    path="_partials"
+    find="one"
+    :where="{ _partial: true, title: { $icontains: partial } }"
+  >
+    <ContentRenderer :value="data" />
+  </ContentQuery>
+</template>
diff --git a/content/10.getting-started/1.index.md b/content/10.getting-started/1.index.md
index 83fc70a3..f7ab24ef 100644
--- a/content/10.getting-started/1.index.md
+++ b/content/10.getting-started/1.index.md
@@ -8,6 +8,18 @@ This template is a ready-to-use documentation template made with [Nuxt UI Pro](h
 premium components built on top of [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in
 minutes.
 
+::content-switcher
+---
+items: [{
+  label: 'HardHat',
+  partial: '_getting-started/_aPartial'
+}, {
+  label: 'Forge',
+  partial: '_getting-started/_anotherpartial'
+}]
+---
+::
+
 There are already many websites based on this template:
 
 - [Nuxt](https://nuxt.com) - The Nuxt website
@@ -17,6 +29,12 @@ There are already many websites based on this template:
 - [Nuxt Devtools](https://devtools.nuxt.com) - The documentation of `@nuxt/devtools`
 - [Nuxt Studio](https://nuxt.studio) - The pro version of Nuxt Content
 
+::display-partial
+---
+partial: 'Setting up your wallet'
+---
+::
+
 ## Features
 
 - Powered by [Nuxt 3](https://nuxt.com)
diff --git a/content/10.getting-started/_getting-started/_aPartial.md b/content/10.getting-started/_getting-started/_aPartial.md
new file mode 100644
index 00000000..0fea5446
--- /dev/null
+++ b/content/10.getting-started/_getting-started/_aPartial.md
@@ -0,0 +1,5 @@
+---
+title: A Partial
+---
+
+This is a partial that's coming from somewhere else!
diff --git a/content/10.getting-started/_getting-started/_anotherPartial.md b/content/10.getting-started/_getting-started/_anotherPartial.md
new file mode 100644
index 00000000..f1ac3572
--- /dev/null
+++ b/content/10.getting-started/_getting-started/_anotherPartial.md
@@ -0,0 +1,5 @@
+---
+title: Another Partial
+---
+
+This is the second partial
diff --git a/content/_partials/setting-up-your-wallet.md b/content/_partials/setting-up-your-wallet.md
new file mode 100644
index 00000000..31817176
--- /dev/null
+++ b/content/_partials/setting-up-your-wallet.md
@@ -0,0 +1,9 @@
+---
+title: Setting up your wallet
+---
+
+Here's how to setup your wallet, follow the instructions below:
+
+1. Download wallet
+2. ???
+3. Profit
diff --git a/types/CodeSwitcher.d.ts b/types/CodeSwitcher.d.ts
new file mode 100644
index 00000000..9cf4ac47
--- /dev/null
+++ b/types/CodeSwitcher.d.ts
@@ -0,0 +1,14 @@
+declare interface ContentSwitcherItem {
+  /**
+   * The label to display on the tab
+   */
+  label: string;
+  /**
+   * The general path to the partial that is relative to the parent markdown.
+   *
+   * Example:
+   *
+   * "_getting-started/_aPartial" => `_getting-started/_aPartial.md`
+   */
+  partial: string;
+}