codeapp-js 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/codeApp/dist/codeapp.js +11 -0
- package/codeApp/dist/icon-512.png +0 -0
- package/codeApp/dist/index.html +1 -0
- package/codeApp/power.config.json +1 -1
- package/dev files/dataverse.js +11 -0
- package/docs-mockups/atelier/index.html +120 -0
- package/docs-mockups/atelier/script.js +23 -0
- package/docs-mockups/atelier/styles.css +361 -0
- package/docs-mockups/field-guide/index.html +112 -0
- package/docs-mockups/field-guide/script.js +20 -0
- package/docs-mockups/field-guide/styles.css +272 -0
- package/docs-mockups/index.html +80 -0
- package/docs-mockups/maker-hub/index.html +178 -0
- package/docs-mockups/maker-hub/script.js +20 -0
- package/docs-mockups/maker-hub/styles.css +404 -0
- package/docs-mockups/script.js +26 -0
- package/docs-mockups/signal/index.html +146 -0
- package/docs-mockups/signal/script.js +20 -0
- package/docs-mockups/signal/styles.css +314 -0
- package/docs-mockups/styles.css +287 -0
- package/examples/groups Demo/power.config.json +3 -2
- package/package.json +1 -1
package/codeApp/dist/codeapp.js
CHANGED
|
@@ -74,6 +74,14 @@ export function registerTable(sTableName, sPrimaryKey) {
|
|
|
74
74
|
oSharedClient = null;
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
+
// ── Ensure value is an array (accepts array or comma-separated string)
|
|
78
|
+
function ensureArray(value) {
|
|
79
|
+
if (!value) return value;
|
|
80
|
+
if (Array.isArray(value)) return value;
|
|
81
|
+
if (typeof value === 'string') return value.split(',').map(function (s) { return s.trim(); });
|
|
82
|
+
return value;
|
|
83
|
+
}
|
|
84
|
+
|
|
77
85
|
// ── Unwrap SDK response ────────────────────────────────────────
|
|
78
86
|
function unwrapResult(result) {
|
|
79
87
|
if (result && result.success === false) {
|
|
@@ -93,6 +101,7 @@ export async function createItem(tableName, primaryKey, record) {
|
|
|
93
101
|
// ── Read (single) ──────────────────────────────────────────────
|
|
94
102
|
export async function getItem(tableName, primaryKey, id, select) {
|
|
95
103
|
const client = getSharedClient();
|
|
104
|
+
select = ensureArray(select);
|
|
96
105
|
const options = select ? { select } : undefined;
|
|
97
106
|
const result = await client.retrieveRecordAsync(tableName, id, options);
|
|
98
107
|
return unwrapResult(result);
|
|
@@ -101,6 +110,8 @@ export async function getItem(tableName, primaryKey, id, select) {
|
|
|
101
110
|
// ── List (multiple) ────────────────────────────────────────────
|
|
102
111
|
export async function listItems(tableName, primaryKey, { filter, select, orderBy, top, skip } = {}) {
|
|
103
112
|
const client = getSharedClient();
|
|
113
|
+
select = ensureArray(select);
|
|
114
|
+
orderBy = ensureArray(orderBy);
|
|
104
115
|
const result = await client.retrieveMultipleRecordsAsync(tableName, {
|
|
105
116
|
filter,
|
|
106
117
|
select,
|
|
Binary file
|
package/codeApp/dist/index.html
CHANGED
package/dev files/dataverse.js
CHANGED
|
@@ -26,6 +26,14 @@ function getSharedClient() {
|
|
|
26
26
|
return oSharedClient;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
+
// ── Ensure value is an array (accepts array or comma-separated string)
|
|
30
|
+
function ensureArray(value) {
|
|
31
|
+
if (!value) return value;
|
|
32
|
+
if (Array.isArray(value)) return value;
|
|
33
|
+
if (typeof value === 'string') return value.split(',').map(function (s) { return s.trim(); });
|
|
34
|
+
return value;
|
|
35
|
+
}
|
|
36
|
+
|
|
29
37
|
// ── Unwrap SDK response ────────────────────────────────────────
|
|
30
38
|
function unwrapResult(result) {
|
|
31
39
|
if (result && result.success === false) {
|
|
@@ -45,6 +53,7 @@ export async function createItem(tableName, primaryKey, record) {
|
|
|
45
53
|
// ── Read (single) ──────────────────────────────────────────────
|
|
46
54
|
export async function getItem(tableName, primaryKey, id, select) {
|
|
47
55
|
const client = getSharedClient();
|
|
56
|
+
select = ensureArray(select);
|
|
48
57
|
const options = select ? { select } : undefined;
|
|
49
58
|
const result = await client.retrieveRecordAsync(tableName, id, options);
|
|
50
59
|
return unwrapResult(result);
|
|
@@ -53,6 +62,8 @@ export async function getItem(tableName, primaryKey, id, select) {
|
|
|
53
62
|
// ── List (multiple) ────────────────────────────────────────────
|
|
54
63
|
export async function listItems(tableName, primaryKey, { filter, select, orderBy, top, skip } = {}) {
|
|
55
64
|
const client = getSharedClient();
|
|
65
|
+
select = ensureArray(select);
|
|
66
|
+
orderBy = ensureArray(orderBy);
|
|
56
67
|
const result = await client.retrieveMultipleRecordsAsync(tableName, {
|
|
57
68
|
filter,
|
|
58
69
|
select,
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Atelier Ledger | codeapp-js Docs</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
10
|
+
<link rel="stylesheet" href="./styles.css">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div class="pageShell">
|
|
14
|
+
<header class="topbar">
|
|
15
|
+
<a class="brand" href="../index.html">codeapp-js</a>
|
|
16
|
+
<nav>
|
|
17
|
+
<a href="#overview">Overview</a>
|
|
18
|
+
<a href="#install">Install</a>
|
|
19
|
+
<a href="#config">Config</a>
|
|
20
|
+
<a href="#examples">Examples</a>
|
|
21
|
+
</nav>
|
|
22
|
+
</header>
|
|
23
|
+
|
|
24
|
+
<main>
|
|
25
|
+
<section class="hero" id="overview">
|
|
26
|
+
<div class="heroCopy">
|
|
27
|
+
<p class="eyebrow">Editorial Concept</p>
|
|
28
|
+
<h1>Documentation that sells the craft, not just the commands.</h1>
|
|
29
|
+
<p class="intro">codeapp-js wraps the Power Apps Code Apps workflow in a cleaner JavaScript-first package: generated services, connector libraries, and a repo layout that feels familiar to frontend developers.</p>
|
|
30
|
+
<div class="heroActions">
|
|
31
|
+
<button class="primaryButton" id="copyInstallButton">Copy install command</button>
|
|
32
|
+
<a class="secondaryButton" href="#config">See config anatomy</a>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="heroPanel">
|
|
36
|
+
<p class="panelKicker">Starter flow</p>
|
|
37
|
+
<ol>
|
|
38
|
+
<li>Install the package and local dependencies.</li>
|
|
39
|
+
<li>Authenticate with `pac auth create`.</li>
|
|
40
|
+
<li>Add tables and connectors in `power.config.json`.</li>
|
|
41
|
+
<li>Run `pac code push` to generate services.</li>
|
|
42
|
+
</ol>
|
|
43
|
+
<div class="miniStatRow">
|
|
44
|
+
<div>
|
|
45
|
+
<strong>5</strong>
|
|
46
|
+
<span>connector families</span>
|
|
47
|
+
</div>
|
|
48
|
+
<div>
|
|
49
|
+
<strong>4173</strong>
|
|
50
|
+
<span>default local port</span>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</section>
|
|
55
|
+
|
|
56
|
+
<section class="splitSection" id="install">
|
|
57
|
+
<article class="paperCard commandCard">
|
|
58
|
+
<p class="sectionLabel">Quick start</p>
|
|
59
|
+
<h2>Start with the exact workflow your repo already expects.</h2>
|
|
60
|
+
<pre><code id="installSnippet">npm install codeapp-js
|
|
61
|
+
npm start
|
|
62
|
+
pac auth create</code></pre>
|
|
63
|
+
</article>
|
|
64
|
+
<article class="paperCard proseCard">
|
|
65
|
+
<p class="sectionLabel">Why it lands well</p>
|
|
66
|
+
<p>The package stays close to the Power Apps mental model, but frames it in a frontend repo structure: generated services in `src/generated`, a simple `power.config.json`, and local serving from the repository root.</p>
|
|
67
|
+
<div class="connectorRow">
|
|
68
|
+
<span>Dataverse</span>
|
|
69
|
+
<span>Outlook</span>
|
|
70
|
+
<span>SharePoint</span>
|
|
71
|
+
<span>Groups</span>
|
|
72
|
+
<span>Users</span>
|
|
73
|
+
</div>
|
|
74
|
+
</article>
|
|
75
|
+
</section>
|
|
76
|
+
|
|
77
|
+
<section class="storyGrid" id="config">
|
|
78
|
+
<article class="storyCard accentCard">
|
|
79
|
+
<p class="sectionLabel">Configuration</p>
|
|
80
|
+
<h2>`power.config.json` becomes the center of gravity.</h2>
|
|
81
|
+
<p>Describe Dataverse tables in `databaseReferences.default.cds.dataSources`, then add connector references for Outlook, SharePoint, Groups, and Users. The docs style here treats config like a system diagram rather than a dump of JSON.</p>
|
|
82
|
+
</article>
|
|
83
|
+
<article class="storyCard quoteCard">
|
|
84
|
+
<p class="quote">“The docs feel premium and narrative-driven, which is useful if the package needs credibility with both makers and JavaScript developers.”</p>
|
|
85
|
+
</article>
|
|
86
|
+
<article class="storyCard codeCard">
|
|
87
|
+
<p class="sectionLabel">Generated output</p>
|
|
88
|
+
<code>src/generated/services/AccountsService.ts</code>
|
|
89
|
+
<code>src/generated/models/AccountsModel.ts</code>
|
|
90
|
+
<code>examples/todo/dist/</code>
|
|
91
|
+
</article>
|
|
92
|
+
</section>
|
|
93
|
+
|
|
94
|
+
<section class="examplesSection" id="examples">
|
|
95
|
+
<div class="examplesHeader">
|
|
96
|
+
<p class="sectionLabel">Examples</p>
|
|
97
|
+
<h2>Anchor the package with sample-driven documentation.</h2>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="exampleCards">
|
|
100
|
+
<article>
|
|
101
|
+
<h3>Starter app</h3>
|
|
102
|
+
<p>Focus on the smallest successful path from install to `codeApp/dist/`.</p>
|
|
103
|
+
</article>
|
|
104
|
+
<article>
|
|
105
|
+
<h3>Connector demos</h3>
|
|
106
|
+
<p>Show SharePoint, Outlook, Groups, and Users as self-contained demos with short “what it proves” summaries.</p>
|
|
107
|
+
</article>
|
|
108
|
+
<article>
|
|
109
|
+
<h3>Generated service reference</h3>
|
|
110
|
+
<p>Document the generated files once, then reuse the structure across every example.</p>
|
|
111
|
+
</article>
|
|
112
|
+
</div>
|
|
113
|
+
</section>
|
|
114
|
+
</main>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<div class="toast" id="toast" aria-live="polite"></div>
|
|
118
|
+
<script src="./script.js"></script>
|
|
119
|
+
</body>
|
|
120
|
+
</html>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
const eCopyInstallButton = document.getElementById('copyInstallButton');
|
|
2
|
+
const eInstallSnippet = document.getElementById('installSnippet');
|
|
3
|
+
const eToast = document.getElementById('toast');
|
|
4
|
+
|
|
5
|
+
const showToast = (sMessage) => {
|
|
6
|
+
eToast.textContent = sMessage;
|
|
7
|
+
eToast.classList.add('is-visible');
|
|
8
|
+
|
|
9
|
+
window.setTimeout(() => {
|
|
10
|
+
eToast.classList.remove('is-visible');
|
|
11
|
+
}, 1800);
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const copyInstallSnippet = async () => {
|
|
15
|
+
try {
|
|
16
|
+
await navigator.clipboard.writeText(eInstallSnippet.textContent);
|
|
17
|
+
showToast('Install command copied');
|
|
18
|
+
} catch (oError) {
|
|
19
|
+
showToast('Clipboard unavailable in this browser');
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
eCopyInstallButton.addEventListener('click', copyInstallSnippet);
|
|
@@ -0,0 +1,361 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--bg: #f8f1e7;
|
|
3
|
+
--paper: rgba(255, 252, 247, 0.86);
|
|
4
|
+
--ink: #211715;
|
|
5
|
+
--muted: #66564e;
|
|
6
|
+
--line: rgba(33, 23, 21, 0.12);
|
|
7
|
+
--accent: #8b3d2e;
|
|
8
|
+
--accent-soft: #e7d3c6;
|
|
9
|
+
--green: #0d6b63;
|
|
10
|
+
--shadow: 0 24px 60px rgba(91, 57, 27, 0.12);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
* {
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
html {
|
|
18
|
+
scroll-behavior: smooth;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
body {
|
|
22
|
+
margin: 0;
|
|
23
|
+
min-height: 100vh;
|
|
24
|
+
background:
|
|
25
|
+
radial-gradient(circle at top right, rgba(13, 107, 99, 0.14), transparent 24%),
|
|
26
|
+
radial-gradient(circle at 10% 10%, rgba(139, 61, 46, 0.14), transparent 25%),
|
|
27
|
+
linear-gradient(180deg, #fbf5ec, var(--bg));
|
|
28
|
+
color: var(--ink);
|
|
29
|
+
font-family: 'Manrope', sans-serif;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.pageShell {
|
|
33
|
+
width: min(1180px, calc(100% - 48px));
|
|
34
|
+
margin: 0 auto;
|
|
35
|
+
padding-bottom: 56px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.topbar {
|
|
39
|
+
display: flex;
|
|
40
|
+
justify-content: space-between;
|
|
41
|
+
align-items: center;
|
|
42
|
+
padding: 22px 0;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.brand,
|
|
46
|
+
.topbar nav a {
|
|
47
|
+
color: var(--ink);
|
|
48
|
+
text-decoration: none;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.brand {
|
|
52
|
+
font-family: 'Cormorant Garamond', serif;
|
|
53
|
+
font-size: 1.9rem;
|
|
54
|
+
font-weight: 700;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.topbar nav {
|
|
58
|
+
display: flex;
|
|
59
|
+
gap: 18px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.topbar nav a {
|
|
63
|
+
font-size: 0.95rem;
|
|
64
|
+
font-weight: 700;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.hero {
|
|
68
|
+
display: grid;
|
|
69
|
+
grid-template-columns: 1.3fr 0.9fr;
|
|
70
|
+
gap: 28px;
|
|
71
|
+
padding: 48px 0 28px;
|
|
72
|
+
align-items: stretch;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.heroCopy h1,
|
|
76
|
+
.splitSection h2,
|
|
77
|
+
.storyCard h2,
|
|
78
|
+
.examplesHeader h2 {
|
|
79
|
+
font-family: 'Cormorant Garamond', serif;
|
|
80
|
+
font-weight: 700;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.heroCopy h1 {
|
|
84
|
+
margin: 10px 0 0;
|
|
85
|
+
font-size: clamp(3.4rem, 7vw, 6rem);
|
|
86
|
+
line-height: 0.92;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.eyebrow,
|
|
90
|
+
.sectionLabel,
|
|
91
|
+
.panelKicker {
|
|
92
|
+
margin: 0;
|
|
93
|
+
color: var(--accent);
|
|
94
|
+
font-size: 0.84rem;
|
|
95
|
+
font-weight: 800;
|
|
96
|
+
letter-spacing: 0.16em;
|
|
97
|
+
text-transform: uppercase;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.intro {
|
|
101
|
+
max-width: 640px;
|
|
102
|
+
margin: 20px 0 0;
|
|
103
|
+
color: var(--muted);
|
|
104
|
+
font-size: 1.06rem;
|
|
105
|
+
line-height: 1.8;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.heroActions {
|
|
109
|
+
display: flex;
|
|
110
|
+
flex-wrap: wrap;
|
|
111
|
+
gap: 14px;
|
|
112
|
+
margin-top: 28px;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.primaryButton,
|
|
116
|
+
.secondaryButton {
|
|
117
|
+
border-radius: 999px;
|
|
118
|
+
padding: 14px 20px;
|
|
119
|
+
font: inherit;
|
|
120
|
+
font-weight: 800;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.primaryButton {
|
|
124
|
+
border: 0;
|
|
125
|
+
background: var(--ink);
|
|
126
|
+
color: #fffaf6;
|
|
127
|
+
cursor: pointer;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.secondaryButton {
|
|
131
|
+
border: 1px solid var(--line);
|
|
132
|
+
background: rgba(255, 250, 246, 0.8);
|
|
133
|
+
color: var(--ink);
|
|
134
|
+
text-decoration: none;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.heroPanel,
|
|
138
|
+
.paperCard,
|
|
139
|
+
.storyCard,
|
|
140
|
+
.exampleCards article {
|
|
141
|
+
border: 1px solid var(--line);
|
|
142
|
+
border-radius: 30px;
|
|
143
|
+
background: var(--paper);
|
|
144
|
+
box-shadow: var(--shadow);
|
|
145
|
+
backdrop-filter: blur(14px);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.heroPanel {
|
|
149
|
+
padding: 28px;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.heroPanel ol {
|
|
153
|
+
margin: 18px 0 0;
|
|
154
|
+
padding-left: 18px;
|
|
155
|
+
line-height: 1.8;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.miniStatRow {
|
|
159
|
+
display: grid;
|
|
160
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
161
|
+
gap: 14px;
|
|
162
|
+
margin-top: 22px;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.miniStatRow div {
|
|
166
|
+
padding: 18px;
|
|
167
|
+
border-radius: 22px;
|
|
168
|
+
background: linear-gradient(135deg, rgba(231, 211, 198, 0.86), rgba(255, 252, 247, 0.6));
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.miniStatRow strong {
|
|
172
|
+
display: block;
|
|
173
|
+
font-size: 1.7rem;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.miniStatRow span {
|
|
177
|
+
color: var(--muted);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.splitSection {
|
|
181
|
+
display: grid;
|
|
182
|
+
grid-template-columns: 1.1fr 0.9fr;
|
|
183
|
+
gap: 22px;
|
|
184
|
+
margin-top: 22px;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.paperCard {
|
|
188
|
+
padding: 28px;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.paperCard h2 {
|
|
192
|
+
margin: 12px 0 12px;
|
|
193
|
+
font-size: clamp(2rem, 3.5vw, 3rem);
|
|
194
|
+
line-height: 1;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
pre {
|
|
198
|
+
overflow-x: auto;
|
|
199
|
+
margin: 0;
|
|
200
|
+
padding: 20px;
|
|
201
|
+
border-radius: 22px;
|
|
202
|
+
background: #201816;
|
|
203
|
+
color: #f6ebe1;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
code {
|
|
207
|
+
font-family: 'Courier New', monospace;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.proseCard p {
|
|
211
|
+
color: var(--muted);
|
|
212
|
+
line-height: 1.8;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.connectorRow {
|
|
216
|
+
display: flex;
|
|
217
|
+
flex-wrap: wrap;
|
|
218
|
+
gap: 10px;
|
|
219
|
+
margin-top: 18px;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.connectorRow span {
|
|
223
|
+
padding: 9px 12px;
|
|
224
|
+
border: 1px solid var(--line);
|
|
225
|
+
border-radius: 999px;
|
|
226
|
+
background: rgba(255, 252, 247, 0.78);
|
|
227
|
+
font-size: 0.88rem;
|
|
228
|
+
font-weight: 800;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.storyGrid {
|
|
232
|
+
display: grid;
|
|
233
|
+
grid-template-columns: 1.2fr 0.9fr 0.9fr;
|
|
234
|
+
gap: 22px;
|
|
235
|
+
margin-top: 22px;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.storyCard {
|
|
239
|
+
min-height: 240px;
|
|
240
|
+
padding: 28px;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.accentCard {
|
|
244
|
+
background: linear-gradient(145deg, rgba(13, 107, 99, 0.94), rgba(5, 58, 53, 0.92));
|
|
245
|
+
color: #effcf8;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.accentCard .sectionLabel,
|
|
249
|
+
.accentCard p {
|
|
250
|
+
color: rgba(239, 252, 248, 0.78);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.accentCard h2 {
|
|
254
|
+
margin: 14px 0;
|
|
255
|
+
font-size: clamp(2rem, 3vw, 3.2rem);
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.quoteCard {
|
|
259
|
+
display: flex;
|
|
260
|
+
align-items: end;
|
|
261
|
+
background: linear-gradient(180deg, rgba(231, 211, 198, 0.68), rgba(255, 252, 247, 0.88));
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.quote {
|
|
265
|
+
margin: 0;
|
|
266
|
+
font-family: 'Cormorant Garamond', serif;
|
|
267
|
+
font-size: 2rem;
|
|
268
|
+
line-height: 1.1;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.codeCard {
|
|
272
|
+
display: grid;
|
|
273
|
+
gap: 12px;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.codeCard code {
|
|
277
|
+
display: block;
|
|
278
|
+
padding: 16px;
|
|
279
|
+
border-radius: 18px;
|
|
280
|
+
background: rgba(255, 252, 247, 0.84);
|
|
281
|
+
border: 1px solid var(--line);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.examplesSection {
|
|
285
|
+
margin-top: 22px;
|
|
286
|
+
padding: 30px 0 0;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.examplesHeader h2 {
|
|
290
|
+
margin: 12px 0 0;
|
|
291
|
+
font-size: clamp(2rem, 4vw, 3.5rem);
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.exampleCards {
|
|
295
|
+
display: grid;
|
|
296
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
297
|
+
gap: 18px;
|
|
298
|
+
margin-top: 22px;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.exampleCards article {
|
|
302
|
+
padding: 24px;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.exampleCards h3 {
|
|
306
|
+
margin: 0 0 12px;
|
|
307
|
+
font-size: 1.3rem;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.exampleCards p {
|
|
311
|
+
margin: 0;
|
|
312
|
+
color: var(--muted);
|
|
313
|
+
line-height: 1.7;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.toast {
|
|
317
|
+
position: fixed;
|
|
318
|
+
right: 20px;
|
|
319
|
+
bottom: 20px;
|
|
320
|
+
padding: 12px 16px;
|
|
321
|
+
border-radius: 999px;
|
|
322
|
+
background: var(--ink);
|
|
323
|
+
color: #fffaf6;
|
|
324
|
+
opacity: 0;
|
|
325
|
+
transform: translateY(12px);
|
|
326
|
+
transition: opacity 180ms ease, transform 180ms ease;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.toast.is-visible {
|
|
330
|
+
opacity: 1;
|
|
331
|
+
transform: translateY(0);
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
@media (max-width: 980px) {
|
|
335
|
+
.hero,
|
|
336
|
+
.splitSection,
|
|
337
|
+
.storyGrid,
|
|
338
|
+
.exampleCards {
|
|
339
|
+
grid-template-columns: 1fr;
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
@media (max-width: 720px) {
|
|
344
|
+
.pageShell {
|
|
345
|
+
width: min(100% - 28px, 1180px);
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.topbar {
|
|
349
|
+
flex-direction: column;
|
|
350
|
+
gap: 12px;
|
|
351
|
+
align-items: flex-start;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.topbar nav {
|
|
355
|
+
flex-wrap: wrap;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.heroActions {
|
|
359
|
+
flex-direction: column;
|
|
360
|
+
}
|
|
361
|
+
}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Field Guide | codeapp-js Docs</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,600;7..72,700&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
10
|
+
<link rel="stylesheet" href="./styles.css">
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div class="poster"></div>
|
|
14
|
+
<div class="shell">
|
|
15
|
+
<header class="masthead">
|
|
16
|
+
<div>
|
|
17
|
+
<p class="kicker">Field guide concept</p>
|
|
18
|
+
<h1>Make the docs feel like a practical handbook.</h1>
|
|
19
|
+
<p class="subcopy">This direction is warmer and more instructional. It works if the documentation should teach, not just reference, and if examples are a major selling point.</p>
|
|
20
|
+
</div>
|
|
21
|
+
<a class="returnLink" href="../index.html">Back to chooser</a>
|
|
22
|
+
</header>
|
|
23
|
+
|
|
24
|
+
<main class="guideGrid">
|
|
25
|
+
<aside class="mapColumn">
|
|
26
|
+
<div class="noteCard">
|
|
27
|
+
<p class="cardLabel">Best for</p>
|
|
28
|
+
<p>Onboarding, examples, and “how do I wire this up?” documentation.</p>
|
|
29
|
+
</div>
|
|
30
|
+
<nav class="routeCard">
|
|
31
|
+
<a href="#trailhead">Trailhead</a>
|
|
32
|
+
<a href="#route">Route</a>
|
|
33
|
+
<a href="#kit">Starter kit</a>
|
|
34
|
+
<a href="#samples">Sample paths</a>
|
|
35
|
+
</nav>
|
|
36
|
+
</aside>
|
|
37
|
+
|
|
38
|
+
<section class="contentColumn">
|
|
39
|
+
<article class="featurePanel" id="trailhead">
|
|
40
|
+
<p class="cardLabel">Trailhead</p>
|
|
41
|
+
<h2>codeapp-js keeps the Power Apps model, but lowers the intimidation.</h2>
|
|
42
|
+
<p>Explain the package as a guidebook: generated models and services, a familiar `power.config.json`, and a sequence of clear steps from local dev to `pac code push`.</p>
|
|
43
|
+
</article>
|
|
44
|
+
|
|
45
|
+
<article class="featurePanel routePanel" id="route">
|
|
46
|
+
<div>
|
|
47
|
+
<p class="cardLabel">Route overview</p>
|
|
48
|
+
<h2>Three-step narrative beats scattered across the page like a field notebook.</h2>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="routeSteps">
|
|
51
|
+
<div>
|
|
52
|
+
<span>01</span>
|
|
53
|
+
<p>Install and serve from the repo root.</p>
|
|
54
|
+
</div>
|
|
55
|
+
<div>
|
|
56
|
+
<span>02</span>
|
|
57
|
+
<p>Describe data sources and connector references.</p>
|
|
58
|
+
</div>
|
|
59
|
+
<div>
|
|
60
|
+
<span>03</span>
|
|
61
|
+
<p>Generate services and verify examples.</p>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</article>
|
|
65
|
+
|
|
66
|
+
<article class="kitPanel" id="kit">
|
|
67
|
+
<div class="kitHeader">
|
|
68
|
+
<p class="cardLabel">Starter kit</p>
|
|
69
|
+
<div class="modeToggle" aria-label="Reading mode">
|
|
70
|
+
<button class="modeButton is-active" data-mode="builder">Builder mode</button>
|
|
71
|
+
<button class="modeButton" data-mode="reference">Reference mode</button>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="modeContent is-active" id="builder">
|
|
75
|
+
<p>Lead with a short guided walkthrough using the exact order a developer follows in a fresh repo.</p>
|
|
76
|
+
<pre><code>npm install
|
|
77
|
+
npm start
|
|
78
|
+
pac auth create
|
|
79
|
+
pac env select --environment "environment-id"</code></pre>
|
|
80
|
+
</div>
|
|
81
|
+
<div class="modeContent" id="reference">
|
|
82
|
+
<p>Condense the docs into a quick reference with focused callouts for `databaseReferences`, `connectionReferences`, and generated outputs.</p>
|
|
83
|
+
<pre><code>src/generated/services/*
|
|
84
|
+
src/generated/models/*
|
|
85
|
+
examples/*/dist/</code></pre>
|
|
86
|
+
</div>
|
|
87
|
+
</article>
|
|
88
|
+
|
|
89
|
+
<article class="samplesPanel" id="samples">
|
|
90
|
+
<p class="cardLabel">Sample paths</p>
|
|
91
|
+
<div class="sampleList">
|
|
92
|
+
<article>
|
|
93
|
+
<h3>Starter app path</h3>
|
|
94
|
+
<p>Direct users to `codeApp/dist/` when they only need the first working app.</p>
|
|
95
|
+
</article>
|
|
96
|
+
<article>
|
|
97
|
+
<h3>Connector path</h3>
|
|
98
|
+
<p>Break out Outlook, SharePoint, Groups, and Users into short, purpose-driven walkthroughs.</p>
|
|
99
|
+
</article>
|
|
100
|
+
<article>
|
|
101
|
+
<h3>Generated code path</h3>
|
|
102
|
+
<p>Explain how service files map back to Dataverse tables and connection references.</p>
|
|
103
|
+
</article>
|
|
104
|
+
</div>
|
|
105
|
+
</article>
|
|
106
|
+
</section>
|
|
107
|
+
</main>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<script src="./script.js"></script>
|
|
111
|
+
</body>
|
|
112
|
+
</html>
|