Add HPL Docsite (#586)

* Add HPL Docsite

* Add Procfile

* Add dev script to root package

* Fix drawer

* undo lazy transactions sdk

* Fix builds

* Fix git ignore

* Address comments

* Update showcase and remove dispatches from getting started

* Replace claim all with claim one hotspot

.gitignore

@@ -25,3 +25,4 @@ accounts
 !.yarn/plugins
 !.yarn/sdks
 !.yarn/versions
+!packages/docsite/src/data

Procfile

@@ -0,0 +1 @@
+web: yarn workspace hpl-docs start

package.json

@@ -13,11 +13,14 @@
     "release:canary": "lerna publish --canary --preid next --dist-tag next --force-publish='*' --no-push --no-git-tag-version --no-verify-access --yes",
     "lint:fix": "prettier */*.js \"*/**/*{.js,.ts}\" -w",
     "lint": "prettier */*.js \"*/**/*{.js,.ts}\" --check",
-    "build": "lerna run --parallel prebuild && tsc --build",
+    "build": "lerna run --parallel prebuild && tsc --build && yarn generate-idl-docs",
     "watch": "lerna run --parallel prebuild && tsc --build --watch",
     "clean": "npx shx rm -rf {.,packages/*}/{node_modules,lib,dist}",
     "fmt": "cargo fmt --check",
-    "clippy": "cargo clippy --all-targets -- -D warnings -A clippy::result_large_err -A clippy::too_many_arguments"
+    "clippy": "cargo clippy --all-targets -- -D warnings -A clippy::result_large_err -A clippy::too_many_arguments",
+    "generate-idl-docs": "ts-node -T scripts/generate-idl-docs.ts",
+    "heroku-postbuild": "npm run build -w hpl-docs",
+    "docs-dev": "yarn workspace hpl-docs dev"
   },
   "workspaces": [
     "packages/*"
@@ -56,6 +59,7 @@
     "prettier": "^2.6.2",
     "shx": "^0.3.4",
     "ts-mocha": "^10.0.0",
+    "ts-node": "^10.4.0",
     "typescript": "^5.2.2"
   },
   "packageManager": "[email protected]"

packages/docsite/.gitignore

@@ -0,0 +1,2 @@
+.next
+node_modules

packages/docsite/README.md

@@ -0,0 +1 @@
+# Governance docs

packages/docsite/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}

packages/docsite/next.config.mjs

@@ -0,0 +1,15 @@
+import withMarkdoc from '@markdoc/next.js'
+import withSearch from './src/markdoc/search.mjs'
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  pageExtensions: ['js', 'jsx', 'md'],
+  experimental: {
+    scrollRestoration: true,
+  },
+}
+
+export default withSearch(
+  withMarkdoc({ schemaPath: './src/markdoc' })(nextConfig)
+)

packages/docsite/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "hpl-docs",
+  "version": "0.0.5",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "contributors": [
+    "Luis Perrone"
+  ],
+  "browserslist": "defaults, not ie <= 11",
+  "dependencies": {
+    "@algolia/autocomplete-core": "^1.9.2",
+    "@headlessui/react": "^1.7.13",
+    "@markdoc/markdoc": "0.1.7",
+    "@markdoc/next.js": "0.1.6",
+    "@sindresorhus/slugify": "^2.1.0",
+    "@tailwindcss/typography": "^0.5.7",
+    "aos": "^2.3.4",
+    "autoprefixer": "^10.4.12",
+    "clsx": "^1.2.1",
+    "fast-glob": "^3.2.12",
+    "flexsearch": "^0.7.31",
+    "focus-visible": "^5.2.0",
+    "next": "13.4.2",
+    "postcss-focus-visible": "^6.0.4",
+    "postcss-import": "^14.1.0",
+    "prism-react-renderer": "^1.3.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-highlight-words": "^0.20.0",
+    "simple-functional-loader": "^1.2.1",
+    "tailwindcss": "^3.3.0"
+  },
+  "devDependencies": {
+    "eslint": "8.26.0",
+    "eslint-config-next": "13.0.2",
+    "prettier": "^2.8.7",
+    "prettier-plugin-tailwindcss": "^0.2.6",
+    "sharp": "^0.32.0"
+  }
+}

