Add releases tab

index.html

@@ -18,6 +18,7 @@
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/timeago.js/4.0.2/timeago.min.js"></script>
 		<script src="https://cdn.tailwindcss.com"></script>
+		<link rel="stylesheet" href="style.css">
 		<script>
 			const REPO_NAME = "spaces/transformers-discussion-board/Support";
 			const NUM_DISCUSSIONS = 5;
@@ -105,6 +106,59 @@
 
 					hookPoint.appendChild(clone);
 				}
+
+				const pypi_svg = `<svg clip-rule="evenodd" fill-rule="evenodd" height="20" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="1.5" viewBox=".006 0 673.409 600" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m.006 0h600v600h-600z" fill="#111827"/><g transform="translate(72.59 -63.209)"><path d="m673.41 236.016-64.271 8.252v281.357h64.276z" fill="#ffca1e" stroke="#d7c5b2" stroke-width="1.11" transform="matrix(1.02365 -.37275 .22115 .08093 -423.086 457.448)"/><path d="m609.139 244.268h64.276v281.357h-64.276z" fill="#ffd241" stroke="#d7c5b2" stroke-width=".35" transform="matrix(3.93359 -1.43837 0 .53084 -2266.43 1087.94)"/><path d="m609.139 244.268h64.276v281.357h-64.276z" fill="#2f6490" stroke="#d1e3f2" stroke-width=".62" transform="matrix(1.9604 -.71685 .2216 .07927 -1118.55 639.339)"/><path d="m609.139 244.268h64.276v281.357h-64.276z" fill="#3775a8" stroke="#d1e3f2" stroke-width="1.15" transform="matrix(1.02281 -.374 0 1.05695 -430.773 214.178)"/><path d="m609.139 244.268h64.276v281.357h-64.276z" fill="#2f6490" stroke="#fff" stroke-width="1.17" transform="matrix(-.97499 -.34924 0 1.05695 786.194 199.208)"/><path d="m609.139 244.268h64.276v281.357h-64.276z" fill="#efeeea" stroke="#d8d8d8" stroke-width="1.44" transform="matrix(-.97499 -.35652 0 .26885 786.194 618.355)"/><g stroke="#d1e3f2"><path d="m609.139 244.268h64.276v281.357h-64.276z" fill="#2f6490" stroke-width="1.44" transform="matrix(-.96834 -.35409 0 .53077 719.483 427.5)"/><path d="m609.139 244.268h64.276v281.357h-64.276z" fill="#3775a8" stroke-width="1.2" transform="matrix(.93554 -.3421 0 1.05695 -311.892 170.492)"/><path d="m609.139 244.268h64.276v281.357h-64.276z" fill="#3775a8" stroke-width="1.43" transform="matrix(.9742 -.35623 0 .53084 -463.744 428.761)"/><path d="m67.575 393.161 62.121 22.465 188.708-68.299m-125.165-29.141 124.732-45.602" fill="none"/></g><path d="m318.404 347.327 63.939-23.209" fill="none" stroke="#d7c5b2"/><path d="m609.139 244.268h64.276v281.357h-64.276z" fill="#2f6490" stroke="#d1e3f2" stroke-width="1.16" transform="matrix(.96788 -.35244 .22115 .08093 -576.168 513.583)"/><circle cx="637.517" cy="260.001" fill="#fff" r="15.71" transform="matrix(.7826 -.4024 .05494 .8614 -295.363 304.934)"/><path d="m195.786 198.125 61.696 22.126" fill="none" stroke="#d1e3f2"/><path d="m673.415 244.268h-64.276l.018 282.405 64.258-1.048z" fill="#ffd241" stroke="#d7c5b2" stroke-width="1.37" transform="matrix(1.02281 -.374 0 .52843 -430.773 491.983)"/><path d="m673.415 244.268h-64.276l.001 281.758 64.275-.401z" fill="#ffd241" stroke="#d7c5b2" stroke-width="1.48" transform="matrix(.93554 -.3421 0 .52743 -311.892 448.822)"/><circle cx="637.517" cy="260.001" fill="#fefdfd" r="15.71" transform="matrix(.77074 -.3963 .05156 .80832 -205.916 509.411)"/><path d="m192.412 468.059 126.028-45.977" fill="none" stroke="#d7c5b2"/></g></svg>`
+
+				const dataURL = 'https://datasets-server.huggingface.co/rows?dataset=reach-vb%2Ftransformers-releases&config=default&split=train&offset=0&length=100'
+				const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
+				const releases = await fetch(dataURL)
+						.then(e => e.json())
+						.then(e => e.rows.map(a => {
+							return {
+								title: a['row']['name'],
+								publishedAt: a['row']['published_at'],
+								desc: `${a['row']['tag_name']}, released on ${new Date(a['row']['published_at']).toLocaleString("en-US", dateOptions)}`,
+								pypi: !a['row']['name'].includes('based'),
+								tag: a['row']['tag_name'],
+							}
+						}).sort((a, b) => new Date(a.publishedAt) - new Date(b.publishedAt)))
+
+				for (let i = 1; i < releases.length + 1; i++) {
+					const release = releases[i - 1];
+					const styleTop = `${i}0%`
+
+					const commitTree = document.getElementById('commit-tree');
+					const commitNode = document.createElement('div');
+					const tooltip = document.createElement('div')
+
+					commitNode.classList.add('commit-node');
+					commitNode.style.top = styleTop;
+
+					tooltip.style.animation = "fade-in ease 1s";
+
+					tooltip.innerHTML = `<div class="tooltip">
+						<div class="title relative h-[4.25rem] w-full overflow-hidden">
+							<a class="group flex h-full items-stretch overflow-hidden rounded-lg border border-gray-100 dark:border-gray-800"
+							   href="https://github.com/huggingface/transformers/releases/tag/${release.tag}">
+								<div class="flex-1 overflow-hidden whitespace-nowrap px-4 bg-white dark:bg-gray-800 dark:bg-gradient-to-r dark:from-gray-900 dark:to-gray-950">
+									<div class="mt-2.5 flex items-center justify-between overflow-hidden leading-snug">
+										<div class="flex items-center overflow-hidden">
+											<h4 class="truncate font-semibold group-hover:underline dark:text-white">${release.title}</h4>
+											${release.pypi ? `<div class="outer_svg">${pypi_svg}</div>` : ""}
+										</div>
+										<div class="flex h-full items-start pt-2.5"></div>
+									</div>
+								</div>
+							</a>
+							<div class="desc absolute bottom-2.5 max-w-full truncate pl-4 pr-4 text-sm text-gray-500 dark:text-gray-400">
+								<span class="discussion-num">${release['desc']}</span>
+							</div>
+						</div>
+					</div>`
+
+					commitNode.appendChild(tooltip);
+					commitTree.appendChild(commitNode);
+				}
 			}
 
 			document.onreadystatechange = function (e) {
@@ -113,8 +167,8 @@
 
 					// Check for system dark mode preference
 					if (
-						window.matchMedia &&
-						window.matchMedia("(prefers-color-scheme: dark)").matches
+							window.matchMedia &&
+							window.matchMedia("(prefers-color-scheme: dark)").matches
 					) {
 						document.documentElement.classList.add("dark");
 					}
@@ -123,6 +177,7 @@
 		</script>
 	</head>
 	<body class="dark:bg-gray-900 dark:text-white">
+	<div class="commit-timeline">
 		<div class="flex flex-col p-12 md:p-32 font-sans">
 			<h1 class="text-2xl font-bold mb-4">Transformers Discussions</h1>
 			<h2 class="dark:text-gray-200">
@@ -130,9 +185,9 @@
 			</h2>
 			<p class="text-gray-500 dark:text-gray-400">
 				<a
-					href="https://huggingface.co/spaces/transformers-discussion-board/Support/discussions"
-					class="underline hover:text-gray-800 dark:hover:text-gray-300"
-					>Go to the community tab</a
+						href="https://huggingface.co/spaces/transformers-discussion-board/Support/discussions"
+						class="underline hover:text-gray-800 dark:hover:text-gray-300"
+				>Go to the community tab</a
 				>
 				to get started
 			</p>
@@ -142,11 +197,11 @@
 
 		<div class="hidden">
 			<div
-				id="template-discussion"
-				class="relative h-[4.25rem] w-full overflow-hidden"
+					id="template-discussion"
+					class="relative h-[4.25rem] w-full overflow-hidden"
 			>
 				<a
-					class="group flex h-full items-stretch overflow-hidden rounded-lg border border-gray-100 dark:border-gray-800"
+						class="group flex h-full items-stretch overflow-hidden rounded-lg border border-gray-100 dark:border-gray-800"
 					href="https://huggingface.co/spaces/huggingface/HuggingDiscussions/discussions/14"
 				>
 					<div
@@ -294,5 +349,6 @@
 				</div>
 			</div>
 		</div>
+		<div class="commit-tree" id="commit-tree"></div>
 	</body>
 </html>

style.css

@@ -26,3 +26,101 @@ p {
 .card p:last-child {
 	margin-bottom: 0;
 }
+
+.commit-timeline {
+    display: flex;
+    flex-direction: row;
+}
+
+/* Container for the vertical line and nodes */
+.commit-tree {
+    position: absolute;
+    height: 42.5rem; /* Full viewport height */
+    width: calc(100% - 600px);
+    bottom: 80px;
+    animation: fade-in ease 1s;
+}
+
+@media (width <= 1300px) {
+    .commit-tree {
+        visibility: hidden;
+        opacity: 0;
+    }
+}
+
+/* Vertical line using pseudo-element */
+.commit-tree::before {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background: linear-gradient(rgb(17 24 39 / var(--tw-bg-opacity, 1)) 0%, #e5e7eb 50%, #e5e7eb 100%);
+}
+
+/* Commit node styling */
+.commit-node {
+    position: absolute;
+    right: 0;
+    transform: translateX(4px);
+    width: 12px;
+    height: 12px;
+    background-color: #e5e7eb; /* Blue circle */
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 1;
+    display: flex;
+    flex-direction: row;
+}
+
+.outer_svg {
+
+}
+
+/* Tooltip styling */
+.tooltip {
+    width: 350px;
+    text-align: center;
+    border-radius: 6px;
+    padding: 8px;
+    position: absolute;
+    z-index: 2;
+    left: 120%; /* Position to the right of the node */
+    top: 50%;
+    transform: translateY(-50%);
+    white-space: nowrap;
+    font-size: 14px;
+    transition: all 0.3s;
+}
+
+.tooltip:hover {
+    width: 500px;
+}
+
+.tooltip .title {
+    height: 2.6rem;
+    transition: all 0.3s;
+}
+
+
+.tooltip:hover .title {
+    height: 4.25rem;
+}
+
+.tooltip .desc {
+    visibility: hidden;
+    transition: all 0.3s;
+    opacity: 0;
+}
+
+.tooltip:hover .desc {
+    visibility: visible;
+    opacity: 1;
+}
+
+@keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+