Merge branch '5-vitepress-refresh' into 'main'
VitePress visual refresh v1 Closes #5 See merge request GeneralProtocols/xo/stack!1
This commit is contained in:
Jim Hamill
@@ -25,10 +25,11 @@ function classesOnlySidebar() {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// https://vitepress.dev/reference/site-config
|
||||
export default defineConfig({
|
||||
title: 'XO Stack',
|
||||
description: 'XO Stack',
|
||||
title: 'Documentation',
|
||||
description: 'Documentation and guide for the XO Stack',
|
||||
themeConfig: {
|
||||
// Set the logo
|
||||
logo: {
|
||||
@@ -83,4 +84,9 @@ export default defineConfig({
|
||||
label: 'On this page',
|
||||
},
|
||||
},
|
||||
|
||||
head: [['link', { rel: 'icon', href: '/favicon.png' }]]
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!--.vitepress/theme/MyLayout.vue-->
|
||||
<!-- .vitepress/theme/MyLayout.vue -->
|
||||
<script setup>
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
|
||||
@@ -7,8 +7,48 @@ const { Layout } = DefaultTheme
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<template #aside-outline-before>
|
||||
<!-- My custom sidebar top content -->
|
||||
<!-- Override the home-hero-image slot with the Stack, BCH, and Apps icons along with gradient arrows -->
|
||||
<template #home-hero-image>
|
||||
<div class="icon-container">
|
||||
|
||||
<!-- Stack Icon -->
|
||||
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="stack-icon">
|
||||
<path d="m2.394 15.759s7.554 4.246 9.09 5.109c.165.093.333.132.492.132.178 0 .344-.049.484-.127 1.546-.863 9.155-5.113 9.155-5.113.246-.138.385-.393.385-.656 0-.566-.614-.934-1.116-.654 0 0-7.052 3.958-8.539 4.77-.211.115-.444.161-.722.006-1.649-.928-8.494-4.775-8.494-4.775-.502-.282-1.117.085-1.117.653 0 .262.137.517.382.655zm0-3.113s7.554 4.246 9.09 5.109c.165.093.333.132.492.132.178 0 .344-.049.484-.127 1.546-.863 9.155-5.113 9.155-5.113.246-.138.385-.393.385-.656 0-.566-.614-.934-1.116-.654 0 0-7.052 3.958-8.539 4.77-.211.115-.444.161-.722.006-1.649-.928-8.494-4.775-8.494-4.775-.502-.282-1.117.085-1.117.653 0 .262.137.517.382.655zm10.271-9.455c-.246-.128-.471-.191-.692-.191-.223 0-.443.065-.675.191l-8.884 5.005c-.276.183-.414.444-.414.698 0 .256.139.505.414.664l8.884 5.006c.221.133.447.203.678.203.223 0 .452-.065.689-.203l8.884-5.006c.295-.166.451-.421.451-.68 0-.25-.145-.503-.451-.682z" fill-rule="nonzero"/>
|
||||
</svg>
|
||||
|
||||
|
||||
<!-- Right Arrow with gradient -->
|
||||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="url(#gradient)" fill-rule="evenodd" clip-rule="evenodd" class="right-arrow" stroke="url(#gradient)" stroke-width="2">
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#5271ff;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#38b6ff;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M4 .755l14.374 11.245-14.374 11.219.619.781 15.381-12-15.391-12-.609.755z"/>
|
||||
</svg>
|
||||
|
||||
<!-- BCH Icon -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="currentColor" class="bch-icon">
|
||||
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.5 12.497v2.503c1.984 0 3.344-.188 3.344-1.258 0-1.148-1.469-1.245-3.344-1.245zm2.789-2.247c0-1-1.039-1.25-2.789-1.25v2.5c1.105 0 2.789-.078 2.789-1.25zm-2.289-7.25c-4.971 0-9 4.029-9 9s4.029 9 9 9 9-4.029 9-9-4.029-9-9-9zm1 13.5v1.5h-1v-1.511h-.5v1.511h-1v-1.511h-2.484l.25-1.489h.539c.442 0 .695-.425.695-.854v-4.444c0-.416-.242-.702-.683-.702h-.817v-1.5h2.5v-1.5h1v1.5h.5v-1.5h1v1.526c2.158.073 3.012.891 3.257 1.812.29 1.09-.429 2.005-1.046 2.228.75.192 1.789.746 1.789 2.026 0 1.741-1.344 2.908-4 2.908z"/>
|
||||
</svg>
|
||||
|
||||
<!-- Left Arrow with gradient -->
|
||||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="url(#gradient)" fill-rule="evenodd" clip-rule="evenodd" class="left-arrow" stroke="url(#gradient)" stroke-width="2">
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#5271ff;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#38b6ff;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M20 .755l-14.374 11.245 14.374 11.219-.619.781-15.381-12 15.391-12 .609.755z"/>
|
||||
</svg>
|
||||
|
||||
<!-- Apps Icon -->
|
||||
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="apps-icon">
|
||||
<path d="m21 4c0-.478-.379-1-1-1h-16c-.62 0-1 .519-1 1v16c0 .621.52 1 1 1h16c.478 0 1-.379 1-1zm-16.5.5h15v15h-15zm6.75 9.25v3.25c0 .53-.47 1-1 1h-3.25c-.53 0-1-.47-1-1v-3.25c0-.53.47-1 1-1h3.25c.53 0 1 .47 1 1zm0-6.75v3.25c0 .53-.47 1-1 1h-3.25c-.53 0-1-.47-1-1v-3.25c0-.53.47-1 1-1h3.25c.53 0 1 .47 1 1zm6.75 0v3.25c0 .53-.47 1-1 1h-3.25c-.53 0-1-.47-1-1v-3.25c0-.53.47-1 1-1h3.25c.53 0 1 .47 1 1z" fill-rule="nonzero"/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
@@ -94,16 +94,24 @@
|
||||
--vp-home-hero-name-color: transparent;
|
||||
--vp-home-hero-name-background: -webkit-linear-gradient(
|
||||
120deg,
|
||||
#bd34fe 30%,
|
||||
#41d1ff
|
||||
#38b6ff 30%,
|
||||
#5271ff
|
||||
|
||||
|
||||
);
|
||||
|
||||
/*
|
||||
|
||||
--vp-home-hero-image-background-image: linear-gradient(
|
||||
-45deg,
|
||||
#bd34fe 50%,
|
||||
#47caff 50%
|
||||
#5271ff 50%,
|
||||
#38b6ff 50%
|
||||
|
||||
);
|
||||
--vp-home-hero-image-filter: blur(44px);
|
||||
|
||||
--vp-home-hero-image-filter: blur(44px);
|
||||
|
||||
*/
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
@@ -142,12 +150,12 @@
|
||||
*/
|
||||
|
||||
:root {
|
||||
--primary: #2c7d00;
|
||||
--primary: #5271ff;
|
||||
--vp-nav-logo-height: 48px;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--primary: #b2fb54;
|
||||
--primary: #38b6ff;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -211,3 +219,85 @@ body {
|
||||
.outline-link {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
/* Customization of VitePress CSS */
|
||||
|
||||
:root {
|
||||
--vp-home-hero-name-color: transparent;
|
||||
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #5271ff, #38b6ff);
|
||||
}
|
||||
|
||||
.VPButton.brand {
|
||||
background: linear-gradient(-45deg, #5271ff, #38b6ff) !important;
|
||||
|
||||
}
|
||||
|
||||
.VPButton.brand:hover {
|
||||
background: linear-gradient(45deg, #5271ff, #5271ff) !important;
|
||||
}
|
||||
|
||||
/* .vitepress/theme/custom.css */
|
||||
|
||||
.image-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%; /* Ensure it takes up the full height of the parent */
|
||||
width: 100%; /* Ensure it takes up the full width of the parent */
|
||||
}
|
||||
|
||||
/* .vitepress/theme/custom.css */
|
||||
|
||||
/* Container for all icons and arrows */
|
||||
.icon-container {
|
||||
display: flex;
|
||||
align-items: center; /* Align the icons and arrows vertically */
|
||||
justify-content: center; /* Center the icons and arrows horizontally */
|
||||
gap: 20px; /* Space between the icons and arrows */
|
||||
}
|
||||
|
||||
/* BCH icon styling */
|
||||
.bch-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
transform: rotate(-15deg); /* Rotate the BCH icon by 15 degrees to the left */
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/* Stack icon styling */
|
||||
.stack-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/* Apps icon styling */
|
||||
.apps-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/* Arrow between Stack and BCH */
|
||||
.right-arrow {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
}
|
||||
|
||||
/* Arrow between BCH and Apps */
|
||||
.left-arrow {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
}
|
||||
|
||||
/* Light / dark mode logos */
|
||||
|
||||
:root:not(.dark) .dark-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:root:is(.dark) .light-only {
|
||||
display: none;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 80 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 140 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 77 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 77 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
+33
-24
@@ -1,36 +1,45 @@
|
||||
---
|
||||
# https://vitepress.dev/reference/default-theme-home-page
|
||||
# VitePress configuration
|
||||
layout: home
|
||||
|
||||
hero:
|
||||
name: "XO Stack"
|
||||
text: "XO Stack"
|
||||
tagline: My great project tagline
|
||||
text: "Documentation"
|
||||
tagline: Building smart applications on the Bitcoin Cash UTXO Network
|
||||
actions:
|
||||
- theme: brand
|
||||
text: Quick Start
|
||||
link: /markdown-examples
|
||||
- theme: alt
|
||||
text: APIs
|
||||
link: /api
|
||||
link: /markdown-examples.html
|
||||
- theme: brand
|
||||
text: GitHub
|
||||
link: https://gitlab.com/GeneralProtocols/xo/stack
|
||||
|
||||
features:
|
||||
- title: Feature A
|
||||
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||
- title: Feature B
|
||||
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||
- title: Feature C
|
||||
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||
- icon:
|
||||
light: /icons/api-light.svg
|
||||
dark: /icons/api-dark.svg
|
||||
title: API
|
||||
details: Access powerful APIs to build smart apps on the BCH UTXO Network.
|
||||
- icon:
|
||||
light: /icons/framework-light.svg
|
||||
dark: /icons/framework-dark.svg
|
||||
title: Framework
|
||||
details: A solid framework for building scalable applications.
|
||||
- icon:
|
||||
light: /icons/tools-light.svg
|
||||
dark: /icons/tools-dark.svg
|
||||
title: Tools
|
||||
details: Essential tools to streamline development and deployment.
|
||||
|
||||
---
|
||||
|
||||
I haven't played with custom theming much yet and have been working with more the configuration side of things for Docs.
|
||||
|
||||
However, it does seem like there's quite a lot of flexibility with VitePress.
|
||||
|
||||
We probably won't want to create an entirely custom theme, but extend the default instead:
|
||||
|
||||
https://vitepress.dev/guide/extending-default-theme
|
||||
|
||||
Also, don't take what's in these docs here literally. I'm still toying around with things.
|
||||
|
||||
But having the API docs generate is probably quite useful in even the early-dev/experimental phase: It allows us to get a feel for the API.
|
||||
<!-- Logo section -->
|
||||
<div class="vp-doc" style="text-align: center; margin: 15px;">
|
||||
<h4>Developed by:</h4>
|
||||
</div>
|
||||
<div style="text-align: center; margin: 10px;">
|
||||
<a href="https://generalprotocols.com" target="_blank" style="display: inline-block;">
|
||||
<img class="light-only" src="/GP_logo_light.png" alt="GP Logo" style="width: 100px; height: auto;">
|
||||
<img class="dark-only" src="/GP_logo_dark.png" alt="GP Logo" style="width: 100px; height: auto;">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 15 KiB |
+1
-1
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 15 KiB |
Reference in New Issue
Block a user