Add wikipedia.de banner

Just for testing compilation and loading, the banner is an exact copy of
the desktop banner

banners/wpde_desktop/banner_ctrl.js

@@ -0,0 +1,27 @@
+// eslint-disable-next-line no-unused-vars
+import style from './styles/styles.pcss';
+
+import { BannerLoader } from '../shared/vue_banner_loader';
+import { createTrackingData } from '../shared/tracking_data';
+import { getTrackingIds } from '../shared/tracking_ids';
+import Translations from '../shared/messages/de';
+import Banner from './components/Banner.vue';
+
+import { LocalImpressionCount } from '../shared/local_impression_count';
+
+const bannerContainer = document.getElementById( 'WMDE-Banner-Container' );
+
+const trackingIds = getTrackingIds( bannerContainer );
+const trackingData = createTrackingData( trackingIds.bannerName );
+const bannerPresenter = new BannerLoader(
+	trackingData,
+	bannerContainer.dataset.delay || 7500,
+	new LocalImpressionCount( trackingIds.bannerName )
+);
+
+bannerPresenter.load(
+	Banner,
+	bannerContainer,
+	Translations,
+	{}
+);

banners/wpde_desktop/banner_ctrl.ts

@@ -0,0 +1,7 @@
+import './styles/styles.scss';
+import { createVueApp } from '@src/create_vue_app';
+
+import MainBanner from './components/MainBanner.vue';
+
+const app = createVueApp( MainBanner, { greeting: 'Hello' } );
+app.mount( '#WMDE-Banner-Container' );

banners/wpde_desktop/components/MainBanner.vue

@@ -0,0 +1,31 @@
+<template>
+	<div class="wmde-banner">
+		<ButtonClose />
+		<div>WMDE Banner with a message: <span class="wmde-banner-greeting"> {{greeting}} {{planet}}</span></div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
+
+interface Props {
+	greeting?: string
+}
+
+withDefaults( defineProps<Props>(), {
+	greeting: 'Ahoy'
+} );
+
+const planet = ref<string>( 'World' );
+</script>
+
+<style>
+.wmde-banner {
+	position: relative;
+	font-size: 200%;
+	color: green;
+	padding: 15px;
+	border: solid 2px darkgreen;
+}
+</style>

banners/wpde_desktop/events.js

@@ -0,0 +1,9 @@
+export const BannerEvents = Object.freeze( {
+	BANNER_READY: 'BANNER_READY',
+	BANNER_NOT_SHOWN: 'BANNER_NOT_SHOWN',
+	BANNER_CLOSED: 'BANNER_CLOSED',
+	TRANSITION_FINISHED: 'BANNER_NOT_SHOWN',
+	BANNER_DIMENSIONS: 'BANNER_DIMENSIONS'
+} );
+
+export default BannerEvents;

banners/wpde_desktop/styles/styles.scss

@@ -0,0 +1,14 @@
+// This is the file where we import the theme-specifc component styles
+
+@import "variables";
+
+// TODO import theme files for this banner (including only the used components)
+
+// This is just an example, please remove
+.wmde-banner {
+  background: #ffffff;
+
+  &-greeting:hover {
+    opacity: 0.5;
+  }
+}

banners/wpde_desktop/styles/variables.scss

@@ -0,0 +1,12 @@
+// Put channel-specific variable overrides here and prune the file regularly!
+// Variable-based styling should be done in the theme!
+
+/*
+Always work 'mobile first':
+	do not use @media ( max-width: $breakpoint-x )
+	always use @media ( min-width: $breakpoint-x )
+*/
+$breakpoint-s: 1024px;
+$breakpoint-m: 1090px;
+$breakpoint-l: 1300px;
+$breakpoint-xl: 1580px;

campaign_info.toml

@@ -15,18 +15,17 @@ pagename = "B23WMDE_00_230202_ctrl"
 tracking = "org-00-230202-ctrl"
 
 
-# commented out until desktop banner works
+# desktop banners on wikipedia.de
+[wikipediade]
+name = "C23_WPDE_00"
+campaign_tracking = "wpde-00-230202"
+preview_link = "/wikipedia.de?devbanner={{banner}}&banner=dev-mode-wpde"
+wrapper_template = "wikipedia_de"
+wrap_in_wikitext = false
+preview_url = 'https://www.wikipedia.de/?banner={{PLACEHOLDER}}'
 
-# [wikipediade]
-# name = "C23_WPDE_00"
-# campaign_tracking = "wpde-00-230202"
-# preview_link = "/wikipedia.de?devbanner={{banner}}&banner=dev-mode-wpde"
-# wrapper_template = "wikipedia_de"
-# wrap_in_wikitext = false
-# preview_url = 'https://www.wikipedia.de/?banner={{PLACEHOLDER}}'
-
-# [wikipediade.banners.ctrl]
-# filename = "./banners/wpde_desktop/banner_ctrl.ts"
-# pagename = "B23WPDE_00_ctrl"
-# tracking = "wpde-00-230202-ctrl"
+[wikipediade.banners.ctrl]
+filename = "./banners/wpde_desktop/banner_ctrl.ts"
+pagename = "B23WPDE_00_ctrl"
+tracking = "wpde-00-230202-ctrl"