refactor: serve images on server

parksb · May 21, 2022 · d2ec93a · d2ec93a
1 parent e07a191
commit d2ec93a
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 10 deletions.
diff --git a/_articles/lorem-ipsum-0.md b/_articles/lorem-ipsum-0.md
@@ -12,7 +12,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet arcu a dia
 
 Pellentesque eu erat vitae metus dignissim tempus. Duis malesuada magna eu risus fermentum consectetur. Sed in ante consequat urna ultricies dapibus ac non diam.[^1]
 
-![dummy image](https://dummyimage.com/900x700/efefef/000000)
+![dummy image](/_images/800x600.png)
 
 Suspendisse porttitor pellentesque ante, dapibus ullamcorper risus commodo eu. Duis sapien mi, mollis vel odio nec, iaculis pharetra nunc. Aliquam quam nisi, cursus `pharetra` feugiat nec, tristique quis libero. Ut blandit sit amet lacus eget elementum. Fusce elit nisi, feugiat ornare commodo at, varius sed augue.
 

diff --git a/_articles/lorem-ipsum-1.md b/_articles/lorem-ipsum-1.md
@@ -12,7 +12,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet arcu a dia
 
 Pellentesque eu erat vitae metus dignissim tempus. Duis malesuada magna eu risus fermentum consectetur. Sed in ante consequat urna ultricies dapibus ac non diam.[^1]
 
-![dummy image](https://dummyimage.com/900x700/efefef/000000)
+![dummy image](/_images/800x600.png)
 
 Suspendisse porttitor pellentesque ante, dapibus ullamcorper risus commodo eu. Duis sapien mi, mollis vel odio nec, iaculis pharetra nunc. Aliquam quam nisi, cursus `pharetra` feugiat nec, tristique quis libero. Ut blandit sit amet lacus eget elementum. Fusce elit nisi, feugiat ornare commodo at, varius sed augue.
 

diff --git a/_articles/lorem-ipsum-2.md b/_articles/lorem-ipsum-2.md
@@ -12,7 +12,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet arcu a dia
 
 Pellentesque eu erat vitae metus dignissim tempus. Duis malesuada magna eu risus fermentum consectetur. Sed in ante consequat urna ultricies dapibus ac non diam.[^1]
 
-![dummy image](https://dummyimage.com/900x700/efefef/000000)
+![dummy image](/_images/800x600.png)
 
 Suspendisse porttitor pellentesque ante, dapibus ullamcorper risus commodo eu. Duis sapien mi, mollis vel odio nec, iaculis pharetra nunc. Aliquam quam nisi, cursus `pharetra` feugiat nec, tristique quis libero. Ut blandit sit amet lacus eget elementum. Fusce elit nisi, feugiat ornare commodo at, varius sed augue.
 

diff --git a/_images/800x600.png b/_images/800x600.png
diff --git a/_works/lorem-ipsum.md b/_works/lorem-ipsum.md
@@ -1,17 +1,17 @@
 ---
 title: "Lorem Ipsum"
 subtitle: "Sed sit amet arcu a diam tincidunt porta"
-thumbnail: "https://dummyimage.com/900x700/efefef/0000000"
+thumbnail: "/_images/800x600.png"
 ---
 
-![](https://dummyimage.com/900x700/efefef/000000)
+![dummy image](/_images/800x600.png)
 
-![](https://dummyimage.com/900x400/efefef/000000)
+![dummy image](/_images/800x600.png)
 
 _**Lorem Ipsum (2019)**_
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 Sed sit amet arcu a diam tincidunt porta.
 
-Fusce ut elit euismod massa convallis volutpat vitae et magna.
+Fusce ut elit euismod massa convallis volutpat vitae et magna.
diff --git a/app/styles/article.css b/app/styles/article.css
@@ -143,6 +143,7 @@
 #article-content-container img {
   max-width: 100%;
   margin-top: 10px;
+  height: auto;
 }
 
 #article-content-container ul,

diff --git a/services/ArticlePublisher.ts b/services/ArticlePublisher.ts
@@ -23,10 +23,10 @@ import Article from './classes/Article';
 import ArticleModel from './models/ArticleModel';
 
 class ArticlePublisher {
-  // A path of the directory containing the markdown article files.
+  // A path of the directory containing markdown article files.
   static ARTICLE_ORIGIN_PATH: string = path.join(__dirname, '../_articles');
 
-  // A path of the directory containing the HTML article files.
+  // A path of the directory containing HTML article files.
   static ARTICLE_DIST_PATH: string = path.join(__dirname, '../app/public/article');
 
   // A path of the article template file.
@@ -70,7 +70,10 @@ class ArticlePublisher {
         return '</details>\n';
       },
     })
-    .use(mdLazyImage, { decoding: true });
+    .use(mdLazyImage, {
+      decoding: true,
+      image_size: true,
+    });
 
   /**
    * Extracts content excluding front matter block.

diff --git a/tools/build.sh b/tools/build.sh
@@ -39,6 +39,8 @@ echo -e "> mkdir ${DIST}/styles\n"
 mkdir $DIST/styles
 echo -e "> mkdir ${DIST}/assets\n"
 mkdir $DIST/assets
+echo -e "> mkdir ${DIST}/_images\n"
+mkdir $DIST/_images
 
 echo -e "\n${GREEN}Copy files to distribution directory...${WHITE}"
 echo "> cp -r ./app/static/* ${DIST}/"
@@ -49,6 +51,8 @@ echo "> cp -r ./app/styles/* ${DIST}/styles/"
 cp -r ./app/styles/* $DIST/styles/
 echo "> cp -r ./app/assets/* ${DIST}/assets/"
 cp -r ./app/assets/* $DIST/assets/
+echo "> cp -r ./_images/* ${DIST}/_images/"
+cp -r ./_images/* $DIST/_images/
 
 echo -e "\n${GREEN}Minify css files...${WHITE}"
 cleancss --batch --batch-suffix '' $DIST/styles/*.css