ayo/wcb
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(site): initial content

Browse source
This commit is contained in:
Ayo 2023-11-22 10:45:23 +01:00
parent b5bb13a7d2
commit 3e87327440
5 changed files with 49 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.vscode/settings.json vendored
View file

@ -1,4 +1,3 @@
{
"editor.formatOnSave": true,
"js/ts.implicitProjectConfig.checkJs": true
}

3
site/public/prism.css Normal file
View file

@ -0,0 +1,3 @@
/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}

7
site/public/prism.js Normal file
View file

File diff suppressed because one or more lines are too long

3
site/src/components/my-footer.html
View file

@ -1,7 +1,8 @@
<footer style="text-align: right; font-style: italic; padding: 0.5em 1em">
<p>
<small
>✨ Star on <a href="https://github.com/ayoayco/McFly">GitHub</a> to
>✨ Star on
<a href="https://github.com/ayoayco/web-component-base">GitHub</a> to
support!</small
><br />
<slot />

67
site/src/pages/index.html
View file

@ -5,16 +5,18 @@
See more on https://ayco.io/gh/McFly
-->
<my-head>
<title>McFly: Back to the Basics. Into the Future.</title>
<title>WebComponent.io: Write web components in Easy Mode.</title>
<link rel="stylesheet" href="prism.css" />
<script src="prism.js" defer></script>
<script server:setup>
const project = {
name: "McFly",
description: "Back to the Basics. Into the Future."
name: "WebComponent.io",
description: "Write web components in <em>Easy Mode</em>.",
};
const author = {
name: "Ayo Ayco",
url: "https://ayco.io"
}
url: "https://ayco.io",
};
</script>
</my-head>
<body>
@ -24,38 +26,43 @@
</awesome-header>
<main>
<h2>Welcome to {{ project.name }}</h2>
<p>Here's a vanilla custom element: <vanilla-hello-world /></p>
<p>
Here's a vanilla custom element: <vanilla-hello-world />
Our
<a href="https://www.npmjs.com/package/web-component-base"
>base class</a
>
provides zero-dependency, ~600 Bytes (minified & gzipped), JS base class
for creating reactive custom elements easily
</p>
<p>
When you extend the WebComponent class for your component, you only have
to define the template and properties. Any change in any property value
will automatically cause just the component UI to render.
</p>
<p>The result is a reactive UI on property changes.</p>
<code-block language="js">
class HelloWorld extends HTMLElement {
static get observedAttributes() {
return [&quot;my-name&quot;];
<pre>
export class Counter extends WebComponent {
static properties = [&quot;count&quot;];
onInit() {
this.props.count = 0;
this.onclick = () => ++this.props.count;
}
connectedCallback() {
let count = 0;
const currentName = this.getAttribute(&quot;my-name&quot;);
if (!currentName) {
this.setAttribute(&quot;my-name&quot;, &quot;World&quot;)
}
this.onclick = () => {
this.setAttribute(&quot;my-name&quot;, `Clicked ${++count}x`);
};
get template() {
return `&lt;button&gt;${this.props.count}&lt;/button&gt;`;
}
attributeChangedCallback(property, previousValue, currentValue) {
if (property === &quot;my-name&quot; && previousValue !== currentValue) {
this.innerHTML = `&lt;button style=&quot;cursor:pointer&quot;&gt;Hello ${currentValue}!&lt;/button&gt;`;
}
}
}
}</pre
>
</code-block>
</main>
<my-footer>
<small>A project by <a href="{{ author.url }}">{{ author.name }}</a></small>
<small
>A project by <a href="{{ author.url }}">{{ author.name }}</a></small
>
</my-footer>
</body>
</html>
</html>