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 @@ - +