Skip to content

Commit

Permalink
docs: certified web pages (#14)
Browse files Browse the repository at this point in the history
* docs: certified webpages

* docs: change hero text
  • Loading branch information
pattan committed Sep 10, 2024
1 parent 9d83b16 commit a5ce0b0
Show file tree
Hide file tree
Showing 9 changed files with 11,798 additions and 4 deletions.
3 changes: 2 additions & 1 deletion .vitepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,8 @@ export default defineConfig({
{ text: "Home", link: "/" },
{ text: "About", link: "/about/index.md" },
{ text: "Docs", link: "/docs/index.md" },
{ text: "API", link: "/api/index.md" }
{ text: "API", link: "/api/index.md" },
{ text: "Certified ✨", link: "/certified/index.md" }
],
socialLinks: [
{
Expand Down
9 changes: 9 additions & 0 deletions .vitepress/theme/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -101,4 +101,13 @@ html.dark img[alt="light"] {

html.dark img[alt="dark"] {
display: block;
}

button.primary {
background-color: var(--vp-c-brand);
color: #FFF;
}

button.primary:hover {
background-color: var(--vp-hover);
}
27 changes: 27 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@
"@types/express": "^4.17.21",
"@types/jest": "^29.5.12",
"@types/jsdom": "^21.1.6",
"ag-grid-community": "32.1.0",
"ag-grid-vue3": "32.1.0",
"cypress": "^13.7.3",
"dotenv-cli": "^7.4.2",
"esbuild": "0.21.4",
Expand Down
5,766 changes: 5,766 additions & 0 deletions www/certified/ag-grid-theme-builder-dark.css

Large diffs are not rendered by default.

5,766 changes: 5,766 additions & 0 deletions www/certified/ag-grid-theme-builder-light.css

Large diffs are not rendered by default.

132 changes: 132 additions & 0 deletions www/certified/data.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
enum FORMATS {
MIDSCROLL = "Midscroll",
TOPSCROLL = "Topscroll"
}

enum BUYING_TYPE {
DIRECT_IO = "Direct I/O",
PROGRAMMATIC = "Programmatic"
}

// Interface for a single site
interface Site {
site: string;
siteUrl: string;
formatsMobile: FORMATS[];
formatsDesktop: FORMATS[];
buyingType?: BUYING_TYPE[];
}

// Interface for a publisher
interface Publisher {
country: string;
sites: Site[];
}

// Interface for the full structure
interface Publishers {
[publisherName: string]: Publisher;
}

const data = {
publishers: {
"Stampen Media": {
country: "Sweden",
sites: [
{
site: "Göteborgs Posten",
siteUrl: "https://www.gp.se",
formatsDesktop: [FORMATS.MIDSCROLL],
formatsMobile: [FORMATS.MIDSCROLL]
},
{
site: "Alingsås Tidning",
siteUrl: "https://www.alingsastidning.se",
formatsDesktop: [FORMATS.MIDSCROLL],
formatsMobile: [FORMATS.MIDSCROLL]
},
{
site: "Bohusläningen",
siteUrl: "https://www.bohuslaningen.se",
formatsDesktop: [FORMATS.MIDSCROLL],
formatsMobile: [FORMATS.MIDSCROLL]
},
{
site: "Hallands Nyheter",
siteUrl: "https://www.hn.se",
formatsDesktop: [FORMATS.MIDSCROLL],
formatsMobile: [FORMATS.MIDSCROLL]
},
{
site: "Hallandsposten",
siteUrl: "https://www.hallandsposten.se",
formatsDesktop: [FORMATS.MIDSCROLL],
formatsMobile: [FORMATS.MIDSCROLL]
},
{
site: "Kungsbackaposten",
siteUrl: "https://www.kungsbackaposten.se",
formatsDesktop: [FORMATS.MIDSCROLL],
formatsMobile: [FORMATS.MIDSCROLL]
},
{
site: "Kungälvsposten",
siteUrl: "https://www.kungalvsposten.se",
formatsDesktop: [FORMATS.MIDSCROLL],
formatsMobile: [FORMATS.MIDSCROLL]
},
{
site: "ST-tidningen",
siteUrl: "https://www.sttidningen.se",
formatsDesktop: [FORMATS.MIDSCROLL],
formatsMobile: [FORMATS.MIDSCROLL]
},
{
site: "Möndalsposten",
siteUrl: "https://www.molndalsposten.se",
formatsDesktop: [FORMATS.MIDSCROLL],
formatsMobile: [FORMATS.MIDSCROLL]
},
{
site: "Strömstadstidning",
siteUrl: "https://www.stromstadstidning.se",
formatsDesktop: [FORMATS.MIDSCROLL],
formatsMobile: [FORMATS.MIDSCROLL]
},
{
site: "TTELA",
siteUrl: "https://www.ttela.se",
formatsDesktop: [FORMATS.MIDSCROLL],
formatsMobile: [FORMATS.MIDSCROLL]
},
{
site: "Härrydaposten",
siteUrl: "https://www.harrydaposten.se",
formatsDesktop: [FORMATS.MIDSCROLL],
formatsMobile: [FORMATS.MIDSCROLL]
}
]
}
} as Publishers
};

export function getData() {
const transformedObjects: any[] = [];

// iterate over object keys
const hej = Object.entries(data.publishers).forEach(
([pubName, publisher]) => {
publisher.sites.forEach((site) => {
transformedObjects.push({
country: publisher.country,
publisherName: pubName,
site: site.site,
siteUrl: site.siteUrl,
formatsMobile: site.formatsMobile,
formatsDesktop: site.formatsDesktop
});
});
}
);
return transformedObjects;
}
91 changes: 91 additions & 0 deletions www/certified/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
---
aside: true
sidebar: true
layout: doc
---

<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import "./ag-grid-theme-builder-light.css";
import "./ag-grid-theme-builder-dark.css";
import { AgGridVue } from "ag-grid-vue3"; // Vue Data Grid Component
import { getData } from "./data";

const gridApi = shallowRef();
// Row Data: The data to be displayed.
const rowData = ref(getData());

// Column Definitions: Defines the columns to be displayed.
const colDefs = ref([
{
field: "country",
headerName: "Country",
headerClass: "header-product",
filter: true,
maxWidth: 120,
},
{ field: "publisherName", headerName: "Publisher", filter: true, },
{ field: "site", headerName: "Site", filter: true, },
{ field: "siteUrl", headerName: "Site URL", hide: true, },
{ field: "formatsMobile", headerName: "Formats Mobile", filter: true, },
{ field: "formatsDesktop", headerName: "Formats Desktop", filter: true, },
{ field: "buyingType", headerName: "Buying Type", filter: true, hide: true, },
]);

const defaultColDef = {
resizable: false,
};
const autoSizeStrategy = {
type: "fitGridWidth",
defaultMinWidth: 100,
};
const paginationPageSizeSelector = [5, 10, 20];
const pagination = true;
const paginationPageSize = 10;

const onBtnExport = () => {
gridApi.value.exportDataAsCsv({allColumns: true});
};
const onGridReady = (params) => {
gridApi.value = params.api;
};
</script>

# Certified AdVantage Implementations

Welcome to our showcase of certified webpages that have successfully integrated AdVantage, demonstrating the best practices in digital advertising. These websites have seamlessly adopted our platform's core components, ensuring a superior ad experience that aligns with their unique brand aesthetics.

Each of these sites has been thoroughly vetted to ensure they meet our stringent standards for performance, integration, and user experience. Explore the list below to see how leading publishers and advertisers are leveraging AdVantage to create engaging, impactful ad experiences.

<div class="flex justify-end" style="margin: 10px 0">
<button v-on:click="onBtnExport()" class="primary font-bold py-2 px-4 rounded inline-flex items-center text-xs">
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
<span>Download CSV export file</span>
</button>
</div>

<!-- The AG Grid component -->
<div id="myGrid" class="ag-theme-custom" style="height: 100%">
<ag-grid-vue
:rowData="rowData"
:columnDefs="colDefs"
:defaultColDef="defaultColDef"
:pagination="pagination"
:paginationPageSizeSelector="paginationPageSizeSelector"
:paginationPageSize="paginationPageSize"
@grid-ready="onGridReady"
style="height: 500px"></ag-grid-vue>
</div>

## Become a Certified AdVantage Partner

Interested in getting your site certified? Join our community of forward-thinking publishers and advertisers who are leading the way in digital advertising. Implement AdVantage on your site and submit a Github issue ticket with your integration for certification.

<button class="primary font-bold py-2 px-4 rounded inline-flex items-center text-xs" onclick="window.open('https://github.com/get-advantage/advantage/issues', '_blank')">Apply for Certification</button>

## Why Certification Matters

- Verified Quality: Certification ensures that your site’s implementation of AdVantage is optimized for performance, user experience, and brand alignment.
- Increased Trust: Being a certified AdVantage site signals to advertisers and users alike that your site adheres to the highest standards in digital advertising.

We are proud to recognize these exemplary implementations and look forward to adding more innovative sites to our list. For any questions or assistance with your integration, please join our [Slack channel](https://join.slack.com/t/get-advantage/shared_invite/zt-2gy6c4z4m-4~pIuwRfe8eqPM5H7iV9MQ)
6 changes: 3 additions & 3 deletions www/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@ layout: page
}

.homepage .hero-heading {
font-size: 55px
font-size: 47px
}

.homepage .hero-subheading {
Expand All @@ -263,8 +263,8 @@ layout: page
<div class="container">
<div class="hero">
<h1 class="hero-heading">
<span>High Impact Advertising</span>
<span class="heading-gradient">Reimagined</span>
<span>High Impact Infrastructure</span>
<span class="heading-gradient">Open-sourced</span>
</h1>
<p class="hero-subheading">
An open-source solution designed to <i>simplify</i>, <i>streamline</i> and <i>standardize</i> <br> <strong>high-impact</strong> display advertising on the web
Expand Down

0 comments on commit a5ce0b0

Please sign in to comment.