chore: updated demo (added links to github and npm install)

custom-types.d.ts

@@ -1,2 +1,10 @@
 // Support css-modules `import * as "./path-to-file/style.css"`
-declare module '*.module.css';
+declare module '*.module.css' {
+  const content: Record<string, string>;
+  export = content;
+}
+
+declare module "*.svg" {
+  const content: string;
+  export = content; // base64 data-url, see also `webpack.config.ts`
+}

src/demo-table.tsx

@@ -4,6 +4,7 @@ import { action } from "mobx"
 import { observer } from "mobx-react"
 import { Table } from "./table";
 import { DemoTableState } from "./demo-table-state";
+import GithubIcon from "../public/github.svg";
 
 export const DemoTable = observer((props: { store: DemoTableState }) => {
   const {
@@ -14,10 +15,32 @@ export const DemoTable = observer((props: { store: DemoTableState }) => {
   } = props.store;
 
   const totalItemsCount = new Intl.NumberFormat().format(tableRowsMap.get().size);
+  const [copied, setCopied] = React.useState(false);
+
+  const copyInstallToBufferFromEvent = async (event: React.MouseEvent) => {
+    try {
+      await navigator.clipboard.writeText((event.target as HTMLHtmlElement).innerText);
+      setCopied(true);
+    } catch (err) {
+      window.alert(`Could not copy to clipboard: ${err}`);
+    } finally {
+      setTimeout(() => setCopied(false), 2500);
+    }
+  };
 
   return (
     <>
       <h1>Mobx-React CSS Grid Table (demo: {totalItemsCount} items)</h1>
+      <div className={styles.install}>
+        <h2>Install via NPM:</h2>
+        <div>
+          <code onClick={copyInstallToBufferFromEvent}> npm i mobx-react-table-grid</code>
+          {copied && <span className={styles.copied}> (copied)</span>}
+        </div>
+        <a href="https://github.com/ixrock/mobx-react-table-grid" target="_blank" className={styles.githubIcon}>
+          <img src={GithubIcon} width={20} height={20} alt="Github sources"/>
+        </a>
+      </div>
       <input
         autoFocus
         placeholder="Search"

src/demo.module.css

@@ -191,4 +191,37 @@ input {
 .searchText {
   padding: .35em;
   margin: 0 10%;
+}
+
+.githubIcon {
+  filter: invert(100%);
+  opacity: .85;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.install {
+  padding: 10px;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+}
+
+code {
+  opacity: .75;
+  transition: 150ms opacity;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.copied {
+  font-size: small;
+  font-style: italic;
+  color: white;
 }

webpack.config.ts

@@ -94,6 +94,10 @@ export default function webpackConfig(env: { demo?: boolean } = {}): webpack.Con
           test: /\.(png|jpe?g|gif|svg)$/i,
           type: 'asset',
         },
+        {
+          test: /\.svg$/,
+          type: "asset/inline" // data:image/svg+xml;base64,...
+        },
       ],
     },
     plugins: [