From b0173f87e5f89fb4529b5188d2b39c7ab6af9150 Mon Sep 17 00:00:00 2001 From: RodrigoEC Date: Mon, 2 Sep 2024 11:58:04 -0300 Subject: [PATCH] Adds hightligh to glossary code examples --- .deco/blocks/Dark%20.json | 24 +++++ deno.json | 3 +- fresh.gen.ts | 2 + islands/Glossary/Content.tsx | 46 ++++++++ sections/Glossary/GlossaryPost.tsx | 165 ++++++++++++++--------------- 5 files changed, 152 insertions(+), 88 deletions(-) create mode 100644 .deco/blocks/Dark%20.json create mode 100644 islands/Glossary/Content.tsx diff --git a/.deco/blocks/Dark%20.json b/.deco/blocks/Dark%20.json new file mode 100644 index 00000000..d2612fcc --- /dev/null +++ b/.deco/blocks/Dark%20.json @@ -0,0 +1,24 @@ +{ + "__resolveType": "site/sections/Theme/Theme.tsx", + "buttonStyle": { + "--border-btn": "1px", + "--rounded-btn": "0.2rem", + "--btn-focus-scale": 0.95, + "--animation-btn": "0.25s" + }, + "otherStyles": { + "--rounded-box": "1rem", + "--rounded-badge": "1.9rem", + "--animation-input": "0.2s", + "--tab-border": "1px", + "--tab-radius": "0.5rem" + }, + "mainColors": { + "primary": "#FFFFFF", + "base-100": "#030806", + "secondary": "#02F67C", + "tertiary": "#C9CFCF" + }, + "complementaryColors": { "base-200": "#162121" }, + "colorScheme": "dark" +} diff --git a/deno.json b/deno.json index 9fb3094d..10198d5b 100644 --- a/deno.json +++ b/deno.json @@ -43,7 +43,8 @@ "@std/testing": "jsr:@std/testing@^1.0.0", "@zaubrik/djwt": "jsr:@zaubrik/djwt@^3.0.2", "fast-json-patch": "npm:fast-json-patch@^3.1.1", - "simple-git": "npm:simple-git@^3.25.0" + "simple-git": "npm:simple-git@^3.25.0", + "hightlight.js": "npm:highlight.js@11.10.0" }, "tasks": { "start": "deno run -A --unstable-http --env https://deco.cx/run -- deno task dev", diff --git a/fresh.gen.ts b/fresh.gen.ts index b0b804cc..a25e8d72 100644 --- a/fresh.gen.ts +++ b/fresh.gen.ts @@ -28,6 +28,7 @@ import * as $Cms from "./islands/Cms.tsx"; import * as $ContactUs from "./islands/ContactUs.tsx"; import * as $FaviconImage from "./islands/FaviconImage.tsx"; import * as $ForwardBackButtons_ForwardBackButtons from "./islands/ForwardBackButtons/ForwardBackButtons.tsx"; +import * as $Glossary_Content from "./islands/Glossary/Content.tsx"; import * as $Glossary_Search from "./islands/Glossary/Search.tsx"; import * as $Graph from "./islands/Graph.tsx"; import * as $Header from "./islands/Header.tsx"; @@ -97,6 +98,7 @@ const manifest = { "./islands/FaviconImage.tsx": $FaviconImage, "./islands/ForwardBackButtons/ForwardBackButtons.tsx": $ForwardBackButtons_ForwardBackButtons, + "./islands/Glossary/Content.tsx": $Glossary_Content, "./islands/Glossary/Search.tsx": $Glossary_Search, "./islands/Graph.tsx": $Graph, "./islands/Header.tsx": $Header, diff --git a/islands/Glossary/Content.tsx b/islands/Glossary/Content.tsx new file mode 100644 index 00000000..379ee3fe --- /dev/null +++ b/islands/Glossary/Content.tsx @@ -0,0 +1,46 @@ +import { Head } from "$fresh/runtime.ts"; +import hljs from "hightlight.js"; +import { useEffect, useRef } from "preact/hooks"; + +const PARAGRAPH_STYLES = "[&_p]:leading-[150%] [&_*]:mb-4 text-[#cdcdcd]"; +const HEADING_STYLES = + "[&>h1]:text-white [&>h1]:text-4xl [&>h1]:my-6 [&>h1]:font-bold [&>h2]:text-white [&>h2]:text-3xl [&>h2]:my-6 [&>h2]:font-bold [&>h1]:text-2xl [&>h1]:my-6 [&>h1]:font-bold [&>h3]:text-white [&>h3]:text-2xl [&>h3]:font-bold [&>h4]:text-xl [&>h4]:text-white [&>h4]:my-6 [&>h4]:font-bold [&>h5]:text-lg [&>h5]:text-white [&>h5]:my-6 [&>h5]:font-bold [&>h6]:text-white [&>h6]:my-6 [&>h6]:font-bold"; +const CODE_BLOCK_STYLES = + "[&>pre]:bg-gray-100 [&>pre]:text-white [&_code]:mb-0 [&>pre]:text-wrap [&>code]:p-4 [&>pre]:font-mono [&>pre]:text-sm [&>pre]:border-2 [&>pre]:border-[#ffffff26] [&>pre]:rounded-md [&>pre]:overflow-x-auto [&>pre]:bg-transparent [&>code]:block [&>code]:w-full"; +const IMAGE_STYLES = "[&_img]:rounded-2xl [&_img]:w-full [&_img]:my-12"; +const BLOCKQUOTE_STYLES = + "[&>blockquote]:my-6 [&>blockquote]:border-l-2 [&>blockquote]:border-black [&>blockquote]:text-xl [&>blockquote]:italic [&>blockquote]:pl-6"; + +const CONTENT_STYLES = `code-container ${PARAGRAPH_STYLES} ${HEADING_STYLES} ${CODE_BLOCK_STYLES} ${IMAGE_STYLES} ${BLOCKQUOTE_STYLES}`; + +export default function Content({ content }: { content: string }) { + const container = useRef(null); + + useEffect(() => { + if (container.current) { + container.current.innerHTML = content; + + container.current.querySelectorAll("pre code").forEach((block) => { + return hljs.highlightBlock(block); + }); + } + }, [content, container]); + + return ( + <> + + + +
+ + ); +} diff --git a/sections/Glossary/GlossaryPost.tsx b/sections/Glossary/GlossaryPost.tsx index 68529476..85f8b826 100644 --- a/sections/Glossary/GlossaryPost.tsx +++ b/sections/Glossary/GlossaryPost.tsx @@ -3,6 +3,8 @@ import Image from "apps/website/components/Image.tsx"; import type { RequestURLParam } from "apps/website/functions/requestToParam.ts"; import Icon, { AvailableIcons } from "site/components/ui/Icon.tsx"; import GlossaryItem from "site/components/Glossary/GlossaryItem.tsx"; +import Content from "site/islands/Glossary/Content.tsx"; +import { Head } from "$fresh/runtime.ts"; /** * @title {{{text}}} @@ -34,17 +36,6 @@ interface Props { disclaimer?: Disclaimer; } -const PARAGRAPH_STYLES = "[&_p]:leading-[150%] [&_*]:mb-4 text-[#cdcdcd]"; -const HEADING_STYLES = - "[&>h1]:text-white [&>h1]:text-4xl [&>h1]:my-6 [&>h1]:font-bold [&>h2]:text-white [&>h2]:text-3xl [&>h2]:my-6 [&>h2]:font-bold [&>h1]:text-2xl [&>h1]:my-6 [&>h1]:font-bold [&>h3]:text-white [&>h3]:text-2xl [&>h3]:font-bold [&>h4]:text-xl [&>h4]:text-white [&>h4]:my-6 [&>h4]:font-bold [&>h5]:text-lg [&>h5]:text-white [&>h5]:my-6 [&>h5]:font-bold [&>h6]:text-white [&>h6]:my-6 [&>h6]:font-bold"; -const CODE_BLOCK_STYLES = - "[&>pre]:bg-gray-100 [&>pre]:text-white [&>pre]:p-4 [&>pre]:font-mono [&>pre]:text-sm [&>pre]:border [&>pre]:rounded-md [&>pre]:overflow-x-auto [&>pre]:bg-transparent [&>code]:block [&>code]:w-full"; -const IMAGE_STYLES = "[&_img]:rounded-2xl [&_img]:w-full [&_img]:my-12"; -const BLOCKQUOTE_STYLES = - "[&>blockquote]:my-6 [&>blockquote]:border-l-2 [&>blockquote]:border-black [&>blockquote]:text-xl [&>blockquote]:italic [&>blockquote]:pl-6"; - -const CONTENT_STYLES = ` ${PARAGRAPH_STYLES} ${HEADING_STYLES} ${CODE_BLOCK_STYLES} ${IMAGE_STYLES} ${BLOCKQUOTE_STYLES}`; - const DEFAULT_AVATAR = "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/1527/7286de42-e9c5-4fcb-ae8b-b992eea4b78e"; @@ -190,89 +181,89 @@ export default function GlossaryPost({ slug, posts, CTA, disclaimer }: Props) { } }); - console.log(content); - return ( -
-
-
- {title} - -
- + + - -
-
- - - {CTA.text} - -

{title}

-
-
- -
-
-

- {excerpt} -

+ +
+
+
+ {title} +
- {image && ( - - )} -
- -
- {disclaimer?.title} - {disclaimer?.subtitle && ( - +
+ + + {CTA.text} + +

{title}

+
+
+ +
+
+

+ {excerpt} +

+
+ {image && ( + )} -
-
- - + +
+ {disclaimer?.title} + {disclaimer?.subtitle && ( +
+ )} +
+
+ + +
-
+ ); }