Merge pull request #19 from complexdatacollective/port-documentation-app

Port documentation

apps/analytics-web/components.json

@@ -4,7 +4,7 @@
   "rsc": true,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.js",
+    "config": "tailwind.config.ts",
     "css": "app/globals.css",
     "baseColor": "slate",
     "cssVariables": true

apps/analytics-web/package.json

@@ -35,20 +35,19 @@
     "lucide-react": "^0.292.0",
     "next": "14.0.1",
     "papaparse": "^5.4.1",
-    "react": "^18",
+    "react": "^18.2.0",
     "react-dom": "^18",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.2.0",
-    "@next/eslint-plugin-next": "^13.4.19",
     "@testing-library/react": "^14.1.2",
     "@types/node": "^20.5.2",
     "@types/papaparse": "^5.3.14",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.2.1",
     "drizzle-kit": "^0.20.13",
     "eslint-config-custom": "workspace:*",

apps/documentation/.env.example

@@ -0,0 +1,5 @@
+NEXT_PUBLIC_DOCS_PATH="docs"
+NEXT_PUBLIC_ALGOLIA_APPLICATION_ID=""
+NEXT_PUBLIC_ALGOLIA_INDEX_NAME=""
+NEXT_PUBLIC_ALGOLIA_API_KEY=""
+NEXT_PUBLIC_MENDABLE_ANON_KEY=""

apps/documentation/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["custom/next"],
+};

apps/documentation/.github/workflows/nextjs.yml

@@ -0,0 +1,76 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: write
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 'lts/*'
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup next cache
+        with:
+          path: |
+            ${{ env.STORE_PATH }}
+            ${{ github.workspace }}/.next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build with Next.js
+        run: pnpm run build
+        env:
+          NEXT_PUBLIC_DOCS_PATH: ${{ secrets.NEXT_PUBLIC_DOCS_PATH }}
+          NEXT_PUBLIC_ALGOLIA_APPLICATION_ID: ${{ secrets.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID }}
+          NEXT_PUBLIC_ALGOLIA_INDEX_NAME: ${{ secrets.NEXT_PUBLIC_ALGOLIA_INDEX_NAME }}
+          NEXT_PUBLIC_ALGOLIA_API_KEY: ${{ secrets.NEXT_PUBLIC_ALGOLIA_API_KEY }}
+          NEXT_PUBLIC_MENDABLE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_MENDABLE_ANON_KEY }}
+
+      - name: Add .nojekyll file
+        run: touch ./out/.nojekyll
+      - name: Deploy
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages
+          folder: out

apps/documentation/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.jsfind . -name .DS_Store -delete
+
+# testing
+/coverage
+
+# next.js
+/.next/
+
+# production
+/build
+/out
+
+# misc
+.DS_Store
+._.DS_Store
+**/.DS_Store
+**/._.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/documentation/.npmrc

@@ -0,0 +1 @@
+enable-pre-post-scripts=true

apps/documentation/README.md

