From 4d35f42dbb561ea8a4f72b93fdf3d360af9df44c Mon Sep 17 00:00:00 2001 From: Arno V Date: Mon, 18 Mar 2024 11:19:40 -0400 Subject: [PATCH] docs: better code highlight with Prism - take 2 (#429) ## Summary by CodeRabbit - **Documentation** - Enhanced code snippets with syntax highlighting in documentation for Dark Mode, Quick Start, and Typography sections. - Improved visual presentation and readability of code blocks. - Updated content layout in Typography documentation for better user experience. --- .../src/Styles/DarkMode.stories.tsx | 34 +++-- .../src/Styles/QuickStart.stories.tsx | 142 +++++++++++++----- .../src/Styles/Typography.stories.tsx | 55 ++++--- 3 files changed, 168 insertions(+), 63 deletions(-) diff --git a/packages/documentation/src/Styles/DarkMode.stories.tsx b/packages/documentation/src/Styles/DarkMode.stories.tsx index 886fc7f0..95c7d54d 100644 --- a/packages/documentation/src/Styles/DarkMode.stories.tsx +++ b/packages/documentation/src/Styles/DarkMode.stories.tsx @@ -24,6 +24,7 @@ import { IconRestore, IconSettings, } from "@versini/ui-icons"; +import { Highlight, themes } from "prism-react-renderer"; export default { title: "Styles/Components" }; @@ -48,6 +49,16 @@ const data = [ }, ]; +const codeBlock = `// tailwind.config.js +/** @type {import('tailwindcss').Config} */ + +import { twPlugin } from "@versini/ui-styles"; + +export default twPlugin.merge({ + darkMode: "selector", + ... +});`; + const CommonTemplate = () => { return ( <> @@ -68,15 +79,19 @@ const CommonTemplate = () => { If you want to toggle dark mode manually instead of relying on the operating system preference, use the Tailwind selector strategy:

- 
-				
-					{`// tailwind.config.js
-module.exports = {
-  darkMode: 'selector',
-  // ...
-}`}
-				
-
+ + {({ style, tokens, getLineProps, getTokenProps }) => ( + 
+						{tokens.map((line, i) => (
+							

+								{line.map((token, key) => (
+									
+								))}
+							

+						))}
+
+ )} +

Now instead of dark classes being applied based on{" "} prefers-color-scheme, they will be applied whenever the @@ -122,7 +137,6 @@ module.exports = { Send diff --git a/packages/documentation/src/Styles/QuickStart.stories.tsx b/packages/documentation/src/Styles/QuickStart.stories.tsx index 1bbbf9c4..ac9a94e2 100644 --- a/packages/documentation/src/Styles/QuickStart.stories.tsx +++ b/packages/documentation/src/Styles/QuickStart.stories.tsx @@ -1,7 +1,14 @@ +/* eslint-disable @typescript-eslint/ban-ts-comment */ + import { Story } from "@ladle/react"; +import { Highlight, Prism, themes } from "prism-react-renderer"; export default { title: "Styles" }; +(typeof global !== "undefined" ? global : window).Prism = Prism; +// @ts-ignore +await import("prismjs/components/prism-bash"); + export const QuickStart: Story = () => (

Styles

@@ -17,18 +24,32 @@ export const QuickStart: Story = () => ( You have to install the @versini/ui-styles package which provides our TailwindCSS plugin:

- 
-			$ npm install --save-dev @versini/ui-styles
-
+ + {({ style, tokens, getLineProps, getTokenProps }) => ( + 
+					{tokens.map((line, i) => (
+						

+							{line.map((token, key) => (
+								
+							))}
+						

+					))}
+
+ )} +

Configuration

You then need to configure your application to use TailwindCSS and our TailwindCSS plugin:

- 
-			
-				{`// tailwind.config.js
+		
-
+ language="tsx" + > + {({ style, tokens, getLineProps, getTokenProps }) => ( + 
+					{tokens.map((line, i) => (
+						

+							{line.map((token, key) => (
+								
+							))}
+						

+					))}
+
+ )} +

Finally, while our Typography styles could be used as is, some styles are @@ -46,13 +79,25 @@ export default twPlugin.merge({ your project, simply copy the following lines in your index.html{" "} head:

- 
-			
-				{`
+		
 
 `}
-			
-
+ language="markup" + > + {({ style, tokens, getLineProps, getTokenProps }) => ( + 
+					{tokens.map((line, i) => (
+						

+							{line.map((token, key) => (
+								
+							))}
+						

+					))}
+
+ )} +

Usage

@@ -60,23 +105,36 @@ export default twPlugin.merge({ prose-lighter classes to add our typography styles to any vanilla HTML:

- 
-			
-				{`

+		
   
Garlic bread with cheese: What the science tells us

   

-    For years parents have espoused the health benefits of eating garlic bread with cheese to their
-    children, with the food earning such an iconic status in our culture that kids will often dress
-    up as warm, cheesy loaf for Halloween.
+    For years parents have espoused the health benefits of eating
+    garlic bread with cheese to their children, with the food
+    earning such an iconic status in our culture that kids will
+    often dress up as warm, cheesy loaf for Halloween.
   

   

-    But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
-    springing up around the country.
+    But a recent study shows that the celebrated appetizer may be
+    linked to a series of rabies cases springing up around the country.
   

   
 
`}
-			
-
+ language="markup" + > + {({ style, tokens, getLineProps, getTokenProps }) => ( + 
+					{tokens.map((line, i) => (
+						

+							{line.map((token, key) => (
+								
+							))}
+						

+					))}
+
+ )} +

NOTE: always include the prose class when @@ -85,26 +143,40 @@ export default twPlugin.merge({

Dark mode

- Our typography styles are designed to work in dark mode, too. Just add the - dark: prefix to the classes: + Our typography styles are designed to automatically work in dark mode, + too. Just add the dark: prefix to the classes:

- 
-			
-				{`

+		
   
Garlic bread with cheese: What the science tells us

   

-    For years parents have espoused the health benefits of eating garlic bread with cheese to their
-    children, with the food earning such an iconic status in our culture that kids will often dress
-    up as warm, cheesy loaf for Halloween.
+    For years parents have espoused the health benefits of eating
+    garlic bread with cheese to their children, with the food
+    earning such an iconic status in our culture that kids will
+    often dress up as warm, cheesy loaf for Halloween.
   

   

-    But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
-    springing up around the country.
+    But a recent study shows that the celebrated appetizer may be
+    linked to a series of rabies cases springing up around the country.
   

   
 
`}
-			
-
+ language="markup" + > + {({ style, tokens, getLineProps, getTokenProps }) => ( + 
+					{tokens.map((line, i) => (
+						

+							{line.map((token, key) => (
+								
+							))}
+						

+					))}
+
+ )} + +

NOTE: please refer to the Styles {"->"} Components {"->"}{" "} Dark mode section in the navigation bar for more information. diff --git a/packages/documentation/src/Styles/Typography.stories.tsx b/packages/documentation/src/Styles/Typography.stories.tsx index 1bdaceb0..d050059c 100644 --- a/packages/documentation/src/Styles/Typography.stories.tsx +++ b/packages/documentation/src/Styles/Typography.stories.tsx @@ -1,6 +1,7 @@ /* eslint-disable react/no-unescaped-entities */ import type { Story } from "@ladle/react"; +import { Highlight, themes } from "prism-react-renderer"; export default { title: "Styles/Typography" }; @@ -14,9 +15,23 @@ const CommonTemplate = ({ return ( <> {intro} - 

-				{`

+				{({ style, tokens, getLineProps, getTokenProps }) => (
+					
+						{tokens.map((line, i) => (
+							

+								{line.map((token, key) => (
+									
+								))}
+							

+						))}
+					

+				)}
+			
 			

 				By default, Tailwind removes all of the default browser styling from
 				paragraphs, headings, lists and more. This ends up being really useful
@@ -54,7 +69,9 @@ const CommonTemplate = ({
 				that you can slap on any block of vanilla HTML content and turn it into
 				a beautiful, well-formatted document:
 			

-			
{`

+			
   
Garlic bread with cheese: What the science tells us

   

     For years parents have espoused the health benefits of eating
@@ -64,11 +81,24 @@ const CommonTemplate = ({
   

   

     But a recent study shows that the celebrated appetizer may be
-    linked to a series of rabies cases springing up around the
-    country.
+    linked to a series of rabies cases springing up around the country.
   

   
-
`}

+`}
+				language="markup"
+			>
+				{({ style, tokens, getLineProps, getTokenProps }) => (
+					
+						{tokens.map((line, i) => (
+							

+								{line.map((token, key) => (
+									
+								))}
+							

+						))}
+					

+				)}
+			
 			
What to expect from here on out

 			

 				What follows from here is just a bunch of absolute nonsense I've written
@@ -101,17 +131,6 @@ const CommonTemplate = ({
 					like trash. Make it good then it won't be bad.
 				

 			
-			

-				It's probably important that images look okay here by default as well:
-			

-			

-				
-				

-					Contrary to popular belief, Lorem Ipsum is not simply random text. It
-					has roots in a piece of classical Latin literature from 45 BC, making
-					it over 2000 years old.
-				

-			

 			

 				Now I'm going to show you an example of an unordered list to make sure
 				that looks good, too: