71 lines
1.9 KiB
JavaScript
71 lines
1.9 KiB
JavaScript
import dayjs from 'dayjs';
|
|
import ejs from 'ejs';
|
|
import Polyglot from 'node-polyglot';
|
|
|
|
import { upsertStyleTag } from '../lib/utils';
|
|
import {
|
|
getRenderData,
|
|
varNamePrimaryColor,
|
|
} from './data';
|
|
|
|
const themes = {}
|
|
|
|
const themeNames = ['reorx']
|
|
|
|
// https://vitejs.dev/guide/features.html#disabling-css-injection-into-the-page
|
|
// note that `?raw` (https://vitejs.dev/guide/assets.html#importing-asset-as-string)
|
|
// cannot be used because we need vite to transform scss into css
|
|
const styleMoudules = import.meta.glob("./*/index.scss", { "query": "?inline" })
|
|
|
|
console.log('themes index')
|
|
for (const name of themeNames) {
|
|
const templateModule = await import(`./${name}/index.ejs`)
|
|
const themeModule = await import(`./${name}/index.js`)
|
|
console.log(`theme supported locales: ${themeModule.locales}`)
|
|
|
|
// https://vitejs.dev/guide/features.html#glob-import
|
|
const styleModule = await styleMoudules[`./${name}/index.scss`]()
|
|
|
|
themes[name] = {
|
|
index: themeModule,
|
|
template: templateModule.default,
|
|
style: styleModule.default,
|
|
}
|
|
}
|
|
|
|
// set default
|
|
themes.default = themes.reorx
|
|
|
|
export function getTheme(name) {
|
|
return themes[name]
|
|
}
|
|
|
|
export function renderTheme(theme, cvData, options) {
|
|
const locale = cvData.meta.locale || 'en'
|
|
const messages = theme.index.localeMessages[locale]
|
|
if (!messages) {
|
|
return `Error: locale '${locale}' is not supported, please use one of: ${theme.index.locales}`
|
|
}
|
|
const polyglot = new Polyglot({
|
|
phrases: messages,
|
|
locale,
|
|
})
|
|
dayjs.locale(locale)
|
|
return ejs.render(theme.template, getRenderData(cvData, locale, polyglot), options)
|
|
}
|
|
|
|
const cvStyleId = 'cv-style'
|
|
|
|
export function renderThemeOn(name, el, data, primaryColor) {
|
|
const theme = getTheme(name)
|
|
el.innerHTML = renderTheme(theme, data)
|
|
|
|
upsertStyleTag(cvStyleId, theme.style)
|
|
|
|
document.documentElement.style.setProperty(varNamePrimaryColor, primaryColor)
|
|
}
|
|
|
|
export function loadThemeData(name) {
|
|
require(`./${name}/index.js`)
|
|
}
|