From eed3ffb6a66aff0de7e4e4e80fa8b31d1306f001 Mon Sep 17 00:00:00 2001 From: Reorx Date: Tue, 14 Feb 2023 17:03:36 +0800 Subject: [PATCH] preview: inject style tag for cv-base.css manually to make downloaded preview work vite does not inject style tag, therefore does not work in the downloaded HTML --- src/lib/utils.js | 10 ++++++++++ src/preview/index.html | 1 - src/preview/main.js | 5 +++++ src/themes/index.js | 8 ++------ 4 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/lib/utils.js b/src/lib/utils.js index 321beef..4ee51d0 100644 --- a/src/lib/utils.js +++ b/src/lib/utils.js @@ -71,3 +71,13 @@ export function downloadIframeHTML(filename, iframe) { a.click(); 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 +} diff --git a/src/preview/index.html b/src/preview/index.html index f963304..6b62885 100644 --- a/src/preview/index.html +++ b/src/preview/index.html @@ -3,7 +3,6 @@ CV -
diff --git a/src/preview/main.js b/src/preview/main.js index 86b85c3..cbcaeb2 100644 --- a/src/preview/main.js +++ b/src/preview/main.js @@ -3,6 +3,8 @@ import { getCVSavedTime, getPrimaryColor, } from '../lib/store'; +import { upsertStyleTag } from '../lib/utils'; +import cvBaseStyle from '../scss/cv-base.css?inline'; import { renderThemeOn } from '../themes'; import { getCVTitle } from '../themes/data'; @@ -34,7 +36,10 @@ const restoreScrollPosition = () => { // Render CV const data = getCVData() if (data) { + + upsertStyleTag('base-style', cvBaseStyle) renderThemeOn(themeName, elCV, data, getPrimaryColor()) + // change document title document.title = getCVTitle(data) // restore scroll position diff --git a/src/themes/index.js b/src/themes/index.js index c2e1815..3bb80c8 100644 --- a/src/themes/index.js +++ b/src/themes/index.js @@ -1,5 +1,6 @@ import ejs from 'ejs'; +import { upsertStyleTag } from '../lib/utils'; import { getRenderData, varNamePrimaryColor, @@ -43,12 +44,7 @@ export function renderThemeOn(name, el, data, primaryColor) { const theme = getTheme(name) el.innerHTML = renderTheme(theme.template, data) - let elStyle = document.getElementById(cvStyleId) - if (!elStyle) { - elStyle = document.createElement('style') - document.head.appendChild(elStyle) - } - elStyle.innerHTML = theme.style + upsertStyleTag(cvStyleId, theme.style) document.documentElement.style.setProperty(varNamePrimaryColor, primaryColor) }