[apisix-website] branch master updated: feat: use webp blog images source (#1284)

[ju...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 3fbd5aca0d0 feat: use webp blog images source (#1284)
3fbd5aca0d0 is described below

commit 3fbd5aca0d0eba96bc258b5e8f1c60ed1abb927d
Author: Young <is...@outlook.com>
AuthorDate: Fri Aug 12 09:08:34 2022 +0800

    feat: use webp blog images source (#1284)
---
 blog/package.json                     |  1 +
 blog/src/theme/BlogPostPage/index.tsx | 50 ++++++++++++++++++++++++++++++-----
 yarn.lock                             |  5 ++++
 3 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/blog/package.json b/blog/package.json
index 0f5a29e8089..acd045020f4 100644
--- a/blog/package.json
+++ b/blog/package.json
@@ -53,6 +53,7 @@
     "react-use": "^17.4.0",
     "reading-time": "^1.5.0",
     "sass": "^1.53.0",
+    "srcset": "^5.0.0",
     "styled-components": "^5.3.3",
     "three": "^0.131.3",
     "video.js": "^7.19.2"
diff --git a/blog/src/theme/BlogPostPage/index.tsx b/blog/src/theme/BlogPostPage/index.tsx
index 1557f38b8cf..aaeeaebc0ba 100644
--- a/blog/src/theme/BlogPostPage/index.tsx
+++ b/blog/src/theme/BlogPostPage/index.tsx
@@ -17,16 +17,54 @@ import type { ImageProps } from 'rc-image';
 import Image from 'rc-image';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { MDXProvider } from '@mdx-js/react';
-import { LazyLoadComponent } from 'react-lazy-load-image-component';
+import { parseSrcset, stringifySrcset } from 'srcset';
 import BlogPostPaginator from '../BlogPostPaginator';
 
+const urlParse = (url: string) => {
+  const urlParseArr = url.split('/');
+  const name = urlParseArr.at(-1) as string;
+  return {
+    host: urlParseArr.slice(0, 3).join('/'),
+    folderPath: urlParseArr.slice(3, -1).join('/'),
+    name,
+    ext: name.split('.').at(-1) as string,
+  };
+};
+
 const components = {
   ...MDXComponents,
-  img: (props: ImageProps) => (
-    <LazyLoadComponent>
-      <Image {...props} preview={{ mask: 'Click to Preview' }} />
-    </LazyLoadComponent>
-  ),
+  img: (props: ImageProps) => {
+    const { src, srcSet } = props;
+    const isFromCDN = src?.includes('static.apis');
+    let otherProps = {};
+
+    if (isFromCDN && src) {
+      const u = urlParse(src);
+      const webpSrc = `${u.host}/apisix-webp/${u.folderPath}/${u.name.replace(u.ext, 'webp')}`;
+      otherProps = {
+        src: webpSrc,
+        type: 'image/webp',
+        srcSet: stringifySrcset([
+          ...parseSrcset(srcSet || ''),
+          {
+            url: webpSrc,
+          }, {
+            url: src,
+          },
+        ]),
+        placeholder: <Image
+          {...props}
+          src={`${u.host}/apisix-thumbnail/${u.folderPath}/${u.name.replace(u.ext, 'webp')}`}
+          srcSet={`${u.host}/apisix-thumbnail/${u.folderPath}/${u.name}`}
+          preview={false}
+        />,
+      };
+    }
+
+    return (
+      <Image {...props} {...otherProps} preview={{ mask: 'Click to Preview' }} loading="lazy" />
+    );
+  },
 };
 
 const BlogPostPage = (props: Props): JSX.Element => {
diff --git a/yarn.lock b/yarn.lock
index 6d59973c8be..a4850b5ff96 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10971,6 +10971,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
+srcset@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/srcset/-/srcset-5.0.0.tgz#9df6c3961b5b44a02532ce6ae4544832609e2e3f"
+  integrity sha512-SqEZaAEhe0A6ETEa9O1IhSPC7MdvehZtCnTR0AftXk3QhY2UNgb+NApFOUPZILXk/YTDfFxMTNJOBpzrJsEdIA==
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"