funkhaus / fuxt Goto Github PK

Lets make it easy to enter XD units into our CSS files, and have them converted to ems.

Letter spacing:
https://benmarshall.me/convert-photoshop-letter-spacing-to-css/

Line height:
https://superuser.com/questions/607171/how-to-calculate-line-height-from-psd-file/699884

Note: Test

If you have a small image (like 700px wide), the Gutenberg image block will default to a max-width of "full" with becomes 100% wide... it will scale up the image... We should never allow the max-width to go above the pixel width of the image I think.

Would be great to have a preload prop on wp-image that does this: https://web.dev/preload-responsive-images/

Should be false by default.

Anywhere can add JSON-LD easily and predictably? For sure video-stage component head() and perhaps blog posts? Anywhere else?

https://developers.google.com/search/docs/guides/intro-structured-data

Right now the gallery is applying 2 columns to the image on the front end when it's clearly set in the editor to 1 column.

Currently on https://burch-api.flywheelsites.com/wp-admin/post.php?post=377&action=edit

<figure class="wp-block-gallery columns-1 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://burch-api.flywheelsites.com/wp-content/uploads/2021/10/210065695_240315107645572_2061082156188183164_n.jpg" alt="" data-id="388" class="wp-image-388"/></figure></li></ul></figure>

See: https://www.netlify.com/blog/deprecation-of-post-processing-asset-optimization-feature/

Now that Netlify has disabled minify, we need to do it in Nuxt.

Swap out WebFontLoader for this I think:
https://github.com/danielroe/nuxt-font-metrics

Would you possibly share your lazy-loader component?

I think Gutenberg upgraded Quotes to actually contain inner blocks of P tags. I fixed this on this site:
https://github.com/funkhaus/picture-north-frontend/commit/35e8a7bbe2387d2687e2baad0fd1615fdb70483c

But wanted to wait for this to be fixed first, to make sure it wasn't a Gutenberg issue:
funkhaus/wp-gql-gutenberg#44

Also, probably should update the Vue component to actually use a Gutenberg-paragraph element so things like background-color and alignment work in the quote.

Would be nice to have better examples of pages/templates and the GQL that goes with them.

Team wants an out of the box example of lazy loading working for pages and news posts

Auto SEO plugin appears to no longer exist. Is this a WIP?

Update this to only have woff2: https://github.com/funkhaus/fuxt/blob/master/styles/fonts.css

Maybe explore having this as the loader font somehow? http://danross.co/flow/

Would be great if we could do this:

query MyQuery {
  mediaItems {
    nodes {
      sourceUrl
      ... on Svg {
           html
      }
    }
  }
}

And html gives us the contents of the SVG that was uploaded.

Webfontloader doesn't add classes to anymore due to Vue overwriting them. So would be good to add that back in using Vue and the store events.

https://github.com/search?q=repo%3Afunkhaus%2Fmjz-frontend%20fontsLoaded&type=code

The WordPress editor now is a “block” editor, and includes lots of flexibility (they call it Gutenberg). On the frontend, we’ve built a lot of Vue components that work with the backend “blocks”. But the CSS is very complicated and I’m not sure it is as good as it could be. I’d really like to figure out a better way to architect these “blocks” and have them still be flexible for the frontend. I think this is mostly a CSS problem as the Vue components are pretty basic and I’ve built them already (maybe some slight changes to HTML would help).
https://github.com/funkhaus/fuxt/tree/master/components/gutenberg
https://github.com/funkhaus/fuxt/blob/master/components/WpGutenberg.vue

The key is these blocks need to be generic and flexible mostly, as we use them on all our sites. Ideally we just tweak some fonts and colors on every new site, maybe change some props or perhaps CSS variables to tweak margins etc.

These “blocks" are what build out a page like this:
https://mssngpeces.com/projects/commercials/pinterest-calling-all-creators/

So, I’d really like someone to architect out a better CSS approach to all these blocks that interact with each other (it can get complex, with blocks nested inside a column-block).

The final level is making the frontend CSS match the WordPress editor approximately. How to do that is explained here:
https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/

We'd also want to merge in all our custom blocks that we build, and have those work with the CSS system we develop. So far the sites for Tool and MssngPeces have custom blocks for theme. We'd need to include the PHP templates for them in fuxt-backend, and include a blocks.json file of the ACF export's in fuxt backend too.

