mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-27 23:25:51 +00:00
Re-level non-docs content to top of repo and rename content→docs
This commit is contained in:
mDuo13
149
@theme/markdoc/components.tsx
Normal file
149
@theme/markdoc/components.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
import * as React from 'react';
|
||||
// @ts-ignore
|
||||
import dynamicReact from '@markdoc/markdoc/dist/react';
|
||||
import { usePageSharedData, useTranslate } from '@portal/hooks';
|
||||
import { Link } from '@portal/Link';
|
||||
import { idify } from '../helpers';
|
||||
|
||||
export {default as XRPLoader} from '../components/XRPLoader';
|
||||
export { XRPLCard, CardGrid } from '../components/XRPLCard';
|
||||
|
||||
|
||||
export function IndexPageItems() {
|
||||
const data = usePageSharedData('index-page-items') as any[];
|
||||
return (
|
||||
<div className="children-display">
|
||||
<ul>
|
||||
{data?.map((item: any) => (
|
||||
<li className="level-1" key={item.slug}>
|
||||
<Link to={item.slug}>{item.title}</Link>
|
||||
<p className='class="blurb child-blurb'>{item.blurb}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function InteractiveBlock(props: { children: React.ReactNode; label: string; steps: string[] }) {
|
||||
const stepId = idify(props.label);
|
||||
|
||||
return (
|
||||
<div className="interactive-block" id={'interactive-' + stepId}>
|
||||
<div className="interactive-block-inner">
|
||||
<div className="breadcrumbs-wrap">
|
||||
<ul
|
||||
className="breadcrumb tutorial-step-crumbs"
|
||||
id={'bc-ul-' + stepId}
|
||||
data-steplabel={props.label}
|
||||
data-stepid={stepId}
|
||||
>
|
||||
{props.steps?.map((step, idx) => {
|
||||
const iterStepId = idify(step).toLowerCase();
|
||||
let className = `breadcrumb-item bc-${iterStepId}`;
|
||||
if (idx > 0) className += ' disabled';
|
||||
if (iterStepId === stepId) className += ' current';
|
||||
return (
|
||||
<li className={className} key={iterStepId}>
|
||||
<a href={`#interactive-${iterStepId}`}>{step}</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="interactive-block-ui">{dynamicReact(props.children, React, {})}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function RepoLink(props: {
|
||||
children: React.ReactNode;
|
||||
path: string;
|
||||
github_fork: string;
|
||||
github_branch: string
|
||||
}) {
|
||||
const treeblob = props.path.indexOf(".") >= 0 ? "blob/" : "tree/"
|
||||
const sep = props.github_fork[-1] == "/" ? "" : "/"
|
||||
const href = props.github_fork+sep+treeblob+props.github_branch+"/"+props.path
|
||||
|
||||
return (
|
||||
<Link to={href}>{dynamicReact(props.children, React, {})}</Link>
|
||||
)
|
||||
}
|
||||
|
||||
export function CodePageName(props: {
|
||||
name: string;
|
||||
}) {
|
||||
return (
|
||||
<code>{props.name}</code>
|
||||
)
|
||||
}
|
||||
|
||||
export function Badge(props: {
|
||||
children: React.ReactNode;
|
||||
color: string;
|
||||
href: string;
|
||||
}) {
|
||||
const DEFAULT_COLORS = {
|
||||
"open for voting": "80d0e0",
|
||||
"投票中": "80d0e0", // ja: open for voting
|
||||
"expected": "blue",
|
||||
"予定": "blue", // ja: expected
|
||||
"enabled": "green",
|
||||
"有効": "green", // ja: enabled
|
||||
"obsolete": "red",
|
||||
"廃止": "red", // ja: obsolete
|
||||
"撤回": "red", // ja: withdrawn/removed/vetoed
|
||||
"new in": "blue",
|
||||
"新規": "blue", // ja: new in"
|
||||
"in development": "lightgrey",
|
||||
"開発中": "lightgrey", // ja: in development
|
||||
}
|
||||
|
||||
let childstrings = ""
|
||||
|
||||
React.Children.forEach(props.children, (child, index) => {
|
||||
if (typeof child == "string") {
|
||||
childstrings += child
|
||||
}
|
||||
});
|
||||
|
||||
const parts = childstrings.split(":")
|
||||
const left : string = shieldsIoEscape(parts[0])
|
||||
const right : string = shieldsIoEscape(parts.slice(1).join(":"))
|
||||
|
||||
let color = props.color
|
||||
if (!color) {
|
||||
if (DEFAULT_COLORS.hasOwnProperty(left.toLowerCase())) {
|
||||
color = DEFAULT_COLORS[left.toLowerCase()]
|
||||
} else {
|
||||
color = "lightgrey"
|
||||
}
|
||||
}
|
||||
|
||||
let badge_url = `https://img.shields.io/badge/${left}-${right}-${color}.svg`
|
||||
|
||||
if (props.href) {
|
||||
return (
|
||||
<Link to={props.href}>
|
||||
<img src={badge_url} alt={childstrings} className="shield" />
|
||||
</Link>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<img src={badge_url} alt={childstrings} className="shield" />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function shieldsIoEscape(s: string) {
|
||||
return s.trim().replaceAll('-', '--').replaceAll('_', '__')
|
||||
}
|
||||
|
||||
export function NotEnabled() {
|
||||
const { translate } = useTranslate();
|
||||
return (
|
||||
<span className="status not_enabled" title={translate("This feature is not currently enabled on the production XRP Ledger.")}><i className="fa fa-flask"></i></span>
|
||||
)
|
||||
}
|
||||
179
@theme/markdoc/schema.ts
Normal file
179
@theme/markdoc/schema.ts
Normal file
@@ -0,0 +1,179 @@
|
||||
import { Schema, Tag } from '@markdoc/markdoc';
|
||||
|
||||
export const indexPageList: Schema & { tagName: string } = {
|
||||
tagName: 'child-pages',
|
||||
render: 'IndexPageItems',
|
||||
selfClosing: true,
|
||||
};
|
||||
|
||||
export const repoLink: Schema & { tagName: string } = {
|
||||
tagName: 'repo-link',
|
||||
attributes: {
|
||||
path: {
|
||||
type: 'String',
|
||||
required: true,
|
||||
},
|
||||
github_fork: {
|
||||
type: 'String',
|
||||
required: false,
|
||||
},
|
||||
github_branch: {
|
||||
type: 'String',
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
transform(node, config) {
|
||||
const attributes = node.transformAttributes(config);
|
||||
attributes["github_fork"] = attributes["github_fork"] || config.variables.env.PUBLIC_GITHUB_FORK;
|
||||
attributes["github_branch"] = attributes["github_branch"] || config.variables.env.PUBLIC_GITHUB_BRANCH;
|
||||
const children = node.transformChildren(config);
|
||||
return new Tag(this.render, attributes, children);
|
||||
},
|
||||
render: 'RepoLink',
|
||||
};
|
||||
|
||||
export const codePageName: Schema & { tagName: string } = {
|
||||
tagName: 'code-page-name',
|
||||
attributes: {
|
||||
name: {
|
||||
type: 'String',
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
transform(node, config) {
|
||||
const attributes = node.transformAttributes(config);
|
||||
attributes["name"] = config.variables.frontmatter.seo.title;
|
||||
return new Tag(this.render, attributes);
|
||||
},
|
||||
render: 'CodePageName',
|
||||
selfClosing: true,
|
||||
};
|
||||
|
||||
export const interactiveBlock: Schema & { tagName: string } = {
|
||||
tagName: 'interactive-block',
|
||||
attributes: {
|
||||
label: {
|
||||
type: 'String',
|
||||
required: true,
|
||||
},
|
||||
steps: {
|
||||
type: 'Array',
|
||||
required: true,
|
||||
},
|
||||
network: {
|
||||
type: 'Object',
|
||||
required: false,
|
||||
default: {
|
||||
name: "Testnet",
|
||||
websocket: "wss://s.altnet.rippletest.net:51233",
|
||||
explorer: "https://testnet.xrpl.org",
|
||||
faucet: "https://faucet.altnet.rippletest.net/accounts",
|
||||
}
|
||||
}
|
||||
},
|
||||
transform(node, config) {
|
||||
const attributes = node.transformAttributes(config);
|
||||
const children = replaceHtmlAttributeValuesVariables(node.transformChildren(config), config.variables.env);
|
||||
return new Tag(this.render, attributes, children);
|
||||
},
|
||||
render: 'InteractiveBlock',
|
||||
};
|
||||
|
||||
function replaceHtmlAttributeValuesVariables(nodes, variables) {
|
||||
for (const n of nodes) {
|
||||
if (n.attributes) {
|
||||
for (const attribName of Object.keys(n.attributes)) {
|
||||
const v = n.attributes[attribName];
|
||||
if (typeof v !== 'string') continue;
|
||||
n.attributes[attribName] = v.replace(/{%\s*\$env.([\w_\d]+)\s*%}/g, (_, name) => {
|
||||
return variables[name];
|
||||
});
|
||||
}
|
||||
}
|
||||
if (n.children) {
|
||||
replaceHtmlAttributeValuesVariables(n.children, variables);
|
||||
}
|
||||
}
|
||||
|
||||
return nodes;
|
||||
}
|
||||
|
||||
export const xrpLoader: Schema & { tagName: string } = {
|
||||
tagName: 'loading-icon',
|
||||
attributes: {
|
||||
message: {
|
||||
type: 'String',
|
||||
required: false,
|
||||
default: "...",
|
||||
},
|
||||
},
|
||||
render: 'XRPLoader',
|
||||
selfClosing: true,
|
||||
};
|
||||
|
||||
export const badge: Schema & { tagName: string } = {
|
||||
tagName: 'badge',
|
||||
attributes: {
|
||||
color: {
|
||||
type: 'String',
|
||||
required: false,
|
||||
default: ""
|
||||
},
|
||||
href: {
|
||||
type: 'String',
|
||||
required: false
|
||||
}
|
||||
},
|
||||
render: 'Badge'
|
||||
};
|
||||
|
||||
export const notEnabled: Schema & { tagName: string } = {
|
||||
tagName: 'not-enabled',
|
||||
render: 'NotEnabled',
|
||||
selfClosing: true,
|
||||
};
|
||||
|
||||
export const xrplCard: Schema & { tagName: string } = {
|
||||
tagName: 'xrpl-card',
|
||||
attributes: {
|
||||
title: {
|
||||
type: 'String',
|
||||
required: true
|
||||
},
|
||||
href: {
|
||||
type: 'String',
|
||||
required: true
|
||||
},
|
||||
body: {
|
||||
type: 'String',
|
||||
required: false
|
||||
},
|
||||
image: {
|
||||
type: 'String',
|
||||
required: false
|
||||
},
|
||||
imageAlt: {
|
||||
type: 'String',
|
||||
required: false
|
||||
},
|
||||
external: { // Not actually implemented (yet)
|
||||
type: 'Boolean',
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
render: 'XRPLCard',
|
||||
selfClosing: true
|
||||
}
|
||||
|
||||
export const cardGrid: Schema & { tagName: string } = {
|
||||
tagName: 'card-grid',
|
||||
attributes: {
|
||||
layout: {
|
||||
type: 'String',
|
||||
required: false,
|
||||
default: '3xN'
|
||||
}
|
||||
},
|
||||
render: 'CardGrid'
|
||||
}
|
||||
Reference in New Issue
Block a user