Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix formatting of copy button, remove console log, reorder basic list #463

Merged
merged 7 commits into from
May 17, 2024
Merged

fix formatting of copy button, remove console log, reorder basic list #463

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
655c090
fix formatting of copy button, remove console log, reorder basic list
thisisjofrank May 16, 2024
0780856
classname for copy button
thisisjofrank May 16, 2024
9c59cca
fix copy button
thisisjofrank May 16, 2024
31800f5
rename file
thisisjofrank May 16, 2024
049e1a8
match svg
thisisjofrank May 17, 2024
f6fc5e0
ordering
thisisjofrank May 17, 2024
6a74947
fmt
kt3k May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions by-example/hello-world.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
70 changes: 47 additions & 23 deletions src/components/DenoByExample/ByExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }) {
Expand All @@ -28,9 +33,9 @@ export default function ByExample({ example, examplesList }) {
},
data: [
parsed,
content
]
}
content,
],
};

return (
<Layout
Expand All @@ -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;
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
);
}
57 changes: 34 additions & 23 deletions src/components/DenoByExample/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
Loading
Loading