<commit_before>// @deno-types="https://deno.land/x/types/react/v16.13.1/react.d.ts"
import React from 'https://dev.jspm.io/react@16.13.1';
// @deno-types="https://deno.land/x/types/react-dom/v16.13.1/react-dom.d.ts"
import ReactDOM from 'https://dev.jspm.io/react-dom@16.13.1';

interface GitalkProps {
  clientID: string;
  clientSecret: string;
  repo: string;
  owner: string;
  admin: string[];
  id: string;
  title: string;
}

const Gitalk = (props: GitalkProps) => {
  React.useEffect(() => {
    // @ts-ignore
    const container = document.getElementById('gitalk-container');
    ReactDOM.unmountComponentAtNode(container);
    container.innerHTML = '';
    new (window as any).Gitalk(props).render(container);
  }, [props.id]);
  return (
    <>
      <div id="gitalk-container" />
      <link rel="stylesheet" href="https://unpkg.com/gitalk@1.6.2/dist/gitalk.css" />
      <script src="https://unpkg.com/gitalk@1.6.2/dist/gitalk.min.js" />
    </>
  );
};

export default Gitalk;<commit_msg>fix: defer load gitalk css<commit_after>// @deno-types="https://deno.land/x/types/react/v16.13.1/react.d.ts"
import React from 'https://dev.jspm.io/react@16.13.1';
// @deno-types="https://deno.land/x/types/react-dom/v16.13.1/react-dom.d.ts"
import ReactDOM from 'https://dev.jspm.io/react-dom@16.13.1';

interface GitalkProps {
  clientID: string;
  clientSecret: string;
  repo: string;
  owner: string;
  admin: string[];
  id: string;
  title: string;
}

const Gitalk = (props: GitalkProps) => {
  React.useEffect(() => {
    // https://pegasaas.com/how-to-defer-render-blocking-css/
    // @ts-ignore
    const css = document.getElementById('gitalk-css');
    css.rel = 'stylesheet';
  });
  React.useEffect(() => {
    // @ts-ignore
    const container = document.getElementById('gitalk-container');
    ReactDOM.unmountComponentAtNode(container);
    container.innerHTML = '';
    new (window as any).Gitalk(props).render(container);
  }, [props.id]);
  return (
    <>
      <div id="gitalk-container" />
      <link id="gitalk-css" rel="preload" href="https://unpkg.com/gitalk@1.6.2/dist/gitalk.css" />
      <script defer src="https://unpkg.com/gitalk@1.6.2/dist/gitalk.min.js" />
    </>
  );
};

export default Gitalk;
{'fraction_non_alphanumeric': 0.19497982967279248, 'fraction_numerical': 0.02330793366203496, 'mean_word_length': 3.3255813953488373, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 18, 'https://': 13, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2741781', 'n_tokens_mistral': 844, 'n_tokens_neox': 826, 'n_words': 121}