From 1554325efbf49e138c1239202f875885af385a43 Mon Sep 17 00:00:00 2001 From: alice <166900055+alicesaidhi@users.noreply.github.com> Date: Tue, 29 Oct 2024 11:45:52 +0100 Subject: [PATCH] Simplify Home Page --- docs/.vitepress/theme/home.css | 18 +++ docs/.vitepress/theme/index.js | 1 + docs/.vitepress/theme/vars.css | 221 ++++++++++++++++++--------------- docs/index.md | 133 +------------------- 4 files changed, 146 insertions(+), 227 deletions(-) create mode 100644 docs/.vitepress/theme/home.css diff --git a/docs/.vitepress/theme/home.css b/docs/.vitepress/theme/home.css new file mode 100644 index 0000000..e1d17f1 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js index cca37ba..636d7fc 100644 --- a/docs/.vitepress/theme/index.js +++ b/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, diff --git a/docs/.vitepress/theme/vars.css b/docs/.vitepress/theme/vars.css index bd4dd21..cad99da 100644 --- a/docs/.vitepress/theme/vars.css +++ b/docs/.vitepress/theme/vars.css @@ -1,155 +1,176 @@ -/* Homepage Stuff */ +/* Banner Stuff */ .banner { - background-color: var(--vp-button-brand-bg); - color: var(--vp-button-brand-text); - width: 100%; - text-align: center; - position: fixed; - bottom: 0px; - z-index: 50; + background-color: var(--vp-button-brand-bg); + color: var(--vp-button-brand-text); + width: 100%; + text-align: center; + position: fixed; + bottom: 0px; + z-index: 50; } .advertising { - margin: auto; + margin: auto; } @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} - #VPSidebarNav {margin-top: 1.5rem;} - .VPLocalNav {top: calc(var(--vp-nav-height) + 1.5rem) !important;} -} - -.plugin-tabs--tab-list { - background-color: var(--vp-c-bg-alt); -} - -.VPNavBar.home:not(.top) { - backdrop-filter: blur(0.5rem); - background-color: transparent !important; -} - -.VPNavBar.home > .divider { - opacity: 0; + .banner { + position: fixed; + margin-top: var(--vp-nav-height); + bottom: auto; + } + #VPSidebarNav { + margin-top: 1.5rem; + } + .VPLocalNav { + top: calc(var(--vp-nav-height) + 1.5rem) !important; + } } /* Colors */ :root { - --vp-c-brand-1: #3086ff; - --vp-c-brand-2: #75aeff; + --vp-c-brand-1: #3086ff; + --vp-c-brand-2: #75aeff; - --vp-button-brand-bg: #3661A2; - --vp-button-brand-hover-bg: #24447F; - --vp-button-brand-press-bg: #4896F3; + --vp-button-brand-bg: #3661a2; + --vp-button-brand-hover-bg: #24447f; + --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-logo-background: -webkit-linear-gradient(120deg, #3661A2, #4896F3); + --vp-home-hero-name-color: transparent; + --vp-home-hero-name-background: -webkit-linear-gradient( + 120deg, + #3661a2, + #4896f3 + ); + --vp-home-hero-logo-background: -webkit-linear-gradient( + 120deg, + #3661a2, + #4896f3 + ); --vp-home-hero-image-filter: blur(96px); - --vp-c-bg: #f2f5f8; - --vp-c-bg-alt: #dfe8f5; - --vp-c-bg-elv: #dde7f4; - --vp-c-bg-soft: #e8f1fe; + --vp-c-bg: #f2f5f8; + --vp-c-bg-alt: #dfe8f5; + --vp-c-bg-elv: #dde7f4; + --vp-c-bg-soft: #e8f1fe; - --vp-c-border: #c0c3c6; - --vp-c-divider: #dfe2e6; - --vp-c-gutter: #dfe2e6; - --vp-plugin-tabs-tab-bg: var(--vp-c-bg); + --vp-c-border: #c0c3c6; + --vp-c-divider: #dfe2e6; + --vp-c-gutter: #dfe2e6; + --vp-plugin-tabs-tab-bg: var(--vp-c-bg); } .dark { - --vp-c-brand-2: #234782; - --vp-c-bg: #0d131b; - --vp-c-bg-alt: #111720; - --vp-c-bg-elv: #182231; - --vp-c-bg-soft: #182231; + --vp-c-brand-2: #234782; + --vp-c-bg: #0d131b; + --vp-c-bg-alt: #111720; + --vp-c-bg-elv: #182231; + --vp-c-bg-soft: #182231; - --vp-c-border: #111720; - --vp-c-divider: #1d273c; - --vp-c-gutter: #181d27; + --vp-c-border: #111720; + --vp-c-divider: #1d273c; + --vp-c-gutter: #181d27; } /* Fonts */ @font-face { - font-family: 'JetBrains Mono'; - src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold-Italic.woff2') 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-family: "JetBrains Mono"; + src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold-Italic.woff2") + 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'; - src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold.woff2') 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-family: "JetBrains Mono"; + src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold.woff2") + 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'; - src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-ExtraBold-Italic.woff2') 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-family: "JetBrains Mono"; + src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-ExtraBold-Italic.woff2") + 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'; - src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-ExtraBold.woff2') 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-family: "JetBrains Mono"; + src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-ExtraBold.woff2") + 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'; - src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Italic.woff2') 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-family: "JetBrains Mono"; + src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Italic.woff2") + 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'; - src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Medium-Italic.woff2') 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-family: "JetBrains Mono"; + src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Medium-Italic.woff2") + 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'; - src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Medium.woff2') 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-family: "JetBrains Mono"; + src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Medium.woff2") + 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'; - src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2') 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; + font-family: "JetBrains Mono"; + src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2") + 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"; } diff --git a/docs/index.md b/docs/index.md index a5b3646..97d2c33 100644 --- a/docs/index.md +++ b/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. --- - -
- -## 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.
-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.
-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 - -::: - -
\ No newline at end of file