docs: Improve structure and navigation (parent issue #160)

app/blog/[...slug]/page.tsx

@@ -127,7 +127,10 @@ export default async function Page({ params }: { params: { slug: string[] } }) {
         toc={post.toc}
       >
         <MDXLayoutRenderer code={post.body.code} components={components} toc={post.toc} />
-        <PageFeedback />
+        <PageFeedback 
+          lastUpdated={post.lastmod || post.date}
+          author={authorDetails[0]?.name}
+        />
       </Layout>
     </>
   )

app/comparisons/[...slug]/page.tsx

@@ -129,7 +129,10 @@ export default async function Page({ params }: { params: { slug: string[] } }) {
         toc={post.toc}
       >
         <MDXLayoutRenderer code={post.body.code} components={components} toc={post.toc} />
-        <PageFeedback />
+        <PageFeedback 
+          lastUpdated={post.lastmod || post.date}
+          author={authorDetails[0]?.name}
+        />
       </Layout>
     </>
   )

app/guides/[...slug]/page.tsx

@@ -141,7 +141,10 @@ export default async function Page({ params }: { params: { slug: string[] } }) {
         toc={post.toc}
       >
         <MDXLayoutRenderer code={post.body.code} components={components} toc={post.toc} />
-        <PageFeedback />
+        <PageFeedback 
+          lastUpdated={post.lastmod || post.date}
+          author={authorDetails[0]?.name}
+        />
       </Layout>
 
       {/* Render GrafanaVsSigNozFloatingCard if the slug contains Grafana or Prometheus */}

app/opentelemetry/[...slug]/page.tsx

@@ -118,7 +118,10 @@ export default async function Page({ params }: { params: { slug: string[] } }) {
         toc={post.toc}
       >
         <MDXLayoutRenderer code={post.body.code} components={components} toc={post.toc} />
-        <PageFeedback />
+        <PageFeedback 
+          lastUpdated={post.lastmod || post.date}
+          author={authorDetails[0]?.name}
+        />
       </Layout>
     </>
   )

components/DocContent/DocContent.tsx

@@ -8,8 +8,8 @@ import DocsPrevNext from '../DocsPrevNext/DocsPrevNext'
 import TableOfContents from '../DocsTOC/DocsTOC'
 import TrySigNozFloatingCard from '../TrySigNozFloatingCard/TrySigNozFloatingCard'
 import { QUERY_PARAMS } from '@/constants/queryParams'
-import { useSearchParams } from 'next/navigation'
 import { ONBOARDING_SOURCE } from '@/constants/globals'
+import { useSearchParams } from 'next/navigation'
 
 const DocContent: React.FC<{
   title: string
@@ -25,7 +25,10 @@ const DocContent: React.FC<{
       <div className={`doc-content ${source === ONBOARDING_SOURCE ? 'product-onboarding' : ''}`}>
         <h2 className="mt-2 text-3xl">{title}</h2>
         <MDXLayoutRenderer code={post.body.code} components={components} toc={post.toc || []} />
-        <PageFeedback />
+        <PageFeedback 
+          lastUpdated={post.lastmod || post.date}
+          author={post.authors?.[0]}
+        />
         <DocsPrevNext />
       </div>
 

components/DocContributors/DocContributors.module.css

@@ -0,0 +1,117 @@
+.container {
+  margin-top: 40px;
+  padding-top: 20px;
+  border-top: 1px solid #555;
+}
+
+.editSection {
+  margin-bottom: 20px;
+}
+
+.editLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background-color: #222;
+  border: 1px solid #555;
+  border-radius: 4px;
+  color: #f5f5f5;
+  text-decoration: none;
+  transition: all 0.2s ease;
+}
+
+.editLink:hover {
+  background-color: #333;
+  border-color: #777;
+  transform: translateY(-1px);
+}
+
+.lastEditorSection {
+  margin: 20px 0;
+  padding: 12px;
+  background-color: #222;
+  border: 1px solid #555;
+  border-radius: 4px;
+}
+
+.lastEditorInfo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #777;
+  font-size: 14px;
+}
+
+.lastEditorLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #f5f5f5;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.lastEditorLink:hover {
+  color: #4e74f8;
+}
+
+.lastEditorAvatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+}
+
+.lastEditorName {
+  font-weight: 500;
+}
+
+.lastEditDate {
+  color: #777;
+}
+
+.contributorsSection {
+  margin-top: 20px;
+}
+
+.contributorsTitle {
+  font-size: 14px;
+  color: #777;
+  text-transform: uppercase;
+  margin-bottom: 12px;
+}
+
+.contributorsList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.contributorLink {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  background-color: #222;
+  border: 1px solid #555;
+  border-radius: 20px;
+  color: #f5f5f5;
+  text-decoration: none;
+  transition: all 0.2s ease;
+}
+
+.contributorLink:hover {
+  background-color: #333;
+  border-color: #777;
+  transform: translateY(-1px);
+}
+
+.contributorAvatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+}
+
+.contributorName {
+  font-size: 14px;
+} 

