Updated roadmap + added Github link to docs (#439)

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

@@ -25,7 +25,12 @@ We are currently working on both improvements to the existing features in Opik a
 - **Evaluation**:
     - [ ] Introduce new task agnostic LLM as a judge evaluation metric
     - [ ] Add dashboard for analyzing experiment results
-    - [ ] Dataset versioning 
+    - [ ] Dataset versioning
+- **Prompt versioning**:
+    - [ ] Add ability to store prompt templates in Opik
+    - [ ] Add ability to version prompt templates in Opik
+    - [ ] Add ability to link prompt versions to logged traces and experiments
+
 
 You can vote on these items as well as suggest new ideas on our [Ideas discussion board](https://github.com/comet-ml/opik/discussions/categories/ideas).
 

apps/opik-documentation/documentation/src/components/GithubStarButton/index.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react';
+import styles from './styles.module.css';
+
+function formatStarCount(count: number): string {
+  if (count >= 1000) {
+    return (count / 1000).toFixed(1) + 'K';
+  }
+  return count.toString();
+}
+
+export default function GithubStarButton() {
+  const [stars, setStars] = useState(0);
+
+  useEffect(() => {
+    fetch('https://api.github.com/repos/comet-ml/opik')
+      .then(response => response.json())
+      .then(data => setStars(data.stargazers_count))
+      .catch(error => console.error('Error fetching GitHub stars:', error));
+  }, []);
+
+  return (
+    <a
+      href="https://github.com/comet-ml/opik"
+      target="_blank"
+      rel="noopener noreferrer"
+      className={styles.githubLink}
+    >
+      <svg height="16" width="16" className={styles.githubIcon} viewBox="0 0 16 16" version="1.1" aria-hidden="true">
+        <path fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
+      </svg>
+      <span className={styles.starCount}>{formatStarCount(stars)}</span>
+    </a>
+  );
+}

apps/opik-documentation/documentation/src/components/GithubStarButton/styles.module.css

@@ -0,0 +1,32 @@
+.githubLink {
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.5rem;
+  margin-left: 1.25rem;
+  background-color: var(--ifm-color-emphasis-200);
+  transition: background-color 0.2s;
+  text-decoration: none;
+  height: 2.25rem;
+}
+
+.githubLink:hover {
+  background-color: var(--ifm-color-emphasis-300);
+}
+
+.githubIcon {
+  fill: var(--ifm-color-emphasis-700);
+  margin-right: 0.5rem;
+}
+
+.starCount {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--ifm-color-emphasis-700);
+}
+
+@media (max-width: 996px) {
+  .githubLink {
+    display: none;
+  }
+}

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useThemeConfig } from '@docusaurus/theme-common';
+import {
+  splitNavbarItems,
+  useNavbarMobileSidebar,
+} from '@docusaurus/theme-common/internal';
+import NavbarItem from '@theme/NavbarItem';
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
+import SearchBar from '@theme/SearchBar';
+import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
+import NavbarLogo from '@theme/Navbar/Logo';
+import NavbarSearch from '@theme/Navbar/Search';
+import GithubStarButton from '@site/src/components/GithubStarButton';
+import styles from './styles.module.css';
+
+function useNavbarItems() {
+  return useThemeConfig().navbar.items;
+}
+
+function NavbarItems({ items }) {
+  return (
+    <>
+      {items.map((item, i) => (
+        <NavbarItem {...item} key={i} />
+      ))}
+    </>
+  );
+}
+
+function NavbarContentLayout({ left, right }) {
+  return (
+    <div className="navbar__inner">
+      <div className="navbar__items">{left}</div>
+      <div className="navbar__items navbar__items--right">{right}</div>
+    </div>
+  );
+}
+
+export default function NavbarContent() {
+  const mobileSidebar = useNavbarMobileSidebar();
+  const items = useNavbarItems();
+  let [leftItems, rightItems] = splitNavbarItems(items);
+
+  return (
+    <NavbarContentLayout
+      left={
+        <>
+          {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
+          <NavbarLogo />
+          <NavbarItems items={leftItems} />
+        </>
+      }
+      right={
+        <>
+          <NavbarItems items={rightItems} />
+          <NavbarColorModeToggle className={styles.colorModeToggle} />
+          <GithubStarButton />
+          <NavbarSearch>
+            <SearchBar />
+          </NavbarSearch>
+        </>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,8 @@
+/*
+Hide color mode toggle in small viewports
+ */
+@media (max-width: 996px) {
+  .colorModeToggle {
+    display: none;
+  }
+}