From e148e8dd7218cba87ca06bfe0f2e6727d4e9df51 Mon Sep 17 00:00:00 2001
From: Manon Carbonnel <manon.carbonnel@gmail.com>
Date: Tue, 25 Jun 2024 15:51:36 +0200
Subject: [PATCH] :refactor: image paths

---
 components/big-concept.vue                          |   2 +-
 components/watermark.vue                            |   2 +-
 example.md                                          |   8 ++++----
 layouts/image-left.vue                              |   2 +-
 layouts/image-right.vue                             |   2 +-
 layouts/image.vue                                   |   2 +-
 layouts/screenshot.vue                              |   4 ++--
 {styles/images => public}/Path_Top2.svg             |   0
 {styles/images => public}/Paths_1.svg               |   0
 {styles/images => public}/arrow-down.svg            |   0
 {styles/images => public}/arrow-up.svg              |   0
 {styles/images => public}/arrow-white.svg           |   0
 {styles/images => public}/arrow.svg                 |   0
 {styles/images => public}/bg-home.svg               |   0
 .../brush-stroke-dark-mode.svg                      |   0
 .../brush-stroke-light-mode.svg                     |   0
 .../image-illustration-manifeste.png                | Bin
 .../images => public}/iphone-15-pro-max-frame.png   | Bin
 {styles/images => public}/logo-footer.svg           |   0
 {styles/images => public}/logo-red.jpg              | Bin
 {styles/images => public}/long-arrow.svg            |   0
 {styles/images => public}/macbook-air-frame.png     | Bin
 {styles/images => public}/shodo.io-screenshot.png   | Bin
 styles/layout.css                                   |   6 +++---
 24 files changed, 14 insertions(+), 14 deletions(-)
 rename {styles/images => public}/Path_Top2.svg (100%)
 rename {styles/images => public}/Paths_1.svg (100%)
 rename {styles/images => public}/arrow-down.svg (100%)
 rename {styles/images => public}/arrow-up.svg (100%)
 rename {styles/images => public}/arrow-white.svg (100%)
 rename {styles/images => public}/arrow.svg (100%)
 rename {styles/images => public}/bg-home.svg (100%)
 rename styles/images/Path_Top1-dark-mode.svg => public/brush-stroke-dark-mode.svg (100%)
 rename styles/images/Path_Top1-light-mode.svg => public/brush-stroke-light-mode.svg (100%)
 rename {styles/images => public}/image-illustration-manifeste.png (100%)
 rename {styles/images => public}/iphone-15-pro-max-frame.png (100%)
 rename {styles/images => public}/logo-footer.svg (100%)
 rename {styles/images => public}/logo-red.jpg (100%)
 rename {styles/images => public}/long-arrow.svg (100%)
 rename {styles/images => public}/macbook-air-frame.png (100%)
 rename {styles/images => public}/shodo.io-screenshot.png (100%)

