diff --git a/webapp/src/components/ad/ArturiaCard.vue b/webapp/src/components/ad/ArturiaCard.vue new file mode 100644 index 0000000..b59b6af --- /dev/null +++ b/webapp/src/components/ad/ArturiaCard.vue @@ -0,0 +1,213 @@ + + + + + diff --git a/webapp/src/components/ad/AudiofanzineCard.vue b/webapp/src/components/ad/AudiofanzineCard.vue new file mode 100644 index 0000000..fb35e0b --- /dev/null +++ b/webapp/src/components/ad/AudiofanzineCard.vue @@ -0,0 +1,242 @@ + + + + + diff --git a/webapp/src/components/ad/VpnBanner.vue b/webapp/src/components/ad/VpnBanner.vue new file mode 100644 index 0000000..e0b9016 --- /dev/null +++ b/webapp/src/components/ad/VpnBanner.vue @@ -0,0 +1,265 @@ + + + + + diff --git a/webapp/src/components/app/ProjectSelector.vue b/webapp/src/components/app/ProjectSelector.vue index 835b478..d730af2 100644 --- a/webapp/src/components/app/ProjectSelector.vue +++ b/webapp/src/components/app/ProjectSelector.vue @@ -12,6 +12,7 @@ import type { TrashedProjectListItem, } from "../../lib/utils/types"; import TabBar, { type TabItem } from "../shared/TabBar.vue"; +import VpnBanner from "../ad/VpnBanner.vue"; type Tab = "mine" | "favorites" | "discover" | "trash"; @@ -602,6 +603,9 @@ onMounted(() => loadProjects()); /> +
+ +
diff --git a/webapp/src/components/app/timeline/TimelineView.vue b/webapp/src/components/app/timeline/TimelineView.vue index 90f1026..f3b694b 100644 --- a/webapp/src/components/app/timeline/TimelineView.vue +++ b/webapp/src/components/app/timeline/TimelineView.vue @@ -49,6 +49,7 @@ import EmptyState from "../../ui/EmptyState.vue"; import FormField from "../../ui/FormField.vue"; import BaseInput from "../../ui/BaseInput.vue"; import { useToast } from "../../../composables/useToast"; +import VpnBanner from "../../ad/VpnBanner.vue"; const emit = defineEmits<{ ( @@ -1264,6 +1265,8 @@ defineExpose({ + + diff --git a/webapp/src/stores/adsStore.ts b/webapp/src/stores/adsStore.ts new file mode 100644 index 0000000..f79d90d --- /dev/null +++ b/webapp/src/stores/adsStore.ts @@ -0,0 +1,33 @@ +import { defineStore } from "pinia"; +import { ref } from "vue"; + +const STORAGE_KEY = "display-ads"; + +export const useAdsStore = defineStore("ads", () => { + const isEnabled = ref(localStorage.getItem(STORAGE_KEY) !== "false"); + + const enable = () => { + isEnabled.value = true; + localStorage.setItem(STORAGE_KEY, "true"); + }; + + const disable = () => { + isEnabled.value = false; + localStorage.setItem(STORAGE_KEY, "false"); + }; + + const toggle = () => { + if (isEnabled.value) { + disable(); + } else { + enable(); + } + }; + + return { + isEnabled, + enable, + disable, + toggle, + }; +}); diff --git a/webapp/src/styles/base.css b/webapp/src/styles/base.css index c6f93f1..b91f76e 100644 --- a/webapp/src/styles/base.css +++ b/webapp/src/styles/base.css @@ -302,4 +302,4 @@ input[type="submit"]:disabled { padding: 40px 24px; max-width: 1200px; width: 100%; -} \ No newline at end of file +} diff --git a/webapp/src/styles/blog.css b/webapp/src/styles/blog.css index ee9cb7d..8aa61e2 100644 --- a/webapp/src/styles/blog.css +++ b/webapp/src/styles/blog.css @@ -890,7 +890,7 @@ } .tag-suggestion-item:hover { - background: var(--color-accent); + background: var(--color-accent-pale); color: var(--color-accent-hover); }