<|start_filename|>package.json<|end_filename|>
{
  "name": "use-comments",
  "private": false,
  "description": "Effortlessly add a comment section to your website, and start the discussion on your content.",
  "version": "1.0.1",
  "license": "MIT",
  "author": {
    "name": "<NAME>",
    "url": "https://github.com/beerose"
  },
  "main": "dist/index.js",
  "source": "src/useComments/index.ts",
  "types": "dist/useComments/index.d.ts",
  "module": "dist/useComments/index.esm.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
    "dev": "microbundle watch",
    "build:microbundle": "microbundle --no-compress --tsconfig tsconfig.lib.json --globals react=React"
  },
  "peerDependencies": {
    "react": "*"
  },
  "devDependencies": {
    "@emotion/core": "^10.0.28",
    "@emotion/styled": "^10.0.27",
    "@mdx-js/mdx": "^1.6.7",
    "@mdx-js/react": "^1.6.7",
    "@theme-ui/color": "^0.4.0-rc.1",
    "@theme-ui/presets": "^0.4.0-rc.1",
    "@theme-ui/prism": "^0.4.0-rc.1",
    "@types/react-hamburger-menu": "^0.0.3",
    "@types/react-helmet": "^6.0.0",
    "@typescript-eslint/eslint-plugin": "^3.6.1",
    "@typescript-eslint/parser": "^3.6.1",
    "gatsby": "^2.24.3",
    "gatsby-plugin-mdx": "^1.2.26",
    "gatsby-plugin-theme-ui": "^0.4.0-rc.1",
    "gatsby-plugin-typescript": "^2.4.15",
    "gatsby-remark-code-buttons": "^2.0.4",
    "gatsby-remark-autolink-headers": "^2.3.11",
    "gatsby-source-filesystem": "^2.3.19",
    "microbundle": "^0.12.3",
    "prettier": "2.0.5",
    "react-dom": "^16.13.1",
    "react-hamburger-menu": "^1.2.1",
    "react-helmet": "^6.1.0",
    "react-live": "^2.2.2",
    "react-toggle-dark-mode": "^1.0.2",
    "theme-ui": "^0.4.0-rc.1",
    "typescript": "^3.9.6"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/beerose/use-comments"
  },
  "bugs": {
    "url": "https://github.com/beerose/use-comments/issues"
  },
  "homepage": "https://github.com/beerose/use-comments#readme",
  "keywords": [
    "react",
    "hasura",
    "blog",
    "hook",
    "comments"
  ]
}

<|start_filename|>src/gatsby-plugin-theme-ui/components.js<|end_filename|>
/** @jsx jsx */

import { jsx, Styled } from 'theme-ui';
import Prism from '@theme-ui/prism';
import { useState } from 'react';

const withId = Component => props => {
  const id = String(props.children).toLowerCase().replace(' ', '-');
  return <Component id={id} {...props} />;
};

// https://github.com/gatsbyjs/gatsby/blob/master/www/src/utils/copy-to-clipboard.js
// https://www.freecodecamp.org/news/build-a-developer-blog-from-scratch-with-gatsby-and-mdx/

export const copyToClipboard = str => {
  const clipboard = window.navigator.clipboard;
  /*
   * fallback to older browsers (including Safari)
   * if clipboard API not supported
   */
  if (!clipboard || typeof clipboard.writeText !== `function`) {
    const textarea = document.createElement(`textarea`);
    textarea.value = str;
    textarea.setAttribute(`readonly`, true);
    textarea.setAttribute(`contenteditable`, true);
    textarea.style.position = `absolute`;
    textarea.style.left = `-9999px`;
    document.body.appendChild(textarea);
    textarea.select();
    const range = document.createRange();
    const sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    textarea.setSelectionRange(0, textarea.value.length);
    document.execCommand(`copy`);
    document.body.removeChild(textarea);

    return Promise.resolve();
  }

  return clipboard.writeText(str);
};

export default {
  pre: props => props.children,
  code: props => {
    const [copied, setCopied] = useState(false);

    return (
      <div
        sx={{
          position: 'relative',
          width: '90ch',
          maxWidth: '100%',
        }}
      >
        <button
          sx={{
            appearance: 'none',
            position: 'absolute',
            top: 0,
            right: 0,
            bg: 'transparent',
            border: 'none',
            color: 'white', // assumes dark background syntax theme
            p: 2,
            cursor: 'copy',
            opacity: 0.7,
            borderRadius: 'small',
            fontSize: '0.8em',
            ':focus, :hover': {
              bg: 'rgba(255, 255, 255, 0.1)',
              opacity: 1,
              outline: 'none',
            },
          }}
          onClick={() => {
            const text = String(props.children);
            setCopied(true);
            copyToClipboard(text).then(() => {
              window.setTimeout(() => {
                setCopied(false);
              }, 1500);
            });
          }}
        >
          {copied ? 'Copied!' : 'Copy'}
        </button>
        <Prism {...props} sx={{ maxHeight: '700px', overflow: 'auto' }} />
      </div>
    );
  },
  h1: withId(Styled.h1),
  h2: withId(Styled.h2),
  h3: withId(Styled.h3),
};
