An hr tag with style.
Important
Be sure to copy the file ./dist/wave.svg into the
root public folder on your web server. The CSS depends on that file.
npm i -S @substrate-system/wavy-hrESM and common JS via package.json exports field.
import '@substrate-system/wavy-hr'require('@substrate-system/wavy-hr')import '@substrate-system/wavy-hr/css'Or minified:
import '@substrate-system/wavy-hr/css/min'This calls the global function customElements.define. Just import, then use
the tag in your HTML.
import '@substrate-system/wavy-hr'<div>
<wavy-hr></wavy-hr>
</div>This package exposes minified JS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.
cp ./node_modules/@substrate-system/wavy-hr/dist/index.min.js ./public/wavy-hr.min.js<script type="module" src="./wavy-hr.min.js"></script>For server-side rendering scenarios, you can use the /html export to generate the HTML string without requiring a browser environment.
import { render } from '@substrate-system/wavy-hr/html'
const html = render()
// Returns: '<hr class="wavy-hr" />'// In your server-side rendering code
import { render } from '@substrate-system/wavy-hr/html'
function renderPage() {
return `
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://github.com/path/to/wavy-hr.css">
</head>
<body>
<h1>My Page</h1>
${render()}
<p>More content...</p>
</body>
</html>
`
}Note
When using server-side rendering, you still need to include the CSS file and
the wave.svg asset for proper styling. The render export only provides the
markup structure.