feat(img): drop Cloudinary

- move site assets to gitlab
- update path name
This commit is contained in:
curben 2019-09-03 20:26:50 +01:00
parent 82470cb0e3
commit c919e44572
No known key found for this signature in database
GPG Key ID: 5D9DB57A25D34EE3
5 changed files with 12 additions and 23 deletions

View File

@ -3,34 +3,27 @@
/* /*
* Put {% cloudinary 'folder/filename.jpg' 'description' %} in your post. * Put {% cloudinary 'folder/filename.jpg' 'description' %} in your post.
* Change the username in 'user' variable
* More info:
* https://cloudinary.com/blog/responsive_images_with_srcset_sizes_and_cloudinary
*/ */
hexo.extend.tag.register('cloudinary', (args) => { hexo.extend.tag.register('cloudinary', (args) => {
const user = 'curben'
let [fileName, alt] = args let [fileName, alt] = args
if (!alt) alt = '' if (!alt) alt = ''
let modern = '' let modern = fileName
let legacy = '' let legacy = fileName
const link = '/img/' + user const link = '/img/'
if (fileName.endsWith('.png')) { if (fileName.endsWith('.png') || fileName.endsWith('.jpg')) {
modern = fileName.replace(/\.png$/, '.webp') modern = fileName.concat('?format=webp')
legacy = fileName
} else if (fileName.endsWith('.webp')) { } else if (fileName.endsWith('.webp')) {
// Statically doesn't support animated webp // Statically has yet to support animated webp
// https://github.com/marsble/statically/issues/36 // https://github.com/marsble/statically/issues/36
// modern = fileName // modern = fileName.concat('?auto_format=false')
modern = fileName.replace(/\.webp$/, '.gif') modern = fileName.replace(/\.webp$/, '.gif')
legacy = fileName.replace(/\.webp$/, '.gif') legacy = fileName.replace(/\.webp$/, '.gif')
} else {
legacy = fileName
} }
const modernLink = link + '/' + modern + '?auto_format=false' const modernLink = link + modern
const legacyLink = link + '/' + legacy + '?auto_format=false' const legacyLink = link + legacy
const img = `<img const img = `<img
srcset="${legacyLink}&w=320 320w, srcset="${legacyLink}&w=320 320w,

View File

@ -23,8 +23,6 @@ When you try to login to AliExpress, the login box is just blank.
In the new design, the loading wheel just keeps spinning. In the new design, the loading wheel just keeps spinning.
{% cloudinary '20190228/invalid-login.png' 'Aliexpress login pop-up keeps loading' %} {% cloudinary '20190228/invalid-login.png' 'Aliexpress login pop-up keeps loading' %}
<br />
{% cloudinary '20190228/invalid-login-ani.webp' 'Screenrecord of aliexpress troubled login' %}
Upon inspection on the blank element (right click on the blank login and select `Inspect Element`), the login box is an iframe of `https://passport.aliexpress.com`. From the Web Console (`Ctrl + Shift + K`), the following error message suggested it's caused by [X-Frame-Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options). Upon inspection on the blank element (right click on the blank login and select `Inspect Element`), the login box is an iframe of `https://passport.aliexpress.com`. From the Web Console (`Ctrl + Shift + K`), the following error message suggested it's caused by [X-Frame-Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options).
@ -43,8 +41,6 @@ From the Network inspection (`Ctrl + Shift + E`), `https://passport.aliexpress.c
To use the old login page, mouse-over on the **Account** link at the top right corner and click on **My Orders**. It should redirects to `https://login.aliexpress.com/...` To use the old login page, mouse-over on the **Account** link at the top right corner and click on **My Orders**. It should redirects to `https://login.aliexpress.com/...`
{% cloudinary '20190228/my-orders.png' "Aliexpress 'My Orders' link" %} {% cloudinary '20190228/my-orders.png' "Aliexpress 'My Orders' link" %}
<br />
{% cloudinary '20190228/my-orders-ani.webp' "Screenrecord of Aliexpress 'My Orders' link" %}
## Reset XOriginPolicy ## Reset XOriginPolicy

View File

@ -43,7 +43,7 @@ We also can open a new container tab by long-pressing the plus (+) button, next
{% cloudinary '20190812/containers-tabs.png' "New Container Tab" %} {% cloudinary '20190812/containers-tabs.png' "New Container Tab" %}
{% cloudinary '20190812/containers-webp.webp' "Container Tab in action" %} {% cloudinary '20190812/containers-tabs.webp' "Container Tab in action" %}
## Facebook Container ## Facebook Container

View File

@ -23,7 +23,7 @@ To resolve it, add the following CSS rule to the DR's setting via **Dev tools**.
{% cloudinary '20190628/dark-reader-dev-tools.png' 'Dev tools of Dark Reader' %} {% cloudinary '20190628/dark-reader-dev-tools.png' 'Dev tools of Dark Reader' %}
{% cloudinary '20190628/dev-tools-video.webp' 'A video of Dev Tools' %} {% cloudinary '20190628/dev-tools-demo.webp' 'A video of Dev Tools' %}
After adding the CSS, you should be able to see the whole image. But the fix is not perfect, the image sticks to the top rather than centred. After adding the CSS, you should be able to see the whole image. But the fix is not perfect, the image sticks to the top rather than centred.

View File

@ -3,4 +3,4 @@
# Reverse proxy to cdn # Reverse proxy to cdn
/libs/* https://cdn.statically.io/libs/:splat 200 /libs/* https://cdn.statically.io/libs/:splat 200
/img/* https://cdn.statically.io/img/res.cloudinary.com/:splat 200 /img/* https://cdn.statically.io/img/gitlab.com/curben/blog/raw/site/:splat 200