Code block

components/content/CopyButton.vue

@@ -1,6 +1,6 @@
 <template>
-  <button class="flex flext-col absolute bottom-4 right-4 md:bottom-5 md:right-5 text-primary-100 not-prose my-0 bg-zinc-600 rounded-lg py-1 px-3" @click="copyCode">
-    <Icon v-if="state === 'copied'" name="uil:check" class="w-5 h-5 mr-1 mt-1" />
+  <button class="scale-0 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 flex flext-col mx-auto my-auto text-primary-100 not-prose bg-zinc-600 rounded-lg pt-1 pb-1.5 px-3" @click="copyCode">
+    <Icon v-if="state === 'copied'" name="uil:check" class="w-5 h-5 mr-1 !text-primary-100 !dark:text-primary-100" />
     <p>
       {{ state }}
     </p>

components/content/Icon.vue

@@ -7,6 +7,10 @@ const props = defineProps({
   name: {
     type: String,
     required: true
+  },
+  color: {
+    type: String,
+    default: null
   }
 })
 
@@ -36,7 +40,7 @@ watch(() => props.name, loadIconComponent)
 <template>
   <div class="text-primary-800 dark:text-primary-200">
     <span v-if="isFetching" class="inline-block w-5 h-5" />
-    <Iconify v-else-if="icon" :icon="icon" class="inline-block w-5 h-5" />
+    <Iconify v-else-if="icon" :icon="icon" class="inline-block w-5 h-5" :style="color ? `color: ${color};` : ''" />
     <Component :is="component" v-else-if="component" class="inline-block w-5 h-5" />
     <span v-else>{{ name }}</span>
   </div>

components/content/Prose/ProseCode.vue

@@ -20,16 +20,20 @@ const props = defineProps({
     default: () => []
   }
 })
+
+const codeBlock = ref(null)
+
 </script>
 
 <template>
-  <div class="relative">
-    <CopyButton :content="code" />
-    <p v-if="filename" class="absolute transition hover:opacity-0 top-3 right-4 md:top-4 md:right-5 text-primary-100 not-prose my-0">
-      {{ filename }}
-    </p>
-    <div class="w-full prose-code prose-code:flex prose-code:flex-col">
-      <slot />
+  <div ref="codeBlock" class="relative group min-h-min w-full prose-code prose-code:flex prose-code:flex-col prose-pre:py-7">
+    <div v-if="codeBlock" class="absolute right-0 h-full flex flex-col">
+      <p v-if="filename && codeBlock && codeBlock.clientHeight >= 120" class="transition mx-auto hover:opacity-0 text-primary-100 not-prose my-0" :class="{'mb-6 mr-4 md:mr-5 mt-4 md:mt-5': codeBlock.clientHeight >= 120}">
+        {{ filename }}
+      </p>
+      <div class="grow" />
+      <CopyButton :content="code" class="mr-4 md:mr-5 mb-4 md:mb-5" />
     </div>
+    <slot />
   </div>
 </template>

content/1.index.md

@@ -74,7 +74,7 @@ images:
 
 ## The code-block component:
 
-```c {}[my_put_str.c]
+```c [my_put_str.c]
 #include <unistd.h>
 #include <stddef.h>
 

content/articles/5.nuxt-static-improvements.md

@@ -55,30 +55,22 @@ See the comparison in seconds between two `nuxt generate`:
 - `Build` is when a webpack build is required
 - `Cache` is only when the content has changed (webpack build skipped)
 
-<bar-chart-cache-build></bar-chart-cache-build>
-
-::alert{type="info"}
-The static site generation of our projects on content changes are now **~3.6x times** faster 🚀
-::
-
 Project links: [Basic](https://github.com/pi0/nuxt-static-demo), [Strapi Module Docs](https://github.com/nuxt-community/strapi-module/tree/master/docs), [Content Module Docs](https://github.com/nuxt/content/tree/master/docs) and [Nuxt Docs](https://github.com/nuxt/nuxtjs.org).
 
 ## Using in your projects
 
 1. Update `nuxt` to the latest minor version, which is v2.14.
 
-::code-group
-
 ```bash [Yarn]
-yarn upgrade nuxt
+yarn upgrade nuxt fdsfdsfjsdlfjsdkljsdklfjdsklfjskqldjfkdlsjfklsqdjfkldsjfkldsmjfskdlqjfdslkmqjfsqdlkmjfsdkljfsdmlkfjlkmsdqjflkmsqd
+lalal
+fdsfsqfsq
 ```
 
 ```bash [NPM]
 npm update
 ```
 
-::
-
 2. Ensure `target` is `static` inside your `nuxt.config`
 
 ```js{}[nuxt.config.js]