Update v1.0.28

amastaneh · Jun 5, 2024 · ad8d28d · ad8d28d
1 parent 5a9fe1c
commit ad8d28d
Show file tree

Hide file tree

Showing 14 changed files with 428 additions and 10 deletions.
diff --git a/.github/workflows/cicd-website.yml b/.github/workflows/cicd-website.yml
@@ -37,7 +37,7 @@ jobs:
         uses: actions/upload-pages-artifact@v3
         with:
           # Upload entire repository
-          path: '.'
+          path: 'website'
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+    "liveServer.settings.port": 5001,
+    "liveServer.settings.root": "/website/",
+}
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -28,6 +28,9 @@
 			"type": "module"
 		}
 	],
+	"content_security_policy": {
+		"extension_pages": "script-src 'self'; object-src 'self'"
+	},
 	"icons": {
 		"128": "images/icon-128.png",
 		"48": "images/icon-48.png"

diff --git a/extension/src/popup.css b/extension/src/popup.css
@@ -0,0 +1,53 @@
+/* Custom styles for the switch */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 34px;
+    height: 20px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: 0.4s;
+    border-radius: 34px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 14px;
+    width: 14px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: 0.4s;
+    border-radius: 50%;
+}
+
+input:checked + .slider {
+    background-color: #2196f3;
+}
+
+input:checked + .slider:before {
+    transform: translateX(14px);
+}
+
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
diff --git a/extension/src/popup.html b/extension/src/popup.html
@@ -1,20 +1,86 @@
 <!DOCTYPE html>
 <html lang="en">
-	
+
 <head>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta charset="utf-8" />
 	<title>GitHub Prime</title>
-	<style>
-		body {
-			font-family: 'Nato Sans', Roboto, Arial, sans-serif;
-		}
-	</style>
+
+	<!-- ============= CSS ============= -->
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+		integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+		crossorigin="anonymous" referrerpolicy="no-referrer" />
+	<link rel="stylesheet" href="popup.css" />
+
+	<!-- ============= JS ============= -->
+	<script src="popup.js"></script>
 </head>
 
-<body>
-	<h1>GitHub Prime</h1>
-	<p>Enhance your GitHub experience with advanced features and customization options.</p>
+<body class="w-96">
+	<header class="flex items-center justify-between mb-4 w-full">
+		<div class="flex items-center w-full">
+			<i class="fas fa-star text-yellow-500 text-2xl"></i>
+			<h1 class="ml-2 text-xl font-bold">GitHub Prime</h1>
+		</div>
+	</header>
+	<hr class="mb-4 w-full w-96">
+
+	<div class="space-y-4 w-full">
+		<div class="flex justify-between items-center">
+			<p>Question 1111: sample lorem ipsum</p>
+			<label class="switch">
+				<label for="question1">Question 1: sample lorem ipsum</label>
+				<input type="checkbox" id="question1" data-question="question1" />
+				<span class="slider round"></span>
+			</label>
+		</div>
+		<div class="flex justify-between items-center">
+			<p>Question 2: sample lorem ipsum</p>
+			<label class="switch">
+				<input type="checkbox" data-question="question2" />
+				<span class="slider round"></span>
+			</label>
+		</div>
+		<div class="flex justify-between items-center">
+			<p>Question 3: sample lorem ipsum</p>
+			<label class="switch">
+				<input type="checkbox" data-question="question3" />
+				<span class="slider round"></span>
+			</label>
+		</div>
+		<div class="flex justify-between items-center">
+			<p>Question 4: sample lorem ipsum</p>
+			<label class="switch">
+				<input type="checkbox" data-question="question4" />
+				<span class="slider round"></span>
+			</label>
+		</div>
+		<div class="flex justify-between items-center">
+			<p>Question 5: sample lorem ipsum</p>
+			<label class="switch">
+				<input type="checkbox" data-question="question5" />
+				<span class="slider round"></span>
+			</label>
+		</div>
+	</div>
+
+	<hr class="my-4 w-full">
+
+	<footer class="flex justify-between items-center w-full">
+		<p class="text-sm">&copy; 2024 GitHub Prime</p>
+		<div class="flex space-x-4">
+			<a href="https://githubprime.com" class="text-blue-500">
+				<i class="fas fa-home"></i>
+			</a>
+			<a href="https://github.com" class="text-black">
+				<i class="fab fa-github"></i>
+			</a>
+			<a href="https://twitter.com" class="text-blue-400">
+				<i class="fab fa-twitter"></i>
+			</a>
+		</div>
+	</footer>
+
 </body>
 
 </html>
