perf: ⚡ Resized all images
This commit is contained in:
Keith Irwin
parent
bbe4693c5f
commit
3e4ad6893f
GPG Key ID:
DF773B3F4A88DA86
|
|
@ -1,11 +1,11 @@
|
|||
**Cinnamon** is a windows-like desktop environment with an applications menu, window buttons, and a panel. It sort of resembles Windows Vista, but the similarities end there. Cinnamon is very fast and customizable, and intuitive for anyone coming from a windows environment.
|
||||
|
||||
[](/assets/img/screenshots/cinnamon/5-2_desktop.png)
|
||||
{% image "/assets/img/screenshots/cinnamon/5-2_desktop.png", "A screenshot of Linux Mint with cinnamon desktop" %}
|
||||
|
||||
Software center:
|
||||
|
||||
[](/assets/img/screenshots/cinnamon/software-center.jpg)
|
||||
{% image "/assets/img/screenshots/xfce/software-center.jpg", "A screenshot of Linux Mint with Cinnamon software center" %}
|
||||
|
||||
System settings:
|
||||
|
||||
[](/assets/img/screenshots/cinnamon/settings.jpg)
|
||||
{% image "/assets/img/screenshots/cinnamon/settings.jpg", "A screenshot of Linux Mint with Cinnamon system settings" %}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
|
||||
> [More about Gnome DE >](https://www.gnome.org/)
|
||||
|
||||
[](/assets/img/screenshots/gnome/desktop.webp)
|
||||
{% image "/assets/img/screenshots/gnome/desktop.webp", "Screenshot of Gnome desktop" %}
|
||||
|
||||
Apps menu:
|
||||
|
||||
[](/assets/img/screenshots/gnome/apps.webp)
|
||||
{% image "/assets/img/screenshots/gnome/apps.webp", "Screenshot of Gnome apps page" %}
|
||||
|
||||
Notifications menu:
|
||||
|
||||
[](/assets/img/screenshots/gnome/notifications.webp)
|
||||
{% image "/assets/img/screenshots/gnome/notifications.webp", "Screenshot of Gnome notifications" %}
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@
|
|||
|
||||
> [More about KDE Plasma >](https://kde.org/plasma-desktop/)
|
||||
|
||||
[](/assets/img/screenshots/plasma/launcher.png)
|
||||
{% image "/assets/img/screenshots/plasma/launcher.png", "Screenshot of Plasma desktop" %}
|
||||
|
||||
[kdenlive](https://kdenlive.org/) video editor with dark theme:
|
||||
|
||||
[](/assets/img/screenshots/plasma/kdenlive.png)
|
||||
{% image "/assets/img/screenshots/plasma/kdenlive.png", "Screenshot of Plasma running kdenlive" %}
|
||||
|
||||
Lots of settings:
|
||||
|
||||
[](/assets/img/screenshots/plasma/systemsettings.png)
|
||||
{% image "/assets/img/screenshots/plasma/systemsettings.png", "Screenshot of KDE Plasma settings" %}
|
||||
|
||||
Widgets:
|
||||
|
||||
[](/assets/img/screenshots/plasma/widgets.png)
|
||||
{% image "/assets/img/screenshots/plasma/widgets.png", "Screenshot of Plasma with widgets" %}
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@
|
|||
|
||||
> [More about XFCE >](https://xfce.org/)
|
||||
|
||||
[](/assets/img/screenshots/xfce/desktop.jpg)
|
||||
{% image "/assets/img/screenshots/xfce/desktop.jpg", "A screenshot of Linux Mint with xfce desktop" %}
|
||||
|
||||
System settings:
|
||||
|
||||
[](/assets/img/screenshots/xfce/settings.jpg)
|
||||
{% image "/assets/img/screenshots/xfce/settings.jpg", "A screenshot of Linux Mint with xfce system settings" %}
|
||||
|
||||
Software center:
|
||||
|
||||
[](/assets/img/screenshots/xfce/software-center.jpg)
|
||||
{% image "/assets/img/screenshots/xfce/software-center.jpg", "A screenshot of Linux Mint with xfce software center" %}
|
||||
|
||||
Theming:
|
||||
|
||||
[](/assets/img/screenshots/xfce/4-14.png)
|
||||
{% image "/assets/img/screenshots/xfce/4-14.png", "A screenshot of xfce 4.14 with various themes" %}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ templateClass: tmpl-product
|
|||
|
||||
<aside id="product_sidebar">
|
||||
{% if img -%}
|
||||
<a href="/shop/{{img}}"><img src="/shop/{{img}}" alt="{{title}}"/></a>
|
||||
<a href="/shop/{{img}}">{% image "/shop/"+img, title %}</a>
|
||||
{%- else -%}
|
||||
<p>No image available.</p>
|
||||
{%- endif %}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<a href="{{product.url}}" style="text-decoration:none">
|
||||
<h4>{{product.data.title|noApostrophes}}</h4>
|
||||
{% if product.data.img -%}
|
||||
<img src="/shop/{{product.data.img}}" width="100%"/>
|
||||
{% image "/shop/" + product.data.img %}
|
||||
{%- else -%}
|
||||
<p>No image available.</p>
|
||||
{%- endif %}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ Showing ports, left to right:
|
|||
- 3.5mm microphone
|
||||
- GPU with DMS-59 port
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/dell_optiplex-9020/d9079897/back.png", "Back of this Dell Optiplex 9020" %}
|
||||
|
||||
### Front
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ Showing, top-left to bottom-right:
|
|||
- 3.5mm headphone port
|
||||
- 4x USB-A ports
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/dell_optiplex-9020/d9079897/front.png", "Front of this Dell Optiplex 9020" %}
|
||||
|
||||
### Inside
|
||||
|
||||
|
|
@ -78,19 +78,19 @@ Showing, clockwise from top left:
|
|||
- CPU ({{specs.cpu}})
|
||||
- GPU ({{specs.gpu}})
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/dell_optiplex-9020/d9079897/inside_small.png", "Inside of this Dell Optiplex 9020" %}
|
||||
|
||||
### Side
|
||||
|
||||
Some scuff marks on the side:
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/dell_optiplex-9020/d9079897/side.png", "Side of this Dell Optiplex 9020" %}
|
||||
|
||||
### Bottom
|
||||
|
||||
All 4 footpads intact.
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/dell_optiplex-9020/d9079897/bottom.png", "Bottom of this Dell Optiplex 9020" %}
|
||||
|
||||
## Linux OS
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ Showing, from left to right:
|
|||
- 3.5mm headset port
|
||||
- 3.5mm headphones port
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z230/d2646191/front.png", "Front of this HP Z230" %}
|
||||
|
||||
### Back
|
||||
|
||||
|
|
@ -64,7 +64,7 @@ Showing ports, from left to right:
|
|||
- 2x USB-A
|
||||
- Analog keyboard and mouse
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z230/d2646191/back.png", "Back of this HP Z230" %}
|
||||
|
||||
### Inside
|
||||
|
||||
|
|
@ -75,17 +75,17 @@ Showing, clockwise from top left:
|
|||
- CD-RW/DVD-RW drive
|
||||
|
||||
(Sorry for the blurry photo)
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z230/d2646191/inside.png", "Inside of this HP Z230" %}
|
||||
|
||||
### Bottom
|
||||
Clean, all 4 rubber feet intact
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z230/d2646191/bottom.png", "Bottom of this HP Z230" %}
|
||||
|
||||
### Top
|
||||
Some scuff marks
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z230/d2646191/top.png", "Top of this HP Z230" %}
|
||||
|
||||
## Linux OS
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ Some scratches. Showing, from left to right:
|
|||
- 3.5mm headset port
|
||||
- 3.5mm headphones port
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z240/d0664022/front.png", "Front of this HP Z240" %}
|
||||
|
||||
### Back
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ Showing ports, from left to right:
|
|||
- 2x DisplayPort (on Graphics card)
|
||||
- Standard NEMA power inlet
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z240/d0664022/back.png", "Back of this HP Z240" %}
|
||||
|
||||
### Inside
|
||||
|
||||
|
|
@ -75,17 +75,17 @@ Showing, clockwise from top left:
|
|||
- Processor ({{specs.cpu}})
|
||||
- Hard drive ({{specs.storage}})
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z240/d0664022/inside.png", "Inside of this HP Z240" %}
|
||||
|
||||
### Bottom
|
||||
Clean, all 4 rubber feet intact
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z240/d0664022/bottom.png", "Bottom of this HP Z240" %}
|
||||
|
||||
### Top
|
||||
Some scuff marks
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z240/d0664022/top.png", "Top of this HP Z240" %}
|
||||
|
||||
## Linux OS
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ Showing, from left to right:
|
|||
- 3.5mm headset port
|
||||
- 3.5mm headphones port
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z240/d1674407/front.png", "Front of this HP Z240" %}
|
||||
|
||||
### Back
|
||||
|
||||
|
|
@ -65,7 +65,7 @@ Showing ports, from left to right:
|
|||
- 2x DisplayPort on GPU
|
||||
- Standard NEMA power inlet
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z240/d1674407/back.png", "Back of this HP Z240" %}
|
||||
|
||||
### Inside
|
||||
|
||||
|
|
@ -76,16 +76,16 @@ Showing, clockwise from top left:
|
|||
- Storage: {{specs.storage}}
|
||||
- CD drive {{specs.cdd}}
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z240/d1674407/inside.png", "Inside of this HP Z240" %}
|
||||
|
||||
### Bottom
|
||||
Clean, all 4 rubber feet intact
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z240/d1674407/bottom.png", "Bottom of this HP Z240" %}
|
||||
|
||||
### Top
|
||||
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z240/d1674407/top.png", "Top of this HP Z240" %}
|
||||
|
||||
## Linux OS
|
||||
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ Showing, from left to right:
|
|||
- 4x USB-A
|
||||
- 3.5mm headset
|
||||
- 3.5mm headphones
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z240/d4531351/front.png", "A view of the front of this PC" %}
|
||||
|
||||
### Back
|
||||
Showing ports, from left to right:
|
||||
|
|
@ -59,7 +59,7 @@ Showing ports, from left to right:
|
|||
- 3.5mm speaker and 3.5mm mic
|
||||
- DMS-59 dual display ports on graphics card
|
||||
- Standard NEMA power port
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z240/d4531351/back.png", "A view of the back of this PC" %}
|
||||
|
||||
### Inside
|
||||
Showing, clockwise from top left:
|
||||
|
|
@ -68,11 +68,11 @@ Showing, clockwise from top left:
|
|||
- Processor
|
||||
- Hard drive
|
||||
- CD-drive
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z240/d4531351/inside_small.png", "A view of the inside of this PC" %}
|
||||
|
||||
### Bottom
|
||||
All four rubber pads intact
|
||||
|
||||
{% image "/shop/computers/desktops/hp_z240/d4531351/bottom_small.png", "A view of the bottom of this PC" %}
|
||||
|
||||
## Linux OS
|
||||
|
||||
|
|
|
|||
|
|
@ -49,13 +49,13 @@ These are photos of the actual unit for sale.
|
|||
|
||||
No cracks, lines, or dead pixels. Touchscreen tested and working.
|
||||
|
||||
|
||||
{% image "/shop/computers/laptops/dell/latitude_e7240/l7278286/screen.png", "A view of the screen of this Dell Latitude" %}
|
||||
|
||||
### Keyboard
|
||||
|
||||
No keys missing, some wear and some smudging on the right arrow key.
|
||||
|
||||
|
||||
{% image "/shop/computers/laptops/dell/latitude_e7240/l7278286/keyboard.png", "A view of the keyboard of this Dell Latitude" %}
|
||||
|
||||
### Back
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ Ports seen on the back:
|
|||
- USB
|
||||
- 19vdc power inlet
|
||||
|
||||
|
||||
{% image "/shop/computers/laptops/dell/latitude_e7240/l7278286/back.png", "A view of the back side of this Dell Latitude" %}
|
||||
|
||||
### Right side
|
||||
|
||||
|
|
@ -77,25 +77,25 @@ Ports seen on this side:
|
|||
- USB-A
|
||||
- Mini-DisplayPort
|
||||
|
||||
|
||||
{% image "/shop/computers/laptops/dell/latitude_e7240/l7278286/right.png", "A view of the right edge of this Dell Latitude" %}
|
||||
|
||||
### Left side
|
||||
|
||||
Showing heat exhaust and wifi on/off switch.
|
||||
|
||||
|
||||
{% image "/shop/computers/laptops/dell/latitude_e7240/l7278286/left.png", "A view of the left edge of this Dell Latitude" %}
|
||||
|
||||
### Top
|
||||
|
||||
Some dings and scuffs
|
||||
|
||||
|
||||
{% image "/shop/computers/laptops/dell/latitude_e7240/l7278286/top.png", "A view of the closed top of this Dell Latitude" %}
|
||||
|
||||
### Bottom
|
||||
|
||||
Some pads missing, some replaced
|
||||
|
||||
|
||||
{% image "/shop/computers/laptops/dell/latitude_e7240/l7278286/bottom.png", "A view of the bottom of this Dell Latitude" %}
|
||||
|
||||
## Linux OS
|
||||
|
||||
|
|
|
|||
|
|
@ -48,20 +48,20 @@ These are photos of the actual unit for sale.
|
|||
|
||||
No cracks, lines, or dead pixels
|
||||
|
||||
|
||||
{% image "/shop/computers/laptops/lenovo/ideapad_330-17/l8575077/screen_small.png", "A view of the screen of this Lenovo Ideapad" %}
|
||||
|
||||
### Keyboard
|
||||
|
||||
No keys missing
|
||||
|
||||
|
||||
{% image "/shop/computers/laptops/lenovo/ideapad_330-17/l8575077/keyboard.png", "A view of the keyboard of this Lenovo Ideapad" %}
|
||||
|
||||
|
||||
### Right side
|
||||
|
||||
Showing the CD drive ({{specs.cdd}}).
|
||||
|
||||
|
||||
{% image "/shop/computers/laptops/lenovo/ideapad_330-17/l8575077/right.png", "A view of the right edge of this Lenovo Ideapad" %}
|
||||
|
||||
### Left side
|
||||
|
||||
|
|
@ -75,17 +75,17 @@ Ports seen on this side:
|
|||
- USB-C
|
||||
- Memory card
|
||||
|
||||
|
||||
{% image "/shop/computers/laptops/lenovo/ideapad_330-17/l8575077/left.png", "A view of the left edge of this Lenovo Ideapad" %}
|
||||
|
||||
### Top
|
||||
|
||||
|
||||
{% image "/shop/computers/laptops/lenovo/ideapad_330-17/l8575077/top.png", "A view of the closed top of this Lenovo Ideapad" %}
|
||||
|
||||
### Bottom
|
||||
|
||||
All 4 pads intact
|
||||
|
||||
|
||||
{% image "/shop/computers/laptops/lenovo/ideapad_330-17/l8575077/bottom.png", "A view of the bottom of this Lenovo Ideapad" %}
|
||||
|
||||
## Linux OS
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
const { DateTime } = require('luxon')
|
||||
const fs = require('fs').promises
|
||||
const path = require('path')
|
||||
const pluginRss = require('@11ty/eleventy-plugin-rss')
|
||||
const pluginSyntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
|
||||
const pluginNavigation = require('@11ty/eleventy-navigation')
|
||||
const markdownIt = require('markdown-it')
|
||||
const createHash = require('crypto').createHash
|
||||
const pluginImage = require('@11ty/eleventy-img')
|
||||
// Widths in pixels of responsive images to be generated
|
||||
const IMAGE_SIZES = [300, 600, 900, 1200]
|
||||
|
||||
const dirs ={
|
||||
input: '_src',
|
||||
|
|
@ -126,6 +130,26 @@ module.exports = (eleventyConfig) => {
|
|||
eleventyConfig.addPassthroughCopy('_src/assets/site.webmanifest')
|
||||
eleventyConfig.addPassthroughCopy('_src/assets/scripts')
|
||||
|
||||
// Resize images
|
||||
// https://www.11ty.dev/docs/plugins/image/#make-your-own-markup
|
||||
eleventyConfig.addShortcode("image", async (src, alt) => {
|
||||
const metadata = await pluginImage(`./_src${src}`, {
|
||||
widths: [...IMAGE_SIZES, 'auto'],
|
||||
formats: ['auto', 'webp', 'avif'],
|
||||
// https://www.11ty.dev/docs/plugins/image/#custom-filenames
|
||||
filenameFormat: (id, src, width, format) =>
|
||||
`${path.basename(src,path.extname(src))}-${width}w.${format}`,
|
||||
// https://alexpeterhall.com/blog/2021/04/05/responsive-images-eleventy/#eleventy-configuration
|
||||
urlPath: path.dirname(src),
|
||||
outputDir: `_site/${path.dirname(src)}`,
|
||||
})
|
||||
const lowsrc = metadata.webp[0]
|
||||
const highsrc = metadata.webp[metadata.webp.length - 1]
|
||||
return `<a href="${src}"><picture>\n${Object.values(metadata).map(imageFormat =>
|
||||
`\t<source type="${imageFormat[0].sourceType}" srcset="${imageFormat.map(entry => entry.srcset).join(", ")}" sizes="${IMAGE_SIZES.reverse().reduce((str,size) =>
|
||||
`(max-width:${size}px) ${size}px, ${str}`,'100vw')}">`).join("\n")}\n\t<img src="${lowsrc.url}" width="${highsrc.width}" height="${highsrc.height}" alt="${alt}" decoding="async">\n</picture></a>`
|
||||
})
|
||||
|
||||
// Video shortcode
|
||||
eleventyConfig.addShortcode('vid', (videoName) => `
|
||||
<video controls width="100%">
|
||||
|
|
|
|||
Loading…
Reference in New Issue