All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.
This document started at v1.6.10 in the Azellaz.com repo and only documents work after v1.6.10.
Upgrade 11ty to ^1.0.0 (checked via eleventy-upgrade-help plugin) and run npm audit fix
for recent security patches.
- package*.json
Added Snipcart API workflow for Snipcart fetching of product pages for creating or updating products.
Added GitHub Actions workflow for automating the Snipcart workflow against eery current product on every push to main. This was the easiest route to MVP, but very inefficient. A future refactor would aim for identifying any product json file in a push, then identify if any product-defining data changed, then running the Snipcart workflow against just that product.
Moved netlify functions to root dir.
- .snipcart/productFetch.js
- .snipcart/productFetchHandler.js
- .github/workflows/snipcart-fetch.yml
- package.json: added
snipcart:fetch
script - src/admin/config.yml: Fixed outdated branch name
- src/netlify/functions -> .netlify/functions
- netlify.toml
- src/_data/currentProducts.js: improved comment docs
- src/.eleventyignore
- .netlify/functions/package.json
- git gateway settings: this was pointing at the wrong repo (Azellaz.com) or the wrong branch (master), so changes in the cms wrote to the old repo
- functions dir
- new repository secret (not env secret)
SNIPCART_POST
- created new API key for product post requests
Fix Netlify build hook in lambda.
- src/lambda/snipcart-webhook-listener.js
Clean up readme, maintenance.md, and this changelog file.
- readme.md: edit for new repo context
- maintenance.md: get rid of old stuff, consolidate relevant notes from changelog
- changelog.md: move site notes to maintenance.md
Switch Netlify source repo from Azellaz.com to Azellaz. Let's see how this (nearly image-free codebase) impacts build time!
Offload all photos in images to Cloudinary and organize image assets.
- src/_data/portfolio.json: add portfolio image cloudinary urls as array of arrays of a url string in a NetlifyCMS controlled file
- src/utils/filters/: add 11ty filter function to derive image name (description) from url
- src/admin/config.yml: add file collection for portfolio.json; got it working but the data shape is undesired (array of arrays), still looking to create an array of strings
- src/_includes/portfolio-grid.html: reference new data
- src/_includes/portfolio-grid-item.html: use new data and filter to render each portfolio image
- az.css: removed some unused classes regarding hero image and logo styles
- images/portfolio: archived
- images/meta: archived
- images/*.{png|jpg}: archived
- images/*.svg: archived those unused in markup
- src/_data/portfolio.js
Update Basscss dependency.
- package*: Update to @bzelip/basscss7.1.1@1.0.0
Update netlifycms config about page path.
- src/admin/config.yml: Update path to about page
Reorganize codebase around src/ dir.
- Move the following from / to /src/
- _data
- _includes
- _layouts
- admin
- crawlers
- css
- fonts
- images
- js
- lambda
- .eleventyignore
- about.md
- contact.md
- index.md
- portfolio.md
- product.md
- .eleventy.js: update config paths
- netlify.toml: update lambda path
- admin/config.yml: update data path
Replace official Basscss dependency with @bzelip/basscss7.1.1 (smaller module, no dependencies, etc.).
- package.json: replaced basscss@7.1.1 with @bzelip/basscss7.1.1
- az.css: import Basscss by module name
Replace local Basscss with npm.
- package.json: Add Basscss@7.1.1 dependency
- css/az.css: import Basscss from node_modules (yuck)
Miscellaneous fixes, refactors, and edits.
- crawlers/: Collect files for robots here
- admin/: remove front matter, 11ty ignore it, 11ty pass through it
- robots.txt: move to crawlers/
- humans.txt: move to crawlers/
- sitemap.njk: move to crawlers/
- _data/currentProducts.js: Add comments on why the data is not 11ty computed
- .eleventy.js:
- refactor passthrough of pages for robots
- watch css/
- explicitly list templates
- .eleventyignore: ignore admin/
- package.json: add debug script
Replace node-fetch dependency with axios in lambda.
- lambda/:
- Replace node-fetch with axios
- bump minor
- package.json:
- readme.md: Add npm version badge
- node-fetch dependency in lambda/package.json
Shift PostCSS processing to an 11ty JavaScript template, remove the postcss-cli dependency.
Adapted from EleventyOne.
- css/postcss.11ty.js: new JS template that processes az.css
- css/src/ -> css/
- package.json: update scripts
- _includes/head.html: update css link
- .eleventy.js: update images passthrough
- .eleventyignore: delete image ignores
- humans.txt: Add tech metadata
- postcss-cli dev dependency
- css/src/
- css/dist/
- all images not used in production moved to webmaster/archive/images
The postcss-color-function plugin silently stopped working, I guess as a result of its deprecation due to W3G CSS activity. Also, it was an extra dependency to install at build time on netlify, so getting rid of it is nice for perf.
- az.css: refactor all uses of
color()
with the output of the plugin via a past netlify preview - package.json: Update netlify build script key name
- postcss-color-function dev dependency
- .node-version: to tell Netlify build image what Node version to use
Refactor the codebase from Jekyll to 11ty
Fix sitemap missing product links from new products collection
- sitemap.xml: loop over products collection data
- Bump Ruby version to v2.7.2 and update gems after local dev machine OS upgrade, and news of Netlify EOL for the current Azellaz build image (Trusty).
- Refactor product pages as jekyll collection as the liquid variable approach broke in jekyll v4.2.0.
- _products/:
mv products/ _products
for jekyll collections directory syntax
- .ruby-version
- Gemfile.lock
- package.json: new jekyll serve command
- .gitignore: new .jekyll-cache
- newProductPages.js: update productPagesDir
- _includes/shop-grid.html: Iterate over products collection
- _data/readme.md: Add note about _data/options.json
- css/src/az.css: Add
line-break
rule to sold out sticker to fix break between words on Safari
- products/: rename _products/ for new jekyll version
- branch: master
- description: Show product pic number 2 on shop item hover instead of product name and price
- _includes/shop-grid-item.html
- branch: master
- description
- Abstract out a flash component that can be used for various needs
- Abstract out a higher order holiday flash component that uses the flash component
- _includes/ flash.html
- _config.yml
- _includes/shop.html
- _includes/product-page.html
- _includes/holiday-flash.html
- branch: master
- description: Reverse order of shop items, fix vulnerabilities
- _includes/shop-grid.html: manipulate products array to reverse shop items order
- package-lock.json
- branch: dev
- description: Delete google analytics; remove Etsy links
- _includes/footer.html:
- Delete ga script
- Delete Etsy links
- Add email icon and link
- Delete blurb about snipcart and netlify
- css/src/font-awesome@4.7.0.CUSTOM.css: Add fa-envelope-o icon
- contact.html: Remove Etsy link
- _config.yml: Remove Etsy data
- branch: dev
- description: Use Netlify Functions to create an endpoint for the Snipcart webhook to hit; this will fix the issue where the snipcart web hook hits the netlify build hook twice after a new purchase, which makes the build process run twice instead of the more efficient once.
- lambda/: where the snipcart webhook listener function lives
- netlify.toml
- _config.yml: Exlude lambda/, clean up
- branch: dev
- description: Remove
stockOnHand
from source files, instead handing over the source of truth for stock data to snipcart.
- admin/config.yml
- _data/products/*.json
- branch: dev
- description: Leverage Snipcart API and webhooks, and Netlify build hook, to auto fetch product stock data at build and build site on new order event
- snipcart API to get product stock number (so that snipcart product dashboard is the source of truth for product stock quantities, so that the front end never has to be updated manually when a product is sold out)
- snipcart webhook to send POST request to netlify; unfortunately, the snipcart webhook fires for all snipcart events, not just orders, so in our case, two webhookd POSTs are fired after each order (order event, and customer update event) - it's ineefficient, but it works!
- netlify build hook URL (created via netlify dashboard, not in project files), as an endpoint for snipcart to hit with its webhook
- install simple-get for async http request for snipcart product data
- newProductPages.js: Refactor stock data via snipcart fetch
- branch: dev
- description: Make the About page editable via cms
- admin/config.yml: Define the about page
- about.md: Create editable markdown file for about content
- about.html: Move to _layouts, extract editable content
- az.css: Add about page markdown styles
- branch: master
- description: Add 'sold-out' context:
- add stickers to the appropriate shop items
- disable buy button on product pages with sold out text inside the button
- _includes/shop-grid-item.html
- _includes/product-page.html
- az.css: add
.sticker
based on https://www.bookhou.com/collections/shop-update
- branch: master
- description: Refactor shop filter buttons to only look for the first word of a multi-word category, whether type or material (ie: "circular pouch")
- shop-filter-buttons.html
- branch: dev
- description: Merge latest dev work on implementing Netlify CMS into master branch. The major change comes in because there is a new product data model and product page creation/editing/publication workflow via Netlify CMS.
For updating product info using the cms, go to azellaz.com/admin.
Add users to cms login via Netlify Identity.
Only the current product pages are built at build time via newProductPages.js
before the jekyll build. They are generated in products/
.
All product data, not just current live products, have associated json files in _data/products/
. These are the files edited by netlify cms.
The bag options (types and materials) have been abstracted into _data/options.json
. In the future, I can make a netlify cms "file collection" out of this file which will allow AZ to update the filter option buttons on the shop.
- branch: cloudinary
- description: refactor media library via Cloudinary
- Minimally process raw JPG from camera
Make a new directory called(don't have to do this)PHOTOS
, then copy all of the edited photos intoPHOTOS
- Run ImageOptim
Rename raw file extensions from(don't have to do this).JPG
to.jpg
Create two new directories titled(don't have to do this)thumbs-med
andthumbs-sm
Copy all photos in(don't have to do this)PHOTOS
to each of thethumbs
directoriesAdd the appropriate prefix to each of the(don't have to do this)thumbs
directories- Resize the photos in each of the thumbnail directories as appropriate
mogrify -resize 25% thumbs-med/*.jpg && mogrify -resize 100x100 thumbs-sm/*.jpg
Move all of the photos inside(don't have to do this)PHOTOS/
to../products/
as the largest set of photos, then move (or add to)thumbs-med/
andthumbs-sm/
to../products/
- Minimally process raw JPG from camera
- Run ImageOptim
- Resize the photos in each of the thumbnail directories as appropriate
# Azellaz v1
# REAL CODE
mogrify -resize 25% thumbs-med/*.jpg && mogrify -resize 100x100 thumbs-sm/*.jpg
<!-- Azellaz v2 -->
<!-- FAKE CODE EXCEPT FOR CLOUDINARY IMAGE TRANSFORMATIONS -->
<img
src="https://res.cloudinary.com/demo/image/upload/azellaz/w_0.25/thumbs-med-product.jpg"
/>
<!-- see https://cloudinary.com/documentation/image_transformations?query=scale&c_query=Resizing%20and%20cropping%20images%20%E2%80%BA%20scale#limit -->
<img
src="https://res.cloudinary.com/demo/image/upload/azellaz/w_100,h_100,c_limit/thumbs-sm-product.jpg"
/>
Maybe all image "fields" or units should have their associated metadata - no, because then the data inputter has to manually input all that. Go w/ the template being the source for how the base image is used.
Steps taken:
- Make 3 copies of the original image (11 MB) of the current home page hero image (
images/staging/PHOTOS/carousel/small-tote-indigo-shibori-white-maroon-leather-lookbook3.jpg
). - Apply the following ImageOptim config to each photo
- Strip metadata, no lossy minification, optimization level
extra
; the output saved 5.3% (10.7 MB end size) - Strip metadata, enable lossy minification to 99% jpg quality, optimization level
extra
, the output saved 14.3% (7.9 MB end size) - Strip metadata, enable lossy minification to 97% jpg quality, optimization level
extra
, the output saved 50.3% (5.6 MB end size)
- Strip metadata, no lossy minification, optimization level
image_2_with_q_auto_transformation:
- url: https://res.cloudinary.com/dn6buftkw/image/upload/v1580318832/q_auto/hero-at-97-percent-optimized_small-tote-indigo-shibori-white-maroon-leather-lookbook3.jpg
- transfer_size: 1.27 MB
-
Make a copy of all files in
images/raw-dog-and-others/archived-from-staging/edited thru 2017-06-28/new - needs to be optimized
-
Run imageoptim with standard jpg exif strip, no lossy minification, and insane optimization speed
-
Upload to cloudinary under official Azellaz account
It's number 2 above that needs to be repeated for each image before uploading to cloudinary
- az.css: Change
.mainBag4
background-image url to a cloudinary url that includes a quality transformation -- the difference is - every template that renders an image
- branch: dev
- description: Fix version number DOH!
- package*.json
- branch: dev
- description: Keep
products/
via .gitkeep for the Netlify build to succeed!
- products/.gitkeep
- newProductPages.js: delete files in products/ only if not .gitkeep
- branch: dev
- description: update products data dir now that the product page creation flow is ready
- _data/allproducts/: rename _data/products/
- admin/config.yml: update products collection folder path
- newProductPages.js: update productDataDir
- productsDataToProductsFiles.js: Move to
archive/code/
- branch: dev
- description: Update front end to implement new back end
- admin/config.yml: fix
imgSecondarySet
value for yaml array in front matter - _config.yml: Add
defaults
property for product json files for rendering the shop based on the new product data model (individual json files per product, vs one json file for all products) - newProductPages.js: add
jsArray2Yaml()
and update yaml front matter - .gitignore: ignore
products/*.md
dir since they are now auto-generated - package.json: Add
refreshProductPages
step to start script - _includes/shop-grid.html: refactor around new product data model
- _includes/shop-grid-item.html: refactor around new product data model
- _includes/product-page.html: refactor around new product data model
- _includes/product-thumbnails.html: refactor around new product data model
- _includes/meta-product.html: refactor around new product data model
- branch: dev
- description: Get netlify cms back end working (ie: publishing new pages and editing old pages). The principle dynamic is between
admin/config.yml
and_data/allproducts/*.json
, and then the yaml front matter in the auto-generated pages (vianewProductPages.js
) inproducts/*.md
.
This really represents v2, since the way for the staff user to update the site has now changed. Although it's still possible to edit json files in the repo; though doing so will always be possible.
- Make new cms users
BZ Netlify > azellaz > Identity > Invite Users > input user email
- Login
url: https://www.azellaz.com/admin
- Un/Publish a page
a. Login b. Choose the collection of information to edit on the left (currently only "Products") c. Choose file to edit, or click the "New Products" button d. Toggle the "Include item in shop?" on to publish page, toggle it off to not publish or unpublish page
products/
is now auto-refreshed via
newProductPages.js
is called before jekyll build
via npm build
-
_data/products.json
has been destructured into_data/allproducts/*.json
-
Made data parity between each product json file and the Netlify CMS config
- productsDataToProductsFiles.js - single-purpose tool to use the work already put into defining the data in
_data/products.json
by creating new data files for each object - _data/allproducts/: A json file for each product contained in _data/products.json. This is the folder that Netlify CMS looks at for editing products collection data.
- admin/config.yml:
- add the appropriate fields to match product data model
- change the branch and site_url fields for dev work
- _includes/meta-product.html: refactor use of slug
- _includes/product-page.html: refactor use of slug
- _includes/product-thumbnails.html: refactor use of slug
- _layouts/product.html: remove for loop and if statement at root of html
- branch: init-netlifycms
- description: Wire up Netlify CMS
- /admin
- index.html
- config.yml
- index.html: Added netlify identity widget to bottom of page
- branch: corner-borders-patch-2
- description: Previous patch missed unrounding the hero page bg-darken wrappers
- hero.html: Unround the
<p>
corners - header.html: Unround the
<nav>
corners
- branch: corner-borders-patch
- description: Previous patch missed unrounding the flash borders
- branch: corner-borders
- description: Refactor all rounded corners to not rounded
- Also thinking of design possibilities while looking at https://www.pawenastudio.com/ and https://shopdanabechert.com/; see these notes in design.md
- design.md: Notes on future design changes
- _includes/hero.html
- _includes/header.html
- _includes/shop-filter-btns.html
- branch: master
- description: Old products were still getting generated because of a folder that was still around from the debugging phase before I implemented the newProductPages.js workflow.
- new-products/
- branch: update-product-pages
- description: I noticed the products/ dir has more pages than are currently listed in the shop. This means that the last time we updated products.json and the shop, we didn't run newProductPages.js.
This needs to be added to some docs!
- products/
- maintenance.md
- branch: metadata-images
- description: I need to get a grasp on the seo metadata images. Hithertofore, the "featured image" base file name was added to _config.yml, but the file name was an older convention that Abbie changed soon after, but the metadata featured image did not get updated, so the image has been broke in the twitter card for some time now. Instead of hardcoding in the name of the preferred image at any given time, there should be some directory in images/ that is named something like images/meta/. There should be some docs that mention the meta images as a task that needs to be maintained over time. (there should be other maintenance things listed in the docs too, like deleting/generating new product pages when products.json is updated, meta images, twitter card validator for new pages, etc.)
TODO Also, the metadata includes are filled with repetition. While the last release abstracted out the metadata page modules from one long include, they can still be boiled down more.
Also, _config.yml needs to be organized into sections, like "social links", "images", "meta images", "prose content", etc.
- images/meta/: create dir with duplicated images to be used strictly for metadata
- _config.yml: refactored meta image property names
- _includes/meta-*.html: Updated image content, removed meta tags with empty keyword content
- branch: seo
- description: Started out by wanting to add metadata for the portfolio page. Then scope changed to refactor the approach to generating page metadata.
- _includes/meta-about.html
- _includes/meta-contact.html
- _includes/meta-home.html
- _includes/meta-portfolio.html
- _includes/meta-product.html
- head.html: replaced hardcoded logic with includes
- branch: master
- description: quick patch home page buttons
- _includes/hero.html: Add portfolio button
- _includes/shop-filter-buttons.html: Change font weights to normal
- branch: gallery
- description:
- add a gallery of older products
- clean up other odds and ends (like adding this changelog)
The project started out named 'Gallery', but ended up with 'Portfolio'.
- CHANGELOG.md
gallery.json: I started by creating a json file with an array of all the image gallery file names, but this introduced another layer of abstraction that would need maintenance every time Abbie wants to change the order of the gallery display. Instead of maintaining this data file, I utilized Jekyll's static_files api, which allows me to loop over an arbitrary collection of static files, like those in images/Gallery!- portfolio.html
- portfolio-grid.html
- portfolio-grid-item.html
-
package*: Responded to a npm audit by upgrading braces to 2.3.1, still got the warning; upgraded to 2.3.2, still got the warning. So even though package.json is now polluted with this sub sub sub dependency, I'm keeping it as is and will deal with audits down the line.
-
Gemfile.lock: I ran into build problems when working on this feature branch on a different computer with a newer ruby set up. I banged my head against the wall for a good amount of time, then figured it out. The 3 files associated with the ruby nature of the project are:
- .ruby-version: this is useful for netlify, as well as local development, but not necessary
- Gemfile: this is the main file, basically the dependencies and devDependencies in node - it just lists the main libraries to bring into the project (of course, they bring in other depdencies too).
- Gemfile.lock: this is auto generated, doesn't seem to care about the ruby -v, but does record bundle -v
Note: the bundle -v is impacted by the presence of "BUNDLED WITH" in a Gemfile.lock if it exists. So if you want to see a specific bundle -v, you may have to delete the lock file, then run bundle -v to see the desired -v, then run bundle install to re-create the lock file.
Don't forget about RVM!
In the future, when wanting to upgrade or downgrade ruby -v and bundle -v, use RVM to install ruby -v, then use gem to install bundle -v. Then run bundle install
to output the Gemfile.lock.
- see this !so answer
- and this informative !so post
- az.css: Add some color styles for design debugging
- shop-fixed-logo.html: Renamed fixed-logo.html for greater scope
- _config.yml: Added a
defaults
property to remove a layer of abstraction in maintaining the gallery photos by "adding front matter" to the gallery images. This pseudo front matter makes it easy to query for a set of static files and do something with them, via the Jekyll static_files api. Via Jekyll docs:The
defaults
key holds an array of scope/values pairs that define what defaults should be set for a particular file path