Merge remote-tracking branch 'origin/main'

.gitignore

@@ -3,7 +3,6 @@ dist/
 # generated types
 .astro/
 .idea/
-.vscode/
 
 # dependencies
 node_modules/

.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  // Enable pasting files into a Markdown editor to create Markdown links.
+  "markdown.editor.filePaste.enabled": true,
+
+  // Copy pasted media files into a Markdown editor to the workspace.
+  "markdown.editor.filePaste.copyIntoWorkspace": "mediaFiles",
+
+  // Enable dropping files into a Markdown editor to create Markdown links.
+  "markdown.editor.drop.enabled": true,
+
+  // Copy dropped media files into a Markdown editor to the workspace.
+  "markdown.editor.drop.copyIntoWorkspace": "mediaFiles",
+
+  // Define the destination folder for copied files.
+  "markdown.copyFiles.destination": {
+    "/src/content/**/*": "/src/images/content/${documentBaseName}/"
+  },
+}

README.md

@@ -26,7 +26,7 @@ ScrewFast is an open-source template designed for quick and efficient web projec
       - [Footer Links](#footer-links)
       - [Social Media Links](#social-media-links)
   * [Integrations and Enhancements](#integrations-and-enhancements)
-  * + [Starlight Documentation](#starlight-documentation)
+    + [Starlight Documentation](#starlight-documentation)
     + [Lenis for Smooth Scrolling](#lenis-for-smooth-scrolling)
     + [GSAP Integration](#gsap-integration)
     + [Hiding Scrollbar](#hiding-scrollbar)
@@ -38,6 +38,8 @@ ScrewFast is an open-source template designed for quick and efficient web projec
       - [Structured Data and Rich Snippets](#structured-data-and-rich-snippets)
       - [Using Astro SEO Integrations](#using-astro-seo-integrations)
     + [Robots.txt](#robotstxt)
+    + [Markdown/MDX](#markdownmdx)
+      - [Image Integration](#image-integration)
     + [Astro Integrations](#astro-integrations)
     + [Flexibility with Integrations](#flexibility-with-integrations)
   * [Tools and Technologies](#tools-and-technologies)
@@ -563,6 +565,25 @@ export const GET: APIRoute = () => {
   });
 };
 ```
+### Markdown/MDX
+
+#### Image Integration
+
+The addition of `.vscode/settings.json` file in the root directory facilitates image integration directly into content collections within Markdown editors. This feature enables effortless creation of Markdown links with media files and seamless copying into the workspace.
+
+##### Usage
+- **Paste/Drop Images**: Activate by pressing <kbd>Shift</kbd> while dropping the file.
+- **Markdown Link**: Image is linked using Markdown syntax `(![alt text](../../images/content/<path>))`.
+- **File Handling**: Images are organized in `src/images/content/<path>`.
+
+##### Example
+Pasting `getting-started.png` into `src/content/post-1.md` results in:
+
+- Adding `![alt text](../../images/content/post-1/getting-started.png)` to `post-1.md`.
+- Moving the image file to `src/images/content/post-1/getting-started.png`.
+
+> [!NOTE]
+> Remember to press <kbd>Shift</kbd> while dropping images.
 
 ### Astro Integrations
 

src/components/BrandLogo.astro

@@ -1,12 +1,8 @@
----
-const { width } = Astro.props;
-
-interface Props {
-  width: string;
-}
----
-
-<svg class=`h-auto ${width}` viewBox="0 0 521 226" fill="none">
+<svg
+  {...Astro.props}
+  viewBox="0 0 521 226"
+  fill="none"
+>
   <rect
     width="78.937"
     height="18.485"

src/components/sections/FooterSection.astro

@@ -25,7 +25,7 @@ const crafted: string = Astro.currentLocale === "fr" ? "Fabriqué par" : "Crafte
     <div class="grid grid-cols-2 gap-6 md:grid-cols-4 lg:grid-cols-5">
       <div class="col-span-full lg:col-span-1">
         <!-- Brand Logo -->
-        <BrandLogo width="w-32" />
+        <BrandLogo class="h-auto w-32" />
       </div>
       <!-- An array of links for Product and Company sections -->
       {

src/components/sections/Navbar.astro

@@ -29,7 +29,7 @@ const homeUrl = Astro.currentLocale === "fr" ? "/fr" : "/";
         href={homeUrl}
         aria-label="Brand"
       >
-        <BrandLogo width="w-24" />
+        <BrandLogo class="h-auto w-24" />
       </a>
       <!-- Collapse toggle for smaller screens -->
       <div class="ml-auto mr-5 md:hidden">