Skip to content

Commit ae39c84

Browse files
ThisIs-DeveloperThisIs-Developer
authored
Merge pull request #137 from ThisIs-Developer/perf-layout-reflow-optimizations
perf: cache editor layout geometry and restore synchronous critical CSS
2 parents 8c41000 + abf9f21 commit ae39c84

4 files changed

Lines changed: 354 additions & 30 deletions

File tree

‎desktop-app/resources/index.html‎

Lines changed: 171 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,8 @@
1616
<title>Markdown Viewer</title>
1717
<link href="/assets/icon.jpg" rel="icon" type="image/jpg">
1818
<!-- Updated libraries to latest versions with Subresource Integrity (SRI) -->
19-
<link rel="preload" href="/libs/bootstrap.min.css" as="style" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'">
20-
<noscript><link rel="stylesheet" href="/libs/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"></noscript>
21-
<link rel="preload" href="/libs/github-markdown.min.css" as="style" integrity="sha384-hZuxRjC/Dsr4zEx1JlUhDQqkvqBPp2VLHsgXfnxPq1ULDy1eIdWCiux7nvO1RIZP" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'">
22-
<noscript><link rel="stylesheet" href="/libs/github-markdown.min.css" integrity="sha384-hZuxRjC/Dsr4zEx1JlUhDQqkvqBPp2VLHsgXfnxPq1ULDy1eIdWCiux7nvO1RIZP" crossorigin="anonymous"></noscript>
19+
<link rel="stylesheet" href="/libs/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
20+
<link rel="stylesheet" href="/libs/github-markdown.min.css" integrity="sha384-hZuxRjC/Dsr4zEx1JlUhDQqkvqBPp2VLHsgXfnxPq1ULDy1eIdWCiux7nvO1RIZP" crossorigin="anonymous">
2321
<link rel="preload" href="/libs/bootstrap-icons.min.css" as="style" integrity="sha384-XGjxtQfXaH2tnPFa9x+ruJTuLE3Aa6LhHSWRr1XeTyhezb4abCG4ccI5AkVDxqC+" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'">
2422
<noscript><link rel="stylesheet" href="/libs/bootstrap-icons.min.css" integrity="sha384-XGjxtQfXaH2tnPFa9x+ruJTuLE3Aa6LhHSWRr1XeTyhezb4abCG4ccI5AkVDxqC+" crossorigin="anonymous"></noscript>
2523
<link rel="stylesheet" href="/styles.css">
@@ -856,6 +854,175 @@ <h3 class="modal-section-title">Open-source credits</h3>
856854
</div>
857855
</div>
858856

