wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

various tests

Browse source
This commit is contained in:
madrilene 2022-10-14 15:19:46 +02:00
parent 3bcf6f15af
commit 32945ef13b
5 changed files with 101 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
src/_includes/webc/my-counter.webc
View file

@ -1,49 +1,51 @@
<button class="test-button" type="button">Add</button> <is-land on:visible>
<output @html="2"></output> <button class="test-button" type="button">Add</button>
<output @html="2"></output>
<style webc:scoped> <style webc:scoped>
:host > button { :host > button {
padding: var(--space-xs) var(--space-xl); padding: var(--space-xs) var(--space-xl);
cursor: pointer; cursor: pointer;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
background: var(--color-primary); background: var(--color-primary);
border: none; border: none;
border-radius: 0.6818181818em; border-radius: 0.6818181818em;
box-shadow: 0.3181818182em 0.3181818182em 0 black; box-shadow: 0.3181818182em 0.3181818182em 0 black;
color: var(--color-dark); color: var(--color-dark);
display: inline-block; display: inline-block;
font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-size: clamp(1.1rem, 1.8vw, 1.4rem);
font-weight: 600; font-weight: 600;
letter-spacing: 0; letter-spacing: 0;
padding: 0.45em 1.5em; padding: 0.45em 1.5em;
position: relative; position: relative;
text-decoration: none; text-decoration: none;
text-transform: none; text-transform: none;
}
:host > output {
padding: var(--space-xs) var(--space-xl);
}
</style>
<script>
window.customElements.define(
'my-counter',
class extends HTMLElement {
connectedCallback() {
console.log(this);
let btn = this.querySelector(':scope button');
let output = this.querySelector(':scope output');
let value = parseInt(output.innerText);
console.log(this, btn);
btn.addEventListener('click', () => {
output.innerText = ++value;
});
}
} }
);
</script> :host > output {
padding: var(--space-xs) var(--space-xl);
}
</style>
<script>
window.customElements.define(
'my-counter',
class extends HTMLElement {
connectedCallback() {
console.log(this);
let btn = this.querySelector(':scope button');
let output = this.querySelector(':scope output');
let value = parseInt(output.innerText);
console.log(this, btn);
btn.addEventListener('click', () => {
output.innerText = ++value;
});
}
}
);
</script>
</is-land>

28
src/_includes/webc/speedlify-score.webc
View file

@ -1,14 +1,16 @@
<speedlify-score <is-land on:visible>
webc:raw <speedlify-score
:class="this.class" webc:raw
:hash="this.hash" :class="this.class"
speedlify-url="https://www.speedlify.dev" :hash="this.hash"
:score="this.score" speedlify-url="https://www.speedlify.dev"
:weight="this.weight" :score="this.score"
:requests="this.requests" :weight="this.weight"
></speedlify-score> :requests="this.requests"
></speedlify-score>
<template> <template data-island="once">
<link rel="stylesheet" :href="`/components/speedlify-score.css`" /> <link rel="stylesheet" :href="`/assets/components/speedlify-score.css`" />
<script :src="`/components/speedlify-score.js`"></script> <script :src="`/assets/components/speedlify-score.js`"></script>
</template> </template>
</is-land>

50
src/_includes/webc/youtube-lite-player.webc
View file

