From d7e7f5b2b1437ce64dddcae2593240387ee76a45 Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <en3m@ya.ru>
Date: Sun, 11 Sep 2022 20:07:23 +0300
Subject: [PATCH] do not add `placeholder="blur"` on `.svg` static images
 (#832)

---
 .changeset/large-lemons-explode.md            |  5 +++++
 .../docs/advanced/future-image.en-US.mdx      |  5 ++++-
 examples/swr-site/theme.config.tsx            | 22 +++++++++++--------
 .../nextra/src/mdx-plugins/static-image.ts    |  6 ++---
 4 files changed, 25 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/large-lemons-explode.md

diff --git a/.changeset/large-lemons-explode.md b/.changeset/large-lemons-explode.md
new file mode 100644
index 0000000000..ff5553ad06
--- /dev/null
+++ b/.changeset/large-lemons-explode.md
@@ -0,0 +1,5 @@
+---
+'nextra': patch
+---
+
+do not add `placeholder="blur"` on `.svg` static images
diff --git a/examples/swr-site/pages/docs/advanced/future-image.en-US.mdx b/examples/swr-site/pages/docs/advanced/future-image.en-US.mdx
index 0b209de411..98c5b1022c 100644
--- a/examples/swr-site/pages/docs/advanced/future-image.en-US.mdx
+++ b/examples/swr-site/pages/docs/advanced/future-image.en-US.mdx
@@ -1,3 +1,6 @@
-![](../../../public/favicon/android-chrome-512x512.png)
+![](/swr-logo.svg)
 
 ![](/favicon/android-chrome-512x512.png)
+
+![](../../../public/favicon/android-chrome-512x512.png)
+
diff --git a/examples/swr-site/theme.config.tsx b/examples/swr-site/theme.config.tsx
index 71e76585d3..ebc5a37d7a 100644
--- a/examples/swr-site/theme.config.tsx
+++ b/examples/swr-site/theme.config.tsx
@@ -1,9 +1,10 @@
 /* eslint sort-keys: error */
 import { useRouter } from "next/router";
+import { ComponentProps, ReactElement } from "react";
 import { DocsThemeConfig, useConfig } from "nextra-theme-docs";
 
-const Logo = ({ height }) => (
-  <svg height={height} viewBox="0 0 291 69" fill="none">
+const Logo = (props: ComponentProps<"svg">): ReactElement => (
+  <svg viewBox="0 0 291 69" fill="none" {...props}>
     <path
       d="M0 36.53c.07 17.6 14.4 32.01 32.01 32.01a32.05 32.05 0 0032.01-32V32a13.2 13.2 0 0123.4-8.31h20.7A32.07 32.07 0 0077.2 0a32.05 32.05 0 00-32 32.01v4.52A13.2 13.2 0 0132 49.71a13.2 13.2 0 01-13.18-13.18 3.77 3.77 0 00-3.77-3.77H3.76A3.77 3.77 0 000 36.53zM122.49 68.54a32.14 32.14 0 01-30.89-23.7h20.67a13.16 13.16 0 0023.4-8.3V32A32.05 32.05 0 01167.68 0c17.43 0 31.64 14 32 31.33l.1 5.2a13.2 13.2 0 0023.4 8.31h20.7a32.07 32.07 0 01-30.91 23.7c-17.61 0-31.94-14.42-32.01-32l-.1-4.7v-.2a13.2 13.2 0 00-13.18-12.81 13.2 13.2 0 00-13.18 13.18v4.52a32.05 32.05 0 01-32.01 32.01zM247.94 23.7a13.16 13.16 0 0123.4 8.31 3.77 3.77 0 003.77 3.77h11.3a3.77 3.77 0 003.76-3.77A32.05 32.05 0 00258.16 0a32.07 32.07 0 00-30.92 23.7h20.7z"
       fill="currentColor"
@@ -180,7 +181,7 @@ const config: DocsThemeConfig = {
     const { locale } = useRouter();
     return (
       <>
-        <Logo height={12} />
+        <Logo className="h-3" />
         <span
           className="ltr:ml-2 rtl:mr-2 font-extrabold hidden md:inline select-none"
           title={"SWR: " + (TITLE[locale] || "")}
@@ -198,12 +199,15 @@ const config: DocsThemeConfig = {
   },
   sidebar: {
     defaultMenuCollapsed: true,
-    titleComponent: ({ title }) => (
-      <div className="flex items-center gap-2">
-        <Logo height={6} />
-        {title}
-      </div>
-    ),
+    titleComponent: ({ title, type }) =>
+      type === "separator" ? (
+        <div className="flex items-center gap-2">
+          <Logo className="h-1.5 shrink-0" />
+          {title}
+        </div>
+      ) : (
+        <>{title}</>
+      ),
   },
   titleSuffix() {
     const { locale } = useRouter();
diff --git a/packages/nextra/src/mdx-plugins/static-image.ts b/packages/nextra/src/mdx-plugins/static-image.ts
index 8bd0a4463a..0e3d84123f 100644
--- a/packages/nextra/src/mdx-plugins/static-image.ts
+++ b/packages/nextra/src/mdx-plugins/static-image.ts
@@ -12,6 +12,7 @@ const getASTNodeImport = (name: string, from: string) => ({
   data: {
     estree: {
       type: 'Program',
+      sourceType: 'module',
       body: [
         {
           type: 'ImportDeclaration',
@@ -27,8 +28,7 @@ const getASTNodeImport = (name: string, from: string) => ({
             raw: `"${from}"`
           }
         }
-      ],
-      sourceType: 'module'
+      ]
     }
   }
 })
@@ -82,7 +82,7 @@ export const remarkStaticImage: Plugin<
             name: 'alt',
             value: node.alt
           },
-          {
+          !url.endsWith('.svg') && {
             type: 'mdxJsxAttribute',
             name: 'placeholder',
             value: 'blur'