Merge branch 'dev' into main

Author: natedunn

src/views/components/Code.vue

@@ -4,7 +4,7 @@
     :class="tw`px-1 py-2 bg-gray-100 dark:bg-gray-800 overflow-auto`"
   >
     <Prism :language="lang === 'vue' ? 'html' : lang" :inline="inline">{{
-      prettyCode
+      formattedCode
     }}</Prism>
   </div>
 </template>
@@ -15,6 +15,7 @@ import { tw } from "twind";
 import Strip from "strip-indent";
 import PrismJs from "prismjs";
 import "prismjs/components/prism-json";
+import "prismjs/components/prism-bash";
 import "prismjs/plugins/line-numbers/prism-line-numbers.js";
 import Prism from "vue-prism-component";
 import { format } from "prettier/standalone";
@@ -34,7 +35,8 @@ export default defineComponent({
     lang: {
       type: String,
       default: "html",
-      validator: (v: string) => ["js", "vue", "json", "html"].includes(v),
+      validator: (v: string) =>
+        ["js", "vue", "json", "html", "bash"].includes(v),
     },
     inline: {
       type: Boolean,
@@ -61,14 +63,16 @@ export default defineComponent({
         plugins: [prettierPluginPackage],
       },
     };
-    const prettierConfig = prettierConfigs?.[props?.lang];
-    const prettyCode = computed(() =>
-      format(Strip(props.code), prettierConfig)
+    const prettierConfig = prettierConfigs?.[props.lang] ?? false;
+    const formattedCode = computed(() =>
+      prettierConfig
+        ? format(Strip(props.code), prettierConfig)
+        : Strip(props.code)
     );
     onMounted(() => {
       PrismJs.highlightAll();
     });
-    return { prettyCode, tw };
+    return { formattedCode, tw };
   },
 });
 </script>

src/views/components/Footer.vue

@@ -1,5 +1,9 @@
 <template>
-  <footer :class="tw`bg-gray-50 border-t border-gray-100 dark:bg-gray-800`">
+  <footer
+    :class="
+      tw`bg-gray-50 border-t border-gray-100 dark:border-gray-700 dark:bg-gray-800`
+    "
+  >
     <div
       :class="tw`px-4 py-12 mx-auto overflow-hidden max-w-7xl sm:px-6 lg:px-8`"
     >

src/views/pages/docs/install.vue

@@ -3,23 +3,49 @@
     <template #title> Installation </template>
     <template #subtitle> Get started in seconds </template>
     <template #notice>
-      Vue Zephyr is actively being developed, however it is still very early. It
-      is not recommended to use this in production. Please follow our Twitter
-      account for updates.
+      This project is in early development. There still may be significant
+      changes in the future, so please use with caution. Follow us on
+      <Anchor
+        variant="primary"
+        classAppend="space-x-1"
+        classRemove="space-x-2"
+        href="https://twitter.com/usezephyr"
+        newTab
+        >Twitter</Anchor
+      >
+      for updates.
     </template>
   </DocHeader>
+  <div :class="tw`my-12 space-y-12`">
+    <section>
+      <h3 :class="tw`font-medium text(gray-900 dark:gray-100 3xl)`">Install</h3>
+      <div :class="tw`border(t gray-200 dark:gray-800) my-4`"></div>
+      <div :class="tw`space-y-6`">
+        <p>...</p>
+        <div :class="tw`rounded-lg overflow-hidden`">
+          <Code lang="bash" :code="codes.install" />
+        </div>
+      </div>
+    </section>
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import DocHeader from "@/views/components/DocHeader.vue";
+import Code from "@/views/components/Code.vue";
+import { tw } from "twind";
 
 export default defineComponent({
   components: {
     DocHeader,
+    Code,
   },
   setup() {
-    return {};
+    const codes = {
+      install: `npm i @usezephyr/vue-zephyr`,
+    };
+    return { codes, tw };
   },
 });
 </script>

src/views/pages/docs/prose.vue

@@ -4,7 +4,28 @@
     <template #subtitle
       >Use Tailwind's typography plugin in component form</template
     >
-    <template #notice> This page is coming soon. </template>
+    <template #notice>
+      This component is coming soon. Please keep an eye on our
+      <Anchor
+        href="https://github.com/usezephyr/vue-zephyr"
+        variant="primary"
+        classAppend="space-x-1"
+        classRemove="space-x-2"
+        newTab
+      >
+        Github
+      </Anchor>
+      or follow us on
+      <Anchor
+        href="https://twitter.com/usezephyr"
+        variant="primary"
+        classAppend="space-x-1"
+        classRemove="space-x-2"
+        newTab
+      >
+        Twitter </Anchor
+      >.
+    </template>
   </DocHeader>
 </template>
 

src/views/pages/docs/table.vue

@@ -2,7 +2,28 @@
   <DocHeader>
     <template #title>Table</template>
     <template #subtitle> Display data in table format </template>
-    <template #notice> This page is coming soon. </template>
+    <template #notice>
+      This component is coming soon. Please keep an eye on our
+      <Anchor
+        href="https://github.com/usezephyr/vue-zephyr"
+        variant="primary"
+        classAppend="space-x-1"
+        classRemove="space-x-2"
+        newTab
+      >
+        Github
+      </Anchor>
+      or follow us on
+      <Anchor
+        href="https://twitter.com/usezephyr"
+        variant="primary"
+        classAppend="space-x-1"
+        classRemove="space-x-2"
+        newTab
+      >
+        Twitter </Anchor
+      >.
+    </template>
   </DocHeader>
 </template>