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