Simplify Home Page

docs/.vitepress/theme/home.css

@@ -0,0 +1,18 @@
+.home > * > .plugin-tabs--tab-list {
+	background-color: var(--vp-c-bg-alt);
+}
+
+.home > * > .VPNavBar:not(.top) {
+	backdrop-filter: blur(0.5rem);
+	background-color: transparent !important;
+}
+
+.home > * > .VPNavBar > .divider {
+	opacity: 0;
+}
+
+.home > .VPContent {
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+}

docs/.vitepress/theme/index.js

@@ -3,6 +3,7 @@ import DefaultTheme from 'vitepress/theme'
 import layout from './layout.vue'
 import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
 import './vars.css'
+import './home.css'
 
 export default {
 	extends: DefaultTheme,

docs/.vitepress/theme/vars.css

@@ -1,4 +1,4 @@
-/* Homepage Stuff */
+/* Banner Stuff */
 
 .banner {
 	background-color: var(--vp-button-brand-bg);
@@ -15,26 +15,23 @@
 }
 
 @media only screen and (min-width: 768px) {
-  .advertising {width: calc(100% - 8rem);}
+	.advertising {
+		width: calc(100% - 8rem);
+	}
 }
 
 @media only screen and (min-width: 960px) {
-  .banner {position: fixed; margin-top: var(--vp-nav-height); bottom: auto}
+	.banner {
-  #VPSidebarNav {margin-top: 1.5rem;}
+		position: fixed;
-  .VPLocalNav {top: calc(var(--vp-nav-height) + 1.5rem) !important;}
+		margin-top: var(--vp-nav-height);
-}
+		bottom: auto;
-
+	}
-.plugin-tabs--tab-list {
+	#VPSidebarNav {
-  background-color: var(--vp-c-bg-alt);
+		margin-top: 1.5rem;
-}
+	}
-
+	.VPLocalNav {
-.VPNavBar.home:not(.top) {
+		top: calc(var(--vp-nav-height) + 1.5rem) !important;
-  backdrop-filter: blur(0.5rem);
+	}
-  background-color: transparent !important;
-}
-
-.VPNavBar.home > .divider {
-  opacity: 0;
 }
 
 /* Colors */
@@ -43,13 +40,21 @@
 	--vp-c-brand-1: #3086ff;
 	--vp-c-brand-2: #75aeff;
 
-  --vp-button-brand-bg: #3661A2;
+	--vp-button-brand-bg: #3661a2;
-  --vp-button-brand-hover-bg: #24447F;
+	--vp-button-brand-hover-bg: #24447f;
-  --vp-button-brand-press-bg: #4896F3;
+	--vp-button-brand-press-bg: #4896f3;
 
 	--vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #3661A2, #4896F3);
