docs: add Loom video demo (#884)

* docs: add loom video demo * docs: update wording * update --------- Co-authored-by: Meng Zhang <[email protected]>
TabbyML · Nov 24, 2023 · ed68264 · ed68264
1 parent 52cf5fb
commit ed68264
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/website/docs/getting-started.md → website/docs/getting-started.mdx b/website/docs/getting-started.md → website/docs/getting-started.mdx
@@ -1,6 +1,7 @@
 ---
 sidebar_position: 0
 ---
+
 # 👋 Getting Started
 
 Tabby is an open-source, self-hosted AI coding assistant. With Tabby, every team can set up its own LLM-powered code completion server with ease.
@@ -9,6 +10,17 @@ Tabby is an open-source, self-hosted AI coding assistant. With Tabby, every team
 [![Follow on Linkedin](https://shields.io/badge/Follow%20on%20Linkedin-e29351?logo=linkedin)](https://www.linkedin.com/company/tabbyml/)
 [![Star on Github](https://img.shields.io/github/stars/TabbyML/tabby?labelColor=e29351&label=Star&color=ffffff&logo=github)](https://github.com/TabbyML/tabby)
 
+<div className="flex w-full flex-col justify-center items-center">
+  <div className="flex w-full lg:w-8/12 aspect-[16/10]">
+    <iframe className="flex-1"
+      src="https://www.loom.com/embed/f46028aa12434ff29c36f5cde37f1d04?sid=110873b1-975d-4c4b-b548-5bbce9566c2e?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true" 
+    >
+    </iframe>
+  </div>
+
+  <p className="mt-2 italic">Product demo to bring Tabby onto your Mac in 3 simple steps</p>
+</div>
+
 ## 📄 About the Docs
 
 | Section                                     | Goal                                                                        |

diff --git a/website/tailwind.config.js b/website/tailwind.config.js
@@ -4,8 +4,8 @@ module.exports = {
   corePlugins: {
     preflight: false, // disable Tailwind's reset
   },
-  content: ["./src/**/*.{js,jsx,ts,tsx}", "../docs/**/*.mdx"], // my markdown stuff is in ../docs, not /src
-  darkMode: ['class', '[data-theme="dark"]'], // hooks into docusaurus' dark mode settigns
+  content: ["./src/**/*.{js,jsx,ts,tsx}", "./docs/**/*.mdx"],
+  darkMode: ['class', '[data-theme="dark"]'],
   theme: {
     extend: {},
   },