From 77ac3128669f522ac64428e97d02f846d27e0118 Mon Sep 17 00:00:00 2001 From: dayhaysoos Date: Fri, 16 Aug 2024 17:28:32 -0400 Subject: [PATCH 1/7] Foundation for multi doc versioning --- site/docs/{ => common}/api.mdx | 0 site/docs/{ => common}/docs-index.js | 10 +- site/docs/{ => common}/glossary.md | 0 site/docs/{ => common}/index.mdx | 0 site/docusaurus.config.js | 38 +- site/sidebars.js | 8 +- site/src/css/custom.css | 2 + site/src/css/tbdex.css | 874 +++++++++++++++++++++++++++ site/src/css/web5.css | 874 +++++++++++++++++++++++++++ site/tbdex-sidebars.js | 20 + site/web5-sidebars.js | 20 + 11 files changed, 1836 insertions(+), 10 deletions(-) rename site/docs/{ => common}/api.mdx (100%) rename site/docs/{ => common}/docs-index.js (93%) rename site/docs/{ => common}/glossary.md (100%) rename site/docs/{ => common}/index.mdx (100%) create mode 100644 site/src/css/tbdex.css create mode 100644 site/src/css/web5.css create mode 100644 site/tbdex-sidebars.js create mode 100644 site/web5-sidebars.js diff --git a/site/docs/api.mdx b/site/docs/common/api.mdx similarity index 100% rename from site/docs/api.mdx rename to site/docs/common/api.mdx diff --git a/site/docs/docs-index.js b/site/docs/common/docs-index.js similarity index 93% rename from site/docs/docs-index.js rename to site/docs/common/docs-index.js index db27a4431..b898418b0 100644 --- a/site/docs/docs-index.js +++ b/site/docs/common/docs-index.js @@ -1,7 +1,7 @@ import React from 'react'; import HeroCard from '@site/src/components/HeroCard'; -import ExploreCard from '../src/components/ExploreCard'; -import Community from '../src/components/Community'; +import ExploreCard from '../../src/components/ExploreCard'; +import Community from '../../src/components/Community'; import Head from '@docusaurus/Head'; function DocsIndex() { @@ -14,8 +14,9 @@ function DocsIndex() { Give your customers control of their identity, data, and finances.

- Our toolkits bring decentralized identity, messaging, and data storage to your applications. - They let developers focus on creating delightful user experiences, while returning ownership to individuals. + Our toolkits bring decentralized identity, messaging, and data storage + to your applications. They let developers focus on creating delightful + user experiences, while returning ownership to individuals.

diff --git a/site/docs/glossary.md b/site/docs/common/glossary.md similarity index 100% rename from site/docs/glossary.md rename to site/docs/common/glossary.md diff --git a/site/docs/index.mdx b/site/docs/common/index.mdx similarity index 100% rename from site/docs/index.mdx rename to site/docs/common/index.mdx diff --git a/site/docusaurus.config.js b/site/docusaurus.config.js index e1ed47fa6..e44484dca 100644 --- a/site/docusaurus.config.js +++ b/site/docusaurus.config.js @@ -5,7 +5,7 @@ require('dotenv').config(); const lightCodeTheme = require('prism-react-renderer').themes.github; const darkCodeTheme = require('prism-react-renderer').themes.dracula; const WEB5_VERSION = require('../package.json').dependencies['@web5/api']; -const SDK_VERSIONS = require('../sdk-versions.json') +const SDK_VERSIONS = require('../sdk-versions.json'); const algoliaApiKey = process.env.DOC_SEARCH_API_KEY; const algoliaIndexName = process.env.DOC_SEARCH_INDEX_NAME; @@ -36,7 +36,7 @@ let config = { onBrokenMarkdownLinks: 'warn', favicon: '/img/favicon.ico', markdown: { - mermaid: true + mermaid: true, }, themes: ['@docusaurus/theme-mermaid'], // Even if you don't use internalization, you can use this field to set useful @@ -53,7 +53,27 @@ let config = { }, plugins: [ 'docusaurus-tailwindcss', - require.resolve("./webpackPlugin"), + require.resolve('./webpackPlugin'), + [ + '@docusaurus/plugin-content-docs', + { + id: 'tbdex', + path: 'docs/tbdex', + routeBasePath: 'docs/tbdex', + sidebarPath: require.resolve('./tbdex-sidebars.js'), + breadcrumbs: false, + }, + ], + [ + '@docusaurus/plugin-content-docs', + { + id: 'web5', + path: 'docs/web5', + routeBasePath: 'docs/web5', + sidebarPath: require.resolve('./web5-sidebars.js'), + breadcrumbs: false, + }, + ], // [ // '@docusaurus/plugin-content-docs', // { @@ -75,6 +95,7 @@ let config = { // }, // ], ], + scripts: [ { src: 'https://www.datadoghq-browser-agent.com/us1/v4/datadog-rum.js', @@ -95,6 +116,8 @@ let config = { /** @type {import('@docusaurus/preset-classic').Options} */ ({ docs: { + path: 'docs/common', + routeBasePath: 'docs', sidebarPath: require.resolve('./sidebars.js'), breadcrumbs: false, }, @@ -247,7 +270,14 @@ let config = { }, ], }, - additionalLanguages: ['kotlin', 'swift', 'dart', 'rust', 'bash', 'gradle'], + additionalLanguages: [ + 'kotlin', + 'swift', + 'dart', + 'rust', + 'bash', + 'gradle', + ], }, }), }; diff --git a/site/sidebars.js b/site/sidebars.js index ef1bd11a1..ea85aefc5 100644 --- a/site/sidebars.js +++ b/site/sidebars.js @@ -14,7 +14,13 @@ /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ const sidebars = { // By default, Docusaurus generates a sidebar from the docs folder structure - tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }], + tutorialSidebar: [ + { type: 'doc', id: 'index', label: 'Getting Started' }, + { type: 'link', href: './web5', label: 'Web5 SDK' }, + { type: 'link', href: './tbdex', label: 'tbDEX SDK' }, + { type: 'doc', id: 'api', label: 'API Reference Guides' }, + { type: 'doc', id: 'glossary', label: 'Glossary' }, + ], // But you can create a sidebar manually /* diff --git a/site/src/css/custom.css b/site/src/css/custom.css index 6462508ed..64a47348a 100644 --- a/site/src/css/custom.css +++ b/site/src/css/custom.css @@ -14,6 +14,8 @@ @import 'illustration.css'; @import 'web5-quickstart.css'; @import 'api.css'; +@import 'tbdex.css'; +@import 'web5.css'; root { --color-black: #000000; diff --git a/site/src/css/tbdex.css b/site/src/css/tbdex.css new file mode 100644 index 000000000..d49e67cf3 --- /dev/null +++ b/site/src/css/tbdex.css @@ -0,0 +1,874 @@ +/* Navbar and main */ + +.docs-wrapper #__docusaurus a:not(.table-of-contents__link, .navbar__link) { + text-decoration: none; + font-weight: 600; +} + +.docs-wrapper .DocSearch-Modal { + margin-top: 120px; +} + +.docs-wrapper #__docusaurus { + --color-white: #c6c6c6; +} + +.docs-wrapper #__docusaurus .navbar, +.docs-wrapper #__docusaurus .main-wrapper { + max-width: unset; +} + +.docs-wrapper #__docusaurus .main-wrapper { + margin-top: 0; +} + +/* Sidebar */ +.docs-wrapper #__docusaurus aside .menu__list { + gap: 0; +} + +.docs-wrapper #__docusaurus aside .menu__list .menu__list-item .menu__link { + font-weight: 500; + padding-block: 0.75rem; + color: var(--color-yellow); + text-decoration: none; + font-family: var(--tbd-font-mono); + letter-spacing: 0; +} + +.docs-wrapper #__docusaurus aside .theme-doc-sidebar-item-link>.menu__link.menu__link--active, +.docs-wrapper #__docusaurus aside .menu__list .menu__list-item-collapsible--active .menu__link--sublist.menu__link--active, +.docs-wrapper #__docusaurus aside .menu__list-item-collapsible--active { + background-color: var(--color-yellow); + color: var(--color-black) !important; +} + +.docs-wrapper #__docusaurus aside .menu__list .menu__list-item-collapsible--active .menu__link--sublist.menu__link--active:hover, +.docs-wrapper #__docusaurus aside .theme-doc-sidebar-item-category .menu__list-item-collapsible:hover .menu__link--sublist.menu__link--active { + color: var(--color-blue) !important; +} + +.docs-wrapper #__docusaurus aside .theme-doc-sidebar-item-category .menu__list-item-collapsible:hover { + background-color: var(--ifm-menu-color-background-hover); +} + +.docs-wrapper #__docusaurus aside .menu__list .menu__caret:before { + content: url('/img/arrow-blue.svg'); + background: none; +} + +.docs-wrapper #__docusaurus aside .menu__list .menu__caret:before, +.docs-wrapper #__docusaurus aside .menu__list .menu__link--sublist-caret:after { + filter: brightness(0) var(--color-primary-yellow-filter); +} + +.docs-wrapper #__docusaurus aside .menu__list .menu__list-item-collapsible--active .menu__caret:before { + filter: brightness(0); +} + +.docs-wrapper #__docusaurus aside .menu__list .menu__list-item-collapsible:hover .menu__caret:before, +.docs-wrapper #__docusaurus aside .menu__list .menu__link--sublist-caret:hover:after { + filter: none; +} + +.docs-wrapper #__docusaurus aside .menu__list .menu__list-item-collapsible:hover .menu__link.menu__link--sublist { + color: var(--color-blue); +} + +.docs-wrapper #__docusaurus aside .menu__list .menu__caret:hover { + height: auto; +} + +/* Submenu */ + +.docs-wrapper #__docusaurus aside .menu__list .menu__list-item-collapsible--active~.menu__list { + margin: 0; +} + +.docs-wrapper #__docusaurus aside .menu__list-item-collapsible~.menu__list { + padding-left: 0; + margin: 0; +} + +.docs-wrapper #__docusaurus aside .theme-doc-sidebar-item-category-level-1 .menu__list-item-collapsible~.menu__list .menu__link { + padding-left: 2.5rem; +} + +.docs-wrapper #__docusaurus aside .theme-doc-sidebar-item-category-level-2 .menu__list-item-collapsible~.menu__list .menu__link { + padding-left: 3rem; +} + +.docs-wrapper #__docusaurus aside .theme-doc-sidebar-item-category-level-3 .menu__list-item-collapsible~.menu__list .menu__link { + padding-left: 3.5rem; +} + +.docs-wrapper #__docusaurus footer { + border-top: 1px solid var(--ifm-toc-border-color); + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.docs-wrapper #__docusaurus footer>div { + overflow-x: hidden; +} + +.docs-wrapper #__docusaurus h1~p, +.docs-wrapper #__docusaurus h2:not(.theme-card h2, .community-card h2)~p, +.docs-wrapper #__docusaurus h3:not(.theme-card h3, .community-card h3)~p, +.docs-wrapper #__docusaurus p { + font-family: var(--tbd-font-mono); + letter-spacing: 0; + line-height: 1.75rem; +} + +.docs-wrapper #__docusaurus p:not(.docs-section p, + .alert p, + .figure-container p, + .api-card p, + .search-widget p) { + font-size: 1.125rem; + color: var(--color-white); +} + +.docs-wrapper #__docusaurus article .markdown li { + font-family: var(--tbd-font-mono); + letter-spacing: 0; + color: var(--color-white); +} + +.docs-wrapper #__docusaurus .api-card { + border: 2px solid var(--color-yellow); + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; +} + +.docs-wrapper #__docusaurus .api-card p { + font-size: 1rem; +} + +.api-card-icon { + display: flex; + justify-content: start; + gap: 20px; + padding-top: 20px; + vertical-align: bottom; +} + +.api-card-icon img { + width: 50px; +} + +.docs-wrapper #__docusaurus h2, +.docs-wrapper #__docusaurus .primary-theme-card h2 { + font-size: 2rem; +} + +.docs-wrapper #__docusaurus .theme-card { + border-width: 2px; +} + +.docs-wrapper #__docusaurus .theme-card p:not(.primary-theme-card p) { + font-size: 1rem; +} + +.docs-wrapper #__docusaurus .theme-card p { + max-width: 70%; + font-family: var(--tbd-font-mono); + letter-spacing: 0; +} + +.docs-wrapper #__docusaurus .theme-card img { + height: fit-content; +} + +.docs-wrapper #__docusaurus .community-card h3 { + font-size: 1.25rem; + margin-bottom: 12px; +} + +.docs-wrapper #__docusaurus .community-card p { + font-size: 1rem; +} + +.docs-wrapper #__docusaurus .explore-card h3 { + font-size: 1rem; + margin-block: 0; +} + +.docs-wrapper #__docusaurus .theme-admonition.alert { + border-radius: 0; + margin-bottom: 2rem; +} + +.docs-wrapper #__docusaurus .theme-admonition.alert code, +.docs-wrapper #__docusaurus code:not(pre code, h4 code) { + background: #626262; + color: #fff; +} + +.docs-wrapper #__docusaurus h4>code { + background: #383838; +} + +.docs-wrapper #__docusaurus .theme-admonition.alert--info { + background: #0b1a1f; +} + +.docs-wrapper #__docusaurus .theme-admonition.alert--secondary { + background: #3d3d3d; +} + +.docs-wrapper #__docusaurus .theme-admonition.alert--secondary p, +.docs-wrapper #__docusaurus .theme-admonition.alert--secondary p:last-child { + margin: 0; +} + +.docs-wrapper #__docusaurus .theme-admonition p, +.docs-wrapper #__docusaurus .theme-admonition li { + font-size: 1rem; +} + +.docs-wrapper #__docusaurus .theme-admonition p:last-child { + margin-bottom: 1.5rem; +} + +.docs-wrapper #__docusaurus .theme-admonition .admonitionHeading_node_modules-\@docusaurus-theme-classic-lib-theme-Admonition-styles-module { + margin-bottom: 1rem; +} + +.docs-wrapper #__docusaurus .theme-admonition h2 { + font-size: 1.125rem; + color: var(--color-blue); + font-weight: 500; + margin-bottom: 0.75rem; +} + +.docs-wrapper #__docusaurus .docs-section { + margin-block-start: 6rem; +} + +.docs-wrapper #__docusaurus .docs-section code:not(pre code) { + background: #424242; +} + +.docs-wrapper #__docusaurus .docs-section h3 { + margin-bottom: 1rem; +} + +.docs-wrapper #__docusaurus .docs-section h3:first-of-type { + margin-top: 2rem; +} + +.docs-wrapper #__docusaurus .docs-section h3:not(:first-of-type) { + margin-top: 4rem; +} + +.docs-wrapper #__docusaurus h4 { + font-size: 1.25rem; + margin-block-start: 2rem; +} + +.docs-wrapper #__docusaurus .docs-section h3+p { + margin-top: 0.5rem; +} + +.docs-wrapper #__docusaurus .docs-section .theme-code-block pre { + margin-top: 0.75rem; +} + +.docs-wrapper #__docusaurus pre code:not(.search-widget pre code) { + border: 1px solid #212121; + background: #161616; + padding: 1.5rem 1rem; + line-height: 1.65; +} + +.docs-wrapper #__docusaurus code:not(h4 > code) { + font-family: var(--tbd-font-mono); + letter-spacing: 0; + font-size: 0.9rem; +} + +.docs-wrapper #__docusaurus details.alert--info>summary { + color: var(--color-blue); + font-weight: 600; +} + +.docs-wrapper #__docusaurus details.alert--info p { + font-size: 1rem; +} + +.docs-wrapper #__docusaurus .input-container { + margin-block: 1rem; +} + +.docs-wrapper #__docusaurus .input-container label { + display: block; + font-size: 0.75rem; + margin-bottom: 4px; +} + +.docs-wrapper #__docusaurus .input-container input { + padding: 0.5rem; + border-radius: 4px; + border: 1px solid #616161; + background: none; + width: 100%; + max-width: 400px; +} + +.docs-wrapper #__docusaurus .input-container input:disabled { + opacity: 0.4; +} + +.docs-wrapper #__docusaurus .sandbox-container progress { + width: 32px; + height: 32px; + border: 4px solid #333333; + border-bottom-color: transparent; + border-radius: 50%; + display: inline-block; + box-sizing: border-box; + animation: rotation 1s linear infinite; + margin-left: 0.5rem; +} + +@keyframes rotation { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +.docs-wrapper #__docusaurus .sandbox-container progress::-webkit-progress-bar { + background: transparent; +} + +.docs-wrapper #__docusaurus .sandbox-container { + display: flex; + flex-direction: column; + gap: 1rem; + margin-bottom: 3rem; +} + +.docs-wrapper #__docusaurus .sandbox-container button { + white-space: nowrap; +} + +.docs-wrapper #__docusaurus .sandbox-container button:disabled { + cursor: default; + border: 2px solid transparent; + background: #262626; + color: #5a5a5a; +} + +.docs-wrapper #__docusaurus .sandbox-container code, +.docs-wrapper #__docusaurus .sandbox-container textarea { + background: none; +} + +.docs-wrapper #__docusaurus .sandbox-container code .sandbox-placeholder { + color: grey; +} + +.docs-wrapper #__docusaurus .sandbox-container textarea { + resize: none; + font-family: var(--tbd-font-mono); + font-size: 0.85rem; + line-height: 1.75; + color: grey; + padding: 1rem; +} + +.docs-wrapper #__docusaurus .sandbox-container .output { + flex: 1; + border: 1px solid #616161; + padding: 1rem; + background: #141414; + margin: 0; + border-radius: 0.25rem; +} + +.docs-wrapper #__docusaurus .figure-container { + margin-block: 3rem; +} + +.docs-wrapper #__docusaurus .figure-container p.copy { + margin-block: 1rem; + font-size: 0.875rem; + font-family: var(--tbd-font-mono); + letter-spacing: 0; +} + +@media screen and (max-width: 996px) { + .docs-wrapper #__docusaurus { + padding-inline: 0; + } + + .docs-wrapper #__docusaurus .navbar { + padding-top: 1.5rem; + padding-inline: 1rem; + } + + .docs-wrapper #__docusaurus article { + padding: 2rem; + } + + .docs-wrapper #__docusaurus footer { + background: var(--color-black); + } + + .docs-wrapper #__docusaurus .theme-card { + gap: 0; + align-items: end; + } + + .docs-wrapper #__docusaurus .theme-card p { + max-width: unset; + } +} + +@media screen and (min-width: 997px) { + .docs-wrapper #__docusaurus { + padding: 0; + } + + .docs-wrapper #__docusaurus article { + padding: 4rem 8vw; + } + + .docs-wrapper #__docusaurus .navbar { + padding-left: 1.875rem; + position: sticky; + z-index: 999999; + } + + .docs-wrapper #__docusaurus .docSidebarContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Sidebar-styles-module { + margin-top: 0; + } + + .docs-wrapper #__docusaurus .sidebarViewport_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Sidebar-styles-module { + position: sticky; + top: 77px; + } + + .docs-wrapper #__docusaurus .sidebar_node_modules-\@docusaurus-theme-classic-lib-theme-DocSidebar-Desktop-styles-module { + padding-top: 0; + } +} + +.pagination-nav { + display: none; +} + +html.plugin-docs.plugin-id-tbdex body, +html.plugin-docs.plugin-id-tbdex .navbar { + background-color: #1c1c1c; +} + +html.plugin-docs.plugin-id-tbdex .navbar { + border-bottom: 1px solid var(--ifm-toc-border-color); + padding: 0; +} + +html.plugin-docs.plugin-id-tbdex .navbar__items, +html.plugin-docs.plugin-id-tbdex .navbar__items--right { + align-items: baseline; +} + +html.plugin-docs.plugin-id-tbdex .navbar__logo { + margin-bottom: 1.5rem; + height: 1.5rem; +} + +html.plugin-docs.plugin-id-tbdex .navbar-sidebar .navbar-sidebar__item:last-child .clean-btn.navbar-sidebar__back::before { + display: inline-block; + content: url('/static/img/arrow-yellow.svg'); + position: relative; +} + +html.plugin-docs.plugin-id-tbdex aside .menu__link { + color: var(--ifm-menu-color); + padding-top: 0rem; + padding-bottom: 0rem; +} + +html.plugin-docs.plugin-id-tbdex aside aside .menu__link { + padding-left: 0; +} + +html.plugin-docs.plugin-id-tbdex aside aside .menu__link li a { + padding-left: 0; +} + +html.plugin-docs.plugin-id-tbdex aside aside .menu__link--active { + padding-left: 0; +} + +html.plugin-docs.plugin-id-tbdex .thin-scrollbar { + color: white; + letter-spacing: 1px; + margin-top: 24px; +} + +html.plugin-docs.plugin-id-tbdex aside .sidebar_node_modules-\@docusaurus-theme-classic-lib-next-theme-DocSidebar-Desktop-styles-module { + top: auto; +} + +html.plugin-docs.plugin-id-tbdex .sidebar_RiAD { + top: 0 !important; +} + +@media (min-width: 997px) { + html.plugin-docs.plugin-id-tbdex .menu_node_modules-\@docusaurus-theme-classic-lib-next-theme-DocSidebar-Desktop-Content-styles-module { + flex-grow: 1; + padding-left: 0rem !important; + font-size: large; + } + + html.plugin-docs.plugin-id-tbdex aside.docSidebarContainer_src-layout-DocPage-styles-module, + html.plugin-docs.plugin-id-tbdex aside.theme-doc-sidebar-container { + margin-right: 1.5rem; + } +} + +/* Article styling */ + +article .markdown p { + font-weight: var(--typography-body-1-d-font-weight); + font-size: var(--typography-body-1-d-font-size); + line-height: var(--typography-body-1-d-line-height); + letter-spacing: 1px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +article .markdown li { + font-weight: var(--typography-body-1-d-font-weight); + font-size: var(--typography-body-1-d-font-size); + line-height: var(--typography-body-1-d-line-height); + letter-spacing: 1px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +article .markdown blockquote { + color: var(--color-yellow); + font-style: normal; + font-weight: 300; +} + +article .markdown blockquote b { + color: white; + font-style: normal; + font-weight: 800; +} + +article .theme-code-block pre { + background: #232323; +} + +article .theme-code-block pre code .token-line span { + color: white; +} + +article .markdown p { + font-weight: var(--typography-body-1-d-font-weight); + font-size: var(--typography-body-1-d-font-size); + line-height: var(--typography-body-1-d-line-height); + letter-spacing: 1px; + font-family: var(--tbd-font-sans); +} + +article .markdown p code { + color: white; + background-color: gray; +} + +.pagination-nav__sublabel { + display: none; +} + +.pagination-nav__label { + color: white; + letter-spacing: 1px; + font-weight: 400; + text-decoration: none; +} + +html.plugin-docs.plugin-id-tbdex .thin-scrollbar { + color: white; + letter-spacing: 1px; + margin-top: 24px; + top: 118px; + font-family: var(--tbd-font-sans); +} + +html.plugin-docs.plugin-id-tbdex article time { + color: white; +} + +html.plugin-docs.plugin-id-tbdex .avatar { + color: white; +} + +html.plugin-docs.plugin-id-tbdex .navbar__link { + font-size: 18px; + padding-block: 1.5rem; + border-bottom: 4px solid transparent; +} + +html.plugin-docs.plugin-id-tbdex .navbar__link:hover { + border-bottom: 4px solid var(--color-yellow); + color: var(--color-yellow); +} + +html.plugin-docs.plugin-id-tbdex .navbar__link--active { + border-bottom: 4px solid var(--color-yellow); + color: var(--color-yellow); +} + +html.plugin-docs.plugin-id-tbdex .thin-scrollbar ul li a:hover { + color: var(--color-yellow); +} + +html.plugin-docs.plugin-id-tbdex .sidebarItemLinkActive_node_modules-\@docusaurus-theme-classic-lib-next-theme-BlogSidebar-styles-module { + color: var(--color-yellow); +} + +html.plugin-docs.plugin-id-tbdex article h2 { + color: var(--color-yellow); + font-size: 24px; +} + +html.plugin-docs.plugin-id-tbdex ul.table-of-contents li a code, +html.plugin-docs.plugin-id-tbdex ul.table-of-contents li code { + background-color: transparent; +} + +html.plugin-docs.plugin-id-tbdex .table-of-contents__link:hover, +html.plugin-docs.plugin-id-tbdex .table-of-contents__link:hover code, +html.plugin-docs.plugin-id-tbdex .table-of-contents__link--active, +html.plugin-docs.plugin-id-tbdex .table-of-contents__link--active code { + color: var(--color-yellow); + text-decoration: none; +} + +.docs-wrapper #__docusaurus .table-of-contents ul { + padding-inline-start: 1rem; +} + +html.plugin-docs.plugin-id-tbdex .table-of-contents a strong { + color: white !important; +} + +html.plugin-docs.plugin-id-tbdex .table-of-contents li { + list-style: none !important; +} + +html.plugin-docs.plugin-id-tbdex .table-of-contents__link { + color: #969696; + font-size: 1rem; + font-weight: 500; + line-height: 1.375rem; + text-decoration: none; + padding: 0.75rem 0.5rem; +} + +html.plugin-docs.plugin-id-tbdex .table-of-contents__left-border { + border-left: 1px solid #343434; + padding-left: 1rem; +} + +html.plugin-docs.plugin-id-tbdex .table-of-contents__left-border li { + margin-right: 0; + margin-left: 0; + font-family: var(--tbd-font-mono); + letter-spacing: 0; +} + +/* Redocusaurus */ +.redocusaurus { + overflow: auto; + height: 95vh; +} + +/* Changes */ +.hero-button { + z-index: 99999; + width: fit-content; +} + +.hero-button a { + text-decoration: none; + text-transform: uppercase; + font-weight: bold; +} + +.theme-card { + --color-card: 36, 242, 255; + border: 1px solid rgba(var(--color-card), 0.35); +} + +.theme-card .hero-button a>div { + background: #fff; + color: #000; +} + +article .markdown .theme-card>p { + line-height: 1.5; + font-size: 100%; + margin-bottom: 2rem; +} + +html.plugin-docs.plugin-id-tbdex article .theme-card h3 { + color: rgba(var(--color-card)); +} + +html.plugin-docs.plugin-id-tbdex article .theme-card p { + color: #fff; +} + +.theme-card-cyan { + --color-card: 36, 242, 255; +} + +.theme-card-yellow { + --color-card: 255, 236, 25; +} + +.theme-card-purple { + --color-card: 183, 43, 255; +} + +.community-button { + text-decoration: none; + text-transform: uppercase; + font-weight: bold; + background-color: #fff !important; + color: #000 !important; +} + +.tbd-blue-illustration { + filter: var(--color-primary-cyan-filter); +} + +.markdown>h3 { + font-size: 1.5rem; +} + +.language-switch-header { + text-align: right; + margin-bottom: 10px; +} + +.language-switcher-select { + width: auto; + font-size: 16px; + color: #000; + font-weight: bold; + background-color: #ffec19; + margin-left: 15px; + padding: 5px; +} + +.languageTabs { + display: flex; + justify-content: flex-start; + cursor: pointer; + margin: 0; +} + +.mermaid text { + font-weight: bold; +} + +.beat-fade { + animation-name: beat-fade; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-timing-function: cubic-bezier(.4, 0, .6, 1); + -webkit-animation-name: beat-fade; + -webkit-animation-duration: 2s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-timing-function: cubic-bezier(.4, 0, .6, 1); +} + +@keyframes beat-fade { + 0% { + transform: scale(1); + opacity: 1; + } + + 50% { + transform: scale(1.1); + opacity: 0.7; + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +.bounce { + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-direction: normal; + animation-direction: normal; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: cubic-bezier(.28, .84, .42, 1); + animation-timing-function: cubic-bezier(.28, .84, .42, 1); +} + +@keyframes bounce { + + 0%, + 20%, + 50%, + 80%, + 100% { + transform: translateY(0); + } + + 40% { + transform: translateY(-30px); + } + + 60% { + transform: translateY(-15px); + } +} + +.flip { + -webkit-animation-name: flip; + animation-name: flip; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-direction: normal; + animation-direction: normal; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} + +@keyframes flip { + from { + transform: rotateY(0deg); + } + + to { + transform: rotateY(360deg); + } +} \ No newline at end of file diff --git a/site/src/css/web5.css b/site/src/css/web5.css new file mode 100644 index 000000000..64e12fc8f --- /dev/null +++ b/site/src/css/web5.css @@ -0,0 +1,874 @@ +/* Navbar and main */ + +.docs-wrapper #__docusaurus a:not(.table-of-contents__link, .navbar__link) { + text-decoration: none; + font-weight: 600; +} + +.docs-wrapper .DocSearch-Modal { + margin-top: 120px; +} + +.docs-wrapper #__docusaurus { + --color-white: #c6c6c6; +} + +.docs-wrapper #__docusaurus .navbar, +.docs-wrapper #__docusaurus .main-wrapper { + max-width: unset; +} + +.docs-wrapper #__docusaurus .main-wrapper { + margin-top: 0; +} + +/* Sidebar */ +.docs-wrapper #__docusaurus aside .menu__list { + gap: 0; +} + +.docs-wrapper #__docusaurus aside .menu__list .menu__list-item .menu__link { + font-weight: 500; + padding-block: 0.75rem; + color: var(--color-yellow); + text-decoration: none; + font-family: var(--tbd-font-mono); + letter-spacing: 0; +} + +.docs-wrapper #__docusaurus aside .theme-doc-sidebar-item-link>.menu__link.menu__link--active, +.docs-wrapper #__docusaurus aside .menu__list .menu__list-item-collapsible--active .menu__link--sublist.menu__link--active, +.docs-wrapper #__docusaurus aside .menu__list-item-collapsible--active { + background-color: var(--color-yellow); + color: var(--color-black) !important; +} + +.docs-wrapper #__docusaurus aside .menu__list .menu__list-item-collapsible--active .menu__link--sublist.menu__link--active:hover, +.docs-wrapper #__docusaurus aside .theme-doc-sidebar-item-category .menu__list-item-collapsible:hover .menu__link--sublist.menu__link--active { + color: var(--color-blue) !important; +} + +.docs-wrapper #__docusaurus aside .theme-doc-sidebar-item-category .menu__list-item-collapsible:hover { + background-color: var(--ifm-menu-color-background-hover); +} + +.docs-wrapper #__docusaurus aside .menu__list .menu__caret:before { + content: url('/img/arrow-blue.svg'); + background: none; +} + +.docs-wrapper #__docusaurus aside .menu__list .menu__caret:before, +.docs-wrapper #__docusaurus aside .menu__list .menu__link--sublist-caret:after { + filter: brightness(0) var(--color-primary-yellow-filter); +} + +.docs-wrapper #__docusaurus aside .menu__list .menu__list-item-collapsible--active .menu__caret:before { + filter: brightness(0); +} + +.docs-wrapper #__docusaurus aside .menu__list .menu__list-item-collapsible:hover .menu__caret:before, +.docs-wrapper #__docusaurus aside .menu__list .menu__link--sublist-caret:hover:after { + filter: none; +} + +.docs-wrapper #__docusaurus aside .menu__list .menu__list-item-collapsible:hover .menu__link.menu__link--sublist { + color: var(--color-blue); +} + +.docs-wrapper #__docusaurus aside .menu__list .menu__caret:hover { + height: auto; +} + +/* Submenu */ + +.docs-wrapper #__docusaurus aside .menu__list .menu__list-item-collapsible--active~.menu__list { + margin: 0; +} + +.docs-wrapper #__docusaurus aside .menu__list-item-collapsible~.menu__list { + padding-left: 0; + margin: 0; +} + +.docs-wrapper #__docusaurus aside .theme-doc-sidebar-item-category-level-1 .menu__list-item-collapsible~.menu__list .menu__link { + padding-left: 2.5rem; +} + +.docs-wrapper #__docusaurus aside .theme-doc-sidebar-item-category-level-2 .menu__list-item-collapsible~.menu__list .menu__link { + padding-left: 3rem; +} + +.docs-wrapper #__docusaurus aside .theme-doc-sidebar-item-category-level-3 .menu__list-item-collapsible~.menu__list .menu__link { + padding-left: 3.5rem; +} + +.docs-wrapper #__docusaurus footer { + border-top: 1px solid var(--ifm-toc-border-color); + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.docs-wrapper #__docusaurus footer>div { + overflow-x: hidden; +} + +.docs-wrapper #__docusaurus h1~p, +.docs-wrapper #__docusaurus h2:not(.theme-card h2, .community-card h2)~p, +.docs-wrapper #__docusaurus h3:not(.theme-card h3, .community-card h3)~p, +.docs-wrapper #__docusaurus p { + font-family: var(--tbd-font-mono); + letter-spacing: 0; + line-height: 1.75rem; +} + +.docs-wrapper #__docusaurus p:not(.docs-section p, + .alert p, + .figure-container p, + .api-card p, + .search-widget p) { + font-size: 1.125rem; + color: var(--color-white); +} + +.docs-wrapper #__docusaurus article .markdown li { + font-family: var(--tbd-font-mono); + letter-spacing: 0; + color: var(--color-white); +} + +.docs-wrapper #__docusaurus .api-card { + border: 2px solid var(--color-yellow); + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; +} + +.docs-wrapper #__docusaurus .api-card p { + font-size: 1rem; +} + +.api-card-icon { + display: flex; + justify-content: start; + gap: 20px; + padding-top: 20px; + vertical-align: bottom; +} + +.api-card-icon img { + width: 50px; +} + +.docs-wrapper #__docusaurus h2, +.docs-wrapper #__docusaurus .primary-theme-card h2 { + font-size: 2rem; +} + +.docs-wrapper #__docusaurus .theme-card { + border-width: 2px; +} + +.docs-wrapper #__docusaurus .theme-card p:not(.primary-theme-card p) { + font-size: 1rem; +} + +.docs-wrapper #__docusaurus .theme-card p { + max-width: 70%; + font-family: var(--tbd-font-mono); + letter-spacing: 0; +} + +.docs-wrapper #__docusaurus .theme-card img { + height: fit-content; +} + +.docs-wrapper #__docusaurus .community-card h3 { + font-size: 1.25rem; + margin-bottom: 12px; +} + +.docs-wrapper #__docusaurus .community-card p { + font-size: 1rem; +} + +.docs-wrapper #__docusaurus .explore-card h3 { + font-size: 1rem; + margin-block: 0; +} + +.docs-wrapper #__docusaurus .theme-admonition.alert { + border-radius: 0; + margin-bottom: 2rem; +} + +.docs-wrapper #__docusaurus .theme-admonition.alert code, +.docs-wrapper #__docusaurus code:not(pre code, h4 code) { + background: #626262; + color: #fff; +} + +.docs-wrapper #__docusaurus h4>code { + background: #383838; +} + +.docs-wrapper #__docusaurus .theme-admonition.alert--info { + background: #0b1a1f; +} + +.docs-wrapper #__docusaurus .theme-admonition.alert--secondary { + background: #3d3d3d; +} + +.docs-wrapper #__docusaurus .theme-admonition.alert--secondary p, +.docs-wrapper #__docusaurus .theme-admonition.alert--secondary p:last-child { + margin: 0; +} + +.docs-wrapper #__docusaurus .theme-admonition p, +.docs-wrapper #__docusaurus .theme-admonition li { + font-size: 1rem; +} + +.docs-wrapper #__docusaurus .theme-admonition p:last-child { + margin-bottom: 1.5rem; +} + +.docs-wrapper #__docusaurus .theme-admonition .admonitionHeading_node_modules-\@docusaurus-theme-classic-lib-theme-Admonition-styles-module { + margin-bottom: 1rem; +} + +.docs-wrapper #__docusaurus .theme-admonition h2 { + font-size: 1.125rem; + color: var(--color-blue); + font-weight: 500; + margin-bottom: 0.75rem; +} + +.docs-wrapper #__docusaurus .docs-section { + margin-block-start: 6rem; +} + +.docs-wrapper #__docusaurus .docs-section code:not(pre code) { + background: #424242; +} + +.docs-wrapper #__docusaurus .docs-section h3 { + margin-bottom: 1rem; +} + +.docs-wrapper #__docusaurus .docs-section h3:first-of-type { + margin-top: 2rem; +} + +.docs-wrapper #__docusaurus .docs-section h3:not(:first-of-type) { + margin-top: 4rem; +} + +.docs-wrapper #__docusaurus h4 { + font-size: 1.25rem; + margin-block-start: 2rem; +} + +.docs-wrapper #__docusaurus .docs-section h3+p { + margin-top: 0.5rem; +} + +.docs-wrapper #__docusaurus .docs-section .theme-code-block pre { + margin-top: 0.75rem; +} + +.docs-wrapper #__docusaurus pre code:not(.search-widget pre code) { + border: 1px solid #212121; + background: #161616; + padding: 1.5rem 1rem; + line-height: 1.65; +} + +.docs-wrapper #__docusaurus code:not(h4 > code) { + font-family: var(--tbd-font-mono); + letter-spacing: 0; + font-size: 0.9rem; +} + +.docs-wrapper #__docusaurus details.alert--info>summary { + color: var(--color-blue); + font-weight: 600; +} + +.docs-wrapper #__docusaurus details.alert--info p { + font-size: 1rem; +} + +.docs-wrapper #__docusaurus .input-container { + margin-block: 1rem; +} + +.docs-wrapper #__docusaurus .input-container label { + display: block; + font-size: 0.75rem; + margin-bottom: 4px; +} + +.docs-wrapper #__docusaurus .input-container input { + padding: 0.5rem; + border-radius: 4px; + border: 1px solid #616161; + background: none; + width: 100%; + max-width: 400px; +} + +.docs-wrapper #__docusaurus .input-container input:disabled { + opacity: 0.4; +} + +.docs-wrapper #__docusaurus .sandbox-container progress { + width: 32px; + height: 32px; + border: 4px solid #333333; + border-bottom-color: transparent; + border-radius: 50%; + display: inline-block; + box-sizing: border-box; + animation: rotation 1s linear infinite; + margin-left: 0.5rem; +} + +@keyframes rotation { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +.docs-wrapper #__docusaurus .sandbox-container progress::-webkit-progress-bar { + background: transparent; +} + +.docs-wrapper #__docusaurus .sandbox-container { + display: flex; + flex-direction: column; + gap: 1rem; + margin-bottom: 3rem; +} + +.docs-wrapper #__docusaurus .sandbox-container button { + white-space: nowrap; +} + +.docs-wrapper #__docusaurus .sandbox-container button:disabled { + cursor: default; + border: 2px solid transparent; + background: #262626; + color: #5a5a5a; +} + +.docs-wrapper #__docusaurus .sandbox-container code, +.docs-wrapper #__docusaurus .sandbox-container textarea { + background: none; +} + +.docs-wrapper #__docusaurus .sandbox-container code .sandbox-placeholder { + color: grey; +} + +.docs-wrapper #__docusaurus .sandbox-container textarea { + resize: none; + font-family: var(--tbd-font-mono); + font-size: 0.85rem; + line-height: 1.75; + color: grey; + padding: 1rem; +} + +.docs-wrapper #__docusaurus .sandbox-container .output { + flex: 1; + border: 1px solid #616161; + padding: 1rem; + background: #141414; + margin: 0; + border-radius: 0.25rem; +} + +.docs-wrapper #__docusaurus .figure-container { + margin-block: 3rem; +} + +.docs-wrapper #__docusaurus .figure-container p.copy { + margin-block: 1rem; + font-size: 0.875rem; + font-family: var(--tbd-font-mono); + letter-spacing: 0; +} + +@media screen and (max-width: 996px) { + .docs-wrapper #__docusaurus { + padding-inline: 0; + } + + .docs-wrapper #__docusaurus .navbar { + padding-top: 1.5rem; + padding-inline: 1rem; + } + + .docs-wrapper #__docusaurus article { + padding: 2rem; + } + + .docs-wrapper #__docusaurus footer { + background: var(--color-black); + } + + .docs-wrapper #__docusaurus .theme-card { + gap: 0; + align-items: end; + } + + .docs-wrapper #__docusaurus .theme-card p { + max-width: unset; + } +} + +@media screen and (min-width: 997px) { + .docs-wrapper #__docusaurus { + padding: 0; + } + + .docs-wrapper #__docusaurus article { + padding: 4rem 8vw; + } + + .docs-wrapper #__docusaurus .navbar { + padding-left: 1.875rem; + position: sticky; + z-index: 999999; + } + + .docs-wrapper #__docusaurus .docSidebarContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Sidebar-styles-module { + margin-top: 0; + } + + .docs-wrapper #__docusaurus .sidebarViewport_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Sidebar-styles-module { + position: sticky; + top: 77px; + } + + .docs-wrapper #__docusaurus .sidebar_node_modules-\@docusaurus-theme-classic-lib-theme-DocSidebar-Desktop-styles-module { + padding-top: 0; + } +} + +.pagination-nav { + display: none; +} + +html.plugin-docs.plugin-id-web5 body, +html.plugin-docs.plugin-id-web5 .navbar { + background-color: #1c1c1c; +} + +html.plugin-docs.plugin-id-web5 .navbar { + border-bottom: 1px solid var(--ifm-toc-border-color); + padding: 0; +} + +html.plugin-docs.plugin-id-web5 .navbar__items, +html.plugin-docs.plugin-id-web5 .navbar__items--right { + align-items: baseline; +} + +html.plugin-docs.plugin-id-web5 .navbar__logo { + margin-bottom: 1.5rem; + height: 1.5rem; +} + +html.plugin-docs.plugin-id-web5 .navbar-sidebar .navbar-sidebar__item:last-child .clean-btn.navbar-sidebar__back::before { + display: inline-block; + content: url('/static/img/arrow-yellow.svg'); + position: relative; +} + +html.plugin-docs.plugin-id-web5 aside .menu__link { + color: var(--ifm-menu-color); + padding-top: 0rem; + padding-bottom: 0rem; +} + +html.plugin-docs.plugin-id-web5 aside aside .menu__link { + padding-left: 0; +} + +html.plugin-docs.plugin-id-web5 aside aside .menu__link li a { + padding-left: 0; +} + +html.plugin-docs.plugin-id-web5 aside aside .menu__link--active { + padding-left: 0; +} + +html.plugin-docs.plugin-id-web5 .thin-scrollbar { + color: white; + letter-spacing: 1px; + margin-top: 24px; +} + +html.plugin-docs.plugin-id-web5 aside .sidebar_node_modules-\@docusaurus-theme-classic-lib-next-theme-DocSidebar-Desktop-styles-module { + top: auto; +} + +html.plugin-docs.plugin-id-web5 .sidebar_RiAD { + top: 0 !important; +} + +@media (min-width: 997px) { + html.plugin-docs.plugin-id-web5 .menu_node_modules-\@docusaurus-theme-classic-lib-next-theme-DocSidebar-Desktop-Content-styles-module { + flex-grow: 1; + padding-left: 0rem !important; + font-size: large; + } + + html.plugin-docs.plugin-id-web5 aside.docSidebarContainer_src-layout-DocPage-styles-module, + html.plugin-docs.plugin-id-web5 aside.theme-doc-sidebar-container { + margin-right: 1.5rem; + } +} + +/* Article styling */ + +article .markdown p { + font-weight: var(--typography-body-1-d-font-weight); + font-size: var(--typography-body-1-d-font-size); + line-height: var(--typography-body-1-d-line-height); + letter-spacing: 1px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +article .markdown li { + font-weight: var(--typography-body-1-d-font-weight); + font-size: var(--typography-body-1-d-font-size); + line-height: var(--typography-body-1-d-line-height); + letter-spacing: 1px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +article .markdown blockquote { + color: var(--color-yellow); + font-style: normal; + font-weight: 300; +} + +article .markdown blockquote b { + color: white; + font-style: normal; + font-weight: 800; +} + +article .theme-code-block pre { + background: #232323; +} + +article .theme-code-block pre code .token-line span { + color: white; +} + +article .markdown p { + font-weight: var(--typography-body-1-d-font-weight); + font-size: var(--typography-body-1-d-font-size); + line-height: var(--typography-body-1-d-line-height); + letter-spacing: 1px; + font-family: var(--tbd-font-sans); +} + +article .markdown p code { + color: white; + background-color: gray; +} + +.pagination-nav__sublabel { + display: none; +} + +.pagination-nav__label { + color: white; + letter-spacing: 1px; + font-weight: 400; + text-decoration: none; +} + +html.plugin-docs.plugin-id-web5 .thin-scrollbar { + color: white; + letter-spacing: 1px; + margin-top: 24px; + top: 118px; + font-family: var(--tbd-font-sans); +} + +html.plugin-docs.plugin-id-web5 article time { + color: white; +} + +html.plugin-docs.plugin-id-web5 .avatar { + color: white; +} + +html.plugin-docs.plugin-id-web5 .navbar__link { + font-size: 18px; + padding-block: 1.5rem; + border-bottom: 4px solid transparent; +} + +html.plugin-docs.plugin-id-web5 .navbar__link:hover { + border-bottom: 4px solid var(--color-yellow); + color: var(--color-yellow); +} + +html.plugin-docs.plugin-id-web5 .navbar__link--active { + border-bottom: 4px solid var(--color-yellow); + color: var(--color-yellow); +} + +html.plugin-docs.plugin-id-web5 .thin-scrollbar ul li a:hover { + color: var(--color-yellow); +} + +html.plugin-docs.plugin-id-web5 .sidebarItemLinkActive_node_modules-\@docusaurus-theme-classic-lib-next-theme-BlogSidebar-styles-module { + color: var(--color-yellow); +} + +html.plugin-docs.plugin-id-web5 article h2 { + color: var(--color-yellow); + font-size: 24px; +} + +html.plugin-docs.plugin-id-web5 ul.table-of-contents li a code, +html.plugin-docs.plugin-id-web5 ul.table-of-contents li code { + background-color: transparent; +} + +html.plugin-docs.plugin-id-web5 .table-of-contents__link:hover, +html.plugin-docs.plugin-id-web5 .table-of-contents__link:hover code, +html.plugin-docs.plugin-id-web5 .table-of-contents__link--active, +html.plugin-docs.plugin-id-web5 .table-of-contents__link--active code { + color: var(--color-yellow); + text-decoration: none; +} + +.docs-wrapper #__docusaurus .table-of-contents ul { + padding-inline-start: 1rem; +} + +html.plugin-docs.plugin-id-web5 .table-of-contents a strong { + color: white !important; +} + +html.plugin-docs.plugin-id-web5 .table-of-contents li { + list-style: none !important; +} + +html.plugin-docs.plugin-id-web5 .table-of-contents__link { + color: #969696; + font-size: 1rem; + font-weight: 500; + line-height: 1.375rem; + text-decoration: none; + padding: 0.75rem 0.5rem; +} + +html.plugin-docs.plugin-id-web5 .table-of-contents__left-border { + border-left: 1px solid #343434; + padding-left: 1rem; +} + +html.plugin-docs.plugin-id-web5 .table-of-contents__left-border li { + margin-right: 0; + margin-left: 0; + font-family: var(--tbd-font-mono); + letter-spacing: 0; +} + +/* Redocusaurus */ +.redocusaurus { + overflow: auto; + height: 95vh; +} + +/* Changes */ +.hero-button { + z-index: 99999; + width: fit-content; +} + +.hero-button a { + text-decoration: none; + text-transform: uppercase; + font-weight: bold; +} + +.theme-card { + --color-card: 36, 242, 255; + border: 1px solid rgba(var(--color-card), 0.35); +} + +.theme-card .hero-button a>div { + background: #fff; + color: #000; +} + +article .markdown .theme-card>p { + line-height: 1.5; + font-size: 100%; + margin-bottom: 2rem; +} + +html.plugin-docs.plugin-id-web5 article .theme-card h3 { + color: rgba(var(--color-card)); +} + +html.plugin-docs.plugin-id-web5 article .theme-card p { + color: #fff; +} + +.theme-card-cyan { + --color-card: 36, 242, 255; +} + +.theme-card-yellow { + --color-card: 255, 236, 25; +} + +.theme-card-purple { + --color-card: 183, 43, 255; +} + +.community-button { + text-decoration: none; + text-transform: uppercase; + font-weight: bold; + background-color: #fff !important; + color: #000 !important; +} + +.tbd-blue-illustration { + filter: var(--color-primary-cyan-filter); +} + +.markdown>h3 { + font-size: 1.5rem; +} + +.language-switch-header { + text-align: right; + margin-bottom: 10px; +} + +.language-switcher-select { + width: auto; + font-size: 16px; + color: #000; + font-weight: bold; + background-color: #ffec19; + margin-left: 15px; + padding: 5px; +} + +.languageTabs { + display: flex; + justify-content: flex-start; + cursor: pointer; + margin: 0; +} + +.mermaid text { + font-weight: bold; +} + +.beat-fade { + animation-name: beat-fade; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-timing-function: cubic-bezier(.4, 0, .6, 1); + -webkit-animation-name: beat-fade; + -webkit-animation-duration: 2s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-timing-function: cubic-bezier(.4, 0, .6, 1); +} + +@keyframes beat-fade { + 0% { + transform: scale(1); + opacity: 1; + } + + 50% { + transform: scale(1.1); + opacity: 0.7; + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +.bounce { + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-direction: normal; + animation-direction: normal; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: cubic-bezier(.28, .84, .42, 1); + animation-timing-function: cubic-bezier(.28, .84, .42, 1); +} + +@keyframes bounce { + + 0%, + 20%, + 50%, + 80%, + 100% { + transform: translateY(0); + } + + 40% { + transform: translateY(-30px); + } + + 60% { + transform: translateY(-15px); + } +} + +.flip { + -webkit-animation-name: flip; + animation-name: flip; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-direction: normal; + animation-direction: normal; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} + +@keyframes flip { + from { + transform: rotateY(0deg); + } + + to { + transform: rotateY(360deg); + } +} \ No newline at end of file diff --git a/site/tbdex-sidebars.js b/site/tbdex-sidebars.js new file mode 100644 index 000000000..9aa161db7 --- /dev/null +++ b/site/tbdex-sidebars.js @@ -0,0 +1,20 @@ +/** + * Creating a sidebar enables you to: + - create an ordered group of docs + - render a sidebar for each doc of that group + - provide next/previous navigation + + The sidebars can be generated from the filesystem, or explicitly defined here. + + Create as many sidebars as you want. + */ + +// @ts-check + +/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ +const sidebars = { + // By default, Docusaurus generates a sidebar from the docs folder structure + tbdexSidebars: [{ type: 'autogenerated', dirName: '.' }], +}; + +module.exports = sidebars; diff --git a/site/web5-sidebars.js b/site/web5-sidebars.js new file mode 100644 index 000000000..2c10a96b3 --- /dev/null +++ b/site/web5-sidebars.js @@ -0,0 +1,20 @@ +/** + * Creating a sidebar enables you to: + - create an ordered group of docs + - render a sidebar for each doc of that group + - provide next/previous navigation + + The sidebars can be generated from the filesystem, or explicitly defined here. + + Create as many sidebars as you want. + */ + +// @ts-check + +/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ +const sidebars = { + // By default, Docusaurus generates a sidebar from the docs folder structure + web5Sidebars: [{ type: 'autogenerated', dirName: '.' }], +}; + +module.exports = sidebars; From 149b76c9b5d90708ad6d2c8a565ce624bd704d75 Mon Sep 17 00:00:00 2001 From: dayhaysoos Date: Tue, 20 Aug 2024 16:12:20 -0400 Subject: [PATCH 2/7] Fixing tons of react errors --- site/blog/2022-07-01-what-is-web5.md | 4 +- site/blog/2022-12-20-currency-of-freedom.md | 4 +- site/blog/2023-06-23-did-hack.md | 4 +- .../2023-11-14-web5-meets-generative-ai.md | 2 +- site/blog/2024-01-09-dif-hackathon-winners.md | 6 +- site/blog/2024-01-29-tbd-hackathon-winners.md | 16 +- ...4-01-30-shifting-loan-power-to-brrowers.md | 12 +- site/blog/2024-03-01-future-of-personal-ai.md | 17 +- site/blog/2024-07-29-ways-we-use-vcs-today.md | 39 ++-- ...-simplying-cross-platform-payments-daps.md | 33 +-- site/docs/tbdex/issuer/kcc/kcc-wallet.mdx | 8 +- site/docs/tbdex/wallet/overview.mdx | 2 +- site/docs/web5/apps/shared-todo-app.mdx | 6 +- site/docs/web5/apps/todo-app-tutorial.mdx | 32 +-- .../what-are-dids.md | 14 +- .../host-dwn-server.mdx | 2 +- .../web5/decentralized-web-nodes/protocols.md | 215 +++++++++--------- .../decentralized-web-nodes/web5-connect.mdx | 2 +- .../decentralized-web-nodes/what-are-dwns.md | 6 +- .../presentation-definition.mdx | 2 +- .../verifiable-credentials/what-are-vcs.md | 2 +- site/src/components/ApiCard.jsx | 4 +- .../components/ConferenceCommunitySection.jsx | 2 +- site/src/components/Dependencies.jsx | 2 +- .../language/LanguageSwitchBlock.jsx | 1 + .../pages/community/incubation-projects.mdx | 2 +- site/src/theme/Layout/index.js | 16 +- 27 files changed, 237 insertions(+), 218 deletions(-) diff --git a/site/blog/2022-07-01-what-is-web5.md b/site/blog/2022-07-01-what-is-web5.md index ee2627be1..b6a4f8abf 100644 --- a/site/blog/2022-07-01-what-is-web5.md +++ b/site/blog/2022-07-01-what-is-web5.md @@ -12,7 +12,7 @@ tags: [web5] - + @@ -28,7 +28,7 @@ tags: [web5]
- +
diff --git a/site/blog/2022-12-20-currency-of-freedom.md b/site/blog/2022-12-20-currency-of-freedom.md index 31136cdde..da2aacace 100644 --- a/site/blog/2022-12-20-currency-of-freedom.md +++ b/site/blog/2022-12-20-currency-of-freedom.md @@ -38,11 +38,11 @@ Many people, especially those who do not live under authoritarian rule, struggle Mike Brock, Head of TBD, sat down with Human Rights Foundation Chairman, Garry Kasparov, to discuss bitcoin as a tool to help protect and expand democracy and freedom around the world. - + Angie Jones, TBD's Head of Developer Relations, spoke with human rights activist Meron Estefanos, who shared her story of using bitcoin to send money to Eritrean refugees in East Africa. - + Unfortunately, powerful stories such as these are not widely shared. TBD is committed to making the decentralized financial world accessible to everyone! diff --git a/site/blog/2023-06-23-did-hack.md b/site/blog/2023-06-23-did-hack.md index c18776f18..8ddac8f61 100644 --- a/site/blog/2023-06-23-did-hack.md +++ b/site/blog/2023-06-23-did-hack.md @@ -33,7 +33,7 @@ The Decentralized Identity Foundation organized [did:hack](https://didhack.xyz/) The 4-day virtual event included sessions from TBD, SpruceID, Dock.io, Aviary Tech, Trinsic, and Danube Tech - all providing educational sessions on ecosystem tools that enable decentralized identity and verifiable credentials. - + @@ -62,4 +62,4 @@ D-PFin, a team comprised of [Moises Jaramillo](https://www.linkedin.com/in/moise We're delighted that the D-PFin team chose Web5 to build their decentralized app! It's a testament of the power of coupling decentralized personal data stores with decentralized identity. Be sure to watch the team's final presentation below. - + diff --git a/site/blog/2023-11-14-web5-meets-generative-ai.md b/site/blog/2023-11-14-web5-meets-generative-ai.md index 21efd3fa4..31af6d290 100644 --- a/site/blog/2023-11-14-web5-meets-generative-ai.md +++ b/site/blog/2023-11-14-web5-meets-generative-ai.md @@ -69,4 +69,4 @@ To accelerate development, Anthony plans to open-source the project and invite c Learn more about what he's building and watch the full live stream [here](https://www.youtube.com/watch?v=pJgMp8qVgMk). - + diff --git a/site/blog/2024-01-09-dif-hackathon-winners.md b/site/blog/2024-01-09-dif-hackathon-winners.md index 19cda58ba..b169bf40c 100644 --- a/site/blog/2024-01-09-dif-hackathon-winners.md +++ b/site/blog/2024-01-09-dif-hackathon-winners.md @@ -47,7 +47,7 @@ The results are in! Out of **418 participants** we have our **top 3** projects! Anonymous Door Unlocking with Anonymity Revocation, was developed by a team from Sako laboratory of Waseda University in Tokyo, comprising of [Dorakemon Watanabe](https://github.com/dorakemon), [Kohei Morita](https://devpost.com/mrtkhgm), [Md Zaki Muzahid](https://devpost.com/md_zaki), [0xvon Tsutsumi](https://devpost.com/0xvon), and [Haruto Kimura](https://devpost.com/harutokimura0608). It's a solution designed for secure and private access control in lab environments. - + **Try it Out:** @@ -59,7 +59,7 @@ To learn more about their project and their experience checkout their [project's The second winner, Decentralinked developed by [Ad0ll Ll0da](https://devpost.com/ad0ll), [Roman Belfer](https://devpost.com/belfer-roman), and [Rb Wolff](https://github.com/reisepass). Is a decentralized job posting application, that helps connect employers and applicants. - + **Try it Out:** @@ -72,7 +72,7 @@ To learn more about their project and their experience checkout their [project's Rounding out our winners, HealthX Protocol developed by [Harsh Tyagi](https://www.linkedin.com/in/mr-harshtyagi/), and [Yashasvi Chaudhary](https://www.linkedin.com/in/0xyshv/). To empower individuals to take control of their health by changing the way medical history is shared and stored. - + **Try it Out:** diff --git a/site/blog/2024-01-29-tbd-hackathon-winners.md b/site/blog/2024-01-29-tbd-hackathon-winners.md index e69ab28f0..df2172622 100644 --- a/site/blog/2024-01-29-tbd-hackathon-winners.md +++ b/site/blog/2024-01-29-tbd-hackathon-winners.md @@ -45,7 +45,7 @@ As we wrap up our very first self-hosted hackathon, we're thrilled to announce t Turtle Shell is a portable personal data management tool that combines your digital life under one Shell, allowing users to own, manage, and view all their data. It was developed by, [Moises E Jaramillo](https://www.linkedin.com/in/moisesjaramillo/) and [Courtney Chan](https://devpost.com/courtneychan-design). - + **Try it Out:** @@ -55,7 +55,7 @@ Turtle Shell is a portable personal data management tool that combines your digi RideFair was developed by [Rebecca Chan](https://www.linkedin.com/in/rebeccachandesign/), [Jennifer To](https://www.linkedin.com/in/jennifer-d-to/) and [Brian Lam](https://www.linkedin.com/in/brian-lam-b20572172/). It's a decentralized ride-sharing app that gives users control over their ride-sharing experience, prioritizing safety and privacy. - + **Try it Out:** @@ -67,7 +67,7 @@ RideFair was developed by [Rebecca Chan](https://www.linkedin.com/in/rebeccachan Talent Toekn, developed by [Marco Boschetti](https://devpost.com/marcoo-boschetti), is a decentralized professional networking platform. Where users can manage their profile, share and receive endorsements for their skills, languages and work experiences without compromising privacy. - + **Try it Out:** @@ -79,7 +79,7 @@ Talent Toekn, developed by [Marco Boschetti](https://devpost.com/marcoo-boschett MoneySavvy, **winner of Best FinTech Inspired App**, was developed by [Ahmad Nurfadilah](https://ahmadnf.dev/). It's a decentralized financial management application. That empowers users to take control of their finances in a privacy-focused environment. - + **Try it Out:** @@ -90,7 +90,7 @@ MoneySavvy, **winner of Best FinTech Inspired App**, was developed by [Ahmad Nur Rapha, **winner of Best Health Inspired App**, was developed by [Festus Idowu](https://www.linkedin.com/in/festus-idowu-8269b3159/). It allows individuals to own and carry their health history with them. Utilizing decentralized web nodes (DWNs) for securly storing medical records. - + **Try it Out:** @@ -102,7 +102,7 @@ Rapha, **winner of Best Health Inspired App**, was developed by [Festus Idowu](h Musiv, **winner of Best Music and Arts Inspired App**, was developed by [Denis Riush](https://devpost.com/dennzriush). It's a decentralized music distribution application. That allows the artist to share their music while maintaining ownership. - + **Try it Out:** @@ -114,7 +114,7 @@ Musiv, **winner of Best Music and Arts Inspired App**, was developed by [Denis R Tracks, **winner of Best Personal Data Inspired Appp**, was developed by [Jack Watson](https://devpost.com/theblindguest). It's a decentralized digital travel diary that lets users pin places they've visited with photos and notes on a customizable world map, that can be shared. - + **Try it Out:** @@ -125,7 +125,7 @@ Tracks, **winner of Best Personal Data Inspired Appp**, was developed by [Jack W FifthPoll, **winners of Best Empowerment & Enablement Inspired App**, was developed by [Spandan Barve](https://devpost.com/marsian83), and [Riya Jain](https://www.linkedin.com/in/jriyyya). It's a decentralized community-driven voting platform where every individual's voice is heard. - + **Try it Out:** diff --git a/site/blog/2024-01-30-shifting-loan-power-to-brrowers.md b/site/blog/2024-01-30-shifting-loan-power-to-brrowers.md index e8f9445f6..cb7354a19 100644 --- a/site/blog/2024-01-30-shifting-loan-power-to-brrowers.md +++ b/site/blog/2024-01-30-shifting-loan-power-to-brrowers.md @@ -40,14 +40,17 @@ _"Our current credit system says, 'Saddle yourself, so we can give you more to s ## Residual Income Knowledge Index (RIKI) + The Fair Isaac Corporation score, better known as a FICO score, is a three-digit score that helps lenders in the U.S. evaluate the likelihood of a borrower repaying a loan. A higher score indicates greater reliability. However, achieving a high FICO score — or any credit score — largely depends on accruing and gradually repaying debt. This may come as a disadvantage for various groups of people who may not have a credit score, including veterans, formerly incarcerated individuals, immigrants, young adults, and folks who prefer cash transactions. To provide a more holistic view of a person's creditworthiness, FormFree developed a new system called [Residual Income Knowledge Index™ (RIKI™)](https://www.formfree.com/news-and-insights/formfree-releases-residual-income-knowledge-index/). Instead, RIKI analyzes monthly income and spending. Integrating this method into our existing credit system provides greater opportunities for home ownership, car purchases, and other essential loans. ## "It's like Tinder for banks!" + During the live stream, FormFree Software Engineer, Jon West, showcased their [Passport](https://passport.formfree.com/) product. The demo highlighted Passport's ability to match borrowers with lenders. This feature inspired an audience member to comment, 'It's like Tinder for banks!'" Here's how it works: + - Borrowers securely connect to their bank account. - FormFree analyzes the account records and creates an anonymized credit profile for the borrower. - Lenders review these anonymized profiles and decide which borrowers to extend offers to. @@ -57,20 +60,23 @@ Here's how it works: Typically, borrowers endure aggressively pitched products from dozens of lending institutions. FormFree shifts control to users for more tailored loan consideration. ## How FormFree Uses Web5 + FormFree uses the following Web5 technologies: + - [Decentralized Identifiers (DID)](/docs/web5/decentralized-identifiers/what-are-dids) - After sign up, the application associates a user's account with a DID. - [Verifiable Credentials (VC)](/docs/web5/verifiable-credentials/what-are-vcs) - A borrower's credit profile is secured as a Verifiable Credential enabling the borrower's information to stay anonymous and tamper-proof. ## Coming Soon - tbLend and Credential Selector + As part of our [incubation program](/community/incubation-projects/), organizations such as [FormFree](https://www.formfree.com/), [Sophtron](https://sophtron.com/index), and [MX](https://www.mx.com/) are working in partnership to build Web5 protocols that will help their products evolve. - [tbLend](https://github.com/TBD54566975/incubation-tblend#web5service) - A Web5 protocol that connects the lender and borrower to exchange money securely. - [Credential Selector](https://github.com/TBD54566975/incubation-verifiable-credential-selector) - A Web5 protocol that enables developers to embed the Verifiable Credentials (VCs) into their application and allows users to select and retrieve VCs. ## Rewatch the full episode -Learn more about what FormFree is building and watch the full live stream [here](https://youtu.be/vXYyT8rLaR4). - +Learn more about what FormFree is building and watch the full live stream [here](https://youtu.be/vXYyT8rLaR4). -*This post highlights key moments from our collaborative live stream with leaders and builders at FormFree. Join our weekly live streams every Friday at 12pm ET/9 am PT. We're learning how innovators and community members are advancing the Self-Sovereign Identity and Global Payments industry. Tune in next time via [Twitch](https://twitch.tv/tbdevs ) or in our community [Discord](https://discord.com/invite/tbd).* + +_This post highlights key moments from our collaborative live stream with leaders and builders at FormFree. Join our weekly live streams every Friday at 12pm ET/9 am PT. We're learning how innovators and community members are advancing the Self-Sovereign Identity and Global Payments industry. Tune in next time via [Twitch](https://twitch.tv/tbdevs) or in our community [Discord](https://discord.com/invite/tbd)._ diff --git a/site/blog/2024-03-01-future-of-personal-ai.md b/site/blog/2024-03-01-future-of-personal-ai.md index 82959686f..d01385215 100644 --- a/site/blog/2024-03-01-future-of-personal-ai.md +++ b/site/blog/2024-03-01-future-of-personal-ai.md @@ -34,32 +34,39 @@ tags: ![The Future of Personal AI](/img/ai-bestie.png) ## The Future of Personal AI -For many years, artificial intelligence primarily piqued the interest of academic researchers and enthusiasts within niche technological sectors such as robotics. Although respected, AI presented little practical application for the average person. That changed in June 2020 with the debut of a Large Language Model (LLM) called GPT-3. GPT-3 inspired organizations and individuals to use AI to accelerate their workflows, from coding and blogging to planning itineraries. Today, the potential of AI is so immense that Simon Westh Henriksen, the CTO of Kin, believes personal AI will be one of the most valuable digital assets we own in the future. Simon and his team built Kin. They describe it as "your personal AI assistant for your private life." The intended persona for Kin is a mix between a life coach and a close friend. + +For many years, artificial intelligence primarily piqued the interest of academic researchers and enthusiasts within niche technological sectors such as robotics. Although respected, AI presented little practical application for the average person. That changed in June 2020 with the debut of a Large Language Model (LLM) called GPT-3. GPT-3 inspired organizations and individuals to use AI to accelerate their workflows, from coding and blogging to planning itineraries. Today, the potential of AI is so immense that Simon Westh Henriksen, the CTO of Kin, believes personal AI will be one of the most valuable digital assets we own in the future. Simon and his team built Kin. They describe it as "your personal AI assistant for your private life." The intended persona for Kin is a mix between a life coach and a close friend. ## My First Impressions of Kin + For the last three years, I've deemed ChatGPT my bestie, so when I heard about Kin, I immediately downloaded the beta on my phone. My initial impression was that there was a sense of familiarity because the user interface and interaction were reminiscent of other LLM-powered chatbots such as ChatGPT and Gemini. However, there were some key differences between Kin and traditional chatbots – it focuses on **privacy** and **personalization**. ## Privacy-First Artificial Intelligence + With traditional Generative AI Chatbots, your data lives on the company's servers for telemetry purposes (and more). In contrast, Simon explained that Kin doesn't have backend servers, and users' data stays exclusively with the user. This is possible because of Web5's [Decentralized Web Nodes (DWN)](https://developer.tbd.website/docs/web5/decentralized-web-nodes/what-are-dwns). DWNs provide users with a local and personal data store. Now, you can ask an AI personal questions without worrying if someone else can also read it. ## Personalized for You + Unlike traditional Generative AI Chatbots, Kin retains the context of your conversations to provide personalized and relevant responses. As users engage with Kin, the platform analyzes these interactions to extract facts about the user, constructing a semantic memory. This process involves graphing and mapping details such as your name, relationships, interests, etc. Simon explained the technological process behind this functionality: "It takes in this new knowledge that we have recognized from the chat, or what we think is new knowledge. And then we query this graph that already exists, and we kind of take a subgraph, the relevant subgraph, that might be related to that thing. Then we give it to the LLM, to the model, and it outputs graph operations. So that's something like add node, add edge, remove node, remove edge, and then we apply those to the graph. And in that way, the memory evolves as you speak and interact with Kin." ## The Future of Kin + The team at Kin is working on enhancing the platform's memory beyond facts of the user by introducing episodic memory. Episodic memory tracks events in users' lives and anchors them to a timeline to give AI an idea of how a user's life evolves. They also plan to implement natural voice interfaces and personalized reminders. ## The True Value of Data Ownership -Simon envisions a future where Kin takes full advantage of Web5's data ownership and cryptographic verification capabilities. He provided a futuristic example: After a year of personalized interaction, Kin could use [Verifiable Credentials](https://developer.tbd.website/docs/web5/verifiable-credentials/what-are-vcs) to serve as a digital assistant with verified authority on the user's behalf. Kin could share preferences with third parties like e-commerce websites with the user's permission. -_"This is where owning and controlling your data suddenly becomes extremely valuable,"_ Simon proclaims. Data ownership is not just about keeping your data private but having control over who you share your data with. +Simon envisions a future where Kin takes full advantage of Web5's data ownership and cryptographic verification capabilities. He provided a futuristic example: After a year of personalized interaction, Kin could use [Verifiable Credentials](https://developer.tbd.website/docs/web5/verifiable-credentials/what-are-vcs) to serve as a digital assistant with verified authority on the user's behalf. Kin could share preferences with third parties like e-commerce websites with the user's permission. + +_"This is where owning and controlling your data suddenly becomes extremely valuable,"_ Simon proclaims. Data ownership is not just about keeping your data private but having control over who you share your data with. ## Rewatch the full episode + Learn more about what Kin is building and watch the full live stream [here](https://youtu.be/FboOp6V47n8). - + -*This post highlights key moments from our collaborative live stream with leaders and builders at Kin. Join our weekly live streams every Friday at 12pm ET/9 am PT. We're learning how innovators and community members are advancing the Self-Sovereign Identity and Global Payments industry. Tune in next time via [Twitch](https://twitch.tv/tbdevs ) or in our community [Discord](https://discord.com/invite/tbd).* +_This post highlights key moments from our collaborative live stream with leaders and builders at Kin. Join our weekly live streams every Friday at 12pm ET/9 am PT. We're learning how innovators and community members are advancing the Self-Sovereign Identity and Global Payments industry. Tune in next time via [Twitch](https://twitch.tv/tbdevs) or in our community [Discord](https://discord.com/invite/tbd)._ diff --git a/site/blog/2024-07-29-ways-we-use-vcs-today.md b/site/blog/2024-07-29-ways-we-use-vcs-today.md index bfa7d5c1c..fc7a02a8d 100644 --- a/site/blog/2024-07-29-ways-we-use-vcs-today.md +++ b/site/blog/2024-07-29-ways-we-use-vcs-today.md @@ -1,7 +1,7 @@ --- slug: 7-ways-we-use-vcs-today -title: "7 Unexpected Ways Verifiable Credentials Are Used Today" -description: "Verifiable Credentials are more than a buzzword. Discover 7 real-world use cases revealing their hidden impact." +title: '7 Unexpected Ways Verifiable Credentials Are Used Today' +description: 'Verifiable Credentials are more than a buzzword. Discover 7 real-world use cases revealing their hidden impact.' authors: name: Rizèl Scarlett tags: [Verifiable Credentials, Web5] @@ -12,7 +12,7 @@ tags: [Verifiable Credentials, Web5] - + @@ -40,7 +40,7 @@ From healthcare to content creation, finance to travel, VCs are changing how we ## 1. Mobile Driver’s Licenses -If you often misplace your wallet like me, there's good news — your state may support the use of Mobile Driver's Licenses (mDLs). Louisiana was the [first state to implement mDLs](https://envoc.com/case-study/the-nations-first-digital-drivers-license/#:~:text=July%202018%3A%20LA%20Wallet%20is,as%20fishing%20and%20hunting%20licenses.) in 2018. Since then, mDLs have been [gaining traction](https://www.aamva.org/jurisdiction-data-maps#anchorformdlmap) across the United States. With mDLs, residents of participating states can store a digital version of their driver's license on their smartphones. This allows users to leave their physical ID at home and use their phones for identification in various situations, including travel, age-restricted services, voting, and law enforcement interactions. +If you often misplace your wallet like me, there's good news — your state may support the use of Mobile Driver's Licenses (mDLs). Louisiana was the [first state to implement mDLs](https://envoc.com/case-study/the-nations-first-digital-drivers-license/#:~:text=July%202018%3A%20LA%20Wallet%20is,as%20fishing%20and%20hunting%20licenses.) in 2018. Since then, mDLs have been [gaining traction](https://www.aamva.org/jurisdiction-data-maps#anchorformdlmap) across the United States. With mDLs, residents of participating states can store a digital version of their driver's license on their smartphones. This allows users to leave their physical ID at home and use their phones for identification in various situations, including travel, age-restricted services, voting, and law enforcement interactions. VCs are the technology behind mDLs because they offer features like revocation, authentication, expiration, and tamper evidence. If you use an mDL, you're using VCs! @@ -48,20 +48,19 @@ VCs are the technology behind mDLs because they offer features like revocation, _Source: https://lawallet.com/_ - ## 2. The Pharmaceutical Supply Chain -[Dr. Carsten Stöcker](https://www.linkedin.com/in/dr-carsten-st%C3%B6cker-1145871/), CEO of [Spherity](https://www.spherity.com/), introduced me to a fascinating application of VCs in the pharmaceutical industry. Pharmacies often trade medicines with each other to maintain their stock, but this exchange requires complex verification processes. They must verify the legitimacy of three key elements: +[Dr. Carsten Stöcker](https://www.linkedin.com/in/dr-carsten-st%C3%B6cker-1145871/), CEO of [Spherity](https://www.spherity.com/), introduced me to a fascinating application of VCs in the pharmaceutical industry. Pharmacies often trade medicines with each other to maintain their stock, but this exchange requires complex verification processes. They must verify the legitimacy of three key elements: -* the medicine, -* the organization they're trading with, -* the provider making the trade +- the medicine, +- the organization they're trading with, +- the provider making the trade [Caro.vc](http://Caro.vc), a Spherity company, employs VCs to simplify this process and reduce errors. Their solution allows pharmacies to quickly and securely verify all these elements, ensuring the integrity of the pharmaceutical supply chain. **To learn more about this use case, check out this discussion between Dr. Carsten Stocker and the Developer Relations Team at TBD:** - + ## 3. Content Creation and Generative AI @@ -85,7 +84,7 @@ To address these issues, Davis built [Switchcord](https://www.switchchord.com/), **To learn more about this use case, check out this discussion between Cole Davis and the Developer Relations Team at TBD:** - + ## 5. Loan Applications @@ -95,19 +94,19 @@ The U.S. credit system requires residents to accumulate debt as a prerequisite f **To learn more about this use case, check out this discussion between the FormFree team and the Developer Relations Team at TBD:** - + ## 6. Online Marketplaces and Catfishing Unfortunately, online marketplace scams are common. From purchasing a car to renting a home or adopting a pet, you can buy and sell almost anything online. However, there's no foolproof mechanism to ensure the seller is trustworthy. -With the rise of social media, catfishing — where a person pretends to be someone they're not while online dating — has also increased dramatically. While many believe they're not susceptible, [23%](https://wifitalents.com/statistic/social-media-catfish/) of online dating participants reported being catfished, and [41%](https://wifitalents.com/statistic/social-media-catfish/) of catfish victims are between the ages of 18 and 34. +With the rise of social media, catfishing — where a person pretends to be someone they're not while online dating — has also increased dramatically. While many believe they're not susceptible, [23%](https://wifitalents.com/statistic/social-media-catfish/) of online dating participants reported being catfished, and [41%](https://wifitalents.com/statistic/social-media-catfish/) of catfish victims are between the ages of 18 and 34. -[Jeffrey Schwartz](https://www.linkedin.com/in/jeffrey-alan-schwartz) created [Dentity](https://www.dentity.com/) to reduce the frequency of scams and catfishing incidents. Dentity uses VCs to verify individuals on any platform, from dating apps to online marketplaces. +[Jeffrey Schwartz](https://www.linkedin.com/in/jeffrey-alan-schwartz) created [Dentity](https://www.dentity.com/) to reduce the frequency of scams and catfishing incidents. Dentity uses VCs to verify individuals on any platform, from dating apps to online marketplaces. **To learn more about this use case, check out this discussion between Jeffrey and the Developer Relations Team at TBD:** - + ## 7. Native Tribes @@ -117,14 +116,14 @@ The Catawba Digital Economic Zone is using the [Web5 SDK](https://developer.tbd. **To learn more about this use case, check out this discussion between the Catawba Digital Economic Zone Team and the Developer Relations Team at TBD:** - + -## Learn More +## Learn More Verifiable Credentials are making a tangible difference by solving real problems for real people - simplifying loan applications, protecting artists' rights, ensuring pharmaceutical safety, and supporting tribal sovereignty. If you have ideas for building apps with VCs, check out these resources: -* [Build your own Verifiable Credentials with the Web5 SDK](https://developer.tbd.website/docs/web5/verifiable-credentials/vc-issuance) -* [How TBD is using VCs in the tbDEX SDK](https://developer.tbd.website/docs/tbdex/) -* [TBD’s YouTube Channel](https://www.youtube.com/@tbd.videos/?sub_confirmation=1) \ No newline at end of file +- [Build your own Verifiable Credentials with the Web5 SDK](https://developer.tbd.website/docs/web5/verifiable-credentials/vc-issuance) +- [How TBD is using VCs in the tbDEX SDK](https://developer.tbd.website/docs/tbdex/) +- [TBD’s YouTube Channel](https://www.youtube.com/@tbd.videos/?sub_confirmation=1) diff --git a/site/blog/2024-07-31-simplying-cross-platform-payments-daps.md b/site/blog/2024-07-31-simplying-cross-platform-payments-daps.md index b3e0660f2..449702b54 100644 --- a/site/blog/2024-07-31-simplying-cross-platform-payments-daps.md +++ b/site/blog/2024-07-31-simplying-cross-platform-payments-daps.md @@ -1,7 +1,7 @@ --- slug: simplifying-cross-platform-payments-daps -title: "Simplifying Cross-Platform Payments with DAPs" -description: "Introducing Decentralized Agnostic Paytags, a universal money address tied to Decentralized Identifiers" +title: 'Simplifying Cross-Platform Payments with DAPs' +description: 'Introducing Decentralized Agnostic Paytags, a universal money address tied to Decentralized Identifiers' authors: name: Rizèl Scarlett tags: [Decentralized Agnostic Paytags, DAP, Decentralized Identifiers] @@ -12,7 +12,7 @@ tags: [Decentralized Agnostic Paytags, DAP, Decentralized Identifiers] - + @@ -33,7 +33,7 @@ tags: [Decentralized Agnostic Paytags, DAP, Decentralized Identifiers] ## Solving an Awkward Issue -Peer-to-peer (P2P) payment applications have existed since the late '90s, starting with tools like PayPal. With the rise of smartphones, innovative mobile apps like Venmo, Zelle, and Block's very own Cash App have made it easier to exchange funds directly from our phones. +Peer-to-peer (P2P) payment applications have existed since the late '90s, starting with tools like PayPal. With the rise of smartphones, innovative mobile apps like Venmo, Zelle, and Block's very own Cash App have made it easier to exchange funds directly from our phones. However, a persistent issue remains: the sender and recipient must use the same app to complete a transaction. People have personal and valid reasons for choosing their preferred payment apps. @@ -43,7 +43,7 @@ Instead, P2P payment apps can use DAPs—agnostic unique identifiers stored ## Introducing Decentralized Agnostic Paytags (DAPs) -A DAP is a user-friendly handle for payments, structured as `@local-handle/domain`. +A DAP is a user-friendly handle for payments, structured as `@local-handle/domain`. Here's an example: I love the handle blackgirlbytes. If I registered that handle on Cash App's DAP registry, my DAP would be `@blackgirlbytes/cash.app`. Similarly, if I registered that handle on DIDPay's DAP registry, my handle would be `@blackgirlbytes/didpay.me`. @@ -54,8 +54,9 @@ Each DAP links to a [Decentralized Identifier (DID)](https://developer.tbd.websi The DAP ecosystem has two key actors: the payment platform that offers DAPs and the users who own the DAPs. **For Organizations:** Any organization can enable users to create a DAP on their platform by setting up a DAP registry associated with their domain. This registry serves two main functions: -* It allows users to sign up for DAPs. -* It maps users' DAPs with their DID and money address. + +- It allows users to sign up for DAPs. +- It maps users' DAPs with their DID and money address. **For Users:** Once a DAP registry is available on your preferred platform, you can sign up for a DAP using your chosen handle. @@ -65,15 +66,15 @@ If you're eager to experiment with DAPs but your preferred payment platform hasn DAPs debuted during a company-wide Hackathon at Block, where TBD, Cash App, and Square teams collaborated to bring this vision to life. As the DAP implementation continues to evolve, here are a few ways you can stay involved: -* Join the [TBD Discord](http://discord.gg/tbd) -* Read the DAP [specification](https://github.com/TBD54566975/dap) -* Contribute to the open source SDKs: - * [dap-js](https://github.com/tbd54566975/dap-js) - * [dap-go](https://github.com/tbd54566975/dap-go) - * [dap-kt](https://github.com/tbd54566975/dap-kt) - * [dap-dart](https://github.com/tbd54566975/dap-dart) -* Create a DAP in our [static DAP registry](https://github.com/TBD54566975/dap-registry-static) +- Join the [TBD Discord](http://discord.gg/tbd) +- Read the DAP [specification](https://github.com/TBD54566975/dap) +- Contribute to the open source SDKs: + - [dap-js](https://github.com/tbd54566975/dap-js) + - [dap-go](https://github.com/tbd54566975/dap-go) + - [dap-kt](https://github.com/tbd54566975/dap-kt) + - [dap-dart](https://github.com/tbd54566975/dap-dart) +- Create a DAP in our [static DAP registry](https://github.com/TBD54566975/dap-registry-static) **Watch the video below to learn more** - \ No newline at end of file + diff --git a/site/docs/tbdex/issuer/kcc/kcc-wallet.mdx b/site/docs/tbdex/issuer/kcc/kcc-wallet.mdx index 6918d865e..deaf3a7c4 100644 --- a/site/docs/tbdex/issuer/kcc/kcc-wallet.mdx +++ b/site/docs/tbdex/issuer/kcc/kcc-wallet.mdx @@ -182,7 +182,7 @@ This request contains information about the Issuer along with a [Presentation De Here's a JSON example where `id_token` and `vp_token` are both requested: -
+
SIOPv2 Authorization Request ```javascript @@ -378,7 +378,7 @@ The Issuer's Metadata includes information about the Issuer's capabilities, cred Here is an example of an Issuer's Metadata: -
+
Issuer's Metadata ```javascript @@ -459,7 +459,7 @@ Before the Wallet can request a KCC from the Issuer, the Wallet needs to also fe The Server Authorization Metadata can look like this: -
+
Server Authorization Metadata ```javascript @@ -506,7 +506,7 @@ If the IDV process is incomplete, the Issuer will return an `authorization_pendi Here's an example Access Token Response from the Issuer: -
+
Access Token Response ```javascript // Issuer.js diff --git a/site/docs/tbdex/wallet/overview.mdx b/site/docs/tbdex/wallet/overview.mdx index 7f42060a2..6add80488 100644 --- a/site/docs/tbdex/wallet/overview.mdx +++ b/site/docs/tbdex/wallet/overview.mdx @@ -5,7 +5,7 @@ sidebar_position: 1 # Wallet Overview
- +
Wallet applications serve as agents in facilitating transactions for individuals seeking liquidity offered by [Participating Financial Institutions (PFIs)](/docs/tbdex/pfi/overview). diff --git a/site/docs/web5/apps/shared-todo-app.mdx b/site/docs/web5/apps/shared-todo-app.mdx index 4a088f0d9..de254f6b1 100644 --- a/site/docs/web5/apps/shared-todo-app.mdx +++ b/site/docs/web5/apps/shared-todo-app.mdx @@ -346,10 +346,10 @@ const copyDID = async() => { And in the `