Skip to content

Commit 2ee9eca

Browse files
angrezichatterboxangrezichatterbox
authored
feat:add highlight js for syntax highlight (#16)
Bug: https://phabricator.wikimedia.org/T393254
1 parent f8d89c9 commit 2ee9eca

1 file changed

Lines changed: 161 additions & 139 deletions

File tree

‎templates/home.html‎

Lines changed: 161 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,174 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wikitext to Translatable Wikitext Converter</title>
7-
<link
8-
rel="stylesheet"
9-
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css"
10-
/>
11-
<style>
12-
html,
13-
body {
14-
height: 100%;
15-
margin: 0;
16-
}
17-
.wrapper {
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
}
22-
.main-content {
23-
flex: 1;
24-
}
25-
.navbar {
26-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
27-
padding: 1rem 2rem;
28-
}
29-
.footer {
30-
background-color: #f8f9fa;
31-
text-align: center;
32-
padding: 1rem 0;
33-
position: sticky;
34-
bottom: 0;
35-
width: 100%;
36-
}
37-
</style>
38-
</head>
39-
<body>
40-
<div class="wrapper">
41-
<!-- Header -->
42-
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
43-
<a class="navbar-brand" href="/">Wiki Translate Tagger</a>
44-
</nav>
453

46-
<!-- Main Content -->
47-
<div class="main-content container mt-5">
48-
<div class="row">
49-
<!-- Input Column -->
50-
<div class="col-md-6">
51-
<h5>Input Wikitext</h5>
52-
<form action="/convert" method="post">
53-
<div class="mb-3">
54-
<textarea
55-
class="form-control"
56-
id="wikitext"
57-
name="wikitext"
58-
rows="15"
59-
placeholder="Enter Wikitext here..."
60-
>
61-
{{ original }}</textarea
62-
>
63-
</div>
64-
<button type="submit" class="btn btn-primary">
65-
Convert to Translatable Wikitext
66-
</button>
67-
</form>
68-
</div>
69-
<!-- Output Column -->
70-
{% if converted %}
71-
<div class="col-md-6">
72-
<h5>Translatable Wikitext Output</h5>
73-
<textarea class="form-control" id="outputText" rows="15" readonly>
74-
{{ converted }}</textarea
75-
>
76-
<button class="btn btn-secondary mt-3" onclick="copyToClipboard()">
77-
Copy to Clipboard
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Wikitext to Translatable Wikitext Converter</title>
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css" />
9+
10+
<link rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-light.min.css">
12+
<style>
13+
html,
14+
body {
15+
height: 100%;
16+
margin: 0;
17+
}
18+
19+
.wrapper {
20+
min-height: 100vh;
21+
display: flex;
22+
flex-direction: column;
23+
}
24+
25+
.main-content {
26+
flex: 1;
27+
}
28+
29+
.navbar {
30+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
31+
padding: 1rem 2rem;
32+
}
33+
34+
.footer {
35+
background-color: #f8f9fa;
36+
text-align: center;
37+
padding: 1rem 0;
38+
position: sticky;
39+
bottom: 0;
40+
width: 100%;
41+
}
42+
43+
/* Ensure pre tag handles scrolling and sizing nicely */
44+
pre {
45+
margin: 0;
46+
}
47+
48+
.code-container {
49+
max-height: 400px;
50+
overflow-y: auto;
51+
border: 1px solid #ced4da;
52+
border-radius: 0.25rem;
53+
}
54+
</style>
55+
</head>
56+
57+
<body>
58+
<div class="wrapper">
59+
<!-- Header -->
60+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
61+
<a class="navbar-brand" href="/">Wiki Translate Tagger</a>
62+
</nav>
63+
64+
<!-- Main Content -->
65+
<div class="main-content container mt-5">
66+
<div class="row">
67+
<!-- Input Column -->
68+
<div class="col-md-6">
69+
<h5>Input Wikitext</h5>
70+
<form action="/convert" method="post">
71+
<div class="mb-3">
72+
<textarea class="form-control" id="wikitext" name="wikitext" rows="15"
73+
placeholder="Enter Wikitext here...">{{ original }}</textarea>
74+
</div>
75+
<button type="submit" class="btn btn-primary">
76+
Convert to Translatable Wikitext
7877
</button>
78+
</form>
79+
</div>
80+
<!-- Output Column -->
81+
{% if converted %}
82+
<div class="col-md-6">
83+
<h5>Translatable Wikitext Output</h5>
84+
<div class="code-container">
85+
<pre><code class="language-xml" id="outputText">{{ converted }}</code></pre>
7986
</div>
80-
{% endif %}
87+
<button class="btn btn-secondary mt-3" onclick="copyToClipboard()">
88+
Copy to Clipboard
89+
</button>
8190
</div>
91+
{% endif %}
8292
</div>
83-
84-
<!-- Footer -->
85-
<footer class="footer">
86-
<div class="d-flex justify-content-center align-items-center">
87-
<p class="mb-0">
88-
Created by:
89-
<a href="https://meta.wikimedia.org/wiki/User:Gopavasanth"
90-
>Gopa Vasanth</a
91-
>
92-
</p>
93-
<span class="mx-2">|</span>
94-
<p class="mb-0">
95-
More info:
96-
<a href="https://meta.wikimedia.org/wiki/Indic-TechCom"
97-
>Indic-TechCom</a
98-
>
99-
</p>
100-
<span class="mx-2">|</span>
101-
<p class="mb-0">
102-
<a
103-
href="https://github.com/indictechcom/translatable-wikitext-converter"
104-
>View source</a
105-
>
106-
</p>
107-
<span class="mx-2">|</span>
108-
<p class="mb-0">
109-
Last updated on: <span id="lastUpdatedDate"></span>
110-
</p>
111-
</div>
112-
</footer>
11393
</div>
11494

115-
<!-- Bootstrap JS and dependencies -->
116-
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>
117-
<script>
118-
function copyToClipboard() {
119-
var copyText = document.getElementById("outputText");
120-
copyText.select();
121-
document.execCommand("copy");
95+
<!-- Footer -->
96+
<footer class="footer">
97+
<div class="d-flex justify-content-center align-items-center">
98+
<p class="mb-0">
99+
Created by:
100+
<a href="https://meta.wikimedia.org/wiki/User:Gopavasanth">Gopa Vasanth</a>
101+
</p>
102+
<span class="mx-2">|</span>
103+
<p class="mb-0">
104+
More info:
105+
<a href="https://meta.wikimedia.org/wiki/Indic-TechCom">Indic-TechCom</a>
106+
</p>
107+
<span class="mx-2">|</span>
108+
<p class="mb-0">
109+
<a href="https://github.com/indictechcom/translatable-wikitext-converter">View source</a>
110+
</p>
111+
<span class="mx-2">|</span>
112+
<p class="mb-0">
113+
Last updated on: <span id="lastUpdatedDate"></span>
114+
</p>
115+
</div>
116+
</footer>
117+
</div>
118+
119+
<!-- Bootstrap JS and dependencies -->
120+
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>
121+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
122+
<script>
123+
hljs.highlightAll();
124+
125+
function copyToClipboard() {
126+
var copyText = document.getElementById("outputText").innerText;
127+
navigator.clipboard.writeText(copyText).then(function () {
122128
alert("Copied to clipboard!");
123-
}
129+
}, function (err) {
130+
console.error('Async: Could not copy text: ', err);
131+
// Fallback
132+
var textArea = document.createElement("textarea");
133+
textArea.value = copyText;
134+
document.body.appendChild(textArea);
135+
textArea.select();
136+
try {
137+
document.execCommand('copy');
138+
alert("Copied to clipboard!");
139+
} catch (err) {
140+
console.error('Fallback: Unable to copy', err);
141+
}
142+
document.body.removeChild(textArea);
143+
});
144+
}
124145

125-
// Fetch the last commit date from the GitHub API
126-
fetch(
127-
"https://api.github.com/repos/indictechcom/translatable-wikitext-converter/commits"
128-
)
129-
.then((response) => response.json())
130-
.then((data) => {
131-
if (data && data.length > 0) {
132-
const lastCommitDate = new Date(data[0].commit.committer.date);
133-
const formattedDate = lastCommitDate.toLocaleDateString("en-US", {
134-
year: "numeric",
135-
month: "long",
136-
day: "numeric",
137-
});
138-
document.getElementById("lastUpdatedDate").textContent =
139-
formattedDate;
140-
} else {
141-
document.getElementById("lastUpdatedDate").textContent =
142-
"Unavailable";
143-
}
144-
})
145-
.catch((error) => {
146-
console.error("Error fetching commit data:", error);
146+
// Fetch the last commit date from the GitHub API
147+
fetch(
148+
"https://api.github.com/repos/indictechcom/translatable-wikitext-converter/commits"
149+
)
150+
.then((response) => response.json())
151+
.then((data) => {
152+
if (data && data.length > 0) {
153+
const lastCommitDate = new Date(data[0].commit.committer.date);
154+
const formattedDate = lastCommitDate.toLocaleDateString("en-US", {
155+
year: "numeric",
156+
month: "long",
157+
day: "numeric",
158+
});
159+
document.getElementById("lastUpdatedDate").textContent =
160+
formattedDate;
161+
} else {
147162
document.getElementById("lastUpdatedDate").textContent =
148163
"Unavailable";
149-
});
150-
</script>
151-
</body>
152-
</html>
164+
}
165+
})
166+
.catch((error) => {
167+
console.error("Error fetching commit data:", error);
168+
document.getElementById("lastUpdatedDate").textContent =
169+
"Unavailable";
170+
});
171+
</script>
172+
</body>
173+
174+
</html>

0 commit comments

Comments
 (0)