diff --git a/extension/src/popup.js b/extension/src/popup.js
@@ -0,0 +1,11 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const switches = document.querySelectorAll('.switch input[type="checkbox"]');
+    switches.forEach(switchEl => {
+        const question = switchEl.getAttribute('data-question');
+        const storedValue = localStorage.getItem(question) === 'true';
+        switchEl.checked = storedValue;
+        switchEl.addEventListener('change', function () {
+            localStorage.setItem(question, this.checked);
+        });
+    });
+});
diff --git a/website/images/github-prime-logo-510-t.png b/website/images/github-prime-logo-510-t.png
diff --git a/website/images/github-prime-logo-510-w.png b/website/images/github-prime-logo-510-w.png
diff --git a/website/images/icon-128.png b/website/images/icon-128.png
diff --git a/website/images/icon-48.png b/website/images/icon-48.png
diff --git a/website/index.html b/website/index.html
@@ -0,0 +1,143 @@
+<html lang="en">
+
+<head>
+    <!-- ============= Meta ============= -->
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>GitHub Prime - Enhance Your GitHub Experience</title>
+
+    <meta name="title" content="GitHub Prime - Enhance Your GitHub Experience">
+    <meta name="robots" content="index, follow">
+    <meta name="language" content="English">
+    <meta name="author" content="GitHub Prime">
+    <meta name="keywords" content="GitHub, Chrome extension, developer tools, productivity, customization">
+    <meta name="description"
+        content="GitHub Prime is a powerful Chrome extension designed to enhance your GitHub experience with advanced features 
+        and customization options. Boost your productivity with seamless integration and intuitive tools for developers.">
+
+    <meta property="og:title" content="GitHub Prime - Enhance Your GitHub Experience">
+    <meta property="og:site_name" content="GitHub Prime">
+    <meta property="og:url" content="https://GitHubPrime.com">
+    <meta property="og:type" content="website">
+    <meta property="og:image" content="/images/icon-128.png">
+    <meta property="og:description"
+        content="GitHub Prime is a powerful Chrome extension designed to enhance your GitHub experience with advanced features 
+        and customization options. Boost your productivity with seamless integration and intuitive tools for developers.">
+
+    <meta name="twitter:title" content="GitHub Prime - Enhance Your GitHub Experience" />
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@githubprime">
+    <meta name="twitter:creator" content="@githubprime">
+    <meta name="twitter:image" content="/images/icon-128.png">
+
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="msapplication-TileColor" content="#ffffff">
+
+    <link rel="shortcut icon" href="/images/icon-128.png" type="image/x-icon">
+    <link rel="apple-touch-icon" sizes="128x128" href="/images/icon-128.png">
+    <link rel="icon" type="image/png" sizes="128x128" href="/images/icon-128.png">
+    <link rel="icon" type="image/png" sizes="48x48" href="/images/icon-48.png">
+    <link rel="manifest" href="site.webmanifest">
+
+    <!-- ============= CSS ============= -->
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css"
+        integrity="sha512-TktJbycEG5Van9KvrSHFUcYOKBroD7QCYkEe73HAutODCw9QTFcvF6fuxioYM1h6THNudK1GjVidazj6EslK4A=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+        integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="/main.css" />
+
+    <!-- ============= Scripts ============= -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/all.min.js"
+        integrity="sha512-u3fPA7V8qQmhBPNT5quvaXVa1mnnLSXUep5PS1qo5NRzHwG19aHmNJnj1Q8hpA/nBWZtZD4r4AX6YOt5ynLN2g=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="/main.js"></script>
+
+</head>
+
+<body class="flex flex-col items-center justify-center min-h-screen px-4 py-8">
+    <div class="bg-foggy"></div>
+
+    <!-- ============= Header ============= -->
+    <header>
+        <img class="mx-auto" src="/images/github-prime-logo-510-t.png" alt="GitHub Prime" width="256" height="256" />
+        <h1 class="text-gray-900 text-4xl font-bold my-5">
+            GitHub Prime
+        </h1>
+    </header>
+
+    <!-- ============= Main ============= -->
+    <main class="mx-auto text-center max-w-2xl">
+        <p class="text-gray-700 px-4">
+            GitHub Prime is a powerful Chrome extension designed to enhance your GitHub experience
+            with advanced features and customization options. Boost your productivity with seamless integration
+            and intuitive tools for developers.
+        </p>
+        <div class="flex flex-col md:flex-row justify-center gap-5 my-10 prime-color">
+            <a href=""
+                class="py-2 px-4 rounded border-2 prime-border border-opacity-50 hover:border-opacity-100 animate-border"
+                target="_blank" rel="noopener noreferrer">
+                Chrome Extension
+                <span class="inline-block border-2 prime-border border-outline rounded-full p-1">
+                    <i class="fab fa-chrome"></i>
+                </span>
+            </a>
+            <a href=""
+                class="py-2 px-4 rounded border-2 prime-border border-opacity-50 hover:border-opacity-100 animate-border"
+                target="_blank" rel="noopener noreferrer">
+                Edge Extension
+                <span class="inline-block border-2 prime-border border-outline rounded-full p-1">
+                    <i class="fab fa-edge"></i>
+                </span>
+            </a>
+            <a href=""
+                class="py-2 px-4 rounded border-2 prime-border border-opacity-50 hover:border-opacity-100 animate-border"
+                target="_blank" rel="noopener noreferrer">
+                Firefox Extension
+                <span class="inline-block border-2 prime-border border-outline rounded-full p-1">
+                    <i class="fab fa-firefox"></i>
+                </span>
+            </a>
+        </div>
+    </main>
+
+    <!-- ============= Footer ============= -->
+    <footer class="mx-auto text-center text-sm text-gray-400 my-5">
+        <a href="https://github.com/amastaneh/github-prime" class="me-3" aria-label="GitHub" title="GitHib" target="_blank" rel="noopener noreferrer">
+            <i class="fab fa-github"></i>
+        </a>
+        <a href="" class="me-5" aria-label="Twitter" title="Twitter" target="_blank" rel="noopener noreferrer">
+            <i class="fab fa-twitter"></i>
+        </a>
+        <small>© 2024 GitHub Prime. All rights reserved.</small>
+        <a class="github-fork-ribbon" href="https://github.com/amastaneh/github-prime" data-ribbon="Fork me on GitHub"
+            title="Fork me on GitHub">Fork me on GitHub</a>
+    </footer>
+
+
+    <!-- ============= Structured Data ============= -->
+    <script type="application/ld+json">
+        {
+            "@context": "https://schema.org",
+            "@type": "WebPage",
+            "name": "GitHub Prime",
+            "url": "https://GitHubPrime.com",
+            "description": "GitHub Prime is a powerful Chrome extension designed to enhance your GitHub experience with advanced features and customization options. Boost your productivity with seamless integration and intuitive tools for developers.",
+            "author": {
+                "@type": "Person",
+                "name": "GitHub Prime"
+            },
+            "publisher": {
+                "@type": "Organization",
+                "name": "GitHub Prime"
+            }
+        }
+    </script>
+</body>
+
+</html>