Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add an offline mode for WPDE banners #570

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add an offline mode for WPDE banners #570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,3 +160,4 @@ remove the right `@use` statements for the component theme files to
* [B22_WMDE_local_prototype](https://meta.wikimedia.org/wiki/Special:CentralNoticeBanners/edit/B22_WMDE_local_prototype) on CentralNotice
* [dev-mode-wpde](https://github.com/wmde/wikipedia.de-banners/blob/master/dev-mode-wpde.js) on the [`wmde/wikipedia.de-banners` repository](https://github.com/wmde/wikipedia.de-banners) on GitHub.

For offline previewing of banners for wikipedia.de (when the banner server is not available), you can use the URL http://localhost:8084/wpde-offline?devbanner=YOUR_BANNER_NAME (replacing the placeholder by copy-pasting from `campaign_info.toml`). In the future, we might add an "offline mode" that's integrated into the dashboard and works without proxying.
3 changes: 3 additions & 0 deletions dashboard/wpde-offline/Wikipedia-logo-v2-de.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
109 changes: 109 additions & 0 deletions dashboard/wpde-offline/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<title>Wikipedia, die freie Enzyklop&auml;die</title>
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
</head>

<body>
<div id="WMDE-Banner-Container"></div>
<div id="main">
<div id="mainbox">
<div class="wikipedia-logo">
<a href="https://de.wikipedia.org/"><img src="Wikipedia-logo-v2-de.svg" title="Hauptseite der Wikipedia" alt="Wikipedia - Die freie Enzyklopädie"/></a>
</div>
<search id="maincontent" title="Wikipedia durchsuchen">
<div id="form">
<form id="frmSearch" class="search-form" action="#" method="get" accept-charset="UTF-8">
<input type="text" id="txtSearch" name="q" alt="Search Criteria" autocomplete="off" aria-label="Wikipedia durchsuchen"/>
<input type="hidden" name="l" value="de" />
<input type="hidden" name="e" value="wikipedia" /><input type="hidden" name="s" value="suchen" />
<button type="submit" id="cmdSearch" class="button-ooui-like" name="b">
<span class="search-icon"></span><span class="sr-only">Suchen</span>
</button>
</form>
</div>
<div id="search_suggest"></div>
</search>
</div>
<footer class="page-footer" title="Über Wikimedia Deutschland e. V.">
<div class="page-footer-columns">
<div class="page-footer-column bank-info">
<h2>Spendenkonto</h2>
<ul>
<li><label for="selection-input-iban">IBAN:</label><div class="selection-input selection-input-iban">
<span class="selection-input-text">DE09 3702 0500 0003 2873 00</span>
<input class="selection-input-field" id="selection-input-iban" readonly type="text" value="DE09370205000003287300" aria-label="Drücken Sie Steuerungstaste-c oder Befehlstaste-c, um die IBAN zu kopieren."/>
</div>
</li>
<li><label for="selection-input-bic">BIC:</label><div class="selection-input selection-input-bic">
<span class="selection-input-text">BFSWDE33BER</span>
<input class="selection-input-field" id="selection-input-bic" readonly type="text" value="BFSWDE33BER" aria-label="Drücken Sie Steuerungstaste-c oder Befehlstaste-c, um die BIC zu kopieren."/>
</div>
</li>
<li><label for="selection-input-name">Kontoinhaber:</label><div class="selection-input selection-input-name">
<span class="selection-input-text">Wikimedia e.V.</span>
<input class="selection-input-field" id="selection-input-name" readonly type="text" value="Wikimedia e.V." aria-label="Drücken Sie Steuerungstaste-c oder Befehlstaste-c, um den Namen des Kontoinhabers zu kopieren."/>
</div>
</li>
</ul>
<a href="https://spenden.wikimedia.de" class="button">Online Spenden</a>
</div>

<div class="page-footer-column about">
<h2>Wikimedia Deutschland e. V.</h2>
<p>Wir sind der gemeinnnützige Verein hinter der Wikipedia und unterstützen die Ehrenamtlichen, sichern und entwickeln die technische Infrastruktur und setzen uns für den freien Zugang zu Wissen ein.</p>
<a class="button button-hollow" href="https://www.wikimedia.de/">Wikimedia kennenlernen</a>
<a class="privacy-link" href="https://www.wikimedia.de/datenschutz/">Datenschutz</a> | <a class="privacy-link" href="https://www.wikimedia.de/impressum/">Impressum</a>
</div>
</div>

</footer>
</div>

<script>
// replacement for stats.js from bruce
window.campaignParameters = {
campaignProjection: {
donationTarget: 9700000,
updatedAt: '2024-10-08',
donationSumBase: 7183034,
donationCountBase: 271072,
donationAmountPerMinute: 104.314,
donationCountPerMinute: 3.450,
averageAmountPerDonation: 22.25
},
millionImpressionsPerDay: 5,
startDate: '2024-10-01',
endDate: '2024-12-31',
numberOfMembers: 73832,
isLateProgress: false,
thankYouCampaign: {
numberOfDonors: 350000,
progressBarPercentage: 100
}
};

// drop-in replacement for dev-mode-wpde.js "banner" from bruce, without jQuery

function getDevbanner() {
return location.search.match(/devbanner=([-\w]+)/)[1] || '';
}

addEventListener('DOMContentLoaded', function() {
var container = document.querySelector('body');
var hostPort = window.location.host;
var bannerName = getDevbanner();
if ( bannerName ) {
var script = document.createElement('script');
script.src = '//' + hostPort + '/' + bannerName + '.js';
container.append( script );
}
});

</script>
</body>
</html>

Loading
Loading