mirror of
https://github.com/centau/vide.git
synced 2026-08-20 14:41:37 +00:00
Simplify Home Page
This commit is contained in:
alice
parent
7da475524b
commit
1554325efb
4 changed files with 146 additions and 227 deletions
18
docs/.vitepress/theme/home.css
Normal file
18
docs/.vitepress/theme/home.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
#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 */
|
||||
|
|
@ -43,13 +40,21 @@
|
|||
--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-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);
|
||||
|
||||
|
|
@ -79,77 +84,93 @@
|
|||
/* 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-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-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-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-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-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-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-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-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";
|
||||
}
|
||||
|
|
|
|||
133
docs/index.md
133
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue