bkwld / cloak Goto Github PK

Problem

I came across a situation where, in Contentful, I embedded an SVG image into a rich-text field. On the front end, the image ended up looking low resolution. It was because contentful-visual created srcset and webpSrcset props, and usedContentful CDN image transforms to create a low resolution srcset of WEBP images.

Solution

It would be nice to have a way to tell vue-visual that this is an already-optimized SVG, and please don't generate a srcset for me. Not sure what the best solution here is:

1. Auto-detect SVG extension and automatically prevent srcset generation?
2. Add a noSrcset prop?

I lean toward # 1 because in my mind SVGs and srcsets are never compatible.

I can do the work, just want @weotch to weigh in.

Like:

	anchorParser:
		internalUrls: [
			/^https?:\/\/localhost:\d+/

			# Use current URL from Netify
			do ->
				return unless url = process.env.URL
				url = url.replace /[\/\-\.]/g, '\\$&'
				return new RegExp "^#{url}"

			# Use Netlify subdomain URL
			do ->
				return unless name = process.env.SITE_NAME
				name = name.replace /[\-]/g, '\\$&'
				return new RegExp "^https?:\/\/#{name}\.netlify\.app"

This is example I saw during Nuxt Nation presentation. It has the advantage of not having to invoke routes() and depend on that function being memoized.

See https://bukwild.slab.com/posts/wip-cloak-package-approach-arp4lcrr#hlm3d-override-with-project-components

I didn't directly port this from existing pages because I'd like to find a better way to handle the global defaults. Also, I want to break it up into multiple methods because the current implementation are a sorta cumbersome.

See https://vue-loader.vuejs.org/guide/asset-url.html#transform-rules and transformAssetUrls

{
  video: ['src', 'poster'],
  source: 'src',
  img: 'src',
  image: ['xlink:href', 'href'],
  use: ['xlink:href', 'href']
}

I bet I could add vue-visual to this list...

So there is a get-craft-pages and get-contentful-pages in the end

• Add option
• Use different build scripts depending on CMS choice
• Add contentful config concern similar to Craft concern

See https://app.asana.com/0/0/1200444862454907/1200456968898962/f

For example, this is a build module I was using before:

/*
Append redirects that don't end in an anchor to the _redirects file
*/
import axios from "axios"
import { resolve } from "path"
import { readFileSync, writeFileSync } from "fs"

// Query for redirects
const getEntries = `query getRedirects {
	entries(type:"redirects") {
		... on redirects_redirects_Entry {
			from
			to
			code
		}
	}
}`

// Trigger after the static files are copied to the dist, that's the version
// that will get edited
export default async function redirects() {
	this.nuxt.hook("generate:distCopied", async function (builder) {
		console.log("  Adding server side redirects");

		// Open up _redirects
		const file = resolve(__dirname, "../dist", "_redirects")
		let redirects = readFileSync(file, "utf8")

		// Fetch the server side redirects
		const response = await axios({
			url: process.env.CMS_ENDPOINT,
			method: "post",
			headers: {
				"Content-Type": "application/json",
			},
			data: {
				query: getEntries,
			},
		})

		// Add CMS redirects
		response.data.data.entries.forEach((rule) => {
			redirects += `\n${rule.from} ${rule.to} ${rule.code}!`;
		})

		// Write the redirects file
		writeFileSync(file, redirects);
	})
}

https://nuxtjs.org/tutorials/moving-from-nuxtjs-dotenv-to-runtime-config/#migrating-to-the-nuxtjs-runtime-config-from-nuxtjsdotenv

https://github.com/BKWLD/cloak/blob/master/mixins/page/craft-preview.coffee

Do BKWLD/vue-routing-anchor-parser#12 and then remove https://github.com/BKWLD/cloak/blob/master/plugins/smart-link.coffee

• Disable placeholder color if image is a png (if the CMS provides a mimetype) or has .png as the suffix
• Change the default color to some translucent black color so it doesn't look bad when over a background color

For instance, alt

I think this behavior could be added by a Nuxt module rather than a standalone file. This may fix some of my ESM type issues. Ha or could complicate them ... but it does seem more Nuxt-y.

Steps to reproduce:

• Checkout HFO main
• Set your ENV to the Contentful Preview settings:
  • APP_ENV=dev
  • CONTENTFUL_ACCESS_TOKEN=<the preview token>
  • CONTENTFUL_PREVIEW=true
• Run yarn generate

Expected: Towers with status=draft, such as demo-slide-marquee-block, should be generated.

Observed: Draft towers don't get generated.

• Transpile contentful page gql files
• Document that it's expecting gql files that are named the same as the pageName
• Make the pages script loop through all pageTypes and return routes

Based on https://github.com/getsentry/sentry-webpack-plugin/blob/master/README.md

webpackConfig: setCommits:
			auto: true

Like components/global/btn.vue doesn't update immediately, usually doing a full refresh after a change is quicker. Guessing it's a Nuxt bug but maybe I can workaround it.

https://github.com/BKWLD/credits

Note 429 errors here: https://app.netlify.com/sites/sxmmedia-refresh/deploys/60c539296534e1000770d67e

When GTM_ID is commented out in .env then we don't load the GTM module at all. However, this means that site's who intended to use GTM but may have it deactivated (like in local dev) will throw an error with calls to @$gtm.push ... meaning you have to remember to use @$gtm?.push.

I think $gtm should always exist.

• Copy over contentful-visual
• Move shared code between contentful-visual and craft-visual into cloak-visual, a new functional component that those higher order components use for the majority of their functionality
• Add gql fragments for Contentful

Currently it continues to generate pages, which is wasteful. For example: https://app.netlify.com/sites/papa-and-barkley-cbd/deploys/614cc54645b81f09cb93c5ef

This means that a new Craft entry can be previewed before deploy finishes on a SSG site.

Downside is that when the fallback is rendered (like it will on a 404 page), a client side GQL query is made to Craft for data. It would be great to serve this from SSG'ed JSON if possible.

Also, the globals aren't available in the initial payload so you may need to v-if=$store.state.globals.loaded the default layout so that we don't try to use global data on the fallback change (like for header/footer) that doesn't exist yet.

Maybe this is done through a page mixin that is included in the package

Probably by setting an ENV ...

Example:

Here's a GIF example. This is an image asset embedded in a Contentful Rich Text field. The image's natural size is 1000 x 1000px.

Expected:

The image should be shown at its natural width (1000px). If the container or viewport is too small, then the image should scale down proportionally to fit the container.

Observed:

The width scales down, but the height remains constant (1000px) causing gaps at top and bottom.

I'll commit the solution to this issue branch.

https://nuxtjs.org/docs/2.x/internals-glossary/$nuxt#refreshing-page-data

Could be cleaner