fix: use radium to compile style

gxjakkap · Mar 21, 2024 · 706c41d · 706c41d
1 parent afdc4a3
commit 706c41d
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 6 deletions.
diff --git a/lib/contentfulRendererOverride.js b/lib/contentfulRendererOverride.js
@@ -1,4 +1,6 @@
 import { BLOCKS, INLINES } from '@contentful/rich-text-types'
+import Radium from 'radium'
+import { Component } from 'react'
 
 function getHeadingHash(text){
     return encodeURIComponent(text.toLowerCase().replaceAll(" ", "-"))
@@ -18,8 +20,32 @@ function Pr({children, ...props}) {
     return (<p {...props}>{children}</p>)
 }
 
-function Hpl({children, ...props}) {
-    return <a {...props}>{children}</a>
+/* function Hpl({children, ...props}) {
+    const style = {
+        textDecorationLine: 'underline', 
+        overflowWrap: 'break-word',
+        ':hover': {
+            color: 'oklch(var(--p))'
+        }
+    }
+    return Radium(<a style={style} {...props}>{children}</a>)
+} */
+
+// why tf radium needed a class component?
+class Hpl extends Component {
+    style = {
+        textDecorationLine: 'underline', 
+        overflowWrap: 'break-word',
+        ':hover': {
+            color: 'oklch(var(--p))'
+        }
+    }
+    render() {
+        console.log(this.props)
+        return (
+            <a style={this.style} href={this.props.href} target='_blank' rel='noopener noreferrer'>{this.props.children}</a>
+        )
+    }
 }
 
 function Im(inp) {
@@ -41,10 +67,11 @@ const overrideOptions = {
         }
     },
     [INLINES.HYPERLINK]: {
-        component: Hpl,
-        props: {
-            className: "underline hover:text-primary break-all"
-        }
+        component: Radium(Hpl),
+        /* props: {
+            className: "hover:text-primary",
+            style: { textDecorationLine: 'underline', overflowWrap: 'break-word' }
+        } */
     },
     [BLOCKS.HEADING_2]: {
         component: Heading2,

diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "gray-matter": "^4.0.3",
     "next": "14.0.4",
     "next-themes": "^0.2.1",
+    "radium": "^0.26.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-loader-spinner": "^5.3.4",
@@ -29,6 +30,7 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.4",
+    "@types/radium": "^0.24.8",
     "autoprefixer": "^10.4.7",
     "eslint": "8.19.0",
     "eslint-config-next": "14.0.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml