diff --git a/samples/generate-shared-boilerplate.sh b/samples/generate-shared-boilerplate.sh new file mode 100755 index 000000000..1ac143ab8 --- /dev/null +++ b/samples/generate-shared-boilerplate.sh @@ -0,0 +1,88 @@ +#!/bin/bash + +# A helper script to generate common boilerplate files (package.json, tsconfig.json, README.md) +# for Google Maps JavaScript samples. +# Usage: ./generate-shared-boilerplate.sh <OUTPUT_DIR> + +NAME="$1" +TITLE="$2" +OUTPUT_DIR="${3:-.}" + +if [ -z "$NAME" ] || [ -z "$TITLE" ]; then + echo "Usage: $0 <NAME> <TITLE> [OUTPUT_DIR]" + exit 1 +fi + +mkdir -p "${OUTPUT_DIR}/${NAME}" + +# Generate package.json +cat > "${OUTPUT_DIR}/${NAME}/package.json" << EOF +{ + "name": "@js-api-samples/${NAME}", + "version": "1.0.0", + "scripts": { + "build": "bash ../build-single.sh", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --config ../../vite.config.js --base './' && vite --config ../../vite.config.js", + "build:vite": "vite build --config ../../vite.config.js --base './'", + "preview": "vite preview --config ../../vite.config.js" + }, + "author": "Google LLC" +} +EOF + +# Generate tsconfig.json +cat > "${OUTPUT_DIR}/${NAME}/tsconfig.json" << 'EOF' +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "rootDir": "." + }, + "include": ["./*.ts"] +} +EOF + +# Generate README.md +cat > "${OUTPUT_DIR}/${NAME}/README.md" << EOF +# Google Maps JavaScript Sample + +## ${NAME} + +${TITLE} + +## Setup + +### Before starting run: + +\`npm i\` + +### Run an example on a local web server + +\`cd samples/${NAME}\` +\`npm start\` + +### Build an individual example + +\`cd samples/${NAME}\` +\`npm run build\` + +From 'samples': + +\`npm run build --workspace=${NAME}/\` + +### Build all of the examples. + +From 'samples': + +\`npm run build-all\` + +### Run lint to check for problems + +\`cd samples/${NAME}\` +\`npx eslint index.ts\` + +## Feedback + +For feedback related to this sample, please open a new issue on +[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues). +EOF diff --git a/samples/migrate-sample.sh b/samples/migrate-sample.sh index 369b73857..dab096b47 100755 --- a/samples/migrate-sample.sh +++ b/samples/migrate-sample.sh @@ -38,84 +38,11 @@ cp "${INPUT_DIR}/dist/samples/${NAME}/docs/style.css" "${OUTPUT_DIR}/${NAME}/" # Generate a placeholder for index.js. touch "${OUTPUT_DIR}/${NAME}/index.js" cat > "${OUTPUT_DIR}/${NAME}/index.js" << EOF -<!-- Placeholder for index.js (run TSC to generate). --> +// Placeholder for index.js (run TSC to generate). EOF -# Generate package.json -touch "${OUTPUT_DIR}/${NAME}/package.json" -cat > "${OUTPUT_DIR}/${NAME}/package.json" << EOF -{ - "name": "@js-api-samples/${NAME}", - "version": "1.0.0", - "scripts": { - "build": "bash ../build-single.sh", - "test": "tsc && npm run build:vite --workspace=.", - "start": "tsc && vite build --base './' && vite", - "build:vite": "vite build --base './'", - "preview": "vite preview" - } -} -EOF - -# Generate tsconfig.json -touch "${OUTPUT_DIR}/${NAME}/tsconfig.json" -cat > "${OUTPUT_DIR}/${NAME}/tsconfig.json" << EOF -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "rootDir": "." - }, - "include": [ - "./*.ts" - ] -} -EOF - -# Generate README.md -touch "${OUTPUT_DIR}/${NAME}/README.md" -cat > "${OUTPUT_DIR}/${NAME}/README.md" << EOF -# Google Maps JavaScript Sample - -## ${NAME} - -${TITLE} - -## Setup - -### Before starting run: - -\`npm i\` - -### Run an example on a local web server - -\`cd samples/${NAME}\` -\`npm start\` - -### Build an individual example - -\`cd samples/${NAME}\` -\`npm run build\` - -From 'samples': - -\`npm run build --workspace=${NAME}/\` - -### Build all of the examples. - -From 'samples': - -\`npm run build-all\` - -### Run lint to check for problems - -\`cd samples/${NAME}\` -\`npx eslint index.ts\` - -## Feedback - -For feedback related to this sample, please open a new issue on -[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues). -EOF +# Generate shared boilerplate +bash "$(dirname "$0")/generate-shared-boilerplate.sh" "$NAME" "$TITLE" "$OUTPUT_DIR" # Git add the files. git add "${OUTPUT_DIR}/${NAME}/index.ts" diff --git a/samples/new-sample.sh b/samples/new-sample.sh index e68484ad4..b15eed5b6 100755 --- a/samples/new-sample.sh +++ b/samples/new-sample.sh @@ -50,15 +50,14 @@ cat >> "$NAME/index.html" << 'EOF' <script> // prettier-ignore (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ - key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8" + key: "GOOGLE_MAPS_API_KEY" }); </script> EOF cat >> "$NAME/index.html" << EOF </head> - <body> - </body> + <body></body> </html> <!-- [END $REGION_TAG] --> EOF @@ -74,84 +73,15 @@ cat > "$NAME/style.css" << EOF /* [START $REGION_TAG] */ html, body { - height: 100%; - margin: 0; - padding: 0; + height: 100%; + margin: 0; + padding: 0; } /* [END $REGION_TAG] */ EOF -# Create package.json -cat > "$NAME/package.json" << EOF -{ - "name": "@js-api-samples/$NAME", - "version": "1.0.0", - "scripts": { - "build": "bash ../build-single.sh", - "test": "tsc && npm run build:vite --workspace=.", - "start": "tsc && vite build --base './' && vite", - "build:vite": "vite build --base './'", - "preview": "vite preview" - } -} -EOF - -# Create tsconfig.json -cat > "$NAME/tsconfig.json" << 'EOF' -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "rootDir": "." - }, - "include": [ - "./*.ts" - ] -} -EOF - -# Create README.md -cat > "$NAME/README.md" << EOF -# Google Maps JavaScript Sample - -## $NAME - -Add a meaningful description for $NAME here... - -## Setup - -### Before starting run: - -\`npm i\` - -### Run an example on a local web server - -\`cd samples/$NAME\` -\`npm start\` - -### Build an individual example - -\`cd samples/$NAME\` -\`npm run build\` - -From 'samples': - -\`npm run build --workspace=$NAME/\` - -### Build all of the examples. - -From 'samples': - -\`npm run build-all\` - -### Run lint to check for problems - -\`cd samples/$NAME\` -\`npx eslint index.ts\` - -## Feedback - -For feedback related to this sample, please open a new issue on -[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues). -EOF +# Generate shared boilerplate +TITLE="Add a meaningful description for $NAME here..." +bash "$(dirname "$0")/generate-shared-boilerplate.sh" "$NAME" "$TITLE" "." echo "Sample $NAME created successfully in directory ./$NAME"