Merge pull request #93 from chrisweb/preview

@react-three/postprocessing v3 RC

Author: chrisweb

app/global.css

@@ -185,7 +185,6 @@ body {
     font-family: var(--main-frontFamily-default);
     font-size: var(--main-fontSize-default);
     line-height: var(--main-lineHeight-default);
-    text-rendering: optimizeLegibility;
 }
 
 /* prevent any scrolling when dialog is open */

app/web_development/posts/vscode/page.mdx

@@ -2,7 +2,7 @@
 title: VSCode
 keywords: ['VSCode', 'ide', 'programming', 'extension', 'theme']
 published: 2024-08-05T11:22:33.444Z
-modified: 2024-11-23T23:11:00.444Z
+modified: 2025-01-20T23:11:00.444Z
 permalink: https://chris.lu/web_development/posts/vscode
 section: Web development
 ---
@@ -265,15 +265,15 @@ To edit settings first [open the settings UI or file version](#open-the-settings
 
 You have two types of settings:
 
-* **user** settings will apply to all your projects; these settings are saved in the computer user directory; these settings get synchronized between all VSCode tools where you are signed in
+**user settings:** will apply to all your projects; these settings are saved in the computer user directory; these settings get synchronized between all VSCode tools where you are signed in
 
 user settings locations:
 
-Windows: %APPDATA%\Code\User\settings.json.  
-macOS: $HOME/Library/Application\ Support/Code/User/settings.json.  
-Linux: $HOME/.config/Code/User/settings.json.  
+* **Windows**: %APPDATA%\Code\User\settings.json.  
+* **macOS**: $HOME/Library/Application\ Support/Code/User/settings.json.  
+* **Linux**: $HOME/.config/Code/User/settings.json.  
 
-* **workspace** settings will only apply to the project (workspace) that is currently open in VSCode; those settings get saved into a `settings.json` file that is located in a `.vscode` directory of your project (workspace), meaning that you can commit that directory with your source code to share the settings with others
+**workspace settings:** will only apply to the project (workspace) that is currently open in VSCode; those settings get saved into a `settings.json` file that is located in a `.vscode` directory of your project (workspace), meaning that you can commit that directory with your source code to share the settings with others
 
 Two tabs at the top of the settings page allow you to switch between user and workspace settings.
 

app/web_development/tutorials/next-js-static-first-mdx-starterkit/code-highlighting-plugin/page.mdx

@@ -3,7 +3,7 @@ title: Code highlighting plugin - Next.js 15 Tutorial - Next.js 15 Tutorial
 description: Code highlighting plugin - Next.js 15 static first MDX starterkit | Web development tutorials | www.chris.lu
 keywords: ['highlighting', 'rehype', 'plugin', 'pretty', 'code', 'shiki']
 published: 2024-12-31T23:00:00.000Z
-modified: 2025-01-20T23:00:00.000Z
+modified: 2025-01-23T23:00:00.000Z
 permalink: https://chris.lu/web_development/tutorials/next-js-static-first-mdx-starterkit/code-highlighting-plugin
 section: Web development
 ---
@@ -103,6 +103,24 @@ To install the **rehype pretty code** as well as the **shiki** package, we use t
 npm i rehype-pretty-code shiki --save-exact
 ```
 
+> [!WARN]  
+> the latest shiki version is currently v2.x, but rehype-pretty-code expects a shiki v1 dependency, as there are no real [breaking changes](https://shiki.matsu.io/blog/v2#breaking-changes) in shiki v2 means it is safe to use shiki v2 with the [current (v0.14.0) rehype-pretty-code release](https://github.com/rehype-pretty/rehype-pretty-code/releases), but make sure to read over the [shiki v2 post](https://shiki.matsu.io/blog/v2#breaking-changes) as it contains interesting information about changes   
+>  
+> you will likely get an npm error like this:
+>  
+> > npm error code ERESOLVE
+> > npm error ERESOLVE could not resolve
+>  
+> either use the npm cli force flag, like so: `npm i rehype-pretty-code@latest shiki@latest --save-exact --force`
+>  
+> Or add shiki to your overrides in your package.json:
+>  
+> ```json title="package.json"
+>     "overrides": {
+>        "shiki": "2.1.0"
+>    }
+> ```
+
 Next, we edit our `next.config.mjs` file (in the root of our project) to add the plugin configuration like so:
 
 ```js title="next.config.mjs" showLineNumbers {2} {6} {15} /rehypePrettyCode/

components/neonRoad/Canvas.tsx

@@ -10,7 +10,7 @@ import City from './City'
 //import Trees from './Trees'
 //import Terrains from './Terrains'
 import Landscape from './Landscape'
-//import { EffectComposer, Bloom } from '@react-three/postprocessing'
+import { EffectComposer, Bloom } from '@react-three/postprocessing'
 
 interface IProps extends React.PropsWithChildren {
     altText: string
@@ -119,13 +119,13 @@ const NeonRoadCanvas: React.FC<IProps> = (props) => {
                     {/* <Terrains /> */}
                     {/* <Trees /> */}
                     <Landscape />
-                    {/* <EffectComposer>
+                    <EffectComposer>
                         <Bloom
                             luminanceThreshold={0.08}
                             intensity={0.7}
                             luminanceSmoothing={0.01}
                         />
-                    </EffectComposer> */}
+                    </EffectComposer>
                     {/* the following components can be useful in development */}
                     {/*<axesHelper />*/}
                     {/*<OrbitControls camera={cameraRef.current} />*/}