summaryrefslogtreecommitdiff
path: root/examples/snowpack
diff options
context:
space:
mode:
authorGravatar Matthew Phillips <matthew@matthewphillips.info> 2021-03-31 16:46:09 -0400
committerGravatar GitHub <noreply@github.com> 2021-03-31 16:46:09 -0400
commitd5b15a385153915cad7dbffd0d8893c39059c1ed (patch)
tree769240e3f6e52c31639f0500d97b87e45f202a6a /examples/snowpack
parentd9084ff4ad9e25577846d3eb53046c2f0066097f (diff)
downloadastro-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.astro12
-rw-r--r--examples/snowpack/astro/components/docsearch.js17
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