diff --git a/components/big-concept.vue b/components/big-concept.vue
index 2a79963..b662f36 100644
--- a/components/big-concept.vue
+++ b/components/big-concept.vue
@@ -16,7 +16,7 @@ defineProps({
 <style scoped>
 .big-concept {
   align-items: center;
-  background: url("../styles/images/bg-home.svg") no-repeat center/contain;
+  background: url("/bg-home.svg") no-repeat center/contain;
   color: #fff;
   display: flex;
   height: 300px;
diff --git a/components/watermark.vue b/components/watermark.vue
index 342ab65..c807767 100644
--- a/components/watermark.vue
+++ b/components/watermark.vue
@@ -1,6 +1,6 @@
 <template>
     <aside class="watermark">
-        <img class="watermark-logo" src="../styles/images/logo-red.jpg" alt="Logo Shodo" />
+        <img class="watermark-logo" src="/logo-red.jpg" alt="Logo Shodo" />
         <span class="watermark-title">Crafting sustainable code we do</span>
     </aside>
 </template>
diff --git a/example.md b/example.md
index b875b74..6108bfa 100644
--- a/example.md
+++ b/example.md
@@ -141,7 +141,7 @@ Is the color of blood, and because of this it has historically been associated w
 
 ```yaml
 layout: image-right
-image: styles/images/image-illustration-manifeste.png
+image: /image-illustration-manifeste.png
 ```
 
 ### A picture is worth a thousand words
@@ -283,7 +283,7 @@ console.log('Modified text')
 
 ```yaml
 layout: image
-image: styles/images/image-illustration-manifeste.png
+image: /image-illustration-manifeste.png
 ```
 
 Want big impact?
@@ -669,7 +669,7 @@ database "MySql" {
 ```yaml
 layout: screenshot
 layoutClass: laptop
-screenshot: styles/images/image-illustration-manifeste.png
+screenshot: /image-illustration-manifeste.png
 ```
 
 ::left::
@@ -685,7 +685,7 @@ Show and explain your web, app or software projects using these gadget templates
 ```yaml
 layout: screenshot
 layoutClass: mobile
-screenshot: styles/images/shodo.io-screenshot.png
+screenshot: /shodo.io-screenshot.png
 ```
 
 ::left::
diff --git a/layouts/image-left.vue b/layouts/image-left.vue
index e50efd1..dbdeab8 100644
--- a/layouts/image-left.vue
+++ b/layouts/image-left.vue
@@ -4,7 +4,7 @@
 ---
 ```yaml
 layout: image-left
-image: <img-path>
+image: /<img-path>
 (optional) backgroundSize: default "cover"
 ```
 <content>
diff --git a/layouts/image-right.vue b/layouts/image-right.vue
index ed9c795..c3fe037 100644
--- a/layouts/image-right.vue
+++ b/layouts/image-right.vue
@@ -4,7 +4,7 @@
 ---
 ```yaml
 layout: image-right
-image: <img-path>
+image: /<img-path>
 (optional) backgroundSize: default "cover"
 ```
 
diff --git a/layouts/image.vue b/layouts/image.vue
index daf26ec..8fc3147 100644
--- a/layouts/image.vue
+++ b/layouts/image.vue
@@ -4,7 +4,7 @@
 ---
 ```yaml
 layout: image
-image: <img-path>
+image: /<img-path>
 (optional) backgroundSize: default "cover"
 ```
 -->
diff --git a/layouts/screenshot.vue b/layouts/screenshot.vue
index 8902568..1aeedf5 100644
--- a/layouts/screenshot.vue
+++ b/layouts/screenshot.vue
@@ -110,7 +110,7 @@ const props = defineProps({
     }
 
     &::after {
-      background-image: url("styles/images/macbook-air-frame.png");
+      background-image: url("/macbook-air-frame.png");
       background-size: 100%;
       background-repeat: no-repeat;
       content: "";
@@ -130,7 +130,7 @@ const props = defineProps({
     }
 
     &::after {
-      background-image: url("styles/images/iphone-15-pro-max-frame.png");
+      background-image: url("/iphone-15-pro-max-frame.png");
       background-size: 56%;
       background-repeat: no-repeat;
       content: "";
diff --git a/styles/images/Path_Top2.svg b/public/Path_Top2.svg
similarity index 100%
rename from styles/images/Path_Top2.svg
rename to public/Path_Top2.svg
diff --git a/styles/images/Paths_1.svg b/public/Paths_1.svg
similarity index 100%
rename from styles/images/Paths_1.svg
rename to public/Paths_1.svg
diff --git a/styles/images/arrow-down.svg b/public/arrow-down.svg
similarity index 100%
rename from styles/images/arrow-down.svg
rename to public/arrow-down.svg
diff --git a/styles/images/arrow-up.svg b/public/arrow-up.svg
similarity index 100%
rename from styles/images/arrow-up.svg
rename to public/arrow-up.svg
diff --git a/styles/images/arrow-white.svg b/public/arrow-white.svg
similarity index 100%
rename from styles/images/arrow-white.svg
rename to public/arrow-white.svg
diff --git a/styles/images/arrow.svg b/public/arrow.svg
similarity index 100%
rename from styles/images/arrow.svg
rename to public/arrow.svg
diff --git a/styles/images/bg-home.svg b/public/bg-home.svg
similarity index 100%
rename from styles/images/bg-home.svg
rename to public/bg-home.svg
diff --git a/styles/images/Path_Top1-dark-mode.svg b/public/brush-stroke-dark-mode.svg
similarity index 100%
rename from styles/images/Path_Top1-dark-mode.svg
rename to public/brush-stroke-dark-mode.svg
diff --git a/styles/images/Path_Top1-light-mode.svg b/public/brush-stroke-light-mode.svg
similarity index 100%
rename from styles/images/Path_Top1-light-mode.svg
rename to public/brush-stroke-light-mode.svg
diff --git a/styles/images/image-illustration-manifeste.png b/public/image-illustration-manifeste.png
similarity index 100%
rename from styles/images/image-illustration-manifeste.png
rename to public/image-illustration-manifeste.png
diff --git a/styles/images/iphone-15-pro-max-frame.png b/public/iphone-15-pro-max-frame.png
similarity index 100%
rename from styles/images/iphone-15-pro-max-frame.png
rename to public/iphone-15-pro-max-frame.png
diff --git a/styles/images/logo-footer.svg b/public/logo-footer.svg
similarity index 100%
rename from styles/images/logo-footer.svg
rename to public/logo-footer.svg
diff --git a/styles/images/logo-red.jpg b/public/logo-red.jpg
similarity index 100%
rename from styles/images/logo-red.jpg
rename to public/logo-red.jpg
diff --git a/styles/images/long-arrow.svg b/public/long-arrow.svg
similarity index 100%
rename from styles/images/long-arrow.svg
rename to public/long-arrow.svg
diff --git a/styles/images/macbook-air-frame.png b/public/macbook-air-frame.png
similarity index 100%
rename from styles/images/macbook-air-frame.png
rename to public/macbook-air-frame.png
diff --git a/styles/images/shodo.io-screenshot.png b/public/shodo.io-screenshot.png
similarity index 100%
rename from styles/images/shodo.io-screenshot.png
rename to public/shodo.io-screenshot.png
diff --git a/styles/layout.css b/styles/layout.css
index 738a5ad..a59571f 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -39,7 +39,7 @@ html.light .slidev-layout.intro::after,
 html.light .slidev-layout.section::after,
 html.light .slidev-layout.quote::after,
 html.light .slidev-layout.end::after {
-  background: url("images/Path_Top1-light-mode.svg");
+  background: url("/brush-stroke-light-mode.svg");
 }
 
 html.dark .slidev-layout.cover::after,
@@ -47,7 +47,7 @@ html.dark .slidev-layout.intro::after,
 html.dark .slidev-layout.section::after,
 html.dark .slidev-layout.quote::after,
 html.dark .slidev-layout.end::after {
-  background: url("images/Path_Top1-dark-mode.svg");
+  background: url("/brush-stroke-dark-mode.svg");
 }
 
 .slidev-layout.cover::after,
@@ -156,7 +156,7 @@ ul li {
   width: 48px;
 
   &::before {
-    content: url("styles/images/arrow.svg");
+    content: url("/arrow.svg");
     height: 24px;
     left: 12px;
     position: absolute;