From 29fe78843f108a1ea0e45b5a01b98310277c19c9 Mon Sep 17 00:00:00 2001 From: Joost De Cock Date: Fri, 20 May 2022 16:27:51 +0200 Subject: [PATCH] feat(shared): Better theme support in Dot --- .../freesewing.shared/components/mdx/dot-rough.js | 13 ++++++++++++- packages/freesewing.shared/components/mdx/dot.js | 7 +++---- packages/freesewing.shared/prebuild/mdx.mjs | 3 +-- packages/freesewing.shared/prebuild/strapi.mjs | 3 +-- 4 files changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/freesewing.shared/components/mdx/dot-rough.js b/packages/freesewing.shared/components/mdx/dot-rough.js index 830246deb3f..7060be471fe 100644 --- a/packages/freesewing.shared/components/mdx/dot-rough.js +++ b/packages/freesewing.shared/components/mdx/dot-rough.js @@ -36,6 +36,12 @@ const noBlack = orig => { if (orig.getAttribute('stroke') === '#000000') { orig.setAttribute('stroke', 'currentColor') } + if (orig.getAttribute('fill') === '#000000') { + orig.setAttribute('fill', 'currentColor') + } + if (orig.getAttribute('color') === '#000000') { + orig.setAttribute('color', 'currentColor') + } return orig } @@ -76,8 +82,8 @@ const coarse = (svg, options) => { const rc = rough.svg(svg, options || {}) + // Replace shapes const children = svg.querySelectorAll('circle, rect, ellipse, line, polygon, polyline, path') - for(let i = 0; i < children.length; i += 1) { const original = noBlack(children[i]); const params = []; @@ -125,6 +131,11 @@ const coarse = (svg, options) => { original.replaceWith(replacement); } + + // Replace text color + const text = svg.querySelectorAll('text') + for(let i = 0; i < text.length; i += 1) noBlack(text[i]) + } export default coarse diff --git a/packages/freesewing.shared/components/mdx/dot.js b/packages/freesewing.shared/components/mdx/dot.js index cbaeff11d4f..71cba86beed 100644 --- a/packages/freesewing.shared/components/mdx/dot.js +++ b/packages/freesewing.shared/components/mdx/dot.js @@ -59,10 +59,9 @@ const Dot = props => { // Strip width/height so it's responsive svgRef.current.children[0].attributes.width.value = "" svgRef.current.children[0].attributes.height.value = "" - // Set style for theme support - svgRef.current.children[0].setAttribute('stroke', "currentColor") + // Add class for specific styling + svgRef.current.children[0].setAttribute('class', "no-fs") }) - }, [dot]) return ( @@ -80,7 +79,7 @@ const Dot = props => { ref={svgRef} onClick={() => setZoom(!zoom)} className={zoom - ? 'svg-zoom non-fs-svg' + ? 'svg-zoom non-fs-svg text-base-content' : "dot shadow p-2 rounded -mt-8 hover:cursor-zoom-in text-base-content non-fs-svg" } dangerouslySetInnerHTML={{__html: svg}} diff --git a/packages/freesewing.shared/prebuild/mdx.mjs b/packages/freesewing.shared/prebuild/mdx.mjs index 3f98e030b0b..6150e5c6264 100644 --- a/packages/freesewing.shared/prebuild/mdx.mjs +++ b/packages/freesewing.shared/prebuild/mdx.mjs @@ -1,6 +1,5 @@ import path from 'path' import fs from 'fs' -import i18nConfig from '../config/i18n.config.mjs' import rdir from 'recursive-readdir' import { unified } from 'unified' import remarkParser from 'remark-parse' @@ -91,7 +90,7 @@ export const prebuildMdx = async(site) => { // Loop over locales const pages = {} - for (const lang of (site === 'dev' ? ['en'] : i18nConfig.locales)) { + for (const lang of (site === 'dev' ? ['en'] : ['en', 'fr', 'es', 'nl', 'de'])) { console.log(` - Language: ${lang}`) diff --git a/packages/freesewing.shared/prebuild/strapi.mjs b/packages/freesewing.shared/prebuild/strapi.mjs index a190699ead6..a4cd6f6e296 100644 --- a/packages/freesewing.shared/prebuild/strapi.mjs +++ b/packages/freesewing.shared/prebuild/strapi.mjs @@ -2,7 +2,6 @@ import path from 'path' import fs from 'fs' import axios from 'axios' import { strapiHost } from '../config/freesewing.mjs' -import i18nConfig from '../config/i18n.config.mjs' import { unified } from 'unified' import remarkParser from 'remark-parse' import remarkCompiler from 'remark-stringify' @@ -75,7 +74,7 @@ export const prebuildStrapi = async(site) => { for (const type of types) { authors[type] = {} // Loop over locales - for (const lang of (site === 'dev' ? ['en'] : i18nConfig.locales)) { + for (const lang of (site === 'dev' ? ['en'] : ['en', 'es', 'de', 'fr', 'nl'])) { posts[lang] = {} console.log(` - Language: ${lang}`) posts[lang][type] = await getPosts(type, site, lang)