feat(site): initial feature-set component
This commit is contained in:
Ayo
parent
8b074a3495
commit
c606857f4d
4 changed files with 100 additions and 58 deletions
|
|
@ -1,6 +1,5 @@
|
|||
<header class="my-header">
|
||||
<h1><slot /></h1>
|
||||
<slot name="description" />
|
||||
</header>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
85
site/src/components/feature-set.js
Normal file
85
site/src/components/feature-set.js
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
class FeatureSet extends WebComponent {
|
||||
#features = [
|
||||
{
|
||||
icon: "️🔄",
|
||||
title: "Reactive.",
|
||||
description:
|
||||
"A robust API for synchronizing your component's UI and property values",
|
||||
},
|
||||
{
|
||||
icon: "😌",
|
||||
title: "Easy.",
|
||||
description: "Sensible life-cycle hooks that you understand and remember",
|
||||
url: "",
|
||||
},
|
||||
{
|
||||
icon: "️💡",
|
||||
title: "Familiar.",
|
||||
description:
|
||||
"Use the built-in JSX-like syntax or bring your own custom templating syntax",
|
||||
url: "https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010",
|
||||
},
|
||||
{
|
||||
icon: "️🛜",
|
||||
title: "Powerful.",
|
||||
description:
|
||||
"Attach 'side effects' that gets triggered on property value changes",
|
||||
url: "",
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* @type {Array<HTMLArticleElement>}
|
||||
*/
|
||||
get articleEl() {
|
||||
return this.querySelectorAll("article");
|
||||
}
|
||||
|
||||
afterViewInit() {
|
||||
/**
|
||||
* @type {Partial<CSSStyleDeclaration>}
|
||||
*/
|
||||
const articleStyles = {
|
||||
border: "1px solid #ccc",
|
||||
borderRadius: "5px",
|
||||
padding: "30px",
|
||||
marginBottom: "1em",
|
||||
};
|
||||
Object.keys(articleStyles).forEach((rule) =>
|
||||
this.articleEl.forEach((el) => (el.style[rule] = articleStyles[rule]))
|
||||
);
|
||||
|
||||
/**
|
||||
* @type {Partial<CSSStyleDeclaration>}
|
||||
*/
|
||||
const ftrStyles = {
|
||||
maxWidth: "800px",
|
||||
margin: "0 auto",
|
||||
padding: "30px",
|
||||
gap: "1em",
|
||||
};
|
||||
const featureWrapper = this.querySelector(".feature-wrapper");
|
||||
Object.keys(ftrStyles).forEach(
|
||||
(rule) => (featureWrapper.style[rule] = ftrStyles[rule])
|
||||
);
|
||||
}
|
||||
|
||||
get template() {
|
||||
return html`
|
||||
<div class="feature-wrapper">
|
||||
${this.#features.map(
|
||||
(feature) => html`
|
||||
<article>
|
||||
<h3 style="margin-bottom: 1em" class="feature-title">
|
||||
<span>${feature.icon}</span> ${feature.title}
|
||||
</h3>
|
||||
<p style="margin:0" class="feature-description">
|
||||
${feature.description}
|
||||
</p>
|
||||
</article>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
body {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
max-width: 40em;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,79 +19,37 @@
|
|||
};
|
||||
</script>
|
||||
<style>
|
||||
@counter-style publish-icons {
|
||||
system: cyclic;
|
||||
symbols: "️✅";
|
||||
suffix: " ";
|
||||
}
|
||||
main {
|
||||
font-size: large;
|
||||
|
||||
& section ul {
|
||||
list-style: publish-icons;
|
||||
|
||||
& li {
|
||||
margin-bottom: 0.5em;
|
||||
& section.jumbo {
|
||||
& .hero-statement {
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
& hr {
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
& section p:not(blockquote *):first-of-type::first-letter {
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
line-height: 1rem;
|
||||
float: left;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</my-head>
|
||||
<body>
|
||||
<awesome-header>
|
||||
<span>{{ project.name }}</span>
|
||||
<span slot="description">{{ project.description }}</span>
|
||||
</awesome-header>
|
||||
<main>
|
||||
<section>
|
||||
<p>
|
||||
Get the easy authoring experience you have come to love and build
|
||||
standard custom elements with zero bundlers, transpilers or polyfills.
|
||||
<section class="jumbo">
|
||||
<p class="hero-statement">
|
||||
The simple reactivity system for web components
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
A robust <code-block inline>props</code-block> API that synchronizes
|
||||
your components' property values and HTML attributes
|
||||
</li>
|
||||
<li>Sensible life-cycle hooks that you understand and remember</li>
|
||||
<li>
|
||||
Use a custom templating syntax you are already familiar with, like
|
||||
<code-block inline>lit-html</code-block> (<a
|
||||
href="https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010"
|
||||
target="_blank"
|
||||
>example</a
|
||||
>)
|
||||
</li>
|
||||
<li>
|
||||
Built-in minimal <code-block inline>html</code-block> function for
|
||||
tagged templates powered by Preact's tiny (450 Bytes)
|
||||
<code-block inline>htm/mini</code-block>
|
||||
</li>
|
||||
<li>
|
||||
Attach "side effects" that gets triggered on property value changes
|
||||
with <code-block inline>attachEffect</code-block> (<a
|
||||
href="https://codepen.io/ayoayco-the-styleful/pen/ExrdWPv?editors=1011"
|
||||
target="_blank"
|
||||
>example</a
|
||||
>)
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <p>
|
||||
Get the easy authoring experience you have come to love and build
|
||||
</p> -->
|
||||
<call-to-action></call-to-action>
|
||||
<div>
|
||||
<feature-set features="{{ features }}"></feature-set>
|
||||
</div>
|
||||
</section>
|
||||
<hr />
|
||||
<section>
|
||||
<p>Why use this base class?</p>
|
||||
<h2>Why use this base class?</h2>
|
||||
<p>
|
||||
Writing Web Components directly from
|
||||
<code-block inline>HTMLElement</code-block> can seem confusing and
|
||||
|
|
|
|||
Loading…
Reference in a new issue