Aesthetics (#624)

# Contributor agreement

- [x] I have read and agree to the [Contributor
Agreement](https://github.com/kuzudb/kuzu-docs/blob/main/CLA.md).

Author: s-illly

README.md

@@ -37,6 +37,42 @@ Images are added to `src/assets/` and embedded in Markdown with a relative link.
 Any additional static assets (like fonts, favicon, PDFs, etc.) that will not be processed by Astro
 are placed in the `public/` directory.
 
+## Customizations
+
+### Table Syntax Highlighting
+
+Add tag "table" after the three backticks to indicate the table custom css style to code block
+
+**Usage:**
+```table
+┌─────────┬─────────┬─────────┐
+│ column1 │ column2 │ column3 │
+├─────────┼─────────┼─────────┤
+│ value1  │ value2  │ value3  │
+└─────────┴─────────┴─────────┘ 
+```
+
+
+### Tab Synchronization
+
+Include "syncKey=<syncKey_name>" to Tabs tag. To have tabs synchronize, ensure <syncKey_name> are the same across different tabs. 
+The tabitems do not need to be the same. Identical tabitems will have synchronization applied to them when clicked.
+
+**Usage:**
+<Tabs syncKey="langs">
+  <TabItem label="Python" />
+  <TabItem label="Rust" />
+</Tabs>
+
+<Tabs syncKey="langs">
+  <TabItem label="C++" />
+  <TabItem label="Rust" />
+  <TabItem label="Java" />
+</Tabs>
+
+Pressing on "Rust" will result in both tabs switching onto Rust.
+
+
 ## 🧞 Commands
 
 All commands are run from the root of the project, from a terminal:

astro.config.mjs

@@ -92,11 +92,6 @@ export default defineConfig({
                     tag: 'meta',
                     attrs: { name: 'twitter:image', content: site + '/img/og.png' },
                 },
-                // Script
-                {
-                    tag: "script",
-                    attrs: { src: "/reb2b.js", type: "text/javascript", async: true }
-                },
                 {
                     tag: "script",
                     attrs: { src: "/remove-prompt.js", type: "text/javascript" }

public/remove-prompt.js

@@ -92,4 +92,40 @@
   }
 })();
 
+// Add user-select: none to spans that start with $
+(function () {
+  function addDollarClass() {
+    const codeBlocks = document.querySelectorAll('pre[data-language] code > div.ec-line > div.code > span:first-child');
+    
+    codeBlocks.forEach(span => {
+      const text = span.textContent || span.innerText;
+      if (text && text.trim().startsWith('$')) {
+        span.classList.add('starts-with-dollar');
+      }
+    });
+  }
+  
+  // Process on page load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', addDollarClass);
+  } else {
+    addDollarClass();
+  }
+  
+  // Process when content changes (for dynamic content)
+  const observer = new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutation) {
+      if (mutation.type === 'childList') {
+        addDollarClass();
+      }
+    });
+  });
+  
+  // Observe the entire document for changes
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true
+  });
+})();
+
 

src/components/overrides/Header.astro

@@ -3,7 +3,6 @@ import type { Props } from "@astrojs/starlight/props";
 import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro";
 import Search from "@astrojs/starlight/components/Search.astro";
 import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
-import ThemeSelect from "./ThemeSelect.astro";
 import { Icon } from "@astrojs/starlight/components";
 import Banner from './Banner.astro';
 import ThemeSelect from './ThemeSelect.astro';
@@ -12,7 +11,7 @@ import ThemeSelect from './ThemeSelect.astro';
   <!-- Site Title - shows when sidebars collapse -->
   <div class="header-site-title">
     <a href="/" class="site-title">
-      <img src="/src/assets/logo/kuzu-logo-inverse.png" alt="Kuzu" class="site-logo" />
+      <SiteTitle />
     </a>
   </div>
 

src/content/docs/client-apis/cli.mdx

@@ -183,7 +183,7 @@ Pipe the file content to the CLI as follows:
 ```bash
 kuzu example.kuzu < schema.cypher
 ```
