koba04 · koba04 · May 15, 2022 · Dec 30, 2021 · Jan 11, 2022 · May 15, 2022
diff --git a/examples/swr-devtools-demo/components/DevToolsView.tsx b/examples/swr-devtools-demo/components/DevToolsView.tsx
@@ -0,0 +1,17 @@
+import { useSWRConfig } from "swr";
+import { SWRDevToolPanel } from "swr-devtools-panel";
+
+// The way to use SWR DevTools as a React Component
+export const DevToolsView = () => {
+  const { cache } = useSWRConfig();
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "400px",
+      }}
+    >
+      <SWRDevToolPanel cache={cache} />
+    </div>
+  );
+};
diff --git a/examples/swr-devtools-demo/package.json b/examples/swr-devtools-demo/package.json
@@ -13,6 +13,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "styled-components": "^5.3.0",
+    "sugar-high": "^0.4.2",
     "swr": "^1.1.0"
   },
   "devDependencies": {

diff --git a/examples/swr-devtools-demo/pages/_app.tsx b/examples/swr-devtools-demo/pages/_app.tsx
@@ -1,24 +1,6 @@
 import "../styles/globals.css";
-import { SWRConfig, useSWRConfig } from "swr";
+import { SWRConfig } from "swr";
 import { SWRDevTools } from "swr-devtools";
-import { SWRDevToolPanel } from "swr-devtools-panel";
-
-// The way to use SWR DevTools as a React Component
-const DevToolsArea = () => {
-  const { cache } = useSWRConfig();
-  return (
-    <div
-      style={{
-        position: "fixed",
-        bottom: 0,
-        width: "100%",
-        height: "400px",
-      }}
-    >
-      <SWRDevToolPanel cache={cache} />
-    </div>
-  );
-};
 
 const fetcher = async (url) => {
   const res = await fetch(url);
@@ -34,7 +16,6 @@ function MyApp({ Component, pageProps }) {
     <SWRConfig value={{ fetcher }}>
       <SWRDevTools>
         <Component {...pageProps} />
-        <DevToolsArea />
       </SWRDevTools>
     </SWRConfig>
   );

diff --git a/examples/swr-devtools-demo/pages/index.tsx b/examples/swr-devtools-demo/pages/index.tsx
@@ -1,8 +1,10 @@
 import Head from "next/head";
 import Link from "next/link";
+import { highlight } from "sugar-high";
 import styles from "../styles/Home.module.css";
 import useSWR from "swr";
 import { useEffect } from "react";
+import { DevToolsView } from "../components/DevToolsView";
 
 export default function Home() {
   // const { data, mutate } = useSWR("/api/hello?error=true");
@@ -21,13 +23,104 @@ export default function Home() {
   return (
     <div className={styles.container}>
       <Head>
-        <title>SWR DevTools Demo</title>
+        <title>SWR DevTools</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
       <main className={styles.main}>
+        <header className={styles.header}>
+          <h1 className={styles.title}>SWR DevTools</h1>
+          <p className={styles.paragraph}>
+            A devtools for{" "}
+            <a href="https://swr.vercel.app/" target="_blank" rel="noreferrer">
+              SWR
+            </a>
+            &nbsp;to enable you to inspect your SWR cache data.
+          </p>
+        </header>
+        <section className={styles.section}>
+          <h2 className={styles.subTitle}>Download</h2>
+          <p className={styles.paragraph}>
+            You can download SWRDevTools extensions at the following.
+          </p>
+          <ul className={styles.list}>
+            <li>
+              <a
+                href="https://chrome.google.com/webstore/detail/swr-devtools/liidbicegefhheghhjbomajjaehnjned"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Chrome
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://addons.mozilla.org/en-US/firefox/addon/swr-devtools/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Firefox
+              </a>
+            </li>
+          </ul>
+        </section>
+        <section className={styles.section}>
+          <h2 className={styles.subTitle}>How to use</h2>
+          <p>
+            First, you can install <code>swr-devtools</code> and wrap your app
+            with the <code>SWRDevTools</code> component
+          </p>
+          <pre>
+            <code
+              dangerouslySetInnerHTML={{
+                __html: highlight(`
+import ReactDOM from "react-dom";
+import { SWRDevTools } from "swr-devtools";
+
+ReactDOM.render(
+  <SWRDevTools>
+    <MainApp />
+  </SWRDevTools>,
+  document.getElementById("app")
+);
+          `),
+              }}
+            />
+          </pre>
+          <p>
+            Then, open the SWR Devtools from the browser&apos;s developer tools
+          </p>
+        </section>
+        <section className={styles.section}>
+          <h2 className={styles.subTitle}>Online Demo</h2>
+          <div className={styles.demo}>
+            <h3>App</h3>
+            <div className={styles.demoApp}>
+              <p className={styles.row}>
+                <span className={styles.cacheKey}>/api/hello</span>
+                {!data && !error && <span>...loading</span>}
+                {data && <span>{data.name}</span>}
+                {error && <span>Error: {error.message}</span>}
+                <span className={styles.note}>
+                  (auto increment in 5 seconds)
+                </span>
+              </p>
+              <p className={styles.row}>
+                <span className={styles.cacheKey}>/api/hello?foo</span>
+                <span>{data2 ? data2.name : "...loading"}</span>
+              </p>
+            </div>
+            <DevToolsView />
+          </div>
+        </section>
+        <nav className={styles.nav}>
+          You can check{" "}
+          <Link href="/infinite">an example with useSWRInfinte</Link>.
+        </nav>
+      </main>
+      <footer className={styles.footer}>
         <p>
-          <h1 className={styles.title}>SWR DevTools Demo</h1>
+          SWR DevTools&nbsp;
           <a
             href="https://github.com/koba04/swr-devtools"
             target="_blank"
@@ -36,25 +129,6 @@ export default function Home() {
             koba04/swr-devtools
           </a>
         </p>
-        <section>
-          <p className={styles.row}>
-            <span className={styles.cacheKey}>/api/hello</span>
-            {!data && !error && <span>...loading</span>}
-            {data && <span>{data.name}</span>}
-            {error && <span>Error: {error.message}</span>}
-            <span className={styles.note}>(auto increment in 5 seconds)</span>
-          </p>
-          <p className={styles.row}>
-            <span className={styles.cacheKey}>/api/hello?foo</span>
-            <span>{data2 ? data2.name : "...loading"}</span>
-          </p>
-        </section>
-        <nav className={styles.nav}>
-          <Link href="/infinite">/infinite</Link>
-        </nav>
-      </main>
-      <footer>
-        <p>SWR DevTools</p>
       </footer>
     </div>
   );

diff --git a/examples/swr-devtools-demo/pages/infinite.tsx b/examples/swr-devtools-demo/pages/infinite.tsx
@@ -1,6 +1,7 @@
 import Head from "next/head";
 import Link from "next/link";
 import useSWRInfinite from "swr/infinite";
+import { DevToolsView } from "../components/DevToolsView";
 
 import styles from "../styles/infinite.module.css";
 
@@ -40,12 +41,13 @@ export default function Home() {
           </div>
         </section>
         <nav className={styles.nav}>
-          <Link href="/">/index</Link>
+          <Link href="/">Top</Link>
         </nav>
       </main>
       <footer>
         <p>SWR DevTools</p>
       </footer>
+      <DevToolsView />
     </div>
   );
 }
diff --git a/examples/swr-devtools-demo/styles/Home.module.css b/examples/swr-devtools-demo/styles/Home.module.css
@@ -1,19 +1,28 @@
 .container {
   min-height: 100vh;
-  padding: 0 0.5rem;
-  display: flex;
+  padding: 0;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 
 .main {
+  width: 80%;
+  margin: 0 auto;
   padding: 0;
-  flex: 1;
+}
+
+.header {
+  text-align: center;
+
+}
+
+.header > h1 {
+  width: 100%;
+  margin: 0.2rem 0.5rem;
 }
 
 .row {
-  font-size: 1.2rem;
   display: grid;
   grid-template-columns: 1fr 1fr 2fr;
   gap: 0.4rem;
@@ -25,15 +34,50 @@
   font-weight: bold;
 }
 
-.nav {
-  font-size: 1.2rem;
-  text-align: center;
+.subTitle {
+  font-size: 1.8rem;
+  margin: 1rem 0;
+  border-bottom: solid 1px rgba(128 128 128 / 20%)
+}
+
+.paragraph {
+  margin: 0.2rem 0;
 }
 
 .title {
   display: inline-block;
   padding-inline-end: 1rem;
   line-height: 1.15;
   font-size: 3rem;
+  font-weight: bold;
   text-align: center;
 }
+
+.list {
+  margin: 0.5rem 0 0 1.2rem;
+  line-height: 1.5;
+}
+
+.section {
+  margin: 2rem 0;
+}
+
+.demo {
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  background-color: #fff;
+  width: 100%;
+}
+
+.demo > h3 {
+  margin: 0.3rem;
+  padding-top: 0.3rem;
+}
+
+.demoApp {
+  padding: 0.3rem;
+}
+
+.footer {
+  text-align: center;;
+}
diff --git a/examples/swr-devtools-demo/styles/globals.css b/examples/swr-devtools-demo/styles/globals.css
@@ -4,7 +4,29 @@ body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  background-color: #fafafa;
 }
 ul {
   padding: 0;
+}
+
+/**
+ * Types that sugar-high have:
+ *
+ * identifier
+ * keyword
+ * string
+ * Class, number and null
+ * sign
+ * comment
+ * jsxliterals
+ */
+ :root {
+  --sh-class: #2d5e9d;
+  --sh-identifier: #354150;
+  --sh-sign: #8996a3;
+  --sh-string: #00a99a;
+  --sh-keyword: #f47067;
+  --sh-comment: #a19595;
+  --sh-jsxliterals: #6266d1;
 }
diff --git a/examples/swr-devtools-demo/styles/infinite.module.css b/examples/swr-devtools-demo/styles/infinite.module.css
@@ -1,6 +1,6 @@
 .container {
   min-height: 100vh;
-  padding: 0 0.5rem;
+  padding: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;

diff --git a/yarn.lock b/yarn.lock
@@ -8060,6 +8060,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
   integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
 
+sugar-high@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/sugar-high/-/sugar-high-0.4.2.tgz#9e64f857a688d18d35bbbf941ce118915e8c02cf"
+  integrity sha512-4aJiio7I2d+bUu6vDytG4EvBAmInyF4dbiaQXrzXL4qcsk1RVPocg+8z/jTXEsvIWuTQ9abImrIummVKReZqGA==
+
 supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"