Reworked to take a template html file
This commit is contained in:
parent
917195ff61
commit
5b671ea104
4
.gitignore
vendored
4
.gitignore
vendored
@ -1,4 +1,4 @@
|
||||
node_modules
|
||||
public/
|
||||
out/
|
||||
dev/
|
||||
build/
|
||||
.DS_Store
|
||||
53
gulpfile.js
53
gulpfile.js
@ -1,38 +1,43 @@
|
||||
const { src, dest, watch, series } = require('gulp')
|
||||
const pug = require('gulp-pug')
|
||||
const sass = require('gulp-sass')(require('sass'))
|
||||
const bs = require('browser-sync').create()
|
||||
const fs = require('fs')
|
||||
const helper = require('./theme/helper.js');
|
||||
const { src, dest, watch, series } = require("gulp");
|
||||
const bs = require("browser-sync").create();
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
const index = require("./index");
|
||||
const resumePath = path.join(__dirname, "resume.json");
|
||||
|
||||
function css () {
|
||||
return src('./theme/styles.scss')
|
||||
.pipe(sass())
|
||||
.pipe(dest('./theme'))
|
||||
function setup(cb){
|
||||
let dir = path.join(__dirname, 'dev');
|
||||
if (!fs.existsSync(dir)){
|
||||
fs.mkdirSync(dir);
|
||||
}
|
||||
cb();
|
||||
}
|
||||
|
||||
function html () {
|
||||
const resume = JSON.parse(fs.readFileSync('./resume.json', 'utf-8'))
|
||||
function css(cb) {
|
||||
|
||||
return src('./theme/template.pug')
|
||||
.pipe(pug({ data: { resume, helper } }))
|
||||
.pipe(dest('./public'))
|
||||
cb();
|
||||
}
|
||||
|
||||
function html(cb) {
|
||||
const resume = JSON.parse(fs.readFileSync("./resume.json", "utf-8"));
|
||||
|
||||
fs.writeFileSync(path.join(__dirname, 'dev/template.html'), index.render(resume));
|
||||
|
||||
cb();
|
||||
}
|
||||
|
||||
function serve() {
|
||||
bs.init({
|
||||
server: {
|
||||
baseDir: './public',
|
||||
index: 'template.html'
|
||||
baseDir: "./dev",
|
||||
index: "template.html",
|
||||
},
|
||||
ui: false,
|
||||
open: false
|
||||
})
|
||||
open: false,
|
||||
});
|
||||
|
||||
watch('./theme/**/*.scss', series(css, html))
|
||||
watch(['./theme/**/*.pug', './resume.json'], html)
|
||||
bs.watch('./public/*.html').on('change', bs.reload)
|
||||
watch(['./theme/**/*.html', './resume.json'], html)
|
||||
bs.watch("./dev/*.html").on("change", bs.reload);
|
||||
}
|
||||
|
||||
exports.css = css
|
||||
exports.default = series(css, html, serve)
|
||||
exports.default = series(setup, css, html, serve);
|
||||
|
||||
31
index.js
31
index.js
@ -1,12 +1,27 @@
|
||||
const pug = require('pug');
|
||||
const path = require('path');
|
||||
const helper = require('./theme/helper')
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
const templateFile = path.join(__dirname, "theme/template.html");
|
||||
|
||||
const render = (resume) => pug.renderFile(path.join(__dirname, 'theme', 'template.pug'),{
|
||||
resume,
|
||||
helper
|
||||
})
|
||||
function replaceTokens(str, data) {
|
||||
const tokenRegex = /{(.*?)}/g;
|
||||
|
||||
str = str.replace(tokenRegex, (match, token) => {
|
||||
let value = data;
|
||||
|
||||
for (let key of token.split(".")) {
|
||||
value = value[key];
|
||||
}
|
||||
return value;
|
||||
});
|
||||
|
||||
return str;
|
||||
}
|
||||
|
||||
const render = (resume) => {
|
||||
let template = fs.readFileSync(templateFile, { encoding: "utf-8" });
|
||||
return replaceTokens(template, resume);
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
render,
|
||||
}
|
||||
};
|
||||
|
||||
3936
package-lock.json
generated
3936
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
@ -6,17 +6,13 @@
|
||||
"scripts": {
|
||||
"dev": "gulp",
|
||||
"resume": "resume",
|
||||
"build": "mkdir -p out && resume export out/resume.pdf --theme . && resume export out/resume.html --theme ."
|
||||
"build": "mkdir -p build && resume export build/resume.pdf --theme . && resume export build/resume.html --theme ."
|
||||
},
|
||||
"author": "Thomas Cole",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"browser-sync": "^2.29.1",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-pug": "^5.0.0",
|
||||
"gulp-sass": "^5.1.0",
|
||||
"jsonresume-theme-elegant": "^1.16.1",
|
||||
"pug": "^3.0.2",
|
||||
"resume-cli": "^3.0.8",
|
||||
"sass": "^1.60.0"
|
||||
"resume-cli": "^3.0.8"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,28 +0,0 @@
|
||||
const validArray = (array) => array !== undefined && array.length > 0;
|
||||
|
||||
const formatdate = (date) => {
|
||||
const monthNames = [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
"November",
|
||||
"December",
|
||||
];
|
||||
const monthIndex = date.getMonth();
|
||||
const year = date.getFullYear();
|
||||
|
||||
return `${monthNames[monthIndex]} ${year}`;
|
||||
}
|
||||
|
||||
|
||||
module.exports = {
|
||||
validArray,
|
||||
formatdate
|
||||
};
|
||||
@ -1,10 +0,0 @@
|
||||
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
|
||||
@ -1,21 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
@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;
|
||||
}
|
||||
113
theme/template.html
Normal file
113
theme/template.html
Normal file
@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Resume - {basics.name}</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
|
||||
/>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
--primary: #006494;
|
||||
--on-primary: #ffffff;
|
||||
--primary-container: #c8e6ff;
|
||||
--on-primary-container: #001e31;
|
||||
--secondary: #50606e;
|
||||
--on-secondary: #ffffff;
|
||||
--secondary-container: #d3e4f5;
|
||||
--on-secondary-container: #0c1d29;
|
||||
--tertiary: #65597b;
|
||||
--on-tertiary: #ffffff;
|
||||
--tertiary-container: #ecdcff;
|
||||
--on-tertiary-container: #201634;
|
||||
--error: #ba1b1b;
|
||||
--error-container: #ffdad4;
|
||||
--on-error: #ffffff;
|
||||
--on-error-container: #410001;
|
||||
--background: #fcfcff;
|
||||
--on-background: #1a1c1e;
|
||||
--surface: #fcfcff;
|
||||
--on-surface: #1a1c1e;
|
||||
--surface-variant: #dee3ea;
|
||||
--on-surface-variant: #41474d;
|
||||
--outline: #72787e;
|
||||
--inverse-on-surface: #f0f0f3;
|
||||
--inverse-surface: #2f3032;
|
||||
--inverse-primary: #8bceff;
|
||||
|
||||
--error-container-alt: #ffd3cc;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 8.5in;
|
||||
height: 11in;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* 'Danger' zone. Highlights content that would not print on the page */
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
var(--error-container-alt),
|
||||
var(--error-container-alt) 10px,
|
||||
var(--error-container) 10px,
|
||||
var(--error-container) 20px
|
||||
|
||||
) fixed;
|
||||
}
|
||||
|
||||
.page {
|
||||
page-break-after: always;
|
||||
position: relative;
|
||||
width: 8.5in;
|
||||
height: 11in;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
position: absolute;
|
||||
width: 8.125in;
|
||||
height: 10.625in;
|
||||
left: 0.1875in;
|
||||
top: 0.1875in;
|
||||
color: var(--on-background);
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
@media print {
|
||||
body{
|
||||
background: unset;
|
||||
background-color: var(--background);
|
||||
};
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="page-content">
|
||||
<h1>Hello</h1>
|
||||
<p>This is some text</p>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,9 +0,0 @@
|
||||
doctype html
|
||||
html(lang="en")
|
||||
head
|
||||
meta(charset="utf-8")
|
||||
style
|
||||
include styles.css
|
||||
title=`${resume.basics.name} - Resume`
|
||||
body.container
|
||||
include pug/info
|
||||
Loading…
Reference in New Issue
Block a user