Browse Source

feat: utilisation de ejs pour le templating

master
Kazhnuz 3 months ago
parent
commit
08812477df
4 changed files with 16 additions and 51 deletions
  1. +1
    -0
      dep/ejs/js/ejs.min.js
  2. +1
    -1
      gulpfile.js
  3. +8
    -50
      static/example.html
  4. +6
    -0
      static/site.js

+ 1
- 0
dep/ejs/js/ejs.min.js
File diff suppressed because it is too large
View File


+ 1
- 1
gulpfile.js View File

@@ -6,7 +6,7 @@ const cleanCSS = require('gulp-clean-css');
sass.compiler = require('node-sass');

function html() {
return src('static/*.html')
return src('static/*')
.pipe(dest('dist'))
}



+ 8
- 50
static/example.html View File

@@ -13,6 +13,8 @@
<link rel="shortcut icon" href="img/favicon.png">

<!-- 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">

@@ -58,56 +60,12 @@

<div class="row site-cards">

<div class="col-md-4">
<div class="card card-green mb-4 box-shadow card-border">
<div class="card-body">
<h4 class="align-center">Serveur git</h4>
<p class="card-text">Un serveur git, permettant d'héberger les différents projets de chlore et des membres.</p>
<div class="align-center">
<div class="btn-group">
<a type="button" href="https://git.kobold.cafe" class="btn btn-green">Accéder</a>
</div>
<div>
<p class="powered-text">powered by <a href="https://gitea.io/en-us/">gitea</a></p>
</div>
</div>
</div>
</div>
</div>

<div class="col-md-4">
<div class="card card-red mb-4 box-shadow card-border">
<div class="card-body">
<h4 class="align-center">Quarante-douze</h4>
<p class="card-text">Un blog qui parle d'informatique, de culture libre et d'internet.</p>
<div class="align-center">
<div class="btn-group">
<a type="button" href="https://quarante-douze.net" class="btn btn-red">Accéder</a>
</div>
<div>
<p class="powered-text">powered by <a href="https://wordpress.org/">Wordpress</a></p>
</div>
</div>
</div>
</div>
</div>

<div class="col-md-4">
<div class="card card-violet mb-4 box-shadow card-border">
<div class="card-body">
<h4 class="align-center">kazhnuz.space</h4>
<p class="card-text">Mon blog personnel.</p>
<div class="align-center">
<div class="btn-group">
<a type="button" href="https://kazhnuz.space" class="btn btn-violet">Accéder</a>
</div>
<div>
<p class="powered-text">powered by <a href="https://www.pluxml.org/">pluXML</a></p>
</div>
</div>
</div>
</div>
</div>
<script>
renderSite({title: "Serveur git", description: "Un serveur git, permettant d'héberger les différents projets de chlore et des membres.", color: "green", url: "https://git.kobold.cafe", urlpoweredby: "https://gitea.io/en-us/", poweredby: "gitea"});
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: "kazhnuz.space", description: "Mon blog personnel.", color: "purple", url: "https://kazhnuz.space", urlpoweredby: "https://www.pluxml.org/", poweredby: "pluXML"});
</script>
</div>

</div>


+ 6
- 0
static/site.js View File

@@ -0,0 +1,6 @@
let template = "<div class='col-md-4'><div class='card card-<%= color %> mb-4 box-shadow card-border'><div class='card-body'><h4 class='align-center'><%= title %></h4><p class='card-text'><%= description %></p><div class='align-center'><div class='btn-group'><a type='button' href='<%= url %>' class='btn btn-<%= color %>'>Accéder</a></div><div><p class='powered-text'>powered by <a href='<%= urlpoweredby %>'><%= poweredby %></a></p></div></div></div></div></div>"

function renderSite(data) {
html = ejs.render(template, data);
document.write(html)
}

Loading…
Cancel
Save