@@ -0,0 +1,52 @@
+# Network Canvas Documentation
+
+Welcome to the Network Canvas documentation website—a comprehensive resource for users of Network Canvas, a suite of applications designed to facilitate the collection of social network data.
+
+## Overview
+
+This documentation site covers various aspects of Network Canvas, including detailed information about its primary applications and related products. Whether you're a researcher, developer, or user, this documentation aims to provide you with the necessary information to make the most out of Network Canvas.
+
+## Development
+
+To run the app locally:
+
+1. Set up the required environment variables in the `.env` file (refer to the template in `.env.example`).
+2. Run `pnpm run build` to generate the static sidebar JSON and Algolia search index.
+
+## Features
+
+### 1. Product Coverage
+
+- **Network Canvas Core:** The suite includes three applications tailored to assist researchers in social network data collection.
+
+- **Fresco (Interviewer in Browser):** Explore detailed documentation on Fresco, a key component of Network Canvas, providing an in-browser interviewer for streamlined data collection.
+
+### 2. Search Functionality
+
+Effortlessly find the information you need with the top-level search bar. Instantly locate relevant documentation, making navigation and discovery a breeze.
+
+### 3. Table of Contents
+
+For in-depth articles, utilize the convenient Table of Contents component located on the right side of the page. Jump directly to the sections you need, enhancing your reading experience.
+
+### 4. Sidebar Navigation
+
+Navigate seamlessly through the documentation using the intuitive sidebar located on the left. Access different sections and categories with ease.
+
+### 5. AI Assistant
+
+Experience enhanced productivity with our AI Assistant. Trained on the documentation, it can generate precise answers based on the content, aiding users in finding information quickly.
+
+### 6. Language Localization
+
+Tailor your experience with language localization support. Currently supporting English and Russian, this feature ensures a global audience can access documentation in their preferred language.
+
+### 7. Dark and Light Modes
+
+Choose between dark and light modes to suit your preferences and reduce eye strain during extended reading sessions.
+
+## Get Started
+
+Explore the Network Canvas documentation to unlock the full potential of social network data collection. Whether you're a new user or an experienced researcher, this documentation is here to support you
+
+Thank you for choosing Network Canvas!

apps/documentation/app/[locale]/[project]/[...docPath]/_components/TOCLink.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import useHighlighted from '~/hooks/useHighlighted';
+import { type HeadingNode } from '~/lib/tableOfContents';
+import Link from 'next/link';
+import { useEffect, useRef } from 'react';
+
+const TOCLink = ({ node }: { node: HeadingNode }) => {
+  const ref = useRef<HTMLAnchorElement>(null);
+  const [highlighted] = useHighlighted(node.data.id);
+
+  useEffect(() => {
+    if (highlighted && ref.current) {
+      ref.current.scrollIntoView({
+        behavior: 'auto',
+        block: 'nearest',
+        inline: 'nearest',
+      });
+    }
+  }, [highlighted]);
+
+  return (
+    <Link
+      ref={ref}
+      href={`#${node.data.id}`}
+      className={`block ${
+        node.depth === 2 ? 'text-base' : 'text-sm'
+      } py-1 transition-colors hover:text-black dark:hover:text-white ${
+        highlighted ? 'text-black dark:text-white' : 'text-slate-400'
+      }`}
+    >
+      {node.value}
+    </Link>
+  );
+};
+
+export default TOCLink;

apps/documentation/app/[locale]/[project]/[...docPath]/_components/TableOfContents.tsx

@@ -0,0 +1,36 @@
+import { type HeadingNode } from '~/lib/tableOfContents';
+import TOCLink from './TOCLink';
+
+interface TableOfContentsProps {
+  nodes: HeadingNode[] | null;
+}
+
+const TableOfContents = ({ nodes }: TableOfContentsProps) => {
+  if (!nodes) return null;
+
+  return (
+    <div
+      className={`toc-component group overflow-x-hidden pb-5 ${
+        nodes.length > 10 && 'h-[750px]'
+      } min-w-[300px] overflow-y-auto`}
+    >
+      <h3 className="text-sm uppercase text-slate-400">Table of contents</h3>
+      {renderNodes(nodes)}
+    </div>
+  );
+};
+
+function renderNodes(nodes: HeadingNode[]) {
+  return (
+    <ul className="mx-6">
+      {nodes.map((node) => (
+        <li key={node.data.id}>
+          <TOCLink node={node} />
+          {node.children?.length > 0 && renderNodes(node.children)}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default TableOfContents;

apps/documentation/app/[locale]/[project]/[...docPath]/not-found.tsx

@@ -0,0 +1,11 @@
+import Link from 'next/link';
+
+export default function NotFound() {
+  return (
+    <div>
+      <h2>Not Found</h2>
+      <p>Could not find requested resource</p>
+      <Link href="/">Return Home</Link>
+    </div>
+  );
+}