From 2832bdecc786e3fadf6e496facb5c268117fcd0b Mon Sep 17 00:00:00 2001 From: Timothy Lin Date: Sun, 16 Jul 2023 21:08:31 +0800 Subject: [PATCH 1/4] fix algolia styles --- packages/pliny/public/algolia.css | 11 +++-------- packages/pliny/src/search/Algolia.tsx | 2 +- packages/pliny/src/search/AlgoliaModal.tsx | 3 --- 3 files changed, 4 insertions(+), 12 deletions(-) delete mode 100644 packages/pliny/src/search/AlgoliaModal.tsx diff --git a/packages/pliny/public/algolia.css b/packages/pliny/public/algolia.css index ec705b2..f592490 100644 --- 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/search/Algolia.tsx b/packages/pliny/src/search/Algolia.tsx index 0eedc69..22064ff 100644 --- a/packages/pliny/src/search/Algolia.tsx +++ b/packages/pliny/src/search/Algolia.tsx @@ -107,7 +107,7 @@ export const AlgoliaSearchProvider: React.FC Date: Sun, 16 Jul 2023 21:08:57 +0800 Subject: [PATCH 2/4] add changeset --- .changeset/great-chairs-warn.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/great-chairs-warn.md diff --git a/.changeset/great-chairs-warn.md b/.changeset/great-chairs-warn.md new file mode 100644 index 0000000..4376f8c --- /dev/null +++ b/.changeset/great-chairs-warn.md @@ -0,0 +1,5 @@ +--- +'pliny': patch +--- + +Fix algolia styles From 44a6f1930337dc6166e791d17a4f344166dd7ce4 Mon Sep 17 00:00:00 2001 From: Timothy Lin Date: Sun, 16 Jul 2023 21:12:38 +0800 Subject: [PATCH 3/4] use official giscus component --- .changeset/good-knives-tan.md | 5 ++ packages/pliny/package.json | 1 + packages/pliny/src/comments/Giscus.tsx | 67 +++++++++-------------- yarn.lock | 76 ++++++++++++++++++++++++++ 4 files changed, 109 insertions(+), 40 deletions(-) create mode 100644 .changeset/good-knives-tan.md diff --git a/.changeset/good-knives-tan.md b/.changeset/good-knives-tan.md new file mode 100644 index 0000000..d61524f --- /dev/null +++ b/.changeset/good-knives-tan.md @@ -0,0 +1,5 @@ +--- +'pliny': patch +--- + +Use official giscus component which fixes styling issues diff --git a/packages/pliny/package.json b/packages/pliny/package.json index 93cd24a..b454d97 100644 --- a/packages/pliny/package.json +++ b/packages/pliny/package.json @@ -25,6 +25,7 @@ "author": "Timothy Lin (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/src/comments/Giscus.tsx b/packages/pliny/src/comments/Giscus.tsx index b96ec39..0238bdd 100644 --- 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
+ return ( + + ) } diff --git a/yarn.lock b/yarn.lock index cf23a7d..bf482d5 100644 --- 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 From fdca91ccc7a02df01551f11b81f174a5ede7883f Mon Sep 17 00:00:00 2001 From: Timothy Lin Date: Sun, 16 Jul 2023 21:14:07 +0800 Subject: [PATCH 4/4] bump version --- .changeset/pre.json | 2 ++ packages/pliny/CHANGELOG.md | 7 +++++++ packages/pliny/package.json | 2 +- 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 4ac3605..8d5ca14 100644 --- 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 index eb522dd..59b6635 100644 --- 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 index b454d97..85b3b8a 100644 --- 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": { "./*": "./*",