From cbce3348f25f9421a607d82a2cb6fc3bcdce7d2d Mon Sep 17 00:00:00 2001 From: alice <166900055+alicesaidhi@users.noreply.github.com> Date: Mon, 28 Oct 2024 15:54:22 +0100 Subject: [PATCH 1/8] update css and snippets --- README.md | 2 +- docs/.vitepress/config.ts | 145 +++++++++--------- docs/.vitepress/theme/index.js | 9 +- docs/.vitepress/theme/vars.css | 26 +++- docs/api/animation.md | 2 +- docs/api/creation.md | 16 +- docs/api/reactivity-core.md | 14 +- docs/api/reactivity-flow.md | 14 +- docs/api/reactivity-utility.md | 16 +- docs/api/strict-mode.md | 2 +- docs/index.md | 8 +- docs/package.json | 26 ++-- docs/public/logo.svg | 40 ++--- docs/tut/advanced/nested-scoping.md | 6 +- docs/tut/crash-course/10-cleanup.md | 2 +- docs/tut/crash-course/11-control-flow.md | 4 +- docs/tut/crash-course/12-actions.md | 6 +- docs/tut/crash-course/13-strict-mode.md | 2 +- docs/tut/crash-course/14-concepts.md | 2 +- docs/tut/crash-course/2-creation.md | 2 +- docs/tut/crash-course/3-components.md | 4 +- docs/tut/crash-course/4-source.md | 6 +- docs/tut/crash-course/5-effect.md | 4 +- docs/tut/crash-course/6-scope.md | 4 +- docs/tut/crash-course/7-stateful-component.md | 4 +- docs/tut/crash-course/8-implicit-effect.md | 4 +- docs/tut/crash-course/9-derived-source.md | 6 +- 27 files changed, 200 insertions(+), 176 deletions(-) diff --git a/README.md b/README.md index 8ce077b..13e41b6 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ for a quick introduction to the library. ## Code sample -```lua +```luau local create = vide.create local source = vide.source diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 7708fdf..c2da810 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -1,70 +1,75 @@ -//import { defineConfig } from "vitepress" -import { withMermaid } from "vitepress-plugin-mermaid"; - -// https://vitepress.dev/reference/site-config -export default withMermaid({ - title: "Vide", - titleTemplate: ":title - A reactive UI library for Luau", - description: "A reactive UI library for Luau.", - base: "/vide/", - head: [["link", { rel: "icon", href: "/vide/logo.svg" }]], - - themeConfig: { - logo: "/logo.svg", - - // https://vitepress.dev/reference/default-theme-config - nav: [ - { text: "Home", link: "/" }, - { text: "Tutorials", link: "/tut/crash-course/1-introduction" }, - { text: "API", link: "/api/reactivity-core"}, - ], - - sidebar: { - "/api/": [ - { - text: "API", - items: [ - { text: "Reactivity: Core", link: "/api/reactivity-core" }, - { text: "Reactivity: Utility", link: "/api/reactivity-utility" }, - { text: "Reactivity: Control Flow", link: "/api/reactivity-flow" }, - { text: "Element Creation", link: "/api/creation" }, - { text: "Animation", link: "/api/animation" }, - { text: "Strict Mode", link: "/api/strict-mode" }, - ] - } - ], - - "/tut/": [ - { - text: "Crash Course", - items: [ - { text: "Introduction", link: "/tut/crash-course/1-introduction" }, - { text: "Element Creation", link: "/tut/crash-course/2-creation" }, - { text: "Components", link: "/tut/crash-course/3-components" }, - { text: "Sources", link: "/tut/crash-course/4-source" }, - { text: "Effects", link: "/tut/crash-course/5-effect" }, - { text: "Scopes", link: "/tut/crash-course/6-scope" }, - { text: "Stateful Components", link: "/tut/crash-course/7-stateful-component" }, - { text: "Implicit Effects", link: "/tut/crash-course/8-implicit-effect" }, - { text: "Derived Sources", link: "/tut/crash-course/9-derived-source" }, - { text: "Cleanup", link: "/tut/crash-course/10-cleanup" }, - { text: "Control Flow", link: "/tut/crash-course/11-control-flow" }, - { text: "Actions", link: "/tut/crash-course/12-actions" }, - { text: "Strict Mode", link: "/tut/crash-course/13-strict-mode" }, - { text: "Concepts Summary", link: "/tut/crash-course/14-concepts" } - ] - }, - { - text: "Advanced Reactivity", - items: [ - { text: "Nested Scopes", link: "/tut/advanced/nested-scoping.md"} - ] - } - ], - }, - - socialLinks: [ - { icon: "github", link: "https://github.com/centau/vide" } - ] - } -}) +//import { defineConfig } from "vitepress" +import { withMermaid } from "vitepress-plugin-mermaid"; +import banner from "vite-plugin-banner" + +// https://vitepress.dev/reference/site-config +export default withMermaid({ + title: "Vide", + titleTemplate: ":title - A reactive UI library for Luau", + description: "A reactive UI library for Luau.", + base: "/vide/", + head: [["link", { rel: "icon", href: "/vide/logo.svg" }]], + + themeConfig: { + logo: "/logo.svg", + + search: { + provider: "local" + }, + + // https://vitepress.dev/reference/default-theme-config + nav: [ + { text: "Home", link: "/" }, + { text: "Tutorials", link: "/tut/crash-course/1-introduction" }, + { text: "API", link: "/api/reactivity-core"}, + ], + + sidebar: { + "/api/": [ + { + text: "API", + items: [ + { text: "Reactivity: Core", link: "/api/reactivity-core" }, + { text: "Reactivity: Utility", link: "/api/reactivity-utility" }, + { text: "Reactivity: Control Flow", link: "/api/reactivity-flow" }, + { text: "Element Creation", link: "/api/creation" }, + { text: "Animation", link: "/api/animation" }, + { text: "Strict Mode", link: "/api/strict-mode" }, + ] + } + ], + + "/tut/": [ + { + text: "Crash Course", + items: [ + { text: "Introduction", link: "/tut/crash-course/1-introduction" }, + { text: "Element Creation", link: "/tut/crash-course/2-creation" }, + { text: "Components", link: "/tut/crash-course/3-components" }, + { text: "Sources", link: "/tut/crash-course/4-source" }, + { text: "Effects", link: "/tut/crash-course/5-effect" }, + { text: "Scopes", link: "/tut/crash-course/6-scope" }, + { text: "Stateful Components", link: "/tut/crash-course/7-stateful-component" }, + { text: "Implicit Effects", link: "/tut/crash-course/8-implicit-effect" }, + { text: "Derived Sources", link: "/tut/crash-course/9-derived-source" }, + { text: "Cleanup", link: "/tut/crash-course/10-cleanup" }, + { text: "Control Flow", link: "/tut/crash-course/11-control-flow" }, + { text: "Actions", link: "/tut/crash-course/12-actions" }, + { text: "Strict Mode", link: "/tut/crash-course/13-strict-mode" }, + { text: "Concepts Summary", link: "/tut/crash-course/14-concepts" } + ] + }, + { + text: "Advanced Reactivity", + items: [ + { text: "Nested Scopes", link: "/tut/advanced/nested-scoping.md"} + ] + } + ], + }, + + socialLinks: [ + { icon: "github", link: "https://github.com/centau/vide" } + ] + } +}) diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js index b8b9aa6..2422d09 100644 --- a/docs/.vitepress/theme/index.js +++ b/docs/.vitepress/theme/index.js @@ -1,4 +1,5 @@ -// .vitepress/theme/index.js -import DefaultTheme from 'vitepress/theme' -import './vars.css' -export default DefaultTheme +// .vitepress/theme/index.js +import DefaultTheme from 'vitepress/theme' +import './vars.css' + +export default DefaultTheme \ No newline at end of file diff --git a/docs/.vitepress/theme/vars.css b/docs/.vitepress/theme/vars.css index 64df54f..4f3f315 100644 --- a/docs/.vitepress/theme/vars.css +++ b/docs/.vitepress/theme/vars.css @@ -1,3 +1,23 @@ -:root { - --vp-c-brand-1: #3086ff; -} +:root { + --vp-c-brand-1: #3086ff; + + --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; +} + +.dark { + --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: #181d27; + --vp-c-gutter: #181d27; +} \ No newline at end of file diff --git a/docs/api/animation.md b/docs/api/animation.md index 6481cc3..9f3b805 100644 --- a/docs/api/animation.md +++ b/docs/api/animation.md @@ -6,7 +6,7 @@ Returns a new source with a value always moving torwards the input source value. - **Type** - ```lua + ```luau function spring( source: () -> T & Animatable, period: number = 1, diff --git a/docs/api/creation.md b/docs/api/creation.md index 539967d..528b4fb 100644 --- a/docs/api/creation.md +++ b/docs/api/creation.md @@ -9,7 +9,7 @@ target instance. - **Type** - ```lua + ```luau function mount(component: () -> T, target: Instance?): () -> () ``` @@ -25,7 +25,7 @@ target instance. - **Example** - ```lua + ```luau local function App() return create "ScreenGui" { create "TextLabel" { Text = "Vide" } @@ -41,7 +41,7 @@ Creates a new UI element, applying any given properties. - **Type** - ```lua + ```luau function create(class: string): (Properties) -> Instance function create(instance: Instance): (Properties) -> Instance @@ -76,7 +76,7 @@ Creates a new UI element, applying any given properties. Basic element creation. - ```lua + ```luau local frame = create "Frame" { Name = "NewFrame", Position = UDim2.fromScale(1, 0) @@ -85,7 +85,7 @@ Creates a new UI element, applying any given properties. A component using property nesting. - ```lua + ```luau type Layout = { Layout = { Position: UDim2?, @@ -116,7 +116,7 @@ instances. - **Type** - ```lua + ```luau function action((Instance) -> (), priority: number = 1): Action ``` @@ -133,7 +133,7 @@ instances. An action to listen to changed properties: - ```lua + ```luau local function changed(property: string, callback: (new) -> ()) return action(function(instance) local con - instance:GetPropertyChangedSignal(property):Connect(function() @@ -161,7 +161,7 @@ A wrapper for `action()` to listen for property changes. - **Type** - ```lua + ```luau function changed(property: string, callback: (...unknown) -> ()): Action ``` diff --git a/docs/api/reactivity-core.md b/docs/api/reactivity-core.md index 861e0e1..b68911c 100644 --- a/docs/api/reactivity-core.md +++ b/docs/api/reactivity-core.md @@ -13,7 +13,7 @@ Creates and runs a function in a new stable scope. - **Type** - ```lua + ```luau function root(fn: (() -> ()) -> T...): (() -> (), T...) ``` @@ -30,7 +30,7 @@ Creates a new source with the given value. - **Type** - ```lua + ```luau function source(value: T): Source type Source = @@ -45,7 +45,7 @@ Creates a new source with the given value. - **Example** - ```lua + ```luau local count = source(0) count() -- 0 @@ -59,7 +59,7 @@ Runs a side-effect in a new reactive scope on source update. - **Type** - ```lua + ```luau function effect(callback: () -> ()) ``` @@ -72,7 +72,7 @@ Runs a side-effect in a new reactive scope on source update. - **Example** - ```lua + ```luau local num = source(1) effect(function() @@ -92,7 +92,7 @@ Derives a new source in a new reactive scope from existing sources. - **Type** - ```lua + ```luau function derive(source: () -> T): () -> T ``` @@ -108,7 +108,7 @@ Derives a new source in a new reactive scope from existing sources. - **Example** - ```lua + ```luau local count = source(0) local text = derive(function() return `count: {count()}` end) diff --git a/docs/api/reactivity-flow.md b/docs/api/reactivity-flow.md index 6870367..03aea97 100644 --- a/docs/api/reactivity-flow.md +++ b/docs/api/reactivity-flow.md @@ -8,7 +8,7 @@ Shows one of two components depending on an input source. - **Type** - ```lua + ```luau function show(source: () -> unknown, component: () -> T): () -> T? function show(source: () -> unknown, component: () -> T, fallback: () -> U): () -> T | U ``` @@ -32,7 +32,7 @@ Shows one of a set of components depending on an input source and a mapping tabl - **Type** - ```lua + ```luau function switch(source: () -> K): (map: Map V>) -> V? ``` @@ -49,7 +49,7 @@ Shows one of a set of components depending on an input source and a mapping tabl - **Example** - ```lua + ```luau local logged = source(false) local button = switch(logged) { @@ -69,7 +69,7 @@ Maps each index in a table source to an object. - **Type** - ```lua + ```luau function indexes( source: () -> Map, transform: (value: () -> VI, index: KI) -> VO @@ -102,7 +102,7 @@ Maps each index in a table source to an object. The intended purpose of this function is to map each index in a table to a UI element. - ```lua + ```luau type Item = { name: string, icon: number @@ -129,7 +129,7 @@ Maps each value in a table source to an object. - **Type** - ```lua + ```luau function values( source: () -> Map, transform: (value: VI, index: () -> KI) -> VO @@ -169,7 +169,7 @@ Maps each value in a table source to an object. The intended purpose of this function is to map each value in a table to a UI element. - ```lua + ```luau type Item = { name: string, icon: number diff --git a/docs/api/reactivity-utility.md b/docs/api/reactivity-utility.md index 824fe35..6f719e1 100644 --- a/docs/api/reactivity-utility.md +++ b/docs/api/reactivity-utility.md @@ -6,7 +6,7 @@ Runs a callback anytime a scope is reran or destroyed. - **Type** - ```lua + ```luau function cleanup(callback: () -> ()) function cleanup(obj: Destroyable) function cleanup(obj: Disconnectable) @@ -17,7 +17,7 @@ Runs a callback anytime a scope is reran or destroyed. - **Example** - ```lua + ```luau local data = source(1) effect(function() @@ -35,7 +35,7 @@ Runs a given function in a new stable scope. - **Type** - ```lua + ```luau function untrack(source: () -> T): T ``` @@ -46,7 +46,7 @@ Runs a given function in a new stable scope. - **Example** - ```lua + ```luau local a = source(0) local b = source(0) @@ -68,7 +68,7 @@ read can still be tracked inside a reactive scope. - **Type** - ```lua + ```luau function read(value: T | () -> T): T ``` @@ -79,7 +79,7 @@ trigger effects until after the function finishes running. - **Type** - ```lua + ```luau function batch(fn: () -> ()) ``` @@ -96,7 +96,7 @@ Creates a new context. - **Type** - ```lua + ```luau function context(default: T): Context type Context = @@ -113,7 +113,7 @@ Creates a new context. - **Example** - ```lua + ```luau local theme = context() local function Button() diff --git a/docs/api/strict-mode.md b/docs/api/strict-mode.md index 570108b..b3cae5b 100644 --- a/docs/api/strict-mode.md +++ b/docs/api/strict-mode.md @@ -2,7 +2,7 @@ Strict mode is library-wide and can get set by doing: -```lua +```luau vide.strict = true ``` diff --git a/docs/index.md b/docs/index.md index 6fe3a4a..0aa97b8 100644 --- a/docs/index.md +++ b/docs/index.md @@ -11,13 +11,19 @@ hero: alt: Vide actions: - theme: brand - text: Tutorials + text: Crash Course link: /tut/crash-course/1-introduction - theme: alt text: API Reference link: /api/reactivity-core features: + - title: Reactively driven + details: Powerful and modern primitives inspired by SolidJS to build fluid UI with little friction + - title: Declarative and concise + details: Syntax built to be minimal while also obvious and easy to understand to anyone + - title: Fully Luau Typecheckable + details: Ensure you write correct code through the Luau typechecking engine. - title: In Development details: Not recommended for production use. --- diff --git a/docs/package.json b/docs/package.json index 5dce993..5e3035b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,14 +1,12 @@ -{ - "type": "module", - - "scripts": { - "docs:dev": "vitepress dev", - "docs:build": "vitepress build", - "docs:preview": "vitepress preview" - }, - - "devDependencies": { - "vitepress": "1.0.0-rc.25", - "vitepress-plugin-mermaid": "2.0.14" - } -} +{ + "type": "module", + "scripts": { + "docs:dev": "vitepress dev", + "docs:build": "vitepress build", + "docs:preview": "vitepress preview" + }, + "devDependencies": { + "vitepress": "1.4.1", + "vitepress-plugin-mermaid": "2.0.17" + } +} diff --git a/docs/public/logo.svg b/docs/public/logo.svg index 92b06c1..22d840a 100644 --- a/docs/public/logo.svg +++ b/docs/public/logo.svg @@ -1,37 +1,31 @@ - - - - - + + + + + - + + - - - + + + - + - - - + + + - - - - - - - - + - + - + diff --git a/docs/tut/advanced/nested-scoping.md b/docs/tut/advanced/nested-scoping.md index c5e6b4b..0542ccc 100644 --- a/docs/tut/advanced/nested-scoping.md +++ b/docs/tut/advanced/nested-scoping.md @@ -6,7 +6,7 @@ most common cases, but they do not cover all of them. This tutorial will demonstrate how to implement a `show()` control flow function using just sources and effects. -```lua +```luau local mount = vide.mount local source = vide.source local show = vide.show @@ -61,7 +61,7 @@ effect's reactive scope is destroyed whenever the show effect is rerun. The same can be achieved without the use of `show()`: -```lua +```luau local mount = vide.mount local source = vide.source local effect = vide.effect @@ -126,7 +126,7 @@ may be rerun needlessly and recreate the counter. Alternatively, instead of using `root()`: -```lua +```luau local mount = vide.mount local source = vide.source local effect = vide.effect diff --git a/docs/tut/crash-course/10-cleanup.md b/docs/tut/crash-course/10-cleanup.md index f6ca5f3..e498c23 100644 --- a/docs/tut/crash-course/10-cleanup.md +++ b/docs/tut/crash-course/10-cleanup.md @@ -5,7 +5,7 @@ a side-effect from a source update. Vide provides a function `cleanup()` which is used to queue a callback for the next time a reactive scope is rerun or destroyed, or when a stable scope is destroyed. -```lua +```luau local root = vide.root local source = vide.source local effect = vide.effect diff --git a/docs/tut/crash-course/11-control-flow.md b/docs/tut/crash-course/11-control-flow.md index b206915..298ce93 100644 --- a/docs/tut/crash-course/11-control-flow.md +++ b/docs/tut/crash-course/11-control-flow.md @@ -14,7 +14,7 @@ instance. update to display the current value at that index. Each table index is given a single corresponding UI element. -```lua +```luau local list = source { "finish the crash course", "star Vide's GitHub" @@ -90,7 +90,7 @@ end When you edit a table in a source, you must set that table again to actually update the source. -```lua +```luau local src = source { 1, 2 } local data = src() table.insert(data, 3) -- no effects will run diff --git a/docs/tut/crash-course/12-actions.md b/docs/tut/crash-course/12-actions.md index 176c12e..64d3fce 100644 --- a/docs/tut/crash-course/12-actions.md +++ b/docs/tut/crash-course/12-actions.md @@ -3,11 +3,11 @@ Actions in Vide are special callbacks that you can pass along with properties, to run some code on an instance receiving them. -```lua +```luau local action = vide.action ``` -```lua +```luau create "TextLabel" { Text = "test", @@ -22,7 +22,7 @@ create "TextLabel" { Actions can be wrapped with functions for reuse. Below is an example of an action used to listen for property changes: -```lua +```luau local action = vide.action local effect = vide.effect local cleanup = vide.cleanup diff --git a/docs/tut/crash-course/13-strict-mode.md b/docs/tut/crash-course/13-strict-mode.md index 6efa1c3..f2b30fe 100644 --- a/docs/tut/crash-course/13-strict-mode.md +++ b/docs/tut/crash-course/13-strict-mode.md @@ -13,7 +13,7 @@ Strict mode will run derived sources and effects twice each time they update. This is to help ensure that derived source computations are pure, and that any cleanups made in derived sources or effects are done properly. -```lua +```luau local source = vide.source local effect = vide.effect diff --git a/docs/tut/crash-course/14-concepts.md b/docs/tut/crash-course/14-concepts.md index 24ca703..77e9e7f 100644 --- a/docs/tut/crash-course/14-concepts.md +++ b/docs/tut/crash-course/14-concepts.md @@ -73,7 +73,7 @@ relationships between effects and the sources they depend on. ### Code -```lua +```luau local count = source(0) root(function() diff --git a/docs/tut/crash-course/2-creation.md b/docs/tut/crash-course/2-creation.md index 5e76173..668a470 100644 --- a/docs/tut/crash-course/2-creation.md +++ b/docs/tut/crash-course/2-creation.md @@ -5,7 +5,7 @@ Instances are created using `create()`. Parentheses `()` can be omitted when calling functions with string or table literals for brevity. -```lua +```luau local create = vide.create return create "ScreenGui" { diff --git a/docs/tut/crash-course/3-components.md b/docs/tut/crash-course/3-components.md index 8e5890f..0b803ca 100644 --- a/docs/tut/crash-course/3-components.md +++ b/docs/tut/crash-course/3-components.md @@ -10,7 +10,7 @@ together. ::: code-group -```lua [Button.luau] +```luau [Button.luau] local create = vide.create local function Button(props: { @@ -34,7 +34,7 @@ end return Button ``` -```lua [Menu.luau] +```luau [Menu.luau] local create = vide.create local Button = require(Button) diff --git a/docs/tut/crash-course/4-source.md b/docs/tut/crash-course/4-source.md index 08da45c..d862156 100644 --- a/docs/tut/crash-course/4-source.md +++ b/docs/tut/crash-course/4-source.md @@ -5,7 +5,7 @@ Vide's reactivity. A source can be created using `source()`. -```lua +```luau local source = vide.source local count = source(0) @@ -16,13 +16,13 @@ The value passed to `source()` is the initial value of the source. The value of a source can be set by calling it with an argument, and can be read by calling it with no arguments. -```lua +```luau count(count() + 1) -- increment count by 1 ``` Sources can be *derived* by wrapping them in functions. -```lua +```luau local count = source(0) local text = function() diff --git a/docs/tut/crash-course/5-effect.md b/docs/tut/crash-course/5-effect.md index 5e6043c..29e6358 100644 --- a/docs/tut/crash-course/5-effect.md +++ b/docs/tut/crash-course/5-effect.md @@ -5,7 +5,7 @@ A source and effect is analogous to a signal and connection. Effects are created using `effect()`. -```lua +```luau local source = vide.source local effect = vide.effect @@ -26,7 +26,7 @@ that source is updated. Derived sources are also tracked, it doesn't matter how deeply nested inside a function a source is. -```lua +```luau local source = vide.source local effect = vide.effect diff --git a/docs/tut/crash-course/6-scope.md b/docs/tut/crash-course/6-scope.md index 2853fff..6c12088 100644 --- a/docs/tut/crash-course/6-scope.md +++ b/docs/tut/crash-course/6-scope.md @@ -22,7 +22,7 @@ destroyed, and so on. This is why all scopes must be created within another scope, except `root()` which is used to create the initial scope that you can manually destroy. -```lua +```luau local root = vide.root local source = vide.source local effect = vide.effect @@ -45,7 +45,7 @@ count(1) -- prints "1" The scope created by `root()` can be destroyed. -```lua +```luau local function setup() local count = source(0) diff --git a/docs/tut/crash-course/7-stateful-component.md b/docs/tut/crash-course/7-stateful-component.md index 493f9bc..5126c73 100644 --- a/docs/tut/crash-course/7-stateful-component.md +++ b/docs/tut/crash-course/7-stateful-component.md @@ -5,7 +5,7 @@ store the data, and effects to display the data. ## Internal State -```lua +```luau local create = vide.create local source = vide.source local effect = vide.effect @@ -37,7 +37,7 @@ count source is created inside the component. External sources can also be passed into components for them to use. -```lua +```luau local function Counter(props: { count: () -> number }) local count = props.count diff --git a/docs/tut/crash-course/8-implicit-effect.md b/docs/tut/crash-course/8-implicit-effect.md index bbd92d4..cdb75fb 100644 --- a/docs/tut/crash-course/8-implicit-effect.md +++ b/docs/tut/crash-course/8-implicit-effect.md @@ -3,7 +3,7 @@ Explicitly creating effects to update properties is tedious. You can *implicitly* create an effect to update properties instead. -```lua +```luau local create = vide.create local source = vide.source @@ -34,7 +34,7 @@ with a number key instead of string key) can return an instance or an array of instances. An effect is automatically created to unparent removed instances and parent new instances on source update. -```lua +```luau local items = source { create "TextLabel" { Text = "A" } } diff --git a/docs/tut/crash-course/9-derived-source.md b/docs/tut/crash-course/9-derived-source.md index 12a89b2..19a6a5d 100644 --- a/docs/tut/crash-course/9-derived-source.md +++ b/docs/tut/crash-course/9-derived-source.md @@ -2,7 +2,7 @@ We have seen the basic way to derive a source: -```lua +```luau local count = source(0) local text = function() @@ -18,7 +18,7 @@ However, in some cases where this source could be used by multiple effects at the same time, the function wrapping the source will needlessly rerun to convert the count into a string for each effect using it. -```lua +```luau local source = vide.source local effect = vide.effect @@ -39,7 +39,7 @@ To avoid this, you can use `derive()` to derive a new source instead. This will run a function in a reactive scope only when a source used inside updated. Reading this derived source multiple times will just return a cached result. -```lua +```luau local source = vide.source local effect = vide.effect local derive = vide.derive From 27a2cdcaebc20ca5ac6854b3f3ce6fd96bcb201d Mon Sep 17 00:00:00 2001 From: alice <166900055+alicesaidhi@users.noreply.github.com> Date: Mon, 28 Oct 2024 17:02:43 +0100 Subject: [PATCH 2/8] Add banner --- docs/.vitepress/config.ts | 5 ++++ docs/.vitepress/theme/index.js | 6 ++++- docs/.vitepress/theme/layout.vue | 16 +++++++++++++ docs/.vitepress/theme/vars.css | 39 ++++++++++++++++++++++++++++++++ docs/index.md | 3 --- 5 files changed, 65 insertions(+), 4 deletions(-) create mode 100644 docs/.vitepress/theme/layout.vue diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index c2da810..1297724 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -17,6 +17,11 @@ export default withMermaid({ provider: "local" }, + footer: { + message: 'Released under the MIT License.', + copyright: 'Copyright © 2023-present centau' + }, + // https://vitepress.dev/reference/default-theme-config nav: [ { text: "Home", link: "/" }, diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js index 2422d09..9e30570 100644 --- a/docs/.vitepress/theme/index.js +++ b/docs/.vitepress/theme/index.js @@ -1,5 +1,9 @@ // .vitepress/theme/index.js import DefaultTheme from 'vitepress/theme' +import layout from './layout.vue' import './vars.css' -export default DefaultTheme \ No newline at end of file +export default { + extends: DefaultTheme, + Layout: layout +} \ No newline at end of file diff --git a/docs/.vitepress/theme/layout.vue b/docs/.vitepress/theme/layout.vue new file mode 100644 index 0000000..a0e527d --- /dev/null +++ b/docs/.vitepress/theme/layout.vue @@ -0,0 +1,16 @@ + + + + + + + \ No newline at end of file diff --git a/docs/.vitepress/theme/vars.css b/docs/.vitepress/theme/vars.css index 4f3f315..56f141b 100644 --- a/docs/.vitepress/theme/vars.css +++ b/docs/.vitepress/theme/vars.css @@ -1,6 +1,39 @@ +.banner { + background-color: var(--vp-button-brand-bg) !important; + color: rgba(255, 255, 255, 100%); + width: 100%; + height: 1.5rem; + text-align: center; + position: fixed; + z-index: 30; +} + +.VPNav { + margin-top: 1.5rem; +} + +.VPSidebar { + margin-top: 1.5rem; +} + :root { --vp-c-brand-1: #3086ff; + --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-image-background-image: linear-gradient( + 135deg, + #1D314F 50%, + #2A57A2 50% + ); + --vp-home-hero-image-filter: blur(96px); + --vp-c-bg: #f2f5f8; --vp-c-bg-alt: #dfe8f5; --vp-c-bg-elv: #dde7f4; @@ -20,4 +53,10 @@ --vp-c-border: #111720; --vp-c-divider: #181d27; --vp-c-gutter: #181d27; + + --vp-home-hero-image-background-image: linear-gradient( + -45deg, + #3D506C 50%, + #2F415C 50% + ); } \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 0aa97b8..7da346b 100644 --- a/docs/index.md +++ b/docs/index.md @@ -24,7 +24,4 @@ features: details: Syntax built to be minimal while also obvious and easy to understand to anyone - title: Fully Luau Typecheckable details: Ensure you write correct code through the Luau typechecking engine. - - title: In Development - details: Not recommended for production use. --- - From 08d10184fb818b1fcaeee89259d484d8bfd1a104 Mon Sep 17 00:00:00 2001 From: alice <166900055+alicesaidhi@users.noreply.github.com> Date: Mon, 28 Oct 2024 20:08:31 +0100 Subject: [PATCH 3/8] improve home page --- docs/.vitepress/config.ts | 8 ++++- docs/.vitepress/theme/index.js | 4 +++ docs/.vitepress/theme/vars.css | 59 +++++++++++++++++++++++----------- docs/index.md | 59 +++++++++++++++++++++++++++++++--- docs/package.json | 3 +- docs/public/full_logo.svg | 2 +- 6 files changed, 110 insertions(+), 25 deletions(-) diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 1297724..9c8fae8 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -1,6 +1,6 @@ //import { defineConfig } from "vitepress" import { withMermaid } from "vitepress-plugin-mermaid"; -import banner from "vite-plugin-banner" +import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs' // https://vitepress.dev/reference/site-config export default withMermaid({ @@ -9,6 +9,12 @@ export default withMermaid({ description: "A reactive UI library for Luau.", base: "/vide/", head: [["link", { rel: "icon", href: "/vide/logo.svg" }]], + + markdown: { + config(md) { + md.use(tabsMarkdownPlugin) + } + }, themeConfig: { logo: "/logo.svg", diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js index 9e30570..cca37ba 100644 --- a/docs/.vitepress/theme/index.js +++ b/docs/.vitepress/theme/index.js @@ -1,9 +1,13 @@ // .vitepress/theme/index.js import DefaultTheme from 'vitepress/theme' import layout from './layout.vue' +import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client' import './vars.css' export default { extends: DefaultTheme, + enhanceApp({ app }) { + enhanceAppWithTabs(app) + }, Layout: layout } \ No newline at end of file diff --git a/docs/.vitepress/theme/vars.css b/docs/.vitepress/theme/vars.css index 56f141b..85aeea3 100644 --- a/docs/.vitepress/theme/vars.css +++ b/docs/.vitepress/theme/vars.css @@ -1,6 +1,6 @@ .banner { - background-color: var(--vp-button-brand-bg) !important; - color: rgba(255, 255, 255, 100%); + background-color: var(--vp-button-brand-bg); + color: var(--vp-button-brand-text); width: 100%; height: 1.5rem; text-align: center; @@ -16,42 +16,65 @@ margin-top: 1.5rem; } +.plugin-tabs--tab-list { + background-color: var(--vp-c-bg-alt); +} + +.VPNavBar.home:not(.top) { + backdrop-filter: blur(0.5rem); + background-color: rgba(255, 255, 255, 0%) !important; +} + +.VPNavBar.home > .divider { + opacity: 0; +} + +#VPContent.is-home { + background-color: rgba(255, 255, 255, 0%); + background-image: radial-gradient( + var(--vp-c-brand-2), var(--vp-c-bg) + ); +} + :root { - --vp-c-brand-1: #3086ff; + --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-background-image: linear-gradient( + --vp-home-hero-image-background-image: linear-gradient( 135deg, #1D314F 50%, #2A57A2 50% ); --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-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-border: #111720; - --vp-c-divider: #181d27; + --vp-c-divider: #1d273c; --vp-c-gutter: #181d27; --vp-home-hero-image-background-image: linear-gradient( diff --git a/docs/index.md b/docs/index.md index 7da346b..0b8c41d 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,17 +1,20 @@ --- # https://vitepress.dev/reference/default-theme-home-page layout: home +next: + text: 'Introduction' + link: '/tut/crash-course/1-introduction' hero: name: Vide text: "" - tagline: A reactive UI library for Luau. + tagline: A reactive UI and state library for Luau. image: src: /logo.svg alt: Vide actions: - theme: brand - text: Crash Course + text: Quick Start link: /tut/crash-course/1-introduction - theme: alt text: API Reference @@ -21,7 +24,55 @@ features: - title: Reactively driven details: Powerful and modern primitives inspired by SolidJS to build fluid UI with little friction - title: Declarative and concise - details: Syntax built to be minimal while also obvious and easy to understand to anyone + details: Syntax built to be minimal and clean while also obvious and easy to understand to anyone - title: Fully Luau Typecheckable - details: Ensure you write correct code through the Luau typechecking engine. + details: Ensure you write correct and robust code through the Luau typechecking engine. --- + +## Installation + +Vide can be installed through 3 different ways. + +:::tabs +== Wally + +Add the following line to your `wally.toml` and then re-install your packages +```toml +[dependencies] +vide = centau/vide@0.3.1 +``` + +== Roblox + +im so sorry you have to use rojo and build it yourself or ask someone in ross to build a vide rbxm for you :sob: +cen is too busy working on system verilog + +::: + +## Quick Examples + +A simple counter element that counts up when you click on it. + +```luau +local vide = require("vide") + +local source = vide.source +local create = vide.create + +local function Counter() + local count = source(0) + + return create "TextButton" { + Size = UDim2.fromOffset(200, 50), + Text = function() + return `count: {count()}` + end, + + Activated = function() + count(count() + 1) + end + } +end + +return Counter +``` diff --git a/docs/package.json b/docs/package.json index 5e3035b..5d16f6b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -7,6 +7,7 @@ }, "devDependencies": { "vitepress": "1.4.1", - "vitepress-plugin-mermaid": "2.0.17" + "vitepress-plugin-mermaid": "2.0.17", + "vitepress-plugin-tabs": "^0.5.0" } } diff --git a/docs/public/full_logo.svg b/docs/public/full_logo.svg index 85488e0..1962800 100644 --- a/docs/public/full_logo.svg +++ b/docs/public/full_logo.svg @@ -1,4 +1,4 @@ - + From 452ae8288bf7e9f21b1a675ec9c8a004e62aaf68 Mon Sep 17 00:00:00 2001 From: alice <166900055+alicesaidhi@users.noreply.github.com> Date: Mon, 28 Oct 2024 23:55:49 +0100 Subject: [PATCH 4/8] Update Banner --- docs/.vitepress/theme/vars.css | 50 +++++++++++---------- docs/index.md | 80 +++++++++++++++++----------------- 2 files changed, 67 insertions(+), 63 deletions(-) diff --git a/docs/.vitepress/theme/vars.css b/docs/.vitepress/theme/vars.css index 85aeea3..73936b7 100644 --- a/docs/.vitepress/theme/vars.css +++ b/docs/.vitepress/theme/vars.css @@ -1,19 +1,39 @@ + +.VPSkipLink { + order: -3 +} + +.VPNav { + order: -2 +} + +.VPLocalNav { + order: 0; +} + .banner { background-color: var(--vp-button-brand-bg); color: var(--vp-button-brand-text); width: 100%; - height: 1.5rem; text-align: center; position: fixed; - z-index: 30; + bottom: 0px; + z-index: 50; + order: -1 } -.VPNav { - margin-top: 1.5rem; +.advertising { + margin: auto; } -.VPSidebar { - margin-top: 1.5rem; +@media only screen and (min-width: 768px) { + .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 { @@ -29,13 +49,6 @@ opacity: 0; } -#VPContent.is-home { - background-color: rgba(255, 255, 255, 0%); - background-image: radial-gradient( - var(--vp-c-brand-2), var(--vp-c-bg) - ); -} - :root { --vp-c-brand-1: #3086ff; --vp-c-brand-2: #75aeff; @@ -48,11 +61,6 @@ --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-background-image: linear-gradient( - 135deg, - #1D314F 50%, - #2A57A2 50% - ); --vp-home-hero-image-filter: blur(96px); --vp-c-bg: #f2f5f8; @@ -76,10 +84,4 @@ --vp-c-border: #111720; --vp-c-divider: #1d273c; --vp-c-gutter: #181d27; - - --vp-home-hero-image-background-image: linear-gradient( - -45deg, - #3D506C 50%, - #2F415C 50% - ); } \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 0b8c41d..5c7d974 100644 --- a/docs/index.md +++ b/docs/index.md @@ -6,73 +6,75 @@ next: link: '/tut/crash-course/1-introduction' hero: - name: Vide - text: "" + name: "Vide" tagline: A reactive UI and state library for Luau. image: src: /logo.svg - alt: Vide actions: - theme: brand - text: Quick Start + text: Crash Course link: /tut/crash-course/1-introduction - theme: alt text: API Reference link: /api/reactivity-core features: - - title: Reactively driven - details: Powerful and modern primitives inspired by SolidJS to build fluid UI with little friction - - title: Declarative and concise - details: Syntax built to be minimal and clean while also obvious and easy to understand to anyone - - title: Fully Luau Typecheckable - details: Ensure you write correct and robust code through the Luau typechecking engine. + - title: Reactive State Management + details: Built upon Solid and makes building reactive applications simple. + - title: Declarative and simple syntax + 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. --- +
+ ## Installation -Vide can be installed through 3 different ways. +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 ``` -== Roblox +== Git -im so sorry you have to use rojo and build it yourself or ask someone in ross to build a vide rbxm for you :sob: -cen is too busy working on system verilog +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 ::: -## Quick Examples + -A simple counter element that counts up when you click on it. +
+ +
-```luau -local vide = require("vide") - -local source = vide.source -local create = vide.create - -local function Counter() - local count = source(0) - - return create "TextButton" { - Size = UDim2.fromOffset(200, 50), - Text = function() - return `count: {count()}` - end, - - Activated = function() - count(count() + 1) - end - } -end - -return Counter -``` +
\ No newline at end of file From 78d197d1d16add92a7aff99cc8347096002fa16c Mon Sep 17 00:00:00 2001 From: alice <166900055+alicesaidhi@users.noreply.github.com> Date: Tue, 29 Oct 2024 09:51:37 +0100 Subject: [PATCH 5/8] cleanup --- docs/.vitepress/config.ts | 2 +- docs/.vitepress/theme/vars.css | 19 +++++-------------- 2 files changed, 6 insertions(+), 15 deletions(-) diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 9c8fae8..ee843b8 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -1,6 +1,6 @@ //import { defineConfig } from "vitepress" import { withMermaid } from "vitepress-plugin-mermaid"; -import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs' +import { tabsMarkdownPlugin } from "vitepress-plugin-tabs" // https://vitepress.dev/reference/site-config export default withMermaid({ diff --git a/docs/.vitepress/theme/vars.css b/docs/.vitepress/theme/vars.css index 73936b7..9953d45 100644 --- a/docs/.vitepress/theme/vars.css +++ b/docs/.vitepress/theme/vars.css @@ -1,15 +1,4 @@ - -.VPSkipLink { - order: -3 -} - -.VPNav { - order: -2 -} - -.VPLocalNav { - order: 0; -} +/* Homepage Stuff */ .banner { background-color: var(--vp-button-brand-bg); @@ -19,7 +8,6 @@ position: fixed; bottom: 0px; z-index: 50; - order: -1 } .advertising { @@ -42,13 +30,15 @@ .VPNavBar.home:not(.top) { backdrop-filter: blur(0.5rem); - background-color: rgba(255, 255, 255, 0%) !important; + background-color: transparent !important; } .VPNavBar.home > .divider { opacity: 0; } +/* Colors */ + :root { --vp-c-brand-1: #3086ff; --vp-c-brand-2: #75aeff; @@ -56,6 +46,7 @@ --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); From 32bde1145bb7093a8682cd7d1a6056463f610184 Mon Sep 17 00:00:00 2001 From: alice <166900055+alicesaidhi@users.noreply.github.com> Date: Tue, 29 Oct 2024 10:27:41 +0100 Subject: [PATCH 6/8] Update font to JetBrains Mono --- docs/.vitepress/theme/vars.css | 81 +++++++++++++++++++++++++++++++++- 1 file changed, 79 insertions(+), 2 deletions(-) diff --git a/docs/.vitepress/theme/vars.css b/docs/.vitepress/theme/vars.css index 9953d45..bd4dd21 100644 --- a/docs/.vitepress/theme/vars.css +++ b/docs/.vitepress/theme/vars.css @@ -46,7 +46,6 @@ --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); @@ -75,4 +74,82 @@ --vp-c-border: #111720; --vp-c-divider: #1d273c; --vp-c-gutter: #181d27; -} \ No newline at end of file +} + +/* 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-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-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-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-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-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-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-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; +} + +:root { + --vp-font-family-mono: 'JetBrains Mono' +} From 7da475524bc408bee85eb14305892a4a027d3c17 Mon Sep 17 00:00:00 2001 From: alice <166900055+alicesaidhi@users.noreply.github.com> Date: Tue, 29 Oct 2024 10:27:52 +0100 Subject: [PATCH 7/8] Add a quick look to Home --- docs/index.md | 91 ++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 82 insertions(+), 9 deletions(-) diff --git a/docs/index.md b/docs/index.md index 5c7d974..a5b3646 100644 --- a/docs/index.md +++ b/docs/index.md @@ -29,7 +29,88 @@ features:
-## Installation +## 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. @@ -69,12 +150,4 @@ which you can then insert into Roblox Studio ::: - - -
- -
-
\ No newline at end of file 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 8/8] 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