CreativeTech Wiki (internal)

Explore

Reference

Adding "The Memo" Content

The production page for The Memo page is currently located at:

https://advertising.nytimes.com/db-test/⁠

⁠

The staging page for The Memo is currently located at:

https://stink-stage.limbo-dev.awsma.nyt.net/db-test/⁠

⁠

If you’re having trouble accessing the staging page, be sure you’re connected to the Wi-Fi in office, or are connected to the VPN remotely.

⁠

Sanity CMS Page

To get started, you’ll need to make minor adjustments to the DB-Test page to format it for The Memo.

In the Sanity CMS, you’ll find the DB-Test page in Pages:

⁠

⁠

In the DB-Test configs, you will need to update the name from the test values to The Memo-specific values.

In SEO & metadata, you’ll be updating the dummy values for:

Meta Title

Description

⁠

⁠

In Page Configuration, you’ll be updating the dummy values for:

Title

Subtitle

Slug*

The slug you use will need to be referenced in the custom code snippet later.

⁠

⁠

Below the drop-downs, you’ll also need to update the Editor Title.

⁠

⁠

At the bottom of the DB-Test (now the new Memo) configs, you’ll see a Content block with Code Snippet: Inject HTML/CSS/JS via JS. Open this and update the test slug name with the new Memo slug you created above.

You’ll only need to update the name on lines 42 and 50 so we can target the injected code to the correct page of the website.

⁠

⁠

Save this on staging and confirm your updates are showing and no longer reflecting DB-Test values.

Note that the URL for the production and staging site will now be different than what’s listed here.

⁠

Google Bucket Repository

This page consumes HTML/CSS/JS/Image data from Google Bucket and renders them dynamically on the page via Sanity custom code snippet.

The assets for this content are to be stored in the following bucket:

https://console.cloud.google.com/storage/browser/nyt-ads-static-assets/ads/creative-tech/other/the-memo?project=nyt-adplat-prd⁠

⁠

⁠

There are boilerplate HTML, CSS, and JS files in the repository. These are the files that are dynamically pulled into the content page on Sanity. Please feel free to overwrite them and re-enable public access to the routes (see below).

Please note that specific rules in place to ensure your HTML, CSS, and JS will be rendered correctly on the site. There are comments in the respective files to help guide you.

HTML File

Add an HTML file to the bucket, which must be named “customContent_TM.html“ and the content must be wrapped in a div with the id “#customContent_TM”.

...

</div>

NOTE: You do not need to have an <html> or <body> wrapper around your content. Your code will be added inside these existing tags on the page.

JS File

Add a JS file to the bucket, which must be named “customContent_TM.js”.

CSS File

Add a CSS file to the bucket, which must be named “customContent_TM.css”.

Images Folder

Add your image to the /images folder already located inside this bucket.

You will need to hardcode the image location values to your code.

Make All Files Public

As you upload and overwrite files to the repository, you’ll need to make sure to make all assets public so they can be read and populated into the Sanity page.

You’ll be referencing the Public URL for all your assets.

⁠

Setting Permissions on Assets

Whenever you add or update an asset, you will need to adjust the permissions by clicking onto the asset, selecting Edit Access > Add Entry > Select Public on newly created entity and save.

⁠

If you’ve already uploaded any file and need to replace it, simply overwrite the file and reset its permissions.

⁠

Test Your Work

As you create HTML, CSS, and JS for your page, please be sure to test your work on the staging site often. While building, be sure not to publish to production to help mitigate the risk of introducing breaking bugs to our users.

If you find any data or style leaks into other pages of the site, or if you’re having trouble rendering your work on the Memo page, please raise this to the team as soon as possible so we have time to debug and address issues before launch.

Frequent testing ensures there are no issues introduced as you work that may affect the rest of the website.

Reach out to

@Lana Chiad⁠

for questions or help.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.