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">
|
<header class="my-header">
|
||||||
<h1><slot /></h1>
|
<h1><slot /></h1>
|
||||||
<slot name="description" />
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<style>
|
<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 {
|
body {
|
||||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||||
max-width: 40em;
|
max-width: 1000px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -19,79 +19,37 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
@counter-style publish-icons {
|
|
||||||
system: cyclic;
|
|
||||||
symbols: "️✅";
|
|
||||||
suffix: " ";
|
|
||||||
}
|
|
||||||
main {
|
main {
|
||||||
font-size: large;
|
font-size: large;
|
||||||
|
|
||||||
& section ul {
|
& section.jumbo {
|
||||||
list-style: publish-icons;
|
& .hero-statement {
|
||||||
|
font-size: 2em;
|
||||||
& li {
|
text-align: center;
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& 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>
|
</style>
|
||||||
</my-head>
|
</my-head>
|
||||||
<body>
|
<body>
|
||||||
<awesome-header>
|
<awesome-header>
|
||||||
<span>{{ project.name }}</span>
|
<span>{{ project.name }}</span>
|
||||||
<span slot="description">{{ project.description }}</span>
|
|
||||||
</awesome-header>
|
</awesome-header>
|
||||||
<main>
|
<main>
|
||||||
<section>
|
<section class="jumbo">
|
||||||
<p>
|
<p class="hero-statement">
|
||||||
Get the easy authoring experience you have come to love and build
|
The simple reactivity system for web components
|
||||||
standard custom elements with zero bundlers, transpilers or polyfills.
|
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
<!-- <p>
|
||||||
<li>
|
Get the easy authoring experience you have come to love and build
|
||||||
A robust <code-block inline>props</code-block> API that synchronizes
|
</p> -->
|
||||||
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>
|
|
||||||
<call-to-action></call-to-action>
|
<call-to-action></call-to-action>
|
||||||
|
<div>
|
||||||
|
<feature-set features="{{ features }}"></feature-set>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<hr />
|
|
||||||
<section>
|
<section>
|
||||||
<p>Why use this base class?</p>
|
<h2>Why use this base class?</h2>
|
||||||
<p>
|
<p>
|
||||||
Writing Web Components directly from
|
Writing Web Components directly from
|
||||||
<code-block inline>HTMLElement</code-block> can seem confusing and
|
<code-block inline>HTMLElement</code-block> can seem confusing and
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue