Merge pull request #112 from timlrx/v2

Fix giscus component and algolia css styles
timlrx · Jul 16, 2023 · 19cb0ea · 19cb0ea
2 parents 8b41e25 + fdca91c
commit 19cb0ea
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 53 deletions.
diff --git a/.changeset/good-knives-tan.md b/.changeset/good-knives-tan.md
@@ -0,0 +1,5 @@
+---
+'pliny': patch
+---
+
+Use official giscus component which fixes styling issues
diff --git a/.changeset/great-chairs-warn.md b/.changeset/great-chairs-warn.md
@@ -0,0 +1,5 @@
+---
+'pliny': patch
+---
+
+Fix algolia styles
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -8,6 +8,8 @@
   "changesets": [
     "fuzzy-apples-judge",
     "giant-geckos-dress",
+    "good-knives-tan",
+    "great-chairs-warn",
     "metal-coats-grab",
     "mighty-garlics-appear",
     "neat-tables-occur",

diff --git a/packages/pliny/CHANGELOG.md b/packages/pliny/CHANGELOG.md
@@ -1,5 +1,12 @@
 # pliny
 
+## 0.1.0-beta.4
+
+### Patch Changes
+
+- 44a6f19: Use official giscus component which fixes styling issues
+- 3533d4f: Fix algolia styles
+
 ## 0.1.0-beta.3
 
 ### Patch Changes

diff --git a/packages/pliny/package.json b/packages/pliny/package.json
@@ -2,7 +2,7 @@
   "name": "pliny",
   "description": "Main entry point for pliny components",
   "homepage": "https://github.com/timlrx/pliny",
-  "version": "0.1.0-beta.3",
+  "version": "0.1.0-beta.4",
   "type": "module",
   "exports": {
     "./*": "./*",
@@ -25,6 +25,7 @@
   "author": "Timothy Lin <[email protected]> (https://timlrx.com)",
   "dependencies": {
     "@docsearch/react": "^3.5.0",
+    "@giscus/react": "^2.3.0",
     "@mailchimp/mailchimp_marketing": "^3.0.80",
     "contentlayer": "^0.3.4",
     "copyfiles": "^2.4.1",

diff --git a/packages/pliny/public/algolia.css b/packages/pliny/public/algolia.css
@@ -731,7 +731,6 @@ svg.DocSearch-Hit-Select-Icon {
 }
 
 /* Custom overrides to work with a primary tailwind css theme */
-
 .light .DocSearch {
   --docsearch-primary-color: theme(colors.primary.600);
   --docsearch-highlight-color: theme(colors.primary.600);
@@ -756,7 +755,7 @@ svg.DocSearch-Hit-Select-Icon {
   --docsearch-primary-color: theme(colors.primary.600);
   --docsearch-highlight-color: theme(colors.primary.600);
   --docsearch-searchbox-shadow: inset 0 0 0 2px theme(colors.primary.600);
-  --docsearch-text-color: theme(colors.gray.200);
+  --docsearch-text-color: theme(colors.gray.300);
   --docsearch-muted-color: theme(colors.gray.400);
   --docsearch-container-background: theme(colors.gray.900 / 80%);
   /* Modal */
@@ -784,13 +783,9 @@ svg.DocSearch-Hit-Select-Icon {
 }
 
 .light .DocSearch-Input {
-  @apply hover: ring-0 ring-0;
+  box-shadow: 0 0 #0000;
 }
 
 .dark .DocSearch-Input {
-  @apply hover: ring-0 ring-0;
-}
-
-.DocSearch-Container {
-  @apply backdrop-blur;
+  box-shadow: 0 0 #0000;
 }
diff --git a/packages/pliny/src/comments/Giscus.tsx b/packages/pliny/src/comments/Giscus.tsx
@@ -1,5 +1,6 @@
-import { useEffect, useCallback } from 'react'
 import { useTheme } from 'next-themes'
+import GiscusComponent from '@giscus/react'
+import type { Mapping, BooleanString, InputPosition } from '@giscus/react'
 
 // TODO: type optional fields
 export interface GiscusConfig {
@@ -8,14 +9,14 @@ export interface GiscusConfig {
     themeURL?: string
     theme?: string
     darkTheme?: string
-    mapping?: string
-    repo?: string
-    repositoryId?: string
-    category?: string
-    categoryId?: string
-    reactions?: string
-    metadata?: string
-    inputPosition?: string
+    mapping: Mapping
+    repo: string
+    repositoryId: string
+    category: string
+    categoryId: string
+    reactions: BooleanString
+    metadata: BooleanString
+    inputPosition?: InputPosition
     lang?: string
   }
 }
@@ -46,35 +47,21 @@ export const Giscus = ({
 
   const COMMENTS_ID = 'comments-container'
 
-  const LoadComments = useCallback(() => {
-    const script = document.createElement('script')
-    script.src = 'https://giscus.app/client.js'
-    script.setAttribute('data-repo', repo)
-    script.setAttribute('data-repo-id', repositoryId)
-    script.setAttribute('data-category', category)
-    script.setAttribute('data-category-id', categoryId)
-    script.setAttribute('data-mapping', mapping)
-    script.setAttribute('data-reactions-enabled', reactions)
-    script.setAttribute('data-emit-metadata', metadata)
-    script.setAttribute('data-input-position', inputPosition)
-    script.setAttribute('data-lang', lang)
-    script.setAttribute('data-theme', commentsTheme)
-    script.setAttribute('crossorigin', 'anonymous')
-    script.async = true
-
-    const comments = document.getElementById(COMMENTS_ID)
-    if (comments) comments.appendChild(script)
-
-    return () => {
-      const comments = document.getElementById(COMMENTS_ID)
-      if (comments) comments.innerHTML = ''
-    }
-  }, [commentsTheme])
-
-  // Reload on theme change
-  useEffect(() => {
-    LoadComments()
-  }, [LoadComments])
-
-  return <div className="giscus" id={COMMENTS_ID} />
+  return (
+    <GiscusComponent
+      id={COMMENTS_ID}
+      // @ts-ignore
+      repo={repo}
+      repoId={repositoryId}
+      category={category}
+      categoryId={categoryId}
+      mapping={mapping}
+      reactionsEnabled={reactions}
+      emitMetadata={metadata}
+      inputPosition={inputPosition}
+      theme={commentsTheme}
+      lang={lang}
+      loading="lazy"
+    />
+  )
 }
diff --git a/packages/pliny/src/search/Algolia.tsx b/packages/pliny/src/search/Algolia.tsx
@@ -107,7 +107,7 @@ export const AlgoliaSearchProvider: React.FC<React.PropsWithChildren<AlgoliaSear
       const isInternalLink = itemUrl.startsWith('/')
       const isAnchorLink = itemUrl.startsWith('#')
       if (!isInternalLink && !isAnchorLink) {
-        window.location.href = itemUrl
+        window.open(itemUrl, '_blank')
       } else {
         router.push(itemUrl)
       }

diff --git a/packages/pliny/src/search/AlgoliaModal.tsx b/packages/pliny/src/search/AlgoliaModal.tsx
diff --git a/yarn.lock b/yarn.lock
@@ -1104,6 +1104,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@giscus/react@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "@giscus/react@npm:2.3.0"
+  dependencies:
+    giscus: ^1.3.0
+  peerDependencies:
+    react: ^16 || ^17 || ^18
+    react-dom: ^16 || ^17 || ^18
+  checksum: 2a0ed59f2b49d41ee6d326e356cdd91fe4d4a9e28b486fcb6679fbcb5bb840279da028cd117e3408d7dd0926c3ec2150c21faed615f56ae6e07229ca3275feff
+  languageName: node
+  linkType: hard
+
 "@grpc/grpc-js@npm:^1.7.1":
   version: 1.8.18
   resolution: "@grpc/grpc-js@npm:1.8.18"
@@ -1204,6 +1216,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@lit-labs/ssr-dom-shim@npm:^1.0.0, @lit-labs/ssr-dom-shim@npm:^1.1.0":
+  version: 1.1.1
+  resolution: "@lit-labs/ssr-dom-shim@npm:1.1.1"
+  checksum: 7a7add78e3ee570a7b987b9bf85e700b20d35d31c8b54cf4c8b2e3c8458ed4e2b0ff328706e5be7887f0ca8a02878c186e76609defb78f0d1b3c0e6b47c9f6ef
+  languageName: node
+  linkType: hard
+
+"@lit/reactive-element@npm:^1.3.0, @lit/reactive-element@npm:^1.6.0":
+  version: 1.6.2
+  resolution: "@lit/reactive-element@npm:1.6.2"
+  dependencies:
+    "@lit-labs/ssr-dom-shim": ^1.0.0
+  checksum: 011a3ef0933fda86ec726d29ebc14e829e2f1ba23eca8ed8ed4d5c6f2a102c55cc6986000c5f4c8c3d0c549bc671f5d84d00ce91adc5bbd95970eec3662c0a92
+  languageName: node
+  linkType: hard
+
 "@mailchimp/mailchimp_marketing@npm:^3.0.80":
   version: 3.0.80
   resolution: "@mailchimp/mailchimp_marketing@npm:3.0.80"
@@ -2104,6 +2132,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/trusted-types@npm:^2.0.2":
+  version: 2.0.3
+  resolution: "@types/trusted-types@npm:2.0.3"
+  checksum: 4794804bc4a4a173d589841b6d26cf455ff5dc4f3e704e847de7d65d215f2e7043d8757e4741ce3a823af3f08260a8d04a1a6e9c5ec9b20b7b04586956a6b005
+  languageName: node
+  linkType: hard
+
 "@types/unist@npm:*, @types/unist@npm:^2.0.0":
   version: 2.0.6
   resolution: "@types/unist@npm:2.0.6"
@@ -4710,6 +4745,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"giscus@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "giscus@npm:1.3.0"
+  dependencies:
+    lit: ^2.7.5
+  checksum: e685c578fa0c0db4fb4f3dc3c30646a027b299fca3e5e9217f05ae75f6d7dc32c19a16d2e01cd770ceca55e6b008c47465d380dda3beb87723e1575bc59f7e69
+  languageName: node
+  linkType: hard
+
 "git-raw-commits@npm:^2.0.0":
   version: 2.0.11
   resolution: "git-raw-commits@npm:2.0.11"
@@ -5881,6 +5925,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lit-element@npm:^3.3.0":
+  version: 3.3.2
+  resolution: "lit-element@npm:3.3.2"
+  dependencies:
+    "@lit-labs/ssr-dom-shim": ^1.1.0
+    "@lit/reactive-element": ^1.3.0
+    lit-html: ^2.7.0
+  checksum: afe50825be05a8c83be418432dfed2f9a84ca1c6c1d1807e2090def9f94cc403dcbf832b338cdfe39cd168518664c02a6c7392868ca323e356e5744e3b4f45e6
+  languageName: node
+  linkType: hard
+
+"lit-html@npm:^2.7.0":
+  version: 2.7.5
+  resolution: "lit-html@npm:2.7.5"
+  dependencies:
+    "@types/trusted-types": ^2.0.2
+  checksum: 7a54399f78c02f21ee5584fd9ff21b3edad8416df0aca22964bc5b221f0b57ba74d7bd98ad076acea2403b53b2ea87cc3eb47ba8395f371a645e3d584f2c1e49
+  languageName: node
+  linkType: hard
+
+"lit@npm:^2.7.5":
+  version: 2.7.6
+  resolution: "lit@npm:2.7.6"
+  dependencies:
+    "@lit/reactive-element": ^1.6.0
+    lit-element: ^3.3.0
+    lit-html: ^2.7.0
+  checksum: 984a7fb9c0fa387f20177a07de22ea1c9cdc01a7dc7cb1c400d1df5b43a8956908460482a3259ea173555c6f0f13457d2ddc5c84d4c365007afd86e7ca58b384
+  languageName: node
+  linkType: hard
+
 "load-tsconfig@npm:^0.2.3":
   version: 0.2.5
   resolution: "load-tsconfig@npm:0.2.5"
@@ -7608,6 +7683,7 @@ __metadata:
   resolution: "pliny@workspace:packages/pliny"
   dependencies:
     "@docsearch/react": ^3.5.0
+    "@giscus/react": ^2.3.0
     "@mailchimp/mailchimp_marketing": ^3.0.80
     "@types/copyfiles": ^2
     contentlayer: ^0.3.4