857+
<template id="default-markdown">---
858+
title: Welcome to Markdown Viewer
859+
description: A GitHub-style Markdown renderer with live preview, math, diagrams, and export support.
860+
author: ThisIs-Developer
861+
tags: ["markdown", "preview", "mermaid", "latex", "open-source"]
862+
---
863+
864+
# Welcome to Markdown Viewer
865+
866+
## ✨ Key Features
867+
- **Live Preview** with GitHub styling
868+
- **Smart Import/Export** (MD, HTML, PDF)
869+
- **Mermaid Diagrams** for visual documentation
870+
- **LaTeX Math Support** for scientific notation
871+
- **Emoji Support** 😄 👍 🎉
872+
873+
## 💻 Code with Syntax Highlighting
874+
```javascript
875+
function renderMarkdown() {
876+
const markdown = markdownEditor.value;
877+
const html = marked.parse(markdown);
878+
const sanitizedHtml = DOMPurify.sanitize(html);
879+
markdownPreview.innerHTML = sanitizedHtml;
880+
881+
// Syntax highlighting is handled automatically
882+
// during the parsing phase by the marked renderer.
883+
// Themes are applied instantly via CSS variables.
884+
}
885+
```
886+
887+
## 🧮 Mathematical Expressions
888+
Write complex formulas with LaTeX syntax:
889+
890+
Inline equation: $$E = mc^2$$
891+
892+
Display equations:
893+
$$\frac{\partial f}{\partial x} = \lim_{h \to 0} \frac{f(x+h) - f(x)}{h}$$
894+
895+
$$\sum_{i=1}^{n} i^2 = \frac{n(n+1)(2n+1)}{6}$$
896+
897+
## 📊 Mermaid Diagrams
898+
Create powerful visualizations directly in markdown:
899+
900+
```mermaid
901+
flowchart LR
902+
A[Start] --> B{Is it working?}
903+
B -->|Yes| C[Great!]
904+
B -->|No| D[Debug]
905+
C --> E[Deploy]
906+
D --> B
907+
```
908+
909+
### Sequence Diagram Example
910+
```mermaid
911+
sequenceDiagram
912+
User->>Editor: Type markdown
913+
Editor->>Preview: Render content
914+
User->>Editor: Make changes
915+
Editor->>Preview: Update rendering
916+
User->>Export: Save as PDF
917+
```
918+
919+
## 📋 Task Management
920+
- [x] Create responsive layout
921+
- [x] Implement live preview with GitHub styling
922+
- [x] Add syntax highlighting for code blocks
923+
- [x] Support math expressions with LaTeX
924+
- [x] Enable mermaid diagrams
925+
926+
## 🆚 Feature Comparison
927+
928+
| Feature | Markdown Viewer (Ours) | Other Markdown Editors |
929+
|:-------------------------|:----------------------:|:-----------------------:|
930+
| Live Preview | ✅ GitHub-Styled | ✅ |
931+
| Sync Scrolling | ✅ Two-way | 🔄 Partial/None |
932+
| Mermaid Support | ✅ | ❌/Limited |
933+
| LaTeX Math Rendering | ✅ | ❌/Limited |
934+
935+
### 📝 Multi-row Headers Support
936+
937+
<table>
938+
<thead>
939+
<tr>
940+
<th rowspan="2">Document Type</th>
941+
<th colspan="2">Support</th>
942+
</tr>
943+
<tr>
944+
<th>Markdown Viewer (Ours)</th>
945+
<th>Other Markdown Editors</th>
946+
</tr>
947+
</thead>
948+
<tbody>
949+
<tr>
950+
<td>Technical Docs</td>
951+
<td>Full + Diagrams</td>
952+
<td>Limited/Basic</td>
953+
</tr>
954+
<tr>
955+
<td>Research Notes</td>
956+
<td>Full + Math</td>
957+
<td>Partial</td>
958+
</tr>
959+
<tr>
960+
<td>Developer Guides</td>
961+
<td>Full + Export Options</td>
962+
<td>Basic</td>
963+
</tr>
964+
</tbody>
965+
</table>
966+
967+
## 📝 Text Formatting Examples
968+
969+
### Text Formatting
970+
971+
Text can be formatted in various ways for ~~strikethrough~~, **bold**, *italic*, or ***bold italic***.
972+
973+
For highlighting important information, use <mark>highlighted text</mark> or add <u>underlines</u> where appropriate.
974+
975+
### Superscript and Subscript
976+
977+
Chemical formulas: H<sub>2</sub>O, CO<sub>2</sub>
978+
Mathematical notation: x<sup>2</sup>, e<sup>iπ</sup>
979+
980+
### Keyboard Keys
981+
982+
Press <kbd>Ctrl</kbd> + <kbd>B</kbd> for bold text.
983+
984+
### Abbreviations
985+
986+
<abbr title="Graphical User Interface">GUI</abbr>
987+
<abbr title="Application Programming Interface">API</abbr>
988+
989+
### Text Alignment
990+
991+
<div style="text-align: center">
992+
Centered text for headings or important notices
993+
</div>
994+
995+
<div style="text-align: right">
996+
Right-aligned text (for dates, signatures, etc.)
997+
</div>
998+
999+
### **Lists**
1000+
1001+
Create bullet points:
1002+
* Item 1
1003+
* Item 2
1004+
* Nested item
1005+
* Nested further
1006+
1007+
### **Links and Images**
1008+
1009+
Add a [link](https://github.com/ThisIs-Developer/Markdown-Viewer) to important resources.
1010+
1011+
Embed an image:
1012+
<img alt="Markdown Logo" src="https://markdownviewer.pages.dev/assets/icon.jpg" width="120" height="120">
1013+
1014+
### **Blockquotes**
1015+
1016+
Quote someone famous:
1017+
> "The best way to predict the future is to invent it." - Alan Kay
1018+
1019+
---
1020+
1021+
## 🛡️ Security Note
1022+
1023+
This is a fully client-side application. Your content never leaves your browser and stays secure on your device.
1024+
</template>
1025+
8591026
<script src="/libs/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
8601027
<script src="/js/neutralino.js"></script>
8611028
<script src="/js/main.js"></script>

‎desktop-app/resources/js/script.js‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -864,18 +864,13 @@ document.addEventListener("DOMContentLoaded", function () {
864864
.replace(/"/g, '&quot;');
865865
}
866866

867-
// PERF-012: Default template loaded from external file to reduce bundle size
868-
let sampleMarkdown = '# Welcome to Markdown Viewer\n\nStart typing your markdown here...';
869-
fetch('sample.md').then(function(r) { return r.text(); }).then(function(text) {
870-
sampleMarkdown = text;
871-
// Only apply if editor still has the simple fallback or is empty
872-
if (!markdownEditor.value || markdownEditor.value === '# Welcome to Markdown Viewer\n\nStart typing your markdown here...') {
873-
markdownEditor.value = sampleMarkdown;
874-
renderMarkdown();
875-
}
876-
}).catch(function() { /* Use inline fallback */ });
867+
// PERF-012: Inlined default template to eliminate network request, FOUC, and layout shifts
868+
const defaultMarkdownTemplate = document.getElementById('default-markdown');
869+
const sampleMarkdown = defaultMarkdownTemplate ? defaultMarkdownTemplate.textContent.trim() : '# Welcome to Markdown Viewer\n\nStart typing your markdown here...';
877870

878-
markdownEditor.value = sampleMarkdown;
871+
if (!markdownEditor.value) {
872+
markdownEditor.value = sampleMarkdown;
873+
}
879874

880875
// ========================================
881876
// DOCUMENT TABS & SESSION MANAGEMENT

0 commit comments

Comments
 (0)