mirror of https://gitlab.com/curben/blog
feat(img): drop Cloudinary
- move site assets to gitlab - update path name
This commit is contained in:
parent
82470cb0e3
commit
c919e44572
|
@ -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,
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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.
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue