Merge branch 'release/1.6.34' into v1

CHANGELOG.md

@@ -1,5 +1,15 @@
 # ImageOptimize Changelog
 
+## 1.6.34 - 2021.06.10
+### Changed
+* Switched documentation system to VitePress
+* When an asset is replaced, force the recreation of the variants (https://github.com/nystudio107/craft-imageoptimize/issues/283)
+
+### Fixed
+* Fixed an issue where uppercase file suffixes would cause webp image variants to not be created (https://github.com/nystudio107/craft-imageoptimize/issues/277)
+* If `image/svg` is being ignored, add `image/svg+xml` to the mime types to ignore as well
+* Now store the image sub-folders by name, since the UID can be different per environment (https://github.com/nystudio107/craft-imageoptimize/issues/282)
+
 ## 1.6.33 - 2021.04.23
 ### Added
 * Added a setting to control the amount an image needs to be scaled down for automatic sharpening to be applied (https://github.com/nystudio107/craft-imageoptimize/issues/263)

Makefile

@@ -8,9 +8,8 @@ DOCKERRUN=docker container run \
 	-p 8080:8080 \
 	-v `pwd`:/app \
 	${CONTAINER}:${TAG}
-DOCSDEST?=../../sites/nystudio107/web/docs/image-optimize
 
-.PHONY: build dev docker docs install npm
+.PHONY: build dev docker install update update-clean npm
 
 build: docker install
 	${DOCKERRUN} \
@@ -24,11 +23,6 @@ docker:
 		-t ${CONTAINER}:${TAG} \
 		--build-arg TAG=${TAG} \
 		--no-cache
-docs: docker
-	${DOCKERRUN} \
-		run docs
-	rm -rf ${DOCSDEST}
-	mv ./docs/docs/.vuepress/dist ${DOCSDEST}
 install: docker
 	${DOCKERRUN} \
 		install

buildchain/package.json

@@ -129,7 +129,6 @@
     "check-types": "tsc",
     "debug": "nodemon -L",
     "dev": "nodemon -L",
-    "docs": "cd ../docs && rm -f package-lock.json && npm install && npm update && npm run docs:build",
     "lint": "tsc --noEmit && eslint '../../src/**/*.{js,ts,vue}' --fix"
   },
   "version": "1.0.0"

composer.json

@@ -2,7 +2,7 @@
     "name": "nystudio107/craft-imageoptimize",
     "description": "Automatically create & optimize responsive image transforms, using either native Craft transforms or a service like imgix, with zero template changes.",
     "type": "craft-plugin",
-    "version": "1.6.33",
+    "version": "1.6.34",
     "keywords": [
         "craft",
         "cms",

docs/.textlint.terms.json

@@ -0,0 +1,8 @@
+[
+  "Stylus",
+  "VuePress",
+  [
+    "front[- ]matter",
+    "frontmatter"
+  ]
+]

docs/.textlintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+    rules: {
+        '@textlint-rule/no-unmatched-pair': true,
+        apostrophe: true,
+        'common-misspellings': true,
+        diacritics: true,
+        'en-capitalization': {
+            allowHeading: false
+        },
+        'stop-words': {
+            severity: 'warning'
+        },
+        terminology: {
+            terms: `${__dirname}/.textlint.terms.json`
+        },
+        'write-good': {
+            severity: 'warning'
+        }
+    },
+    filters: {
+        comments: true
+    }
+}

docs/Dockerfile

@@ -0,0 +1,8 @@
+ARG TAG=14-alpine
+FROM nystudio107/node-dev-base:$TAG
+
+WORKDIR /app/
+
+CMD ["run build"]
+
+ENTRYPOINT ["npm"]

docs/Makefile

@@ -0,0 +1,45 @@
+TAG?=14-alpine
+CONTAINER?=$(shell basename $(dir $(CURDIR)))-docs
+DOCKERRUN=docker container run \
+	--name ${CONTAINER} \
+	--rm \
+	-p 3002:3002 \
+	-t \
+	-v `pwd`:/app \
+	${CONTAINER}:${TAG}
+DOCSDEST?=../../../sites/nystudio107/web/docs/image-optimize
+
+.PHONY: docker build dev fix install lint update npm
+
+docker:
+	docker build \
+		. \
+		-t ${CONTAINER}:${TAG} \
+		--build-arg TAG=${TAG} \
+		--no-cache
+build: docker install update
+	${DOCKERRUN} \
+		run docs:build
+	rm -rf ${DOCSDEST}
+	mv ./docs/.vitepress/dist ${DOCSDEST}
+dev: docker install
+	${DOCKERRUN} \
+		run docs:dev
+fix: docker install
+	${DOCKERRUN} \
+		run docs:fix
+install: docker
+	${DOCKERRUN} \
+		install
+lint: docker install
+	${DOCKERRUN} \
+		run docs:lint
+update: docker
+	${DOCKERRUN} \
+		update
+npm: docker
+	${DOCKERRUN} \
+		$(filter-out $@,$(MAKECMDGOALS))
+%:
+	@:
+# ref: https://stackoverflow.com/questions/6273608/how-to-pass-argument-to-makefile-from-command-line

docs/docs/.vitepress/config.js

@@ -0,0 +1,25 @@
+module.exports = {
+    title: 'ImageOptimize Documentation',
+    description: 'Documentation for the ImageOptimize plugin',
+    base: '/docs/image-optimize/',
+    lang: 'en-US',
+    themeConfig: {
+        repo: 'nystudio107/craft-imageoptimize',
+        docsDir: 'docs/docs',
+        docsBranch: 'v1',
+        algolia: {
+            apiKey: '',
+            indexName: 'image-optimize'
+        },
+        editLinks: true,
+        editLinkText: 'Edit this page on GitHub',
+        lastUpdated: 'Last Updated',
+        sidebar: [
+            { text: 'ImageOptimize Plugin', link: '/' },
+            { text: 'ImageOptimize Overview', link: '/overview' },
+            { text: 'Configuring ImageOptimize', link: '/configuring' },
+            { text: 'Using ImageOptimize', link: '/using' },
+            { text: 'Advanced Usage', link: '/advanced' },
+        ],
+    },
+};

docs/docs/.vitepress/theme/SidebarBottom.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="nys-footer">
+    <span>Brought to you by:</span>
+    <a
+      href="https://github.com/sponsors/khalwat"
+      target="_blank"
+      rel="noopener"
+    >
+    <img
+        src="/resources/img/nys-logo.svg"
+        aria-label="nystudio107 logo"
+        />
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SidebarBottom"
+}
+</script>
+
+<style scoped>
+.nys-footer {
+  padding: 0 1.5rem 2rem;
+  font-size: 0.8rem;
+}
+
+.nys-footer img {
+  box-sizing: border-box;
+  max-width: 200px;
+  height: 80px;
+  display: block;
+  margin: 1rem 0;
+  padding-left: 0.7rem;
+}
+</style>

docs/docs/.vitepress/theme/custom.css

@@ -0,0 +1,12 @@
+:root {
+    --c-brand: #48a391;
+    --c-brand-light: #5db7a5;
+}
+
+.custom-block.tip {
+    border-color: var(--c-brand-light);
+}
+
+.DocSearch {
+    --docsearch-primary-color: var(--c-brand) !important;
+}

docs/docs/.vitepress/theme/index.js

@@ -0,0 +1,15 @@
+import Theme from 'vitepress/theme'
+import {h} from 'vue'
+import './custom.css'
+
+import SidebarBottom from './SidebarBottom.vue';
+
+export default {
+    ...Theme,
+    Layout() {
+        return h(Theme.Layout, null, {
+                'sidebar-bottom': () => h(SidebarBottom)
+            }
+        )
+    }
+}

docs/docs/AdvancedUsage.md → docs/docs/advanced.md

@@ -120,13 +120,13 @@ Normally ImageOptimize will regenerate image variants if you change an Optimized
 
 Re-saving many images at a time can be intensive, and on certain setups may require tweaking the `php.ini` setting `max_execution_time`. An alternative for better handling of any lengthy Craft CMS task is the [Async Queue plugin](https://github.com/ostark/craft-async-queue).
 
-All you need to do is install the plugin, and any queue jobs in Craft CMS 3 will now run entirely in the background via the CLI php, which isn't subject to the same restrictions that the web php is.
+All you need to do is install the plugin, and any queue jobs in Craft CMS 3 will now run entirely in the background via the CLI php, which isn’t subject to the same restrictions that the web php is.
 
 Also read the article [Robust queue job handling in CraftCMS](https://nystudio107.com/blog/robust-queue-job-handling-in-craft-cms) for other possible solutions.
 
 ## GraphQL via Craft CMS 3.3
 
-ImageOptimize has built-in support for accessing the OptimizedImages field via GraphQL using [Craft CMS 3.3's GraphQL](https://docs.craftcms.com/v3/graphql.html) support.
+ImageOptimize has built-in support for accessing the OptimizedImages field via GraphQL using [Craft CMS 3.3’s GraphQL](https://docs.craftcms.com/v3/graphql.html) support.
 
 You can access all of the primary OptimizedImages field methods:
 
@@ -287,7 +287,7 @@ use vendor\package\MyImageTransform;
 
 No module or plugin bootstrapping code needed to get it working. For an example of how this works, check out [craft-imageoptimize-imgix](https://github.com/nystudio107/craft-imageoptimize-imgix) & [craft-imageoptimize-thumbor](https://github.com/nystudio107/craft-imageoptimize-thumbor) & [craft-imageoptimize-sharp](https://github.com/nystudio107/craft-imageoptimize-sharp).
 
-If you want to wrap your `ImageTransform` into a plugin or module,
+To wrap your `ImageTransform` into a plugin or module,
 simply listen for the `EVENT_REGISTER_IMAGE_TRANSFORM_TYPES` event to add your `ImageTransform` to the types that ImageOptimize knows about.
 
 ```php

docs/docs/Configuring.md → docs/docs/configuring.md

@@ -4,11 +4,11 @@ The plugin Settings for ImageOptimize allows you to choose whether to use native
 
 ## Native Craft Images
 
-To create client-proof optimized images with native Craft transforms, you'll need to also install the image optimization tools of your choice. The ImageOptimize plugin Settings page will show you the status of your installed image optimization tools:
+To create client-proof optimized images with native Craft transforms, you’ll need to also install the image optimization tools of your choice. The ImageOptimize plugin Settings page will show you the status of your installed image optimization tools:
 
 ![Screenshot](./resources/screenshots/image-optimize-settings.png)
 
-Here's how to install a few on Ubuntu 16.04:
+Here’s how to install a few on Ubuntu 16.04:
 
 * **jpegoptim** - `sudo apt-get install jpegoptim`
 * **mozjpeg** - [Installing mozjpeg on Ubuntu 16.04 (Forge)](https://nystudio107.com/blog/installing-mozjpeg-on-ubuntu-16-04-forge)
@@ -17,9 +17,9 @@ Here's how to install a few on Ubuntu 16.04:
 * **gifsicle** - `sudo apt-get install gifsicle`
 * **webp** - `sudo apt-get install webp`
 
-ImageOptimize's responsive image transforms will work without these tools installed, but it's recommended that you use them to ensure the images are fully optimized.
+ImageOptimize’s responsive image transforms will work without these tools installed, but it’s recommended that you use them to ensure the images are fully optimized.
 
-The only configuration for ImageOptimize is in the `config.php` file, which is a multi-environment friendly way to store the default settings.  Don't edit this file, instead copy it to `craft/config` as `image-optimize.php` and make your changes there.
+The only configuration for ImageOptimize is in the `config.php` file, which is a multi-environment friendly way to store the default settings.  Don’t edit this file, instead copy it to `craft/config` as `image-optimize.php` and make your changes there.
 
 The `activeImageProcessors` array lets you specify which of the image optimization tools to use for which file types.
 
@@ -29,26 +29,26 @@ The `activeImageVariantCreators` array lets you specify which of the image varia
 
 The `imageVariantCreators` array specifies the path and options for each of the image variant creators.
 
-See each image optimization tool's documentation for details on the options they allow you to use.
+See each image optimization tool’s documentation for details on the options they allow you to use.
 
 ## imgix Service Images
 
-If you're using the [imgix](https://imgix.com) service, ImageOptimize allows you to use the Craft Control Panel UX/UI to create your image transforms, but have imgix do all of the heavy lifting for you. This means you can use imgix with zero template changes.
+If you’re using the [imgix](https://imgix.com) service, ImageOptimize allows you to use the Craft Control Panel UX/UI to create your image transforms, but have imgix do all of the heavy lifting for you. This means you can use imgix with zero template changes.
 
 Craft will then use imgix for all Asset URLs, including the original image, its thumbnails, and any Asset transforms you create (whether in the Control Panel or via Twig templates).
 
-To utilize imgix, you'll need to enter your **imgix Source Domain**, and your **imgix API Key** to allow for auto-purging of changed Assets:
+To use imgix, you’ll need to enter your **imgix Source Domain**, and your **imgix API Key** to allow for auto-purging of changed Assets:
 
 ![Screenshot](./resources/screenshots/image-optimize-imgix-settings.png)
 
-Then configure your imgix source via your imgix.com account. If you're using a Web Folder as a source, make sure it's set to the root of your domain, since you can only have one per site:
+Then configure your imgix source via your imgix.com account. If you’re using a Web Folder as a source, make sure it’s set to the root of your domain, since you can only have one per site:
 
 ![Screenshot](./resources/screenshots/imgix-web-folder-source.png)
 
-Regardless of how many separate Craft Asset Volumes you've set up, you'll just have one Web Folder source.
+Regardless of how many separate Craft Asset Volumes you’ve set up, you’ll just have one Web Folder source.
 
 For image transforms, and set both **Quality** and **Format** to `Auto` in the Control Panel, it’ll send along `auto=compress,format` to imgix, which will allow imgix to compress the image as it sees fit. See the [Automatic imgix Documentation](https://docs.imgix.com/apis/url/auto) for details.
 
-You can also set an optional **imgix Security Token** if you wish to have [secure, signed image URLs](https://docs.imgix.com/setup/securing-images) from imgix.
+You can also set an optional **imgix Security Token** to have [secure, signed image URLs](https://docs.imgix.com/setup/securing-images) from imgix.
 
 Brought to you by [nystudio107](https://nystudio107.com)

docs/docs/README.md → docs/docs/index.md

@@ -30,6 +30,6 @@ You can also install ImageOptimize via the **Plugin Store** in the Craft Control
 
 ImageOptimize works on Craft 3.x.
 
-If you want to use ImageOptimize with Cloudinary, install the [Cloudinary](https://github.com/timkelty/craft3-cloudinary) plugin that will make Cloudinary available as a file system for Craft CMS 3.
+To use ImageOptimize with Cloudinary, install the [Cloudinary](https://github.com/timkelty/craft3-cloudinary) plugin that will make Cloudinary available as a file system for Craft CMS 3.
 
 Brought to you by [nystudio107](https://nystudio107.com)

docs/docs/Overview.md → docs/docs/overview.md

@@ -14,9 +14,9 @@ As configured by default, all of these are _lossless_ image optimizations that r
 
 Out of the box, ImageOptimize allows for the optimization of `JPG`, `PNG`, `SVG`, & `GIF` images, but you can add whatever additional types you want. It also supports using [imgix](https://www.imgix.com/), [Thumbor](http://thumbor.org/), or [Sharp JS](https://nystudio107.com/blog/setting-up-your-own-image-transform-service) to create the responsive image transforms.
 
-It's important to create optimized images for frontend delivery, especially for mobile devices. If you want to learn more about it, read the [Creating Optimized Images in Craft CMS](https://nystudio107.com/blog/creating-optimized-images-in-craft-cms) article.
+It’s important to create optimized images for frontend delivery, especially for mobile devices. To learn more about it, read the [Creating Optimized Images in Craft CMS](https://nystudio107.com/blog/creating-optimized-images-in-craft-cms) article.
 
-Once ImageOptimize is installed, optimized versions of image transforms are created without you having to do anything. This makes it great for client-proofing websites.
+Once ImageOptimize is installed, optimized versions of image transforms are created without you having to do anything. This makes it great for client-proofing sites.
 
 ImageOptimize works equally well with both local and remote assets such as Amazon S3 buckets. It also works great with SPAs, giving you access to your optimized image URLs from GraphQL.