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 "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"> <footer style="text-align: right; font-style: italic; padding: 0.5em 1em">
<p> <p>
<small <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 support!</small
><br /> ><br />
<slot /> <slot />

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

@ -5,16 +5,18 @@
See more on https://ayco.io/gh/McFly See more on https://ayco.io/gh/McFly
--> -->
<my-head> <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> <script server:setup>
const project = { const project = {
name: "McFly", name: "WebComponent.io",
description: "Back to the Basics. Into the Future." description: "Write web components in <em>Easy Mode</em>.",
}; };
const author = { const author = {
name: "Ayo Ayco", name: "Ayo Ayco",
url: "https://ayco.io" url: "https://ayco.io",
} };
</script> </script>
</my-head> </my-head>
<body> <body>
@ -24,38 +26,43 @@
</awesome-header> </awesome-header>
<main> <main>
<h2>Welcome to {{ project.name }}</h2> <h2>Welcome to {{ project.name }}</h2>
<p>Here's a vanilla custom element: <vanilla-hello-world /></p>
<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>
<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"> <code-block language="js">
class HelloWorld extends HTMLElement { <pre>
static get observedAttributes() { export class Counter extends WebComponent {
return [&quot;my-name&quot;]; static properties = [&quot;count&quot;];
} onInit() {
this.props.count = 0;
connectedCallback() { this.onclick = () => ++this.props.count;
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`);
};
}
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;`;
}
} }
get template() {
return `&lt;button&gt;${this.props.count}&lt;/button&gt;`;
} }
}</pre
>
</code-block> </code-block>
</main> </main>
<my-footer> <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> </my-footer>
</body> </body>
</html> </html>