You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -33,12 +33,12 @@ Static demo blog. Deployed on [Vercel](https://vercel.com).
33
33
<li>When user enters value, we <a href="https://github.com/AlexTechNoir/Next.js-Strapi-Blog/blob/master/components/header/SearchBar.js#L101">grab its changes</a>.</li>
<li>It's important not to use Next.js's <a href="https://nextjs.org/docs/routing/dynamic-routes">dynamic routes</a> here, because blog won't be static if we have pages, depending on user's request (but if you're OK with hybrid/dynamic blog, then it's alright to use them (btw, maybe <a href="https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes">optional catch all routes</a> will somehow work with static site too, but I haven't tested it)). Instead we go to search page with query passed through "?" sign, <a href="https://github.com/AlexTechNoir/Next.js-Strapi-Blog/blob/master/components/header/SearchBar.js#L66">here</a>.</li>
36
-
<li>Search page will <a href="https://github.com/AlexTechNoir/Next.js-Strapi-Blog/blob/master/pages/search.js#L14">fetch</a> Strapi's API and will <a href="https://github.com/AlexTechNoir/Next.js-Strapi-Blog/blob/master/pages/search.js#L23">render</a> the filtered results based on query parameter.</li>
36
+
<li>Search page will <a href="https://github.com/AlexTechNoir/Next.js-Strapi-Blog/blob/master/pages/search.js#L13">fetch</a> Strapi's API and will <a href="https://github.com/AlexTechNoir/Next.js-Strapi-Blog/blob/master/pages/search.js#L22">render</a> the filtered results based on query parameter.</li>
37
37
<li>In search result we <a href="https://github.com/AlexTechNoir/Next.js-Strapi-Blog/blob/master/components/search/SearchResult.js#L15">convert markup to html</a> and <a href="https://github.com/AlexTechNoir/Next.js-Strapi-Blog/blob/master/components/search/SearchResult.js#L16">html to text</a>.</li>
38
38
<li>We <a href="https://github.com/AlexTechNoir/Next.js-Strapi-Blog/blob/master/components/search/SearchResult.js#L100">divide text into array based on value match</a> and <a href="https://github.com/AlexTechNoir/Next.js-Strapi-Blog/blob/master/components/search/SearchResult.js#L101">create new text as array with "mark" tag around match</a>.</li>
39
39
<li>Then in useEffect, initially and every time the search value gets changed, we look for "mark" tags in text and cut the text around the first match (or just write "no match" if there is no match). The variable names should be self-explanatory <a href="https://github.com/AlexTechNoir/Next.js-Strapi-Blog/blob/master/components/search/SearchResult.js#L20">here</a>.</li>
40
40
<li>It's important to wrap the text inside "p" tag with, for example, <a href="https://github.com/AlexTechNoir/Next.js-Strapi-Blog/blob/master/components/search/SearchResult.js#L97">"span" tag</a> to avoid React NotFoundError, which occurs when we re-render page (here: search for the second time) after manipulating the DOM (highlighting). Explained <a href="https://stackoverflow.com/a/54342788/10489004">here</a>.</li>
41
-
<li>Last important thing: when we search for the second time and if in search result list we got result that was in the previous list (but with different match this time) then it will reflect previous highlighted match, which is not what we want. To avoid this we must explicitly remove old results and load new when we search. We can do this by triggering <a href="https://github.com/AlexTechNoir/Next.js-Strapi-Blog/blob/master/pages/search.js#L35">re-fetch</a> - this will cause "isValidating" parameter to <a href="https://github.com/AlexTechNoir/Next.js-Strapi-Blog/blob/master/pages/search.js#L50">change</a> on every search, replacing previous results with skeleton load and then load new results with correct highlighted match.</li>
41
+
<li>Last important thing: when we search for the second time and if in search result list we got result that was in the previous list (but with different match this time) then it will reflect previous highlighted match, which is not what we want. To avoid this we must explicitly remove old results and load new when we search. We can do this by triggering <a href="https://github.com/AlexTechNoir/Next.js-Strapi-Blog/blob/master/pages/search.js#L34">re-fetch</a> - this will cause "isValidating" parameter to <a href="https://github.com/AlexTechNoir/Next.js-Strapi-Blog/blob/master/pages/search.js#L44">change</a> on every search, replacing previous results with skeleton load and then load new results with correct highlighted match.</li>
42
42
</ol>
43
43
</details>
44
44
@@ -60,12 +60,12 @@ Static demo blog. Deployed on [Vercel](https://vercel.com).
60
60
## What did I use to make this demo:
61
61
62
62
-[Create Next App](https://nextjs.org/docs/getting-started#setup)
-[React Font Awesome](https://github.com/FortAwesome/react-fontawesome) ([example](https://github.com/AlexTechNoir/Next.js-Strapi-Blog/blob/master/components/header/UsualMenu.js#L75))
0 commit comments