loading...
) : (
{label}
{children}
);
};
export default Datagram;
================================================
FILE: src/Datagram/style.module.css
================================================
/***** datagram borders *****/
.datagram {
max-width: 800px;
border-radius: 1.2em;
border: 1px solid black;
padding: 5px 15px;
margin: 0.8em auto;
}
.datagram > .label {
font-size: 0.8em;
font-weight: bold;
}
================================================
FILE: src/Footer/index.jsx
================================================
import React from "react";
const Footer = ({ desc, mother, references }) => {
return (
<>
原作者{" "} (Twitter)@XargsNotBombs ,{" "} {mother}
译者{" "} (Github)@AllenLee , 源代码托管在{" "} https://github.com/cangSDARM/illustrate/
-
参考：
{references.map((ref) => (
{routers.map((rt) => (
{
if (rt.href === pathName) return;
e.stopPropagation();
e.preventDefault();
jump(rt.href);
handleRouterChange(rt);
}}
>
{rt.label}
))}
);
};
export default Header;
================================================
FILE: src/Header/style.module.css
================================================
.header {
width: 100%;
margin: 0;
padding: 2px;
border-bottom: 1px solid grey;
background-color: bisque;
color: #444;
line-height: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
text-align: right;
}
.header a,
.header a:visited,
.header a:hover {
text-decoration: none;
color: #444;
}
.header a.this-page:before {
content: "❧\00a0";
}
.header a,
.header span {
margin-right: 0.5em;
}
.header a.this-page {
font-weight: bold;
}
================================================
FILE: src/Intro/index.jsx
================================================
import classes from "./style.module.css";
import Balancer from "react-wrap-balancer";
const Intro = ({ title = "", subtitle = "", desc = "", intro = "" }) => {
return (
{title}
{subtitle && (
{subtitle}
)}
{desc && (
{desc}
)}
{intro && (
{code}
);
};
export default CodeSample;
================================================
FILE: src/RecOuter/CodeSample/style.module.css
================================================
/***** .sample *****/
.sample {
display: block;
margin: 1em 0;
position: relative;
}
.sample pre {
margin: 0;
height: 0;
padding: 0;
}
.sample button.show-code {
display: block;
clear: both;
box-shadow: inset 0 0 5px 0 var(--sam-btn-inset);
background: linear-gradient(
to bottom,
var(--sam-btn0) 1%,
var(--sam-btn9) 100%
);
border-radius: 5px;
border: 1px solid var(--sam-btn-border);
cursor: pointer;
color: white;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
padding: 11px 23px;
text-decoration: none;
text-shadow: 0 1px 0 var(--sam-btn-shadow);
}
.sample button.show-code:hover {
background: linear-gradient(
to bottom,
var(--sam-hov-btn0) 1%,
var(--sam-hov-btn9) 100%
);
}
.sample button.show-code:active {
position: relative;
top: 1px;
}
.sample.show button.show-code {
position: absolute;
right: 0;
top: 0;
display: none;
}
.sample.show:hover button.show-code {
display: block;
}
.sample.show pre {
height: auto;
background-color: black;
}
.sample pre code {
font-size: inherit;
word-break: normal;
display: block;
color: white;
padding: 0.5em;
border-radius: 5px;
}
/***** annotation toggle button *****/
================================================
FILE: src/RecOuter/Math/index.jsx
================================================
import React from "react";
import classes from "./style.module.css";
const Types = {
Normal: 0,
NumericalLeading: 1,
SingleAlphabetOrNumericalLeading: 3,
};
const Tokens = {
sup: "^",
sub: "_",
};
const TokensRMap = Object.keys(Tokens).reduce(
(acc, curK) => ({ ...acc, [Tokens[curK]]: curK }),
{}
);
const shiftable = (str = "") => {
const totalLen = str.length;
let curIdx = 0;
return {
shift: (sfLen = 1) => {
if (sfLen <= 0) throw RangeError("out of shift range: " + sfLen);
const ender = Math.min(curIdx + sfLen, totalLen);
if (curIdx < totalLen) {
const result = str.slice(curIdx, ender);
curIdx = ender;
return result;
}
return undefined;
},
rest: () => {
if (curIdx >= totalLen) return undefined;
return str.slice(curIdx);
},
shiftIndex: () => curIdx,
};
};
const typeTracker = (initType = Types.Normal) => {
let types = [initType];
return {
nextType: (type) => types.push(type),
handledType: () => {
if (!types.pop()) {
types = [initType];
}
},
curType: () => types[Math.max(types.length - 1, 0)],
priorType: () =>
types.length - 2 > 0 ? types[types.length - 2] : undefined,
};
};
const resolver = (equation) => {
if (typeof equation !== "string") return equation;
let result = [],
curChar = "x",
pendingContent = [],
Token = undefined;
const { shift, shiftIndex, rest } = shiftable(equation);
const { nextType, curType, handledType, priorType } = typeTracker(
Types.Normal
);
const getNumerical = (str = "") => {
const numerical = str.match(/^-?\d+/i)?.[0];
return numerical;
};
const isAlphabet = (str = "") => {
const numerical = str.match(/^[a-zA-Z]+/i)?.[0];
return !!numerical;
};
const pendingContentToResult = (Token = "span") => {
const joint = pendingContent.join("");
pendingContent = [];
if (joint) result.push(| {child} | ); } return React.cloneElement(child, props); })}
| { const hex = getHexValue(e.target.value); setPrivkey(hex || 0n); setResult(calcMulti({ privkey: hex, pubkey })); }} /> | |
| { const hex = getHexValue(e.target.value); setPubkey(hex || 0n); setResult(calcMulti({ privkey, pubkey: hex })); }} /> | |
| ? | |
| { const hex = getHexValue(e.target.value); setPrivkey(hex || 0n); setResult( calcPubkey({ privkey: hex, setPrivkey, }) ); }} /> | |
| { const hex = getHexValue(e.target.value); setX(hex || 0n); setYResults(calcY({ x: hex })); }} /> | |
{startCase(type)}
{calculator}
{children}
{renderExplanations(Right, 0, { defaultTag: "div" })}
{mark}
{...renderExplanations(
Array.isArray(child) ? child : [child],
1,
{
defaultTag: React.Fragment,
}
)}
);
}
})}
);
};
export default QA;
================================================
FILE: src/RecOuter/X25519/QA/style.module.css
================================================
.qa-mark {
margin-top: 12px;
margin-right: 4px;
display: inline-block;
font-family: "Baskerville", sans-serif;
font-size: 3em;
line-height: 0.9em;
color: #666;
}
================================================
FILE: src/RecOuter/X25519/curve.js
================================================
import field from './field';
function curve(basePointX = 9n) {
const curveA = 486662n;
/**
* Given intermediate ratio x/z for a point, compute X=(x/z)
* @param {BigInt} x
* @param {BigInt} z
* @return {BigInt} X = x/z
*/
function X(x, z) {
return field.reduce(x * field.inverseOf(z));
}
const doubleA24 = (curveA + 2n) / 4n;
/**
* Double the point P at X=x/z
*
* X_{2n} = (X_n+Z_n)^2(X_n-Z_n)^2
* Z_{2n} = (4X_nZ_n)((X_n-Z_n)^2+((A+2)/4)(4X_nZ_n))
*
* @param x {BigInt} from intermediate ratio form of X=x/z for point P
* @param z {BigInt} from intermediate ratio form of X=x/z for point P
* @return {{x: BigInt, z: BigInt}} x/z for point 2P
*/
function pointDouble(x, z) {
let x2_1 = (x + z) * (x + z);
let x2_2 = (x - z) * (x - z);
let x2 = field.reduce(x2_1 * x2_2);
let z2_1 = field.reduce(4n * x * z);
let z2_2 = field.reduce(x - z) * field.reduce(x - z);
let z2_3 = doubleA24 * z2_1;
let z2_23 = z2_2 + z2_3;
let z2 = z2_1 * z2_23;
return { x: field.reduce(x2), z: field.reduce(z2) };
}
/**
* Given X coordinates for nP and (n-1)P, calculate for (n+1)P
*
* X_{n+1} = Z_{n-1}((X_n-Z_n)(X_1+Z_1)+(X_n+Z_n)(X_1-Z_1))^2
* Z_{n+1} = X_{n-1}((X_n-Z_n)(X_1+Z_1)-(X_n+Z_n)(X_1-Z_1))^2
*
* @param x {BigInt} X coordinate of current point n, in intermediate x/z form.
* @param z {BigInt} X coordinate of current point n, in intermediate x/z form.
* @param prevX {BigInt} X coordinate of point n-1, in intermediate x/z form.
* @param prevZ {BigInt} X coordinate of point n-1, in intermediate x/z form.
* @returns {{x: BigInt, z: BigInt}} the X coordinate of point n+1, in intermediate x/z form.
*/
function pointAdd1(x, z, prevX, prevZ) {
let [baseX, baseZ] = [basePointX, 1n];
let xa = (x - z) * (baseX + baseZ);
let xb = (x + z) * (baseX - baseZ);
let xc = field.square(xa + xb);
let x_nplus1 = prevZ * xc;
let zc = field.square(xa - xb);
let z_nplus1 = prevX * zc;
return { x: field.reduce(x_nplus1), z: field.reduce(z_nplus1) };
}
/**
* Conditional swap of two values.
*
* Adapted from RFC7748, with constant-time magic removed since we're using BigInt anyway.
*
* @param swap {Boolean} whether to swap
* @param a {BigInt}
* @param b {BigInt}
* @returns {[BigInt, BigInt]} the values a and b, swapped if needed.
*/
let cswap = (swap, a, b) => {
return swap ? [b, a] : [a, b];
};
const multA24 = (curveA - 2n) / 4n;
/**
* Scalar multiplication of a point
*
* Given an X-coordinate for point P, "point add" it to itself n times to yield x/z for nP.
* Adapted from RFC7748.
*
* @param X {BigInt} X-coordinate for point P
* @param n {BigInt} multiplicand
* @return {{x: BigInt, z: BigInt}} X-Coordinate for point nP in x/z intermediate form
*/
function pointMult(X, n) {
let x_1 = X;
let x_2 = 1n;
let z_2 = 0n;
let x_3 = X;
let z_3 = 1n;
let swap = 0;
for (let t = 255n; t >= 0n; t--) {
let k_t = (n >> t) & 1n;
swap ^= k_t !== 0n ? 1 : 0;
[x_2, x_3] = cswap(!!swap, x_2, x_3);
[z_2, z_3] = cswap(!!swap, z_2, z_3);
swap = k_t !== 0n ? 1 : 0;
let A = x_2 + z_2;
let AA = field.square(A);
let B = x_2 - z_2;
let BB = field.square(B);
let E = AA - BB;
let C = x_3 + z_3;
let D = x_3 - z_3;
let DA = D * A;
let CB = C * B;
x_3 = field.reduce((DA + CB) * (DA + CB));
z_3 = field.reduce(x_1 * (DA - CB) * (DA - CB));
x_2 = field.reduce(AA * BB);
z_2 = field.reduce(E * (AA + multA24 * E));
}
let _rest;
[x_2, ..._rest] = cswap(!!swap, x_2, x_3);
[z_2, ..._rest] = cswap(!!swap, z_2, z_3);
return { x: x_2, z: z_2 };
}
/**
* For the given X coordinate, find Y on the curve.
* @param X {BigInt} X coordinate in range 0..2**255-19-1
* @return {BigInt[2]} the two Y coordinates for X
* @throw {RangeError} X is not a valid coordinate on the curve (true for half of all inputs)
*/
function Y(X) {
let YY = field.pow(X, 3n) + curveA * field.pow(X, 2n) + X;
try {
return field.sqrt(YY % field.p);
} catch (e) {
if (e instanceof RangeError) {
throw RangeError(`x=0x${field.toHex(X)} does not have points on curve`);
}
}
}
return {
basePointX,
X,
Y,
pointDouble,
pointAdd1,
pointMult,
};
}
export default curve();
================================================
FILE: src/RecOuter/X25519/field.js
================================================
// duplication from: https://github.com/syncsynchalt/illustrated-x25519/tree/main/js
function field(p = 2n ** 255n - 19n) {
/**
* Returns a three-tuple (gcd, x, y) such that
* a * x + b * y == gcd, where gcd is the greatest
* common divisor of a and b.
*
* This function implements the extended Euclidean
* algorithm and runs in O(log b) in the worst case.
*
* @param {BigInt} a
* @param {BigInt} b
* @returns {{gcd: BigInt, x: BigInt, y: BigInt}} containing GCD and x,y such that a*x + b*y == gcd
*/
function extended_euclidean_algorithm(a, b) {
let s = 0n,
old_s = 1n;
let t = 1n,
old_t = 0n;
let r = b,
old_r = a;
let tmp = undefined;
while (r !== 0n) {
let quotient = old_r / r;
tmp = old_r - quotient * r;
old_r = r;
r = tmp;
tmp = old_s - quotient * s;
old_s = s;
s = tmp;
tmp = old_t - quotient * t;
old_t = t;
t = tmp;
}
return {
gcd: old_r,
x: old_s,
y: old_t,
};
}
/**
* @param {BigInt} n
* @return {BigInt}
*/
function square(n) {
return n * n;
}
/**
* Reduce a number to modulo p (into the positive range of this field).
* @param {BigInt} n
* @return {BigInt} result
*/
function reduce(n) {
n %= p;
if (n < 0) {
n += p;
}
return n;
}
/**
* Returns the multiplicative inverse of n modulo p.
*
* @param {BigInt} n
* @returns {BigInt} m such that (n * m) % p == 1.
*/
function inverseOf(n) {
if (n === 0n) {
throw Error("Illegal argument zero");
}
// noinspection JSUnusedLocalSymbols
let { _gcd, x, _y } = extended_euclidean_algorithm(n, p);
return reduce(x);
}
/**
* "By factoring out powers of 2, find Q and S such that p−1 = Q*2^S with Q odd"
* @returns {BigInt[2]} array of [Q, S]
*/
let shanksPartitions = (prime) => {
let Q = prime - 1n;
let S = 0n;
while (Q !== 0n && Q % 2n === 0n) {
Q >>= 1n;
S += 1n;
}
if (!Q) {
throw Error("Unexpected failure to factor out Shanks partitions");
}
return [Q, S];
};
/**
* Modular exponentiation - find n^e mod p efficiently.
* @param n {BigInt} number
* @param e {BigInt} exponent
* @return {BigInt} n**e mod p
*/
function pow(n, e) {
// result = x * y**e, keep this true while reducing y and e
let x = 1n;
let y = n;
for (;;) {
if (e === 1n) {
return (x * y) % p;
} else if (e % 2n === 1n) {
e -= 1n;
x = (x * y) % p;
} else {
e /= 2n;
y = y ** 2n % p;
}
}
}
/**
* Use Euler's Criterion to test whether n has valid roots in Fp.
* @param n {BigInt} number to be tested
* @returns {boolean} true if n is a square in Fp
*/
let eulersCriterion = (n) => {
const pHalf = (p - 1n) / 2n;
return pow(n, pHalf) === 1n;
};
/**
* Given one root in Fp, derive and return the pair.
* @param r {BigInt} one root in Fp
* @returns {BigInt[2]} pair of roots [r,-r] mod p
*/
let rootsFor = (r) => {
return [r, p - r];
};
/**
* Find the square roots of n in Fp, if any.
*
* @param n {BigInt}
* @throws {RangeError} if n has no roots in Fp
* @return {BigInt[2]} the two square roots of n
*/
function sqrt(n) {
if (n === 0n) {
return [0n, 0n];
}
if (!eulersCriterion(n)) {
throw RangeError(`${n} has no roots in Fp`);
}
// Tonelli–Shanks algorithm
let [Q, S] = shanksPartitions(p);
// find a z which is not a square
let z;
for (z = 2n; z < p; z++) {
if (!eulersCriterion(z)) {
break;
}
}
let M = S;
let c = pow(z, Q);
let t = pow(n, Q);
let R = pow(n, (Q + 1n) / 2n);
for (;;) {
if (t === 0n) {
return rootsFor(0n);
}
if (t === 1n) {
return rootsFor(R);
}
// use repeated squaring to find the least i, 0 < i < M, such that t^{2^i} = 1 mod p
let i = 1n;
for (; i < M; i++) {
let chk = pow(t, 2n ** i);
if (chk === 1n) {
break;
}
}
let b = c ** (2n ** (M - i - 1n));
M = i;
let bb = b * b;
c = bb % p;
t = (t * bb) % p;
R = (R * b) % p;
}
}
/**
* Return the bignum as a hex string, padded with zeros.
* @param {BigInt} a
* @param {Number=} bits number of bits output to zero-pad to (rounded up to 8-boundary)
* @return {string}
*/
function toHex(a, bits) {
bits = Number(bits || 0);
let nibbles = 2 * Math.floor((bits + 7) / 8);
let result = a.toString(16);
if (result.length < nibbles) {
result = "0".repeat(nibbles - result.length) + result;
}
return result;
}
/**
* Given a hex string reverse its endianness, e.g. "abcdef" => "efcdab"
* @param s {String} hex string
* @return {String} flipped result
*/
function hexFlipEndian(s) {
return s.match(/../g).reverse().join("");
}
return { square, reduce, inverseOf, pow, sqrt, toHex, hexFlipEndian, p };
}
export default field();
================================================
FILE: src/RecOuter/X25519/index.js
================================================
export { default as Calculator } from "./Calculator";
export { default as FlexContainer } from "./Flex";
export { default as QA } from "./QA";
================================================
FILE: src/RecOuter/index.jsx
================================================
import clsx from "clsx";
import React from "react";
import classes from "./style.module.css";
import { AnnotationContextProvider } from "./Annotations/context";
import { useSluggerContext } from "../context/slugger";
import { renderExplanations } from "./utils";
const RecOuter = ({
types = [],
id = "",
label = "",
illustration,
eagerLoad = false,
json,
}) => {
const { curSlug, changeCurSlug, getSlug } = useSluggerContext();
const slug = React.useMemo(() => getSlug(id || label), [id, label]);
const [labelOriginalSize, setLabelOriginalSize] = React.useState();
const labelRef = React.useRef();
const [lazyExplanation, setLazyExplanation] = React.useState();
React.useLayoutEffect(() => {
if (curSlug === slug || eagerLoad) {
if (!lazyExplanation && typeof json === "function") {
json().then(setLazyExplanation);
}
}
}, [curSlug, json, eagerLoad]);
React.useEffect(() => {
if (curSlug === slug) {
// we have some expanding action to do, so need to delay it
window.requestAnimationFrame(() => {
try {
document.querySelector("#" + slug)?.scrollIntoView?.({
behavior: "smooth",
block: "nearest",
inline: "nearest",
});
// maybe its not a valid selector
} catch (e) {}
});
}
}, [curSlug, slug]);
return (
classes[t]),
curSlug === slug && classes["selected"]
)}
onClick={(e) => {
const client = { x: e.clientX, y: e.clientY };
const currentPos = labelRef.current?.getBoundingClientRect();
// TODO: we lost our label, maybe we should reload this component/page entirely
if (!currentPos || !labelOriginalSize) return;
const rect = {
width: labelOriginalSize.width,
height: labelOriginalSize.height,
x: currentPos.x,
y: currentPos.y,
};
if (client.x > rect.x && client.x - rect.x < rect.width) {
if (client.y > rect.y && client.y - rect.y < rect.height) {
const willSelect = currentPos.width >= rect.width;
changeCurSlug(willSelect ? slug : "");
// only stop the label's event
e.stopPropagation();
e.preventDefault();
}
}
}}
>
)}
{!lazyExplanation ? (
{
if (ref) {
!labelOriginalSize &&
setLabelOriginalSize(ref.getBoundingClientRect());
labelRef.current = ref;
}
}}
>
{label}
{illustration && (
Loading...
) : (
renderExplanations(lazyExplanation)
)}