Added banner and ml5 version fix

ml5js · Jul 15, 2024 · f9db84b · f9db84b
1 parent 7eb1314
commit f9db84b
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 7 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -19,13 +19,13 @@ The fastest way to get started exploring the creative possibilities of ml5.js ar
 3. Alternatively, you can copy and paste the CDN link to the ml5.js library:
 
   ```html
-  <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
+  <script src="https://unpkg.com/ml5@0.12.2/dist/ml5.min.js"></script>
   ```
 
 ***
 #### Quickstart: Plain JavaScript
 
-Reference the [latest version](https://unpkg.com/ml5@latest/dist/ml5.min.js) of ml5.js using a script tag in an HTML file as below:
+Reference the [latest version](https://unpkg.com/ml5@0.12.2/dist/ml5.min.js) of ml5.js using a script tag in an HTML file as below:
 
 
 In an **index.html** file, copy and paste the following and open up that file in your web browser.
@@ -36,7 +36,7 @@ In an **index.html** file, copy and paste the following and open up that file in
   <head>
     <title>Getting Started with ml5.js</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
+    <script src="https://unpkg.com/ml5@0.12.2/dist/ml5.min.js"></script>
   </head>
 
   <body>
@@ -69,7 +69,7 @@ In an **index.html** file, copy and paste the following and open up that file in
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/addons/p5.sound.min.js"></script>
     <!-- ml5 -->
-    <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
+    <script src="https://unpkg.com/ml5@0.12.2/dist/ml5.min.js"></script>
   </head>
 
   <body>

diff --git a/docs/index.html b/docs/index.html
@@ -45,8 +45,41 @@
 				height: 28px;
 			}
 
+			.ArchiveBanner {
+				background-color: #f0f0f0;
+				color: #333;
+				padding: 0.75rem 1rem;
+				text-align: center;
+				font-size: 0.9rem;
+				border-top: 1px solid #d6d6d6;
+				border-bottom: 1px solid #d6d6d6;
+				position: fixed;
+				top: 60px;
+				width: 100%;
+				z-index: 999;
+				cursor: pointer; /* Add cursor style to indicate clickability */
+				transition: background-color 0.3s ease; /* Smooth transition for hover effect */
+			}
+
+			.ArchiveBanner:hover {
+				background-color: #e0e0e0; /* Slightly darker background on hover */
+			}
+
+			.ArchiveBanner p {
+				margin: 0;
+			}
+
+			.ArchiveBanner a {
+				color: #a256ff;
+				text-decoration: underline;
+			}
+
 			.sidebar {
-				margin: 80px 0 0 0;
+				margin: 120px 0 0 0;
+			}
+
+			.content {
+				margin-top: 120px;
 			}
 
 			.Menu__Top__Menu {
@@ -69,6 +102,10 @@
 				.Menu__Top__Menu__Item {
 					display: none !important;
 				}
+				.ArchiveBanner {
+					font-size: 0.8rem;
+					padding: 0.5rem 0.75rem;
+				}
 			}
 			@media screen and (min-width: 600px) {
 				.Menu__Top {
@@ -113,6 +150,9 @@
 			</div>
 		</nav>
 
+		<div id="archiveBanner" class="ArchiveBanner">
+			<p>This site is archived. Visit the <a href="https://ml5js.org">new ml5.js website</a> at ml5js.org 🎉</p>
+		</div>
 		<div id="app">loading...</div>
 		<script>
 			window.$docsify = {
@@ -124,10 +164,21 @@
 				},
 				subMaxLevel: 2,
 				relativePath: true,
+				topMargin: 210,
 				maxLevel: 2,
 				mergeNavbar: true,
 				auto2top: true,
 			};
+
+	document.addEventListener('DOMContentLoaded', function () {
+		var archiveBanner = document.getElementById('archiveBanner');
+		archiveBanner.addEventListener('click', function (event) {
+			// Prevent the default action for the anchor tag inside the banner
+			event.preventDefault();
+			// Open the new ml5.js website in a new tab
+			window.open('https://docs.ml5js.org', '_blank');
+		});
+	});
 		</script>
 		<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
 		<!-- Plugins -->
@@ -142,4 +193,4 @@
 		<!-- Pagination -->
 		<script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
 	</body>
-</html>
+</html>
diff --git a/docs/tutorials/hello-ml5.md b/docs/tutorials/hello-ml5.md
@@ -71,7 +71,7 @@ Here you can see that we read in the javascript libraries. This includes our ml5
   <title>Image classification using MobileNet and p5.js</title>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
-  <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
+  <script src="https://unpkg.com/ml5@0.12.2/dist/ml5.min.js"></script>
 </head>
 
 <body>