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.

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

Deploy pt 2 - November 5, 2024 #8372

Merged
merged 2 commits into from
Nov 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ Add the following async script tag to your head:

## Step 2: Add a subscription and unsubscription widget

You'll need to add a widget that allows users to subscribe and unsubscribe from push. This should live inside the body of your HTML and can be styled however you see fit.
You'll need to add a widget that allows users to subscribe and unsubscribe from push. This should live inside the body of your HTML and can be styled however you see fit.

```js
<!-- A subscription widget -->
Expand All @@ -44,13 +44,13 @@ You'll need to add a widget that allows users to subscribe and unsubscribe from

## Step 3: Download helper iFrame and permission dialog

The AMP Web Push component works by creating a popup that handles the push subscription. As a result, you'll need to include a couple of helper files in your project. Download the [helper-iframe.html](https://cdn.ampproject.org/v0/amp-web-push-helper-frame.html) file and [permission-dialog.html](https://cdn.ampproject.org/v0/amp-web-push-permission-dialog.html) file and store them on your site.
The AMP Web Push component works by creating a popup that handles the push subscription. As a result, you'll need to include a couple of helper files in your project. Download the [helper-iframe.html](https://cdn.ampproject.org/v0/amp-web-push-helper-frame.html) file and [permission-dialog.html](https://cdn.ampproject.org/v0/amp-web-push-permission-dialog.html) file and store them on your site.

## Step 4: Create a service worker file

Create a `service-worker.js` file with the following content, and place it in the root directory of your website:

<script src="https://braze-inc.github.io/embed-like-gist/embed.js?target=https://github.com/braze-inc/braze-web-sdk/blob/master/sample-builds/cdn/service-worker.js&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>
<script src="{{site.baseurl}}/assets/js/embed.js?target=https://github.com/braze-inc/braze-web-sdk/blob/master/sample-builds/cdn/service-worker.js&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>

## Step 5: Configure the AMP web push HTML element

Expand All @@ -68,4 +68,4 @@ service-worker-url="FILE_PATH_TO_YOUR_SERVICE_WORKER?apiKey={YOUR_API_KEY}&baseU

In particular, the `service-worker-URL` requires appending your `apiKey` and `baseUrl` (https://dev.appboy.com/api/v3) as query parameters.

You should now be configured for push subscription and unsubscription on your AMP page.
You should now be configured for push subscription and unsubscription on your AMP page.
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ Visit the [Google Tag Manager integration guide]({{site.baseurl}}/developer_guid
{% tab braze cdn %}
Add the Braze Web SDK directly to your HTML by referencing our CDN-hosted script, which loads the library asynchronously.

<script src="https://braze-inc.github.io/embed-like-gist/embed.js?target=https%3A%2F%2Fgit.luolix.top%2Fbraze-inc%2Fbraze-web-sdk%2Fblob%2Fmaster%2Fsnippets%2Floading-snippet.js&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>
<script src="{{site.baseurl}}/assets/js/embed.js?target=https%3A%2F%2Fgit.luolix.top%2Fbraze-inc%2Fbraze-web-sdk%2Fblob%2Fmaster%2Fsnippets%2Floading-snippet.js&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>
{% endtab %}
{% endtabs %}

Expand Down Expand Up @@ -248,7 +248,7 @@ require(['path/to/braze.min.js'], function(braze) {

If your site uses RequireJS or another AMD module-loader, but you prefer to load the Braze Web SDK through one of the other options above, you can load a version of the library that does not include AMD support. This version of the library can be loaded from the following CDN location:

<script src="https://braze-inc.github.io/embed-like-gist/embed.js?target=https%3A%2F%2Fgit.luolix.top%2Fbraze-inc%2Fbraze-web-sdk%2Fblob%2Fmaster%2Fsnippets%2Fno-amd-library.js&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>
<script src="{{site.url}}/embed.js?target=https%3A%2F%2Fgit.luolix.top%2Fbraze-inc%2Fbraze-web-sdk%2Fblob%2Fmaster%2Fsnippets%2Fno-amd-library.js&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>

### Tealium iQ
Tealium iQ offers a basic turnkey Braze integration. To configure the integration, search for Braze in the Tealium Tag Management interface, and provide the Web SDK API key from your dashboard.
Expand All @@ -269,4 +269,3 @@ When using Jest, you may see an error similar to `SyntaxError: Unexpected token
]
}
```

Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ At this point, `secure.com` will open a popup window in which you can initialize

**https://secure.com/push-registration.html**

<script src="https://braze-inc.github.io/embed-like-gist/embed.js?target=https%3A%2F%2Fgit.luolix.top%2Fbraze-inc%2Fbraze-web-sdk%2Fblob%2Fmaster%2Fsnippets%2Falternate-push-domain-registration.html&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>
<script src="{{site.baseurl}}/assets/js/embed.js?target=https%3A%2F%2Fgit.luolix.top%2Fbraze-inc%2Fbraze-web-sdk%2Fblob%2Fmaster%2Fsnippets%2Falternate-push-domain-registration.html&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>

### Step 3: Communicate between domains (optional)

Expand Down Expand Up @@ -94,5 +94,5 @@ function getPushStatus(event){

**secure.com/push-status.html**

<script src="https://braze-inc.github.io/embed-like-gist/embed.js?target=https%3A%2F%2Fgit.luolix.top%2Fbraze-inc%2Fbraze-web-sdk%2Fblob%2Fmaster%2Fsnippets%2Falternate-push-domain-status.html&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>
<script src="{{site.baseurl}}/assets/js/embed.js?target=https%3A%2F%2Fgit.luolix.top%2Fbraze-inc%2Fbraze-web-sdk%2Fblob%2Fmaster%2Fsnippets%2Falternate-push-domain-status.html&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>

Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ For more information on the push protocol standards and browser support, you can
- If you don't already have a service worker, create a new file named `service-worker.js` with the following snippet, and place it in the root directory of your website.
- Otherwise, if your site already registers a service worker, add the following snippet to the service worker file, and set the [`manageServiceWorkerExternally`](https://js.appboycdn.com/web-sdk/latest/doc/modules/braze.html#initialize) initialization option to `true` when initializing the Web SDK.

<script src="https://braze-inc.github.io/embed-like-gist/embed.js?target=https://github.com/braze-inc/braze-web-sdk/blob/master/sample-builds/cdn/service-worker.js&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>
<script src="{{site.baseurl}}/assets/js/embed.js?target=https://github.com/braze-inc/braze-web-sdk/blob/master/sample-builds/cdn/service-worker.js&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>

If your service worker filename is not `service-worker.js`, you must use the `serviceWorkerLocation` [initialization option](https://js.appboycdn.com/web-sdk/latest/doc/modules/braze.html#initializationoptions).

Expand Down Expand Up @@ -114,7 +114,7 @@ While industry best practice is to make your whole site secure, customers who ca

Our service worker file will automatically call `skipWaiting` upon install. If you'd like to avoid this, add the following code to your service worker file, preceding importing Braze:

<script src="https://braze-inc.github.io/embed-like-gist/embed.js?target=https%3A%2F%2Fgit.luolix.top%2Fbraze-inc%2Fbraze-web-sdk%2Fblob%2Fmaster%2Fsnippets%2Fservice-worker-skip-waiting.js&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>
<script src="{{site.baseurl}}/assets/js/embed.js?target=https%3A%2F%2Fgit.luolix.top%2Fbraze-inc%2Fbraze-web-sdk%2Fblob%2Fmaster%2Fsnippets%2Fservice-worker-skip-waiting.js&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>

## Troubleshooting

Expand Down
2 changes: 1 addition & 1 deletion _layouts/api_glossary.html
Original file line number Diff line number Diff line change
Expand Up @@ -288,7 +288,7 @@ <h1> {{ page.glossary_top_header }} </h1>
</div>
<fieldset id="glossary_filter">
<legend class="glossary_text"> {{ page.glossary_mid_text }} </legend>
<input id="glossary_search" type="search" placeholder="Search" />
<label for="glossary_search">&#8205;<input id="glossary_search" type="search" placeholder="Search" aria-label="Glassary Search" /></label>
<div id="glossary_filter_titlev2">{{ page.glossary_filter_text }}</div>
{%- for tag in page.glossary_tags -%}
<div class="glossary_filter_div">
Expand Down
4 changes: 2 additions & 2 deletions _layouts/glossary_page.html
Original file line number Diff line number Diff line change
Expand Up @@ -267,11 +267,11 @@ <h1> {{ page.glossary_top_header }} </h1>
<p class="glossary_text"> {{ page.glossary_top_text }} </p>

<div id="glossary_filter">
<input id="glossary_search" type="search" placeholder="Search" />
<label for="glossary_search">&#8205;<input id="glossary_search" type="search" placeholder="Search" /></label>
<div id="glossary_filter_title">{{ page.glossary_filter_text }}</div>
{%- for tag in page.glossary_tags -%}
<div class="glossary_filter_div">
<label for="filter_{{ tag.name | slugify }}"> <input type="checkbox" name="filter_{{ tag.name | slugify }}" id="filter_{{ tag.name | slugify }}" value="{{tag.name | downcase }}" />
<label for="filter_{{ tag.name | slugify }}">&#8205;<input type="checkbox" name="filter_{{ tag.name | slugify }}" id="filter_{{ tag.name | slugify }}" value="{{tag.name | downcase }}" />
{{tag.name}}
</label>
</div>
Expand Down
13 changes: 8 additions & 5 deletions _layouts/partner_page.html
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@
if ((site_language != 'en') && (card_url.indexOf(`/docs/${site_language}/`) < 0)) {
card_url = card_url.replace('/docs/',`/docs/${site_language}/`);
}
var card_img = $('<img>').attr('src',cur_partner['partner_logo_url']).attr('alt',title + ' image').addClass('logo');
var card_img = $('<img>').attr('src',cur_partner['partner_logo_url']).attr('alt',cur_partner['partner_name'] + ' image').addClass('logo');
var card_title = '';
if (title) {
card_title = $('<h5>').html('(' + title + ')');
Expand Down Expand Up @@ -305,21 +305,24 @@ <h1> {{ page.partner_top_header | markdownify }} </h1>

<div id="partner_filter">
<div class="partner_filter_div">
<input id="partner_search" type="search" placeholder="Search" aria-label="Partner Search"></div>
<label for="partner_search">&#8205;<input id="partner_search" type="search" placeholder="Search" aria-label="Partner Search"></label></div>
<div class="partner_filter_div">
<select id="partner_category" class="select" aria-label="Partner Category">
<label for="partner_category">&#8205;<select id="partner_category" class="select" aria-label="Partner Category">
<option value="">All Categories</option>
</select>
</label>
</div>
<div class="partner_filter_div">
<select id="partner_specialty" class="select" aria-label="Partner Speciality">
<label for="partner_specialty">&#8205;<select id="partner_specialty" class="select" aria-label="Partner Speciality">
<option value="">All Specialties</option>
</select>
</label>
</div>
<div class="partner_filter_div">
<select id="partner_solutions" class="select" aria-label="Partner Solutions">
<label for="partner_solutions">&#8205;<select id="partner_solutions" class="select" aria-label="Partner Solutions">
<option value="">All Solutions</option>
</select>
</label>
</div>
</div>
</fieldset>
Expand Down
13 changes: 12 additions & 1 deletion assets/css/_content.scss
Original file line number Diff line number Diff line change
Expand Up @@ -671,6 +671,17 @@ table td code.highlighter-rouge {
}
}

code {
font-size: 14px;
font-family: $braze-code;
font-weight: bold;
color: $grey-dust;
background-color: $grey-athens;
border: 1px solid $grey-ghost;
}
legend {
font-size: 15px;
}
.highlight table {
margin-bottom: 0;
}
Expand Down Expand Up @@ -1126,4 +1137,4 @@ blockquote {
img {
border: 0 !important;
}
}
}
3 changes: 3 additions & 0 deletions assets/css/_header_search.scss
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,9 @@ $search_icon: $white;
.aa-Label {
margin-bottom: 0px;
}
label {
color: $white;
}
.aa-Input {
height: 38px;
background-position: left 10px top 9px;
Expand Down
9 changes: 6 additions & 3 deletions assets/css/_partner_page.scss
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,9 @@
@media (min-width: $window-large-px) {
flex: 0 0 23%;
}
label {
width: 100%;
}
}
}
.btn {
Expand Down Expand Up @@ -241,7 +244,7 @@
}

h6 {
color: #999;
color: $text-color;
font-weight: 600;
text-transform: uppercase;
margin: 0;
Expand All @@ -251,7 +254,7 @@
text-align: center;
}
h5 {
color: #999;
color: $text-color;
font-weight: 600;
text-transform: uppercase;
margin: 0;
Expand All @@ -269,7 +272,7 @@
transition: all 0.55s ease;
p {
margin: 1.5em 0 0;
color: #6e6e70;
color: $text-color;
line-height: 1.4em;
font-size: 14px;
}
Expand Down
22 changes: 13 additions & 9 deletions assets/js/documents.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,18 @@ function unEncodeURIComponent(str) {
return decodedStr;
}

function setAdaTableRole(role='presentation') {
// assign a role of presentation, and remove the role if it has a th or thead
$('table').each(function(){
if (!$(this).attr('role')) {
$(this).attr('role',role);
}
if (($(this).attr('role') == role) && (($(this).has('th').length > 0) || ($(this).has('thead').length > 0))){
$(this).attr('role',null);
}
});
}

function string_to_slug(str) {
if (str) {
str = str.toLowerCase().replace(/\s/g, '-').replace(/[^\w-]/g, '');
Expand Down Expand Up @@ -578,14 +590,6 @@ $(document).ready(function() {
$(this).attr('tabindex', 0)
}
});
setAdaTableRole()

// assign a role of presentation, and remove the role if it has a th or thead
$('table').each(function(){
if (!$(this).attr('role')) {
$(this).attr('role','presentation');
}
if (($(this).attr('role') == 'presentation') && (($(this).has('th').length > 0) || ($(this).has('thead').length > 0))){
$(this).attr('role',null);
}
});
});
Loading