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

feat(site): update content with features list

Browse source
This commit is contained in:
Ayo 2023-11-24 11:01:06 +01:00
parent bda00b51b3
commit f4e74474c8
2 changed files with 9 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
site/src/components/code-block.js
View file

@ -31,7 +31,7 @@ class CodeBlockComponent extends HTMLElement {
if (inline) { if (inline) {
style.display = 'inline'; style.display = 'inline';
style.padding = '0.3em'; style.padding = '0.25em 0.3em';
} }
Object.keys(style).forEach((rule) => { Object.keys(style).forEach((rule) => {

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

@ -11,7 +11,7 @@
<script server:setup> <script server:setup>
const project = { const project = {
name: "WebComponent.io", name: "WebComponent.io",
description: "Write web components in <em>Easy Mode</em>.", description: "A simple reactivity system for web components",
}; };
const author = { const author = {
name: "Ayo Ayco", name: "Ayo Ayco",
@ -27,8 +27,13 @@
<main> <main>
<section style="font-size: larger;"> <section style="font-size: larger;">
<p> <p>
Our <a href="https://www.npmjs.com/package/web-component-base">tiny package</a> provides a zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily. By extending our <code-block inline>WebComponent</code-block> base class, you get an easy authoring experience as you would expect in writing your components</p>
</p> <ul>
<li>a signals-like <code-block inline>props</code-block> API that keeps your property changes and UI in sync</li>
<li>sensible life-cycle hooks that you understand and remember</li>
<li>extensible templates & renderer (examples in-progress)</li>
<li>Bonus: provided out-of-the-box with <a href="https://ayco.io/gh/McFly">McFly</a>, a powerful no-framework framework</li>
</ul>
<call-to-action /> <call-to-action />
</section> </section>
<hr style="margin: 2em 0;" /> <hr style="margin: 2em 0;" />