nature-immersive-svelte-components
v0.5.23
Published
Collection of svelte components to build nature immersive articles
Downloads
49
Readme
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