feat: initial quickcode guide for deploying contract using hardhat or…

… foundry (#10)

# What 💻 
* Adds initial quickstart guide framework 
* Adds components for organizing content
* Adds reusable content in partials

# Why ✋
* Includes quickstart for deploying, factories, testing, upgrading, and
general paymaster flow
* Components are helpful for displaying and organizing content

# Evidence 📷
Include screenshots, screen recordings, or `console` output here
demonstrating that your changes work as intended

<!-- All sections below are optional. You can uncomment any section
applicable to your Pull Request. -->

<!-- # Notes 📝
* Any notes/thoughts that the reviewers should know prior to reviewing
the code? -->

---------

Co-authored-by: Sabrina Ferguson <[email protected]>

.markdownlint.json

@@ -15,5 +15,6 @@
   "MD034": false,
   "MD024": false,
   "MD022": false,
-  "MD023": false
+  "MD023": false,
+  "MD046": false
 }

app.config.ts

@@ -102,24 +102,18 @@ export default defineAppConfig({
       edit: 'https://github.com/matter-labs/zksync-docs/edit/staging/content',
       feedback: 'https://github.com/matter-labs/zksync-docs/issues/new?labels=documentation',
       links: [
-        // {
-        //   icon: 'i-heroicons-star',
-        //   label: 'Star on GitHub',
-        //   to: 'https://github.com/nuxt/ui',
-        //   target: '_blank',
-        // },
-        // {
-        //   icon: 'i-heroicons-book-open',
-        //   label: 'Nuxt UI Pro docs',
-        //   to: 'https://ui.nuxt.com/pro/guide',
-        //   target: '_blank',
-        // },
-        // {
-        //   icon: 'i-simple-icons-nuxtdotjs',
-        //   label: 'Purchase a license',
-        //   to: 'https://ui.nuxt.com/pro/purchase',
-        //   target: '_blank',
-        // },
+        {
+          icon: 'i-heroicons-chat-bubble-oval-left-ellipsis-16-solid',
+          label: 'Chat on Discord',
+          to: 'https://join.zksync.dev/',
+          target: '_blank',
+        },
+        {
+          icon: 'i-heroicons-user-group-20-solid',
+          label: 'Developer Forum',
+          to: 'https://github.com/zkSync-Community-Hub/zkync-developers/discussions',
+          target: '_blank',
+        },
       ],
     },
   },

components/content/CheckIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <UIcon
+    name="i-heroicons-check-circle-16-solid"
+    class="mb-1 ml-2 h-4 w-4 align-middle text-green-600 opacity-85"
+  />
+</template>
+
+<script setup lang="ts">
+/**
+ * A super simple component that renders a check icon inline.
+ *
+ * ```
+ * example usage in markdown:
+ *  :check-icon some text beside the icon
+ * ```
+ */
+</script>

components/content/ContentSwitcher.vue

@@ -2,13 +2,15 @@
 defineProps<{
   items: ContentSwitcherItem[];
 }>();
-
 const selectedIndex = ref(0);
 
 function onTabChange(index: number) {
   selectedIndex.value = index;
 }
 const route = useRoute();
+// This splits the path into segments and takes the first one
+// TODO: This is a temporary solution, we need to find a better way to get the base path
+const basePath = route.path.split('/')[1];
 </script>
 
 <template>
@@ -25,7 +27,7 @@ const route = useRoute();
     >
       <ContentQuery
         v-slot="{ data }"
-        :path="$route.path"
+        :path="basePath"
         find="one"
         :where="{ _partial: true, _path: { $icontains: item.partial } }"
       >

components/content/DropPanel/DropPanel.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="-mt-6 flex w-full flex-col divide-y divide-gray-200 dark:divide-gray-800">
+    <HeadlessDisclosure
+      v-for="(tab, index) in tabs"
+      :key="index"
+      v-slot="{ open }"
+    >
+      <HeadlessDisclosureButton
+        class="focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex w-full flex-shrink-0 items-center gap-x-1.5 rounded-none py-6 text-left text-lg font-medium text-gray-500 underline-offset-4 hover:text-gray-700 hover:no-underline focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-75 dark:text-gray-400 dark:hover:text-gray-200"
+      >
+        <UIcon
+          name="i-heroicons-chevron-down-20-solid"
+          class="h-5 w-5 flex-shrink-0 transform font-bold transition-transform duration-200"
+          :class="open ? '' : '-rotate-90'"
+        />
+        <span class="text-gray-900 dark:text-white">{{ tab.label }}</span>
+      </HeadlessDisclosureButton>
+      <HeadlessDisclosurePanel class="py-4 pl-6 text-base text-gray-500 dark:text-gray-100">
+        <component :is="tab.component" />
+      </HeadlessDisclosurePanel>
+    </HeadlessDisclosure>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * An accordion style component that allows
+ * for multiple panels to be open at once.
+ *
+ * Use Panel component to slot in panels.
+ */
+import { useSlots, computed } from 'vue';
+
+const slots = useSlots();
+
+const tabs = computed(() => {
+  return (
+    slots.default?.().map((slot, index) => {
+      if (slot.props?.label === undefined) {
+        throw new Error(`DropPanel: Panel at index ${index} is missing a label prop.`);
+      } else {
+        return {
+          index,
+          label: slot.props.label,
+          component: slot,
+        };
+      }
+    }) || []
+  );
+});
+</script>

components/content/DropPanel/Panel.vue

@@ -0,0 +1,11 @@
+<template>
+  <ContentSlot :use="$slots.default" />
+</template>
+
+<script setup lang="ts">
+/**
+ * A panel component that can be slotted into a DropPanel.
+ *
+ * Use the `label` prop to set the tab label on the drop panel.
+ */
+</script>