Update docs styling (#189)

Updated doc styling for code blocks (both inline and code blocks) + added a new header to cookbooks linking back to the github repo and colab notebooks

apps/opik-documentation/documentation/docs/cookbook/evaluate_hallucination_metric.md

@@ -6,7 +6,7 @@ For this guide we will be evaluating the Hallucination metric included in the LL
 
 [Comet](https://www.comet.com/site) provides a hosted version of the Opik platform, [simply create an account](https://www.comet.com/signup?from=llm) and grab you API Key.
 
-> You can also run the Opik platform locally, see the [installation guide](https://www.comet.com/docs/opik/self-host/self_hosting_opik) for more information.
+> You can also run the Opik platform locally, see the [installation guide](https://www.comet.com/docs/opik/self-host/self_hosting_opik/) for more information.
 
 
 ```python

apps/opik-documentation/documentation/docs/cookbook/evaluate_moderation_metric.md

@@ -8,7 +8,7 @@ For this guide we will be evaluating the Moderation metric included in the LLM E
 
 [Comet](https://www.comet.com/site) provides a hosted version of the Opik platform, [simply create an account](https://www.comet.com/signup?from=llm) and grab you API Key.
 
-> You can also run the Opik platform locally, see the [installation guide](https://www.comet.com/docs/opik/self-host/self_hosting_opik) for more information.
+> You can also run the Opik platform locally, see the [installation guide](https://www.comet.com/docs/opik/self-host/self_hosting_opik/) for more information.
 
 
 ```python

apps/opik-documentation/documentation/docs/cookbook/langchain.md

@@ -12,7 +12,7 @@ We will highlight three different parts of the workflow:
 
 [Comet](https://www.comet.com/site) provides a hosted version of the Opik platform, [simply create an account](https://www.comet.com/signup?from=llm) and grab you API Key.
 
-> You can also run the Opik platform locally, see the [installation guide](https://www.comet.com/docs/opik/self-host/self_hosting_opik) for more information.
+> You can also run the Opik platform locally, see the [installation guide](https://www.comet.com/docs/opik/self-host/self_hosting_opik/) for more information.
 
 
 ```python

apps/opik-documentation/documentation/docs/cookbook/llama-index.md

@@ -14,7 +14,7 @@ For this guide we will be downloading the essays from Paul Graham and use them a
 
 [Comet](https://www.comet.com/site) provides a hosted version of the Opik platform, [simply create an account](https://www.comet.com/signup?from=llm) and grab you API Key.
 
-> You can also run the Opik platform locally, see the [installation guide](https://www.comet.com/docs/opik/self-host/self_hosting_opik) for more information.
+> You can also run the Opik platform locally, see the [installation guide](https://www.comet.com/docs/opik/self-host/self_hosting_opik/) for more information.
 
 
 ```python

apps/opik-documentation/documentation/docs/cookbook/openai.md

@@ -7,7 +7,7 @@ Opik integrates with OpenAI to provide a simple way to log traces for all OpenAI
 
 [Comet](https://www.comet.com/site) provides a hosted version of the Opik platform, [simply create an account](https://www.comet.com/signup?from=llm) and grab you API Key.
 
-> You can also run the Opik platform locally, see the [installation guide](https://www.comet.com/docs/opik/self-host/self_hosting_opik) for more information.
+> You can also run the Opik platform locally, see the [installation guide](https://www.comet.com/docs/opik/self-host/self_hosting_opik/) for more information.
 
 
 ```python

apps/opik-documentation/documentation/docs/cookbook/ragas.md

@@ -11,7 +11,7 @@ There are two main ways to use Opik with Ragas:
 
 [Comet](https://www.comet.com/site) provides a hosted version of the Opik platform, [simply create an account](https://www.comet.com/signup?from=llm) and grab you API Key.
 
-> You can also run the Opik platform locally, see the [installation guide](https://www.comet.com/docs/opik/self-host/self_hosting_opik) for more information.
+> You can also run the Opik platform locally, see the [installation guide](https://www.comet.com/docs/opik/self-host/self_hosting_opik/) for more information.
 
 
 ```python

apps/opik-documentation/documentation/docs/quickstart.md

@@ -26,12 +26,13 @@ os.environ["OPIK_API_KEY"] = "<your-api-key>"
 os.environ["OPIK_WORKSPACE"] = "<your-workspace>"
 ```
 
+You can find your Opik API key in the user menu of the [Opik UI](https://www.comet.com/opik/), the workspace name is the first item of the breadcrumbs and often the same as your username.
+
+
 :::tip
 If you are self-hosting the platform, you don't need to set the `OPIK_API_KEY` and `OPIK_WORKSPACE` environment variables. Instead simply set:
 
-```bash
-export OPIK_URL_OVERRIDE="http://localhost:5173/api"
-```
+    export OPIK_URL_OVERRIDE="http://localhost:5173/api"
 :::
 
 ## Integrating with your LLM application
@@ -48,6 +49,6 @@ def your_llm_application(input):
     return output
 ```
 
-To learn more about the `track` decorator, see the [`track` documentation](/tracing/log_traces.md#log-using-function-annotators). Once the traces are logged, you can view them in the OPIK UI:
+To learn more about the `track` decorator, see the [track documentation](/tracing/log_traces.md#log-using-function-annotators). Once the traces are logged, you can view them in the OPIK UI:
 
 ![Opik Traces](/img/home/traces_page_for_quickstart.png)

apps/opik-documentation/documentation/docs/self-host/self_hosting_opik.md

@@ -37,6 +37,11 @@ opik-server --debug install
 We recommend installing using the `--debug` flag as the installation can take a couple of minutes
 :::
 
+The opik installer has been tested on the following operating systems:
+
+- Ubuntu 22.04
+- MacOS
+
 By default, the installer will install the same version of the Opik as its
 own version (`opik-server -v`). If you want to install a specific version, you
 can specify the version using the `--opik-version` flag:

apps/opik-documentation/documentation/docusaurus.config.ts

@@ -41,7 +41,7 @@ const config: Config = {
           sidebarPath: './sidebars.ts',
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
-          // editUrl:
+          //editUrl:
           //   'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
           routeBasePath: '/', // Set docs as the homepage
         },

apps/opik-documentation/documentation/src/css/components/_code.scss

@@ -0,0 +1,15 @@
+// Inline cde
+.markdown code:not([class]) {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+    margin-right: 0.25rem;
+    margin-left: 0.25rem;
+
+}
+
+.codeBlockContainer_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Container-styles-module {
+    --ifm-global-shadow-lw: none;
+}
+pre code {
+    font-size: .9em !important;
+}
+

apps/opik-documentation/documentation/src/css/components/_content.scss

@@ -24,4 +24,12 @@
 .markdown img {
   border: 1px solid var(--ifm-color-emphasis-300);
   border-radius: 4px;
-}
+}
+
+.markdown a {
+  //color: rgb(0, 107, 230);
+  text-underline-position: from-font; 
+  text-decoration-line: underline; 
+  text-decoration-thickness: 0.5px;
+}
+

apps/opik-documentation/documentation/src/css/custom.scss

@@ -7,6 +7,7 @@
 @use './components/content';
 @use './components/sidebar';
 @use './components/pagination';
+@use './components/code';
 
 /* You can override the default Infima variables here. */
 :root {
@@ -17,7 +18,7 @@
   --ifm-color-primary-light: #33925d;
   --ifm-color-primary-lighter: #359962;
   --ifm-color-primary-lightest: #3cad6e;
-  --ifm-code-font-size: 95%;
+  --ifm-code-font-size: 90%;
 
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 

apps/opik-documentation/documentation/src/theme/DocItem/Content/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import Content from '@theme-original/DocItem/Content';
+import type ContentType from '@theme/DocItem/Content';
+import type {WrapperProps} from '@docusaurus/types';
+import {useLocation} from '@docusaurus/router';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import clsx from 'clsx';
+
+import styles from './styles.module.css';
+
+import Tip from '@theme/Admonition/Icon/Tip';
+
+type Props = WrapperProps<typeof ContentType>;
+
+function NotebookBanner() {
+  const location = useLocation();
+  const {siteConfig} = useDocusaurusContext();
+  console.log(siteConfig);
+
+  const isCookbook = location.pathname.includes('cookbook/');
+  const notebookPath = location.pathname.replace(siteConfig.baseUrl, '/docs/');
+  const githubNotebookPath = `https://github.com/comet-ml/opik/blob/main/apps/opik-documentation/documentation${notebookPath}.ipynb`
+  const colabNotebookPath = `https://colab.research.google.com/github/comet-ml/opik/blob/main/apps/opik-documentation/documentation${notebookPath}.ipynb`
+
+  if (!isCookbook) {
+    return null;
+  } else {
+    return ( 
+      <div
+        className={clsx(
+          styles.notebookBanner,
+          'alert',
+          'alert--success'
+        )}
+      >
+        <div className={styles.bannerContent}>
+          <div className={styles.bannerLeft}>
+            <div className={styles.bannerIcon}>
+              <Tip />
+            </div>
+            <div className={styles.bannerText}>
+              This is a jupyter notebook
+            </div>
+          </div>
+          <div className={styles.bannerRight}>
+            <button
+              className={clsx(
+                styles.notebookBannerButton,
+              )}
+              type="button"
+              onClick={() => window.open(githubNotebookPath, '_blank')}>
+              Open in GitHub
+            </button>
+            <button
+              className={clsx(
+                styles.notebookBannerButton,
+              )}
+              onClick={() => window.open(colabNotebookPath, '_blank')}
+            >
+              Run on Google Colab
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export default function ContentWrapper(props: Props): JSX.Element {
+  return (
+    <>
+      <NotebookBanner />
+      <Content {...props} />
+    </>
+  );
+}

apps/opik-documentation/documentation/src/theme/DocItem/Content/styles.module.css

@@ -0,0 +1,72 @@
+.notebookBanner {
+  padding: 1rem;
+  padding-right: calc(1rem - var(--ifm-alert-border-width));
+  margin-bottom: 1rem;
+}
+
+.bannerContent {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.bannerLeft {
+  display: flex;
+  align-items: center;
+}
+
+.bannerRight {
+  display: flex;
+  gap: 0.5rem;
+}
+
+@media (max-width: 600px) {
+  .bannerLeft {
+    display: none;
+  }
+
+  .bannerRight {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .notebookBannerButton {
+    flex: 1;
+    max-width: calc(50% - 0.25rem); /* Subtracting half of the gap */
+  }
+}
+
+.bannerIcon {
+  display: flex;
+  align-items: center;
+  margin-right: 0.5em;
+}
+
+.bannerIcon svg {
+  display: block;
+  height: 1.2em;
+  width: 1.2em;
+  fill: var(--ifm-alert-foreground-color);
+}
+
+.bannerText {
+  display: flex;
+  align-items: center;
+  font-size: 1em;
+  line-height: 1;
+}
+
+.notebookBannerButton {
+  padding: 0.5rem 1rem;
+  background-color: var(--ifm-color-primary);
+  color: var(--ifm-color-white);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: background-color 0.2s;
+}
+
+.notebookBannerButton:hover {
+  background-color: var(--ifm-color-primary-dark);
+}