checkOgImage.js

function checkOgImage(branch) {
  window.open(document.querySelector('meta[property="og:image"]')
              .attributes.content.value
              .replace('www', branch + '.preview'), '_blank');
}

extend_css.py

#!/usr/bin/env python-finder.sh
# encoding: utf-8
#
# Copyright (C) 2022
# Artem Palevich <apalevich@apple.com>

import os
import argparse

parser = argparse.ArgumentParser(description='Exports CSS code from HTML and store as separate file')
parser.add_argument("folder", help="Path to folder with html")
args = parser.parse_args()

folder = os.path.abspath(args.folder)

print('FOLDER: ' + folder)

def parse_css(html: str):
	css_starts_at = html.find('>', html.index('<style')) + 1
	css_ends_at = html.index('</style') - 1
	with_fixed_images = html[css_starts_at:css_ends_at].replace('./images','../images')
	return with_fixed_images

def create_css_file(html: str):
	if not os.path.exists(folder + '/css/'):
		os.makedirs(folder + '/css/')
	with open(folder + '/css/channel.built.css', 'x') as text_file:
	    text_file.write(parse_css(html))

def clean_html(html):
	style_tag_starts_at = html.index('<style')
	style_tag_ends_at = html.index('</style') + len('</style>')
	link = '<link rel="stylesheet" href="css/channel.built.css">'
	return file_str[:style_tag_starts_at] + link + file_str[style_tag_ends_at:]

with open(folder + '/index.html', 'r') as f:
    file_str = f.read()
    create_css_file(file_str)
    
with open(folder + '/index.html', 'w') as f:
    updated_html = clean_html(file_str)
    f.write(updated_html)

print('Done! To open containing folder, use: open .')
print('')

generateStyles.js

function generateStyles(className,dimensionsArr, center = false) {
    const largeWidth = dimensionsArr[0]
    const largeHeight = dimensionsArr[1]
    const mediumWidth = dimensionsArr[2]
    const mediumHeight = dimensionsArr[3]
    const smallWidth = dimensionsArr[4]
    const smallHeight = dimensionsArr[5]
    const styles = `.channel-html figure.${className} {
              background-image: url(../images/headlines/large/${className}_large.png);
              width: ${largeWidth}px;
              height: ${largeHeight}px;
              background-size: ${largeWidth}px ${largeHeight}px;
              ${center ? 'margin: auto;':''}
            }

            @media (-webkit-min-device-pixel-ratio: 1.5),
              (min-resolution: 144dpi),
              only screen and (-webkit-min-device-pixel-ratio: 1.5),
              only screen and (min-resolution: 1.5dppx) {
              .channel-html figure.${className} {
                background-image: url(../images/headlines/large/${className}_large_2x.png);
                width: ${largeWidth}px;
                height: ${largeHeight}px;
                background-size: ${largeWidth}px ${largeHeight}px;
              }
            }

            @media only screen and (max-width: 1068px) {
              .channel-html figure.${className} {
                background-image: url(../images/headlines/medium/${className}_medium.png?1645911856288);
                width: ${mediumWidth}px;
                height: ${mediumHeight}px;
                background-size: ${mediumWidth}px ${mediumHeight}px;
              }
            }

            @media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5),
              only screen and (max-width: 1068px) and (min-resolution: 1.5dppx),
              only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
              .channel-html figure.${className} {
                background-image: url(../images/headlines/medium/${className}_medium_2x.png?1645911856288);
                width: ${mediumWidth}px;
                height: ${mediumHeight}px;
                background-size: ${mediumWidth}px ${mediumHeight}px;
              }
            }

            @media only screen and (max-width: 734px) {
              .channel-html figure.${className} {
                background-image: url(../images/headlines/small/${className}_small.png?1645911856288);
                width: ${smallWidth}px;
                height: ${smallHeight}px;
                background-size: ${smallWidth}px ${smallHeight}px;
              }
            }

            @media only screen and (max-width: 734px) and (-webkit-min-device-pixel-ratio: 1.5),
              only screen and (max-width: 734px) and (min-resolution: 1.5dppx),
              only screen and (max-width: 734px) and (min-resolution: 144dpi) {
              .channel-html figure.${className} {
                background-image: url(../images/headlines/small/${className}_small_2x.png?1645911856288);
                width: ${smallWidth}px;
                height: ${smallHeight}px;
                background-size: ${smallWidth}px ${smallHeight}px;
              }
            }`;
    copy(styles);
    return styles;
}