Resolve "Fix: Theme such that assets that are dynamically fetched are in the /public folder"

.gitignore

@@ -2,7 +2,6 @@ node_modules/
 .nyc_output/
 dist/
 coverage/
-public/
 .vscode
 yarn.lock
 yarn-error.log

docs/.vitepress/theme/custom.css

@@ -0,0 +1,153 @@
+:root {
+  --primary: #5271ff;
+  --vp-nav-logo-height: 48px;
+}
+
+html.dark {
+  --primary: #38b6ff;
+}
+
+body {
+  font-size: 14px;
+}
+
+.vp-nav .title {
+  font-size: 24px !important;
+}
+
+.vp-doc h1 {
+  font-size: 24px;
+}
+
+.vp-doc h2 {
+  font-size: 20px;
+}
+
+.vp-doc h3 {
+  font-size: 16px;
+}
+
+.vp-doc h4 {
+  font-size: 14px;
+  opacity: 0.75;
+}
+
+.VPSidebarItem .text {
+  font-size: 12px;
+}
+
+.VPSidebarItem.level-2.is-active > .item > .indicator,
+.VPSidebarItem.level-3.is-active > .item > .indicator,
+.VPSidebarItem.level-4.is-active > .item > .indicator,
+.VPSidebarItem.level-5.is-active > .item > .indicator {
+  background-color: var(--primary) !important;
+}
+
+.VPSidebarItem.level-0.is-active > .item .link > .text,
+.VPSidebarItem.level-1.is-active > .item .link > .text,
+.VPSidebarItem.level-2.is-active > .item .link > .text,
+.VPSidebarItem.level-3.is-active > .item .link > .text,
+.VPSidebarItem.level-4.is-active > .item .link > .text,
+.VPSidebarItem.level-5.is-active > .item .link > .text {
+  color: var(--primary) !important;
+}
+
+.VPSidebarItem.level-0.is-link > .item > .link:hover .text,
+.VPSidebarItem.level-1.is-link > .item > .link:hover .text,
+.VPSidebarItem.level-2.is-link > .item > .link:hover .text,
+.VPSidebarItem.level-3.is-link > .item > .link:hover .text,
+.VPSidebarItem.level-4.is-link > .item > .link:hover .text,
+.VPSidebarItem.level-5.is-link > .item > .link:hover .text {
+  color: var(--primary) !important;
+}
+
+.outline-title {
+  font-size: 12px !important;
+}
+
+.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/.vitepress/theme/index.ts

@@ -3,6 +3,7 @@ import type { Theme } from 'vitepress';
 import DefaultTheme from 'vitepress/theme';
 import Layout from './Layout.vue';
 import './style.css';
+import './custom.css';
 
 export default {
   extends: DefaultTheme,

docs/.vitepress/theme/style.css

@@ -96,8 +96,6 @@
     120deg,
     #38b6ff 30%,
     #5271ff
-
-    
   );
 
   /*
@@ -144,160 +142,3 @@
 .DocSearch {
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
-
-/**
- * Overrides
- */
-
-:root {
-  --primary: #5271ff;
-  --vp-nav-logo-height: 48px;
-}
-
-html.dark {
-  --primary: #38b6ff;
-}
-
-body {
-  font-size: 14px;
-}
-
-.vp-nav .title {
-  font-size: 24px !important;
-}
-
-.vp-doc h1 {
-  font-size: 24px;
-}
-
-.vp-doc h2 {
-  font-size: 20px;
-}
-
-.vp-doc h3 {
-  font-size: 16px;
-}
-
-.vp-doc h4 {
-  font-size: 14px;
-  opacity: 0.75;
-}
-
-.VPSidebarItem .text {
-  font-size: 12px;
-}
-
-.VPSidebarItem.level-2.is-active > .item > .indicator,
-.VPSidebarItem.level-3.is-active > .item > .indicator,
-.VPSidebarItem.level-4.is-active > .item > .indicator,
-.VPSidebarItem.level-5.is-active > .item > .indicator {
-  background-color: var(--primary) !important;
-}
-
-.VPSidebarItem.level-0.is-active > .item .link > .text,
-.VPSidebarItem.level-1.is-active > .item .link > .text,
-.VPSidebarItem.level-2.is-active > .item .link > .text,
-.VPSidebarItem.level-3.is-active > .item .link > .text,
-.VPSidebarItem.level-4.is-active > .item .link > .text,
-.VPSidebarItem.level-5.is-active > .item .link > .text {
-  color: var(--primary) !important;
-}
-
-.VPSidebarItem.level-0.is-link > .item > .link:hover .text,
-.VPSidebarItem.level-1.is-link > .item > .link:hover .text,
-.VPSidebarItem.level-2.is-link > .item > .link:hover .text,
-.VPSidebarItem.level-3.is-link > .item > .link:hover .text,
-.VPSidebarItem.level-4.is-link > .item > .link:hover .text,
-.VPSidebarItem.level-5.is-link > .item > .link:hover .text {
-  color: var(--primary) !important;
-}
-
-.outline-title {
-  font-size: 12px !important;
-}
-
-.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;
-}