feat: implement brand-guidelines theme and remote-content plugin

packages/docusaurus-remote-content/CHANGELOG.md

@@ -0,0 +1 @@
+# Change Log

packages/docusaurus-remote-content/README.md

@@ -0,0 +1,3 @@
+# Docusaurus Local Search
+
+TODO.

packages/docusaurus-remote-content/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@acid-info/docusaurus-remote-content",
+  "version": "1.0.0-alpha.0",
+  "description": "Docusaurus remote content",
+  "main": "lib/index.js",
+  "types": "src/plugin.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/acid-info/logos-docusaurus-plugins.git",
+    "directory": "packages/docusaurus-remote-content"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc --build",
+    "watch": "tsc --build --watch",
+    "prepublishOnly": "yarn build"
+  },
+  "dependencies": {
+    "axios": "^1.6.2",
+    "fast-glob": "^3.3.2",
+    "lodash": "^4.17.21",
+    "tmp": "^0.2.1",
+    "unzipper": "^0.10.14"
+  },
+  "engines": {
+    "node": ">=16.14"
+  },
+  "devDependencies": {
+    "@docusaurus/core": "2.4.1",
+    "@docusaurus/module-type-aliases": "2.4.1",
+    "@docusaurus/types": "2.4.1",
+    "@docusaurus/utils": "2.4.1",
+    "@docusaurus/utils-common": "2.4.1",
+    "@docusaurus/utils-validation": "2.4.1",
+    "@types/lodash": "^4.14.186",
+    "@types/tmp": "^0.2.6",
+    "@types/unzipper": "^0.10.9"
+  }
+}

packages/docusaurus-remote-content/src/index.ts

