Skip to content

Instantly share code, notes, and snippets.

@aidanhmiles

aidanhmiles/setup

Created October 10, 2021 19:24
Show Gist options
  • Save aidanhmiles/9ed9ec0536788b6bb25f0747b7f39773 to your computer and use it in GitHub Desktop.
Save aidanhmiles/9ed9ec0536788b6bb25f0747b7f39773 to your computer and use it in GitHub Desktop.
Download ZIP
Turbo frames with CGI
Raw
setup
#!/usr/bin/env bash
mkdir -p webroot/cgi-bin
# place files in their locations as described above
chmod u+x webroot/cgi-bin/*
npm install --save @hotwired/[email protected]
python3 -m http.server --cgi # or whichever server
Raw
testme
1. open index.html in a browser
2. click the 'full page' link, observe that bonus number changes, query string is now in URL and on the page.
3. click the 'turbo frame' link, observe that bonus number doesn't change, query string is on the page BUT not in the URL.
4. open up DevTools, in JS console execute `Turbo.visit(`template.html?${new Date().valueOf()}`)`,
observe that bonus number does not change, the links get new random numbers, and the query string is BOTH in the URL and on the page.
Raw
webroot_cgi-bin_index.html
#! /usr/bin/env bash
# webroot/cgi-bin/index.html
set -e
echo Content-Type: text/html
echo
sed "s/NEW/$RANDOM/g" << EOF
<html>
<head>
<title>DEMO</title>
<script src="/node_modules/@hotwired/turbo/dist/turbo.es2017-umd.js"></script>
</head>
<body>
<h1>DEMO</h1>
<p><small>lucky bonus number: $RANDOM</small></p>
<turbo-frame id='example-frame'>
<a href="template.html?NEW" data-turbo="true">
NEW turbo frame
</a><br />
<a href="index.html?NEW" data-turbo="false">
NEW full page
</a>
<p>number in query string: $QUERY_STRING</p>
</turbo-frame>
<br />
</body>
</html>
EOF
Raw
webroot_cgi-bin_template.html
#! /usr/bin/env bash
# webroot/cgi-bin/template.html
set -e
echo Content-Type: text/vnd.turbo-stream.html; charset=utf-8
echo
sed "s/NEW/$RANDOM/g" << EOF
<turbo-stream action="replace" target="example-frame">
<template>
<turbo-frame id='example-frame'>
<a href="template.html?NEW" data-turbo="true">
NEW turbo frame
</a><br />
<a href="index.html?NEW" data-turbo="false">
NEW full page
</a>
<p>number in query string: $QUERY_STRING</p>
</turbo-frame>
</template>
</turbo-stream>
EOF
Raw
webroot_index.html
<!-- NOTE: this gist originally produced to answer this SO question
https://stackoverflow.com/questions/69492434/how-can-i-reload-a-single-turbo-frame-and-update-the-url -->
<!-- webroot/index.html -->
<meta http-equiv="Refresh" content="0; url='/cgi-bin/index.html'" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment