Nature immersive svelte components

Colection of svelte components used to build @naturenews immersive articles

Config based on the sveltejs/component-template

Preview the compontents in a Storybook here: https://chris-creditdesign.github.io/nature-immersive-svelte-components

Setting up

• Run npm init

Preview

• Run npm run storybook

Build docs

• Run build-storybook to build a static version of Storybook in the docs folder to publish on github pages.

Consuming components

Your package.json has a "svelte" field pointing to src/index.js, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like rollup-plugin-svelte or svelte-loader (where resolve.mainFields in your webpack config includes "svelte"). This is recommended.

For everyone else, npm run build will bundle your component's source code into a plain JavaScript module (dist/index.mjs) and a UMD script (dist/index.js). This will happen automatically when you publish your component to npm, courtesy of the prepublishOnly hook in package.json.

TODO:

• Caption space for image
• Footer links
• Check for intersectionObserver before implementing StaticImage
• Implement grid above-min function
• High res images onMount // and/or lazyLoad / intersection observer
• Add stories for Layout Switcher
• Static Image - remove image container on mobile
• Focus states for header links
• NoJS state for StaticImage section
• Set font sizes to values https://www.smashingmagazine.com/2018/05/css-custom-properties-strategy-guide/
• LayoutGrid above min

References

• prefers-reduced-motion
• svelte use:action to lazy load images
• svelte use:action
• Lazy Loading Images and Video
• DOMException: The play() request was interrupted
• svelte media query demo
• A Strategy Guide To CSS Custom Properties
• HTMLImageElement.decode