feat: docusaurus upgrade, syntax highlighting, light and dark theme

foomo/.gitignore

@@ -20,3 +20,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-lock.yaml
+
+.yarn

foomo/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

foomo/README.md

@@ -4,13 +4,13 @@ This website is built using [Docusaurus 2](https://docusaurus.io/), a modern sta
 
 ### Installation
 
-```
+```shell
 $ yarn
 ```
 
 ### Local Development
 
-```
+```shell
 $ yarn start
 ```
 
@@ -18,7 +18,7 @@ This command starts a local development server and opens up a browser window. Mo
 
 ### Build
 
-```
+```shell
 $ yarn build
 ```
 
@@ -26,7 +26,7 @@ This command generates static content into the `build` directory and can be serv
 
 ### Deployment
 
-```
+```shell
 $ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
 ```
 

foomo/blog/2023-03-17-go-race-conditions-testing-and-coverage/index.mdx

@@ -77,7 +77,7 @@ The summary shows we are only covering 22% of the code. The goal is not to cover
 
 The question is: how do we know exactly which lines of code we're covering through the test suite? Again, go test comes to the rescue through another option: _-coverprofile_ lets us specify an output file that will contain references to each single line of code involved in the analysis. It is a text file, but not very readable:
 
-```
+```go
 github.com/foom...tapi/gocontentfulvolibproduct.go:21.86,22.15 1 1
 github.com/foom...tapi/gocontentfulvolibproduct.go:25.2,25.18 1 1
 github.com/foom...tapi/gocontentfulvolibproduct.go:28.2,29.16 2 0

foomo/docs/devops/infrastructure/conventions.md

@@ -9,7 +9,9 @@ When creating resources the most important thing is to be consistent.
 
 The following resource convention is preferred if no other exist in the project:
 
-```[customer*]-[project]-[resource*]-[env*]-[name*]-[region/location]-[index]```
+```text
+[customer*]-[project]-[resource*]-[env*]-[name*]-[region/location]-[index]
+```
 
 The fields with a * are required.
 

foomo/docs/projects/gotsrpc/cli/gotsrpc.yaml.md

@@ -40,4 +40,4 @@ module:
   name: github.com/foomo/gotsrpc
   path: ../ # Relative Or Absolute Path where the package was checked out (root of the package)
 
-fe```
+```

foomo/docs/projects/keel/circuit-breaker/index.md

@@ -52,7 +52,7 @@ When the `IsSuccessful`-function returns an error (and the ignore value is set t
 ### Examples
 Let's say we want to stop sending requests once we encountered three consecutive failures.
 
-``` go
+```go
 client := keelhttp.NewHTTPClient(
 		keelhttp.HTTPClientWithRoundTripware(l,
 			roundtripware.CircuitBreaker(&roundtripware.CircuitBreakerSettings{
@@ -75,7 +75,7 @@ client := keelhttp.NewHTTPClient(
 
 Now lets say we see we also want to detect network problems such as a BadGateway. For this we can use the `IsSuccessful` option.
 
-``` go
+```go
 client := keelhttp.NewHTTPClient(
     keelhttp.HTTPClientWithRoundTripware(l,
         roundtripware.CircuitBreaker(&roundtripware.CircuitBreakerSettings{
@@ -99,7 +99,7 @@ client := keelhttp.NewHTTPClient(
 
 Lastly, let's assume we use the client for multiple different endpoints. And we only want to base the circuit breakers state on a single endpoint, but stop request on all endpoints once the breaker changes to open. Again we can use the IsSuccessful option and ignore certain endpoints.
 
-``` go
+```go
 client := keelhttp.NewHTTPClient(
     keelhttp.HTTPClientWithRoundTripware(l,
         roundtripware.CircuitBreaker(&roundtripware.CircuitBreakerSettings{
@@ -125,7 +125,7 @@ client := keelhttp.NewHTTPClient(
 #### Using ratios in ReadyToTrip
 When using ratios in ready to trip, the `Interval` should be set to a non-zero value in order to reset the counts periodically. Otherwise, after a long period of successful requests it will also take a long time to impact the ratio and trip the breaker.
 
-``` go
+```go
     ReadyToTrip: func(counts gobreaker.Counts) bool {
         failureRatio := float64(counts.TotalFailures) / float64(counts.Requests)
         return counts.Requests >= 3 && failureRatio >= 0.6

foomo/docs/security/go.md

@@ -515,7 +515,7 @@ func main() {
 }
 ```
 The output will likely be:
-```
+```text
 c
 c
 c

foomo/docs/security/react.md

@@ -139,7 +139,7 @@ Modern applications rely heavily on third-party packages.
 -   **Environment Variables**: Never hardcode API keys or other secrets in your frontend code. Use environment variables (e.g., `.env.local`) and prefix them with `NEXT_PUBLIC_` in Next.js if they need to be exposed to the browser. Keys without the prefix are only available on the server-side.
 
     In `.env.local`:
-    ```
+    ```env
     API_KEY=secret_value
     NEXT_PUBLIC_ANALYTICS_ID=public_value
     ```
@@ -234,7 +234,7 @@ Server Actions are functions that execute on the server. They must be secured pr
 -   **Permissions Check**: Always validate the user's session and permissions at the beginning of a Server Action.
 -   **Input Validation**: Sanitize and validate all input received from the client to prevent vulnerabilities.
 
-    ```javascript
+    ```typescript
     'use server';
 
     import { auth } from '@/lib/auth'; // Your authentication logic
@@ -295,13 +295,13 @@ INLINE_RUNTIME_CHUNK=false npm run build
 Once you've removed inline scripts, you can implement a CSP. The policy can be delivered via a `<meta>` tag in your HTML or through an HTTP header. An HTTP header is generally more flexible.
 
 Here is an example of a strict CSP that only allows resources from the same origin:
-```
+```http
 Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self';
 ```
 In some cases, you may need to allow third-party scripts or styles. If you can't avoid inline scripts, you can use a nonce-based approach. A nonce is a randomly generated string that is unique for each request. You include the nonce in your CSP header and in the script tag.
 
 Example of a nonce-based policy:
-```
+```http
 Content-Security-Policy: script-src 'self' 'nonce-rAnd0m';
 ```
 And in your HTML:

foomo/docusaurus.config.js

@@ -1,8 +1,7 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-// const lightCodeTheme = require('prism-react-renderer/themes/github');
-// const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const {themes} = require('prism-react-renderer');
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -50,8 +49,8 @@ const config = {
     ({
       colorMode: {
         defaultMode: 'light',
-        disableSwitch: true,
-        
+        disableSwitch: false,
+        respectPrefersColorScheme: true,
       },
       algolia: {
         appId: 'SUATUVZDDM',
@@ -172,6 +171,8 @@ const config = {
       //   contextualSearch: true,
       // }
       prism:  {
+        theme: themes.github,
+        darkTheme: themes.dracula,
         additionalLanguages: ['go'],
       },
     }),

foomo/package.json

@@ -15,16 +15,16 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.0.0",
-    "@docusaurus/preset-classic": "^3.0.0",
-    "@docusaurus/theme-live-codeblock": "^3.0.0",
-    "@docusaurus/theme-search-algolia": "^3.0.0",
-    "@mdx-js/react": "^1.6.21",
+    "@docusaurus/core": "^3.8.1",
+    "@docusaurus/preset-classic": "^3.8.1",
+    "@docusaurus/theme-live-codeblock": "^3.8.1",
+    "@docusaurus/theme-search-algolia": "^3.8.1",
+    "@mdx-js/react": "^3.0.0",
     "@saucelabs/theme-github-codeblock": "0.1.1",
     "@svgr/webpack": "^5.5.0",
-    "clsx": "^1.1.1",
+    "clsx": "^2.1.0",
     "file-loader": "^6.2.0",
-    "prism-react-renderer": "^1.2.1",
+    "prism-react-renderer": "^2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-full-screen": "^1.1.0",
@@ -32,9 +32,9 @@
     "url-loader": "^4.1.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.0.0",
-    "@tsconfig/docusaurus": "^1.0.4",
-    "typescript": "^4.9.5"
+    "@docusaurus/module-type-aliases": "^3.8.1",
+    "@tsconfig/docusaurus": "^2.0.2",
+    "typescript": "^5.2.2"
   },
   "browserslist": {
     "production": [
@@ -49,6 +49,6 @@
     ]
   },
   "engines": {
-		"node": ">=20"
-	}
+    "node": ">=20"
+  }
 }

foomo/src/components/HomepageFeatures.module.css

@@ -12,6 +12,10 @@
   background-color: #fafafa;
 }
 
+:global(html[data-theme='dark']) .features .feature {
+  background-color: #303030;
+}
+
 .featureSvg {
   height: 200px;
   width: 200px;

foomo/src/css/custom.css

@@ -16,6 +16,16 @@
   --ifm-code-font-size: 95%;
 }
 
+html[data-theme='dark'] {
+  --ifm-color-primary: #59a6ee;
+  --ifm-color-primary-dark: #388ad7;
+  --ifm-color-primary-darker: #2984d8;
+  --ifm-color-primary-darkest: #103252;
+  --ifm-color-primary-light: #1b558c;
+  --ifm-color-primary-lighter: #0d2c48;
+  --ifm-color-primary-lightest: #0a2135;
+}
+
 .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.1);
   display: block;

package.json

@@ -1,13 +0,0 @@
-{
-  "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.0.0",
-    "@tsconfig/docusaurus": "^1.0.6",
-    "typescript": "^4.9.5"
-  },
-  "dependencies": {
-    "@docusaurus/core": "^3.0.0",
-    "@docusaurus/preset-classic": "^3.0.0",
-    "@docusaurus/theme-live-codeblock": "^3.0.0",
-    "@docusaurus/theme-search-algolia": "^3.0.0"
-  }
-}