feat: added copy

nimiq · Mar 20, 2024 · 2e9788e · 2e9788e
1 parent afc423a
commit 2e9788e
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 19 deletions.
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -7,6 +7,7 @@ import { sidebar } from './sidebar.config'
 import { navigation } from './navigation.config'
 import { generateWebClientDocs } from './scripts/web-client'
 import { generateRpcDocs } from './scripts/rpc-docs'
+import { preWrapperPlugin } from './plugins/preWrapper'
 
 // @unocss-include
 
@@ -98,17 +99,6 @@ export default async () => {
             else { return `</div>\n` }
           },
         }])
-        // md.use(...[container, 'tip', {
-        //   render(tokens, idx) {
-        //     if (tokens[idx].nesting === 1) {
-        //       return `
-        //       <div class="custom-block" bg="gold/10" text="gold">
-        //         <p flex gap-x-8><div i-nimiq:icons-lg-bulb></div><span>Tip</span></p>
-        //       `
-        //     }
-        //     else { return `</div>\n` }
-        //   },
-        // }])
       },
     },
 

diff --git a/.vitepress/navigation.config.ts b/.vitepress/navigation.config.ts
@@ -49,7 +49,7 @@ export const navigation = {
         label: 'Learn',
         title: 'The technology',
         description: 'What makes Nimiq a truly unique blockchain.',
-        href: '/learn/',
+        href: 'learn/',
       },
       items: [
         {
@@ -77,12 +77,12 @@ export const navigation = {
         label: 'Build',
         title: 'On top of Nimiq',
         description: 'Create an app and have it running in 5 minutes.',
-        href: '/build/',
+        href: 'build/',
       },
       items: [
         {
           title: 'Web Client',
-          href: '/build/web-client/',
+          href: 'build/web-client/',
           description: 'Create a simple web app that interacts with the Nimiq blockchain.',
         },
         {
@@ -92,7 +92,7 @@ export const navigation = {
         },
         {
           title: 'Design',
-          href: '/build/design/',
+          href: 'build/design/',
           description: 'Your app with Nimiq in mind.',
         },
       ],

diff --git a/.vitepress/theme/components/Doc.vue b/.vitepress/theme/components/Doc.vue
@@ -16,10 +16,7 @@ const pageName = computed(() =>
 </script>
 
 <template>
-  <div
-    class="VPDoc"
-    :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside }"
-  >
+  <div class="VPDoc" :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside }">
     <slot name="doc-top" />
     <div class="container">
       <div v-if="hasAside" class="aside" :class="{ 'left-aside': leftAside }">
@@ -177,3 +174,49 @@ const pageName = computed(() =>
   }
 }
 </style>
+
+<style>
+div[class*="language"]:has(.copy + .lang) {
+  --uno: relative;
+
+  .lang {
+    --uno: absolute text-11 text-neutral-800 lh-12 right-6 top-6;
+  }
+
+  .copy {
+    --uno: absolute bg-neutral-400 op0 size-32 rounded-6 right-20 top-20 flex items-center justify-center gap-8 px-9 inline-block transition-colors duration-150 ease-out;
+
+    &::after {
+      content: '';
+      --uno: inline-block text-inherit size-14 bg-current;
+      --un-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTQgMTQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTkuMzQxIDMuNDlWMS43N0ExLjAxIDEuMDEgMCAwMDguMzMuNzZIMS43N0ExLjAxIDEuMDEgMCAwMC43NiAxLjc3djcuMzRjMCAuNTU4LjQ1MyAxLjAxMSAxLjAxMSAxLjAxMUgzLjFtMi41NyAzLjEyaDYuNTZjLjU1OCAwIDEuMDExLS40NTQgMS4wMTEtMS4wMTJWNS42NzNjMC0uNTU4LS40NTMtMS4wMTEtMS4wMTEtMS4wMTFINS42N2MtLjU1OCAwLTEuMDExLjQ1My0xLjAxMSAxLjAxMXY2LjU1NmMwIC41NTguNDUzIDEuMDExIDEuMDExIDEuMDExWiIvPjwvc3ZnPg==);
+      mask: var(--un-icon) no-repeat;
+      mask-size: 100% 100%;
+    }
+
+    &.copied {
+      --uno: w-unset bg-green;
+      &::after {
+        --uno: text-white;
+        --un-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxLjJlbSIgaGVpZ2h0PSIxZW0iIHZpZXdCb3g9IjAgMCAxMiAxMCI+PGcgZmlsbD0ibm9uZSI+PGcgY2xpcC1wYXRoPSJ1cmwoI25pbWlxLWNoZWNrLTk3MzM2MHBjMzByMW5uYXNrcmt1cjcpIj48cGF0aCBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTExLjA4MiAxLjExMSA1LjAyMiA4Ljg5IDEuMzYzIDUuNjg3Ii8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0ibmltaXEtY2hlY2stOTczMzYwcGMzMHIxbm5hc2tya3VyNyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGgxMnYxMEgweiIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvZz48L3N2Zz4=);
+      }
+
+      &::before {
+        --uno: text-15 font-bold text-white;
+        content: 'Copied!';
+      }
+    }
+  }
+
+  &:hover,
+  &:has(.copy:focus) {
+    .copy {
+      --uno: op100;
+
+      &:not(.copied):hover {
+        --uno: bg-neutral-0;
+      }
+    }
+  }
+}
+</style>
diff --git a/package.json b/package.json
@@ -38,12 +38,14 @@
     "@iconify-json/logos": "^1.1.42",
     "@iconify/utils": "^2.1.22",
     "@nimiq/core-web": "2.0.0-alpha.18",
+    "@types/markdown-it": "^13.0.7",
     "@types/node": "^20.11.27",
     "@unocss/preset-rem-to-px": "^0.58.5",
     "@unocss/transformer-directives": "^0.58.5",
     "cross-spawn": "^7.0.3",
     "eslint": "^8.57.0",
     "lint-staged": "^15.2.2",
+    "markdown-it": "^14.1.0",
     "markdown-it-container": "^4.0.0",
     "node-html-parser": "^6.1.12",
     "postcss": "^8.4.35",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml