♻️ image paths

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;

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>

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?
@@ -316,19 +316,16 @@ layout: three-rows
 ```
 
 ::top::
-
 <strong>89,526,124$</strong>
 
 That’s a lot of money
 
 ::center::
-
 <strong>185,244 users</strong>
 
 And a lot of users
 
 ::bottom::
-
 <strong>100%</strong>
 
 Total success!
@@ -669,7 +666,7 @@ database "MySql" {
 ```yaml
 layout: screenshot
 layoutClass: laptop
-screenshot: styles/images/image-illustration-manifeste.png
+screenshot: image-illustration-manifeste.png
 ```
 
 ::left::
@@ -685,7 +682,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::

layouts/image-left.vue

@@ -4,7 +4,7 @@
 ---
 ```yaml
 layout: image-left
-image: <img-path>
+image: /<img-path>
 (optional) backgroundSize: default "cover"
 ```
 <content>

layouts/image-right.vue

@@ -4,7 +4,7 @@
 ---
 ```yaml
 layout: image-right
-image: <img-path>
+image: /<img-path>
 (optional) backgroundSize: default "cover"
 ```
 

layouts/image.vue

@@ -4,7 +4,7 @@
 ---
 ```yaml
 layout: image
-image: <img-path>
+image: /<img-path>
 (optional) backgroundSize: default "cover"
 ```
 -->

layouts/screenshot.vue

@@ -4,7 +4,8 @@
 ---
 ```yaml
 layout: screenshot
-(optional) layoutClass: laptop or mobile
+(optional) layoutClass: "laptop" or "mobile"
+screenshot: <image local name> | <remote url>
 ```
 
 ::left::
@@ -110,7 +111,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 +131,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: "";

layouts/three-rows.vue

@@ -8,14 +8,17 @@ layout: three-rows
 
 ::top::
 <strong>Top</strong>
+
 This shows on the top
 
 ::center::
 <strong>Center</strong>
+
 This shows on the center
 
 ::bottom::
 <strong>Bottom</strong>
+
 This shows on the bottom
 ```
 -->

styles/layout.css

@@ -39,15 +39,15 @@ 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,
 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;