Skip to content
Snippets Groups Projects
Commit a1aa798f authored by Kody Jackson's avatar Kody Jackson
Browse files

prettier

parent a35ec814
No related branches found
No related tags found
No related merge requests found
{{- $changelogData := index .Site.Data "changelogs" -}}
{{- $changelogRendered := slice -}}
{{- $products := slice -}}
{{- range $index, $product := $changelogData -}}
{{- $products = $products | append $product.productName -}}
{{- range $index2, $item := $product.entries -}}
{{- $changelogRendered = $changelogRendered | append (merge $item (dict "product" $product.productName "url" $product.link )) -}}
{{- end -}}
{{- end -}}
{{- $changelogData := index .Site.Data "changelogs" -}} {{- $changelogRendered
:= slice -}} {{- $products := slice -}} {{- range $index, $product :=
$changelogData -}} {{- $products = $products | append $product.productName -}}
{{- range $index2, $item := $product.entries -}} {{- $changelogRendered =
$changelogRendered | append (merge $item (dict "product" $product.productName
"url" $product.link )) -}} {{- end -}} {{- end -}}
<!-- Order and remove dupe values -->
{{- $changelogRendered = sort $changelogRendered "publish_date" "desc" -}}
{{- $products = sort ($products | uniq) . "asc" -}}
{{- $changelogRendered = sort $changelogRendered "publish_date" "desc" -}} {{-
$products = sort ($products | uniq) . "asc" -}}
<div class="selectorDropdowns">
<div>
<div>
<label for="product">Product</label>
<select class="selectorFilter" name="data-product" id="product">
<option value="all">Select...</option>
{{- range $products -}}
<option value="{{ . | lower }}">{{.}}</option>
{{- end -}}
<option value="all">Select...</option>
{{- range $products -}}
<option value="{{ . | lower }}">{{.}}</option>
{{- end -}}
</select>
</div>
<div class="searchInput">
<label for="searchInput">Text search</label>
<input type="text" id="searchInput" placeholder="Search...">
</div>
</div>
<div class="searchInput">
<label for="searchInput">Text search</label>
<input type="text" id="searchInput" placeholder="Search..." />
</div>
</div>
<div class="DocsMarkdown--table-wrap">
<div class="DocsMarkdown--table-wrap-inner">
<div class="DocsMarkdown--table-wrap-inner">
<table>
<thead>
<thead>
<tr>
<td>
<strong>Product</strong>
</td>
<td>
<strong>Title</strong>
</td>
<td>
<strong>Date</strong>
</td>
<td>
<strong>Description</strong>
</td>
<td>
<strong>Product</strong>
</td>
<td>
<strong>Title</strong>
</td>
<td>
<strong>Date</strong>
</td>
<td>
<strong>Description</strong>
</td>
</tr>
</thead>
<tbody id="tableBody">
{{- range $changelogRendered -}}
{{- $link := "" -}}
{{- $rellink := .url -}}
{{- $title := "" -}}
{{ with .title }}
{{- $title = . -}}
{{- $link = print "https://developers.cloudflare.com" $rellink "#" (urlize .) -}}
{{ else }}
{{- $title = printf "%s · %s" .product .publish_date -}}
{{- $link = print "https://developers.cloudflare.com" $rellink "#" (urlize .publish_date) -}}
{{- end -}}
<tr class="data-row" data-product="{{.product | lower}}">
<td>{{ .product }}</td>
<td>{{ printf "[%s](%s)" $title $link | $.Page.RenderString }}</td>
<td>{{ .publish_date }}</td>
<td>{{ .description | $.Page.RenderString }}</td>
</tr>
{{- end -}}
</tbody>
</table>
</div>
</thead>
<tbody id="tableBody">
{{- range $changelogRendered -}} {{- $link := "" -}} {{- $rellink :=
.url -}} {{- $title := "" -}} {{ with .title }} {{- $title = . -}} {{-
$link = print "https://developers.cloudflare.com" $rellink "#" (urlize
.) -}} {{ else }} {{- $title = printf "%s · %s" .product .publish_date
-}} {{- $link = print "https://developers.cloudflare.com" $rellink "#"
(urlize .publish_date) -}} {{- end -}}
<tr class="data-row" data-product="{{.product | lower}}">
<td>{{ .product }}</td>
<td>{{ printf "[%s](%s)" $title $link | $.Page.RenderString }}</td>
<td>{{ .publish_date }}</td>
<td>{{ .description | $.Page.RenderString }}</td>
</tr>
{{- end -}}
</tbody>
</table>
</div>
</div>
<div class="viewMoreChangesContainer">
<button id="showAllButton" style="display: none;" class="viewMoreChangesButton">View more changes</button>
<button
id="showAllButton"
style="display: none"
class="viewMoreChangesButton"
>
View more changes
</button>
</div>
<script>
const productsDropdown = document.getElementById("product");
const searchInput = document.getElementById("searchInput");
const dataRows = document.querySelectorAll(".data-row");
const showAllButton = document.getElementById("showAllButton");
let descriptionText = document.getElementById("description")
let MAX_VISIBLE_ROWS = 20;
// Function to update URL parameters
function updateURLParams() {
const params = new URLSearchParams();
if (productsDropdown.value !== "all") {
params.set("product", productsDropdown.value);
}
history.replaceState(null, "", "?" + params.toString());
const productsDropdown = document.getElementById("product");
const searchInput = document.getElementById("searchInput");
const dataRows = document.querySelectorAll(".data-row");
const showAllButton = document.getElementById("showAllButton");
let descriptionText = document.getElementById("description");
let MAX_VISIBLE_ROWS = 20;
// Function to update URL parameters
function updateURLParams() {
const params = new URLSearchParams();
if (productsDropdown.value !== "all") {
params.set("product", productsDropdown.value);
}
history.replaceState(null, "", "?" + params.toString());
}
// Function to update description text
// Function to update description text
function updateDescriptionText() {
let productName = "Changelog"
let changelogLink = "/changelog/index.xml"
const regexPattern = `developers\.cloudflare\.com(.*?)#`
for (const dropdown of productsDropdown) {
if (dropdown.selected === true && dropdown.value !== "all") {
productName = dropdown.label
while (changelogLink === "/changelog/index.xml") {
dataRows.forEach(row => {
if (row.cells[0].innerText === productName) {
const rawHTML = row.cells[1].innerHTML;
const match = rawHTML.match(regexPattern);
if (match && match[1]) {
const hrefValue = match[1];
changelogLink = hrefValue + "index.xml"
}
}
})
function updateDescriptionText() {
let productName = "Changelog";
let changelogLink = "/changelog/index.xml";
const regexPattern = `developers\.cloudflare\.com(.*?)#`;
for (const dropdown of productsDropdown) {
if (dropdown.selected === true && dropdown.value !== "all") {
productName = dropdown.label;
while (changelogLink === "/changelog/index.xml") {
dataRows.forEach((row) => {
if (row.cells[0].innerText === productName) {
const rawHTML = row.cells[1].innerHTML;
const match = rawHTML.match(regexPattern);
if (match && match[1]) {
const hrefValue = match[1];
changelogLink = hrefValue + "index.xml";
}
}
}
});
}
descriptionText.innerHTML = `Subscribe to all ${productName} posts via <a class='rssLink' target="_blank" href=${changelogLink}>RSS</a>.`;
}
}
// Function to filter and show/hide rows
function updateTable() {
updateURLParams();
updateDescriptionText();
let visibleRowCount = 0;
dataRows.forEach(row => {
const productMatch = productsDropdown.value === "all" ||
row.getAttribute("data-product").toLowerCase() === productsDropdown.value.toLowerCase();
const searchMatch = searchInput.value.trim() === "" ||
Array.from(row.children).some(cell => cell.textContent.toLowerCase().includes(searchInput.value.trim().toLowerCase()));
if (productMatch && searchMatch) {
row.style.display = "table-row";
visibleRowCount++;
if (visibleRowCount > MAX_VISIBLE_ROWS) {
row.style.display = "none";
}
} else {
descriptionText.innerHTML = `Subscribe to all ${productName} posts via <a class='rssLink' target="_blank" href=${changelogLink}>RSS</a>.`;
}
// Function to filter and show/hide rows
function updateTable() {
updateURLParams();
updateDescriptionText();
let visibleRowCount = 0;
dataRows.forEach((row) => {
const productMatch =
productsDropdown.value === "all" ||
row.getAttribute("data-product").toLowerCase() ===
productsDropdown.value.toLowerCase();
const searchMatch =
searchInput.value.trim() === "" ||
Array.from(row.children).some((cell) =>
cell.textContent
.toLowerCase()
.includes(searchInput.value.trim().toLowerCase())
);
if (productMatch && searchMatch) {
row.style.display = "table-row";
visibleRowCount++;
if (visibleRowCount > MAX_VISIBLE_ROWS) {
row.style.display = "none";
}
});
if (visibleRowCount > MAX_VISIBLE_ROWS) {
showAllButton.style.display = "block";
} else {
showAllButton.style.display = "none";
row.style.display = "none";
}
}
});
function showAllEntries() {
MAX_VISIBLE_ROWS += 20;
updateTable();
if (visibleRowCount > MAX_VISIBLE_ROWS) {
showAllButton.style.display = "block";
} else {
showAllButton.style.display = "none";
}
// Set initial values from URL params
const urlParams = new URLSearchParams(window.location.search);
const productFilter = urlParams.get("product");
if (productFilter) {
for (const option of productsDropdown) {
if (option.value === productFilter.toLowerCase()) {
productsDropdown.value = productFilter.toLowerCase();
}
}
function showAllEntries() {
MAX_VISIBLE_ROWS += 20;
updateTable();
}
// Set initial values from URL params
const urlParams = new URLSearchParams(window.location.search);
const productFilter = urlParams.get("product");
if (productFilter) {
for (const option of productsDropdown) {
if (option.value === productFilter.toLowerCase()) {
productsDropdown.value = productFilter.toLowerCase();
}
}
// Initial table update
updateTable();
// Event listeners
productsDropdown.addEventListener("change", updateTable);
searchInput.addEventListener("input", updateTable);
showAllButton.addEventListener("click", showAllEntries);
</script>
\ No newline at end of file
}
// Initial table update
updateTable();
// Event listeners
productsDropdown.addEventListener("change", updateTable);
searchInput.addEventListener("input", updateTable);
showAllButton.addEventListener("click", showAllEntries);
</script>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment