extract theme as separate package @graphprotocol/theme (#336)

Author: Dimitri POSTOLOV

.gitignore

@@ -41,3 +41,4 @@ yarn-error.log*
 
 */public/sitemap*.xml
 .eslintcache
+dist/

.prettierignore

@@ -2,3 +2,4 @@
 .next
 /out/
 pnpm-lock.yaml
+dist/

.prettierrc

@@ -3,28 +3,29 @@
   "private": true,
   "packageManager": "[email protected]",
   "scripts": {
-    "dev": "pnpm --filter @graphprotocol/docs dev",
     "build": "pnpm -r build",
-    "start": "pnpm --filter @graphprotocol/docs start",
-    "export": "pnpm --filter @graphprotocol/docs export",
-    "lint": "pnpm typecheck && eslint --cache --ext .js,.jsx,.ts,.tsx,.mjs --max-warnings 0 . && pnpm prettier:check",
-    "lint:fix": "pnpm typecheck && eslint --cache --ext .js,.jsx,.ts,.tsx,.mjs --fix . && pnpm prettier",
-    "typecheck": "pnpm --filter @graphprotocol/docs typecheck",
-    "prettier": "prettier . --loglevel warn --write",
-    "prettier:check": "prettier . --loglevel warn --check",
+    "dev": "pnpm --filter @graphprotocol/docs dev",
     "docker:build": "DOCKER_BUILDKIT=1 docker build . -t docs --no-cache",
-    "docker:up": "docker run --rm -it -p 3000:80 -v \"$(pwd)/nginx.conf:/etc/nginx/nginx.conf\" docs",
     "docker:clean": "docker builder prune",
-    "prepare": "husky install && chmod +x .husky/*",
+    "docker:up": "docker run --rm -it -p 3000:80 -v \"$(pwd)/nginx.conf:/etc/nginx/nginx.conf\" docs",
+    "export": "pnpm --filter @graphprotocol/docs export",
+    "lint": "pnpm typecheck && eslint --ignore-path .gitignore --cache --ext .js,.jsx,.ts,.tsx,.mjs --max-warnings 0 . && pnpm prettier:check",
+    "lint:fix": "pnpm typecheck && eslint --ignore-path .gitignore --cache --ext .js,.jsx,.ts,.tsx,.mjs --fix . && pnpm prettier",
     "pre-commit": "lint-staged --concurrent false",
-    "pre-push": "pnpm build"
+    "pre-push": "pnpm build",
+    "prepare": "husky install && chmod +x .husky/*",
+    "prettier": "prettier . --loglevel warn --write",
+    "prettier:check": "prettier . --loglevel warn --check",
+    "start": "pnpm --filter @graphprotocol/docs start",
+    "typecheck": "pnpm --filter @graphprotocol/docs typecheck"
   },
   "devDependencies": {
     "@edgeandnode/eslint-config": "^1.3.1",
     "eslint": "^8.36.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.0",
     "prettier": "^2.8.6",
+    "prettier-plugin-pkg": "^0.17.1",
     "typescript": "5.0.2"
   },
   "lint-staged": {

package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@graphprotocol/nextra-theme",
+  "version": "0.0.0",
+  "description": "A Nextra theme for The Graph documentation sites.",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup"
+  },
+  "peerDependencies": {
+    "@edgeandnode/components": "^27.4.1",
+    "@emotion/react": "^11.10.6",
+    "next": "^13.2.4",
+    "next-seo": "^5.15.0",
+    "nextra": "^2.3.0",
+    "react-dom": "^18.2.0",
+    "theme-ui": "^0.15.5"
+  },
+  "dependencies": {
+    "@docsearch/react": "^3.3.3",
+    "@radix-ui/react-collapsible": "1.0.2",
+    "@radix-ui/react-visually-hidden": "^1.0.2",
+    "lodash": "^4.17.21",
+    "prism-react-renderer": "^1.3.5",
+    "react-intersection-observer": "^9.4.3",
+    "react-use": "^17.4.0"
+  },
+  "devDependencies": {
+    "@edgeandnode/components": "^27.4.1",
+    "@emotion/react": "^11.10.6",
+    "@types/lodash": "^4.14.191",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "next": "^13.2.4",
+    "next-seo": "^5.15.0",
+    "nextra": "2.3.0",
+    "react": "18.2.0",
+    "react-dom": "^18.2.0",
+    "theme-ui": "^0.15.5",
+    "tsup": "6.7.0"
+  },
+  "sideEffects": false
+}

packages/nextra-theme/package.json

@@ -1,8 +1,8 @@
-import { useI18n } from '@/i18n'
+import { useI18n } from '@edgeandnode/components'
 
 // TODO: Refactor this component
 export const Difficulty = ({ level }: { level: string }) => {
-  const { t } = useI18n()
+  const { t } = useI18n<any>()
 
   return (
     <div

website/components/Blockquote.tsx renamed to packages/nextra-theme/src/components/Blockquote.tsx

@@ -1,17 +1,26 @@
 import { HTMLAttributes, useContext } from 'react'
 
-import { BorderRadius, buildShadow, buildTransition, Flex, Icon, Opacity, Spacing, Text } from '@edgeandnode/components'
+import {
+  BorderRadius,
+  buildShadow,
+  buildTransition,
+  Flex,
+  Icon,
+  Opacity,
+  Spacing,
+  Text,
+  useI18n,
+} from '@edgeandnode/components'
 
 import { Link } from '@/components'
-import { useI18n } from '@/i18n'
 import { NavContext } from '@/layout/NavContext'
 
 export type EditPageLinkProps = {
   mobile?: boolean
 } & Omit<HTMLAttributes<HTMLElement>, 'children'>
 
 export const EditPageLink = ({ mobile = false, ...props }: EditPageLinkProps) => {
-  const { t } = useI18n()
+  const { t } = useI18n<any>()
 
   // If the current page is in a language other than English, link to the English version, as translations are handled by Crowdin
   const { filePath } = useContext(NavContext)!