@ -1,21 +1,31 @@
<lite-youtube <is-land
:videoid="this.slug" on:visible
:params="this.start ? `start=${this.start}` : false" :import="`/assets/components/lite-yt-embed.js`"
:playlabel="`Play${this.label ? `: ${this.label}` : ''}`" class="fluid-width-video-wrapper"
:style="`background-image:url('${this.poster || `https://i.ytimg.com/vi/${this.slug}/maxresdefault.jpg`}'); max-width: 100%`"
> >
<a <lite-youtube
:href="`https://youtube.com/watch?v=${this.slug}`" :videoid="this.slug"
class="lty-playbtn" :params="this.start ? `start=${this.start}` : false"
title="Play Video" :playlabel="`Play${this.label ? `: ${this.label}` : ''}`"
><span :style="`background-image:url('${this.poster || `https://i.ytimg.com/vi/${this.slug}/maxresdefault.jpg`}'); max-width: 100%`"
class="lyt-visually-hidden" >
@html="`Play Video${this.label ? `: ${this.label}` : ''}`" <a
></span :href="`https://youtube.com/watch?v=${this.slug}`"
></a> class="lty-playbtn"
</lite-youtube> title="Play Video"
><span
<!-- <template> class="lyt-visually-hidden"
<link rel="stylesheet" :href="/assets/components/lite-yt-embed.css" /> @html="`Play Video${this.label ? `: ${this.label}` : ''}`"
<script :src="/assets/components/lite-yt-embed.js"></script> ></span
</template> --> ></a>
</lite-youtube>
<template data-island>
<style>
/* Plugin bug: clicking the red youtube play icon in the center would navigate to youtube.com */
lite-youtube:defined .lty-playbtn {
pointer-events: none;
}
</style>
<link rel="stylesheet" :href="`/assets/components/lite-yt-embed.css`" />
</template>
</is-land>

8
src/_layouts/base.njk
View file

@ -24,6 +24,10 @@
<link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" /> <link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" />
<!-- defer js -->
<script type="module" src="/assets/app.js" defer></script>
<script type="module" src="/assets/components/is-land.js" defer></script>
<!-- Add facility for pages to declare an array of stylesheet paths --> <!-- Add facility for pages to declare an array of stylesheet paths -->
{% if pageStylesheets %} {% for item in pageStylesheets %} {% if pageStylesheets %} {% for item in pageStylesheets %}
<link <link
@ -59,9 +63,5 @@
{% renderTemplate "webc" %} {% renderTemplate "webc" %}
<script @html="this.getJS(this.page.url)"></script> <script @html="this.getJS(this.page.url)"></script>
{% endrenderTemplate %} {% endrenderTemplate %}
<!-- defer js -->
<script type="module" src="/assets/app.js" defer></script>
<script type="module" src="/assets/components/is-land.js" defer></script>
</body> </body>
</html> </html>

16
src/pages/test.njk → src/pages/test.webc
View file

@ -5,41 +5,31 @@ description: This is just a testing environment
layout: page layout: page
--- ---
Version number {{ meta.pkv }} Version number
<!-- sdfg --> <!-- sdfg -->
{% renderTemplate "webc" %}
<my-marquee>dsfgdfg</my-marquee> <my-marquee>dsfgdfg</my-marquee>
{% endrenderTemplate %}
<p> <p>
Icing jelly soufflé shortbread chocolate cake muffin gummies cotton candy lemon drops. Icing jelly soufflé shortbread chocolate cake muffin gummies cotton candy lemon drops.
Cake gummi bears dragée chocolate sweet croissant sweet croissant. Cake gummi bears dragée chocolate sweet croissant sweet croissant.
</p> </p>
{% renderTemplate "webc" %} <youtube-lite-player @slug="g2aTwnLgAc8" @label="{{ title }}"></youtube-lite-player>
<youtube-lite-player @slug="DC5fP_8Q8uQ" @label="{{ title }}"></youtube-lite-player>
{% endrenderTemplate %}
<h2>Testing counter</h2> <h2>Testing counter</h2>
<p>counter inside island, activate on interaction</p> <p>counter inside island, activate on interaction</p>
{% renderTemplate "webc" %} <speedlify-score></speedlify-score>
<is-land on:interaction>
<my-counter></my-counter>
</is-land>
{% endrenderTemplate %}
<p> <p>
Icing jelly soufflé shortbread chocolate cake muffin gummies cotton candy lemon drops. Icing jelly soufflé shortbread chocolate cake muffin gummies cotton candy lemon drops.
Cake gummi bears dragée chocolate sweet croissant sweet croissant. Cake gummi bears dragée chocolate sweet croissant sweet croissant.
</p> </p>
{% renderTemplate "webc" %}
<fancy-rule></fancy-rule> <fancy-rule></fancy-rule>
{% endrenderTemplate %}
<p> <p>
Marzipan croissant halvah sweet wafer sesame snaps cheesecake. Jelly candy canes toffee Marzipan croissant halvah sweet wafer sesame snaps cheesecake. Jelly candy canes toffee