feat: docs + video support (#207)

* feat: recording and cropping videos * fix: use webm * wip: exploring * wip: s3 * wip: s3 * feat(plugin): using rehype-video
decentralized-identity · Oct 19, 2023 · 37c1f18 · 37c1f18
1 parent f0b9737
commit 37c1f18
Show file tree

Hide file tree

Showing 17 changed files with 229 additions and 39 deletions.
diff --git a/.env.sample b/.env.sample
@@ -0,0 +1 @@
+CYPRESS_RECORD_KEY=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
@@ -35,8 +35,8 @@ jobs:
  # Starts web server for E2E tests - replace with your own server invocation
  # https://docs.cypress.io/guides/continuous-integration/introduction#Boot-your-server
  working-directory: packages/agent-explore
- start: pnpm run -r agent-explore serve --port 3456
- wait-on: 'http://localhost:3456' # Waits for above
+ start: pnpm run -r agent-explore serve --port 3000
+ wait-on: 'http://localhost:3000' # Waits for above
  wait-on-timeout: 120 # Waits for above
  # Records to Cypress Cloud
  # https://docs.cypress.io/guides/cloud/projects#Set-up-a-project-to-record

diff --git a/docs/Agent explorer.md b/docs/Agent explorer.md
@@ -0,0 +1,7 @@
+The Veramo Agent Explorer provides a UI for interacting with Veramo agents and other Decentralized Identifiers (DIDs) and W3C Verifiable Credential tech.
+
+[Demo](https://agent-explorer.s3.amazonaws.com/videos/discovery.mp4?!#title=Demo)
+
+## Features
+
+- [Create BrainShare post](./Creating%20BrainShare%20post.md)
diff --git a/docs/Creating BrainShare post.md b/docs/Creating BrainShare post.md
@@ -0,0 +1,3 @@
+You have to create an identifier before creating posts
+
+[Demo](https://agent-explorer.s3.amazonaws.com/videos/create-bs-posts.mp4?!#title=Demo)
diff --git a/docs/bs-home.md b/docs/bs-home.md
@@ -0,0 +1,21 @@
+# Home
+
+The Veramo [Agent Explorer](./Agent%20explorer.md) provides a UI for interacting with Veramo agents and other Decentralized Identifiers (DIDs) and W3C Verifiable Credential tech.
+
+[Demo](https://agent-explorer.s3.amazonaws.com/videos/discovery.mp4?!#title=Demo)
+
+
+## Agents
+
+A Veramo agent can run in the cloud for "always on" capabilities or run locally within a browser instance, using either temporary DIDs or importing them from a web3 wallet like Metamask.
+
+```vc+multihash
+did:web:staging.community.veramo.io/QmaDcyNu6gXFuUGxKzR6fyitXKdPABr1ECFv8dGR6N5L1K#0-404
+```
+
+## Agent Explorer Plugins
+
+Just as Veramo agents themselves are modular and support many combinations of different plugins to bring new functionality, the Agent Explorer also has the concept of "plugins". There are many "standard" plugins for managing DIDs, issuing credentials, and sending messages. Of course, it's also possible to create custom plugins to give the UI new functionality. A few examples are listed below:
+
+* Gitcoin Passport Plugin (available on [https://github.com/veramolabs/agent-explorer-plugin-gitcoin-passport](github)): This plugin allows you to easily import Gitcoin Passport stamps associated with an Ethereum address and displays them alongside Verifiable Credentials to add contextual reputation.
+* BrainShare Plugin (available on [https://github.com/veramolabs/agent-explorer-plugin-brainshare/](github)): This plugin allows you to compose, post, and view posts associated with the [[did:web:staging.community.veramo.io/QmRHKDAHsFyVEUBhkSFYTZVjfDnzocUwLwcqgkG2q3YBRB|BrainShare]] protocol.
diff --git a/docs/videos/create-bs-posts.mp4 b/docs/videos/create-bs-posts.mp4
diff --git a/docs/videos/discovery.mp4 b/docs/videos/discovery.mp4
diff --git a/package.json b/package.json
@@ -7,12 +7,16 @@
  "scripts": {
  "build": "pnpm -r build",
  "test": "pnpm -r test",
- "update-community-plugins": "node ./update-community-plugins.js",
+ "record": "pnpm cypress-record && pnpm upload-docs",
+ "cypress-record": "pnpm -r test:cypress:record",
+ "update-community-plugins": "node ./scripts/update-community-plugins.js",
+ "upload-docs": "node ./scripts/upload-docs.js",
  "upgrade-veramo:next": "pnpm -r upgrade-veramo:next",
  "publish:latest": "lerna publish --conventional-commits --include-merged-tags --create-release github --yes --dist-tag latest",
  "publish:next": "lerna publish --conventional-prerelease --force-publish --canary --no-git-tag-version --include-merged-tags --preid next --pre-dist-tag next --yes"
  },
  "devDependencies": {
+ "aws-sdk": "^2.1476.0",
  "lerna": "7.3.0",
  "lerna-changelog": "2.2.0"
  }

diff --git a/packages/agent-explore/cypress/e2e/create-bs-posts.cy.ts b/packages/agent-explore/cypress/e2e/create-bs-posts.cy.ts
@@ -1,8 +1,9 @@
 describe('Create identifier and BrainShare post', () => {
  it('passes', () => {
  cy.viewport('ipad-mini', 'landscape')
- cy.visit('http://localhost:3456/')
+ cy.visit('http://localhost:3000/')
 
+ cy.wait(2000)
  cy.contains('Identifiers').click()
  cy.wait(1000)
  cy.contains('New').click()
@@ -25,7 +26,7 @@ describe('Create identifier and BrainShare post', () => {
  cy.wait(1000)
  cy.get('textarea').type( 'Welcome to BrainShare', {force: true} )
  cy.contains('Save to: Private').click()
- cy.wait(1000)
+ cy.wait(3000)
  // cy.get('.monaco-editor textarea:first').click().focused().type( 'Welcome to BrainShare' )
  // cy.get('.ant-btn-primary > span').click();
  /* ==== End Cypress Studio ==== */

diff --git a/packages/agent-explore/cypress/e2e/discovery.cy.ts b/packages/agent-explore/cypress/e2e/discovery.cy.ts
@@ -1,7 +1,9 @@
 describe('Discovery shows BrainShare home page', () => {
  it('passes', () => {
  cy.viewport('ipad-mini', 'landscape')
- cy.visit('http://localhost:3456/')
+ cy.visit('http://localhost:3000/')
+ cy.wait(2000)
+
  cy.get('#rc_select_0').click().type('{enter}')
  cy.wait(2000)
 
@@ -18,35 +20,35 @@ describe('Discovery shows BrainShare home page', () => {
  cy.contains('VeramoLabs').click()
  cy.wait(2000)
 
- cy.contains('Veramo community').click()
- cy.wait(2000)
- cy.contains('Private').click()
- cy.wait(2000)
- cy.contains('Identifiers').click()
- cy.wait(2000)
- cy.contains('New').click()
- cy.wait(2000)
- cy.get('#form_in_form_alias').clear();
- cy.get('#form_in_form_alias').type('alice');
- cy.wait(2000)
- cy.contains('Next').click()
- cy.wait(2000)
- cy.contains('Finish').click()
- cy.wait(2000)
- cy.contains('alice').click()
- cy.wait(2000)
- cy.contains('Profile').click();
- cy.wait(1000)
- cy.contains('Edit').click();
- cy.wait(1000)
- cy.get('#form_in_form_name').clear();
- cy.wait(1000)
- cy.get('#form_in_form_name').type('Alice');
- cy.wait(1000)
- cy.get('#form_in_form_email').clear();
- cy.wait(1000)
- cy.get('#form_in_form_email').type('alice@wonderland.com');
- cy.contains('Save to: Private').click();
- cy.wait(1000)
+ // cy.contains('Veramo community').click()
+ // cy.wait(2000)
+ // cy.contains('Private').click()
+ // cy.wait(2000)
+ // cy.contains('Identifiers').click()
+ // cy.wait(2000)
+ // cy.contains('New').click()
+ // cy.wait(2000)
+ // cy.get('#form_in_form_alias').clear();
+ // cy.get('#form_in_form_alias').type('alice');
+ // cy.wait(2000)
+ // cy.contains('Next').click()
+ // cy.wait(2000)
+ // cy.contains('Finish').click()
+ // cy.wait(2000)
+ // cy.contains('alice').click()
+ // cy.wait(2000)
+ // cy.contains('Profile').click();
+ // cy.wait(1000)
+ // cy.contains('Edit').click();
+ // cy.wait(1000)
+ // cy.get('#form_in_form_name').clear();
+ // cy.wait(1000)
+ // cy.get('#form_in_form_name').type('Alice');
+ // cy.wait(1000)
+ // cy.get('#form_in_form_email').clear();
+ // cy.wait(1000)
+ // cy.get('#form_in_form_email').type('alice@wonderland.com');
+ // cy.contains('Save to: Private').click();
+ // cy.wait(1000)
  })
 })
diff --git a/packages/agent-explore/package.json b/packages/agent-explore/package.json
@@ -37,6 +37,7 @@
  "build:js": "tsc",
  "test": "craco test --watchAll=false",
  "test:cypress": "cypress run",
+ "test:cypress:record": "cypress run --record",
  "release": "semantic-release",
  "agent-explore": "./bin/bin.js",
  "upgrade-veramo": "pnpm add -D @veramo/core @veramo/core-types @veramo/did-discovery @veramo/credential-w3c @veramo/credential-ld @veramo/credential-eip712 @veramo/data-store @veramo/did-comm @veramo/did-jwt @veramo/did-resolver @veramo/message-handler @veramo/remote-client @veramo/selective-disclosure @veramo/credential-eip712 @veramo/data-store-json @veramo/did-manager @veramo/kms-web3 @veramo/key-manager @veramo/did-provider-ethr @veramo/utils @veramo/did-provider-peer @veramo/did-provider-key @veramo/did-provider-jwk @veramo/did-provider-pkh @veramo/kms-local @veramo-community/veramo-react@latest",

diff --git a/packages/agent-explore/src/style.css b/packages/agent-explore/src/style.css
@@ -6,4 +6,8 @@
 }
 .ant-upload {
  overflow: hidden;
+}
+video {
+ max-height: 640px;
+ max-width: 50vw;
 }
diff --git a/packages/plugin/package.json b/packages/plugin/package.json
@@ -45,6 +45,7 @@
  "react-markdown": "^9.0.0",
  "react-query": "^3.39.3",
  "react-router-dom": "^6.11.2",
+ "rehype-video": "^2.0.0",
  "remark-gfm": "^4.0.0",
  "typescript": "5.2.2",
  "unified": "^11.0.3",

diff --git a/packages/plugin/src/components/MarkDown.tsx b/packages/plugin/src/components/MarkDown.tsx
@@ -7,6 +7,7 @@ import { usePlugins } from '../PluginProvider.js';
 import { v4 } from 'uuid'
 import Markdown, { Components } from 'react-markdown'
 import remarkGfm from 'remark-gfm'
+import rehypeVideo from 'rehype-video'
 import { PluggableList } from 'unified'
 
 export const MarkDown = (
@@ -39,12 +40,11 @@ export const MarkDown = (
  const [ start, end ] = context.textRange.split('-')
  str = content.substring(start, end)
  }
-
  return (
  <>
  <Markdown 
  remarkPlugins={remarkPlugins}
- rehypePlugins={[[remarkCredentialPlugin, credential]]}
+ rehypePlugins={[[remarkCredentialPlugin, credential], rehypeVideo]}
  components={components}
  >{str}</Markdown>
  {!showAll && context?.textRange && <Button type='text' size='small' onClick={() => setShowAll(true)}>Show more</Button>}