Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 3475453d authored by peter_rabbit's avatar peter_rabbit
Browse files

template file ans pages

parent ac342f56
No related branches found
No related tags found
No related merge requests found
Showing
with 1379 additions and 418 deletions
......@@ -4,12 +4,13 @@
const fs = require("fs");
const browserify = require("browserify");
const curDir = process.cwd();
// Handle home page
const b = browserify();
b.add(`${process.cwd()}/src/main.js`)
b.add(`${curDir}/src/main.js`)
.bundle()
.pipe(fs.createWriteStream(`${process.cwd()}/public/main.js`));
.pipe(fs.createWriteStream(`${curDir}/public/main.js`));
// Handle subpages
function getPageHtml(pagename) {
......@@ -29,11 +30,11 @@ function getPageHtml(pagename) {
`;
}
const files = fs.readdirSync(`${process.cwd()}/src/pages`);
const pages = fs.readdirSync(`${curDir}/src/pages`);
for (const f of files) {
const fPath = `${process.cwd()}/src/pages/${f}`;
const targetDirPath = `${process.cwd()}/public/${f}`;
for (const p of pages) {
const fPath = `${curDir}/src/pages/${p}`;
const targetDirPath = `${curDir}/public/${p}`;
if (!fs.existsSync(targetDirPath)) {
fs.mkdirSync(targetDirPath);
......@@ -43,8 +44,27 @@ for (const f of files) {
b.add(fPath)
.bundle()
.pipe(fs.createWriteStream(`${targetDirPath}/${f}.js`));
.pipe(fs.createWriteStream(`${targetDirPath}/${p}.js`));
const page = fs.createWriteStream(`${targetDirPath}/index.html`);
page.write(getPageHtml(f));
page.write(getPageHtml(p));
}
// If pages have been deleted in source, remove them in output directory too.
for (const dir of fs.readdirSync(`${curDir}/public`).filter(f => {
const stats = fs.statSync(`${curDir}/public/${f}`);
return stats.isDirectory();
})) {
if (!pages.includes(dir)) {
const dPath = `${curDir}/public/${dir}`;
try {
const nestedFiles = fs.readdirSync(dPath);
for (const nf of nestedFiles) {
fs.unlinkSync(`${dPath}/${nf}`);
}
fs.rmdirSync(dPath);
} catch (error) {
console.error(error);
}
}
}
This diff is collapsed.
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
"use strict";
module.exports = {
setRenderCycleRoot(renderCycleRoot) {
this.renderCycleRoot = renderCycleRoot;
},
objectToHtml: function objectToHtml(obj) {
const { tag } = obj;
const node = document.createElement(tag);
const excludeKeys = ["tag", "contents", "style_rules", "state"];
Object.keys(obj)
.filter(attr => !excludeKeys.includes(attr))
.forEach(attr => {
if (attr === "class") {
node.classList.add(...obj[attr].split(" ").filter(s => s !== ""));
} else {
node[attr] = obj[attr];
}
});
if (obj.contents && typeof obj.contents === "string") {
node.innerHTML = obj.contents;
} else {
obj.contents &&
obj.contents.length > 0 &&
obj.contents.forEach(el => {
switch (typeof el) {
case "string":
node.innerHTML = el;
break;
case "object":
node.appendChild(objectToHtml(el));
break;
}
});
}
if (obj.style_rules) {
Object.keys(obj.style_rules).forEach(rule => {
node.style[rule] = obj.style_rules[rule];
});
}
return node;
},
renderCycle: function () {
this.subRender(this.renderCycleRoot.render(), document.getElementsByTagName("main")[0], {
mode: "replace",
});
},
subRender(object, htmlNode, options = { mode: "append" }) {
const insert = this.objectToHtml(object);
switch (options.mode) {
case "append":
htmlNode.appendChild(insert);
break;
case "override":
htmlNode.innerHTML = "";
htmlNode.appendChild(insert);
break;
case "insert-before":
htmlNode.insertBefore(insert, htmlNode.childNodes[options.insertIndex]);
break;
case "adjacent":
/**
* options.insertLocation must be one of:
*
* afterbegin
* afterend
* beforebegin
* beforeend
*/
htmlNode.insertAdjacentHTML(options.insertLocation, insert);
break;
case "replace":
htmlNode.parentNode.replaceChild(insert, htmlNode);
break;
case "remove":
htmlNode.remove();
break;
}
},
};
},{}],2:[function(require,module,exports){
"use strict";
class EducationPage {
constructor(args) {
Object.assign(this, args);
}
render() {
return {
tag: "div",
contents: [
{
tag: "h1",
contents: "Pédagogie",
},
{
tag: "h2",
contents: "Game studio club",
},
{
tag: "h3",
contents: "Apprendre à créer un jeu vidéo de A à Z",
},
{
tag: "p",
contents:
"La création d'un jeu vidéo c'est l'occasion d'aborder plein de choses différentes !",
},
{
tag: "ul",
contents: [
{
tag: "li",
contents: [
{
tag: "strong",
contents: "Dessin et création 2D",
},
{
tag: "ul",
contents: [
{
tag: "li",
contents: "Créer des décors et des personnages",
},
{
tag: "li",
contents: "Dessiner sur ordinateur",
},
{
tag: "li",
contents: "Créer des animations 2D",
},
],
},
],
},
{
tag: "li",
contents: [
{
tag: "strong",
contents: "Musique et effets sonores",
},
{
tag: "ul",
contents: [
{
tag: "li",
contents:
"Utiliser des logiciels de son et des synthétiseurs",
},
{
tag: "li",
contents: "Composer une musique",
},
{
tag: "li",
contents: "Faire une prise de son",
},
{
tag: "li",
contents: "Mixer un enregistrement",
},
],
},
],
},
{
tag: "li",
contents: [
{
tag: "strong",
contents: "Développer un univers",
},
{
tag: "ul",
contents: [
{
tag: "li",
contents:
"Écrire une histoire, construire une narration",
},
{
tag: "li",
contents: "Imaginer des mondes et des personnages",
},
],
},
],
},
{
tag: "li",
contents: [
{
tag: "strong",
contents: "Concevoir le jeu",
},
{
tag: "ul",
contents: [
{
tag: "li",
contents: "Comprendre ce qui fait le jeu",
},
{
tag: "li",
contents: "Développer les mécanismes du gameplay",
},
],
},
],
},
{
tag: "li",
contents: [
{
tag: "strong",
contents: "Programmation informatique",
},
{
tag: "ul",
contents: [
{
tag: "li",
contents:
"Apprendre pas à pas à coder avec différents langages de programmation",
},
{
tag: "li",
contents:
"Découvrir les bases du web en créant des mini-jeux en lignes",
},
],
},
],
},
{
tag: "li",
contents: [
{
tag: "strong",
contents: "Mathématiques et pysique",
},
{
tag: "ul",
contents: [
{
tag: "li",
contents:
"Le jeu vidéo et l'informatique en général, c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !",
},
{
tag: "li",
contents:
"Algorithmie, logique, calcul décimal, ensembles, géométrie, trigonométrie, algèbre linéaire ,vecteurs, repères en 2 dimensions ...",
},
],
},
],
},
],
},
],
};
}
}
module.exports = EducationPage;
},{}],3:[function(require,module,exports){
"use strict";
"use strict";
const runPage = require("../../run-page");
const EducationPage = require("./education");
runPage(EducationPage);
},{"../../run-page":4,"./education":2}],4:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
const Template = require("./template/template");
module.exports = function runPage(PageComponent) {
const template = new Template({ page: new PageComponent() });
objectHtmlRenderer.setRenderCycleRoot(template);
objectHtmlRenderer.renderCycle();
};
},{"./lib/object-html-renderer":1,"./template/template":5}],5:[function(require,module,exports){
"use strict";
class Template {
constructor(props) {
this.props = props;
}
render() {
return {
tag: "main",
contents: [
{
tag: "header",
contents: [
{
tag: "ul",
contents: [
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/",
contents: "Home",
},
],
},
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/games/",
contents: "Jeux",
},
],
},
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/software-development/",
contents: "Software development",
},
],
},
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/education/",
contents: "Pédagogie",
},
],
},
],
},
],
},
{
tag: "div",
id: "page-container",
contents: [this.props.page.render()],
},
{
tag: "footer",
contents: [
{
tag: "a",
href: "mailto:kuadrado-software@tutanota.com",
contents: "kuadrado-software@tutanota.com",
},
],
},
],
};
}
}
module.exports = Template;
},{}]},{},[3]);
......@@ -3,12 +3,12 @@
<html>
<head>
<meta charset="utf-8" />
<title>Kuadrado Software - example2</title>
<title>Kuadrado Software - education</title>
<link href="../../style/style.css" rel="stylesheet" />
</head>
<body>
<main></main>
</body>
<script type="text/javascript" src="./example2.js"></script>
<script type="text/javascript" src="./education.js"></script>
</html>
\ No newline at end of file
......@@ -87,54 +87,128 @@ module.exports = {
},{}],2:[function(require,module,exports){
"use strict";
class Example {
class GamesPage {
constructor(args) {
Object.assign(this, args);
}
render() {
return {
tag: "main",
tag: "div",
contents: [
{
tag: "h1",
contents: "Example",
},
{
tag: "a",
href: "/public/",
contents: "Home",
},
{tag:"br"},
{
tag: "a",
href: "../example2/",
contents: "Example page 2",
contents: "Games",
},
],
};
}
}
module.exports = Example;
module.exports = GamesPage;
},{}],3:[function(require,module,exports){
"use strict";
"use strict";
const runPage = require("../../run-page");
const Example = require("./example");
runPage(Example);
const GamesPage = require("./games");
runPage(GamesPage);
},{"../../run-page":4,"./example":2}],4:[function(require,module,exports){
},{"../../run-page":4,"./games":2}],4:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
const Template = require("./template/template");
module.exports = function runPage(PageComponent) {
const page = new PageComponent();
objectHtmlRenderer.setRenderCycleRoot(page);
const template = new Template({ page: new PageComponent() });
objectHtmlRenderer.setRenderCycleRoot(template);
objectHtmlRenderer.renderCycle();
};
},{"./lib/object-html-renderer":1}]},{},[3]);
},{"./lib/object-html-renderer":1,"./template/template":5}],5:[function(require,module,exports){
"use strict";
class Template {
constructor(props) {
this.props = props;
}
render() {
return {
tag: "main",
contents: [
{
tag: "header",
contents: [
{
tag: "ul",
contents: [
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/",
contents: "Home",
},
],
},
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/games/",
contents: "Jeux",
},
],
},
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/software-development/",
contents: "Software development",
},
],
},
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/education/",
contents: "Pédagogie",
},
],
},
],
},
],
},
{
tag: "div",
id: "page-container",
contents: [this.props.page.render()],
},
{
tag: "footer",
contents: [
{
tag: "a",
href: "mailto:kuadrado-software@tutanota.com",
contents: "kuadrado-software@tutanota.com",
},
],
},
],
};
}
}
module.exports = Template;
},{}]},{},[3]);
......@@ -3,12 +3,12 @@
<html>
<head>
<meta charset="utf-8" />
<title>Kuadrado Software - example</title>
<title>Kuadrado Software - games</title>
<link href="../../style/style.css" rel="stylesheet" />
</head>
<body>
<main></main>
</body>
<script type="text/javascript" src="./example.js"></script>
<script type="text/javascript" src="./games.js"></script>
</html>
\ No newline at end of file
......@@ -8,17 +8,12 @@ class HomePage {
render() {
return {
tag: "main",
tag: "div",
contents: [
{
tag: "h1",
contents: "Kuadrado Software",
},
{
tag: "a",
href: "example/",
contents: "Example page",
},
],
};
}
......@@ -124,11 +119,96 @@ runPage(HomePage);
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
const Template = require("./template/template");
module.exports = function runPage(PageComponent) {
const page = new PageComponent();
objectHtmlRenderer.setRenderCycleRoot(page);
const template = new Template({ page: new PageComponent() });
objectHtmlRenderer.setRenderCycleRoot(template);
objectHtmlRenderer.renderCycle();
};
},{"./lib/object-html-renderer":2}]},{},[3]);
},{"./lib/object-html-renderer":2,"./template/template":5}],5:[function(require,module,exports){
"use strict";
class Template {
constructor(props) {
this.props = props;
}
render() {
return {
tag: "main",
contents: [
{
tag: "header",
contents: [
{
tag: "ul",
contents: [
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/",
contents: "Home",
},
],
},
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/games/",
contents: "Jeux",
},
],
},
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/software-development/",
contents: "Software development",
},
],
},
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/education/",
contents: "Pédagogie",
},
],
},
],
},
],
},
{
tag: "div",
id: "page-container",
contents: [this.props.page.render()],
},
{
tag: "footer",
contents: [
{
tag: "a",
href: "mailto:kuadrado-software@tutanota.com",
contents: "kuadrado-software@tutanota.com",
},
],
},
],
};
}
}
module.exports = Template;
},{}]},{},[3]);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kuadrado Software - software-development</title>
<link href="../../style/style.css" rel="stylesheet" />
</head>
<body>
<main></main>
</body>
<script type="text/javascript" src="./software-development.js"></script>
</html>
\ No newline at end of file
......@@ -87,54 +87,128 @@ module.exports = {
},{}],2:[function(require,module,exports){
"use strict";
class Example2 {
class SoftwareDevelopment {
constructor(args) {
Object.assign(this, args);
}
render() {
return {
tag: "main",
tag: "div",
contents: [
{
tag: "h1",
contents: "Example 2",
},
{
tag: "a",
href: "/public/",
contents: "Home",
},
{ tag: "br" },
{
tag: "a",
href: "../example/",
contents: "Example page",
contents: "Software",
},
],
};
}
}
module.exports = Example2;
module.exports = SoftwareDevelopment;
},{}],3:[function(require,module,exports){
"use strict";
"use strict";
const runPage = require("../../run-page");
const Example2 = require("./example2");
runPage(Example2);
const SoftwareDevelopment = require("./software-development");
runPage(SoftwareDevelopment);
},{"../../run-page":4,"./example2":2}],4:[function(require,module,exports){
},{"../../run-page":4,"./software-development":2}],4:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
const Template = require("./template/template");
module.exports = function runPage(PageComponent) {
const page = new PageComponent();
objectHtmlRenderer.setRenderCycleRoot(page);
const template = new Template({ page: new PageComponent() });
objectHtmlRenderer.setRenderCycleRoot(template);
objectHtmlRenderer.renderCycle();
};
},{"./lib/object-html-renderer":1}]},{},[3]);
},{"./lib/object-html-renderer":1,"./template/template":5}],5:[function(require,module,exports){
"use strict";
class Template {
constructor(props) {
this.props = props;
}
render() {
return {
tag: "main",
contents: [
{
tag: "header",
contents: [
{
tag: "ul",
contents: [
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/",
contents: "Home",
},
],
},
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/games/",
contents: "Jeux",
},
],
},
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/software-development/",
contents: "Software development",
},
],
},
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/education/",
contents: "Pédagogie",
},
],
},
],
},
],
},
{
tag: "div",
id: "page-container",
contents: [this.props.page.render()],
},
{
tag: "footer",
contents: [
{
tag: "a",
href: "mailto:kuadrado-software@tutanota.com",
contents: "kuadrado-software@tutanota.com",
},
],
},
],
};
}
}
module.exports = Template;
},{}]},{},[3]);
......@@ -7,17 +7,12 @@ class HomePage {
render() {
return {
tag: "main",
tag: "div",
contents: [
{
tag: "h1",
contents: "Kuadrado Software",
},
{
tag: "a",
href: "example/",
contents: "Example page",
},
],
};
}
......
"use strict";
class EducationPage {
constructor(args) {
Object.assign(this, args);
}
render() {
return {
tag: "div",
contents: [
{
tag: "h1",
contents: "Pédagogie",
},
{
tag: "h2",
contents: "Game studio club",
},
{
tag: "h3",
contents: "Apprendre à créer un jeu vidéo de A à Z",
},
{
tag: "p",
contents:
"La création d'un jeu vidéo c'est l'occasion d'aborder plein de choses différentes !",
},
{
tag: "ul",
contents: [
{
tag: "li",
contents: [
{
tag: "strong",
contents: "Dessin et création 2D",
},
{
tag: "ul",
contents: [
{
tag: "li",
contents: "Créer des décors et des personnages",
},
{
tag: "li",
contents: "Dessiner sur ordinateur",
},
{
tag: "li",
contents: "Créer des animations 2D",
},
],
},
],
},
{
tag: "li",
contents: [
{
tag: "strong",
contents: "Musique et effets sonores",
},
{
tag: "ul",
contents: [
{
tag: "li",
contents:
"Utiliser des logiciels de son et des synthétiseurs",
},
{
tag: "li",
contents: "Composer une musique",
},
{
tag: "li",
contents: "Faire une prise de son",
},
{
tag: "li",
contents: "Mixer un enregistrement",
},
],
},
],
},
{
tag: "li",
contents: [
{
tag: "strong",
contents: "Développer un univers",
},
{
tag: "ul",
contents: [
{
tag: "li",
contents:
"Écrire une histoire, construire une narration",
},
{
tag: "li",
contents: "Imaginer des mondes et des personnages",
},
],
},
],
},
{
tag: "li",
contents: [
{
tag: "strong",
contents: "Concevoir le jeu",
},
{
tag: "ul",
contents: [
{
tag: "li",
contents: "Comprendre ce qui fait le jeu",
},
{
tag: "li",
contents: "Développer les mécanismes du gameplay",
},
],
},
],
},
{
tag: "li",
contents: [
{
tag: "strong",
contents: "Programmation informatique",
},
{
tag: "ul",
contents: [
{
tag: "li",
contents:
"Apprendre pas à pas à coder avec différents langages de programmation",
},
{
tag: "li",
contents:
"Découvrir les bases du web en créant des mini-jeux en lignes",
},
],
},
],
},
{
tag: "li",
contents: [
{
tag: "strong",
contents: "Mathématiques et pysique",
},
{
tag: "ul",
contents: [
{
tag: "li",
contents:
"Le jeu vidéo et l'informatique en général, c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !",
},
{
tag: "li",
contents:
"Algorithmie, logique, calcul décimal, ensembles, géométrie, trigonométrie, algèbre linéaire ,vecteurs, repères en 2 dimensions ...",
},
],
},
],
},
],
},
],
};
}
}
module.exports = EducationPage;
"use strict";
"use strict";
const runPage = require("../../run-page");
const Example2 = require("./example2");
runPage(Example2);
const EducationPage = require("./education");
runPage(EducationPage);
"use strict";
class Example {
class GamesPage {
constructor(args) {
Object.assign(this, args);
}
render() {
return {
tag: "main",
tag: "div",
contents: [
{
tag: "h1",
contents: "Example",
},
{
tag: "a",
href: "/public/",
contents: "Home",
},
{tag:"br"},
{
tag: "a",
href: "../example2/",
contents: "Example page 2",
contents: "Games",
},
],
};
}
}
module.exports = Example;
module.exports = GamesPage;
......@@ -2,5 +2,5 @@
"use strict";
const runPage = require("../../run-page");
const Example = require("./example");
runPage(Example);
const GamesPage = require("./games");
runPage(GamesPage);
"use strict";
"use strict";
const runPage = require("../../run-page");
const SoftwareDevelopment = require("./software-development");
runPage(SoftwareDevelopment);
"use strict";
class Example2 {
class SoftwareDevelopment {
constructor(args) {
Object.assign(this, args);
}
render() {
return {
tag: "main",
tag: "div",
contents: [
{
tag: "h1",
contents: "Example 2",
},
{
tag: "a",
href: "/public/",
contents: "Home",
},
{ tag: "br" },
{
tag: "a",
href: "../example/",
contents: "Example page",
contents: "Software",
},
],
};
}
}
module.exports = Example2;
module.exports = SoftwareDevelopment;
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
const Template = require("./template/template");
module.exports = function runPage(PageComponent) {
const page = new PageComponent();
objectHtmlRenderer.setRenderCycleRoot(page);
const template = new Template({ page: new PageComponent() });
objectHtmlRenderer.setRenderCycleRoot(template);
objectHtmlRenderer.renderCycle();
};
......@@ -7,5 +7,5 @@ body {
}
main {
background-color: #eee;
//
}
"use strict";
class Template {
constructor(props) {
this.props = props;
}
render() {
return {
tag: "main",
contents: [
{
tag: "header",
contents: [
{
tag: "ul",
contents: [
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/",
contents: "Home",
},
],
},
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/games/",
contents: "Jeux",
},
],
},
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/software-development/",
contents: "Software development",
},
],
},
{
tag: "li",
contents: [
{
tag: "a",
href: "/public/education/",
contents: "Pédagogie",
},
],
},
],
},
],
},
{
tag: "div",
id: "page-container",
contents: [this.props.page.render()],
},
{
tag: "footer",
contents: [
{
tag: "a",
href: "mailto:kuadrado-software@tutanota.com",
contents: "kuadrado-software@tutanota.com",
},
],
},
],
};
}
}
module.exports = Template;
......@@ -6,8 +6,4 @@ body * {
box-sizing: border-box;
}
main {
background-color: #eee;
}
/*# sourceMappingURL=style.css.map */
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment