FEE-777 add guide to Obsidian bases

CONTRIBUTING.md

@@ -61,6 +61,8 @@ Flat legacy redirects, such as `/docs/obsidian/<slug>` to `/docs/obsidian/<secti
 
 Use existing Nextra Markdown, MDX, and `nextra/components` features for styling and layout before proposing anything custom. For example, use Nextra callouts, cards, steps, tabs, tables, and file trees when those fit the content.
 
+For discourse candidate tag pills, use the existing global MDX component: `<NodeTag type="clm" />`, `<NodeTag type="evd" />`, or `<NodeTag type="que" />`. Allowed `type` values are `que`, `clm`, `evd`, `src`, `hyp`, `res`, and `iss`. Use a `.mdx` file when a page needs `NodeTag`, and do not add one-off tag styling or CSS.
+
 If the docs need a styling or presentation feature that Nextra does not currently provide, create a separate Linear ticket to add that Nextra functionality. Do not include theme, layout, route, component, or CSS changes in a content-only docs update.
 
 Preferred: Use the `$update-user-docs` skill to update plugin docs. Detailed guidance for plugin docs lives next to the `$update-user-docs` skill:

apps/website/app/(nextra)/nextra-css.css

@@ -4,6 +4,14 @@
   --nextra-content-width: 90rem;
 }
 
+.docs-bordered-image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border: 1px solid rgb(203 213 225);
+  margin-top: 1.25em;
+}
+
 .nextra-reset,
 .nextra-search-results {
   --nextra-primary-hue: 212deg;

apps/website/app/components/docs/NodeTag.tsx

@@ -0,0 +1,57 @@
+import type { CSSProperties, ReactElement, ReactNode } from "react";
+
+const NODE_TAG_COLORS = {
+  que: "#99890E", // Question
+  clm: "#7DA13E", // Claim
+  evd: "#DB134A", // Evidence
+  src: "#3B82F6", // Source
+  hyp: "#8CE99A", // Hypothesis
+  res: "#4DABF7", // Result
+  iss: "#E599F7", // Issue
+} as const;
+
+export type NodeTagType = keyof typeof NODE_TAG_COLORS;
+
+const NODE_TAG_TYPES = Object.keys(NODE_TAG_COLORS) as NodeTagType[];
+
+const isNodeTagType = (type: unknown): type is NodeTagType =>
+  typeof type === "string" && type in NODE_TAG_COLORS;
+
+const getTextColor = (backgroundColor: string): string => {
+  const hex = backgroundColor.replace("#", "");
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5
+    ? "#000000"
+    : "#FFFFFF";
+};
+
+type NodeTagProps = {
+  type: NodeTagType;
+  children?: ReactNode;
+};
+
+export const NodeTag = ({ type, children }: NodeTagProps): ReactElement => {
+  if (!isNodeTagType(type)) {
+    throw new Error(
+      `Invalid NodeTag type "${String(type)}". Expected one of: ${NODE_TAG_TYPES.join(", ")}.`,
+    );
+  }
+
+  const backgroundColor = NODE_TAG_COLORS[type];
+
+  const style: CSSProperties = {
+    backgroundColor,
+    color: getTextColor(backgroundColor),
+    padding: "1px 10px",
+    borderRadius: "999px",
+    fontSize: "0.85em",
+    fontWeight: 500,
+    display: "inline-block",
+    whiteSpace: "nowrap",
+  };
+
+  return <span style={style}>{children ?? `#${type}-candidate`}</span>;
+};

apps/website/content/obsidian/use-cases/_meta.ts

@@ -1,10 +1,13 @@
 import type { MetaRecord } from "nextra";
 
 const meta: MetaRecord = {
-  "literature-reviewing": "Literature review",
-  "research-roadmapping": "Research notes",
-  "reading-clubs": "Reading clubs and seminars",
-  "lab-notebooks": "Lab notebooks",
+  "build-utilize-personal-knowledge-base":
+    "Build and Utilize a Personal Knowledge Base",
+  "synthesize-insights-from-literature":
+    "Synthesize Insights from the Literature",
+  "share-your-ideas-and-research": "Share your ideas & research",
+  "track-your-projects-and-experiments": "Track your Projects and Experiments",
+  "experiment-tracking": "Experiment Tracking",
 };
 
 export default meta;