show a mounting strategy
This commit is contained in:
parent
8f7f644272
commit
478a1dc732
|
|
@ -3,11 +3,11 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="stylesheet" href="/assets/style.css">
|
<link rel="stylesheet" href="main.css">
|
||||||
<title>Riot App</title>
|
<title>Riot Template</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<app/>
|
<hello-riot version="v6.1.2"></hello-riot>
|
||||||
<script type="module" src="./index.js"></script>
|
<script type="module" src="./index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
7
index.js
7
index.js
|
|
@ -1,5 +1,4 @@
|
||||||
import * as riot from 'riot';
|
import Registery from './pages/registery.js';
|
||||||
import app from "./app.riot";
|
|
||||||
|
|
||||||
riot.register('app', app);
|
// globally register all pages
|
||||||
riot.mount('app', {message: 'Hello Riot'});
|
Registery();
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<hello-riot>
|
||||||
|
<div class="splash">
|
||||||
|
<img src="/assets/images/square.svg">
|
||||||
|
<h1>Welcome to Your Riot.js Application</h1>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Start your development with
|
||||||
|
<a>Riot</a> a component-based ui library running on the
|
||||||
|
<a>Vite</a> frontend tooling.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>Getting Started</h2>
|
||||||
|
<p>
|
||||||
|
This page is found at <code>pages/hello-riot/hello-riot.riot</code>,
|
||||||
|
<br> and is auto-mounted via <code>pages/registry.js</code>.
|
||||||
|
<p>
|
||||||
|
<em>many mounting strategies exist, this is but <strong>one!</strong></em>
|
||||||
|
</p>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>Documentation</h2>
|
||||||
|
|
||||||
|
<div class="links">
|
||||||
|
<span>
|
||||||
|
<a href="https://riot.js.org/documentation/">Riot </a>
|
||||||
|
<br>
|
||||||
|
<code>{props.version}</code>
|
||||||
|
</span>
|
||||||
|
<em>or</em>
|
||||||
|
<span>
|
||||||
|
<a href="https://vitejs.dev/guide/">Vite</a>
|
||||||
|
<br>
|
||||||
|
<code>v3.x</code>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Ecosystem</h2>
|
||||||
|
|
||||||
|
<div class="links">
|
||||||
|
<a href="https://github.com/riot/examples">Examples</a>
|
||||||
|
<a href="https://github.com/riot/route">Route</a>
|
||||||
|
<a href="https://github.com/riot/riot/blob/main/AWESOME.md">Community</a>
|
||||||
|
<a href="https://github.com/riot/riot">Github</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</hello-riot>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import {register, mount} from 'riot';
|
||||||
|
import HelloRiot from './hello-riot/hello-riot.riot';
|
||||||
|
|
||||||
|
/*
|
||||||
|
Add Global Pages to registry
|
||||||
|
*/
|
||||||
|
const Registry = {
|
||||||
|
'hello-riot': HelloRiot
|
||||||
|
};
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
Object.entries(Registry).map(([name, component]) => {
|
||||||
|
register(name, component);
|
||||||
|
mount(name);
|
||||||
|
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
component
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg width="111" height="116" viewBox="0 0 111 116" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0 1.00338C0 0.449229 0.447713 0 0.999997 0L75.3214 0C95.0262 0 110 16.0278 110 35.7992V39.7512C110 41.9603 108.209 43.7512 106 43.7512H89.2143C88.1097 43.7512 87.2143 42.8573 87.2143 41.7528C87.2143 39.6623 87.2143 36.5781 87.2143 35.7992C87.2143 29.2087 81.8897 23.8661 75.3214 23.8661L24.7857 23.8661C24.2334 23.8661 23.7857 24.3154 23.7857 24.8695L23.7857 106.394C23.7857 106.948 23.3367 107.4 22.7849 107.377C10.1126 106.851 0 96.3759 0 83.5314L0 1.00338Z" fill="#ED1846"/>
|
||||||
|
<path d="M44.6071 47.7323C44.0549 47.7323 43.605 48.1828 43.6278 48.7365C44.1524 61.4516 54.5916 71.5984 67.3928 71.5984H83.25C85.4394 71.5984 87.2143 73.3793 87.2143 75.5761V106.394C87.2143 106.948 87.6633 107.4 88.2151 107.377C100.887 106.851 111 96.3759 111 83.5314V75.5761C111 60.1984 98.5759 47.7323 83.25 47.7323L44.6071 47.7323Z" fill="#ED1846"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 949 B |
|
|
@ -1,6 +0,0 @@
|
||||||
body {font-size: 1.2em;margin:0;padding:0}
|
|
||||||
|
|
||||||
.hero {
|
|
||||||
text-align: center;
|
|
||||||
margin: 30vh 0;
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
|
|
@ -0,0 +1,25 @@
|
||||||
|
body {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
color: #FFF;
|
||||||
|
background: #222;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
a {color: #ED1}
|
||||||
|
|
||||||
|
code {color: gray;}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splash {
|
||||||
|
font-size: larger;
|
||||||
|
text-align: center;
|
||||||
|
margin: 8vh auto;
|
||||||
|
width: 620px;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue