fix formatting of copy button, remove console log, reorder basic list (…

…#463) Co-authored-by: Yoshiya Hinosawa <stibium121@gmail.com>
denoland · May 17, 2024 · 2aaa9cf · 2aaa9cf
1 parent a4a9cda
commit 2aaa9cf
Show file tree

Hide file tree

Showing 6 changed files with 200 additions and 125 deletions.
diff --git a/by-example/hello-world.ts b/by-example/hello-world.ts
@@ -0,0 +1,18 @@
+/**
+ * @title Hello World
+ * @difficulty beginner
+ * @tags cli, deploy, web
+ * @run <url>
+ * @resource {https://docs.deno.com/runtime/manual/getting_started/installation} Deno: Installation
+ * @resource {https://docs.deno.com/runtime/manual/getting_started/setup_your_environment} Manual: Set up your environment
+ * @group Basics
+ * @sortOrder 0
+ */
+
+// The one and only line in this program will print "Hello, World!" to the
+// console.
+console.log("Hello, World!");
+
+// Deno programs can either be written in JavaScript or TypeScript, or a mixture
+// of both. All code in these examples is written in TypeScript, but all the
+// examples also work in JavaScript.
diff --git a/src/components/DenoByExample/ByExample.tsx b/src/components/DenoByExample/ByExample.tsx
@@ -1,7 +1,12 @@
 import React from "react";
 import Layout from "@theme/Layout";
 import Footer from "@theme/Footer";
-import { parseExample, DIFFICULTIES, TAGS, ExampleSnippet } from '../../plugins/deno-by-example/example';
+import {
+  DIFFICULTIES,
+  ExampleSnippet,
+  parseExample,
+  TAGS,
+} from "../../plugins/deno-by-example/example";
 import CodeBlock from "@theme/CodeBlock";
 
 export default function ByExample({ example, examplesList }) {
@@ -28,9 +33,9 @@ export default function ByExample({ example, examplesList }) {
     },
     data: [
       parsed,
-      content
-    ]
-  }
+      content,
+    ],
+  };
 
   return (
     <Layout
@@ -40,7 +45,7 @@ export default function ByExample({ example, examplesList }) {
       <h1>By Example</h1>
 
       <style>
-        {/*css*/`
+        {/*css*/ `
           pre { --ifm-pre-line-height: 1.7em; }
           code {
             --ifm-pre-padding: 1.5rem 1rem;
@@ -82,23 +87,26 @@ function ExamplePage(props: PageProps<Data>) {
   if (props.data === null) {
     return <div>404 Example Not Found</div>;
   }
-  console.log(props);
   const [example, content] = props.data;
-  const url = `${props.url.origin}${props.url.pathname}${example.files.length > 1 ? "/main" : ""
-    }`;
-
-  const contentNoCommentary = example.files.map((file) => file.snippets.map((snippet) => snippet.code).join("\n")).join("\n");
+  const url = `${props.url.origin}${props.url.pathname}${
+    example.files.length > 1 ? "/main" : ""
+  }`;
 
+  const contentNoCommentary = example.files.map((file) =>
+    file.snippets.map((snippet) => snippet.code).join("\n")
+  ).join("\n");
 
   const description = (example.description || example.title) +
     " -- Deno by example is a collection of annotated examples for how to use Deno, and the various features it provides.";
 
   return (
     <div className="Page" title={`${example.title} - Deno by Example`}>
-      {/* <Head>
+      {
+        /* <Head>
         <link rel="stylesheet" href="/gfm.css" />
         <meta name="description" content={description} />
-      </Head> */}
+      </Head> */
+      }
       <main className="max-w-screen-lg mx-auto p-4">
         <div className="flex gap-2 items-center">
           <p
@@ -128,9 +136,7 @@ function ExamplePage(props: PageProps<Data>) {
             Edit
           </a>
         </div>
-        {example.description && (
-          <p className="mt-10">{example.description}</p>
-        )}
+        {example.description && <p className="mt-10">{example.description}</p>}
         <div className="relative block">
           <CopyButton text={contentNoCommentary} />
         </div>
@@ -210,20 +216,25 @@ function SnippetComponent(props: {
   lastOfFile: boolean;
   snippet: ExampleSnippet;
 }) {
-
   return (
     <div className="grid grid-cols-1 sm:grid-cols-10 gap-x-8">
-      <div className={`italic select-none text-xs ${props.snippet.text ? "pt-[2.2rem] md:pt-9 pb-4 md:pb-0 " : " "} ${props.snippet.code ? 'col-span-3' : 'col-span-full'}`}>
+      <div
+        className={`italic select-none text-xs ${
+          props.snippet.text ? "pt-[2.2rem] md:pt-9 pb-4 md:pb-0 " : " "
+        } ${props.snippet.code ? "col-span-3" : "col-span-full"}`}
+      >
         {props.snippet.text}
       </div>
       <div
-        className={`col-span-7 relative ${props.snippet.code.length === 0 ? "hidden sm:block" : ""
-          }`}
+        className={`col-span-7 relative ${
+          props.snippet.code.length === 0 ? "hidden sm:block" : ""
+        }`}
       >
         {props.filename && (
           <span
-            className={`font-mono text-xs absolute -top-3 left-4 bg-[var(--ifm-code-background)] z-10 p-1 rounded-sm ${props.firstOfFile ? "block" : "block sm:hidden"
-              }`}
+            className={`font-mono text-xs absolute -top-3 left-4 bg-[var(--ifm-code-background)] z-10 p-1 rounded-sm ${
+              props.firstOfFile ? "block" : "block sm:hidden"
+            }`}
           >
             {props.filename}
           </span>
@@ -240,9 +251,22 @@ function SnippetComponent(props: {
   );
 }
 
-
 export function CopyButton(props: { text: string }) {
   return (
-    <div className="buttonGroup_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-Content-styles-module"><button onClick={() => navigator?.clipboard?.writeText(props.text)} type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn copy-all"><span class="copyButtonIcons_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-CopyButton-styles-module" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-CopyButton-styles-module"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-CopyButton-styles-module"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div>
+    <button
+      onClick={() => navigator?.clipboard?.writeText(props.text)}
+      type="button"
+      aria-label="Copy code to clipboard"
+      title="Copy"
+      className="clean-btn copy-all absolute right-2 top-2 bg-gray-100 hover:bg-gray-200 text-gray-900 px-2 py-1 rounded-md "
+    >
+      <svg viewBox="0 0 24 24" width="15" height="15">
+        <path
+          fill="currentColor"
+          d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
+        >
+        </path>
+      </svg>
+    </button>
   );
 }
diff --git a/src/components/DenoByExample/Sidebar.tsx b/src/components/DenoByExample/Sidebar.tsx
@@ -1,27 +1,38 @@
 export default function Sidebar({ examplesList }) {
-
-    const listElements = examplesList.map((example) => {
-        return (
-            <li key={example.id} className="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
-                <a href={"/" + example.id} className="menu__link menu__link--active" aria-current="page" >{example.label}</a>
-            </li>
-        );
-    });
-
+  const listElements = examplesList.map((example) => {
     return (
-        <aside className="theme-doc-sidebar-container docSidebarContainer_node_modules-@docusaurus-theme-classNameic-lib-theme-DocRoot-Layout-Sidebar-styles-module">
-            <div className="sidebarViewport_node_modules-@docusaurus-theme-classNameic-lib-theme-DocRoot-Layout-Sidebar-styles-module">
-                <div className="sidebar_node_modules-@docusaurus-theme-classNameic-lib-theme-DocSidebar-Desktop-styles-module">
-                    <nav aria-label="Docs sidebar" className="menu thin-scrollbar menu_node_modules-@docusaurus-theme-classNameic-lib-theme-DocSidebar-Desktop-Content-styles-module">
-                        <ul className="theme-doc-sidebar-menu menu__list">
-                            <li className="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 section-header">
-                                <div>Getting Started</div>
-                            </li>
-                            {listElements}
-                        </ul>
-                    </nav>
-                </div>
-            </div>
-        </aside>);
+      <li
+        key={example.id}
+        className="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"
+      >
+        <a
+          href={"/" + example.id}
+          className="menu__link menu__link--active"
+          aria-current="page"
+        >
+          {example.label}
+        </a>
+      </li>
+    );
+  });
 
+  return (
+    <aside className="theme-doc-sidebar-container docSidebarContainer_node_modules-@docusaurus-theme-classNameic-lib-theme-DocRoot-Layout-Sidebar-styles-module">
+      <div className="sidebarViewport_node_modules-@docusaurus-theme-classNameic-lib-theme-DocRoot-Layout-Sidebar-styles-module">
+        <div className="sidebar_node_modules-@docusaurus-theme-classNameic-lib-theme-DocSidebar-Desktop-styles-module">
+          <nav
+            aria-label="Docs sidebar"
+            className="menu thin-scrollbar menu_node_modules-@docusaurus-theme-classNameic-lib-theme-DocSidebar-Desktop-Content-styles-module"
+          >
+            <ul className="theme-doc-sidebar-menu menu__list">
+              <li className="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 section-header">
+                <div>Getting Started</div>
+              </li>
+              {listElements}
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </aside>
+  );
 }