packages/docsite/postcss.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    tailwindcss: {},
+    'postcss-focus-visible': {
+      replaceWith: '[data-focus-visible-added]',
+    },
+    autoprefixer: {},
+  },
+}

packages/docsite/prettier.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  singleQuote: true,
+  semi: false,
+  plugins: [require('prettier-plugin-tailwindcss')],
+}

packages/docsite/public/fonts/lexend.txt

@@ -0,0 +1,93 @@
+Copyright 2018 The Lexend Project Authors (https://github.com/googlefonts/lexend), with Reserved Font Name “RevReading Lexend”.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

packages/docsite/src/components/Button.jsx

@@ -0,0 +1,19 @@
+import Link from 'next/link'
+import clsx from 'clsx'
+
+const styles = {
+  primary:
+    'rounded-full bg-purple-300 py-2 px-4 text-sm font-semibold text-zinc-900 hover:bg-purple-200 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-300/50 active:bg-purple-500',
+  secondary:
+    'rounded-full bg-zinc-800 py-2 px-4 text-sm font-medium text-white hover:bg-zinc-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-zinc-400',
+}
+
+export function Button({ variant = 'primary', className, href, ...props }) {
+  className = clsx(styles[variant], className)
+
+  return href ? (
+    <Link href={href} className={className} {...props} />
+  ) : (
+    <button className={className} {...props} />
+  )
+}

packages/docsite/src/components/Callout.jsx

@@ -0,0 +1,40 @@
+import clsx from 'clsx'
+
+import { Icon } from '@/components/Icon'
+
+const styles = {
+  note: {
+    container:
+      'bg-purple-800/5 ring-purple-500/20',
+    title: 'text-purple-400',
+    body: '[--tw-prose-background:theme(colors.purple.50)] prose-a:text-purple-900 text-purple-100 prose-code:text-purple-300',
+  },
+  warning: {
+    container:
+      'bg-amber-800/5 ring-amber-500/20',
+    title: 'text-amber-900 dark:text-amber-500',
+    body: 'text-amber-800 [--tw-prose-underline:theme(colors.amber.400)] [--tw-prose-background:theme(colors.amber.50)] prose-a:text-amber-900 prose-code:text-amber-900 dark:text-zinc-300 dark:[--tw-prose-underline:theme(colors.purple.700)] dark:prose-code:text-zinc-300',
+  },
+}
+
+const icons = {
+  note: (props) => <Icon icon="lightbulb" {...props} />,
+  warning: (props) => <Icon icon="warning" color="amber" {...props} />,
+}
+
+export function Callout({ type = 'note', title, children }) {
+  let IconComponent = icons[type]
+  return (
+    <div className={clsx('my-6 flex gap-2.5 rounded-2xl p-6 ring-1', styles[type].container)}>
+      <IconComponent className="h-8 w-8 flex-none" />
+      <div className="ml-4 flex-auto">
+        <p className={clsx('m-0 font-display text-xl', styles[type].title)}>
+          {title}
+        </p>
+        <div className={clsx('prose mt-2.5', styles[type].body)}>
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}

packages/docsite/src/components/Fence.jsx

@@ -0,0 +1,30 @@
+import { Fragment } from 'react'
+import Highlight, { defaultProps } from 'prism-react-renderer'
+
+export function Fence({ children, language }) {
+  return (
+    <Highlight
+      {...defaultProps}
+      code={children.trimEnd()}
+      language={language}
+      theme={undefined}
+    >
+      {({ className, style, tokens, getTokenProps }) => (
+        <pre className={'bg-red-500'} style={style}>
+          <code>
+            {tokens.map((line, lineIndex) => (
+              <Fragment key={lineIndex}>
+                {line
+                  .filter((token) => !token.empty)
+                  .map((token, tokenIndex) => (
+                    <span key={tokenIndex} {...getTokenProps({ token })} />
+                  ))}
+                {'\n'}
+              </Fragment>
+            ))}
+          </code>
+        </pre>
+      )}
+    </Highlight>
+  )
+}