+	--vp-home-hero-name-background: -webkit-linear-gradient(
-  --vp-home-hero-logo-background: -webkit-linear-gradient(120deg, #3661A2, #4896F3);
+		120deg,
+		#3661a2,
+		#4896f3
+	);
+	--vp-home-hero-logo-background: -webkit-linear-gradient(
+		120deg,
+		#3661a2,
+		#4896f3
+	);
 
 	--vp-home-hero-image-filter: blur(96px);
 
@@ -79,77 +84,93 @@
 /* Fonts */
 
 @font-face {
-  font-family: 'JetBrains Mono';
+	font-family: "JetBrains Mono";
-  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold-Italic.woff2') format('woff2'),
+	src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold-Italic.woff2")
-    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Bold-Italic.woff') format('woff');
+			format("woff2"),
+		url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Bold-Italic.woff")
+			format("woff");
 	font-weight: 700;
 	font-style: italic;
 	font-display: swap;
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
+	font-family: "JetBrains Mono";
-  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold.woff2') format('woff2'),
+	src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold.woff2")
-    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Bold.woff') format('woff');
+			format("woff2"),
+		url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Bold.woff")
+			format("woff");
 	font-weight: 700;
 	font-style: normal;
 	font-display: swap;
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
+	font-family: "JetBrains Mono";
-  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-ExtraBold-Italic.woff2') format('woff2'),
+	src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-ExtraBold-Italic.woff2")
-    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-ExtraBold-Italic.woff') format('woff');
+			format("woff2"),
+		url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-ExtraBold-Italic.woff")
+			format("woff");
 	font-weight: 800;
 	font-style: italic;
 	font-display: swap;
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
+	font-family: "JetBrains Mono";
-  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-ExtraBold.woff2') format('woff2'),
+	src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-ExtraBold.woff2")
-    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-ExtraBold.woff') format('woff');
+			format("woff2"),
+		url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-ExtraBold.woff")
+			format("woff");
 	font-weight: 800;
 	font-style: normal;
 	font-display: swap;
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
+	font-family: "JetBrains Mono";
-  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Italic.woff2') format('woff2'),
+	src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Italic.woff2")
-    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Italic.woff') format('woff');
+			format("woff2"),
+		url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Italic.woff")
+			format("woff");
 	font-weight: 400;
 	font-style: italic;
 	font-display: swap;
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
+	font-family: "JetBrains Mono";
-  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Medium-Italic.woff2') format('woff2'),
+	src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Medium-Italic.woff2")
-    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Medium-Italic.woff') format('woff');
+			format("woff2"),
+		url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Medium-Italic.woff")
+			format("woff");
 	font-weight: 500;
 	font-style: italic;
 	font-display: swap;
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
+	font-family: "JetBrains Mono";
-  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Medium.woff2') format('woff2'),
+	src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Medium.woff2")
-    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Medium.woff') format('woff');
+			format("woff2"),
+		url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Medium.woff")
+			format("woff");
 	font-weight: 500;
 	font-style: normal;
 	font-display: swap;
 }
 
 @font-face {
-  font-family: 'JetBrains Mono';
+	font-family: "JetBrains Mono";
-  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2') format('woff2'),
+	src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2")
-    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff') format('woff');
+			format("woff2"),
+		url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff")
+			format("woff");
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;
 }
 
 :root {
-  --vp-font-family-mono: 'JetBrains Mono'
+	--vp-font-family-mono: "JetBrains Mono";
 }

docs/index.md

@@ -1,6 +1,7 @@
 ---
 # https://vitepress.dev/reference/default-theme-home-page
 layout: home
+pageClass: home
 next:
   text: 'Introduction'
   link: '/tut/crash-course/1-introduction'
@@ -12,8 +13,11 @@ hero:
     src: /logo.svg
   actions:
     - theme: brand
-      text: Crash Course
+      text: What is Vide?
       link: /tut/crash-course/1-introduction
+    - theme: alt
+      text: Crash Course
+      link: /tut/crash-course/2-creation
     - theme: alt
       text: API Reference
       link: /api/reactivity-core
@@ -21,133 +25,8 @@ hero:
 features:
   - title: Reactive State Management
     details: Built upon Solid and makes building reactive applications simple.
-  - title: Declarative and simple syntax
+  - title: Declarative and simple
     details: Syntax designed to be minimal while also being easy to understand.
   - title: Fully Luau typecheckable
     details: Luau's typechecker catches type errors before you even begin testing.
 ---
-
-<div class="advertising">
-
-## Quick Look
-
-Store your state to be used by UI in Sources which can be changed by any code:
-
-```luau
--- We can create some new state.
-local health = source(100)
-
--- and read and write to it like a function
-print(health()) --> 100
-health(50)
-print(health()) --> 50
-```
-
-You can use sources to compute new derived values with functions:
-
-```luau
-local health = source(100)
-local maxHealth = source(100)
-
--- We can use a function to derive new data from some state
-local function percentageHealth()
-    return `{ health() / maxHealth() * 100 }%`
-end
-
-print(percentageHealth()) --> 100%
-health(50)
-print(percentageHealth()) --> 50%
-```
-
-Use effects to react to changes to the sources used:
-
-```luau
-local health = source(100)
-local maxHealth = source(100)
-
--- We'll create a new scope for handling effects.
-local destroy = root(function()
-    -- We can create an effect that will re-run whenever it's values change.
-    effect(function()
-        print(`{ health() / maxHealth() * 100 }%`)
-    end)
-end)
-
--- Effects will respond to any changes in the state it reads from.
-health(50) --> effect prints 50%
--- Destroys the scope and the effect preventing it from running again.
-destroy()
-```
-
-You can use sources to build instances that will react to these sources:
-
-```luau
--- We create a scope that will mount the UI to Players.LocalPlayer.PlayerGui
-mount(function()
-    local health = source(100)
-    local maxHealth = source(100)
-
-    local function percentageHealth()
-        return health() / maxHealth()
-    end
-
-    -- This will create a Frame with the given properties.
-    return create "Frame" {
-        Name = "Health",
-        Size = UDim2.new(1, 0, 0, 24),
-        BackgroundColor3 = Color3.fromHex("#000000"),
-
-        -- We can add children directly to another object.
-        create "Frame" {
-            Name = "Fill",
-            -- ... and we can set properties to effects which automatically update the property.
-            Size = function()
-                return UDim2.fromScale(percentageHealth(), 1)
-            end,
-            BackgroundColor3 = Color3.fromHex("#ff0000"),
-        }
-    }
-end, Players.LocalPlayer.PlayerGui)
-```
-
-## Install
-
-Vide can be installed via Wally and Github. There is currently no official Vide rbxm.
-
-:::tabs
-== Wally
-
-Make sure you have wally installed on your computer.<br>
-Add the following line to your `wally.toml` and then re-install your packages
-```toml
-[dependencies]
-vide = centau/vide@0.3.1
-```
-
-== Git
-
-Make sure you have Git installed on your computer.<br>
-Run the following command in the directory you want to have Vide installed at
-```sh
-git submodule add https://github.com/centau/vide.git
-```
-
-== Build
-
-Download vide onto your computer
-
-```sh
-git clone https://github.com/centau/vide.git & cd vide
-```
-
-then use a syncing tool to build Vide into a rbxm
-
-```sh
-rojo build -o build.rbxm
-```
-
-which you can then insert into Roblox Studio
-
-:::
-
-</div>