Collection of svelte components to build nature immersive articles
npm install 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
- Run npm init
- Run npm run storybook
- Run build-storybook to build a static version of Storybook in the docs folder to publish on github pages.
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.
- 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
- 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