From d3350c124df833325e025bc7e527a37efbfe9c86 Mon Sep 17 00:00:00 2001
From: RedCommand <maxvidal1612@gmail.com>
Date: Tue, 26 Jul 2022 14:10:24 +0200
Subject: [PATCH 1/2] feat better CodeBlock

---
 components/content/CopyButton.vue             |  2 +-
 components/content/Prose/ProseCode.vue        | 22 +++++++++++++------
 content/1.index.md                            |  2 +-
 .../articles/5.nuxt-static-improvements.md    | 14 +++---------
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/components/content/CopyButton.vue b/components/content/CopyButton.vue
index 8e72fa91d..1d68629e3 100644
--- a/components/content/CopyButton.vue
+++ b/components/content/CopyButton.vue
@@ -1,5 +1,5 @@
 <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">
+  <button class="flex flext-col mx-auto my-auto text-primary-100 not-prose 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" />
     <p>
       {{ state }}
diff --git a/components/content/Prose/ProseCode.vue b/components/content/Prose/ProseCode.vue
index bb36f4e61..5b6efcc37 100644
--- a/components/content/Prose/ProseCode.vue
+++ b/components/content/Prose/ProseCode.vue
@@ -20,16 +20,24 @@ const props = defineProps({
     default: () => []
   }
 })
+
+const codeBlock = ref(null)
+
+onMounted(() => {
+  console.log(codeBlock.value.clientHeight)
+})
+
 </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 min-h-min w-full prose-code prose-code:flex prose-code:flex-col prose-pre:pr-40 prose-code:pr-40 prose-code:break-words prose-pre:break-words prose-code:bg-red-200">
+    <div v-if="codeBlock" class="absolute right-0 flex flex-col bg-red-400" :style="`height: ${codeBlock.clientHeight}px;`">
+      <p v-if="filename" 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 bg-green-400" />
+      <CopyButton :content="code" class="mr-4 md:mr-5 mb-4 md:mb-5" />
     </div>
+    <slot />
   </div>
 </template>
diff --git a/content/1.index.md b/content/1.index.md
index c313ddd40..92bee1b3c 100644
--- a/content/1.index.md
+++ b/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>
 
diff --git a/content/articles/5.nuxt-static-improvements.md b/content/articles/5.nuxt-static-improvements.md
index 5ef4c19e3..68e6f97e7 100644
--- a/content/articles/5.nuxt-static-improvements.md
+++ b/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]

From 118d2a5ea68384254da8f0e072546ff9dc50bf19 Mon Sep 17 00:00:00 2001
From: RedCommand <maxvidal1612@gmail.com>
Date: Tue, 26 Jul 2022 15:50:20 +0200
Subject: [PATCH 2/2] fix(codeBlock): single line layout

---
 components/content/CopyButton.vue      |  4 ++--
 components/content/Icon.vue            |  6 +++++-
 components/content/Prose/ProseCode.vue | 12 ++++--------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/content/CopyButton.vue b/components/content/CopyButton.vue
index 1d68629e3..1207dc337 100644
--- a/components/content/CopyButton.vue
+++ b/components/content/CopyButton.vue
@@ -1,6 +1,6 @@
 <template>
-  <button class="flex flext-col mx-auto my-auto text-primary-100 not-prose 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>
diff --git a/components/content/Icon.vue b/components/content/Icon.vue
index 8cc44cb08..419b8c1b2 100644
--- a/components/content/Icon.vue
+++ b/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>
diff --git a/components/content/Prose/ProseCode.vue b/components/content/Prose/ProseCode.vue
index 5b6efcc37..aa3b96290 100644
--- a/components/content/Prose/ProseCode.vue
+++ b/components/content/Prose/ProseCode.vue
@@ -23,19 +23,15 @@ const props = defineProps({
 
 const codeBlock = ref(null)
 
-onMounted(() => {
-  console.log(codeBlock.value.clientHeight)
-})
-
 </script>
 
 <template>
-  <div ref="codeBlock" class="relative min-h-min w-full prose-code prose-code:flex prose-code:flex-col prose-pre:pr-40 prose-code:pr-40 prose-code:break-words prose-pre:break-words prose-code:bg-red-200">
-    <div v-if="codeBlock" class="absolute right-0 flex flex-col bg-red-400" :style="`height: ${codeBlock.clientHeight}px;`">
-      <p v-if="filename" 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}">
+  <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 bg-green-400" />
+      <div class="grow" />
       <CopyButton :content="code" class="mr-4 md:mr-5 mb-4 md:mb-5" />
     </div>
     <slot />