Push changes before ripping out pug

notes.md

@@ -0,0 +1,3 @@
+TLDR on theme generation. 
+
+In short, if you want to add a theme to the official list, you need to publish an NPM module named `jsonresume-theme-{name}`. That module needs to export a function called `render` that takes a `resume.json` and returns a plain HTML string.

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "gulp",
     "resume": "resume",
-    "build": "mkdir -p out && resume export out/resume.pdf && resume export out/resume.html"
+    "build": "mkdir -p out && resume export out/resume.pdf --theme . && resume export out/resume.html --theme ."
   },
   "author": "Thomas Cole",
   "license": "MIT",

theme/pug/info.pug

@@ -0,0 +1,10 @@
+div.box
+    div.center
+        figure.image.is-256x256
+            img.is-rounded(
+                src=resume.basics.image,
+                alt=resume.basics.name,
+            )
+    br
+    h1.title.is-3.has-text-centered=resume.basics.name
+    h2.subtitle.has-text-centered=resume.basics.email

theme/pug/test.pug

@@ -1 +0,0 @@
-h1=helper.formatdate(new Date('2020-01-02'))

theme/styles.css

@@ -1,3 +1,21 @@
-.foo {
-  background-color: black;
+@import "https://jenil.github.io/bulmaswatch/materia/bulmaswatch.min.css";
+.container {
+  padding-top: 16px;
+  display: grid;
+  grid-template-columns: 30% 1fr;
+  grid-template-rows: 1fr;
+  grid-auto-columns: 1fr;
+  gap: 0px 0px;
+  grid-auto-flow: row;
+  grid-template-areas: ". .";
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+}
+
+.is-256x256 {
+  width: 256px;
+  height: 256px;
 }

theme/styles.scss

@@ -1,5 +1,23 @@
 @charset "UTF-8";
+@import "https://jenil.github.io/bulmaswatch/materia/bulmaswatch.min.css";
 
-.foo{
-    background-color: black;
+.container {
+  padding-top: 16px;
+  display: grid;
+  grid-template-columns: 30% 1fr;
+  grid-template-rows: 1fr;
+  grid-auto-columns: 1fr;
+  gap: 0px 0px;
+  grid-auto-flow: row;
+  grid-template-areas: ". .";
+}
+
+.center{
+    display: flex;
+    justify-content: center;
+}
+
+.is-256x256{
+    width: 256px;
+    height: 256px;
 }

theme/template.pug

@@ -5,5 +5,5 @@ html(lang="en")
         style
             include styles.css 
         title=`${resume.basics.name} - Resume`
-    body
-        include pug/test
+    body.container
+        include pug/info