Add html-entities npm package to handle titles (#33)

rajatkulkarni95 · Nov 25, 2022 · 748e8d9 · 748e8d9 · vercel · Nov 25, 2022
1 parent ad46254
commit 748e8d9
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
  "@stitches/react": "^1.2.7",
  "@vercel/analytics": "^0.1.4",
  "date-fns": "^2.27.0",
+ "html-entities": "^2.3.3",
  "next": "12.0.6",
  "next-seo": "^5.1.0",
  "next-themes": "^0.0.15",

diff --git a/src/components/StoryListItem.tsx b/src/components/StoryListItem.tsx
@@ -5,6 +5,7 @@ import Meta from "./Common/Meta";
 import useWindowSize from "hooks/useWindowSize";
 import { Size } from "types/size";
 import useStore from "store/useStore";
+import { decode } from "html-entities";
 
 type Props = {
  story: TBaseStory;
@@ -48,7 +49,7 @@ const StoryListItem: React.FC<Props> = (props: Props) => {
  <Box>
  <Link href={`/stories/${id}`} passHref>
  <Title>
- {title} {isMobile && domain && <Text>({domain})</Text>}
+ {decode(title)} {isMobile && domain && <Text>({domain})</Text>}
  </Title>
  </Link>
 

diff --git a/src/pages/stories/[id].tsx b/src/pages/stories/[id].tsx
@@ -15,6 +15,7 @@ import InnerHTMLText from "@components/Common/InnerHTMLText";
 import { Size } from "types/size";
 import useWindowSize from "hooks/useWindowSize";
 import useStore from "store/useStore";
+import { decode } from "html-entities";
 
 type Props = {
  data: TDetailedStory;
@@ -94,7 +95,7 @@ const Story: NextPage<Props> = (props: Props) => {
  return (
  <Fragment>
  <Head>
- <title>{title} - hckrnws</title>
+ <title>{decode(title)} - hckrnws</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </Head>
  <FlexColumn css={{ padding: "16px 0" }}>
@@ -105,7 +106,7 @@ const Story: NextPage<Props> = (props: Props) => {
  <BackIcon width={14} height={14} stroke={stroke} />
  </Button>
  <Title>
- {title} {isMobile && domain && <Text>({domain})</Text>}
+ {decode(title)} {isMobile && domain && <Text>({domain})</Text>}
  </Title>
 
  <InnerHTMLText dangerouslySetInnerHTML={{ __html: content }} />

diff --git a/yarn.lock b/yarn.lock
@@ -2776,6 +2776,11 @@ hmac-drbg@^1.0.1:
  minimalistic-assert "^1.0.0"
  minimalistic-crypto-utils "^1.0.1"
 
+html-entities@^2.3.3:
+ version "2.3.3"
+ resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.3.3.tgz#117d7626bece327fc8baace8868fa6f5ef856e46"
+ integrity sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==
+
 [email protected]:
  version "1.7.3"
  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"