[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-article-build-your-own-custom-chrome-history-extension-with-react-part-2-chrome-history-api":3},{"meta":4,"html":35,"authorName":36,"authorFacebookUrl":37,"authorProfileImage":38,"authorWebsite":39,"authorJobTitle":40,"authorTwitterUrl":41,"wordCount":42,"recommended":43},{"id":5,"slug":6,"type":7,"title":8,"excerpt":9,"metaTitle":10,"metaDescription":10,"canonicalUrl":10,"featureImage":11,"publishedAt":16,"createdAt":17,"updatedAt":18,"featured":19,"readingTime":20,"tags":21,"author":34,"recommendedSlugs":10},"640aed8469f5f5062904b11f","build-your-own-custom-chrome-history-extension-with-react-part-2-chrome-history-api","post","Create a Custom Chrome History Extension with React - Part 2","Learn how to build a custom Chrome history extension with React in this guide. Explore the Chrome History API and improve your browsing experience.",null,{"url":12,"alt":13,"caption":13,"width":14,"height":15},"\u002Fblog\u002Fcontent\u002Fimages\u002F2023\u002F03\u002Fthumbnail-build-chrome-extension.png","Build Your Own Custom Chrome History Extension with React: Part 2",1280,720,"2023-03-10T08:52:32.000+00:00","2023-03-10T08:42:44.000+00:00","2024-07-23T13:58:57.000+00:00",false,5,[22,25,28,31],{"name":23,"slug":24},"Chrome Extension","chrome-extension",{"name":26,"slug":27},"React","react",{"name":29,"slug":30},"Tutorial","tutorial",{"name":32,"slug":33},"Web Development","web-development","marius-bongarts","\u003Cp>\n  In this series of articles, I will walk you through creating your own browser history Chrome extension using React. We\n  will use the\n  \u003Cstrong>Chrome History API\u003C\u002Fstrong>\n  to read and display our browser history in our personalized React dashboard.\n\u003C\u002Fp>\n\u003Cp>\n  In the first part, we learned how to set up a Chrome extension using React and Webpack. The setup from Part 1 is our\n  ground base to continue with the\n  \u003Cstrong>Chrome History API\u003C\u002Fstrong>\n  integration. Therefore, check out the first article if you haven’t:\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card kg-card-hascaption\">\n  \u003Ca\n    class=\"kg-bookmark-container\"\n    href=\"https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fbuild-your-own-custom-chrome-history-extension-with-react-part-1-set-up\u002F\"\n  >\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">Build Your Own Custom Chrome History Extension with React - Part 1: Set Up\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">\n        Step-by-Step Guide to Setting Up Your Custom Chrome History Extension in React. Learn how to create a Chrome\n        extension with React and how to implement the Chrome History API\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-metadata\">\n        \u003Cimg class=\"kg-bookmark-icon\" src=\"https:\u002F\u002Fweb-highlights.com\u002Ffavicon.ico\" alt=\"\" \u002F>\n        \u003Cspan class=\"kg-bookmark-author\">Web Highlights Blog\u003C\u002Fspan>\n        \u003Cspan class=\"kg-bookmark-publisher\">Marius Bongarts\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"kg-bookmark-thumbnail\">\n      \u003Cimg src=\"\u002Fblog\u002Fcontent\u002Fimages\u002F2023\u002F02\u002Fthumbnail-build-chrome-extension-1.webp\" alt=\"\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n  \u003Cfigcaption>Build Your Own Custom Chrome\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>Again, here is what we are going to build:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*ldEieDkorqouo1mb7UBwNg.png\"\n    class=\"kg-image\"\n    alt=\"Our own Chrome History — What we will build\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Our own Chrome History — What we will build\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Ch3 id=\"typescript-setup\">Typescript Setup\u003C\u002Fh3>\n\u003Cp>Before we start, we need to configure Typescript to give us autocompletion for the chrome APIs.\u003C\u002Fp>\n\u003Cp>\n  Try it yourself and type\n  \u003Ccode>\"chrome.”\u003C\u002Fcode>\n  into your IDE. Usually, you should not see any autosuggestions.\n\u003C\u002Fp>\n\u003Cp>Therefore, you need to install the typings for the chrome APIs to access them. You can do this by running:\u003C\u002Fp>\n\u003Cp>\u003Cem>yarn add -D @types\u002Fchrome\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>\n  Now, you need to add this into the\n  \u003Ccode>tsconfig.json\u003C\u002Fcode>\n  file:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120584229\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-manifest-json\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-json  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"manifest.json content, created by MariusBongarts on 07:02AM on January 30, 2023.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"manifest.json\">\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC1\" class=\"blob-code blob-code-inner js-file-line\">{\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC2\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"name"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>Chrome History Extension\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC3\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"version"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>1.0.0\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"manifest_version"\u003C\u002Fspan>: \u003Cspan class=\"pl-c1\">3\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC5\" class=\"blob-code blob-code-inner js-file-line\">}\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F19c5a920705cd19a60dff01005663dec\u002Fraw\u002Ffc91d29f8ef78417ce2fa4b914ab72e3d5abce23\u002Fmanifest.json\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F19c5a920705cd19a60dff01005663dec#file-manifest-json\" class=\"Link--inTextBlock\">\n          manifest.json\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>Finally, you should get autosuggestions from your IDE:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*b4R4cdgmvto6aAaEfYa-zg.png\"\n    class=\"kg-image\"\n    alt=\"Chrome API Typescript suggestions\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Chrome API Typescript suggestions\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Ch3 id=\"chrome-history-api\">Chrome History API\u003C\u002Fh3>\n\u003Cp>\n  Our goal is to show the browser history in our dashboard. For that, we need to access the\n  \u003Ca href=\"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fextensions\u002Freference\u002Fhistory\u002F\" rel=\"noopener\">\n    \u003Cstrong>Chrome History API\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  . Having our types configured, we should get autocompletion when typing\n  \u003Ccode>window.history\u003C\u002Fcode>\n  . To get started, let’s create a search query to get the ten latest entries in our browser history. We can do this by\n  calling it inside our\n  \u003Ccode>Dashboard.tsx\u003C\u002Fcode>\n  component:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120694843\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-dashboard-tsx\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-tsx  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"Dashboard.tsx content, created by MariusBongarts on 07:11AM on February 03, 2023.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"Dashboard.tsx\">\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-en>useEffect\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC2\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-s1>chrome\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>history\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>search\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan> \u003Cspan class=pl-c1>text\u003C\u002Fspan>: \u003Cspan class=pl-s>""\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-c1>maxResults\u003C\u002Fspan>: \u003Cspan class=pl-c1>10\u003C\u002Fspan> \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>data\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC3\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-smi>console\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>log\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>data\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC5\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-kos>[\u003C\u002Fspan>\u003Cspan class=pl-kos>]\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fd8789887e1901ada24b4b0391b566385\u002Fraw\u002Fff84d90ec3378abe542a0a885c3eeada75f64e5c\u002FDashboard.tsx\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fd8789887e1901ada24b4b0391b566385#file-dashboard-tsx\" class=\"Link--inTextBlock\">\n          Dashboard.tsx\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>When refreshing the page, we should see an error:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*-YAStErQmBHhJZUOETS5zQ.png\"\n    class=\"kg-image\"\n    alt=\"Uncaught TypeError: Cannot read properties of undefined (reading ‘search’)\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>Uncaught TypeError: Cannot read properties of undefined (reading ‘search’)\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  We get an error because\n  \u003Ccode>window.history\u003C\u002Fcode>\n  is\n  \u003Ccode>undefined\u003C\u002Fcode>\n  . That’s because we don’t have permission to use it yet. To fix this, we need to add it to our\n  \u003Ccode>permissions\u003C\u002Fcode>\n  array inside our\n  \u003Ccode>manifest.json\u003C\u002Fcode>\n  :\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120666376\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-manifest-json\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-json  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"manifest.json content, created by MariusBongarts on 07:09AM on February 02, 2023.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"manifest.json\">\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC1\" class=\"blob-code blob-code-inner js-file-line\">{\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC2\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"name"\u003C\u002Fspan>: \u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>chrome-history-extension\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>,\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC3\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ii\">...\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=\"pl-ent\">"permissions"\u003C\u002Fspan>: [\u003Cspan class=\"pl-s\">\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>history\u003Cspan class=\"pl-pds\">"\u003C\u002Fspan>\u003C\u002Fspan>]\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-manifest-json-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-manifest-json-LC5\" class=\"blob-code blob-code-inner js-file-line\">}\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F7a471766ead24a88d2ada560dc78cbd8\u002Fraw\u002F0bca13e297f9e1cb29b97d3907afbe797c8e5351\u002Fmanifest.json\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F7a471766ead24a88d2ada560dc78cbd8#file-manifest-json\" class=\"Link--inTextBlock\">\n          manifest.json\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  After reloading our extension, we should see an array of our ten most recent browser history entries in the console.\n\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-bookmark-card kg-card-hascaption\">\n  \u003Ca class=\"kg-bookmark-container\" href=\"https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fbuilding-your-own-new-tab-chrome-extension\u002F\">\n    \u003Cdiv class=\"kg-bookmark-content\">\n      \u003Cdiv class=\"kg-bookmark-title\">Building Your Own New Tab Chrome Extension\u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-description\">\n        How to build a beautiful New Tab Chrome Extension with plain HTML, CSS, JavaScript, and Web Components\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"kg-bookmark-metadata\">\n        \u003Cimg class=\"kg-bookmark-icon\" src=\"https:\u002F\u002Fweb-highlights.com\u002Ffavicon.ico\" alt=\"\" \u002F>\n        \u003Cspan class=\"kg-bookmark-author\">Web Highlights Blog\u003C\u002Fspan>\n        \u003Cspan class=\"kg-bookmark-publisher\">Marius Bongarts\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"kg-bookmark-thumbnail\">\n      \u003Cimg src=\"\u002Fblog\u002Fcontent\u002Fimages\u002F2023\u002F08\u002Fhabit-tracker.webp\" alt=\"\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fa>\n  \u003Cfigcaption>Building Your Own New Tab \u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>\n  Before we show those entries in our dashboard, let’s make the history search call more accessible by providing a more\n  straightforward interface using a custom React hook.\n\u003C\u002Fp>\n\u003Cp>\n  Let’s create a\n  \u003Ccode>useChromeHistorySearch\u003C\u002Fcode>\n  hook that executes a history search query with the provided\n  \u003Ccode>HistoryQueryObject\u003C\u002Fcode>\n  and sets the\n  \u003Ccode>historyItems\u003C\u002Fcode>\n  in a state, once the query finishes:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist121331080\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-usechromehistorysearch-tsx\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-tsx  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"useChromeHistorySearch.tsx content, created by MariusBongarts on 08:07AM on March 10, 2023.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"useChromeHistorySearch.tsx\">\n        \u003Ctr>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>type\u003C\u002Fspan> \u003Cspan class=pl-smi>HistoryItem\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s1>chrome\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>history\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-smi>HistoryItem\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-LC2\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>export\u003C\u002Fspan> \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-en>useChromeHistorySearch\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-LC3\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-s1>query\u003C\u002Fspan>: \u003Cspan class=pl-s1>chrome\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>history\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-smi>HistoryQuery\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-LC4\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>)\u003C\u002Fspan>: \u003Cspan class=pl-smi>HistoryItem\u003C\u002Fspan>\u003Cspan class=pl-kos>[\u003C\u002Fspan>\u003Cspan class=pl-kos>]\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-LC5\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-kos>[\u003C\u002Fspan>\u003Cspan class=pl-s1>historyItems\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-s1>setHistoryItems\u003C\u002Fspan>\u003Cspan class=pl-kos>]\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-en>useState\u003C\u002Fspan>\u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-smi>HistoryItem\u003C\u002Fspan>\u003Cspan class=pl-kos>[\u003C\u002Fspan>\u003Cspan class=pl-kos>]\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>[\u003C\u002Fspan>\u003Cspan class=pl-kos>]\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-LC6\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-en>useEffect\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-LC7\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-s1>chrome\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>history\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-LC8\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>search\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>query\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-LC9\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>then\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>historyItems\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-en>setHistoryItems\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>historyItems\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-LC10\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>catch\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-en>setHistoryItems\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>[\u003C\u002Fspan>\u003Cspan class=pl-kos>]\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-LC11\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-kos>[\u003C\u002Fspan>\u003Cspan class=pl-s1>query\u003C\u002Fspan>\u003Cspan class=pl-kos>]\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-LC12\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>return\u003C\u002Fspan> \u003Cspan class=pl-s1>historyItems\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-usechromehistorysearch-tsx-LC13\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F9902738c2ca670644d259c2fdfe1ff75\u002Fraw\u002F4e7a45ca81e53bec4c28fcc16b1724832a9d185e\u002FuseChromeHistorySearch.tsx\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F9902738c2ca670644d259c2fdfe1ff75#file-usechromehistorysearch-tsx\" class=\"Link--inTextBlock\">\n          useChromeHistorySearch.tsx\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  Having this helper hook makes it easier to handle the asynchronous\n  \u003Ccode>chrome.history.search()\u003C\u002Fcode>\n  function within our components.\n\u003C\u002Fp>\n\u003Cp>Now, finally, let’s show those entries in the frontend.\u003C\u002Fp>\n\u003Ch3 id=\"display-browser-history\">Display Browser History\u003C\u002Fh3>\n\u003Cp>\n  Now that we can get our data, let’s show it in our browser. We will build three components for this. The\n  \u003Ccode>Dashboard.tsx\u003C\u002Fcode>\n  component will use the\n  \u003Ccode>useChromeHistorySearch\u003C\u002Fcode>\n  hook to pass the data to our\n  \u003Ccode>History.tsx\u003C\u002Fcode>\n  component.\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120631975\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-dashboard-tsx\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-tsx  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"Dashboard.tsx content, created by MariusBongarts on 07:28AM on February 01, 2023.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"Dashboard.tsx\">\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>import\u003C\u002Fspan> \u003Cspan class=pl-v>React\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>"react"\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC2\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>import\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan> \u003Cspan class=pl-s1>useChromeHistorySearch\u003C\u002Fspan> \u003Cspan class=pl-kos>}\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>"..\u002Fhooks\u002FuseChromeHistorySearch"\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC3\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>import\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan> \u003Cspan class=pl-v>History\u003C\u002Fspan> \u003Cspan class=pl-kos>}\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>".\u002FHistory"\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC4\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC5\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>interface\u003C\u002Fspan> \u003Cspan class=pl-smi>DashboardProps\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC6\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC7\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>query\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan> \u003Cspan class=pl-c1>text\u003C\u002Fspan>: \u003Cspan class=pl-s>""\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-c1>maxResults\u003C\u002Fspan>: \u003Cspan class=pl-c1>100\u003C\u002Fspan> \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC8\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC9\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>export\u003C\u002Fspan> \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-v>Dashboard\u003C\u002Fspan>: \u003Cspan class=pl-v>React\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-smi>FC\u003C\u002Fspan>\u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-smi>DashboardProps\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC10\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>mostRecentItems\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-en>useChromeHistorySearch\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>query\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC11\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC12\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>return\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC13\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-s1>div\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC14\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-s1>h1\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>Chrome History Dashboard 📊\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-s1>h1\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC15\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>History\u003C\u002Fspan> \u003Cspan class=pl-c1>items\u003C\u002Fspan>\u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-s1>mostRecentItems\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan> \u003Cspan class=pl-kos>\u002F>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC16\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-s1>div\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC17\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-dashboard-tsx-L18\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"18\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-dashboard-tsx-LC18\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F9435601522c696ed612226d6dd891a46\u002Fraw\u002F6e5b9c8323931f88625c11d3f333f960593bbde8\u002FDashboard.tsx\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F9435601522c696ed612226d6dd891a46#file-dashboard-tsx\" class=\"Link--inTextBlock\">\n          Dashboard.tsx\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  Our\n  \u003Ccode>History.tsx\u003C\u002Fcode>\n  component simply takes in an\n  \u003Ccode>items\u003C\u002Fcode>\n  array containing the chrome browser history entries to be shown. Now we iterate over those and show them in an\n  unordered list like this:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120631899\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-history-tsx\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-tsx  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"History.tsx content, created by MariusBongarts on 07:19AM on February 01, 2023.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"History.tsx\">\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>import\u003C\u002Fspan> \u003Cspan class=pl-v>React\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>"react"\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC2\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>import\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan> \u003Cspan class=pl-v>HistoryItem\u003C\u002Fspan> \u003Cspan class=pl-kos>}\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>".\u002FHistoryItem"\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC3\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>import\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan> \u003Cspan class=pl-v>StyledList\u003C\u002Fspan> \u003Cspan class=pl-kos>}\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>".\u002FHistory.styled"\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC4\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC5\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-v>MemoizedHistoryItem\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-v>React\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>memo\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-v>HistoryItem\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC6\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC7\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>interface\u003C\u002Fspan> \u003Cspan class=pl-smi>HistoryProps\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC8\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>items\u003C\u002Fspan>: \u003Cspan class=pl-s1>chrome\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>history\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-smi>HistoryItem\u003C\u002Fspan>\u003Cspan class=pl-kos>[\u003C\u002Fspan>\u003Cspan class=pl-kos>]\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC9\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC10\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC11\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>export\u003C\u002Fspan> \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-v>History\u003C\u002Fspan>: \u003Cspan class=pl-v>React\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-smi>FC\u003C\u002Fspan>\u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-smi>HistoryProps\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan> items \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC12\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>return\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC13\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>StyledList\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC14\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-s1>items\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>map\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC15\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>MemoizedHistoryItem\u003C\u002Fspan> \u003Cspan class=pl-c1>key\u003C\u002Fspan>\u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>id\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan> \u003Cspan class=pl-c1>item\u003C\u002Fspan>\u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan> \u003Cspan class=pl-kos>\u002F>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC16\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC17\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-v>StyledList\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L18\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"18\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC18\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L19\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"19\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC19\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fcf672d06385ce6fd9ed240b8dc1ca099\u002Fraw\u002Fe17748d17ad0c5c3d5cca80e9345bfc045b3cac2\u002FHistory.tsx\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fcf672d06385ce6fd9ed240b8dc1ca099#file-history-tsx\" class=\"Link--inTextBlock\">\n          History.tsx\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  For each\n  \u003Ccode>item\u003C\u002Fcode>\n  we render a\n  \u003Ccode>HistoryItem\u003C\u002Fcode>\n  which is another component that renders the item’s information which looks like this:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120631911\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-historyitem-tsx\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-tsx  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"HistoryItem.tsx content, created by MariusBongarts on 07:21AM on February 01, 2023.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"HistoryItem.tsx\">\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>import\u003C\u002Fspan> \u003Cspan class=pl-v>React\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>"react"\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC2\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC3\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>interface\u003C\u002Fspan> \u003Cspan class=pl-smi>HistoryItemProps\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>item\u003C\u002Fspan>: \u003Cspan class=pl-s1>chrome\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>history\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-smi>HistoryItem\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC5\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC6\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC7\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>export\u003C\u002Fspan> \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-v>HistoryItem\u003C\u002Fspan>: \u003Cspan class=pl-v>React\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-smi>FC\u003C\u002Fspan>\u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-smi>HistoryItemProps\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan> item \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC8\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>return\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC9\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-s1>li\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC10\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-s1>span\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-k>new\u003C\u002Fspan> \u003Cspan class=pl-v>Date\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>lastVisitTime\u003C\u002Fspan> \u003Cspan class=pl-c1>??\u003C\u002Fspan> \u003Cspan class=pl-c1>0\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>toLocaleTimeString\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-s1>span\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC11\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>title\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC12\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-s1>li\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC13\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC14\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F53cceba3d3a7268c6d05d665e43571a9\u002Fraw\u002F6883998684f1fc3767c6c9e5373af5717cb57708\u002FHistoryItem.tsx\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F53cceba3d3a7268c6d05d665e43571a9#file-historyitem-tsx\" class=\"Link--inTextBlock\">\n          HistoryItem.tsx\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>Our extension should now look like this:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*l7qJbIchuJ1Xedd8RHGVRg.png\"\n    class=\"kg-image\"\n    alt=\"Chrome History Dashboard\"\n    loading=\"lazy\"\n  \u002F>\n\u003C\u002Ffigure>\n\u003Cp>That’s already great. Now let’s make it look a little better.\u003C\u002Fp>\n\u003Ch3 id=\"add-styles\">Add Styles\u003C\u002Fh3>\n\u003Cp>\n  To apply styles to our components, we will use the\n  \u003Ccode>styled-components\u003C\u002Fcode>\n  library that lets us write CSS inside our Typescript components.\n\u003C\u002Fp>\n\u003Cblockquote>\n  \u003Cem>\n    This means you can use all the features of CSS you use and love, including (but by far not limited to) media\n    queries, all pseudo-selectors, nesting, etc. —\n  \u003C\u002Fem>\n  \u003Ca href=\"https:\u002F\u002Fstyled-components.com\u002F\" rel=\"noopener ugc nofollow\">\u003Cem>styled-components.com\u003C\u002Fem>\u003C\u002Fa>\n\u003C\u002Fblockquote>\n\u003Cp>Let’s install it by running:\u003C\u002Fp>\n\u003Cp>\u003Cem>yarn add styled-components @types\u002Fstyled-components\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>Now, we can customize our unordered list like this:\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120631981\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-history-tsx\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-tsx  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"History.tsx content, created by MariusBongarts on 07:29AM on February 01, 2023.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"History.tsx\">\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-v>StyledList\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s1>styled\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>ul\u003C\u002Fspan>\u003Cspan class=pl-s>`\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC2\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  list-style: none;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC3\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  padding: 0;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC4\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  margin: 0;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-history-tsx-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-history-tsx-LC5\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>`\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F49edeffd2b4396ba54a46daaec495902\u002Fraw\u002F59e5637fae6319a2027a0ff840f8b8da7fad6dee\u002FHistory.tsx\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F49edeffd2b4396ba54a46daaec495902#file-history-tsx\" class=\"Link--inTextBlock\">\n          History.tsx\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>\n  This will remove the list dots on the left and also removes some margin and padding. We can use this list in our\n  template like this:\n\u003C\u002Fp>\n\u003Cp>\n  Furthermore, we will style the\n  \u003Cstrong>date\u003C\u002Fstrong>\n  of each entry to make its font color light grey, and we will have a title and a link to the URL:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120750185\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-historyitem-styled-tsx\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-tsx  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"HistoryItem..styled.tsx content, created by MariusBongarts on 06:28AM on February 06, 2023.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"HistoryItem..styled.tsx\">\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>export\u003C\u002Fspan> \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-v>StyledInfo\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s1>styled\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>div\u003C\u002Fspan>\u003Cspan class=pl-s>`\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC2\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  flex: 1;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC3\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  display: flex;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC4\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  flex-wrap: wrap;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC5\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  row-gap: 2px;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC6\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  padding: 4px;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC7\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>`\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC8\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC9\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>export\u003C\u002Fspan> \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-v>StyledItemLink\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s1>styled\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>a\u003C\u002Fspan>\u003Cspan class=pl-s>`\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC10\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  color: var(--light-grey);\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC11\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  text-decoration: none;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC12\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  font-size: 0.8rem;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC13\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>`\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC14\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>export\u003C\u002Fspan> \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-v>StyledTitle\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s1>styled\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>span\u003C\u002Fspan>\u003Cspan class=pl-s>`\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC15\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  color: black;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC16\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  width: 100%;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC17\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  font-size: 0.9rem;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L18\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"18\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC18\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  font-weight: 400;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L19\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"19\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC19\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>`\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L20\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"20\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC20\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L21\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"21\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC21\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>export\u003C\u002Fspan> \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-v>StyledTime\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s1>styled\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>span\u003C\u002Fspan>\u003Cspan class=pl-s>`\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L22\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"22\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC22\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>  color: var(--light-grey);\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-styled-tsx-L23\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"23\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-styled-tsx-LC23\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-s>`\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Faf7557d1acb85e7273c994781c13b94a\u002Fraw\u002Fa8916fb28021f83ae671a4845c071a2f5f4f1bd0\u002FHistoryItem..styled.tsx\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Faf7557d1acb85e7273c994781c13b94a#file-historyitem-styled-tsx\" class=\"Link--inTextBlock\">\n          HistoryItem..styled.tsx\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>We can use the styled components like this in our template:\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120750190\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-historyitem-tsx\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-tsx  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"HistoryItem.tsx content, created by MariusBongarts on 06:29AM on February 06, 2023.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"HistoryItem.tsx\">\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>import\u003C\u002Fspan> \u003Cspan class=pl-v>React\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>"react"\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC2\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>import\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan> \u003Cspan class=pl-s1>truncateString\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-s1>urlWithoutSchema\u003C\u002Fspan> \u003Cspan class=pl-kos>}\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>"..\u002Fservices\u002Fhelper"\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC3\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>import\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-v>StyledInfo\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC5\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-v>StyledHistoryItem\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC6\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-v>StyledItemLink\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC7\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-v>StyledTitle\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC8\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-v>StyledTime\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC9\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>".\u002FHistoryItem.styled"\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC10\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC11\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>interface\u003C\u002Fspan> \u003Cspan class=pl-smi>HistoryItemProps\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC12\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>item\u003C\u002Fspan>: \u003Cspan class=pl-s1>chrome\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>history\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-smi>HistoryItem\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC13\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC14\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC15\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>export\u003C\u002Fspan> \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-v>HistoryItem\u003C\u002Fspan>: \u003Cspan class=pl-v>React\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-smi>FC\u003C\u002Fspan>\u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-smi>HistoryItemProps\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan> item \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC16\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>lastVisitDate\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-k>new\u003C\u002Fspan> \u003Cspan class=pl-v>Date\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>lastVisitTime\u003C\u002Fspan> \u003Cspan class=pl-c1>??\u003C\u002Fspan> \u003Cspan class=pl-c1>0\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC17\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>time\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s1>lastVisitDate\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>toLocaleTimeString\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>substring\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-c1>0\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-c1>5\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L18\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"18\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC18\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L19\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"19\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC19\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>url\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-en>urlWithoutSchema\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>url\u003C\u002Fspan> \u003Cspan class=pl-c1>??\u003C\u002Fspan> \u003Cspan class=pl-s>""\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L20\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"20\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC20\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L21\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"21\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC21\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>return\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L22\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"22\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC22\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>StyledHistoryItem\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L23\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"23\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC23\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>StyledInfo\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L24\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"24\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC24\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>StyledTitle\u003C\u002Fspan> \u003Cspan class=pl-c1>title\u003C\u002Fspan>\u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>title\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L25\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"25\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC25\" class=\"blob-code blob-code-inner js-file-line\">          \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-en>truncateString\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>title\u003C\u002Fspan> \u003Cspan class=pl-c1>??\u003C\u002Fspan> \u003Cspan class=pl-s>""\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-c1>50\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L26\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"26\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC26\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-v>StyledTitle\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L27\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"27\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC27\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-s1>br\u003C\u002Fspan> \u003Cspan class=pl-kos>\u002F>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L28\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"28\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC28\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>StyledItemLink\u003C\u002Fspan> \u003Cspan class=pl-c1>href\u003C\u002Fspan>\u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>url\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan> \u003Cspan class=pl-c1>target\u003C\u002Fspan>\u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003Cspan class=pl-s>"_blank"\u003C\u002Fspan> \u003Cspan class=pl-c1>title\u003C\u002Fspan>\u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>url\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L29\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"29\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC29\" class=\"blob-code blob-code-inner js-file-line\">          \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-en>truncateString\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>url\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-c1>30\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L30\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"30\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC30\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-v>StyledItemLink\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L31\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"31\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC31\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-v>StyledInfo\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L32\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"32\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC32\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>StyledTime\u003C\u002Fspan> \u003Cspan class=pl-c1>title\u003C\u002Fspan>\u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-s1>lastVisitDate\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>toTimeString\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-s1>time\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-v>StyledTime\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L33\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"33\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC33\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-v>StyledHistoryItem\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L34\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"34\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC34\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L35\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"35\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC35\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fff9dc92e165a06b7c0747fac7d1f352f\u002Fraw\u002F79389ab9e07bbcf77d70fb17b4a6d1f02917745f\u002FHistoryItem.tsx\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002Fff9dc92e165a06b7c0747fac7d1f352f#file-historyitem-tsx\" class=\"Link--inTextBlock\">\n          HistoryItem.tsx\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>Those will give our history list some basic styles to make it look like this:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*D5679JssEDniI1UmOe_WvA.png\"\n    class=\"kg-image\"\n    alt=\"History Extension with styles\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>History Extension with styles\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Ch4 id=\"add-favicon-icons\">\u003Cstrong>Add Favicon icons\u003C\u002Fstrong>\u003C\u002Fh4>\n\u003Cp>\n  Now, let’s improve the design of our\n  \u003Ccode>HistoryItem.tsx\u003C\u002Fcode>\n  file a bit more. To make it look better, we will be add a favicon to our history list items. We can do this by using a\n  Google API that automatically pulls the favicon image of any URL.\n\u003C\u002Fp>\n\u003Cp>It works using a simple GET request to:\u003C\u002Fp>\n\u003Cp>\n  \u003Cstrong>\n    \u003Cem>\n      https:\u002F\u002Ft0.gstatic.com\u002FfaviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${item.url}&size=16\n    \u003C\u002Fem>\n  \u003C\u002Fstrong>\n\u003C\u002Fp>\n\u003Cp>\n  We simply replace the\n  \u003Ccode>url\u003C\u002Fcode>\n  parameter to be the history item’s\n  \u003Ccode>url\u003C\u002Fcode>\n  and pass it to an image like this:\n\u003C\u002Fp>\n\u003C!--kg-card-begin: html-->\n\u003Cdiv class=\"gist-embed\">\u003Cdiv id=\"gist120750168\" class=\"gist\">\n    \u003Cdiv class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      \u003Cdiv class=\"gist-data\">\n        \n\u003Cdiv class=\"js-gist-file-update-container js-task-list-container\">\n      \u003Cdiv id=\"file-historyitem-tsx\" class=\"file my-2\">\n    \n    \u003Cdiv itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-tsx  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"HistoryItem.tsx content, created by MariusBongarts on 06:26AM on February 06, 2023.\"\n    >\n\n        \n\u003Cdiv class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  \u003Ctemplate class=\"js-file-alert-template\">\n  \u003Cdiv data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n    \u003Cspan>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.co\u002Fhiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters\u003C\u002Fa>\n    \u003C\u002Fspan>\n\n\n  \u003Cdiv data-view-component=\"true\" class=\"flash-action\">        \u003Ca href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n\u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003C\u002Ftemplate>\n\u003Ctemplate class=\"js-line-alert-template\">\n  \u003Cspan aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    \u003Csvg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    \u003Cpath d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\">\u003C\u002Fpath>\n\u003C\u002Fsvg>\n\u003C\u002Fspan>\u003C\u002Ftemplate>\n\n  \u003Ctable data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"HistoryItem.tsx\">\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC1\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>import\u003C\u002Fspan> \u003Cspan class=pl-v>React\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>"react"\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC2\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>import\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan> \u003Cspan class=pl-s1>truncateString\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-s1>urlWithoutSchema\u003C\u002Fspan> \u003Cspan class=pl-kos>}\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>"..\u002Fservices\u002Fhelper"\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC3\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>import\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC4\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-v>StyledInfo\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC5\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-v>StyledHistoryItem\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC6\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-v>StyledItemLink\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC7\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-v>StyledTitle\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC8\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-v>StyledTime\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC9\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan> \u003Cspan class=pl-k>from\u003C\u002Fspan> \u003Cspan class=pl-s>".\u002FHistoryItem.styled"\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC10\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC11\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>interface\u003C\u002Fspan> \u003Cspan class=pl-smi>HistoryItemProps\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC12\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-c1>item\u003C\u002Fspan>: \u003Cspan class=pl-s1>chrome\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>history\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-smi>HistoryItem\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC13\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC14\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC15\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-k>export\u003C\u002Fspan> \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-v>HistoryItem\u003C\u002Fspan>: \u003Cspan class=pl-v>React\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-smi>FC\u003C\u002Fspan>\u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-smi>HistoryItemProps\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan> item \u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan> \u003Cspan class=pl-c1>=>\u003C\u002Fspan> \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC16\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>faviconUrl\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s>`https:\u002F\u002Ft0.gstatic.com\u002FfaviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=\u003Cspan class=pl-s1>\u003Cspan class=pl-kos>${\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>url\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Fspan>&size=16`\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC17\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>lastVisitDate\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-k>new\u003C\u002Fspan> \u003Cspan class=pl-v>Date\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>lastVisitTime\u003C\u002Fspan> \u003Cspan class=pl-c1>??\u003C\u002Fspan> \u003Cspan class=pl-c1>0\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L18\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"18\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC18\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>time\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-s1>lastVisitDate\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>toLocaleTimeString\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>substring\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-c1>0\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-c1>5\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L19\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"19\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC19\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L20\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"20\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC20\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>const\u003C\u002Fspan> \u003Cspan class=pl-s1>url\u003C\u002Fspan> \u003Cspan class=pl-c1>=\u003C\u002Fspan> \u003Cspan class=pl-en>urlWithoutSchema\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>url\u003C\u002Fspan> \u003Cspan class=pl-c1>??\u003C\u002Fspan> \u003Cspan class=pl-s>""\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L21\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"21\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC21\" class=\"blob-code blob-code-inner js-file-line\">\n\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L22\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"22\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC22\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-k>return\u003C\u002Fspan> \u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L23\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"23\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC23\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>StyledHistoryItem\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L24\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"24\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC24\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-s1>img\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L25\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"25\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC25\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-c1>src\u003C\u002Fspan>\u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-s1>faviconUrl\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L26\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"26\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC26\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-c1>alt\u003C\u002Fspan>\u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-s>`Favicon of: \u003Cspan class=pl-s1>\u003Cspan class=pl-kos>${\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>url\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Fspan>`\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L27\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"27\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC27\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-c1>width\u003C\u002Fspan>\u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003Cspan class=pl-s>"16"\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L28\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"28\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC28\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-c1>height\u003C\u002Fspan>\u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003Cspan class=pl-s>"16"\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L29\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"29\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC29\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-c1>loading\u003C\u002Fspan>\u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003Cspan class=pl-s>"lazy"\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L30\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"30\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC30\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-s1>img\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L31\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"31\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC31\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>StyledInfo\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L32\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"32\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC32\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>StyledTitle\u003C\u002Fspan> \u003Cspan class=pl-c1>title\u003C\u002Fspan>\u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>title\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L33\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"33\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC33\" class=\"blob-code blob-code-inner js-file-line\">          \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-en>truncateString\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>title\u003C\u002Fspan> \u003Cspan class=pl-c1>??\u003C\u002Fspan> \u003Cspan class=pl-s>""\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-c1>50\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L34\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"34\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC34\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-v>StyledTitle\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L35\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"35\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC35\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-s1>br\u003C\u002Fspan> \u003Cspan class=pl-kos>\u002F>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L36\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"36\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC36\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>StyledItemLink\u003C\u002Fspan> \u003Cspan class=pl-c1>href\u003C\u002Fspan>\u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>url\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan> \u003Cspan class=pl-c1>target\u003C\u002Fspan>\u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003Cspan class=pl-s>"_blank"\u003C\u002Fspan> \u003Cspan class=pl-c1>title\u003C\u002Fspan>\u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-s1>item\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-c1>url\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L37\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"37\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC37\" class=\"blob-code blob-code-inner js-file-line\">          \u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-en>truncateString\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-s1>url\u003C\u002Fspan>\u003Cspan class=pl-kos>,\u003C\u002Fspan> \u003Cspan class=pl-c1>30\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L38\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"38\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC38\" class=\"blob-code blob-code-inner js-file-line\">        \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-v>StyledItemLink\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L39\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"39\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC39\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-v>StyledInfo\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L40\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"40\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC40\" class=\"blob-code blob-code-inner js-file-line\">      \u003Cspan class=pl-c1><\u003C\u002Fspan>\u003Cspan class=pl-v>StyledTime\u003C\u002Fspan> \u003Cspan class=pl-c1>title\u003C\u002Fspan>\u003Cspan class=pl-c1>=\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-s1>lastVisitDate\u003C\u002Fspan>\u003Cspan class=pl-kos>.\u003C\u002Fspan>\u003Cspan class=pl-en>toTimeString\u003C\u002Fspan>\u003Cspan class=pl-kos>(\u003C\u002Fspan>\u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003Cspan class=pl-kos>{\u003C\u002Fspan>\u003Cspan class=pl-s1>time\u003C\u002Fspan>\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-v>StyledTime\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L41\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"41\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC41\" class=\"blob-code blob-code-inner js-file-line\">    \u003Cspan class=pl-kos><\u002F\u003C\u002Fspan>\u003Cspan class=pl-v>StyledHistoryItem\u003C\u002Fspan>\u003Cspan class=pl-c1>>\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L42\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"42\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC42\" class=\"blob-code blob-code-inner js-file-line\">  \u003Cspan class=pl-kos>)\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd id=\"file-historyitem-tsx-L43\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"43\">\u003C\u002Ftd>\n          \u003Ctd id=\"file-historyitem-tsx-LC43\" class=\"blob-code blob-code-inner js-file-line\">\u003Cspan class=pl-kos>}\u003C\u002Fspan>\u003Cspan class=pl-kos>;\u003C\u002Fspan>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gist-meta\">\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F212893eb544dde29d4d5124e586eaf53\u002Fraw\u002Ffb892fa9e71af94f9ca60e31b4fb2508f48861b4\u002FHistoryItem.tsx\" style=\"float:right\" class=\"Link--inTextBlock\">view raw\u003C\u002Fa>\n        \u003Ca href=\"https:\u002F\u002Fgist.github.com\u002FMariusBongarts\u002F212893eb544dde29d4d5124e586eaf53#file-historyitem-tsx\" class=\"Link--inTextBlock\">\n          HistoryItem.tsx\n        \u003C\u002Fa>\n        hosted with ❤ by \u003Ca class=\"Link--inTextBlock\" href=\"https:\u002F\u002Fgithub.com\">GitHub\u003C\u002Fa>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!--kg-card-end: html-->\n\u003Cp>Here is what our extension looks like now:\u003C\u002Fp>\n\u003Cfigure class=\"kg-card kg-image-card kg-card-hascaption\">\n  \u003Cimg\n    src=\"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*qMTllCXEfdmACM00_oy_FQ.png\"\n    class=\"kg-image\"\n    alt=\"History Extension with Favicon and styles\"\n    loading=\"lazy\"\n  \u002F>\n  \u003Cfigcaption>History Extension with Favicon and styles\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Ch3 id=\"final-thoughts\">Final Thoughts\u003C\u002Fh3>\n\u003Cp>\n  I would say that our extension already looks very good. We have successfully integrated the Chrome History API to show\n  the recently visited pages in our dashboard. Also, we applied some styles to make it look a little better.\n\u003C\u002Fp>\n\u003Cp>\n  In the next part, we will take care of displaying the extensive list of history items efficiently using lazy-loading.\n  We will also integrate a search bar to search for specific entries in our browsing history.\n\u003C\u002Fp>\n\u003Cp>\n  I hope you enjoyed reading this article. I am always happy to answer questions and am open to criticism. Feel free to\n  contact me at any time! Get in touch with me via\n  \u003Cstrong>\u003C\u002Fstrong>\n  \u003Ca\n    href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fmarius-bongarts-6b3638171\u002F\"\n    rel=\"noopener ugc nofollow noopener noopener noopener\"\n  >\n    \u003Cstrong>LinkedIn\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  ,\n  \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002FMariusBongarts\" rel=\"noopener ugc nofollow noopener noopener noopener\">\n    \u003Cstrong>Twitter\u003C\u002Fstrong>\n  \u003C\u002Fa>\n  , or leave a comment.\n\u003C\u002Fp>\n","Marius Bongarts","https:\u002F\u002Fwww.facebook.com\u002FMariusBongartsWeb","\u002Fblog\u002Fcontent\u002Fimages\u002F2022\u002F08\u002FIMG_7861_Square.jpeg","https:\u002F\u002Fmarius-bongarts.de\u002F","Founder & Software Engineer","https:\u002F\u002Ftwitter.com\u002FMariusBongarts",2445,[44,80,96],{"id":45,"slug":46,"title":47,"description":48,"url":49,"publishedAt":50,"createdAt":51,"updatedAt":52,"featured":19,"readingTime":53,"tags":54,"imageUrl":58,"imageAlt":59,"faviconUrl":60,"publishedAtString":50,"category":61,"readTimeString":79},"688719cf8b4b770aa39407fc","my-simple-strategy-for-3-268-5-star-chrome-extension-reviews","My Simple Strategy for 3,268 5‑Star Chrome Extension Reviews","Get 37x more reviews than Grammarly with this simple strategy. Learn the Win-Ask Method to boost your Chrome extension ratings and user engagement.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fmy-simple-strategy-for-3-268-5-star-chrome-extension-reviews\u002F","2025-07-28T06:48:26.000+00:00","2025-07-28T06:33:51.000+00:00","2025-07-28T07:04:33.000+00:00",6,[55,56,57,23],"Marketing","Side Projects","Side Hustle","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1633613286991-611fe299c4be?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8c2VhcmNofDF8fHJhdGluZ3xlbnwwfHx8fDE3NTM2ODQ0MzR8MA&ixlib=rb-4.1.0&q=80&w=2000","Five yellow star-shaped objects placed diagonally on a pink and blue background.","https:\u002F\u002Fweb-highlights.com\u002Ffavicon.ico",[62,72],{"type":63,"title":64,"shortTitle":65,"icon":66,"description":67,"excerpt":68,"thumbnail":69},"my-journey","Behind the Scenes of Web Highlights","My Journey","rocket","Hey 👋 I am Marius. I started Web Highlights in 2019 as a tool just for myself and have been working on it alone since then. Learn from my mistakes and stories right from the beginning how I grew the Chrome Extension to 250K users without any marketing costs.","These posts are the honest build log of Web Highlights: what worked, what hurt, and what I’d do again. If you care about indie products, Chrome extensions, or SEO-led growth, you’ll find practical lessons alongside the personal story.",{"url":70,"alt":71},"https:\u002F\u002Fweb-highlights.com\u002Fimages\u002Fme.png","Me, Marius Bongarts, in front of sea in Portugal, Algarve",{"type":73,"title":74,"shortTitle":75,"icon":76,"description":77,"excerpt":78},"productivity","Browser Productivity & Chrome Extensions","Productivity","command","Curated extension lists, focus workflows, and tips for getting more from Chrome—always with an eye toward reading, capture, and learning.","Productivity isn’t only task managers. These articles cover the browser layer: extensions that protect focus, comparisons that save you from dead-end tools, and setup tips that keep your reading and capture stack lightweight but powerful.","6 min read",{"id":81,"slug":82,"title":83,"description":84,"url":85,"publishedAt":86,"createdAt":87,"updatedAt":86,"featured":19,"readingTime":53,"tags":88,"imageUrl":90,"imageAlt":91,"faviconUrl":60,"publishedAtString":86,"category":92,"readTimeString":79},"671f386db98706751d677b5f","how-to-show-a-link-preview-on-any-website","How To Show A Beautiful Link Preview On Any Website","Easily add link previews to any website using the open-source Previewbox library. Works with any framework, fetching Open Graph data automatically.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fhow-to-show-a-link-preview-on-any-website\u002F","2024-10-29T20:25:55.000+00:00","2024-10-28T07:08:29.000+00:00",[32,89],"SEO","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F10\u002F0_dkKw8Q1T3dUhNBo7.jpg","Lake with mountains in background",[93,95],{"type":63,"title":64,"shortTitle":65,"icon":66,"description":67,"excerpt":68,"thumbnail":94},{"url":70,"alt":71},{"type":73,"title":74,"shortTitle":75,"icon":76,"description":77,"excerpt":78},{"id":97,"slug":98,"title":99,"description":100,"url":101,"publishedAt":102,"createdAt":103,"updatedAt":104,"featured":19,"readingTime":105,"tags":106,"imageUrl":108,"imageAlt":109,"faviconUrl":60,"publishedAtString":102,"category":110,"readTimeString":113},"66ed6878e07b961e2f231a8f","lessons-from-a-bamboo-tree-staying-motivated-on-my-side-project","Five Years to 100K Users: The Bamboo Tree Story for Side Project Growth","Discover how a bamboo tree can inspire solopreneurs to stay motivated on side projects. Learn the value of delayed gratification on the journey to success.","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Flessons-from-a-bamboo-tree-staying-motivated-on-my-side-project\u002F","2024-09-22T20:17:54.000+00:00","2024-09-20T12:20:08.000+00:00","2024-09-24T07:00:43.000+00:00",7,[65,107,56,57],"Story","https:\u002F\u002Fweb-highlights.com\u002Fblog\u002Fcontent\u002Fimages\u002F2024\u002F09\u002F0_JjFAqJ78cyJMViqZ.webp","Tall Bamboo Tree",[111],{"type":63,"title":64,"shortTitle":65,"icon":66,"description":67,"excerpt":68,"thumbnail":112},{"url":70,"alt":71},"7 min read"]