Skip to content

Commit

Permalink
css crimes
Browse files Browse the repository at this point in the history
  • Loading branch information
@thisisjofrank
thisisjofrank committed May 13, 2024
1 parent 97dab9b commit 8343b70
Showing 1 changed file with 102 additions and 61 deletions.
163 changes: 102 additions & 61 deletions src/components/DenoByExample/ByExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ export default function ByExample({ example, examplesList }) {
pathname: id,
},
data: [
parsed
parsed,
content
]
}

Expand All @@ -38,6 +39,29 @@ export default function ByExample({ example, examplesList }) {
>
<h1>By Example</h1>

<style>
{`
code {
padding: 1rem!important;
line-height: 2rem!important;
}
.theme-code-block {
margin: 0!important;
& pre {
border-radius: 0!important;
}
}
.nocopy .clean-btn {
display: none!important;
}
.copy-all {
opacity: 0.5!important;
z-index: 1;
transform: translateY(1rem);
}
`}
</style>

<ExamplePage {...freshProps} />

<Footer />
Expand All @@ -49,11 +73,14 @@ function ExamplePage(props: PageProps<Data>) {
if (props.data === null) {
return <div>404 Example Not Found</div>;
}

const [example, prev, next] = props.data;
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 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.";

Expand Down Expand Up @@ -95,6 +122,9 @@ function ExamplePage(props: PageProps<Data>) {
{example.description && (
<p className="mt-10">{example.description}</p>
)}
<div className="relative block">
<CopyButton text={contentNoCommentary} />
</div>
{example.files.map((file) => (
<div className="mt-10" key={file.name}>
{file.snippets.map((snippet, i) => (
Expand All @@ -109,57 +139,57 @@ function ExamplePage(props: PageProps<Data>) {
</div>
))}
<div>
{example.run && (
<>
<p>
Run{" "}
<a href={url} className="hover:underline focus:underline">
this example
</a>{" "}
locally using the Deno CLI:
</p>
<CodeBlock language="ts">
{example.run.startsWith("deno")
? example.run.replace("<url>", url)
: "deno run " + example.run.replace("<url>", url)}
</CodeBlock>
</>
)}
{example.playground && (
<div className="col-span-3 mt-8">
<p className="text-gray-700">
Try this example in a Deno Deploy playground:
</p>
<p className="mt-3">
<a
className="py-2 px-4 bg-black inline-block text-white text-base rounded-md opacity-90 hover:opacity-100"
href={example.playground}
target="_blank"
rel="noreferrer"
{example.run && (
<>
<p className="mt-10">
Run{" "}
<a href={url} className="hover:underline focus:underline">
this example
</a>{" "}
locally using the Deno CLI:
</p>
<CodeBlock language="ts">
{example.run.startsWith("deno")
? example.run.replace("<url>", url)
: "deno run " + example.run.replace("<url>", url)}
</CodeBlock>
</>
)}
{example.playground && (
<div className="col-span-3 mt-8">
<p className="text-gray-700">
Try this example in a Deno Deploy playground:
</p>
<p className="mt-3">
<a
className="py-2 px-4 bg-black inline-block text-white text-base rounded-md opacity-90 hover:opacity-100"
href={example.playground}
target="_blank"
rel="noreferrer"
>
Deploy
</a>
</p>
</div>
)}
{example.additionalResources.length > 0 && (
<div className="col-span-3 mt-12 pt-6 border-t-1 border-gray-200">
<p>Additional resources:</p>
<ul className="list-disc list-inside mt-1">
{example.additionalResources.map(([link, title]) => (
<li
className="text-gray-700 hover:text-gray-900"
key={link + title}
>
Deploy
</a>
</p>
</div>
)}
{example.additionalResources.length > 0 && (
<div className="col-span-3 mt-12 pt-6 border-t-1 border-gray-200">
<p>Additional resources:</p>
<ul className="list-disc list-inside mt-1">
{example.additionalResources.map(([link, title]) => (
<li
className="text-gray-700 hover:text-gray-900"
key={link + title}
>
<a className="hover:underline focus:underline" href={link}>
{title}
</a>
</li>
))}
</ul>
</div>
)}
</div>
<a className="hover:underline focus:underline" href={link}>
{title}
</a>
</li>
))}
</ul>
</div>
)}
</div>
</main>
</div>
);
Expand All @@ -173,13 +203,12 @@ function SnippetComponent(props: {
}) {

return (
<div className="grid grid-cols-1 sm:grid-cols-10 gap-x-8 transition duration-150 ease-in mb-16">
<div className={`italic mb-4 sm:m-0 select-none text-sm ${props.snippet.code ? 'col-span-3' : 'col-span-full'}`}>
<div className="grid grid-cols-1 sm:grid-cols-10 gap-x-8">
<div className={`italic pt-4 select-none text-xs ${props.snippet.code ? 'col-span-3' : 'col-span-full'}`}>
{props.snippet.text}
</div>
<div
className={`col-span-7 relative ${props.firstOfFile ? "rounded-t-xl" : ""
} ${props.lastOfFile ? "rounded-b-xl" : ""} ${props.snippet.code.length === 0 ? "hidden sm:block" : ""
className={`col-span-7 relative ${props.snippet.code.length === 0 ? "hidden sm:block" : ""
}`}
>
{props.filename && (
Expand All @@ -190,15 +219,27 @@ function SnippetComponent(props: {
{props.filename}
</span>
)}
<div className="relative block sm:hidden">
{/* <CopyButton text={props.snippet.code} /> */}
</div>
<div className="-mx-4 sm:mx-0 overflow-scroll sm:overflow-hidden relative gfm-highlight">
{props.snippet.code && (
<CodeBlock language="ts">{props.snippet.code}</CodeBlock>
<div className="nocopy">
<CodeBlock language="ts">{props.snippet.code}</CodeBlock>
</div>
)}
</div>
</div>
</div>
);
}


export function CopyButton(props: { text: string }) {
return (
<div class="buttonGroup_node_modules-@docusaurus-theme-classic-lib-theme-CodeBlock-Content-styles-module"><button 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>
);
}





//onClick={() => navigator?.clipboard?.writeText(props.text)}

0 comments on commit 8343b70

Please sign in to comment.