fix(imagedelivery): relative path image inlining

resolved #147
thematters · Aug 26, 2023 · 9e85818 · 9e85818
1 parent 814c2c8
commit 9e85818
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 28 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@matters/ipns-site-generator",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "IPNS site generator for matters.town",
   "author": "https://github.com/thematters <tech@matters.town>",
   "homepage": "https://github.com/matters-ipns-site-generator",

diff --git a/src/__tests__/__snapshots__/makeArticlePage.test.js.snap b/src/__tests__/__snapshots__/makeArticlePage.test.js.snap
@@ -16,7 +16,7 @@ Array [
 <meta name=\\"twitter:title\\" content=\\"Excepteur in consequat mollit consectetur.\\">
 <meta name=\\"twitter:description\\" content=\\"Aliquip reprehenderit elit nulla commodo sit. Aute deserunt quis cupidatat ea quis. Adipisicing magna tempor esse ea anim. Veniam aliquip laborum aliquip est laborum irure duis irure adipisicing dolore laboris in irure. Non sunt esse cillum consequat. Cupidatat qui ex fugiat ullamco cupidatat eu eu eu labore excepteur. Tempor tempor mollit nulla qui Lorem aute consectetur sint sint. Nostrud cupidatat ullamco ea elit in voluptate do mollit veniam.\\">
 <meta name=\\"twitter:image\\" content=\\"https://assets.matters.news/processed/1080w/profileCover/aa57a1ce-8926-4512-81d8-462f68fa3917.webp\\" />
-<meta name=\\"keywords\\" content=\\"Matters,matters.news,tag1,tag2,tag3\\" />
+<meta name=\\"keywords\\" content=\\"Matters,matters.town,tag1,tag2,tag3\\" />
 
 
 <link rel=\\"alternate\\" type=\\"application/atom+xml\\" href=\\"../rss.xml\\" data-link-type=\\"rss-xml\\" />
@@ -566,7 +566,7 @@ article li {
   <h1 itemprop=\\"headline\\">Excepteur in consequat mollit consectetur.</h1>
 
   <section class=\\"byline\\" itemprops=\\"provider\\" itemscope itemtype=\\"http://schema.org/Organization\\">
-  <a href=\\"https://matters.news/@Anim\\" target=\\"_blank\\">
+  <a href=\\"https://matters.town/@Anim\\" target=\\"_blank\\">
     Excepteur Non
   </a>
   &nbsp;
@@ -576,7 +576,7 @@ article li {
   
 
   &nbsp;from&nbsp;
-  <a href=\\"https://matters.news\\" target=\\"_blank\\">
+  <a href=\\"https://matters.town\\" target=\\"_blank\\">
     Matters
   </a>
 </section>
@@ -592,7 +592,7 @@ article li {
 
       <article class=\\"\\" itemprop=\\"articleBody\\">
   <figure class=\\"image\\">
-    <img src=\\"./aa57a1ce-8926-4512-81d8-462f68fa3917.webp\\" data-asset-id=\\"aa57a1ce-8926-4512-81d8-462f68fa3917\\">
+    <img src=\\"./82cb20da-xxxxx4a73-xxxx3994.jpeg\\">
     <figcaption><span>Reprehenderit proident sit consectetur id consequat officia.</span></figcaption>
   </figure>
 
@@ -785,7 +785,7 @@ Array [
 <meta name=\\"twitter:title\\" content=\\"Excepteur in consequat mollit consectetur.\\">
 <meta name=\\"twitter:description\\" content=\\"Aliquip reprehenderit elit nulla commodo sit. Aute deserunt quis cupidatat ea quis. Adipisicing magna tempor esse ea anim. Veniam aliquip laborum aliquip est laborum irure duis irure adipisicing dolore laboris in irure. Non sunt esse cillum consequat. Cupidatat qui ex fugiat ullamco cupidatat eu eu eu labore excepteur. Tempor tempor mollit nulla qui Lorem aute consectetur sint sint. Nostrud cupidatat ullamco ea elit in voluptate do mollit veniam.\\">
 <meta name=\\"twitter:image\\" content=\\"https://assets.matters.news/processed/1080w/profileCover/aa57a1ce-8926-4512-81d8-462f68fa3917.webp\\" />
-<meta name=\\"keywords\\" content=\\"Matters,matters.news,tag1,tag2,tag3\\" />
+<meta name=\\"keywords\\" content=\\"Matters,matters.town,tag1,tag2,tag3\\" />
 
 
 <link rel=\\"alternate\\" type=\\"application/atom+xml\\" href=\\"../rss.xml\\" data-link-type=\\"rss-xml\\" />
@@ -1333,7 +1333,7 @@ article li {
   <h1 itemprop=\\"headline\\">Excepteur in consequat mollit consectetur.</h1>
 
   <section class=\\"byline\\" itemprops=\\"provider\\" itemscope itemtype=\\"http://schema.org/Organization\\">
-  <a href=\\"https://matters.news/@Anim\\" target=\\"_blank\\">
+  <a href=\\"https://matters.town/@Anim\\" target=\\"_blank\\">
     Excepteur Non
   </a>
   &nbsp;
@@ -1343,7 +1343,7 @@ article li {
   
 
   &nbsp;from&nbsp;
-  <a href=\\"https://matters.news\\" target=\\"_blank\\">
+  <a href=\\"https://matters.town\\" target=\\"_blank\\">
     Matters
   </a>
 </section>
@@ -1359,7 +1359,7 @@ article li {
 
       <article class=\\"\\" itemprop=\\"articleBody\\">
   <figure class=\\"image\\">
-    <img src=\\"./aa57a1ce-8926-4512-81d8-462f68fa3917.webp\\" data-asset-id=\\"aa57a1ce-8926-4512-81d8-462f68fa3917\\">
+    <img src=\\"./82cb20da-xxxxx4a73-xxxx3994.jpeg\\">
     <figcaption><span>Reprehenderit proident sit consectetur id consequat officia.</span></figcaption>
   </figure>
 
@@ -1552,7 +1552,7 @@ Array [
 <meta name=\\"twitter:title\\" content=\\"Excepteur in consequat mollit consectetur.\\">
 <meta name=\\"twitter:description\\" content=\\"Aliquip reprehenderit elit nulla commodo sit. Aute deserunt quis cupidatat ea quis. Adipisicing magna tempor esse ea anim. Veniam aliquip laborum aliquip est laborum irure duis irure adipisicing dolore laboris in irure. Non sunt esse cillum consequat. Cupidatat qui ex fugiat ullamco cupidatat eu eu eu labore excepteur. Tempor tempor mollit nulla qui Lorem aute consectetur sint sint. Nostrud cupidatat ullamco ea elit in voluptate do mollit veniam.\\">
 <meta name=\\"twitter:image\\" content=\\"https://assets.matters.news/processed/1080w/profileCover/aa57a1ce-8926-4512-81d8-462f68fa3917.webp\\" />
-<meta name=\\"keywords\\" content=\\"Matters,matters.news,tag1,tag2,tag3\\" />
+<meta name=\\"keywords\\" content=\\"Matters,matters.town,tag1,tag2,tag3\\" />
 
 
 <link rel=\\"alternate\\" type=\\"application/atom+xml\\" href=\\"../rss.xml\\" data-link-type=\\"rss-xml\\" />
@@ -2100,7 +2100,7 @@ article li {
   <h1 itemprop=\\"headline\\">Excepteur in consequat mollit consectetur.</h1>
 
   <section class=\\"byline\\" itemprops=\\"provider\\" itemscope itemtype=\\"http://schema.org/Organization\\">
-  <a href=\\"https://matters.news/@Anim\\" target=\\"_blank\\">
+  <a href=\\"https://matters.town/@Anim\\" target=\\"_blank\\">
     Excepteur Non
   </a>
   &nbsp;
@@ -2110,7 +2110,7 @@ article li {
   
 
   &nbsp;from&nbsp;
-  <a href=\\"https://matters.news\\" target=\\"_blank\\">
+  <a href=\\"https://matters.town\\" target=\\"_blank\\">
     Matters
   </a>
 </section>
@@ -2126,7 +2126,7 @@ article li {
 
       <article class=\\"\\" itemprop=\\"articleBody\\">
   <figure class=\\"image\\">
-    <img src=\\"https://assets.matters.news/processed/1080w/profileCover/aa57a1ce-8926-4512-81d8-462f68fa3917.webp\\" data-asset-id=\\"aa57a1ce-8926-4512-81d8-462f68fa3917\\">
+    <img src=\\"https://imagedelivery.net/kDRCxxxx-pYA/prod/embed/82cb20da-xxxxx4a73-xxxx3994.jpeg/public\\">
     <figcaption><span>Reprehenderit proident sit consectetur id consequat officia.</span></figcaption>
   </figure>
 

diff --git a/src/__tests__/__snapshots__/makeHomepage.test.js.snap b/src/__tests__/__snapshots__/makeHomepage.test.js.snap
diff --git a/src/__tests__/makeArticlePage.test.ts b/src/__tests__/makeArticlePage.test.ts
@@ -6,7 +6,7 @@ import { deserializeHtmlBundle } from './utils'
 jest.mock('isomorphic-fetch')
 const mockedFetch = fetch as jest.Mock
 
-const MOCK_ARTICLE_PAGE_DATA = MOCK_ARTICLE_PAGE('matters.news')
+const MOCK_ARTICLE_PAGE_DATA = MOCK_ARTICLE_PAGE('matters.town')
 
 describe('makeArticlePage', () => {
   test('can generate basic HTML bundle', async () => {

diff --git a/src/makeArticlePage/getAsset.ts b/src/makeArticlePage/getAsset.ts
@@ -35,9 +35,9 @@ export default async ({
     const parsedUrl = new URL(fullUrl)
     if (
       Array.isArray(onlyDomains) &&
-      onlyDomains.some((d) => parsedUrl.hostname.endsWith(domain))
+      onlyDomains.some((d) => parsedUrl.hostname.endsWith(d))
     ) {
-      // to next
+      // to next fetch'ing
     } else if (!parsedUrl.hostname.endsWith(domain)) {
       // skip assets from other domain
       return

diff --git a/src/makeArticlePage/index.ts b/src/makeArticlePage/index.ts
@@ -30,9 +30,15 @@ export const makeArticlePage = async (data: MakeArticlePageData) => {
       if ('tagName' in element) {
         tagName = element.tagName
       }
+
+      // e.g. https://imagedelivery.net/kDRCxxx-pYA/prod/embed/82cb20da-9fe0-4a73-bb33-b1d0ef353994.jpeg/public
+      const isImageDelivery = elementSrc.startsWith('https://imagedelivery.net')
       // assuming it's http url
       const assetPath =
-        elementSrc.split('/').pop() || `${index.toString()}-${tagName}`
+        (isImageDelivery
+          ? elementSrc.split('/').splice(-2).shift() // get the 2nd last section of pathname
+          : elementSrc.split('/').pop()) || // get the last section of pathname
+        `${index}-${tagName}`
 
       const updateSrc = () => $(element).attr('src', `./${assetPath}`)
 

diff --git a/src/render/mock.ts b/src/render/mock.ts
@@ -15,7 +15,7 @@ const MOCK_ARTICLE = (siteDomain = 'matters.town') => ({
   sourceUri: `https://${siteDomain}/@${MOCK_AUTHOR.userName}/1-slug-Qmc919SaZGj1yeDCLHx7KMY7WMzy1PF6UjixuapcG1bfAB`,
   content: `
   <figure class="image">
-    <img src="https://assets.matters.news/processed/1080w/profileCover/aa57a1ce-8926-4512-81d8-462f68fa3917.webp" data-asset-id="aa57a1ce-8926-4512-81d8-462f68fa3917">
+    <img src="https://imagedelivery.net/kDRCxxxx-pYA/prod/embed/82cb20da-xxxxx4a73-xxxx3994.jpeg/public">
     <figcaption><span>Reprehenderit proident sit consectetur id consequat officia.</span></figcaption>
   </figure>