GH Pages updates (#1442)

Update intro text Update cookie consent Remove workflow from docs Hide announce banner Co-authored-by: Cathal McCabe <cathal.mccabe@xilinx.com>
Xilinx · Mar 27, 2024 · c54cd87 · c54cd87
1 parent 720ff2f
commit c54cd87
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 69 deletions.
diff --git a/.github/workflows/python-package.yml b/.github/workflows/python-package.yml
diff --git a/_config.yml b/_config.yml
@@ -1,5 +1,5 @@
 title: PYNQ
 description: Python Productivity to AMD Adaptive Coompute platforms
 show_downloads: false
-google_analytics: G-MV1L2SX33L
-theme: jekyll-theme-cayman
+google_analytics:
+theme: jekyll-theme-cayman
diff --git a/_includes/custom_banner.html b/_includes/custom_banner.html
@@ -1,16 +1,8 @@
-<script>
-	// Function to close the announcement
-	function closeAnnouncement() {
-		document.getElementById("announcement").style.display = "none";
-	}
 
-	// Display the announcement initially
-	document.getElementById("announcement").style.display = "block";
-</script>
 
 <img src="./assets/images/231862217-A_AMD_Pynq_Lockup_RGB_Blk.svg#center" style="height: 150px;">
 
-<div id="announcement">
+<!--<div id="announcement">
 <span class="close-btn" onclick="closeAnnouncement()">&times;</span>
 <p style="font-weight: bold;">Attention PYNQ users!</p>
 <p>Discover the <a href="https://www.hackster.io/contests/amd2023">AMD Pervasive AI Developer Contest</a> for your chance to win cash prizes by creating AI projects on AMD platforms. Categories include Generative AI with AMD GPUs; Robotics AI with Kria KR260, where you can use <a href="https://github.com/Xilinx/Kria-PYNQ">Kria-PYNQ</a> and <a href="https://github.com/Xilinx/DPU-PYNQ">DPU-PYNQ</a>; PC AI with AMD Ryzen™ AI
@@ -19,7 +11,14 @@
 To participate visit the <a href="https://www.hackster.io/contests/amd2023">contest webpage</a> for guidelines and resources.
 </p>
 </div>
+<script>
+	function closeAnnouncement() {
+		document.getElementById("announcement").style.display = "none";
+	}
 
+	// Display the announcement initially
+	document.getElementById("announcement").style.display = "block";
+</script>-->
    <hr>
 	 <div class="menu_container">
 	  <nav>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -10,6 +10,7 @@
     <meta name="theme-color" content="#157878">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
+    <script src="assets/js/cookie-consent.js"></script>
     {% include head-custom.html %}
   </head>
   <body>
@@ -29,5 +30,8 @@
         <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span>
       </footer>
     </main>
+	<div id="cookie-consent" class="cookie-consent">
+    <p>This website uses cookies to ensure you get the best experience on our website. <a href="#" id="cookie-accept">Accept</a> | <a href="#" id="cookie-reject">Reject</a></p>
+	</div>
   </body>
 </html>
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -307,4 +307,53 @@ display: flex;
 	font-size: 20px;
 	font-weight: bold;
 	cursor: pointer;
+}
+
+/* Cookie consent */
+.cookie-consent-banner {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 10px;
+  background: #333;
+  color: #fff;
+  text-align: center;
+}
+
+.cookie-consent-banner p {
+  margin: 0;
+}
+
+.cookie-consent-banner button {
+  background: #fff;
+  color: #333;
+  border: none;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+/* Cookie consent banner styles */
+.cookie-consent {
+    display: none;
+    position: fixed;
+    bottom: 0; /* Updated to position at the bottom */
+    left: 0;
+    width: 100%;
+    background-color: #333;
+    color: #fff;
+    padding: 10px;
+    text-align: center;
+    z-index: 1000; /* Ensures the banner appears above other elements */
+}
+
+.cookie-consent a {
+    color: #4CAF50;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+/* Style the "Reject" button */
+.cookie-consent #cookie-reject {
+    color: #ff5252; /* Adjust the color as needed */
 }
diff --git a/assets/js/cookie-consent.js b/assets/js/cookie-consent.js
@@ -0,0 +1,68 @@
+// Copyright (C) 2023 Advanced Micro Devices, Inc. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+document.addEventListener('DOMContentLoaded', function () {
+    // Check if the user has already given consent
+	if (localStorage.getItem('cookieConsent')) {
+        // Initialize Google Analytics if consent is already given
+        initializeGoogleAnalytics();
+    }else{
+		// Show the cookie consent banner
+		showCookieConsent();
+	}
+});
+
+function showCookieConsent() {
+    var cookieConsent = document.getElementById('cookie-consent');
+
+    // Display the cookie consent banner
+    cookieConsent.style.display = 'block';
+
+    // Add event listener to the "Got it!" link
+    document.getElementById('cookie-accept').addEventListener('click', function () {
+        // Set a localStorage flag to remember user's consent
+        localStorage.setItem('cookieConsent', true);
+
+        // Hide the cookie consent banner
+        cookieConsent.style.display = 'none';
+
+        // Add Google Analytics tracking code
+        initializeGoogleAnalytics();
+    });
+
+    // Add event listener to the "Reject" link
+    document.getElementById('cookie-reject').addEventListener('click', function () {
+        // Set a localStorage flag to remember user's rejection
+        localStorage.setItem('cookieRejected', true);
+
+        // Hide the cookie consent banner
+        cookieConsent.style.display = 'none';
+    });
+}
+
+function initializeGoogleAnalytics() {
+	//console.log("Add Google Analytics tracking code");
+    // Add Google Analytics tracking code
+    (function (i, s, o, g, r, a, m) {
+        i['GoogleAnalyticsObject'] = r;
+        (i[r] =
+            i[r] ||
+            function () {
+                (i[r].q = i[r].q || []).push(arguments);
+            }),
+            (i[r].l = 1 * new Date());
+        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+        a.async = 1;
+        a.src = g;
+        m.parentNode.insertBefore(a, m);
+    })(
+        window,
+        document,
+        'script',
+        'https://www.googletagmanager.com/gtag/js?id=G-MV1L2SX33L',
+        'gtag'
+    );
+
+    gtag('js', new Date());
+    gtag('config', 'G-MV1L2SX33L');
+}
diff --git a/index.md b/index.md
@@ -105,7 +105,7 @@ function rotateImage(imageSources, imageId) {
 
 PYNQ&#8482; is an open-source project from AMD&#174; that makes it easier to use Adaptive Computing platforms.
 
-Using the Python language and libraries, designers can exploit the benefits of programmable logic and microprocessors to build more capable and exciting electronic systems.
+Using the Python language, Jupyter notebooks, and the huge ecosystem of Python libraries, designers can exploit the benefits of programmable logic and microprocessors to build more capable and exciting electronic systems.
 
 PYNQ can be used to create high performance applications with: