gitadmin
/
jsoncv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add more styles and use icons in theme

This commit is contained in:
Reorx 2023-02-05 23:23:45 +08:00
parent d3c4bf38d6
commit fd9a90c4f3
5 changed files with 127 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/index.html
View File

@ -4,7 +4,10 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <style>
</style>
<title>CV</title>
</head> </head>
<body> <body>
<div class="cv-container"></div> <div class="cv-container"></div>

2
src/lib/icons.js
View File

@ -18,7 +18,7 @@ const getIconsData = function(prefix) {
throw new Error(`Icon set ${prefix} is not included.`); throw new Error(`Icon set ${prefix} is not included.`);
} }
export const getIconSVG = function(name, { dom }) { export const getIconSVG = function(name, { dom } = {}) {
const iconName = stringToIcon(name) const iconName = stringToIcon(name)
const icon = getIconData(getIconsData(iconName.prefix), iconName.name) const icon = getIconData(getIconsData(iconName.prefix), iconName.name)
if (!icon) { if (!icon) {

68
src/templates/reorx/index.ejs
View File

@ -1,9 +1,37 @@
<!-- Basics --> <!-- Basics -->
<h1><%= cv.basics.name %></h1> <section class="basics-section">
<p><%= cv.basics.summary %></p> <h1><%= cv.basics.name %></h1>
<div class="contact"> <% if (cv.basics.label) { %>
<%= cv.basics.email %> | <%= cv.basics.phone %> <div class="label"><%= cv.basics.label %></div>
</div> <% } %>
<% if (cv.basics.url) { %>
<div class="url">
<a href="<%= cv.basics.url %>"><%= fn.urlNoSchema(cv.basics.url) %></a></div>
<% } %>
<% if (cv.basics.summary) { %>
<div class="summary"><%= cv.basics.summary %></div>
<% } %>
<div class="contact">
<% if (cv.basics.email) { %>
<div class="item">
<%- fn.getIconSVG('mdi:email') %>
<span><a href="mailto:<%= cv.basics.email %>"><%= cv.basics.email %></a></span>
</div>
<% } %>
<% if (cv.basics.phone) { %>
<div class="item">
<%- fn.getIconSVG('mdi:phone') %>
<span><%= cv.basics.phone %></span>
</div>
<% } %>
<% if (cv.basics.location) { %>
<div class="item">
<%- fn.getIconSVG('mdi:location') %>
<span><%= cv.basics.location.city %>, <%= cv.basics.location.countryCode %></span>
</div>
<% } %>
</div>
</section>
<% <%
function dateRange(item, preserveDay) { function dateRange(item, preserveDay) {
@ -21,7 +49,10 @@ function dateRange(item, preserveDay) {
<!-- Educations --> <!-- Educations -->
<% if (cv.education) { %> <% if (cv.education) { %>
<section> <section>
<h2>Educations</h2> <div class="section-title">
<h2>Educations</h2>
<div class="line"></div>
</div>
<% for (const item of cv.education) { %> <% for (const item of cv.education) { %>
<div class="education"> <div class="education">
<h3><%= item.institution %></h3> <h3><%= item.institution %></h3>
@ -37,7 +68,10 @@ function dateRange(item, preserveDay) {
<!-- Work --> <!-- Work -->
<% if (cv.work) { %> <% if (cv.work) { %>
<section> <section>
<h2>Work</h2> <div class="section-title">
<h2>Work</h2>
<div class="line"></div>
</div>
<% for (const item of cv.work) { %> <% for (const item of cv.work) { %>
<div class="work"> <div class="work">
<h3><%= item.name %></h3> <h3><%= item.name %></h3>
@ -58,7 +92,10 @@ function dateRange(item, preserveDay) {
<!-- Projects --> <!-- Projects -->
<% if (cv.projects) { %> <% if (cv.projects) { %>
<section> <section>
<h2>Projects</h2> <div class="section-title">
<h2>Projects</h2>
<div class="line"></div>
</div>
<% for (const item of cv.projects) { %> <% for (const item of cv.projects) { %>
<div class="project"> <div class="project">
<h3><%= item.name %></h3> <h3><%= item.name %></h3>
@ -83,7 +120,10 @@ function dateRange(item, preserveDay) {
<!-- Side-projects --> <!-- Side-projects -->
<% if (cv.sideProjects) { %> <% if (cv.sideProjects) { %>
<section> <section>
<h2>Side-projects</h2> <div class="section-title">
<h2>Side-projects</h2>
<div class="line"></div>
</div>
<% for (const item of cv.sideProjects) { %> <% for (const item of cv.sideProjects) { %>
<div class="sideproject"> <div class="sideproject">
<h3><%= item.name %></h3> <h3><%= item.name %></h3>
@ -103,7 +143,10 @@ function dateRange(item, preserveDay) {
<!-- Skills --> <!-- Skills -->
<% if (cv.skills) { %> <% if (cv.skills) { %>
<section> <section>
<h2>Skills</h2> <div class="section-title">
<h2>Skills</h2>
<div class="line"></div>
</div>
<% for (const item of cv.skills) { %> <% for (const item of cv.skills) { %>
<div class="skill"> <div class="skill">
<h3><%= item.name %></h3> <h3><%= item.name %></h3>
@ -121,7 +164,10 @@ function dateRange(item, preserveDay) {
<!-- Languages --> <!-- Languages -->
<% if (cv.languages) { %> <% if (cv.languages) { %>
<section> <section>
<h2>Languages</h2> <div class="section-title">
<h2>Languages</h2>
<div class="line"></div>
</div>
<% for (const item of cv.languages) { %> <% for (const item of cv.languages) { %>
<div class="language"> <div class="language">
<h3><%= item.language %></h3> <h3><%= item.language %></h3>

56
src/templates/reorx/index.scss
View File

@ -1,5 +1,61 @@
$color-signature: #2A3FFB;
$color-text-dim: #777;
.cv-container { .cv-container {
font-size: 14px; font-size: 14px;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
a, a:visited, a:hover, a:active {
color: $color-signature;
text-decoration: none;
}
}
.basics-section {
h1 {
font-size: 36px;
font-weight: 600;
margin: .8em 0 .2em 0;
}
.label {
margin: .4em 0;
}
.url {
margin: .4em 0;
}
.summary {
margin: .4em 0;
}
.contact {
margin: .4em 0;
color: $color-text-dim;
display: flex;
.item {
margin-right: 1em;
a {
color: $color-text-dim;
}
svg {
vertical-align: bottom;
}
}
}
}
.section-title {
margin-top: 3em;
display: flex;
h2 {
font-size: 22px;
font-weight: 600;
color: $color-signature;
margin: 0;
}
.line {
flex-grow: 1;
margin: 14px 0 0 1em;
height: 2px;
background-color: $color-signature;
}
} }

9
src/themer/index.js
View File

@ -1,6 +1,7 @@
import ejs from 'ejs'; import ejs from 'ejs';
import { reformatDate } from '../lib/date'; import { reformatDate } from '../lib/date';
import { getIconSVG } from '../lib/icons';
const themes = {} const themes = {}
@ -35,6 +36,8 @@ export function renderTheme(template, data, options) {
cv: data, cv: data,
fn: { fn: {
reformatDate, reformatDate,
getIconSVG,
urlNoSchema,
} }
}, options) }, options)
} }
@ -52,3 +55,9 @@ export function applyThemeTo(name, el, data) {
} }
elStyle.innerHTML = theme.style elStyle.innerHTML = theme.style
} }
/* fn */
function urlNoSchema(url) {
return url.replace(/https?:\/\//, '')
}