VitePress visual refresh v1

docs/.vitepress/config.ts

@@ -25,10 +25,11 @@ function classesOnlySidebar() {
   });
 }
 
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  title: 'XO Stack',
+  title: 'Documentation',
-  description: 'XO Stack',
+  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' }]]
+  
 });
+
+

docs/.vitepress/theme/Layout.vue

@@ -7,8 +7,48 @@ const { Layout } = DefaultTheme
 
 <template>
   <Layout>
-    <template #aside-outline-before>
+    <!-- Override the home-hero-image slot with the Stack, BCH, and Apps icons along with gradient arrows -->
-      <!-- My custom sidebar top content -->
+    <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>

docs/.vitepress/theme/style.css

@@ -94,16 +94,24 @@
   --vp-home-hero-name-color: transparent;
   --vp-home-hero-name-background: -webkit-linear-gradient(
     120deg,
-    #bd34fe 30%,
+    #38b6ff 30%,
-    #41d1ff
+    #5271ff
+
+    
   );
 
+  /*
+
   --vp-home-hero-image-background-image: linear-gradient(
     -45deg,
-    #bd34fe 50%,
+    #5271ff 50%,
-    #47caff 50%
+    #38b6ff 50%
+    
   );
+  
   --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;
+}

docs/index.md

@@ -1,36 +1,45 @@
 ---
-# https://vitepress.dev/reference/default-theme-home-page
+# VitePress configuration
 layout: home
 
 hero:
   name: "XO Stack"
-  text: "XO Stack"
+  text: "Documentation"
-  tagline: My great project tagline
+  tagline: Building smart applications on the Bitcoin Cash UTXO Network
   actions:
     - theme: brand
       text: Quick Start
-      link: /markdown-examples
+      link: /markdown-examples.html
-    - theme: alt
+    - theme: brand
-      text: APIs
+      text: GitHub
-      link: /api
+      link: https://gitlab.com/GeneralProtocols/xo/stack
 
 features:
-  - title: Feature A
+  - icon: 
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+      light: /icons/api-light.svg
-  - title: Feature B
+      dark: /icons/api-dark.svg
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+    title: API
-  - title: Feature C
+    details: Access powerful APIs to build smart apps on the BCH UTXO Network.
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - 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.
+<!-- Logo section -->
-
+<div class="vp-doc" style="text-align: center; margin: 15px;">
-However, it does seem like there's quite a lot of flexibility with VitePress.
+  <h4>Developed by:</h4>
-
+</div>
-We probably won't want to create an entirely custom theme, but extend the default instead:
+<div style="text-align: center; margin: 10px;">
-
+  <a href="https://generalprotocols.com" target="_blank" style="display: inline-block;">
-https://vitepress.dev/guide/extending-default-theme
+    <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;">
-Also, don't take what's in these docs here literally. I'm still toying around with things.
+  </a>
-
+</div>
-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.