Merge pull request #1 from PromptExecution/feature/cookies

feature/cookies

Author: elasticdotventures

package.json

@@ -11,7 +11,10 @@
   "dependencies": {
     "path": "^0.12.7",
     "vue": "^3.3.8",
-    "vue-command": "^35.2.1"
+    "vue-command": "^35.2.1",
+    "vue-cookie-law": "github:elasticdotventures/vue-cookie-law",
+    "vue-cookie-next": "^1.3.0",
+    "vue-gtag": "^2.0.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.0",

pysrc/evlib/build.py

@@ -1,2 +1,25 @@
+import io
+import base64
+
+from PIL import Image
+
+# src/evlib/build.py
 def main():
-    print("hello")
+    print("hello world!")  # output: hello world!
+
+    # Load the image from file
+    img_path = './public/PromptExecution-LogoV2-semi-transparent.webp'
+    img = Image.open(img_path)
+
+    img = img.resize((256, 256), resample=Image.LANCZOS)
+    ico_buffer = io.BytesIO()
+    # img.save(ico_buffer, format='ICO', sizes=[(256, 256)])
+
+    img.save('./public/favicon.ico', format='ICO', sizes=[(256, 256)])
+
+
+    # # Convert to base64
+    # base64_ico = base64.b64encode(ico_buffer.getvalue()).decode()
+
+    # # Output the base64 encoded favicon
+    # print(base64_ico)

src/App.vue

@@ -1,6 +1,20 @@
+<!-- src/App.vue -->
 <script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import CookieBanner from './components/CookieBanner.vue';
+
 import CommandLineInterface from './components/CommandLineInterface.vue';
 import PromptExecutionLogo from './components/PromptExecutionLogo.vue';
+
+const showBanner = ref(true); // Or whatever logic you need to show/hide the banner
+
+// Example of how you might control the visibility of the banner
+// This is just a placeholder logic, adjust according to your needs
+onMounted(() => {
+  // Logic to determine if the banner should be shown
+  // For example, check if the user has already accepted cookies
+  // showBanner.value = ...;
+});
 import TheFooter from './components/TheFooter.vue';
 
 </script>
@@ -11,6 +25,8 @@ import TheFooter from './components/TheFooter.vue';
   </div>
   <CommandLineInterface  />
   <TheFooter />
+
+<CookieBanner v-if="showBanner" />
 </template>
 
 <style scoped>
@@ -23,9 +39,10 @@ import TheFooter from './components/TheFooter.vue';
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
-.logo.vue:hover {
+/* .logo.vue:hover {
   filter: drop-shadow(0 0 2em #42b883aa);
 }
+*/
 
 
 </style>

src/components/CommandLineInterface.vue

@@ -13,8 +13,9 @@
     <template #help-text>asdfasdf</template>
     <template #invert>true</template>
     <template #font></template>
+
   </vue-command>
-</div>
+  </div>
 </template>
 
 <script lang="ts">

src/components/CookieBanner.vue

@@ -0,0 +1,96 @@
+<!-- CookieBanner.vue -->
+<template>
+  <div class="cookie-banner">
+    <!-- Cookie banner content -->
+    🍪 Do you want milk with your cookies? 
+    <button @click="handleConsent" class="accept-button">Accept Cookies</button>
+    <button @click="handleReject" class="reject-button">Reject Cookies</button>
+
+</div>
+</template>
+
+<script lang="ts">
+import useCookies from '../useCookies'; 
+import { defineComponent, getCurrentInstance } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const instance = getCurrentInstance();
+    const gtag = instance?.appContext.config.globalProperties.$gtag;
+
+    const { allowCookies } = useCookies(gtag);
+
+    const handleConsent = () => {
+      allowCookies.value = true;
+      if (gtag) {
+        gtag.optIn();
+      }
+    };
+
+    const handleReject = () => {
+      allowCookies.value = false;
+      if (gtag) {
+        gtag.optOut();
+      }
+    };
+
+    return { handleConsent, handleReject };
+  }
+});
+</script>
+
+<style scoped>
+.cookie-banner {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #fff; /* Or any color you prefer */
+  color: #000;
+  padding: 8px;
+  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
+  animation: slideUp 0.5s ease-out;
+
+  /* Artistic Border */
+  border: 2px solid #000; /* Basic solid border, change as needed */
+  border-radius: 10px; /* Rounded corners */
+  /* You can add more artistic styles like border-image or box-shadow for more effects */
+
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.accept-button {
+  background-color: green;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  margin: 5px;
+  cursor: pointer;
+}
+
+.reject-button {
+  background-color: grey;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  margin: 5px;
+  cursor: pointer;
+}
+
+/* Optional: Add hover effects */
+.accept-button:hover {
+  background-color: darkgreen;
+}
+
+.reject-button:hover {
+  background-color: darkgrey;
+}
+</style>

src/components/CookiePolicy.vue

@@ -0,0 +1,19 @@
+<!-- CookiePolicy.vue -->
+<template>
+  <div>
+    <!-- Cookie policy content -->
+    We use Cookies. 
+    <input type="checkbox" v-model="allowCookies" /> Accept Cookies
+  </div>
+</template>
+
+<script lang="ts">
+import { useCookies } from '../useCookies'
+export default {
+  setup() {
+    const { allowCookies } = useCookies()
+    return { allowCookies }
+  }
+}
+</script>
+

src/main.ts

@@ -1,6 +1,26 @@
+// src/main.ts
+
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+// https://matteo-gabriele.gitbook.io/vue-gtag/
+import VueGtag from "vue-gtag";
+import { VueCookieNext } from 'vue-cookie-next';
+import { useCookies } from './useCookies'
 
 // An application instance won't render anything until its .mount() method is called
-createApp(App).mount('#app')
+const app = createApp(App);
+
+app
+.use(VueCookieNext)
+.use(VueGtag, {
+    config: { 
+      id: "G-XP9X9LHTDV",
+      params: {
+        anonymize_ip: true
+      }
+    },
+    enabled: false
+  })
+.provide('gtag', app.config.globalProperties.$gtag)
+.mount('#app')

src/useCookies.ts

@@ -0,0 +1,40 @@
+import { ref, watch, computed } from 'vue';
+import { useCookie } from 'vue-cookie-next';
+
+const allowCookies = ref<boolean>();
+
+export default function useCookies(gtag: any) {
+  const cookie = useCookie();
+
+  if (cookie.isCookieAvailable('cookies_consent')) {
+    allowCookies.value = cookie.getCookie('cookies_consent') === 'true';
+    gtag.optIn();
+  } else {
+    allowCookies.value = undefined;
+  }
+
+  watch(allowCookies, () => {
+    if (allowCookies.value != undefined) {
+      cookie.setCookie('cookies_consent', allowCookies.value.toString(), {
+        expire: new Date(2022, 1, 1),
+      });
+      if (allowCookies.value) {
+        gtag.optIn();
+      } else {
+        gtag.optOut();
+      }
+    }
+  });
+
+  const showBanner = computed(() => {
+    return allowCookies.value === undefined;
+  });
+
+  const okClicked = () => (allowCookies.value = true);
+
+  return {
+    allowCookies,
+    showBanner,
+    okClicked,
+  };
+}