Skip to content

Commit db0b891

Browse files
simonkurtz-MSFTsimonkurtz-MSFT
authored
Website and slide deck tweaks (#180)
1 parent 9536357 commit db0b891

7 files changed

Lines changed: 442 additions & 209 deletions

File tree

‎assets/APIM-Samples-Slide-Deck.html‎

Lines changed: 53 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@
5454
--text-subtle: #666;
5555
--text-footer-light: rgba(255, 255, 255, 0.88);
5656
--text-footer-dark: #5c5c5c;
57-
--text-footer-note: #5f5f5f;
5857
--surface-white: #fff;
5958
--surface-light: #f7f9fb;
6059
--border-light: #e0e0e0;
@@ -456,13 +455,6 @@
456455
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
457456
}
458457

459-
.footer-note {
460-
text-align: center;
461-
font-size: 13px;
462-
color: var(--text-footer-note);
463-
margin-top: 8px;
464-
}
465-
466458
/* ── Agenda list ── */
467459
.agenda-list {
468460
list-style: none;
@@ -858,10 +850,10 @@
858850

859851
<!-- Navigation help (visible in presentation mode) -->
860852
<div class="nav-help">
861-
F / F5 toggle mode &middot; Click / &#8592; &#8594; navigate
853+
F toggle mode &middot; Esc exit &middot; Click / &#8592; &#8594; navigate
862854
</div>
863855
<div class="overview-help">
864-
Press <strong>F</strong> or <strong>F5</strong> to toggle presentation mode &middot; Double-click any slide to start there
856+
Press <strong>F</strong> to toggle presentation mode &middot; Double-click any slide to start there
865857
</div>
866858
<div class="slide-counter">
867859
<span id="currentSlide">1</span> / <span id="totalSlides"></span>
@@ -909,10 +901,7 @@ <h1>Azure API Management Samples</h1>
909901
</div>
910902
</div>
911903

912-
<div class="footer">
913-
<div class="slide-number">1/20</div>
914-
<span class="footer-url">https://aka.ms/apim/samples</span>
915-
</div>
904+
<div class="footer" data-no-bottom-bar></div>
916905
</div>
917906

918907
<!-- ════════════════════════════════════════════════════════════ -->
@@ -929,11 +918,7 @@ <h2>Today's <span>Agenda</span></h2>
929918
<li><span class="num">5</span> Customer scenarios & how you can help</li>
930919
<li><span class="num">6</span> Summary & Q&A</li>
931920
</ul>
932-
<div class="footer">
933-
<div class="slide-number">2/20</div>
934-
<span class="footer-url">https://aka.ms/apim/samples</span>
935-
<div class="bottom-bar"></div>
936-
</div>
921+
<div class="footer"></div>
937922
</div>
938923

939924
<!-- ════════════════════════════════════════════════════════════ -->
@@ -943,11 +928,7 @@ <h2>Today's <span>Agenda</span></h2>
943928
<div class="section-number">01</div>
944929
<h2>The <span>Motivation</span></h2>
945930
<p>Why does APIM Samples exist, and what problem does it solve?</p>
946-
<div class="footer">
947-
<div class="slide-number">3/20</div>
948-
<span class="footer-url">https://aka.ms/apim/samples</span>
949-
<div class="bottom-bar"></div>
950-
</div>
931+
<div class="footer"></div>
951932
</div>
952933

953934
<!-- ════════════════════════════════════════════════════════════ -->
@@ -993,11 +974,7 @@ <h3>Just Right</h3>
993974
</p>
994975
</div>
995976
</div>
996-
<div class="footer">
997-
<div class="slide-number">4/20</div>
998-
<span class="footer-url">https://aka.ms/apim/samples</span>
999-
<div class="bottom-bar"></div>
1000-
</div>
977+
<div class="footer"></div>
1001978
</div>
1002979

1003980
<!-- ════════════════════════════════════════════════════════════ -->
@@ -1059,11 +1036,7 @@ <h3 style="margin: 0;">Mix & Match</h3>
10591036
<p style="font-size: 14px; color: #555; margin-top: 20px;">A flexible combination where <em>1 + 1 feels like 3</em>.</p>
10601037
</div>
10611038
</div>
1062-
<div class="footer">
1063-
<div class="slide-number">5/20</div>
1064-
<span class="footer-url">https://aka.ms/apim/samples</span>
1065-
<div class="bottom-bar"></div>
1066-
</div>
1039+
<div class="footer"></div>
10671040
</div>
10681041

10691042
<!-- ════════════════════════════════════════════════════════════ -->
@@ -1073,11 +1046,7 @@ <h3 style="margin: 0;">Mix & Match</h3>
10731046
<div class="section-number">02</div>
10741047
<h2>What's <span>Inside</span></h2>
10751048
<p>Infrastructures, samples, and key features at a glance</p>
1076-
<div class="footer">
1077-
<div class="slide-number">6/20</div>
1078-
<span class="footer-url">https://aka.ms/apim/samples</span>
1079-
<div class="bottom-bar"></div>
1080-
</div>
1049+
<div class="footer"></div>
10811050
</div>
10821051

10831052
<!-- ════════════════════════════════════════════════════════════ -->
@@ -1117,11 +1086,7 @@ <h4>App Gateway & APIM (VNet Injection)</h4>
11171086
<span class="tag">Max Isolation</span>
11181087
</div>
11191088
</div>
1120-
<div class="footer">
1121-
<div class="slide-number">7/20</div>
1122-
<span class="footer-url">https://aka.ms/apim/samples</span>
1123-
<div class="bottom-bar"></div>
1124-
</div>
1089+
<div class="footer"></div>
11251090
</div>
11261091

11271092
<!-- ════════════════════════════════════════════════════════════ -->
@@ -1168,11 +1133,7 @@ <h4>Secure Blob Access</h4>
11681133
<p>Valet key pattern for secure Azure Blob Storage access.</p>
11691134
</div>
11701135
</div>
1171-
<div class="footer">
1172-
<div class="slide-number">8/20</div>
1173-
<span class="footer-url">https://aka.ms/apim/samples</span>
1174-
<div class="bottom-bar"></div>
1175-
</div>
1136+
<div class="footer"></div>
11761137
</div>
11771138

11781139
<!-- ════════════════════════════════════════════════════════════ -->
@@ -1192,10 +1153,7 @@ <h2>Infrastructure &times; Sample Compatibility</h2>
11921153
alt="Infrastructure and Sample Compatibility Matrix" />
11931154
</div>
11941155

1195-
<div class="footer">
1196-
<p class="footer-note">https://aka.ms/apim/samples</p>
1197-
<div class="slide-number">9/20</div>
1198-
</div>
1156+
<div class="footer"></div>
11991157
</div>
12001158

12011159
<!-- ════════════════════════════════════════════════════════════ -->
@@ -1212,13 +1170,11 @@ <h2>Infrastructure &times; SKU Compatibility</h2>
12121170

12131171
<div class="matrix-container">
12141172
<img src="diagrams/Infrastructure-SKU-Compatibility.svg"
1215-
alt="Infrastructure and SKU Compatibility Matrix" />
1173+
alt="Infrastructure and SKU Compatibility Matrix"
1174+
style="max-height: 500px;" />
12161175
</div>
12171176

1218-
<div class="footer">
1219-
<p class="footer-note">https://aka.ms/apim/samples</p>
1220-
<div class="slide-number">10/20</div>
1221-
</div>
1177+
<div class="footer"></div>
12221178
</div>
12231179

12241180
<!-- ════════════════════════════════════════════════════════════ -->
@@ -1228,11 +1184,7 @@ <h2>Infrastructure &times; SKU Compatibility</h2>
12281184
<div class="section-number">03</div>
12291185
<h2>Why <span>This Approach</span></h2>
12301186
<p>Key differentiators that set APIM Samples apart</p>
1231-
<div class="footer">
1232-
<div class="slide-number">11/20</div>
1233-
<span class="footer-url">https://aka.ms/apim/samples</span>
1234-
<div class="bottom-bar"></div>
1235-
</div>
1187+
<div class="footer"></div>
12361188
</div>
12371189

12381190
<!-- ════════════════════════════════════════════════════════════ -->
@@ -1276,11 +1228,7 @@ <h4>Quality & Trust</h4>
12761228
<p>OpenSSF Best Practices certified. CI/CD pipeline. Cross-platform (Windows, Linux, macOS).</p>
12771229
</div>
12781230
</div>
1279-
<div class="footer">
1280-
<div class="slide-number">12/20</div>
1281-
<span class="footer-url">https://aka.ms/apim/samples</span>
1282-
<div class="bottom-bar"></div>
1283-
</div>
1231+
<div class="footer"></div>
12841232
</div>
12851233

12861234
<!-- ════════════════════════════════════════════════════════════ -->
@@ -1290,11 +1238,7 @@ <h4>Quality & Trust</h4>
12901238
<div class="section-number">04</div>
12911239
<h2>Live <span>Demo</span></h2>
12921240
<p>Deploying an infrastructure, running a sample, and exploring in Azure Portal</p>
1293-
<div class="footer">
1294-
<div class="slide-number">13/20</div>
1295-
<span class="footer-url">https://aka.ms/apim/samples</span>
1296-
<div class="bottom-bar"></div>
1297-
</div>
1241+
<div class="footer"></div>
12981242
</div>
12991243

13001244
<!-- ════════════════════════════════════════════════════════════ -->
@@ -1336,11 +1280,7 @@ <h4>Run a Sample</h4>
13361280
<div style="margin-top: 32px; text-align: center; font-size: 15px; color: #555;">
13371281
<strong>Let's see it in action!</strong> &mdash; We'll deploy an infrastructure and run a sample live.
13381282
</div>
1339-
<div class="footer">
1340-
<div class="slide-number">14/20</div>
1341-
<span class="footer-url">https://aka.ms/apim/samples</span>
1342-
<div class="bottom-bar"></div>
1343-
</div>
1283+
<div class="footer"></div>
13441284
</div>
13451285

13461286
<!-- ════════════════════════════════════════════════════════════ -->
@@ -1376,11 +1316,7 @@ <h3>What to Explore</h3>
13761316
</ul>
13771317
</div>
13781318
</div>
1379-
<div class="footer">
1380-
<div class="slide-number">15/20</div>
1381-
<span class="footer-url">https://aka.ms/apim/samples</span>
1382-
<div class="bottom-bar"></div>
1383-
</div>
1319+
<div class="footer"></div>
13841320
</div>
13851321

13861322
<!-- ════════════════════════════════════════════════════════════ -->
@@ -1390,11 +1326,7 @@ <h3>What to Explore</h3>
13901326
<div class="section-number">05</div>
13911327
<h2>Empowering <span>Customers</span></h2>
13921328
<p>Unlock your API management potential</p>
1393-
<div class="footer">
1394-
<div class="slide-number">16/20</div>
1395-
<span class="footer-url">https://aka.ms/apim/samples</span>
1396-
<div class="bottom-bar"></div>
1397-
</div>
1329+
<div class="footer"></div>
13981330
</div>
13991331

14001332
<!-- ════════════════════════════════════════════════════════════ -->
@@ -1428,11 +1360,7 @@ <h4>Empower Independence</h4>
14281360
<p>Fork the repo and build your own solutions. Guided notebooks and clear documentation make self-service success straightforward.</p>
14291361
</div>
14301362
</div>
1431-
<div class="footer">
1432-
<div class="slide-number">17/20</div>
1433-
<span class="footer-url">https://aka.ms/apim/samples</span>
1434-
<div class="bottom-bar"></div>
1435-
</div>
1363+
<div class="footer"></div>
14361364
</div>
14371365

14381366
<!-- ════════════════════════════════════════════════════════════ -->
@@ -1464,11 +1392,7 @@ <h4>Use in Engagements</h4>
14641392
<p>Leverage it with customers and share what you learn back.</p>
14651393
</div>
14661394
</div>
1467-
<div class="footer">
1468-
<div class="slide-number">18/20</div>
1469-
<span class="footer-url">https://aka.ms/apim/samples</span>
1470-
<div class="bottom-bar"></div>
1471-
</div>
1395+
<div class="footer"></div>
14721396
</div>
14731397

14741398
<!-- ════════════════════════════════════════════════════════════ -->
@@ -1502,10 +1426,7 @@ <h4 style="color: #50E6FF;">Accelerate</h4>
15021426
<div style="text-align: center; margin-top: 28px; font-size: 20px; font-weight: 300; opacity: 0.9; color: #fff;">
15031427
<em>"Neither too much nor too little. Just right."</em>
15041428
</div>
1505-
<div class="footer">
1506-
<div class="slide-number">19/20</div>
1507-
<span class="footer-url">https://aka.ms/apim/samples</span>
1508-
</div>
1429+
<div class="footer" data-no-bottom-bar></div>
15091430
</div>
15101431

15111432
<!-- ════════════════════════════════════════════════════════════ -->
@@ -1531,17 +1452,34 @@ <h2>Questions & <span>Discussion</span></h2>
15311452
</div>
15321453
</div>
15331454
</div>
1534-
<div class="footer">
1535-
<div class="slide-number">20/20</div>
1536-
<span class="footer-url">https://aka.ms/apim/samples</span>
1537-
<div class="bottom-bar"></div>
1538-
</div>
1455+
<div class="footer"></div>
15391456
</div>
15401457

15411458
<!-- ════════════════════════════════════════════════════════════ -->
1542-
<!-- Presentation Engine (keyboard navigation) -->
1459+
<!-- Footer auto-generation & Presentation Engine -->
15431460
<!-- ════════════════════════════════════════════════════════════ -->
15441461
<script>
1462+
// ── Auto-generate slide footers ──
1463+
// Each .footer div is populated automatically so that slide numbers
1464+
// stay in sync and the markup is not duplicated across every slide.
1465+
(function () {
1466+
var slides = document.querySelectorAll('.slide');
1467+
var total = slides.length;
1468+
var url = 'https://aka.ms/apim/samples';
1469+
1470+
slides.forEach(function (slide, i) {
1471+
var footer = slide.querySelector('.footer');
1472+
if (!footer) return;
1473+
1474+
var noBar = footer.hasAttribute('data-no-bottom-bar');
1475+
footer.innerHTML =
1476+
'<div class="slide-number">' + (i + 1) + '/' + total + '</div>' +
1477+
'<span class="footer-url">' + url + '</span>' +
1478+
(noBar ? '' : '<div class="bottom-bar"></div>');
1479+
});
1480+
})();
1481+
1482+
// ── Presentation engine (keyboard navigation) ──
15451483
(function () {
15461484
var slides = document.querySelectorAll('.slide');
15471485
var totalEl = document.getElementById('totalSlides');
@@ -1585,7 +1523,7 @@ <h2>Questions & <span>Discussion</span></h2>
15851523
window.addEventListener('resize', scaleSlides);
15861524

15871525
document.addEventListener('keydown', function (e) {
1588-
if (e.key === 'F5' || e.key === 'f' || e.key === 'F') {
1526+
if (e.key === 'f' || e.key === 'F') {
15891527
e.preventDefault();
15901528

15911529
if (document.body.classList.contains('presentation-mode')) {
@@ -1602,6 +1540,9 @@ <h2>Questions & <span>Discussion</span></h2>
16021540
}
16031541

16041542
switch (e.key) {
1543+
case 'Escape':
1544+
exitPresentation();
1545+
break;
16051546
case 'ArrowRight':
16061547
case 'ArrowDown':
16071548
case ' ':
@@ -1652,29 +1593,9 @@ <h2>Questions & <span>Discussion</span></h2>
16521593
// enterPresentation();
16531594
})();
16541595

1655-
// ── Live reload (polls server for changes) ──
1656-
(function () {
1657-
let lastModified = new Date().getTime();
1658-
const checkInterval = 2000; // Check every 2 seconds
1659-
1660-
setInterval(function () {
1661-
fetch(window.location.href, {
1662-
method: 'HEAD',
1663-
cache: 'no-store',
1664-
})
1665-
.then(function (response) {
1666-
const modified = new Date(response.headers.get('last-modified')).getTime();
1667-
if (modified > lastModified && lastModified !== 0) {
1668-
console.log('File updated, reloading...');
1669-
window.location.reload();
1670-
}
1671-
lastModified = modified;
1672-
})
1673-
.catch(function (error) {
1674-
console.log('Live reload check failed:', error);
1675-
});
1676-
}, checkInterval);
1677-
})();
16781596
</script>
1597+
1598+
<!-- Development-only: live reload when served via serve_presentation.py -->
1599+
<script src="live-reload.js"></script>
16791600
</body>
16801601
</html>

0 commit comments

Comments
 (0)