Render Font Awesome icons in <ClientOnly> mode

Signed-off-by: Anatoli Nicolae <an@thundersquared.com>

Author: anatolinicolae

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apiscp/vitepress-theme",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "The VitePress theme for notes.apiscp.com.",
   "main": "src/index.ts",
   "exports": {

src/components/Callouts/Callout.vue

@@ -21,9 +21,11 @@ const icon = computed(() => icons[props.level])
 
 <template>
     <div :class="['callout', level]">
-        <div class="callout-icon" v-if="level">
-            <FontAwesomeIcon :icon="icon"></FontAwesomeIcon>
-        </div>
+        <ClientOnly>
+            <div class="callout-icon" v-if="level">
+                <FontAwesomeIcon :icon="icon"></FontAwesomeIcon>
+            </div>
+        </ClientOnly>
         <div class="callout-body">
             <h3 class="callout-title" v-if="props.title">{{ props.title }}</h3>
             <slot></slot>
@@ -61,11 +63,11 @@ const icon = computed(() => icons[props.level])
     line-height: 1.75rem;
 }
 
-.callout .callout-body > p:first-of-type {
+.callout .callout-body>p:first-of-type {
     margin-top: 0;
 }
 
-.callout .callout-body > p:last-of-type {
+.callout .callout-body>p:last-of-type {
     margin-bottom: 0;
 }
 

src/components/Card.vue

@@ -15,9 +15,11 @@ const tag = computed(() => props.href ? 'a' : 'div')
 
 <template>
     <component :is="tag" class="card" :class="{ link: props.href }" :href="props.href || undefined">
-        <div v-if="props.icon" class="card-icon">
-            <FontAwesomeIcon :icon="props.icon"></FontAwesomeIcon>
-        </div>
+        <ClientOnly>
+            <div v-if="props.icon" class="card-icon">
+                <FontAwesomeIcon :icon="props.icon"></FontAwesomeIcon>
+            </div>
+        </ClientOnly>
         <h3 class="card-title">{{ props.title }}</h3>
         <div class="card-body">
             <slot></slot>
@@ -45,11 +47,11 @@ const tag = computed(() => props.href ? 'a' : 'div')
     height: 1.25rem;
 }
 
-.card .card-body > p:first-of-type {
+.card .card-body>p:first-of-type {
     margin-top: 0;
 }
 
-.card .card-body > p:last-of-type {
+.card .card-body>p:last-of-type {
     margin-bottom: 0;
 }