Updated Feb 9, 2023
The easiest way to setup an environment to contribute to the docs or review pull requests is Github Codespaces.
Code
drop down menu and select “create new codespace from master”. If you have no access to prebid.github.io, then you should do this on your fork of the repositoryTERMINAL
of your codespace
bundle install
JEKYLL_ENV=production bundle exec jekyll serve --watch --incremental
PORTS
tab you find the running instanceBeing a reviewer means you’re in weekly rotation where you keep an eye on pull requests (PRs) and issues opened in this repo.
The Prebid website is developed using GitHub pages and Jekyll, a static site generator which uses the following technology to create and style HTML pages. See the main README file for instructions on how to set this up.
Markdown: The majority of the content is written in Markdown language. Jekyll transform this into raw HTML.
Learn more about Markdown
Bootstrap: A CSS template for responsive site design. Bootstrap provides the base formatting for the site.
Learn more about Bootstrap
Liquid: A language created by Shopify to enable dynamic HTML creation.
Learn more about Liquid
Javascript: A combination of Javascript libraries are utilized for the Prebid site to include JQuery and BootstrapJS as well as custom code.
CSS: The site builds on the base Bootstrap template with custom CSS stored in the style.css file.
On the rare occasions where we need to use the ‘dev’ or ‘stage’ sites, we just check with each other to make sure it’s not already being used for something.
The _config.yml
file (note underscore prefix) sets the base configuration for the site. Refer to Jekyll documentation on which properties can be set in the _config.yml
file.
Jekyll requires adherence to a certain directory structure to generate the site. Directories prefixed with an underscore contain files used to construct the html files of the site.
For the Prebid.org site the following directories are used:
**data**
Jekyll was originally designed specifically for creation of blogging websites and not for dynamic, data-driven sites. However, by including the _data directory we can mimic a database structure to create a more robust site. Files in this directory can be saved in either _json, yml or csv format. For Prebid.org they have been saved in yml.
Learn more about YML here
There are several YML files in the Prebid _data directory
The contents of these files are used throughout the Prebid.org site for dynamically creating the navigation and displaying messages. See the Data Model section for a review of how the data is structured and to see sample code.
_layouts
The layout directory contains HTML files that, in conjunction with CSS and JS files, format the layout of pages throughout the site.
_includes
The includes directory contains HTML files that can be included within files, such as a file for the header and footer.
_bidders
The bidders directory is not a standard part of Jekyll; it’s a special use directory specifically to construct the table of bidders on dev-docs/bidders.md and dev-docs/pbs-bidders.md
_sites
The sites directory is created by Jekyll. It contains the live site generated from the collected files and data listed above, combined with the CSS, JS and image assets and the Markdown files for individual pages.
The assets directory contains the CSS, Javascript, images and other assets used to create the site.
The base CSS file used is Bootstrap (version 4.6.3) Custom CSS and modifications to Bootstrap classes are contained in the _sass/vendor/_bootstrap.scss file.
The JS directory contains the Javascript files required for the Prebid.org site. It includes JQuery and Bootstrap javascript frameworks as well as other third party libraries and custom javascript written specifically for the Prebid site. For JQuery and Bootstrap both the expanded and minified versions of the javascript files are included but only the minified files are linked from the site header.
/assets/css/main-bundle.scss
If you want to upgrade bootstrap
npm install
. This will update the node_modules commited in _sass/node_modulesThe data files are stored in the __data directory.
The dropdown_v2 YML file is used to construct the top nav when the site is viewed on desktops and tablets.
The YML map is divided into collections of menu sections. Menu sections are commented when they begin, for example;
#----------Product SubNav------------
Each menu item is represented in the YML map as a collection of key value pairs and begins with a dash (-) symbol. An indented collection indicates it is a child of the collection above it. Example:
#-----------Overview---------------
- sectionId: 0
sectionName: Overview
link:
isHeader: 1
hasSubMenus: 1
submenus:
- subsectionId: 0
sectionId: 0
sectionName: Overview
title: What is Prebid?
link: /overview/intro.html
needsDivider: 0
isHeader: 0
isSubSectionStart: 1
The collection with the title property “What Is Prebid?” is a child of the collection directly above it with the sectionName “Overview”
Top Nav Menu Collection Properties
Note: A collection does not have to contain all properties. For Bools 1 = true, 0 = false
Key | Type | Example | Use |
---|---|---|---|
sectionId | Int | 3 | Indicates the menu section of an item. |
sectionName | string | Overview | The display name of the section. |
link | string | /overview/intro.html | The relative link that the menu item should open. |
isHeader | bool | 1 | Indicates if this item is a section header. |
hasSubMenus | bool | 1 | Indicates if this item has submenus. |
submenus | collection | If the item has submenus they will be contained in a collection of collections. | |
subsectionId | int | 3 | Indicates the subsection of an item. |
needsDivider | bool | 0 | Indicates if the subsection item is the last item in the section and requires a divider. Deprecated |
isSubsectionStart | bool | 0 | Indicates if the item is the start of a subsection. Deprecated |
Code Use
This data file is read in the nav.html file using Liquid. (__includes/nav.html
).
The sidebar YML file is used to construct the left side navigation when the site is viewed on desktops and tablets and the top navigation when viewed on phones.
The YML map is divided into collections of menu sections. Menu sections are commented when they begin, for example;
#--------------Overview--------------|
Each menu item is represented in the YML map as a collection of key value pairs and begins with a dash (-) symbol. An indented collection indicates it is a child of the collection above it. Example:
#--------------Overview--------------|
- sbSecId: 0
title:
link:
isLastSubSectionItem: 0
isHeader: 0
isSectionHeader: 1
sectionTitle: Overview
sectionId: overview
subgroup: 1000
sbCollapseId: overview
- sbSecId: 0
title: General
link:
isLastSubSectionItem: 0
isHeader: 1
headerId: general
isSectionHeader: 0
sectionTitle:
subgroup: 0
Side Nav Menu Collection Properties
*Note: A collection does not have to contain all properties. For bools 1 = true, 0 = false**
Key | Type | Example | Use |
---|---|---|---|
sbSecId | int | 3 | Indicates the menu section of an item. |
title | string | General | The text displayed for the menu section. |
link | string | /overview/intro.html | The relative link that the menu item opens. |
isLastSubSectionItem | bool | 0 | Indicates if the menu item is the last item in a subsection. |
isHeader | bool | 0 | Indicates if the menu item is a sub section header. |
headerId | string | general | Required if isHeader = 1. Used to identify which div object is being toggled. |
isSectionHeader | bool | 0 | Indicates if the menu item is a section header. |
sectionTitle | string | Overview | Text displayed for the section. |
sectionId | string | overview | Required if isHeader = 1. Used to identify which div object is being toggled. |
subgroup | int | 3 | Indicates the subgroup that contains this item. |
sbCollapseId | string | overview | Required if isSectionHeader = 1. Used to identify which div object is being toggled. |
Code Use
This data file is read in the left_nav.html file using Liquid. (__includes/left_nav.html)
Files Not in the Sidebar
If a page is open that is not listed in the sidebar.yml file, by default the sidebar will display only top-level options, with no options expanded or selected.
In certain cases, it is helpful to the user to highlight a page in the left navigation that is not currently open. For example, when a bidder page is open (such as docs.prebid.org/dev-docs/bidders/1ad4good.html), we don’t want hundreds of bidders displayed in the left nav, but we want the user to be oriented to where they are in the documentation. In this case, that would be under Prebid.js > Reference > Bidder Params. To accomplish this, you must do two things:
sidebarType: 1
to all bidder pages. This opens the Prebid.js menu. (If you want to extend this functionality to other pages, use the sbSecId in the sidebar.yml file of the top-level menu as the value for sidebarType.)This has been done for both bidders pages (pages with layout: bidder
) and the Publisher API Reference (layout: api_prebidjs
and highlighting Prebid.js > Reference > Publish API Reference in the left nav), but can be extended to other pages as needed.
TBD
There are 200+ bidder files in the /dev-docs/bidders directory describing the parameters for each Prebid.js bidder. There are two unfortunately identical pieces of code that process them:
The attributes in the Jekyll ‘front matter’ drive various behaviors and dynamic tables elsewhere on the site.
Key | Required? | Values | Use |
---|---|---|---|
layout | yes | bidder | Links this file to the bidder.html layout |
title | yes | company name | For display |
pbjs | sorta | true or false | defines whether this is a Prebid.js bidder |
pbs | sorta | true or false | defines whether this is a Prebid Server bidder |
description | no | - | Not used |
biddercode | yes | preferred bidder code | Used as the default ad server targeting suffix and the default download filename |
aliasCode | no | bid adapter that actually implements this adapter | Overrides the filename used to build the PBJS package on the download page. Will be suffixed with “BidAdapter”. This is also intended to be a valid bidder code. |
filename | no | bid adapter that actually implements this adapter | Used when a bid adapter is created with a filename that is not the bidder code. This completely overrides what is passed into the gulp build command, so needs to be fully specified. e.g. bidderaBidAdapter |
prevBiddercode | no | secondary bidder code | Adds a note about an alternate code that may have been used. |
pbjs_version_notes | no | string | Displays on the download page |
sidebarType | yes | 1 |
Used for navigation. This opens the Prebid.js portion of the menu so the sidebar can display the Reference/Prebid Params menu option when a bidder page is open. |
ANYTHING ELSE | no | string | There are many pieces of metadata (e.g. GDPR support, user IDs supported) that bid adapters can disclose. They’re displayed on the bidder’s parameter page. |
The bidderCode, aliasCode, and prevBiddercode parameters bear some description.
Some adapters have a longer bidderCode and a shorter bidderCode – their adapter supports both (with the alias
feature) but
there’s only one documentation file and of course one PBJS adapter file. An relatively common scenario is when the company started off with a
long bidderCode, but found it awkward to set up ad server targeting variables because GAM limits you to 20 chars, which is easy to exceed
with a prefix like hb_cache_host
. So they wanted to have shorter bidderCode for new customers while supporting the legacy targeting variables. In that scenario, they:
We use Algolia for site search.
Prebid websites don’t set their own cookies, but vendor products we use do. So we use the consentmanager.net to pop up a cookie banner. If the user hasn’t consented to setting cookies, they will find reduced functionality on the site – they won’t be able to view JSFiddle examples or example videos.
This is implemented with the consentmanager third party blocking feature. See layout/example.md for an example implementation.
The test case for vendor code that drops cookies is simple: