From f190dd3ff078ed2133e98e995a1f22a42514d2d2 Mon Sep 17 00:00:00 2001 From: Arnab Chakraborty <11457760+Rocky43007@users.noreply.github.com> Date: Wed, 27 Mar 2024 00:39:02 -0400 Subject: [PATCH] Copy button for code blocks (#2248) * feat: Copy button for code blocks Just a basic copy button in the code blocks so users can copy commands more easily. Inspired by Github's copy button. * feat: Add Info for Image Cycler A small little tooltip type text letting the user know that the image on the main page can be cycled through when hovered on. * fix: Spelling mistake lol * fix: Make button bigger so it looks centered Make it look centered on one line big code blocks. * fix: Tailwind Linting --- apps/landing/src/app/page.tsx | 61 ++++++++++++----------- apps/landing/src/components/mdx/Pre.tsx | 37 ++++++++++++++ apps/landing/src/components/mdx/index.tsx | 4 +- apps/landing/src/styles/prism.css | 7 +++ 4 files changed, 80 insertions(+), 29 deletions(-) create mode 100644 apps/landing/src/components/mdx/Pre.tsx diff --git a/apps/landing/src/app/page.tsx b/apps/landing/src/app/page.tsx index 1c4bdc38f..2df3c3757 100644 --- a/apps/landing/src/app/page.tsx +++ b/apps/landing/src/app/page.tsx @@ -6,6 +6,7 @@ import { getLatestRelease, getReleaseFrontmatter, githubFetch } from './api/gith import { Background } from './Background'; import { Downloads } from './Downloads'; import { NewBanner } from './NewBanner'; +import { ArrowUp } from '@phosphor-icons/react/dist/ssr'; export const metadata = { title: 'Spacedrive — A file manager from the future.', @@ -77,34 +78,38 @@ export default async function Page() { src="/images/app/gradient.webp" />
-
- - l +
+
+ + l +
+ +

Hover on the image above to see how the app works!

diff --git a/apps/landing/src/components/mdx/Pre.tsx b/apps/landing/src/components/mdx/Pre.tsx new file mode 100644 index 000000000..bd4bf7ed6 --- /dev/null +++ b/apps/landing/src/components/mdx/Pre.tsx @@ -0,0 +1,37 @@ +"use client"; +import { Check } from '@phosphor-icons/react'; +import { Copy } from '@phosphor-icons/react/dist/ssr'; +import { useState, useRef, FC } from 'react' + +const Pre: FC<{ children: React.ReactNode }> = ({ children }) => { + const textInput = useRef(null) + const [copied, setCopied] = useState(false) + + const onCopy = () => { + setCopied(true) + navigator.clipboard.writeText(textInput.current!.textContent ?? '') + setTimeout(() => { + setCopied(false) + }, 2000) + } + + return ( +
+ + 
{children}
+
+ ) +} + +export default Pre diff --git a/apps/landing/src/components/mdx/index.tsx b/apps/landing/src/components/mdx/index.tsx index d908f42b9..3030a0249 100644 --- a/apps/landing/src/components/mdx/index.tsx +++ b/apps/landing/src/components/mdx/index.tsx @@ -4,6 +4,7 @@ import { env } from '~/env'; import Notice from './Notice'; import Video from './Video'; +import Pre from './Pre'; const Image = (props: ImageProps) => ( ( export const BlogMDXComponents = { img: Image, // we remap 'img' to 'Image' + pre: Pre, Image, Video } as MDXComponents; -export const DocMDXComponents = { img: Image, Image, Notice, Video } as MDXComponents; +export const DocMDXComponents = { img: Image, Image, Notice, Video, pre: Pre } as MDXComponents; diff --git a/apps/landing/src/styles/prism.css b/apps/landing/src/styles/prism.css index b8457e47e..71e45de76 100644 --- a/apps/landing/src/styles/prism.css +++ b/apps/landing/src/styles/prism.css @@ -74,6 +74,13 @@ pre[class*='language-'] { border-radius: 0.3em; } +pre.language-container { + padding: 1.1em; + margin: 0.5em 0; + overflow: auto; + border-radius: 0.3em; +} + /* Inline code */ :not(pre) > code[class*='language-'] { padding: 0.2em 0.3em;