FLASH: Added a simple explanation about the server instance types.
This commit is contained in:
Relism
@@ -1,32 +0,0 @@
|
|||||||
import { defineConfig } from 'vitepress'
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
base: "/flash/",
|
|
||||||
title: "pixeldocs",
|
|
||||||
description: "Documentation for the PixelServices projects",
|
|
||||||
cleanUrls: true,
|
|
||||||
outDir: '../dist/flash',
|
|
||||||
themeConfig: {
|
|
||||||
sidebar: {
|
|
||||||
'/guide/': [
|
|
||||||
{
|
|
||||||
text: 'Guide',
|
|
||||||
items: [
|
|
||||||
{ text: 'Introduction', link: '/guide/' },
|
|
||||||
{ text: 'Getting Started', link: '/guide/getting-started' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'/': [
|
|
||||||
{
|
|
||||||
text: 'General',
|
|
||||||
items: [
|
|
||||||
{ text: 'Home', link: '/' },
|
|
||||||
{ text: 'Markdown Examples', link: '/markdown-examples' },
|
|
||||||
{ text: 'API Examples', link: '/api-examples' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
// https://vitepress.dev/guide/custom-theme
|
|
||||||
import { h } from 'vue'
|
|
||||||
import DefaultTheme from 'vitepress/theme'
|
|
||||||
import './style.css'
|
|
||||||
|
|
||||||
/** @type {import('vitepress').Theme} */
|
|
||||||
export default {
|
|
||||||
extends: DefaultTheme,
|
|
||||||
Layout: () => {
|
|
||||||
return h(DefaultTheme.Layout, null, {
|
|
||||||
// https://vitepress.dev/guide/extending-default-theme#layout-slots
|
|
||||||
})
|
|
||||||
},
|
|
||||||
enhanceApp({ app, router, siteData }) {
|
|
||||||
// ...
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,139 +0,0 @@
|
|||||||
/**
|
|
||||||
* Customize default theme styling by overriding CSS variables:
|
|
||||||
* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Colors
|
|
||||||
*
|
|
||||||
* Each colors have exact same color scale system with 3 levels of solid
|
|
||||||
* colors with different brightness, and 1 soft color.
|
|
||||||
*
|
|
||||||
* - `XXX-1`: The most solid color used mainly for colored text. It must
|
|
||||||
* satisfy the contrast ratio against when used on top of `XXX-soft`.
|
|
||||||
*
|
|
||||||
* - `XXX-2`: The color used mainly for hover state of the button.
|
|
||||||
*
|
|
||||||
* - `XXX-3`: The color for solid background, such as bg color of the button.
|
|
||||||
* It must satisfy the contrast ratio with pure white (#ffffff) text on
|
|
||||||
* top of it.
|
|
||||||
*
|
|
||||||
* - `XXX-soft`: The color used for subtle background such as custom container
|
|
||||||
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
|
|
||||||
* on top of it.
|
|
||||||
*
|
|
||||||
* The soft color must be semi transparent alpha channel. This is crucial
|
|
||||||
* because it allows adding multiple "soft" colors on top of each other
|
|
||||||
* to create a accent, such as when having inline code block inside
|
|
||||||
* custom containers.
|
|
||||||
*
|
|
||||||
* - `default`: The color used purely for subtle indication without any
|
|
||||||
* special meanings attached to it such as bg color for menu hover state.
|
|
||||||
*
|
|
||||||
* - `brand`: Used for primary brand colors, such as link text, button with
|
|
||||||
* brand theme, etc.
|
|
||||||
*
|
|
||||||
* - `tip`: Used to indicate useful information. The default theme uses the
|
|
||||||
* brand color for this by default.
|
|
||||||
*
|
|
||||||
* - `warning`: Used to indicate warning to the users. Used in custom
|
|
||||||
* container, badges, etc.
|
|
||||||
*
|
|
||||||
* - `danger`: Used to show error, or dangerous message to the users. Used
|
|
||||||
* in custom container, badges, etc.
|
|
||||||
* -------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--vp-c-default-1: var(--vp-c-gray-1);
|
|
||||||
--vp-c-default-2: var(--vp-c-gray-2);
|
|
||||||
--vp-c-default-3: var(--vp-c-gray-3);
|
|
||||||
--vp-c-default-soft: var(--vp-c-gray-soft);
|
|
||||||
|
|
||||||
--vp-c-brand-1: var(--vp-c-indigo-1);
|
|
||||||
--vp-c-brand-2: var(--vp-c-indigo-2);
|
|
||||||
--vp-c-brand-3: var(--vp-c-indigo-3);
|
|
||||||
--vp-c-brand-soft: var(--vp-c-indigo-soft);
|
|
||||||
|
|
||||||
--vp-c-tip-1: var(--vp-c-brand-1);
|
|
||||||
--vp-c-tip-2: var(--vp-c-brand-2);
|
|
||||||
--vp-c-tip-3: var(--vp-c-brand-3);
|
|
||||||
--vp-c-tip-soft: var(--vp-c-brand-soft);
|
|
||||||
|
|
||||||
--vp-c-warning-1: var(--vp-c-yellow-1);
|
|
||||||
--vp-c-warning-2: var(--vp-c-yellow-2);
|
|
||||||
--vp-c-warning-3: var(--vp-c-yellow-3);
|
|
||||||
--vp-c-warning-soft: var(--vp-c-yellow-soft);
|
|
||||||
|
|
||||||
--vp-c-danger-1: var(--vp-c-red-1);
|
|
||||||
--vp-c-danger-2: var(--vp-c-red-2);
|
|
||||||
--vp-c-danger-3: var(--vp-c-red-3);
|
|
||||||
--vp-c-danger-soft: var(--vp-c-red-soft);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Component: Button
|
|
||||||
* -------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--vp-button-brand-border: transparent;
|
|
||||||
--vp-button-brand-text: var(--vp-c-white);
|
|
||||||
--vp-button-brand-bg: var(--vp-c-brand-3);
|
|
||||||
--vp-button-brand-hover-border: transparent;
|
|
||||||
--vp-button-brand-hover-text: var(--vp-c-white);
|
|
||||||
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
|
|
||||||
--vp-button-brand-active-border: transparent;
|
|
||||||
--vp-button-brand-active-text: var(--vp-c-white);
|
|
||||||
--vp-button-brand-active-bg: var(--vp-c-brand-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Component: Home
|
|
||||||
* -------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--vp-home-hero-name-color: transparent;
|
|
||||||
--vp-home-hero-name-background: -webkit-linear-gradient(
|
|
||||||
120deg,
|
|
||||||
#bd34fe 30%,
|
|
||||||
#41d1ff
|
|
||||||
);
|
|
||||||
|
|
||||||
--vp-home-hero-image-background-image: linear-gradient(
|
|
||||||
-45deg,
|
|
||||||
#bd34fe 50%,
|
|
||||||
#47caff 50%
|
|
||||||
);
|
|
||||||
--vp-home-hero-image-filter: blur(44px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
|
||||||
:root {
|
|
||||||
--vp-home-hero-image-filter: blur(56px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 960px) {
|
|
||||||
:root {
|
|
||||||
--vp-home-hero-image-filter: blur(68px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Component: Custom Block
|
|
||||||
* -------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--vp-custom-block-tip-border: transparent;
|
|
||||||
--vp-custom-block-tip-text: var(--vp-c-text-1);
|
|
||||||
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
|
|
||||||
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Component: Algolia
|
|
||||||
* -------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
.DocSearch {
|
|
||||||
--docsearch-primary-color: var(--vp-c-brand-1) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -3,7 +3,9 @@
|
|||||||
{
|
{
|
||||||
"text": "Flash Documentation",
|
"text": "Flash Documentation",
|
||||||
"items": [
|
"items": [
|
||||||
{ "text": "Getting Started", "link": "/flash" }
|
{ "text": "Getting Started", "link": "/flash" },
|
||||||
|
{ "text": "Installation", "link": "/flash/installation" },
|
||||||
|
{ "text": "Server Types", "link": "/flash/server-types" }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
+34
-66
@@ -1,72 +1,40 @@
|
|||||||
|
---
|
||||||
|
next:
|
||||||
|
text: 'Installation'
|
||||||
|
link: '/flash/installation'
|
||||||
|
---
|
||||||
|
|
||||||
|
# ⚡ Flash
|
||||||
|
|
||||||
|
Flash is a simple, modern and fast expressive web framework written in Java.
|
||||||
|
The project is maintained by Pixel Services and the open-source community.
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue';
|
import { VPTeamMembers } from 'vitepress/theme';
|
||||||
|
|
||||||
const latestVersion = ref('');
|
const members = [
|
||||||
|
{
|
||||||
onMounted(async () => {
|
avatar: 'https://avatars.githubusercontent.com/u/83401018?v=4',
|
||||||
try {
|
name: 'Relism',
|
||||||
const response = await fetch('https://maven.pixel-services.com/api/maven/details/releases/com/pixelservices/flash');
|
title: 'Developer',
|
||||||
const data = await response.json();
|
links: [
|
||||||
const versions = data.files.filter(file => file.type === 'DIRECTORY').map(file => file.name);
|
{ icon: 'github', link: 'https://github.com/Relism' },
|
||||||
latestVersion.value = versions.sort().pop();
|
]
|
||||||
} catch (error) {
|
},
|
||||||
console.error('Error fetching latest version:', error);
|
{
|
||||||
latestVersion.value = 'Error fetching version';
|
avatar: 'https://avatars.githubusercontent.com/u/69807609?v=4',
|
||||||
}
|
name: 'Sieadev',
|
||||||
})
|
title: 'Developer',
|
||||||
|
links: [
|
||||||
|
{ icon: 'github', link: 'https://github.com/sieadev' },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
# ⚡ Getting Started
|
# Our Team
|
||||||
|
|
||||||
This page provides installation instructions for the latest version of the `flash` library from Pixel Services.
|
Say hello to the Pixel Services team !
|
||||||
|
|
||||||
## Installation
|
<VPTeamMembers size="small" :members="members" />
|
||||||
|
|
||||||
### Maven (pom.xml)
|
|
||||||
|
|
||||||
1. Add the repository :
|
|
||||||
```xml
|
|
||||||
<repositories>
|
|
||||||
<repository>
|
|
||||||
<id>pixel-services</id>
|
|
||||||
<name>Pixel Services</name>
|
|
||||||
<url>https://maven.pixel-services.com/repository</url>
|
|
||||||
</repository>
|
|
||||||
</repositories>
|
|
||||||
```
|
|
||||||
|
|
||||||
2. And the dependency :
|
|
||||||
```xml
|
|
||||||
<dependencies>
|
|
||||||
<dependency>
|
|
||||||
<groupId>com.pixelservices</groupId>
|
|
||||||
<artifactId>flash</artifactId>
|
|
||||||
<version>{{ latestVersion }}</version>
|
|
||||||
</dependency>
|
|
||||||
</dependencies>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Gradle (build.gradle)
|
|
||||||
|
|
||||||
1. Add the repository :
|
|
||||||
```groovy
|
|
||||||
repositories {
|
|
||||||
maven {
|
|
||||||
url "https://maven.pixel-services.com/repository"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
2. And the dependency :
|
|
||||||
```groovy
|
|
||||||
dependencies {
|
|
||||||
implementation 'com.pixelservices:flash:{{ latestVersion }}'
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
<div>
|
|
||||||
⚡ Latest version:
|
|
||||||
<a href="'https://maven.pixel-services.com/#/releases/com/pixelservices/flash'" style="text-decoration: underline; color: #007bff;">
|
|
||||||
<strong>{{ latestVersion }}</strong>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
|
||||||
|
const latestVersion = ref('');
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('https://maven.pixel-services.com/api/maven/details/releases/com/pixelservices/flash');
|
||||||
|
const data = await response.json();
|
||||||
|
const versions = data.files.filter(file => file.type === 'DIRECTORY').map(file => file.name);
|
||||||
|
latestVersion.value = versions.sort().pop();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching latest version:', error);
|
||||||
|
latestVersion.value = 'Error fetching version';
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
# 📲 Installation
|
||||||
|
|
||||||
|
This page provides installation instructions for the latest version of the `flash` library from Pixel Services.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
### Maven (pom.xml)
|
||||||
|
|
||||||
|
1. Add the repository :
|
||||||
|
```xml
|
||||||
|
<repositories>
|
||||||
|
<repository>
|
||||||
|
<id>pixel-services</id>
|
||||||
|
<name>Pixel Services</name>
|
||||||
|
<url>https://maven.pixel-services.com/repository</url>
|
||||||
|
</repository>
|
||||||
|
</repositories>
|
||||||
|
```
|
||||||
|
|
||||||
|
2. And the dependency :
|
||||||
|
```xml
|
||||||
|
<dependencies>
|
||||||
|
<dependency>
|
||||||
|
<groupId>com.pixelservices</groupId>
|
||||||
|
<artifactId>flash</artifactId>
|
||||||
|
<version>{{ latestVersion }}</version>
|
||||||
|
</dependency>
|
||||||
|
</dependencies>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Gradle (build.gradle)
|
||||||
|
|
||||||
|
1. Add the repository :
|
||||||
|
```groovy
|
||||||
|
repositories {
|
||||||
|
maven {
|
||||||
|
url "https://maven.pixel-services.com/repository"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
2. And the dependency :
|
||||||
|
```groovy
|
||||||
|
dependencies {
|
||||||
|
implementation 'com.pixelservices:flash:{{ latestVersion }}'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<div>
|
||||||
|
⚡ Latest version:
|
||||||
|
<a href="'https://maven.pixel-services.com/#/releases/com/pixelservices/flash'" style="text-decoration: underline; color: #007bff;">
|
||||||
|
<strong>{{ latestVersion }}</strong>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
# Server Types
|
||||||
|
|
||||||
|
In this section, we discuss the differences between the internal server instance `InternalFlashServer` and the `FlashServer` instance, and whether you should use one or the other. We will also provide examples of how to use each type of server.
|
||||||
|
|
||||||
|
## Internal Server
|
||||||
|
|
||||||
|
The internal server is a singleton instance that can be accessed by statically importing
|
||||||
|
methods from `InternalFlashServer`. This means that for each application, only one `InternalFlashServer` instance is created.
|
||||||
|
This allows you to use the server's functionality without creating and managing an instance of the server.
|
||||||
|
|
||||||
|
### Usage
|
||||||
|
|
||||||
|
To use the internal server, you can statically import the methods from `InternalFlashServer`:
|
||||||
|
|
||||||
|
```java{1}
|
||||||
|
import static flash.InternalFlashServer.*;
|
||||||
|
|
||||||
|
public class Example {
|
||||||
|
public static void main(String[] args) {
|
||||||
|
port(8080);
|
||||||
|
|
||||||
|
get("/hello", (req, res) -> {
|
||||||
|
res.status(200);
|
||||||
|
return "Hello, world!";
|
||||||
|
});
|
||||||
|
|
||||||
|
post("/submit", (req, res) -> {
|
||||||
|
// Handle POST request
|
||||||
|
});
|
||||||
|
|
||||||
|
// Other routes and configurations
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Server Instance
|
||||||
|
|
||||||
|
The `FlashServer` class is used to create an instance of the server.
|
||||||
|
Unlike the internal server, you can create multiple instances of the `FlashServer` class with different configurations.
|
||||||
|
|
||||||
|
### Usage
|
||||||
|
|
||||||
|
To create a server instance, you can simply call `new FlashServer()` and configure the server using the instance methods:
|
||||||
|
|
||||||
|
```java{5}
|
||||||
|
import flash.FlashServer;
|
||||||
|
|
||||||
|
public class Example {
|
||||||
|
public static void main(String[] args) {
|
||||||
|
FlashServer server = new FlashServer("My Server Instance");
|
||||||
|
|
||||||
|
server.port(8080);
|
||||||
|
|
||||||
|
server.get("/hello", (req, res) -> {
|
||||||
|
res.status(200);
|
||||||
|
return "Hello, world!";
|
||||||
|
});
|
||||||
|
|
||||||
|
server.post("/submit", (req, res) -> {
|
||||||
|
// Handle POST request
|
||||||
|
});
|
||||||
|
|
||||||
|
// Other routes and configurations
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
The `InternalFlashServer` is a **pre-configured instance** of `FlashServer` that is managed internally by the library. Under the hood, it is instantiated as:
|
||||||
|
|
||||||
|
```java
|
||||||
|
new FlashServer("Internal");
|
||||||
|
```
|
||||||
|
|
||||||
|
This means:
|
||||||
|
- Its **name** is set to `"Internal"` for logging and internal management purposes.
|
||||||
|
- It serves as the default server used by the library, which is automatically initialized when the library is loaded.
|
||||||
|
|
||||||
|
Both the `InternalFlashServer` and any user-created `FlashServer` instances are of the same type (`FlashServer`). However, if you want to create and manage your own server instance, you must provide a **name** during initialization, e.g.:
|
||||||
|
|
||||||
|
FlashServer server = new FlashServer("My Server Instance");
|
||||||
|
|
||||||
|
## Which Server Type Should You Use?
|
||||||
|
|
||||||
|
It all depends on your use case.
|
||||||
|
If you only need one server instance and want to keep your code concise, you can use the internal server.
|
||||||
|
However, if your application needs to handle multiple server instances each with different ports and configurations,
|
||||||
|
you should use `FlashServer` instances.
|
||||||
|
|
||||||
|
Example use cases for each server type:
|
||||||
|
- Internal Server: Simple Backend for a webapp.
|
||||||
|
- Server Instance: Applications where flexible deployment and scalability are required.
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
import { defineConfig } from 'vitepress'
|
|
||||||
|
|
||||||
// https://vitepress.dev/reference/site-config
|
|
||||||
export default defineConfig({
|
|
||||||
base: "/mobot/",
|
|
||||||
title: "pixeldocs",
|
|
||||||
description: "Documentation for the PixelServices projects",
|
|
||||||
cleanUrls: true,
|
|
||||||
outDir: '../dist/mobot',
|
|
||||||
themeConfig: {
|
|
||||||
// https://vitepress.dev/reference/default-theme-config
|
|
||||||
nav: [
|
|
||||||
{ text: 'Home', link: '/' },
|
|
||||||
{ text: 'Examples', link: '/markdown-examples' }
|
|
||||||
],
|
|
||||||
|
|
||||||
sidebar: [
|
|
||||||
{
|
|
||||||
text: 'Examples',
|
|
||||||
items: [
|
|
||||||
{ text: 'Markdown Examples', link: '/markdown-examples' },
|
|
||||||
{ text: 'Runtime API Examples', link: '/api-examples' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
|
|
||||||
socialLinks: [
|
|
||||||
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
// https://vitepress.dev/guide/custom-theme
|
|
||||||
import { h } from 'vue'
|
|
||||||
import DefaultTheme from 'vitepress/theme'
|
|
||||||
import './style.css'
|
|
||||||
|
|
||||||
/** @type {import('vitepress').Theme} */
|
|
||||||
export default {
|
|
||||||
extends: DefaultTheme,
|
|
||||||
Layout: () => {
|
|
||||||
return h(DefaultTheme.Layout, null, {
|
|
||||||
// https://vitepress.dev/guide/extending-default-theme#layout-slots
|
|
||||||
})
|
|
||||||
},
|
|
||||||
enhanceApp({ app, router, siteData }) {
|
|
||||||
// ...
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,139 +0,0 @@
|
|||||||
/**
|
|
||||||
* Customize default theme styling by overriding CSS variables:
|
|
||||||
* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Colors
|
|
||||||
*
|
|
||||||
* Each colors have exact same color scale system with 3 levels of solid
|
|
||||||
* colors with different brightness, and 1 soft color.
|
|
||||||
*
|
|
||||||
* - `XXX-1`: The most solid color used mainly for colored text. It must
|
|
||||||
* satisfy the contrast ratio against when used on top of `XXX-soft`.
|
|
||||||
*
|
|
||||||
* - `XXX-2`: The color used mainly for hover state of the button.
|
|
||||||
*
|
|
||||||
* - `XXX-3`: The color for solid background, such as bg color of the button.
|
|
||||||
* It must satisfy the contrast ratio with pure white (#ffffff) text on
|
|
||||||
* top of it.
|
|
||||||
*
|
|
||||||
* - `XXX-soft`: The color used for subtle background such as custom container
|
|
||||||
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
|
|
||||||
* on top of it.
|
|
||||||
*
|
|
||||||
* The soft color must be semi transparent alpha channel. This is crucial
|
|
||||||
* because it allows adding multiple "soft" colors on top of each other
|
|
||||||
* to create a accent, such as when having inline code block inside
|
|
||||||
* custom containers.
|
|
||||||
*
|
|
||||||
* - `default`: The color used purely for subtle indication without any
|
|
||||||
* special meanings attached to it such as bg color for menu hover state.
|
|
||||||
*
|
|
||||||
* - `brand`: Used for primary brand colors, such as link text, button with
|
|
||||||
* brand theme, etc.
|
|
||||||
*
|
|
||||||
* - `tip`: Used to indicate useful information. The default theme uses the
|
|
||||||
* brand color for this by default.
|
|
||||||
*
|
|
||||||
* - `warning`: Used to indicate warning to the users. Used in custom
|
|
||||||
* container, badges, etc.
|
|
||||||
*
|
|
||||||
* - `danger`: Used to show error, or dangerous message to the users. Used
|
|
||||||
* in custom container, badges, etc.
|
|
||||||
* -------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--vp-c-default-1: var(--vp-c-gray-1);
|
|
||||||
--vp-c-default-2: var(--vp-c-gray-2);
|
|
||||||
--vp-c-default-3: var(--vp-c-gray-3);
|
|
||||||
--vp-c-default-soft: var(--vp-c-gray-soft);
|
|
||||||
|
|
||||||
--vp-c-brand-1: var(--vp-c-indigo-1);
|
|
||||||
--vp-c-brand-2: var(--vp-c-indigo-2);
|
|
||||||
--vp-c-brand-3: var(--vp-c-indigo-3);
|
|
||||||
--vp-c-brand-soft: var(--vp-c-indigo-soft);
|
|
||||||
|
|
||||||
--vp-c-tip-1: var(--vp-c-brand-1);
|
|
||||||
--vp-c-tip-2: var(--vp-c-brand-2);
|
|
||||||
--vp-c-tip-3: var(--vp-c-brand-3);
|
|
||||||
--vp-c-tip-soft: var(--vp-c-brand-soft);
|
|
||||||
|
|
||||||
--vp-c-warning-1: var(--vp-c-yellow-1);
|
|
||||||
--vp-c-warning-2: var(--vp-c-yellow-2);
|
|
||||||
--vp-c-warning-3: var(--vp-c-yellow-3);
|
|
||||||
--vp-c-warning-soft: var(--vp-c-yellow-soft);
|
|
||||||
|
|
||||||
--vp-c-danger-1: var(--vp-c-red-1);
|
|
||||||
--vp-c-danger-2: var(--vp-c-red-2);
|
|
||||||
--vp-c-danger-3: var(--vp-c-red-3);
|
|
||||||
--vp-c-danger-soft: var(--vp-c-red-soft);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Component: Button
|
|
||||||
* -------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--vp-button-brand-border: transparent;
|
|
||||||
--vp-button-brand-text: var(--vp-c-white);
|
|
||||||
--vp-button-brand-bg: var(--vp-c-brand-3);
|
|
||||||
--vp-button-brand-hover-border: transparent;
|
|
||||||
--vp-button-brand-hover-text: var(--vp-c-white);
|
|
||||||
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
|
|
||||||
--vp-button-brand-active-border: transparent;
|
|
||||||
--vp-button-brand-active-text: var(--vp-c-white);
|
|
||||||
--vp-button-brand-active-bg: var(--vp-c-brand-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Component: Home
|
|
||||||
* -------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--vp-home-hero-name-color: transparent;
|
|
||||||
--vp-home-hero-name-background: -webkit-linear-gradient(
|
|
||||||
120deg,
|
|
||||||
#bd34fe 30%,
|
|
||||||
#41d1ff
|
|
||||||
);
|
|
||||||
|
|
||||||
--vp-home-hero-image-background-image: linear-gradient(
|
|
||||||
-45deg,
|
|
||||||
#bd34fe 50%,
|
|
||||||
#47caff 50%
|
|
||||||
);
|
|
||||||
--vp-home-hero-image-filter: blur(44px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
|
||||||
:root {
|
|
||||||
--vp-home-hero-image-filter: blur(56px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 960px) {
|
|
||||||
:root {
|
|
||||||
--vp-home-hero-image-filter: blur(68px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Component: Custom Block
|
|
||||||
* -------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--vp-custom-block-tip-border: transparent;
|
|
||||||
--vp-custom-block-tip-text: var(--vp-c-text-1);
|
|
||||||
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
|
|
||||||
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Component: Algolia
|
|
||||||
* -------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
.DocSearch {
|
|
||||||
--docsearch-primary-color: var(--vp-c-brand-1) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
import { defineConfig } from 'vitepress'
|
|
||||||
|
|
||||||
// https://vitepress.dev/reference/site-config
|
|
||||||
export default defineConfig({
|
|
||||||
base: "/serverlibraries/",
|
|
||||||
title: "pixeldocs",
|
|
||||||
description: "Documentation for the PixelServices projects",
|
|
||||||
cleanUrls: true,
|
|
||||||
outDir: '../dist/serverlibraries',
|
|
||||||
themeConfig: {
|
|
||||||
// https://vitepress.dev/reference/default-theme-config
|
|
||||||
nav: [
|
|
||||||
{ text: 'Home', link: '/' },
|
|
||||||
{ text: 'Examples', link: '/markdown-examples' }
|
|
||||||
],
|
|
||||||
|
|
||||||
sidebar: [
|
|
||||||
{
|
|
||||||
text: 'Examples',
|
|
||||||
items: [
|
|
||||||
{ text: 'Markdown Examples', link: '/markdown-examples' },
|
|
||||||
{ text: 'Runtime API Examples', link: '/api-examples' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
|
|
||||||
socialLinks: [
|
|
||||||
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
// https://vitepress.dev/guide/custom-theme
|
|
||||||
import { h } from 'vue'
|
|
||||||
import DefaultTheme from 'vitepress/theme'
|
|
||||||
import './style.css'
|
|
||||||
|
|
||||||
/** @type {import('vitepress').Theme} */
|
|
||||||
export default {
|
|
||||||
extends: DefaultTheme,
|
|
||||||
Layout: () => {
|
|
||||||
return h(DefaultTheme.Layout, null, {
|
|
||||||
// https://vitepress.dev/guide/extending-default-theme#layout-slots
|
|
||||||
})
|
|
||||||
},
|
|
||||||
enhanceApp({ app, router, siteData }) {
|
|
||||||
// ...
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,139 +0,0 @@
|
|||||||
/**
|
|
||||||
* Customize default theme styling by overriding CSS variables:
|
|
||||||
* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Colors
|
|
||||||
*
|
|
||||||
* Each colors have exact same color scale system with 3 levels of solid
|
|
||||||
* colors with different brightness, and 1 soft color.
|
|
||||||
*
|
|
||||||
* - `XXX-1`: The most solid color used mainly for colored text. It must
|
|
||||||
* satisfy the contrast ratio against when used on top of `XXX-soft`.
|
|
||||||
*
|
|
||||||
* - `XXX-2`: The color used mainly for hover state of the button.
|
|
||||||
*
|
|
||||||
* - `XXX-3`: The color for solid background, such as bg color of the button.
|
|
||||||
* It must satisfy the contrast ratio with pure white (#ffffff) text on
|
|
||||||
* top of it.
|
|
||||||
*
|
|
||||||
* - `XXX-soft`: The color used for subtle background such as custom container
|
|
||||||
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
|
|
||||||
* on top of it.
|
|
||||||
*
|
|
||||||
* The soft color must be semi transparent alpha channel. This is crucial
|
|
||||||
* because it allows adding multiple "soft" colors on top of each other
|
|
||||||
* to create a accent, such as when having inline code block inside
|
|
||||||
* custom containers.
|
|
||||||
*
|
|
||||||
* - `default`: The color used purely for subtle indication without any
|
|
||||||
* special meanings attached to it such as bg color for menu hover state.
|
|
||||||
*
|
|
||||||
* - `brand`: Used for primary brand colors, such as link text, button with
|
|
||||||
* brand theme, etc.
|
|
||||||
*
|
|
||||||
* - `tip`: Used to indicate useful information. The default theme uses the
|
|
||||||
* brand color for this by default.
|
|
||||||
*
|
|
||||||
* - `warning`: Used to indicate warning to the users. Used in custom
|
|
||||||
* container, badges, etc.
|
|
||||||
*
|
|
||||||
* - `danger`: Used to show error, or dangerous message to the users. Used
|
|
||||||
* in custom container, badges, etc.
|
|
||||||
* -------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--vp-c-default-1: var(--vp-c-gray-1);
|
|
||||||
--vp-c-default-2: var(--vp-c-gray-2);
|
|
||||||
--vp-c-default-3: var(--vp-c-gray-3);
|
|
||||||
--vp-c-default-soft: var(--vp-c-gray-soft);
|
|
||||||
|
|
||||||
--vp-c-brand-1: var(--vp-c-indigo-1);
|
|
||||||
--vp-c-brand-2: var(--vp-c-indigo-2);
|
|
||||||
--vp-c-brand-3: var(--vp-c-indigo-3);
|
|
||||||
--vp-c-brand-soft: var(--vp-c-indigo-soft);
|
|
||||||
|
|
||||||
--vp-c-tip-1: var(--vp-c-brand-1);
|
|
||||||
--vp-c-tip-2: var(--vp-c-brand-2);
|
|
||||||
--vp-c-tip-3: var(--vp-c-brand-3);
|
|
||||||
--vp-c-tip-soft: var(--vp-c-brand-soft);
|
|
||||||
|
|
||||||
--vp-c-warning-1: var(--vp-c-yellow-1);
|
|
||||||
--vp-c-warning-2: var(--vp-c-yellow-2);
|
|
||||||
--vp-c-warning-3: var(--vp-c-yellow-3);
|
|
||||||
--vp-c-warning-soft: var(--vp-c-yellow-soft);
|
|
||||||
|
|
||||||
--vp-c-danger-1: var(--vp-c-red-1);
|
|
||||||
--vp-c-danger-2: var(--vp-c-red-2);
|
|
||||||
--vp-c-danger-3: var(--vp-c-red-3);
|
|
||||||
--vp-c-danger-soft: var(--vp-c-red-soft);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Component: Button
|
|
||||||
* -------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--vp-button-brand-border: transparent;
|
|
||||||
--vp-button-brand-text: var(--vp-c-white);
|
|
||||||
--vp-button-brand-bg: var(--vp-c-brand-3);
|
|
||||||
--vp-button-brand-hover-border: transparent;
|
|
||||||
--vp-button-brand-hover-text: var(--vp-c-white);
|
|
||||||
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
|
|
||||||
--vp-button-brand-active-border: transparent;
|
|
||||||
--vp-button-brand-active-text: var(--vp-c-white);
|
|
||||||
--vp-button-brand-active-bg: var(--vp-c-brand-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Component: Home
|
|
||||||
* -------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--vp-home-hero-name-color: transparent;
|
|
||||||
--vp-home-hero-name-background: -webkit-linear-gradient(
|
|
||||||
120deg,
|
|
||||||
#bd34fe 30%,
|
|
||||||
#41d1ff
|
|
||||||
);
|
|
||||||
|
|
||||||
--vp-home-hero-image-background-image: linear-gradient(
|
|
||||||
-45deg,
|
|
||||||
#bd34fe 50%,
|
|
||||||
#47caff 50%
|
|
||||||
);
|
|
||||||
--vp-home-hero-image-filter: blur(44px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
|
||||||
:root {
|
|
||||||
--vp-home-hero-image-filter: blur(56px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 960px) {
|
|
||||||
:root {
|
|
||||||
--vp-home-hero-image-filter: blur(68px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Component: Custom Block
|
|
||||||
* -------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--vp-custom-block-tip-border: transparent;
|
|
||||||
--vp-custom-block-tip-text: var(--vp-c-text-1);
|
|
||||||
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
|
|
||||||
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Component: Algolia
|
|
||||||
* -------------------------------------------------------------------------- */
|
|
||||||
|
|
||||||
.DocSearch {
|
|
||||||
--docsearch-primary-color: var(--vp-c-brand-1) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user