diff options
author | 2021-03-31 16:46:09 -0400 | |
---|---|---|
committer | 2021-03-31 16:46:09 -0400 | |
commit | d5b15a385153915cad7dbffd0d8893c39059c1ed (patch) | |
tree | 769240e3f6e52c31639f0500d97b87e45f202a6a /examples/snowpack | |
parent | d9084ff4ad9e25577846d3eb53046c2f0066097f (diff) | |
download | astro-d5b15a385153915cad7dbffd0d8893c39059c1ed.tar.gz astro-d5b15a385153915cad7dbffd0d8893c39059c1ed.tar.zst astro-d5b15a385153915cad7dbffd0d8893c39059c1ed.zip |
Support for custom elements (#45)
* Support for custom elements
Now you can use custom elements like so in Astro components:
```html
<script type="module" src="./datepicker.js">
<date-picker></date-picker>
```
These will be resolve relative to the current astro component. In the build these modules are run through the same bundle/minify process as components.
* Remove component from public
* Formatting
* Disable empty fn rule
Diffstat (limited to 'examples/snowpack')
-rw-r--r-- | examples/snowpack/astro/components/Nav.astro | 12 | ||||
-rw-r--r-- | examples/snowpack/astro/components/docsearch.js | 17 |
2 files changed, 23 insertions, 6 deletions
diff --git a/examples/snowpack/astro/components/Nav.astro b/examples/snowpack/astro/components/Nav.astro index d2c0e943c..0c97dd425 100644 --- a/examples/snowpack/astro/components/Nav.astro +++ b/examples/snowpack/astro/components/Nav.astro @@ -123,6 +123,10 @@ export let version: string = '3.1.2'; flex-grow: 1; } + > :global(.algolia-autocomplete) { + width: 100%; + } + @media (min-width: $breakpoint-m) { max-width: 600px; } @@ -344,9 +348,5 @@ export let version: string = '3.1.2'; } }; </script> -<script type="module" defer> - import docsearch from 'https://cdn.skypack.dev/docsearch.js/dist/cdn/docsearch.min.js'; - docsearch({ - apiKey: '562139304880b94536fc53f5d65c5c19', indexName: 'snowpack', inputSelector: '#search-form-input', debug: true // Set debug to true if you want to inspect the dropdown - }); -</script> +<script type="module" src="./docsearch.js"></script> +<doc-search api-key="562139304880b94536fc53f5d65c5c19" selector="#search-form-input"></doc-search> diff --git a/examples/snowpack/astro/components/docsearch.js b/examples/snowpack/astro/components/docsearch.js new file mode 100644 index 000000000..d7ae95f30 --- /dev/null +++ b/examples/snowpack/astro/components/docsearch.js @@ -0,0 +1,17 @@ +import docsearch from 'docsearch.js/dist/cdn/docsearch.min.js'; + +customElements.define('doc-search', class extends HTMLElement { + connectedCallback() { + if(!this._setup) { + const apiKey = this.getAttribute('api-key'); + const selector = this.getAttribute('selector'); + docsearch({ + apiKey: apiKey, + indexName: 'snowpack', + inputSelector: selector, + debug: true // Set debug to true if you want to inspect the dropdown + }); + this._setup = true; + } + } +});
\ No newline at end of file |