I'm using client-side rendering and react-head is not

Personally, my mental model says that existing tags should not be modified by

Personally, my mental model says that existing tags should not b

Title component doesn't override default <title> tag provided via HTML template about react-head HOT 10 OPEN

tizmagik commented on May 21, 2024 2

Title component doesn't override default tag provided via HTML template<p>from react-head.</p></section> </section> </article> <article> <h2 class="h2">Comments (10)</h2> <section class="issue-comment"> <section id="486316644" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/244704?s=40&u=78f8a89f41377936b91107d1a5a2fe4000fbb219&v=4" alt="tizmagik avatar" /> <a class="issue-username" href="/tizmagik">tizmagik</a> <span class="issue-time"> commented on May 21, 2024 </span> <span class="issue-vote"> <i class="icon-vote"></i>1 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">Yes, makes total sense to have a fallback as part of the template <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/rdsedmundo/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/rdsedmundo">@rdsedmundo</a> 👍</p> <p dir="auto">However, I'm not sure <code class="notranslate">react-head</code> should manage that. Conceptually my mental model is when you <code class="notranslate">import { Title } from 'react-head'</code> then you're telling react-head to manage that Title tag -- I'm not sure it makes sense for react-head to manage <em>all</em> title tags.</p> <p dir="auto">To solve your use case though I guess it would be relatively easy to add a small snippet to remove the title tag that the template adds and then the rest would be left up to react-head:</p> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<head> <title id="template-title">Template Title</title> </head> <script> const templateTitle = document.getElementById("template-title"); if (templateTitle) templateTitle.parentNode.removeChild(templateTitle); </script>"><pre class="notranslate"><span class="pl-kos"><</span><span class="pl-ent">head</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">title</span> <span class="pl-c1">id</span>="<span class="pl-s">template-title</span>"<span class="pl-kos">></span>Template Title<span class="pl-kos"></</span><span class="pl-ent">title</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">head</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-k">const</span> <span class="pl-s1">templateTitle</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">"template-title"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">templateTitle</span><span class="pl-kos">)</span> <span class="pl-s1">templateTitle</span><span class="pl-kos">.</span><span class="pl-c1">parentNode</span><span class="pl-kos">.</span><span class="pl-en">removeChild</span><span class="pl-kos">(</span><span class="pl-s1">templateTitle</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span></pre></div><p>from react-head.</p></section> </section> <section class="issue-comment"> <section id="485499631" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/5482378?s=40&u=562862a073fdfdbbfee36843ac7cda59b8ccac1a&v=4" alt="rdsedmundo avatar" /> <a class="issue-username" href="/rdsedmundo">rdsedmundo</a> <span class="issue-time"> commented on May 21, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">Nevermind, I realized what is going on in fact. The nesting is working. The problem is that, if I provide a default tag on my HTML template, <code class="notranslate">react-head</code> won't override it and it always stays on the top and "won the battle" compared to the tag that <code class="notranslate">react-head</code> inserts.</p> <p dir="auto">I'll change the title and description appropriately.</p><p>from react-head.</p></section> </section> <section class="issue-comment"> <section id="485616060" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/244704?s=40&u=78f8a89f41377936b91107d1a5a2fe4000fbb219&v=4" alt="tizmagik avatar" /> <a class="issue-username" href="/tizmagik">tizmagik</a> <span class="issue-time"> commented on May 21, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">I guess what is the desired behavior here? I'm not sure react-head should mess with existing markup on the page. Curious what your use case is for the <code class="notranslate">title</code> to be part of the template vs having react-head completely manage it?</p><p>from react-head.</p></section> </section> <section class="issue-comment"> <section id="485741741" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/5482378?s=40&u=562862a073fdfdbbfee36843ac7cda59b8ccac1a&v=4" alt="rdsedmundo avatar" /> <a class="issue-username" href="/rdsedmundo">rdsedmundo</a> <span class="issue-time"> commented on May 21, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">It's simply because this one can act as a default one and if I share the webpage on Slack, for example. If I do that and have the <code class="notranslate"><title></code> tag on the HTML I can see the title being picked up. Relying only on <code class="notranslate">react-head</code> Slack won't get anything, as JS won't execute. And by the way, we don't have strong SEO requirements that would justify adding server-side rendering, the use case is really just this quick link sharing on a platform here and there.</p><p>from react-head.</p></section> </section> <section class="issue-comment"> <section id="538699499" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/16879799?s=30&u=02d46414a20723bb103caf5c3d5757aae739fbb0&v=4" alt="TrejoCode avatar" /> <a class="issue-username" href="/TrejoCode">TrejoCode</a> <span class="issue-time"> commented on May 21, 2024 </span> </section> <section class="markdown markdown-js p-5"><blockquote> <p dir="auto">Yes, makes total sense to have a fallback as part of the template <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/rdsedmundo/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/rdsedmundo">@rdsedmundo</a> 👍</p> <p dir="auto">However, I'm not sure <code class="notranslate">react-head</code> should manage that. Conceptually my mental model is when you <code class="notranslate">import { Title } from 'react-head'</code> then you're telling react-head to manage that Title tag -- I'm not sure it makes sense for react-head to manage <em>all</em> title tags.</p> <p dir="auto">To solve your use case though I guess it would be relatively easy to add a small snippet to remove the title tag that the template adds and then the rest would be left up to react-head:</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="<head> <title id="template-title">Template Title</title> </head> <script> const templateTitle = document.getElementById("template-title"); if (templateTitle) templateTitle.parentNode.removeChild(templateTitle); </script>"><pre class="notranslate"><code class="notranslate"><head> <title id="template-title">Template Title</title> </head> <script> const templateTitle = document.getElementById("template-title"); if (templateTitle) templateTitle.parentNode.removeChild(templateTitle); </script> </code></pre></div> </blockquote> <p dir="auto">Thank you, I stopped using react-head precisely for not having this feature, it is very, the proposed solution is simply horrible, nothing clean.<br> I hope in some future it will be corrected and I can return to this compenente.</p> <ul dir="auto"> <li>Thank you anyway.</li> </ul><p>from react-head.</p></section> </section> <section class="issue-comment"> <section id="538764552" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/244704?s=40&u=78f8a89f41377936b91107d1a5a2fe4000fbb219&v=4" alt="tizmagik avatar" /> <a class="issue-username" href="/tizmagik">tizmagik</a> <span class="issue-time"> commented on May 21, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">I’m curious how others feel about this. If there’s enough interest in having react-head clobber existing tags on the page that it otherwise does not manage, we can look into adding support.</p><p>from react-head.</p></section> </section> <section class="issue-comment"> <section id="538799483" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2043552?s=30&u=d41342a076cb0233594ea9c81b4715409265e0d3&v=4" alt="JoshuaToenyes avatar" /> <a class="issue-username" href="/JoshuaToenyes">JoshuaToenyes</a> <span class="issue-time"> commented on May 21, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">Personally, my mental model says that existing tags <em>should not</em> be modified by react-head. The real solution here is SSR.</p> <p dir="auto">Although the <code class="notranslate">title</code> tag might seem special in this case, how would react-head handle other singleton type tags (i.e. <code class="notranslate"><meta name="viewport" ...></code>). Would it clobber those too?</p> <p dir="auto">I image troubleshooting unexpectedly changing tag values to be more difficult than seeing duplicate tags and realizing one is being injected by react-head, and the other hardcoded in the template.</p> <p dir="auto">Also, expecting react-head to clobber the other title tags could lead to problems if you are using SSR. Suppose you had a hard-coded <code class="notranslate">title</code> tag in your template (or interpolated through some other means), then inject another <code class="notranslate">title</code> tag via react-head. The resulting HTML will have two title tags (bad for a number of reasons). However, inspecting the page <em>after</em> JS has executed and react-head has removed the original title tag will make it appear as though there's no problem.</p><p>from react-head.</p></section> </section> <section class="issue-comment"> <section id="539024620" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/16879799?s=30&u=02d46414a20723bb103caf5c3d5757aae739fbb0&v=4" alt="TrejoCode avatar" /> <a class="issue-username" href="/TrejoCode">TrejoCode</a> <span class="issue-time"> commented on May 21, 2024 </span> </section> <section class="markdown markdown-js p-5"><blockquote> <p dir="auto">Personally, my mental model says that existing tags <em>should not</em> be modified by react-head. The real solution here is SSR.</p> <p dir="auto">Although the <code class="notranslate">title</code> tag might seem special in this case, how would react-head handle other singleton type tags (i.e. <code class="notranslate"><meta name="viewport" ...></code>). Would it clobber those too?</p> <p dir="auto">I image troubleshooting unexpectedly changing tag values to be more difficult than seeing duplicate tags and realizing one is being injected by react-head, and the other hardcoded in the template.</p> <p dir="auto">Also, expecting react-head to clobber the other title tags could lead to problems if you are using SSR. Suppose you had a hard-coded <code class="notranslate">title</code> tag in your template (or interpolated through some other means), then inject another <code class="notranslate">title</code> tag via react-head. The resulting HTML will have two title tags (bad for a number of reasons). However, inspecting the page <em>after</em> JS has executed and react-head has removed the original title tag will make it appear as though there's no problem.</p> </blockquote> <p dir="auto">It is correct thought in SSR.<br> My approach is for the CSR.</p><p>from react-head.</p></section> </section> <section class="issue-comment"> <section id="541199903" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/244704?s=40&u=78f8a89f41377936b91107d1a5a2fe4000fbb219&v=4" alt="tizmagik avatar" /> <a class="issue-username" href="/tizmagik">tizmagik</a> <span class="issue-time"> commented on May 21, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">If anyone's interested in working on this, I think a PR to show how this might work would be helpful. Ideally there should be a way to opt-in (or opt-out) of clobbering.</p><p>from react-head.</p></section> </section> <section class="issue-comment"> <section id="541785731" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/244704?s=40&u=78f8a89f41377936b91107d1a5a2fe4000fbb219&v=4" alt="tizmagik avatar" /> <a class="issue-username" href="/tizmagik">tizmagik</a> <span class="issue-time"> commented on May 21, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">Wrote up a quick RFC: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="506759993" data-permission-text="Title is private" data-url="https://github.com/tizmagik/react-head/issues/97" data-hovercard-type="issue" data-hovercard-url="/tizmagik/react-head/issues/97/hovercard" href="https://github.com/tizmagik/react-head/issues/97">#97</a></p><p>from react-head.</p></section> </section> </article> <section> <h2 class="h2">Related Issues (20)</h2> <div class="issue"> <ul> <li> <a href="/tizmagik/react-head/issues/101">Link canonical cascade</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/tizmagik/react-head/issues/102">Expose HeadTag?</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/tizmagik/react-head/issues/108">Question: Does it work without ssr for SEO, on fb and twitter ? </a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/tizmagik/react-head/issues/140">Children prop type missing in HeadProvider</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 7</span> </li> <li> <a href="/tizmagik/react-head/issues/159">Is this library still maintained?</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/tizmagik/react-head/issues/54">Suggestion: use renderToStaticMarkup instead of renderToString</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 4</span> </li> <li> <a href="/tizmagik/react-head/issues/57">Some tags not collected</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 4</span> </li> <li> <a href="/tizmagik/react-head/issues/62">Invariant failed in HeadTags</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 9</span> </li> <li> <a href="/tizmagik/react-head/issues/64">Development server not working</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/tizmagik/react-head/issues/68">does not support ie9?</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/tizmagik/react-head/issues/70">Proposal: headTagsToElement(headTags)</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/tizmagik/react-head/issues/72">Element.remove() not supported in IE</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 3</span> </li> <li> <a href="/tizmagik/react-head/issues/74">Document usage with SSR streaming</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 3</span> </li> <li> <a href="/tizmagik/react-head/issues/75">TypeScript support</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 3</span> </li> <li> <a href="/tizmagik/react-head/issues/76">react-head supports meta update on lazy load</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 3</span> </li> <li> <a href="/tizmagik/react-head/issues/79">itemProp support on <Meta /></a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/tizmagik/react-head/issues/81">canonical link is repeated</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/tizmagik/react-head/issues/94">Entities in computed attribute values? Suggested approach?</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 5</span> </li> <li> <a href="/tizmagik/react-head/issues/97">RFC: Managing tags without extra markup</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 14</span> </li> </ul> </div> </section> </main> <section id="more" class="flex-none w-full md:w-60 text-gray-600 bg-gray-50 px-5 md:px-3 rounded-md dark-color"> <div class="w-full md:w-60 h-0.5"></div> <section>  <h2 class="h2 py-3.5">Recommend Projects</h2> <ul> <li class="mb-4"> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/facebook/react"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://raw.githubusercontent.com/facebook/create-react-app/master/packages/cra-template/template/public/logo192.png" alt="React photo" /> React </a> </h3> <p class="article-more pt-1">A declarative, efficient, and flexible JavaScript library for building user interfaces.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/vuejs/vue"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" alt="Vue.js photo" /> Vue.js </a> </h3> <p class="article-more pt-1">🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/microsoft/TypeScript"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://www.typescriptlang.org/favicon-32x32.png" alt="Typescript photo" /> Typescript </a> </h3> <p class="article-more pt-1">TypeScript is a superset of JavaScript that compiles to clean JavaScript output.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/tensorflow/tensorflow"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://camo.githubusercontent.com/c04e16c05de80dadbdc990884672fc941fdcbbfbb02b31dd48c248d010861426/68747470733a2f2f7777772e74656e736f72666c6f772e6f72672f696d616765732f74665f6c6f676f5f736f6369616c2e706e67" alt="TensorFlow photo" /> TensorFlow </a> </h3> <p class="article-more pt-1">An Open Source Machine Learning Framework for Everyone</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/django/django"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars2.githubusercontent.com/u/27804?s=200&v=4" alt="Django photo" /> Django </a> </h3> <p class="article-more pt-1">The Web framework for perfectionists with deadlines.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/laravel/laravel"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://laravel.com/img/logomark.min.svg" alt="Laravel photo" /> Laravel </a> </h3> <p class="article-more pt-1">A PHP framework for web artisans</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/d3/d3"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://camo.githubusercontent.com/586ccf0aad9684edc821658cee04146cf36d1f1d5ec904bbefd72728909ccb2e/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667" alt="D3 photo" /> D3 </a> </h3> <p class="article-more pt-1">Bring data to life with SVG, Canvas and HTML. 📊📈🎉</p> </article> </li> <li> <div> </div> </li> </ul> </section> <section>  <h2 class="h2 py-3.5">Recommend Topics</h2> <ul> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/javascript"> javascript </a> </h3> <p class="article-more pt-1">JavaScript (JS) is a lightweight interpreted programming language with first-class functions.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/web"> web </a> </h3> <p class="article-more pt-1">Some thing interesting about web. New door for the world.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/server"> server </a> </h3> <p class="article-more pt-1">A server is a program made to process requests and deliver data to clients.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/machine-learning"> Machine learning </a> </h3> <p class="article-more pt-1">Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/visualization"> Visualization </a> </h3> <p class="article-more pt-1">Some thing interesting about visualization, use data art</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/game"> Game </a> </h3> <p class="article-more pt-1">Some thing interesting about game, make everyone happy.</p> </article> </li> <li> </li> </ul> </section> <section>  <h2 class="h2 py-3.5">Recommend Org</h2> <ul> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/facebook"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/69631?v=4" alt="Facebook photo" /> Facebook </a> </h3> <p class="article-more pt-1">We are working to build community through open source technology. NB: members must have two-factor auth.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/microsoft"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/6154722?v=4" alt="Microsoft photo" /> Microsoft </a> </h3> <p class="article-more pt-1">Open source projects and samples from Microsoft.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/google"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/1342004?v=4" alt="Google photo" /> Google </a> </h3> <p class="article-more pt-1">Google ❤️ Open Source for everyone.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/alibaba"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/1961952?v=4" alt="Alibaba photo" /> Alibaba </a> </h3> <p class="article-more pt-1">Alibaba Open Source for everyone</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/d3"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/1562726?v=4" alt="D3 photo" /> D3 </a> </h3> <p class="article-more pt-1">Data-Driven Documents codes.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/tencent"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/18461506?v=4" alt="Tencent photo" /> Tencent </a> </h3> <p class="article-more pt-1">China tencent open source team.</p> </article> </li> <li> </li> </ul> </section> </section> </div> </div>  <footer class="sizeing text-xs text-center p-5"> <div>Friends: <a class="hover:underline" target="_blank" href="https://www.chanpinqingbaoju.com">ProductDiscover</a> </div> Copyright © 2024 Code Monkey  ❤️ <a class="hover:underline block md:inline" href="mailto:cs.victor.edison@gmail.com">Mail to me</a> </footer> </body> </html>