add language indicator to the code highlighter
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m32s

This commit is contained in:
Lee 2024-04-22 02:11:41 +01:00
parent 00a5febf66
commit 96dc8de92f
5 changed files with 17 additions and 12 deletions

@ -15,5 +15,4 @@ Sentry.init({
// uncomment the line below to enable Spotlight (https://spotlightjs.com) // uncomment the line below to enable Spotlight (https://spotlightjs.com)
// spotlight: process.env.NODE_ENV === 'development', // spotlight: process.env.NODE_ENV === 'development',
}); });

@ -13,7 +13,6 @@ import {
import { capitalizeFirstLetter } from "@/app/common/string-utils"; import { capitalizeFirstLetter } from "@/app/common/string-utils";
import { notFound } from "next/navigation"; import { notFound } from "next/navigation";
import { GithubLink } from "@/app/components/docs/github-link"; import { GithubLink } from "@/app/components/docs/github-link";
import { CommandMenu } from "@/app/components/command-menu";
type DocumentationPageParams = { type DocumentationPageParams = {
params: { params: {

@ -2,6 +2,8 @@ import { ReactElement } from "react";
import SyntaxHighlighter from "react-syntax-highlighter"; import SyntaxHighlighter from "react-syntax-highlighter";
import createElement from "react-syntax-highlighter/dist/esm/create-element"; import createElement from "react-syntax-highlighter/dist/esm/create-element";
import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"; import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
import { cn } from "@/app/common/utils";
import { capitalizeFirstLetter } from "@/app/common/string-utils";
type CodeHighlighterProps = { type CodeHighlighterProps = {
/** /**
@ -69,18 +71,18 @@ function rowRenderer({
export function CodeHighlighter({ code, language = "json", rounded = true }: CodeHighlighterProps): ReactElement { export function CodeHighlighter({ code, language = "json", rounded = true }: CodeHighlighterProps): ReactElement {
return ( return (
<div className="text-xs md:text-md"> <div className="text-xs md:text-md relative">
{/* Language */}
<div className="absolute top-0 right-0 p-1 bg-muted rounded-bl-md rounded-tr-md">
<span className="text-xs text-muted-foreground">{capitalizeFirstLetter(language)}</span>
</div>
<SyntaxHighlighter <SyntaxHighlighter
className={cn("max-h-[600px] !bg-secondary break-all rounded-md", rounded && "rounded-md")}
language={language} language={language}
style={atomOneDark} style={atomOneDark}
wrapLongLines wrapLongLines
renderer={rowRenderer} renderer={rowRenderer}
customStyle={{
maxHeight: "600px",
backgroundColor: "hsl(var(--secondary))",
wordBreak: "break-all",
borderRadius: rounded ? "0.25rem" : undefined,
}}
> >
{code} {code}
</SyntaxHighlighter> </SyntaxHighlighter>

@ -10,6 +10,11 @@ type CopyButtonProps = {
*/ */
content: string; content: string;
/**
* The message to display when the content is copied.
*/
message?: string | boolean;
/** /**
* The children for this element. * The children for this element.
*/ */
@ -22,7 +27,7 @@ type CopyButtonProps = {
* @param props the properties for the button * @param props the properties for the button
* @returns the copy button * @returns the copy button
*/ */
export function CopyButton({ content, children }: CopyButtonProps): ReactElement { export function CopyButton({ content, message, children }: CopyButtonProps): ReactElement {
const { toast } = useToast(); const { toast } = useToast();
return ( return (
@ -33,7 +38,7 @@ export function CopyButton({ content, children }: CopyButtonProps): ReactElement
title: "Copied!", title: "Copied!",
description: ( description: (
<p> <p>
Copied <b>{content}</b> to your clipboard. Copied <b>{!message ? content : message}</b> to your clipboard.
</p> </p>
), ),
duration: 5000, duration: 5000,

@ -2,7 +2,7 @@
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { ReactElement, useEffect, useState } from "react"; import { ReactElement } from "react";
import { HrefButton } from "./href-button"; import { HrefButton } from "./href-button";
import Logo from "./logo"; import Logo from "./logo";
import { ToggleThemeButton } from "./theme-toggle-button"; import { ToggleThemeButton } from "./theme-toggle-button";