53 lines
No EOL
1.3 KiB
HTML
53 lines
No EOL
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<!--
|
|
Hello! This page is an example McFly page.
|
|
See more on https://ayco.io/sh/mcfly
|
|
-->
|
|
<my-head>
|
|
<title>McFly: Back to the Basics. Into the Future.</title>
|
|
<script server:setup>
|
|
const project = {
|
|
name: "McFly",
|
|
description: "Back to the Basics. Into the Future."
|
|
};
|
|
</script>
|
|
</my-head>
|
|
<body>
|
|
<awesome-header>
|
|
<span>{{ project.name }}</span>
|
|
<span slot="description">{{ project.description }}</span>
|
|
</awesome-header>
|
|
<main>
|
|
<h2>Welcome to {{ project.name }}</h2>
|
|
<p>Server date time: {{new Date().toLocaleString()}}</p>
|
|
<p>
|
|
Here's an interactive custom element:
|
|
<my-hello-world></my-hello-world>
|
|
</p>
|
|
<code-block language="js">
|
|
class MyHelloWorld extends WebComponent {
|
|
static props = {
|
|
myName: "World",
|
|
count: 0
|
|
}
|
|
|
|
updateLabel() {
|
|
this.props.myName = `Clicked ${++this.props.count}x`;
|
|
}
|
|
|
|
get template() {
|
|
return html`
|
|
<button onClick=${() => this.updateLabel()} style="cursor:pointer">
|
|
Hello ${this.props.myName}!
|
|
</button>`;
|
|
}
|
|
}</code-block>
|
|
</main>
|
|
<my-footer>
|
|
<small>
|
|
Learn how to build components easily at <a href="https://WebComponent.io">WebComponent.io</a>
|
|
</small>
|
|
</my-footer>
|
|
</body>
|
|
</html> |