Merge pull request #83 from acid-info/code-block

style: update code block style

packages/docusaurus-playground/docs/test.md

@@ -0,0 +1,62 @@
+---
+title: Run Nwaku in a Docker Container
+---
+
+This guide provides detailed steps to build and run a `nwaku` node in a Docker container. If you prefer a pre-configured setup that includes a monitoring dashboard, see the [Run Nwaku with Docker Compose](/guides/nwaku/run-docker-compose) guide.
+
+## Prerequisites
+
+Ensure [Docker](https://www.docker.com/) is installed on your system using the appropriate instructions provided in the [Docker documentation](https://docs.docker.com/engine/install/).
+
+## Get Docker Image
+
+The Nwaku Docker images are available on the Docker Hub public registry under the [statusteam/nim-waku](https://hub.docker.com/r/statusteam/nim-waku) repository. Please visit [statusteam/nim-waku/tags](https://hub.docker.com/r/statusteam/nim-waku/tags) for images of specific releases.
+
+Pull the latest docker image:
+
+```bash
+docker pull statusteam/nim-waku
+```
+
+You can also build the Docker image locally:
+
+```bash
+# Clone the repository
+git clone --recurse-submodules https://github.com/waku-org/nwaku
+cd nwaku
+
+# Build docker image
+make docker-image
+```
+
+## Run Docker Container
+
+Run `nwaku` in a new Docker container:
+
+```bash
+docker run [OPTIONS] [IMAGE] [ARG...]
+```
+
+- `OPTIONS` are your selected [Docker options](https://docs.docker.com/engine/reference/commandline/run/#options)
+- `IMAGE` is the image and tag you pulled from the registry or built locally
+- `ARG...` is the list of arguments for your [node configuration options](/guides/reference/node-config-options)
+
+Run `nwaku` using the most typical configuration:
+
+```bash
+docker run -i -t -p 60000:60000 -p 9000:9000/udp statusteam/nim-waku \
+  --dns-discovery:true \
+  --dns-discovery-url:enrtree://AOGECG2SPND25EEFMAJ5WF3KSGJNSGV356DSTL2YVLLZWIV6SAYBM@prod.waku.nodes.status.im \
+  --discv5-discovery \
+  --nat:extip:[YOUR PUBLIC IP] # or, if you are behind a nat: --nat=any
+```
+
+:::tip
+To find your public IP, use:
+
+```bash
+dig TXT +short o-o.myaddr.l.google.com @ns1.google.com | awk -F'"' '{ print $2}'
+```
+
+We recommend using explicit port mappings (`-p`) when exposing ports accessible from outside the host (listening and discovery ports, API servers).
+:::

packages/docusaurus-playground/docs/test.mdx

@@ -1,40 +0,0 @@
-import { PoweredBy } from '../src/components/mdx'
-
-test
-
-<PoweredBy
-  items={[
-    {
-      name: 'Status',
-      description:
-        'Status is a secure messaging app, crypto wallet, and Web3 browser built with state-of-the-art technology.',
-      logoSrc: '/showcase/status-mark-black.svg',
-      logoSrcDark: '/showcase/status-mark-white.svg',
-      link: 'https://status.im',
-    },
-    {
-      name: 'Status',
-      description:
-        'Status is a secure messaging app, crypto wallet, and Web3 browser built with state-of-the-art technology.',
-      logoSrc: '/showcase/status-mark-black.svg',
-      logoSrcDark: '/showcase/status-mark-white.svg',
-      link: 'https://status.im',
-    },
-    {
-      name: 'Status',
-      description:
-        'Status is a secure messaging app, crypto wallet, and Web3 browser built with state-of-the-art technology.',
-      logoSrc: '/showcase/status-mark-black.svg',
-      logoSrcDark: '/showcase/status-mark-white.svg',
-      link: 'https://status.im',
-    },
-    {
-      name: 'Status',
-      description:
-        'Status is a secure messaging app, crypto wallet, and Web3 browser built with state-of-the-art technology.',
-      logoSrc: '/showcase/status-mark-black.svg',
-      logoSrcDark: '/showcase/status-mark-white.svg',
-      link: 'https://status.im',
-    },
-  ]}
-/>

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -235,6 +235,7 @@
 
   --ifm-table-background: transparent !important;
   --ifm-table-stripe-background: transparent !important;
+  --ifm-pre-border-radius: 0 !important;
 
   @include utils.responsive('xl', 'down') {
     --container-max-width: 912px;
@@ -1200,4 +1201,13 @@ pre code {
   margin-block: 40px;
 }
 
+code {
+  --lsd-typography-generic-font-family: monospace;
+  background: rgba(var(--lsd-theme-primary), 0.1);
+}
+
+.theme-admonition {
+  overflow: auto;
+}
+
 @import './blog.scss';

packages/logos-docusaurus-theme/src/client/prism/dark-theme.ts

@@ -1,104 +1,12 @@
 import { PrismTheme } from 'prism-react-renderer'
+import dracula from 'prism-react-renderer/themes/dracula'
 
 const theme: PrismTheme = {
+  ...dracula,
   plain: {
-    color: '#ffffff',
-    backgroundColor: 'transparent',
+    ...dracula.plain,
+    backgroundColor: 'rgba(var(--lsd-surface-secondary), 0.08)',
   },
-  styles: [
-    {
-      types: ['prolog'],
-      style: {
-        color: 'rgb(0, 0, 128)',
-      },
-    },
-    {
-      types: ['comment'],
-      style: {
-        color: 'rgb(106, 153, 85)',
-      },
-    },
-    {
-      types: ['builtin', 'changed', 'keyword', 'interpolation-punctuation'],
-      style: {
-        color: '#BC89BD',
-      },
-    },
-    {
-      types: ['number', 'inserted'],
-      style: {
-        color: 'rgb(181, 206, 168)',
-      },
-    },
-    {
-      types: ['constant'],
-      style: {
-        color: 'rgb(100, 102, 149)',
-      },
-    },
-    {
-      types: ['attr-name', 'variable'],
-      style: {
-        color: 'rgb(156, 220, 254)',
-      },
-    },
-    {
-      types: ['deleted', 'string', 'attr-value', 'template-punctuation'],
-      style: {
-        color: 'rgb(206, 145, 120)',
-      },
-    },
-    {
-      types: ['selector'],
-      style: {
-        color: 'rgb(215, 186, 125)',
-      },
-    },
-    {
-      types: ['tag'],
-      style: {
-        color: 'rgb(78, 201, 176)',
-      },
-    },
-    {
-      types: ['tag'],
-      languages: ['markup'],
-      style: {
-        color: 'rgb(86, 156, 214)',
-      },
-    },
-    {
-      types: ['punctuation', 'operator'],
-      style: {
-        color: 'rgb(212, 212, 212)',
-      },
-    },
-    {
-      types: ['punctuation'],
-      languages: ['markup'],
-      style: {
-        color: '#808080',
-      },
-    },
-    {
-      types: ['function'],
-      style: {
-        color: 'rgb(220, 220, 170)',
-      },
-    },
-    {
-      types: ['class-name'],
-      style: {
-        color: 'rgb(78, 201, 176)',
-      },
-    },
-    {
-      types: ['char'],
-      style: {
-        color: 'rgb(209, 105, 105)',
-      },
-    },
-  ],
 }
 
 export default theme

packages/logos-docusaurus-theme/src/client/prism/light-theme.ts

@@ -1,77 +1,12 @@
-// Original: https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-ghcolors.css
-const theme = {
+import { PrismTheme } from 'prism-react-renderer'
+import vsLight from 'prism-react-renderer/themes/vsLight'
+
+const theme: PrismTheme = {
+  ...vsLight,
   plain: {
-    color: '#393A34',
-    backgroundColor: 'transparent',
+    ...vsLight.plain,
+    backgroundColor: 'rgba(var(--lsd-surface-secondary), 0.08)',
   },
-  styles: [
-    {
-      types: ['comment', 'prolog', 'doctype', 'cdata'],
-      style: {
-        color: '#999988',
-        fontStyle: 'italic',
-      },
-    },
-    {
-      types: ['namespace'],
-      style: {
-        opacity: 0.7,
-      },
-    },
-    {
-      types: ['string', 'attr-value'],
-      style: {
-        color: '#e3116c',
-      },
-    },
-    {
-      types: ['punctuation', 'operator'],
-      style: {
-        color: '#393A34',
-      },
-    },
-    {
-      types: [
-        'entity',
-        'url',
-        'symbol',
-        'number',
-        'boolean',
-        'variable',
-        'constant',
-        'property',
-        'regex',
-        'inserted',
-      ],
-      style: {
-        color: '#36acaa',
-      },
-    },
-    {
-      types: ['atrule', 'keyword', 'attr-name', 'selector'],
-      style: {
-        color: '#00a4db',
-      },
-    },
-    {
-      types: ['function', 'deleted', 'tag'],
-      style: {
-        color: '#d73a49',
-      },
-    },
-    {
-      types: ['function-variable'],
-      style: {
-        color: '#6f42c1',
-      },
-    },
-    {
-      types: ['tag', 'selector', 'keyword'],
-      style: {
-        color: '#00009f',
-      },
-    },
-  ],
 }
 
 export default theme

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Container/styles.module.css

@@ -2,6 +2,5 @@
   background: transparent;
   color: var(--prism-color);
   margin-bottom: var(--ifm-leading);
-  border: 1px solid rgb(var(--lsd-border-primary));
   border-radius: 0;
 }

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/styles.module.css

@@ -4,6 +4,7 @@
 }
 
 .codeBlockTitle {
+  background: var(--prism-background-color);
   border-bottom: 1px solid var(--ifm-color-primary);
   font-size: var(--ifm-code-font-size);
   font-weight: 500;