It should be at 4.0.2 or above now I think

You wrote on the TODO list:

Perhaps add this for better SEO: https://developers.google.com/search/docs/guides/intro-structured-data

Can i start implementing my wp-graphql-google-schema see - https://github.com/izzygld/wp-graphql-google-schema?

When developing in Storybook, hot reload doesn't seem to work.

npm i
npm run storybook

Then edit a story or component and you'd expect to see the changes take effect without a page reload required.

Reported by @Sveb

Update WP-Image component to show featured thumbnail still image on mobile if device is in low-power mode (so that users don't see the play icon for the video).

We should start using Node v18 just for future proofing.

Would be useful to have an example of a working site, using fuxt. Perhaps there is an old Funkhaus site we could just open source?

Update WP-Image component to show featured thumbnail still image on mobile if device is in low-power mode (so that users don't see the play icon for the video)

Would be a good idea to not track any URL that has ?preview in it... Like this:

Let's replace this sort of code:
const pages = _get(data, "creators.children.nodes", []) || []

With this:
const pages = data?.creators?.children?.nodes || []

May be better as an additional repo to the fuxt stack. But I found testing https://github.com/northosts/wuxt was really simple to setup and have running.

I’d imagine their structure could be basically copied and would work for fuxt. I may even set one up for my own use, although being to update from the source rather than copy/paste files would be nice.

Currently WordPress is saving Blur Hash's with every image as an ACF field.

What is a Blur Hash?
https://github.com/woltapp/blurhash

We just need to use that Blur Hash in the wp-image component instead of the solid background color we use currently. Ideally there would be a prop that enables/disables it blur-hash.

I think ideally we have a prop blur-hash that can be used to supply a blur hash, but the image prop can also include the blur hash as meta (like it does with image height/width currently). I figure if you set blur-hash="none" then it disables the blur hash and uses the current background color setting.

Is there some documentation for this? This looks very interesting but I am a beginner and need some guidance. The docs on vuehaus is pretty detailed and gave me a good starting point.

One of the only things we use SASS for is the media queries variables. I think we can replace that with this PostCSS plugin.

https://www.npmjs.com/package/postcss-media-variables

This would enable us to remove SASS and SASS-Loader dependencies, which I'm all for.

Also might need to then use this, as it's the other thing needed from SASS:
https://www.npmjs.com/package/postcss-nested

I think PostCSS is in Nuxt by default now.

I need to upgrade the video embed block to use the custom video player (and we consider the player closed source), but only if it's available as not all sites use the custom player.

I did this for these sites:
https://github.com/funkhaus/mirada-frontend/blob/master/components/gutenberg/Embed.vue
https://github.com/funkhaus/missing-pieces-frontend/blob/master/components/gutenberg/Embed.vue
https://github.com/funkhaus/superbloom-frontend/blob/master/components/gutenberg/Embed.vue

Nice to use an intersection to load a video or image only when close to being in view. Should be enabled/disabled using a prop.

Upon repo clone, npm install, changing .env vars and then running dev server. This error persistently pops up

ERROR: Error Can't set headers after they are sent.

Does anyone have any idea on why this is so persistent?

My GQL endpoint WP backend is using your fuxt-backend theme.

This might be a good way to handle all the embed options: https://github.com/Gomah/vue-embed

Currently Netlify wants us to put the _redirects file in /static/ and then does magic to handle the redirects... Seems like we should have _redirects file in the project root, and then the Nuxt build process puts it where it needs to be for Netlify, not living in static always.

Should work with multiple FB pixels, and should pull from a site options panel I think.

Need to be able to support Instagram/TikTok/Twitter/Facebook/SoundCloud embeds.

Best way to keep in touch with the dev team?

It would be nice to have a linter just group and organize our CSS properties in a consistent way. I think using something like this is the answer. Getting it to work with Vue SFC files is the trick.

https://www.npmjs.com/package/stylelint
https://www.npmjs.com/package/stylelint-order

fux-master is a Broken Theme - stylesheet is missing.

Perhaps possible to update store sTop from the plugin.

Be sure to use a conditional to protect it to not load the plugin twice.

See here for some details on Nuxt: locomotivemtl/locomotive-scroll#15

The 100dvh unit should solve the 100vh issue on mobile.

https://caniuse.com/viewport-unit-variants

https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/