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

preview: inject style tag for cv-base.css manually to make downloaded preview work 

vite does not inject style tag, therefore <link rel=stylesheet> does not work in the downloaded HTML
This commit is contained in:
Reorx 2023-02-14 17:03:36 +08:00
parent 1ff558826c
commit eed3ffb6a6
4 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/utils.js
View File

@ -71,3 +71,13 @@ export function downloadIframeHTML(filename, iframe) {
a.click(); a.click();
document.body.removeChild(a) document.body.removeChild(a)
} }
export function upsertStyleTag(styleId, content) {
let elStyle = document.getElementById(styleId)
if (!elStyle) {
elStyle = document.createElement('style')
elStyle.id = styleId
document.head.appendChild(elStyle)
}
elStyle.innerHTML = content
}

1
src/preview/index.html
View File

@ -3,7 +3,6 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>CV</title> <title>CV</title>
<link rel="stylesheet" href="../scss/cv-base.css">
</head> </head>
<body> <body>
<div class="cv-container"></div> <div class="cv-container"></div>

5
src/preview/main.js
View File

@ -3,6 +3,8 @@ import {
getCVSavedTime, getCVSavedTime,
getPrimaryColor, getPrimaryColor,
} from '../lib/store'; } from '../lib/store';
import { upsertStyleTag } from '../lib/utils';
import cvBaseStyle from '../scss/cv-base.css?inline';
import { renderThemeOn } from '../themes'; import { renderThemeOn } from '../themes';
import { getCVTitle } from '../themes/data'; import { getCVTitle } from '../themes/data';
@ -34,7 +36,10 @@ const restoreScrollPosition = () => {
// Render CV // Render CV
const data = getCVData() const data = getCVData()
if (data) { if (data) {
upsertStyleTag('base-style', cvBaseStyle)
renderThemeOn(themeName, elCV, data, getPrimaryColor()) renderThemeOn(themeName, elCV, data, getPrimaryColor())
// change document title // change document title
document.title = getCVTitle(data) document.title = getCVTitle(data)
// restore scroll position // restore scroll position

8
src/themes/index.js
View File

@ -1,5 +1,6 @@
import ejs from 'ejs'; import ejs from 'ejs';
import { upsertStyleTag } from '../lib/utils';
import { import {
getRenderData, getRenderData,
varNamePrimaryColor, varNamePrimaryColor,
@ -43,12 +44,7 @@ export function renderThemeOn(name, el, data, primaryColor) {
const theme = getTheme(name) const theme = getTheme(name)
el.innerHTML = renderTheme(theme.template, data) el.innerHTML = renderTheme(theme.template, data)
let elStyle = document.getElementById(cvStyleId) upsertStyleTag(cvStyleId, theme.style)
if (!elStyle) {
elStyle = document.createElement('style')
document.head.appendChild(elStyle)
}
elStyle.innerHTML = theme.style
document.documentElement.style.setProperty(varNamePrimaryColor, primaryColor) document.documentElement.style.setProperty(varNamePrimaryColor, primaryColor)
} }