@@ -0,0 +1,169 @@
+import logger from '@docusaurus/logger'
+import type { LoadContext, Plugin } from '@docusaurus/types'
+import axios from 'axios'
+import * as fg from 'fast-glob'
+import * as fs from 'fs'
+import * as fsp from 'fs/promises'
+import * as path from 'path'
+import * as tmp from 'tmp'
+import unzipper from 'unzipper'
+
+const copyFile = async (src: string, dest: string) => {
+  const dirname = path.dirname(dest)
+  if (!fs.existsSync(dirname)) {
+    await fsp.mkdir(dirname, { recursive: true })
+  }
+
+  await fsp.copyFile(src, dest)
+}
+
+const copyContent = async (
+  src: string,
+  dest: string,
+  options?: {
+    keep?: string[]
+    exclude?: string[]
+  },
+) => {
+  const { keep = [], exclude = [] } = options || {}
+
+  const tmpDir = tmp.dirSync({ unsafeCleanup: true })
+
+  if (!fs.existsSync(dest)) await fsp.mkdir(dest, { recursive: true })
+
+  {
+    const filenames = fg.sync(['**/*'], {
+      cwd: src,
+      ignore: exclude,
+      absolute: false,
+    })
+
+    for (const filename of filenames) {
+      const absPath = path.join(src, filename)
+      const stat = await fsp.stat(absPath)
+
+      if (stat.isDirectory()) {
+        await fsp.mkdir(path.join(tmpDir.name, filename), {
+          recursive: true,
+        })
+      } else await copyFile(absPath, path.join(tmpDir.name, filename))
+    }
+  }
+
+  {
+    const filenames = fg.sync(keep, {
+      cwd: dest,
+    })
+
+    for (const filename of filenames) {
+      const absPath = path.join(dest, filename)
+      const stat = await fsp.stat(absPath)
+
+      if (stat.isDirectory()) {
+        await fsp.mkdir(path.join(tmpDir.name, filename), {
+          recursive: true,
+        })
+      } else await copyFile(absPath, path.join(tmpDir.name, filename))
+    }
+  }
+
+  await fsp.rm(dest, { recursive: true, force: true })
+  await fsp.cp(tmpDir.name, dest, { recursive: true })
+
+  tmpDir.removeCallback()
+}
+
+type PluginOptions = {
+  remote: {
+    type: 'zip'
+    url: string
+    dir?: string
+  }
+
+  // The directory in the remote repository containing the content to be copied
+  contentDir: string
+
+  // The directory in the local site to copy the content to
+  outDir: string
+
+  // Exclude files matching these glob patterns
+  exclude?: string[]
+
+  // Keep local files matching these glob patterns
+  keep?: string[]
+
+  // Keep local static files matching these glob patterns
+  keepStatic?: string[]
+}
+
+export default async function remoteContentPlugin(
+  context: LoadContext,
+  options: PluginOptions,
+): Promise<Plugin<undefined>> {
+  const tempDir = tmp.dirSync({ unsafeCleanup: true })
+  const repoDir = path.join(tempDir.name, 'repo')
+  const zipDir = path.join(tempDir.name, 'zip')
+
+  const downloadRemoteContent = async () => {
+    const { remote, contentDir, outDir, exclude = [], keep = [] } = options
+
+    if (remote.type === 'zip') {
+      const zip = await axios
+        .get(remote.url, { responseType: 'stream' })
+        .then((res) => res.data)
+      const dest = unzipper.Extract({ path: zipDir })
+
+      await new Promise((resolve, reject) => {
+        zip.pipe(dest)
+
+        dest.on('close', resolve)
+        dest.on('error', reject)
+      })
+
+      if (remote.dir) {
+        await fsp.rename(path.join(zipDir, remote.dir), repoDir)
+      } else await fsp.rename(zipDir, repoDir)
+    }
+  }
+
+  const copyRemoteContent = async () => {
+    const { remote, contentDir, outDir, exclude = [], keep = [] } = options
+
+    await copyContent(
+      path.join(repoDir, contentDir),
+      path.join(context.siteDir, outDir),
+      {
+        exclude,
+        keep,
+      },
+    )
+
+    await copyContent(
+      path.join(repoDir, 'static'),
+      path.join(context.siteDir, 'static'),
+      {
+        exclude: [],
+        keep: options.keepStatic ?? [],
+      },
+    )
+  }
+
+  try {
+    logger.info`Downloading remote content from ${options.remote.url}`
+    await downloadRemoteContent()
+    await copyRemoteContent()
+    tempDir.removeCallback()
+  } catch (error) {
+    tempDir.removeCallback()
+    console.error(error)
+    logger.error`Failed to download remote content from ${options.remote.url}`
+
+    process.exit(1)
+  }
+
+  return {
+    name: 'docusaurus-remote-content',
+  }
+}
+
+export { type PluginOptions }

packages/docusaurus-remote-content/src/plugin.d.ts

@@ -0,0 +1 @@
+export type * from './index'

packages/docusaurus-remote-content/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "incremental": true,
+    "tsBuildInfoFile": "./lib/.tsbuildinfo",
+    "rootDir": "src",
+    "outDir": "lib",
+    "lib": ["DOM"]
+  },
+  "include": ["src"],
+  "exclude": ["src/theme", "**/__tests__/**"]
+}

packages/logos-docusaurus-brand-guidelines-theme/README.md

@@ -0,0 +1 @@
+# Logos Docusaurus Brand Guidelines Theme

packages/logos-docusaurus-brand-guidelines-theme/gulpfile.js

