From ed6826408d6b11207ab6ba254ae87bea629a6a43 Mon Sep 17 00:00:00 2001
From: Lucy Gao <gyxlucy@gmail.com>
Date: Fri, 24 Nov 2023 00:33:25 -0800
Subject: [PATCH] docs: add Loom video demo (#884)

* docs: add loom video demo

* docs: update wording

* update

---------

Co-authored-by: Meng Zhang <meng@tabbyml.com>
---
 .../docs/{getting-started.md => getting-started.mdx} | 12 ++++++++++++
 website/tailwind.config.js                           |  4 ++--
 2 files changed, 14 insertions(+), 2 deletions(-)
 rename website/docs/{getting-started.md => getting-started.mdx} (88%)

diff --git a/website/docs/getting-started.md b/website/docs/getting-started.mdx
similarity index 88%
rename from website/docs/getting-started.md
rename to website/docs/getting-started.mdx
index 7df969141..78e0860e8 100644
--- a/website/docs/getting-started.md
+++ b/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
index c40f8b753..5763bb42c 100644
--- 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: {},
   },