components/DocContributors/DocContributors.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import Link from 'next/link'
+import { Edit2, Clock } from 'lucide-react'
+import styles from './DocContributors.module.css'
+
+interface Contributor {
+  login: string
+  avatar_url: string
+  html_url: string
+}
+
+interface LastEditor {
+  name: string
+  date: string
+  avatar_url: string
+  profile_url: string
+}
+
+interface DocContributorsProps {
+  filePath: string
+  contributors?: Contributor[]
+  lastEditor?: LastEditor
+}
+
+const DocContributors: React.FC<DocContributorsProps> = ({ filePath, contributors = [], lastEditor }) => {
+  const editUrl = `https://github.com/SigNoz/signoz-web/edit/main/${filePath}`
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.editSection}>
+        <Link href={editUrl} target="_blank" className={styles.editLink}>
+          <Edit2 size={16} />
+          <span>Edit this page</span>
+        </Link>
+      </div>
+
+      {lastEditor && (
+        <div className={styles.lastEditorSection}>
+          <div className={styles.lastEditorInfo}>
+            <Clock size={14} />
+            <span>Last updated by</span>
+            <Link href={lastEditor.profile_url} target="_blank" className={styles.lastEditorLink}>
+              <img
+                src={lastEditor.avatar_url}
+                alt={`${lastEditor.name}'s avatar`}
+                className={styles.lastEditorAvatar}
+              />
+              <span className={styles.lastEditorName}>{lastEditor.name}</span>
+            </Link>
+            <span className={styles.lastEditDate}>on {lastEditor.date}</span>
+          </div>
+        </div>
+      )}
+
+      {contributors.length > 0 && (
+        <div className={styles.contributorsSection}>
+          <h4 className={styles.contributorsTitle}>Contributors</h4>
+          <div className={styles.contributorsList}>
+            {contributors.map((contributor) => (
+              <Link
+                key={contributor.login}
+                href={contributor.html_url}
+                target="_blank"
+                className={styles.contributorLink}
+              >
+                <img
+                  src={contributor.avatar_url}
+                  alt={`${contributor.login}'s avatar`}
+                  className={styles.contributorAvatar}
+                />
+                <span className={styles.contributorName}>{contributor.login}</span>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DocContributors 

components/PageFeedback/PageFeedback.module.css

@@ -16,11 +16,24 @@
     margin: 40px 0 20px; /* Increased margin for better spacing */
   }
 
+  .metaInfo {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    font-size: 0.875rem;
+    color: #bbb;
+    margin-bottom: 20px;
+  }
+
+  .lastUpdated, .author {
+    color: #bbb;
+  }
+
   .title {
     margin-top: 0;
     color: #f5f5f5; /* Light grey color for the title */
     font-size: 18px;
-    margin-bottom: 10px;
+    margin-bottom: 20px;
     text-align: center; /* Center align the title */
   }
 
@@ -71,42 +84,74 @@
     cursor: pointer;
   }
 
+  .optionText {
+    color: #f5f5f5;
+  }
+
   .optionDescription {
-    font-size: 0.875em; /* Slightly smaller font for the description */
-    color: #bbb; /* Light grey color for the description */
-    margin-left: 28px; /* Align with the radio button */
+    font-size: 0.875em;
+    color: #bbb;
+    margin-left: 28px;
   }
 
   .textArea {
     width: 100%;
     padding: 8px;
     margin-top: 10px;
-    background-color: #333; /* Dark grey background for the text area */
-    color: #f5f5f5; /* Light grey text color */
-    border: 1px solid #777; /* Grey border for better contrast */
+    background-color: #333;
+    color: #f5f5f5;
+    border: 1px solid #777;
     border-radius: 4px;
     resize: vertical;
-    margin-left: 28px; /* Align with the radio button */
+    margin-left: 28px;
   }
 
   .textArea::placeholder {
-    color: #bbb; /* Lighter placeholder text color */
+    color: #bbb;
   }
 
   .submitButton {
     align-self: flex-start;
-    background-color: #4CAF50; /* Green background */
+    background-color: #4CAF50;
     color: white;
     border: none;
     padding: 10px 20px;
     font-size: 16px;
     border-radius: 4px;
     cursor: pointer;
     transition: background-color 0.3s ease;
-    margin-left: 28px; /* Align with the radio button */
+    margin-left: 28px;
   }
 
   .submitButton:hover {
-    background-color: #4e74f8; /* Darker green on hover */
+    background-color: #4e74f8;
+  }
+
+  .ratingContainer {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    margin-bottom: 30px;
+  }
+
+  .starButton {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+  }
+
+  .starButton:hover {
+    transform: scale(1.1);
+  }
+
+  .star {
+    color: #555;
+    transition: color 0.2s ease;
+  }
+
+  .starFilled {
+    color: #ffd700;
   }