https://copilot.microsoft.com/shares/pLWdbxwkv6ZCEtbmTzXsQ
Scrollable Width Code Box
SOURCE CODE
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta viewport="width=device-width, initial-scale=1.0" />
<title>Comment Logic Flow Diagram</title>
<!-- Mermaid.js Library -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<style>
/* ========================================
GLOBAL STYLES
======================================== */
* {
box-sizing: border-box;
}
body {
background: #f2f6fc;
margin: 20px;
font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
}
/* ========================================
HEADER SECTION
======================================== */
.page-header {
margin: 40px 0 20px;
}
.page-header h1 {
text-align: center;
color: #113355;
}
.intro-box {
background: rgb(228, 240, 250);
border-radius: 40px;
font-size: 1.1rem;
margin-top: 30px;
padding: 14px 24px;
}
.intro-box h2 {
background: rgb(236, 245, 253);
border-radius: 30px;
margin-top: 6px;
padding: 8px;
text-align: center;
color: #113355;
}
.intro-box .description {
font-weight: 700;
}
/* ========================================
BADGE STYLES
======================================== */
.badge-title {
background: #082b40;
color: white;
padding: 8px 28px;
border-radius: 60px;
font-size: 1.3rem;
font-weight: 600;
display: inline-block;
margin-bottom: 18px;
letter-spacing: -0.2px;
}
.badge-center {
text-align: center;
margin-bottom: 10px;
}
/* ========================================
DIAGRAM CONTAINER
======================================== */
.diagram-mega {
background: #fafbfc;
border-radius: 24px;
padding: 20px;
border: 2px solid #a3c0d9;
width: 100%;
max-width: 1200px;
overflow-x: auto;
overflow-y: visible;
margin: 0 auto 20px;
box-shadow: 0 10px 25px rgba(0, 30, 60, 0.15);
}
.mermaid-inner {
min-width: 800px;
width: fit-content;
background: white;
padding: 25px 20px;
border-radius: 28px;
box-shadow: 0 8px 20px rgba(0, 20, 40, 0.1);
margin: 0;
}
.mermaid-inner svg {
max-height: none !important;
height: auto !important;
display: block;
}
.mermaid {
text-align: center;
}
/* ========================================
FOOTER NOTE
======================================== */
.foot-note {
text-align: center;
background: #ecf5fd;
padding: 10px 18px;
border-radius: 40px;
margin: 16px auto;
color: #103c5c;
font-size: 0.95rem;
max-width: 800px;
border: 1px solid #b8d2e0;
}
/* ========================================
DIVIDER
======================================== */
.section-divider {
margin: 40px 0;
border: none;
border-top: 2px solid #a3c0d9;
}
/* ========================================
NOSCRIPT WARNING
======================================== */
.no-js-warning {
background: #ffe0b0;
padding: 20px;
border-radius: 30px;
text-align: center;
margin: 20px auto;
max-width: 600px;
}
</style>
</head>
<body>
<!-- ========================================
HEADER SECTION
======================================== -->
<header class="page-header">
<h1>📊 DIAGRAM of COMMENT LOGIC FLOW</h1>
<div class="intro-box">
<h2>✨ render='false' vs 'true' | private/shared + GitHub analogy</h2>
<p>
<span class="description">📌</span>
menggambarkan alur keputusan <code>render</code> secara visual.
</p>
</div>
</header>
<!-- ========================================
HORIZONTAL DIAGRAM (TOP-DOWN FLOWCHART)
======================================== -->
<section>
<div class="badge-center">
<span class="badge-title">📊 HORIZONTAL</span>
</div>
<div class="diagram-mega">
<div class="mermaid-inner">
<pre class="mermaid">
flowchart TD
A["<b><b:comment> tag</b>"] --> B{"Attribute render?"}
B -- "render='false' (default)" --> C["🔒 <b>Private / Internal</b>"]
B -- "render='true'" --> D["🌐 <b>Shared / External</b>"]
C --> E["Stored only in Blogger editor"]
C --> F["❌ Not in page source"]
C --> G["❌ Not visible to anyone outside"]
C --> H["✏️ Use: sensitive warnings, admin notes"]
D --> I["Exported as normal HTML comment"]
D --> J["✅ Visible in page source"]
D --> K["✅ Visible to collaborators, crawlers"]
D --> L["✏️ Use: debugging markers, team hints"]
I --> M["<code><!-- comment shows here --></code>"]
subgraph GITHUB_ANALOGY["GitHub / peer-to-peer analogy"]
N["Private draft = render='false'"]
O["Committed comment = render='true'"]
end
C -.-> N
D -.-> O
style A fill:#d5e8f2,stroke:#1f4b77,stroke-width:2px
style B fill:#ffe5b4,stroke:#b45f1b,stroke-width:2px
style C fill:#ffd9d9,stroke:#aa3e3e
style D fill:#d0e5ff,stroke:#175a8f
style GITHUB_ANALOGY fill:#f5f0db,stroke:#9e8b5a,stroke-dasharray:4 4
</pre>
</div>
</div>
<div class="foot-note">
✦ Horizontal flow: <strong>render='false'</strong> (cabang atas) ·
<strong>render='true'</strong> (cabang bawah)<br />
⟷ Lebar discroll horizontal · tinggi penuh tanpa scroll vertikal
</div>
</section>
<hr class="section-divider" />
<!-- ========================================
VERTICAL DIAGRAM (LEFT-TO-RIGHT GRAPH)
======================================== -->
<section>
<div class="badge-center">
<span class="badge-title">📊 VERTICAL</span>
</div>
<div class="diagram-mega">
<div class="mermaid-inner">
<div class="mermaid">
graph LR
A["<b:comment> tag"] --> B{"Attribute render?"}
B -- "render='false'" --> C["🔒 Private / Internal"]
B -- "render='true'" --> D["🌐 Shared / External"]
subgraph FALSE_DETAILS["render='false' details"]
direction TB
C --> E["Stored only in Blogger editor"]
C --> F["❌ Not in page source"]
C --> G["❌ Not visible to anyone outside"]
C --> H["✏️ Use: sensitive warnings, admin notes"]
end
subgraph TRUE_DETAILS["render='true' details"]
direction TB
D --> I["Exported as normal HTML comment"]
D --> J["✅ Visible in page source"]
D --> K["✅ Visible to collaborators, crawlers"]
D --> L["✏️ Use: debugging markers, team hints"]
end
I --> M["<!-- comment shows here -->"]
subgraph GITHUB_ANALOGY["GitHub / peer-to-peer analogy"]
direction TB
N["Private draft = render='false'"]
O["Committed comment = render='true'"]
end
C -.-> N
D -.-> O
style A fill:#d5e8f2,stroke:#1f4b77,stroke-width:2px
style B fill:#ffe5b4,stroke:#b45f1b,stroke-width:2px
style C fill:#ffd9d9,stroke:#aa3e3e,stroke-width:2px
style D fill:#d0e5ff,stroke:#175a8f,stroke-width:2px
style FALSE_DETAILS fill:#ffe1e1,stroke:#b34747,stroke-dasharray:3 2
style TRUE_DETAILS fill:#ddecff,stroke:#256ba0,stroke-dasharray:3 2
style GITHUB_ANALOGY fill:#f5f0db,stroke:#9e8b5a,stroke-dasharray:4 4
</div>
</div>
</div>
<div class="foot-note">
✦ Left-to-right orientation: <strong>main di kolom paling kiri</strong> · detail di
kanan · mermaid v10<br />
⟷ lebar discroll horizontal · aliran kiri ke kanan (main → false/true → detail lebih
kanan)
</div>
</section>
<!-- ========================================
NOSCRIPT FALLBACK
======================================== -->
<noscript>
<div class="no-js-warning">⚠️ JavaScript diperlukan untuk menampilkan diagram Mermaid.</div>
</noscript>
<!-- ========================================
MERMAID INITIALIZATION
======================================== -->
<script>
mermaid.initialize({
startOnLoad: true,
theme: "base",
themeVariables: {
background: "#ffffff",
primaryColor: "#bbdefb",
primaryTextColor: "#113355",
primaryBorderColor: "#2a5f8a",
lineColor: "#2b5f8a",
secondaryColor: "#fce4d6",
tertiaryColor: "#f0f4fa",
},
flowchart: {
useMaxWidth: false,
htmlLabels: true,
curve: "basis",
padding: 20px,
},
securityLevel: "loose",
deterministicIds: true,
});
</script>
</body>
</html>
COMPILED/RESULT
<nav style="background-color: #333; padding: 10px;">
<!--^ ^ ^
element | |
attribute (style) |
|
<a href="/" style="color: white; margin: 0 10px;">Home</a>
<!-- ^ ^ ^ ^
element attribute (href) CSS property
(destination) (color: white) -->
<a href="/" style="color: white; margin: 0 10px;">Home</a>
<a href="/about" style="color: white; margin: 0 10px;">About</a>
<a href="/contact" style="color: white; margin: 0 10px;">Contact</a>
</nav>
Comments
Post a Comment