feat(ui): add css to article iframe

ncarlier · Apr 11, 2019 · 77854df · 77854df
1 parent e1181a3
commit 77854df
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/ui/public/readable.css b/ui/public/readable.css
@@ -0,0 +1,17 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  line-height: 1.6;
+  color: #222;
+  padding: 2rem;
+  margin: auto;
+  background: #fafafa;
+}
+img {
+  max-width: 100%;
+}
+a {
+  color: #009be5;
+}
+h1, h2, strong {
+  color: #111;
+}
diff --git a/ui/src/articles/components/ArticleContent.tsx b/ui/src/articles/components/ArticleContent.tsx
@@ -10,13 +10,19 @@ type Props = {
 
 export default ({article}: Props) => {
   const contentRef = useRef<any>(null)
+
+  var cssLink = document.createElement("link")
+  cssLink.href = process.env.PUBLIC_URL + "/readable.css"
+  cssLink.rel = "stylesheet" 
+  cssLink.type = "text/css" 
 
   useEffect(
     () => {
       let ifrm = contentRef.current
       ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument
       ifrm.document.open()
       ifrm.document.write(article.html)
+      ifrm.document.head.appendChild(cssLink)
       ifrm.document.close()
     },
     [article],