-```
+``` table
 Opened the database example.kuzu in read-write mode.
 Enter ":help" for usage hints.
 ┌────────────────────────────────┐

src/content/docs/client-apis/cpp.mdx

@@ -113,7 +113,7 @@ Inference rule for c++ type to cypher type is defined as follows:
 | std::string | STRING |
 
 #### Example
-```
+```cpp
 // Create a unary scalar function which adds 5 to the input value.
 static int32_t add5(int32_t x) {
     return x + 5;

src/content/docs/client-apis/python.mdx

@@ -239,7 +239,7 @@ conn.execute("CREATE (a:Person {name: 'Zhang', age: 50})")
 result = conn.execute("MATCH (p:Person) RETURN p.*")
 print(result.get_as_pl())
 ```
-```
+```table
 shape: (3, 2)
 ┌─────────┬───────┐
 │ p.name  ┆ p.age │
@@ -256,7 +256,7 @@ Return specific columns by name and optionally alias them as follows:
 result = conn.execute("MATCH (p:Person) RETURN p.name AS name")
 print(result.get_as_pl())
 ```
-```
+```table
 shape: (3, 1)
 ┌─────────┐
 │ name    │
@@ -352,7 +352,7 @@ df = pl.DataFrame({
 result = conn.execute("LOAD FROM df RETURN *")
 print(result.get_as_pl())
 ```
-```
+```table
 shape: (3, 2)
 ┌─────────┬─────┐
 │ name    ┆ age │
@@ -453,7 +453,7 @@ conn.execute("COPY Person FROM df")
 result = conn.execute("MATCH (p:Person) RETURN p.*")
 print(result.get_as_pl())
 ```
-```
+```table
 shape: (3, 2)
 ┌─────────┬───────┐
 │ p.name  ┆ p.age │

src/content/docs/concurrency.md

@@ -101,7 +101,7 @@ which also connects to the same `example.kuzu`. When you launch Kuzu CLI and poi
 `example.kuzu`, Kuzu CLI embeds Kuzu and tries to create a `READ_WRITE` Database object. So if your notebook process already
 has created a Database object, this will fail with an error that looks like this:
 
-```
+```console
 RuntimeError: IO exception: Could not set lock on file : /path/to/database/example.kuzu
 ```
 
@@ -208,7 +208,7 @@ application is to use design patterns as per one of the scenarios shown pictoria
 Sometimes, when you are working in a Jupyter notebook and building your Kuzu graph while also trying to
 open other processes that connect to the same directory as the database file, you may come across this error:
 
-```
+```console
 RuntimeError: IO exception: Could not set lock on file : /path/to/database/example.kuzu
 ```
 

src/content/docs/cypher/attach.md

@@ -7,7 +7,7 @@ example. Suppose you are in the Kuzu CLI and have opened a database under local
 session, you want to query another local Kuzu database, say `/work`, which supposedly has some `Manager` node table.
 You can attach to the `/work` database and query the `Manager` nodes in it and then detach as follows:
 
-```
+```cypher
 ATTACH '/work' AS work (dbtype kuzu);
 MATCH (a:Manager) RETURN *;
 DETACH work;

src/content/docs/cypher/data-definition/alter.md

@@ -132,12 +132,13 @@ COMMENT ON TABLE User IS 'User information';
 Comments can be extracted through the `SHOW_TABLES()` function. See [CALL](/cypher/query-clauses/call) for more information.
 ```cypher
 CALL SHOW_TABLES() RETURN *;
---------------------------------------------
-| TableName | TableType | TableComment     |
---------------------------------------------
-| User      | NODE      | User information |
---------------------------------------------
-| City      | NODE      |                  |
---------------------------------------------
+```
+```table
+┌───────────┬───────────┬──────────────────┐
+│ TableName │ TableType │ TableComment     │
+├───────────┼───────────┼──────────────────┤
+│ User      │ NODE      │ User information │
+│ City      │ NODE      │                  │
+└───────────┴───────────┴──────────────────┘
 ```