Skip to content

Commit 5bed1ce

Browse files
djscruggsdlongley
djscruggs
authored and
dlongley
committed
Add architecture diagram and link from README.
Add an architecture diagram (PNG plus editable draw.io source under docs/) and an Architecture section in the README that embeds it and points to the source for future edits.
1 parent 50c18cf commit 5bed1ce

3 files changed

Lines changed: 188 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,19 @@ import {initialize} from '@bedrock/vue-wallet';
2020
await initialize({app, router /*, features, quasarOptions */});
2121
```
2222

23+
## Architecture
24+
25+
`initialize()` wires the library into a host app: it configures Quasar, session
26+
and branding, and a feature-keyed router that lazily loads page routes, which in
27+
turn compose the wallet components. The diagram below shows how the host app,
28+
the `lib/` core, the lazy-loaded `routes/`, and the external Bedrock
29+
dependencies fit together.
30+
31+
![bedrock-vue-wallet architecture](docs/bedrock-vue-wallet-architecture.drawio.png)
32+
33+
The diagram is editable: open
34+
[`docs/bedrock-vue-wallet-architecture.drawio`](docs/bedrock-vue-wallet-architecture.drawio)
35+
in [draw.io](https://www.drawio.com/) (or the draw.io editor extension) and
36+
re-export the PNG after changes.
37+
2338
[Verifiable Credentials]: https://www.w3.org/TR/vc-data-model-2.0/

‎docs/bedrock-vue-wallet-architecture.drawio‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<mxfile host="drawio" version="26.0.0">
3+
<diagram name="bedrock-vue-wallet">
4+
<mxGraphModel dx="1400" dy="900" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1700" pageHeight="1169" math="0" shadow="0">
5+
<root>
6+
<mxCell id="0" />
7+
<mxCell id="1" parent="0" />
8+
9+
<!-- ================= HOST APP ================= -->
10+
<mxCell id="host" value="Host Bedrock Web App" style="swimlane;startSize=30;html=1;whiteSpace=wrap;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333;fontStyle=1;align=center;" vertex="1" parent="1">
11+
<mxGeometry x="40" y="40" width="360" height="180" as="geometry" />
12+
</mxCell>
13+
<mxCell id="appInit" value="app + vue-router&#xa;(Vue 3 application)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="host">
14+
<mxGeometry x="30" y="50" width="140" height="60" as="geometry" />
15+
</mxCell>
16+
<mxCell id="features" value="features map&#xa;{ /home, /login,&#xa;/profiles, ... }" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="host">
17+
<mxGeometry x="190" y="50" width="140" height="60" as="geometry" />
18+
</mxCell>
19+
<mxCell id="callInit" value="calls initialize({app, router, features, quasarOptions})" style="text;html=1;align=center;fontStyle=2;fontColor=#666666;" vertex="1" parent="host">
20+
<mxGeometry x="20" y="125" width="320" height="40" as="geometry" />
21+
</mxCell>
22+
23+
<!-- ================= LIB CORE ================= -->
24+
<mxCell id="libcore" value="lib/ — Library Core (entry &amp; wiring)" style="swimlane;startSize=30;html=1;whiteSpace=wrap;fillColor=#e1d5e7;strokeColor=#9673a6;fontColor=#333333;fontStyle=1;align=center;" vertex="1" parent="1">
25+
<mxGeometry x="500" y="40" width="640" height="430" as="geometry" />
26+
</mxCell>
27+
<mxCell id="index" value="index.js&#xa;initialize() — bootstraps wallet" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontStyle=1;" vertex="1" parent="libcore">
28+
<mxGeometry x="230" y="50" width="200" height="60" as="geometry" />
29+
</mxCell>
30+
<mxCell id="config" value="config.js&#xa;branding, CHAPI,&#xa;MEDIATOR_ORIGIN" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="libcore">
31+
<mxGeometry x="20" y="150" width="140" height="70" as="geometry" />
32+
</mxCell>
33+
<mxCell id="cardDesigns" value="cardDesigns.js&#xa;VC card styles" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="libcore">
34+
<mxGeometry x="20" y="250" width="140" height="60" as="geometry" />
35+
</mxCell>
36+
<mxCell id="router" value="router.js&#xa;configureRouter()&#xa;FEATURES map + guards" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontStyle=1;" vertex="1" parent="libcore">
37+
<mxGeometry x="230" y="160" width="200" height="70" as="geometry" />
38+
</mxCell>
39+
<mxCell id="guards" value="route guards&#xa;requireLogin /&#xa;redirectHomeIfLoggedIn" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="libcore">
40+
<mxGeometry x="230" y="270" width="200" height="60" as="geometry" />
41+
</mxCell>
42+
<mxCell id="session" value="session.js&#xa;session + sessionDataRef" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="libcore">
43+
<mxGeometry x="470" y="50" width="150" height="60" as="geometry" />
44+
</mxCell>
45+
<mxCell id="rootData" value="rootData.js&#xa;reactive title/brand" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="libcore">
46+
<mxGeometry x="470" y="150" width="150" height="60" as="geometry" />
47+
</mxCell>
48+
<mxCell id="helpers" value="helpers.js" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="libcore">
49+
<mxGeometry x="470" y="250" width="150" height="50" as="geometry" />
50+
</mxCell>
51+
<mxCell id="quasarInit" value="Quasar init + theme&#xa;(@bedrock/quasar)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="libcore">
52+
<mxGeometry x="470" y="340" width="150" height="60" as="geometry" />
53+
</mxCell>
54+
55+
<!-- ================= ROUTES ================= -->
56+
<mxCell id="routes" value="routes/ — Lazy-loaded Pages (per feature)" style="swimlane;startSize=30;html=1;whiteSpace=wrap;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333;fontStyle=1;align=center;" vertex="1" parent="1">
57+
<mxGeometry x="40" y="540" width="500" height="560" as="geometry" />
58+
</mxCell>
59+
<mxCell id="r1" value="LoginPage / RegisterPage / OnboardPage" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#6c8ebf;" vertex="1" parent="routes">
60+
<mxGeometry x="20" y="50" width="220" height="50" as="geometry" />
61+
</mxCell>
62+
<mxCell id="r2" value="HomePage" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#6c8ebf;" vertex="1" parent="routes">
63+
<mxGeometry x="260" y="50" width="220" height="50" as="geometry" />
64+
</mxCell>
65+
<mxCell id="r3" value="ProfilesPage" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#6c8ebf;" vertex="1" parent="routes">
66+
<mxGeometry x="20" y="120" width="220" height="50" as="geometry" />
67+
</mxCell>
68+
<mxCell id="r4" value="SettingsPage / TwoFactorSetupPage" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#6c8ebf;" vertex="1" parent="routes">
69+
<mxGeometry x="260" y="120" width="220" height="50" as="geometry" />
70+
</mxCell>
71+
<mxCell id="r5" value="InteractPage" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#6c8ebf;" vertex="1" parent="routes">
72+
<mxGeometry x="20" y="190" width="220" height="50" as="geometry" />
73+
</mxCell>
74+
<mxCell id="r6" value="ScannerExchangePage" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#6c8ebf;" vertex="1" parent="routes">
75+
<mxGeometry x="260" y="190" width="220" height="50" as="geometry" />
76+
</mxCell>
77+
<mxCell id="r7" value="ChapiExchangePage&#xa;(CHAPI credential handler)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="routes">
78+
<mxGeometry x="20" y="260" width="460" height="50" as="geometry" />
79+
</mxCell>
80+
<mxCell id="compsHdr" value="components/ (~45 Vue components composed by pages)" style="text;html=1;align=center;fontStyle=1;fontColor=#333333;" vertex="1" parent="routes">
81+
<mxGeometry x="20" y="330" width="460" height="30" as="geometry" />
82+
</mxCell>
83+
<mxCell id="c1" value="WalletLayout / WalletHeader / ChapiHeader" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#999999;" vertex="1" parent="routes">
84+
<mxGeometry x="20" y="370" width="220" height="40" as="geometry" />
85+
</mxCell>
86+
<mxCell id="c2" value="Credential* (Dashboard, Card, Details, List, Select)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#999999;" vertex="1" parent="routes">
87+
<mxGeometry x="260" y="370" width="220" height="40" as="geometry" />
88+
</mxCell>
89+
<mxCell id="c3" value="Profile* / AccessManagement / User*" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#999999;" vertex="1" parent="routes">
90+
<mxGeometry x="20" y="420" width="220" height="40" as="geometry" />
91+
</mxCell>
92+
<mxCell id="c4" value="Login/Register Form / TwoFactor* / CodeInput" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#999999;" vertex="1" parent="routes">
93+
<mxGeometry x="260" y="420" width="220" height="40" as="geometry" />
94+
</mxCell>
95+
<mxCell id="c5" value="BarcodeScanner / QrCode / NfcShare / contactless" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#999999;" vertex="1" parent="routes">
96+
<mxGeometry x="20" y="470" width="460" height="40" as="geometry" />
97+
</mxCell>
98+
99+
<!-- ================= EXTERNAL DEPS ================= -->
100+
<mxCell id="deps" value="External Bedrock / DB Dependencies" style="swimlane;startSize=30;html=1;whiteSpace=wrap;fillColor=#d5e8d4;strokeColor=#82b366;fontColor=#333333;fontStyle=1;align=center;" vertex="1" parent="1">
101+
<mxGeometry x="660" y="540" width="480" height="560" as="geometry" />
102+
</mxCell>
103+
<mxCell id="d1" value="@bedrock/web-wallet&#xa;(VC engine: issue/store/present)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#82b366;" vertex="1" parent="deps">
104+
<mxGeometry x="20" y="50" width="200" height="60" as="geometry" />
105+
</mxCell>
106+
<mxCell id="d2" value="@bedrock/web-session&#xa;@bedrock/web-account" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#82b366;" vertex="1" parent="deps">
107+
<mxGeometry x="250" y="50" width="200" height="60" as="geometry" />
108+
</mxCell>
109+
<mxCell id="d3" value="@bedrock/web-profile" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#82b366;" vertex="1" parent="deps">
110+
<mxGeometry x="20" y="130" width="200" height="50" as="geometry" />
111+
</mxCell>
112+
<mxCell id="d4" value="@bedrock/web-authn-token&#xa;(2FA / TOTP)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#82b366;" vertex="1" parent="deps">
113+
<mxGeometry x="250" y="130" width="200" height="50" as="geometry" />
114+
</mxCell>
115+
<mxCell id="d5" value="@bedrock/quasar + quasar-components&#xa;(UI framework + theme)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#82b366;" vertex="1" parent="deps">
116+
<mxGeometry x="20" y="200" width="430" height="50" as="geometry" />
117+
</mxCell>
118+
<mxCell id="d6" value="@bedrock/vue-vc + web-fontawesome" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#82b366;" vertex="1" parent="deps">
119+
<mxGeometry x="20" y="270" width="430" height="40" as="geometry" />
120+
</mxCell>
121+
<mxCell id="d7" value="web-credential-handler + @bedrock/web&#xa;(CHAPI mediator @ authn.io, shared config)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="deps">
122+
<mxGeometry x="20" y="330" width="430" height="50" as="geometry" />
123+
</mxCell>
124+
<mxCell id="d8" value="html5-qrcode / qrcode / mustache / randomcolor" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#999999;" vertex="1" parent="deps">
125+
<mxGeometry x="20" y="400" width="430" height="40" as="geometry" />
126+
</mxCell>
127+
<mxCell id="d9" value="@vuelidate/core + validators (form validation)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#999999;" vertex="1" parent="deps">
128+
<mxGeometry x="20" y="460" width="430" height="40" as="geometry" />
129+
</mxCell>
130+
131+
<!-- ================= EDGES ================= -->
132+
<mxCell id="e1" value="initialize()" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;fontColor=#333333;exitX=1;exitY=0.3;exitDx=0;exitDy=0;entryX=0;entryY=0.2;entryDx=0;entryDy=0;" edge="1" parent="1" source="host" target="index">
133+
<mxGeometry relative="1" as="geometry" />
134+
</mxCell>
135+
<mxCell id="e2" value="configureRouter()" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;fontColor=#333333;" edge="1" parent="libcore" source="index" target="router">
136+
<mxGeometry relative="1" as="geometry" />
137+
</mxCell>
138+
<mxCell id="e3" value="reads config" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;fontColor=#333333;" edge="1" parent="libcore" source="index" target="config">
139+
<mxGeometry relative="1" as="geometry" />
140+
</mxCell>
141+
<mxCell id="e4" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="libcore" source="config" target="cardDesigns">
142+
<mxGeometry relative="1" as="geometry" />
143+
</mxCell>
144+
<mxCell id="e5" value="installs guards" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;fontColor=#333333;" edge="1" parent="libcore" source="router" target="guards">
145+
<mxGeometry relative="1" as="geometry" />
146+
</mxCell>
147+
<mxCell id="e6" value="updates" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;fontColor=#333333;" edge="1" parent="libcore" source="index" target="session">
148+
<mxGeometry relative="1" as="geometry" />
149+
</mxCell>
150+
<mxCell id="e7" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="libcore" source="index" target="rootData">
151+
<mxGeometry relative="1" as="geometry" />
152+
</mxCell>
153+
<mxCell id="e8" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="libcore" source="index" target="quasarInit">
154+
<mxGeometry relative="1" as="geometry" />
155+
</mxCell>
156+
157+
<mxCell id="e9" value="addRoute() — lazy import() per enabled feature" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;fontColor=#333333;exitX=0.2;exitY=1;exitDx=0;exitDy=0;entryX=0.7;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="router" target="routes">
158+
<mxGeometry relative="1" as="geometry" />
159+
</mxCell>
160+
<mxCell id="e10" value="guards check session.data.account" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;fontColor=#333333;dashed=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.2;entryDx=0;entryDy=0;" edge="1" parent="1" source="guards" target="d2">
161+
<mxGeometry relative="1" as="geometry" />
162+
</mxCell>
163+
164+
<mxCell id="e11" value="pages compose components &amp; call wallet deps" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;fontColor=#333333;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="routes" target="deps">
165+
<mxGeometry relative="1" as="geometry" />
166+
</mxCell>
167+
<mxCell id="e12" value="CHAPI exchange via mediator" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;fontColor=#333333;dashed=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.6;entryDx=0;entryDy=0;" edge="1" parent="1" source="r7" target="d7">
168+
<mxGeometry relative="1" as="geometry" />
169+
</mxCell>
170+
</root>
171+
</mxGraphModel>
172+
</diagram>
173+
</mxfile>

‎docs/bedrock-vue-wallet-architecture.drawio.png‎

410 KB
Loading

0 commit comments

Comments
 (0)