UPDATE file structure

index.html

@@ -100,6 +100,19 @@ var marginBottom = 50; // in px
 </code></pre>
 <h2 id="addingatemplate">Adding a template</h2>
 <p>TODO</p>
+<ul>
+<li>add folder in resumes, convention: 'resume-X'</li>
+<li>add .less and .mustache with same naming</li>
+</ul>
+<pre><code class="html language-html">&lt;page class="a4"&gt;
+    &lt;div id="resume1" class="resume"&gt;
+      &lt;!-- Content goes here --&gt;
+    &lt;/div&gt;
+&lt;/page&gt;
+</code></pre>
+<ul>
+<li>url </li>
+</ul>
 <h2 id="contribute">Contribute</h2>
 <p>Feel free to create your own templates. Please read this documentation carefully. After adding your template please add a preview as in <code>/public/preview</code> and add it to the README. Compile index.html for github Pages with <code>npm run readme</code>. If needed adjust github Pages styling in <code>/less/githubPages.less</code>.</p>
     </div>

resumes/resume-large-name/index.mustache

@@ -0,0 +1,12 @@
+<page class="a4" class="resumeLargeName">
+    <div id="resumeLargeName" class="resume">
+        <div class="top"></div>
+
+        <div class="bottom">
+            <div class="first name"> {{person.name.first}}.
+            </div>
+            <div class="last name"> {{person.name.last}}.
+            </div>
+        </div>
+    </div>
+</page>

resumes/resume-large-name/style.less

@@ -0,0 +1,16 @@
+page.resumeLargeName {
+    background: black;
+    color: white;
+}
+
+#resumeLargeName {
+    .top {
+        width: 100%;
+        height: 38%;
+    }
+
+    .bottom {
+        height: 62%;
+        width: 100%;
+    }
+}

src/compileLess.js

@@ -49,7 +49,7 @@ async function compileLessFiles() {
 
     const contents = await Promise.all(
         directories
-        .map(resume => readFileContent('resumes/' + resume + '/' + resume + '.less'))
+        .map(resume => readFileContent('resumes/' + resume + '/style.less'))
     );
     const compiledContents = await Promise.all(
         contents

src/server.js

@@ -45,7 +45,7 @@ for (let resume of directories) {
     app.get('/' + resume, (req, res) => {
         res.render('views/layout', {
             partials: {
-                content: resume + '/' + resume
+                content: resume + '/index'
             },
             person: person
         });