/weather

functions/index.ts

functions/index.js

html
        <p>
            I also enjoy constructing 
            <a href="/crosswords">crossword puzzles</a>
            .
        </p>
        <p>
            I use 
            <a href="https://www.mynetdiary.com">MyNetDiary</a>
             to track 
            <a href="/diet.html" style="color:#49D6EA !important;">what I eat</a>
            .
        </p>
        <p id="weather">Could not load the weather</p>
    </article>

js
// ./functions/index.js

export const onRequestGet = ({ request, next }) => {
  // Get the static asset response
  const response = await next()
  
  const { latitude, longitude } = request.cf

  // Get weather
  const weatherResponse = await fetch(`https://myweather.service/${latitude},${longitude}`)
  const weatherData = await weatherResponse.json()
  const { isRaining } = weatherData

  // Find the placeholder in our static asset
  return new HTMLRewriter().on('#weather', {
    // And act on the element
    element(element) {
      // https://developers.cloudflare.com/workers/runtime-apis/html-rewriter#methods
      element.setInnerContent(isRaining ? `It is raining 🌧` : 'It is not raining ☀️')
    }
  }).transform(response) 
}

functions/[path].js

functions/[[path]].js

/:product/:id

index.html = index

wrangler pages dev