@@ -0,0 +1,88 @@
+const _ = require('lodash')
+
+const gulp = require('gulp')
+const path = require('path')
+const merge = require('merge2')
+const rimraf = require('rimraf')
+const ts = require('gulp-typescript')
+const TscWatch = require('tsc-watch/client')
+const sourcemaps = require('gulp-sourcemaps')
+const syncDirectory = require('sync-directory')
+const { replaceTscAliasPaths } = require('tsc-alias')
+
+const project = ts.createProject('./tsconfig.client.json', {
+  declaration: true,
+  isolatedModules: false,
+})
+
+const SOURCE_DIR = project.config.compilerOptions.rootDir ?? 'src'
+const OUT_DIR = project.config.compilerOptions.outDir ?? 'lib'
+
+const sourceDir = path.resolve('./', SOURCE_DIR)
+const outDir = path.resolve('./', OUT_DIR)
+
+const clean = async (cb) => {
+  rimraf(outDir, cb)
+}
+
+const build = (cb) => {
+  return gulp.series(buildClient, copyFiles, postBuild, buildServer)(cb)
+}
+
+const buildClient = () => {
+  const compiled = project.src().pipe(sourcemaps.init()).pipe(project())
+
+  return merge(compiled.dts, compiled.js.pipe(sourcemaps.write())).pipe(
+    gulp.dest(outDir),
+  )
+}
+
+const replaceTsAliasPaths = () =>
+  replaceTscAliasPaths({
+    configFile: './tsconfig.client.json',
+  })
+
+const postBuild = (done) =>
+  gulp.series((cb) => replaceTsAliasPaths().finally(cb))(done)
+
+const buildServer = () => {
+  const project = ts.createProject('./tsconfig.json', {
+    isolatedModules: false,
+  })
+
+  const compiled = project.src().pipe(project())
+
+  return merge(compiled.dts, compiled.js).pipe(gulp.dest(outDir))
+}
+
+const syncDirectories = async (watch = false) => {
+  syncDirectory.async(sourceDir, outDir, {
+    watch,
+    verbose: 1,
+    exclude: [/.*\.(ts|tsx)$/],
+  })
+}
+
+const watch = async () => {
+  syncDirectories(true)
+
+  const watch = new TscWatch()
+
+  watch.on('success', async () => {
+    await postBuild()
+  })
+
+  watch.start('--build')
+}
+
+const copyFiles = (cb) => {
+  syncDirectories(false).finally(cb)
+}
+
+gulp.task('build', build)
+gulp.task('watch', watch)
+gulp.task('clean', clean)
+gulp.task('build-server', buildServer)
+gulp.task('build-client', buildClient)
+gulp.task('post-build', postBuild)
+gulp.task('copy-files', copyFiles)

packages/logos-docusaurus-brand-guidelines-theme/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@acid-info/logos-docusaurus-brand-guidelines-theme",
+  "version": "1.0.0-alpha.0",
+  "description": "",
+  "main": "lib/index.js",
+  "types": "src/theme.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/acid-info/logos-docusaurus-plugins.git",
+    "directory": "packages/logos-docusaurus-brand-guidelines-theme"
+  },
+  "license": "MIT",
+  "scripts": {
+    "clean": "yarn gulp clean",
+    "prebuild": "yarn clean",
+    "build": "yarn gulp build",
+    "watch": "yarn gulp watch",
+    "build:client": "yarn gulp build-client",
+    "build:server": "yarn gulp build-server",
+    "prepublishOnly": "yarn clean && yarn build"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@acid-info/logos-docusaurus-theme": "1.0.0-alpha.121",
+    "@types/lodash": "^4.14.186",
+    "@types/mdx-js__react": "^1.5.5",
+    "@types/three": "^0.152.1",
+    "glob": "^10.3.10",
+    "react-docgen": "^7.0.0",
+    "react-docgen-markdown-renderer": "^2.1.3",
+    "sass": "^1.55.0",
+    "tsc-alias": "^1.7.0",
+    "tsc-watch": "^5.0.3"
+  },
+  "peerDependencies": {
+    "react": "^16.8.4 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0",
+    "@acid-info/logos-docusaurus-theme": "1.0.0-alpha.121"
+  },
+  "engines": {
+    "node": ">=16.14"
+  }
+}

packages/logos-docusaurus-brand-guidelines-theme/src/client/components/mdx/ColorCard/ColorCard.module.scss

@@ -0,0 +1,28 @@
+.root {
+  width: 100px;
+  border: 1px solid rgb(var(--lsd-border-primary));
+}
+
+.root.fullWidth {
+  width: 100%;
+}
+
+.root .color {
+  width: 100%;
+  height: 130px;
+  border-bottom: 1px solid rgb(var(--lsd-border-primary));
+}
+
+.root .info {
+  padding: 16px;
+}
+
+.root .title {
+  margin-bottom: 16px;
+}
+
+.root .variables {
+  display: grid;
+  gap: 8px 16px;
+  grid-template: auto / auto 1fr;
+}