feat: utilisation de vuejs pour gérer la liste des sites
This commit is contained in:
Kazhnuz
parent
7e43e72723
commit
754c38aaf4
2 changed files with 78 additions and 55 deletions
|
|
@ -14,7 +14,6 @@
|
|||
|
||||
<!-- framework utilisés -->
|
||||
<script src="dep/ejs/js/ejs.min.js"></script>
|
||||
<script src="site.js"></script>
|
||||
<link href="dep/bootstrap/css/bootstrap.css" rel="stylesheet">
|
||||
<link href="dep/fork-awesome/css/fork-awesome.css" rel="stylesheet">
|
||||
|
||||
|
|
@ -61,54 +60,44 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="col-lg-4">
|
||||
<div class="card card-blue" id="welcome">
|
||||
<div class="card-header"><i class="fa fa-list"></i> Navigation</div>
|
||||
<div class="list-group list-group-flush">
|
||||
<a href="#projets" class="list-group-item list-group-item-action">
|
||||
<i class="fa fa-folder"></i> Projets
|
||||
</a>
|
||||
<a href="#hergement" class="list-group-item list-group-item-action">
|
||||
<i class="fa fa-globe"></i> Sites et services
|
||||
</a>
|
||||
<a href="#divers" class="list-group-item list-group-item-action">
|
||||
<i class="fa fa-list"></i> Divers
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://vault.kobold.city" class="btn btn-dark btn-block mb-3">Vault</a>
|
||||
</aside>
|
||||
<main class="col-lg-8">
|
||||
<h2 id="projets"><i class="fa fa-folder"></i> Projets</h2>
|
||||
<div class="row site-cards">
|
||||
<script>
|
||||
renderSite({title: "Birb", description: "Un petit moteur de jeu utilisant le framework Löve.", color: "purple", url: "https://git.kobold.cafe/birb/birb-engine", urlpoweredby: "https://love2D.org/", poweredby: "Löve"});
|
||||
renderSite({title: "Rulebook", description: "Un systeme de règle de JDR, utilisant la base D100.", color: "brown", url: "https://rulebook.kobold.city/", urlpoweredby: "https://docsify.now.sh/", poweredby: "Docsify"});
|
||||
renderSite({title: "Univers", description: "Des univers sous licence libre.", color: "brown", url: "https://univers.kobold.city/", urlpoweredby: "https://docsify.now.sh/", poweredby: "Docsify"});
|
||||
</script>
|
||||
</div>
|
||||
<div id="app"></div>
|
||||
|
||||
<h2 id="hergement"><i class="fa fa-globe"></i> Sites et services</h2>
|
||||
<div class="row site-cards">
|
||||
<script>
|
||||
renderSite({title: "Kazhnuz Space", description: "Mon blog personnel.", color: "purple", url: "https://kazhnuz.space", urlpoweredby: "https://wordpress.org/", poweredby: "Wordpress"});
|
||||
renderSite({title: "Quarante-douze", description: "Un blog qui parle d'informatique, de culture libre et d'internet.", color: "red", url: "https://quarante-douze.net", urlpoweredby: "https://wordpress.org/", poweredby: "Wordpress"});
|
||||
renderSite({title: "Kobold Cafe", description: "Un espace personnel, permettant un petit bout de décentralisation.", color: "orange", url: "https://kobold.cafe", urlpoweredby: "https://yunohost.org", poweredby: "yunohost"});
|
||||
renderSite({title: "Serveur git", description: "Un serveur git, permettant d'héberger les différents projets de kobold et des membres.", color: "green", url: "https://git.kobold.cafe", urlpoweredby: "https://gitea.io/en-us/", poweredby: "gitea"});
|
||||
</script>
|
||||
</div>
|
||||
<script type="text/x-template" id="app-template">
|
||||
<div class="row col-md-12">
|
||||
<aside class="col-lg-4">
|
||||
<div class="card card-blue" id="welcome">
|
||||
<div class="card-header"><i class="fa fa-list"></i> Navigation</div>
|
||||
<div class="list-group list-group-flush">
|
||||
<a v-bind:href="`#${section.id}`" class="list-group-item list-group-item-action" v-for="section in contenus">
|
||||
<i v-bind:class="`fa fa-${section.fa}`"></i> {{section.name}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://vault.kobold.city" class="btn btn-dark btn-block mb-3">Vault</a>
|
||||
</aside>
|
||||
<main class="col-lg-8">
|
||||
<div v-for="section in contenus">
|
||||
<h2 v-bind:id="section.id"><i v-bind:class="`fa fa-${section.fa}`"></i> {{section.name}}</h2>
|
||||
<div class="row site-cards">
|
||||
|
||||
<h2 id="divers"><i class="fa fa-list"></i> Divers</h2>
|
||||
<div class="row site-cards">
|
||||
<script>
|
||||
renderSite({title: "Awesome GNOME", description: "Une liste d'app et extension GNOME.", color: "dark", url: "https://github.com/kazhnuz/awesome-gnome", urlpoweredby: "https://github.com/sindresorhus/awesome", poweredby: "awesome"});
|
||||
renderSite({title: "Awesome Sonic", description: "Une liste de fancreation Sonic.", color: "blue", url: "https://github.com/kazhnuz/awesome-sonic", urlpoweredby: "https://github.com/sindresorhus/awesome", poweredby: "awesome"});
|
||||
renderSite({title: "Resource Educ", description: "Une liste de resource éducative.", color: "yellow", url: "https://github.com/Kazhnuz/ressources-pedagogiques", urlpoweredby: "https://github.com/sindresorhus/awesome", poweredby: "awesome"});
|
||||
</script>
|
||||
</div>
|
||||
<div class='col-md-12' v-for="site in section.sites">
|
||||
<div v-bind:class='`card card-${site.color} mb-4 box-shadow card-border card-link`'>
|
||||
<h4 class='align-center'>{{ site.title }}</h4>
|
||||
<p class='card-text'>{{ site.description }}</p>
|
||||
<p class='align-right'><a type='button' v-bind:href='site.url' v-bind:class='`btn btn-${site.color}`'>
|
||||
<span class='acceder'>Accéder </span>
|
||||
<i class='fa fa-external-link'></i></a>
|
||||
</p>
|
||||
<p class='powered-text align-center'>powered by <a v-bind:href='site.urlpoweredby'>{{ site.poweredby }}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -146,7 +135,7 @@
|
|||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<p>Ce site est propulsé par <a href="ejs.co">EJS</a>, <a href="https://getbootstrap.com">Bootstrap4</a> et <a href="https://fork-awesome.org">Fork-Awesome</a> et est écrit sous forme de site static.</p>
|
||||
<p>Ce site est propulsé par <a href="vuejs.com">VueJS</a>, <a href="https://getbootstrap.com">Bootstrap4</a> et <a href="https://fork-awesome.org">Fork-Awesome</a> et est écrit sous forme de site static.</p>
|
||||
|
||||
<p>Le theme utilisé est le theme <a href="https://git.kobold.cafe/kazhnuz/bluesky-bootstrap-theme">bluesky</a>, sous licence CC BY-SA.</p>
|
||||
|
||||
|
|
@ -162,9 +151,7 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
|
||||
<script src="site.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,42 @@
|
|||
let template = "<div class='col-md-12'><div class='card card-<%= color %> mb-4 box-shadow card-border card-link'><h4 class='align-center'><%= title %></h4><p class='card-text'><%= description %></p><p class='align-right'><a type='button' href='<%= url %>' class='btn btn-<%= color %>'><span class='acceder'>Accéder </span><i class='fa fa-external-link'></i></a></p><p class='powered-text align-center'>powered by <a href='<%= urlpoweredby %>'><%= poweredby %></a></p></div></div>"
|
||||
// Kobold City
|
||||
// "App" script
|
||||
// A basic vueJS script to remplace the previous templating
|
||||
let contenus = [{
|
||||
name:"Projets",
|
||||
fa:"folder",
|
||||
id:"projets",
|
||||
sites: [
|
||||
{title: "Birb", description: "Un petit moteur de jeu utilisant le framework Löve.", color: "purple", url: "https://git.kobold.cafe/birb/birb-engine", urlpoweredby: "https://love2D.org/", poweredby: "Löve"},
|
||||
{title: "Rulebook", description: "Un systeme de règle de JDR, utilisant la base D100.", color: "brown", url: "https://rulebook.kobold.city/", urlpoweredby: "https://docsify.now.sh/", poweredby: "Docsify"},
|
||||
{title: "Univers", description: "Des univers sous licence libre.", color: "brown", url: "https://univers.kobold.city/", urlpoweredby: "https://docsify.now.sh/", poweredby: "Docsify"},
|
||||
]
|
||||
},{
|
||||
name:"Sites et services",
|
||||
fa:"globe",
|
||||
id:"hebergement",
|
||||
sites: [
|
||||
{title: "Kazhnuz Space", description: "Mon blog personnel.", color: "purple", url: "https://kazhnuz.space", urlpoweredby: "https://wordpress.org/", poweredby: "Wordpress"},
|
||||
{title: "Quarante-douze", description: "Un blog qui parle d'informatique, de culture libre et d'internet.", color: "red", url: "https://quarante-douze.net", urlpoweredby: "https://wordpress.org/", poweredby: "Wordpress"},
|
||||
{title: "Kobold Cafe", description: "Un espace personnel, permettant un petit bout de décentralisation.", color: "orange", url: "https://kobold.cafe", urlpoweredby: "https://yunohost.org", poweredby: "yunohost"},
|
||||
{title: "Serveur git", description: "Un serveur git, permettant d'héberger les différents projets de kobold et des membres.", color: "green", url: "https://git.kobold.cafe", urlpoweredby: "https://gitea.io/en-us/", poweredby: "gitea"},
|
||||
]
|
||||
},{
|
||||
name:"Divers",
|
||||
fa:"list",
|
||||
id:"divers",
|
||||
sites: [
|
||||
{title: "Awesome GNOME", description: "Une liste d'app et extension GNOME.", color: "dark", url: "https://github.com/kazhnuz/awesome-gnome", urlpoweredby: "https://github.com/sindresorhus/awesome", poweredby: "awesome"},
|
||||
{title: "Awesome Sonic", description: "Une liste de fancreation Sonic.", color: "blue", url: "https://github.com/kazhnuz/awesome-sonic", urlpoweredby: "https://github.com/sindresorhus/awesome", poweredby: "awesome"},
|
||||
{title: "Resource Educ", description: "Une liste de resource éducative.", color: "yellow", url: "https://github.com/Kazhnuz/ressources-pedagogiques", urlpoweredby: "https://github.com/sindresorhus/awesome", poweredby: "awesome"},
|
||||
]
|
||||
}];
|
||||
|
||||
function renderSite(data) {
|
||||
html = ejs.render(template, data);
|
||||
document.write(html)
|
||||
}
|
||||
new Vue({
|
||||
el:`#app`,
|
||||
template:"#app-template",
|
||||
data:()=>(
|
||||
{
|
||||
contenus
|
||||
}
|
||||
),
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue