jsfiddle.sh

#!/bin/bash

# Copy/generate files for JSFiddle.

# TODO: Test in the context of tsconfig.

# Disable history expansion so '!' doesn't trigger the command. (do we need this?)
#set +H

echo ">>>Running jsfiddle.sh"

# Generate JSFiddle output as part of the build process.
NAME=$1 # The name of the folder, taken from package.json "build" line.

# /Users/[USERNAME]/git/js-api-samples/samples

SCRIPT_DIR="$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )" # Script directory (/samples)
PROJECT_ROOT=$(dirname "$SCRIPT_DIR")  # Get the parent directory (js-api-samples)
DIST_DIR="${PROJECT_ROOT}/dist"

echo "PROJECT_ROOT: ${PROJECT_ROOT}"
echo "SCRIPT_DIR: ${SCRIPT_DIR}"
echo "DIST_DIR: ${DIST_DIR}"
echo "NAME: ${NAME}"

# Create a new folder.
mkdir -p "${DIST_DIR}/samples/${NAME}/jsfiddle"

# Copy files
echo "Copy ${SCRIPT_DIR}/${NAME}/index.js to ${DIST_DIR}/samples/${NAME}/jsfiddle/demo.js"
cp "${SCRIPT_DIR}/${NAME}/index.js" "${DIST_DIR}/samples/${NAME}/jsfiddle/demo.js"
cp "${SCRIPT_DIR}/${NAME}/index.html" "${DIST_DIR}/samples/${NAME}/jsfiddle/demo.html"
cp "${SCRIPT_DIR}/${NAME}/style.css" "${DIST_DIR}/samples/${NAME}/jsfiddle/demo.css"

# Replace local asset paths with production URLs.
PROD_URL_BASE="https://maps-docs-team.web.app/samples/${NAME}/dist"
JSFIDDLE_DIR="${DIST_DIR}/samples/${NAME}/jsfiddle"

# Find all asset files in public and src directories.
find "${SCRIPT_DIR}/${NAME}" \( -path "*/public/*" -o -path "*/src/*" \) -type f \( -name "*.png" -o -name "*.gif" -o -name "*.svg" -o -name "*.json" -o -name "*.js" \) | while read -r asset_file; do
  # Get the asset's path relative to the sample directory (e.g., public/icon.png)
  relative_path=${asset_file#*"${SCRIPT_DIR}/${NAME}/"}
  asset_name=$(basename "$relative_path")
  
  # Replace paths in the demo files. Note: This handles paths like './asset.png' and 'asset.png'.
  sed -i.bak "s|\(['\"(]\)\(\./\)*${asset_name}\(['\")']\)|\1${PROD_URL_BASE}/${asset_name}\3|g" "${JSFIDDLE_DIR}/demo.js" "${JSFIDDLE_DIR}/demo.html" "${JSFIDDLE_DIR}/demo.css"
done

rm -f "${JSFIDDLE_DIR}"/*.bak # Clean up backup files created by sed.

# Remove region tags from files by type, since they all have different comment conventions.
# We use a conditional here since sed behaves differently on Linux.
echo "Remove region tags from ${DIST_DIR}/samples/${NAME}/jsfiddle/demo.js"
if [[ "$OSTYPE" == "darwin"* ]]; then
  sed -i "" "s/\/\/ \[START .*]//g" "${DIST_DIR}/samples/${NAME}/jsfiddle/demo.js"
  sed -i "" "s/\/\/ \[END .*]//g" "${DIST_DIR}/samples/${NAME}/jsfiddle/demo.js"
elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
  sed -i "s/\/\/ \[START.*]//g" "${DIST_DIR}/samples/${NAME}/jsfiddle/demo.js"
  sed -i "s/\/\/ \[END.*]//g" "${DIST_DIR}/samples/${NAME}/jsfiddle/demo.js"
fi

echo "Remove region tags from ${DIST_DIR}/samples/${NAME}/jsfiddle/demo.html"
if [[ "$OSTYPE" == "darwin"* ]]; then
  sed -i "" "s/<!--[[:space:]]*\[START .*\][[:space:]]*-->//g" "${DIST_DIR}/samples/${NAME}/jsfiddle/demo.html"
  sed -i "" "s/<!--[[:space:]]*\[END .*\][[:space:]]*-->//g" "${DIST_DIR}/samples/${NAME}/jsfiddle/demo.html"
elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
  sed -i "s/<!--[[:space:]]*\[START .*\][[:space:]]*-->//g" "${DIST_DIR}/samples/${NAME}/jsfiddle/demo.html"
  sed -i "s/<!--[[:space:]]*\[END .*\][[:space:]]*-->//g" "${DIST_DIR}/samples/${NAME}/jsfiddle/demo.html"
fi

echo "Remove region tags from ${DIST_DIR}/samples/${NAME}/jsfiddle/demo.css"
if [[ "$OSTYPE" == "darwin"* ]]; then
  sed -i "" "s/\/\* \[START maps_.*] \*\///g" "${DIST_DIR}/samples/${NAME}/jsfiddle/demo.css"
  sed -i "" "s/\/\* \[END maps_.*] \*\///g" "${DIST_DIR}/samples/${NAME}/jsfiddle/demo.css"
elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
  sed -i "s/\/\* \[START maps_.*] \*\///g" "${DIST_DIR}/samples/${NAME}/jsfiddle/demo.css"
  sed -i "s/\/\* \[END maps_.*] \*\///g" "${DIST_DIR}/samples/${NAME}/jsfiddle/demo.css"
fi

# Generate demo.details.
echo "Generate ${DIST_DIR}/samples/${NAME}/jsfiddle/demo.details"
touch "${DIST_DIR}/samples/${NAME}/jsfiddle/demo.details"
cat > "${DIST_DIR}/samples/${NAME}/jsfiddle/demo.details" << EOF
name: ${NAME}
authors:
  - Geo Developer IX Documentation Team
tags:
  - google maps
load_type: h
description: Sample code supporting Google Maps Platform JavaScript API documentation.
EOF