scrapbook 0.2.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 215d5d39bc38386f6e2c7c08e2126e26718305961ae675a3b6d433b13ff5a4d9
-  data.tar.gz: 07662ed1539e36da1323a74fcb2f4314ea23546586d86036f90d60635b62c913
+  metadata.gz: ef6dc0f95ede6ecc1b68f75aaac825101f84252d5f7b8724e2b59534d40c083f
+  data.tar.gz: 6bd20440efd3e0ed318a5d1103c364600163fd48e3fd72f497e221ae07a08cc0
 SHA512:
-  metadata.gz: 2f2c0d4853af4a8fa82f5a9175874c082932ee36eb9825eccfe1f733afa8bb01025feaa70811321d1f118392ef7803a3da9c0b7addf240967262d6a23171fd6c
-  data.tar.gz: e6e4215895e268d0bb554c1b7fa88ffb1f60e3e18ae2a8ed29fdd62762585ea6998ef582528a637bb2e55f8f3a048e6599732807bfc10ae8c1a899cbd2ea2120
+  metadata.gz: e031db1caa0fdc1aea56a3efc5a969b8990305bf3263c7f8445bc7b66908390008465488031819774cfc3404298f9c1eac3cb18ec1c82b122e210f964652c33a
+  data.tar.gz: ff32ea7dad5cadb5f6d88ca444bb803033681f7845c99d4371645e0000da87de6d40609cf46d4c9fa4121cbca36cd2678ba519a49c127ade364fd6616e9d49ae

data/README.md

@@ -117,6 +117,12 @@ $> npx tailwindcss -i app/assets/stylesheets/scrapbook/application.tailwind.css
 (Note, the "tailwindcss-rails" gem currently doesn't support Rails engines, so we have to
 install and run Tailwind manually.)
 
+## Updating the Turbo javascript
+
+- Download the compiled JS file from the turbo rails gem. (The releases on the Turbo website
+  didn't include it.)
+- Comment out or remove the `export` statement towards the end.
+
 ## License
 
 Copyright 2022 Brad Lindsay

data/app/assets/builds/scrapbook/application.css

@@ -1 +1 @@
-/*! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}[multiple]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=email]:focus,[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,[type=week]:focus,select:focus,textarea:focus{outline:2px solid #0000;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;color-adjust:exact}[multiple]{background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow:0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid #0000;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:#0000;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")}[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=checkbox]:indeterminate,[type=radio]:checked:focus,[type=radio]:checked:hover{border-color:#0000;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");background-size:100% 100%;background-position:50%;background-repeat:no-repeat}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{border-color:#0000;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px auto -webkit-focus-ring-color}body>nav li{cursor:default}body>nav a,body>nav a:active,body>nav a:hover,body>nav a:visited{color:#0f172a;cursor:default;text-decoration:none;transition:background-color 80ms linear;font-weight:400;font-size:unset;line-height:inherit}body>nav a:hover{background-color:#f0f9ff}body>nav a:active{background-color:#bae6fd}*,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.block{display:block}.flex{display:flex}.contents{display:contents}.h-screen{height:100vh}.h-full{height:100%}.w-screen{width:100vw}.w-full{width:100%}.min-w-\[20ch\]{min-width:20ch}.max-w-\[50\%\]{max-width:50%}.flex-none{flex:none}.overflow-scroll{overflow:scroll}.border-0{border-width:0}.border-r{border-right-width:1px}.border-solid{border-style:solid}.border-sky-700{--tw-border-opacity:1;border-color:rgb(3 105 161/var(--tw-border-opacity))}.bg-sky-100{--tw-bg-opacity:1;background-color:rgb(224 242 254/var(--tw-bg-opacity))}.\!px-0{padding-left:0!important;padding-right:0!important}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.children\:px-4>*{padding-left:1rem;padding-right:1rem}
+/*! tailwindcss v3.2.1 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}[multiple]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=email]:focus,[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,[type=week]:focus,select:focus,textarea:focus{outline:2px solid #0000;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow:0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid #0000;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:#0000;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")}[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=checkbox]:indeterminate,[type=radio]:checked:focus,[type=radio]:checked:hover{border-color:#0000;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");background-size:100% 100%;background-position:50%;background-repeat:no-repeat}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{border-color:#0000;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}body>nav li{cursor:default}body>nav a,body>nav a:active,body>nav a:hover,body>nav a:visited{color:#0f172a;cursor:default;text-decoration:none;transition:background-color 80ms linear;font-weight:400;font-size:unset;line-height:inherit}turbo-frame{display:block}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.block{display:block}.flex{display:flex}.contents{display:contents}.h-screen{height:100vh}.h-full{height:100%}.w-screen{width:100vw}.w-full{width:100%}.min-w-\[20ch\]{min-width:20ch}.max-w-\[50\%\]{max-width:50%}.flex-none{flex:none}.grow{flex-grow:1}.overflow-scroll{overflow:scroll}.border-0{border-width:0}.border-r{border-right-width:1px}.border-solid{border-style:solid}.border-sky-700{--tw-border-opacity:1;border-color:rgb(3 105 161/var(--tw-border-opacity))}.\!px-0{padding-left:0!important;padding-right:0!important}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}summary{list-style:none}summary::-webkit-details-marker{display:none}details>summary:before{content:"▶︎";font-size:.8rem;flex:none;line-height:1.6rem;margin-right:.4rem;transition:rotate .2s ease-in-out}details[open]>summary:before{rotate:90deg;transition:rotate .2s ease-in-out}.hover\:bg-sky-50:hover{--tw-bg-opacity:1;background-color:rgb(240 249 255/var(--tw-bg-opacity))}.active\:bg-sky-200:active{--tw-bg-opacity:1;background-color:rgb(186 230 253/var(--tw-bg-opacity))}.children\:px-4>*{padding-left:1rem;padding-right:1rem}.\[\&\:has\(\[aria-current\=page\]\)\]\:bg-sky-100:has([aria-current=page]){--tw-bg-opacity:1;background-color:rgb(224 242 254/var(--tw-bg-opacity))}

data/app/assets/config/scrapbook_manifest.js

@@ -1 +1,2 @@
 //= link_directory ../stylesheets/scrapbook .css
+//= link_directory ../javascripts .js

data/app/assets/javascripts/scrapbook/application.js

@@ -0,0 +1,115 @@
+//= require scrapbook/turbo.min
+
+function ready(fn) {
+  if (document.readyState !== 'loading') {
+    fn()
+  } else {
+    document.addEventListener('DOMContentLoaded', fn)
+  }
+}
+ready(() => {
+  const scrapbook_root_path = document.head.querySelector("meta[name=scrapbook-root]").content
+
+  function buildInitialTree() {
+    const paths = window.location.pathname.substring(scrapbook_root_path.length).split("/")
+    if (paths.length === 1 && paths[0] === "") { return }
+
+    fetch(scrapbook_root_path)
+      .then((response) => response.text())
+      .then((data) => {
+        const root = document.createElement('html')
+        const nav = document.getElementById('folder_listing')
+        const frame = nav.querySelector('turbo-frame')
+
+        root.innerHTML = data
+        // Keep the nav element to keep listeners on it intact.
+        nav.innerHTML = root.querySelector('#folder_listing').innerHTML
+        setCurrent()
+
+        openFolderPath(window.location.pathname, scrapbook_root_path + paths[0])
+      })
+      .catch((error) => {
+        console.error("Unknown error:", error)
+      })
+  }
+
+  function openFolderPath(path, currentSubPath = scrapbook_root_path) {
+    const frame = document.querySelector('turbo-frame[src="' + currentSubPath + '"]')
+    if (!frame) { return }
+
+    if (path !== currentSubPath)
+      frame.addEventListener('turbo:frame-render', () => {
+        nextSegment = path.replace(currentSubPath + '/', '').split('/')[0]
+        openFolderPath(path, currentSubPath + '/' + nextSegment)
+      }, {once: true})
+    frame.parentElement.open = true
+  }
+
+  function runOpenFor(ids) {
+    const idsLeft = []
+    const framesFound = []
+
+    ids.forEach((id) => {
+      let frame = document.getElementById(id)
+      !frame ? idsLeft.push(id) : framesFound.push(frame)
+    })
+
+    framesFound.forEach((frame) => {
+      frame.addEventListener('turbo:frame-render', () => {
+        runOpenFor(idsLeft)
+      }, {once: true})
+      frame.parentElement.open = true
+    })
+  }
+
+  function setCurrent(link = document.querySelector('#folder_listing a[href="' + window.location.pathname + '"]')) {
+    if (link === null) { return }
+
+    oldSelection = document.querySelector('#folder_listing a[aria-current="page"]')
+    if (oldSelection == link) { return }
+
+    if (oldSelection) {
+      oldSelection.removeAttribute('aria-current', 'page')
+    }
+
+    link.setAttribute('aria-current', 'page')
+  }
+
+
+  buildInitialTree()
+  folderListingElem = document.getElementById("folder_listing")
+
+  // Update selection when a link is clicked
+  folderListingElem.addEventListener('click', (e) => {
+    const target = e.target
+    if (target.tagName != 'A') { return }
+
+    setCurrent(target)
+  })
+
+  // Every time a folder is opened, it's possible to be re-revealing the selected page.
+  folderListingElem.addEventListener('turbo:frame-render', () => {
+    setCurrent()
+  })
+
+  // Refresh trees when a folder is toggled back open
+  // The first time a details element is toggled open, the turbo frame lazily loads. This
+  // adds support for reloading whenever the element is closed and then re-opened. All
+  // turbo frames of any nested folders are also refreshed.
+  folderListingElem.addEventListener('toggle', (e) => {
+    if (!e.target.open) { return }
+    if ('loadedOnce' in e.target.dataset === false) {
+      e.target.dataset.loadedOnce = true
+      return
+    }
+
+    const idsToOpen = []
+    e.target.querySelectorAll('details[open] > turbo-frame').forEach(elem => idsToOpen.push(elem.id))
+
+    const firstFrame = document.getElementById(idsToOpen.shift())
+    firstFrame.addEventListener('turbo:frame-render', () => {
+      runOpenFor(idsToOpen)
+    }, {once: true})
+    firstFrame.reload()
+  }, {capture: true})
+})

data/app/assets/stylesheets/scrapbook/application.tailwind.css

@@ -22,11 +22,24 @@
     line-height:inherit;
   }
 
-  body > nav a:hover {
-    background-color: theme('colors.sky.50');
+  turbo-frame {
+    display: block;
   }
+}
 
-  body > nav a:active {
-    background-color: theme('colors.sky.200');
-  }
+summary { list-style: none; }
+summary::-webkit-details-marker { display: none; }
+
+details > summary::before {
+  content: "▶︎";
+  font-size: 0.8rem;
+  flex: none;
+  line-height: 1.6rem;
+  margin-right: 0.4rem;
+  transition: rotate 0.2s ease-in-out;
+}
+
+details[open] > summary::before {
+  rotate: 90deg;
+  transition: rotate 0.2s ease-in-out;
 }

data/app/controllers/scrapbook/pages_controller.rb

@@ -5,13 +5,19 @@ module Scrapbook
   class PagesController < ApplicationController
     self.view_paths = Engine.config.paths['app/views'].to_a
 
+    layout -> { false if request.headers.include?('Turbo-Frame') }
+
     def show
       return head(:not_found) if (scrapbook = find_scrapbook).nil?
 
       pathname = calculate_pathname(scrapbook, params[:id])
-      template = calculate_template
 
-      render locals: {scrapbook: scrapbook, pathname: pathname}, formats: [:html]
+      if request.headers['Turbo-Frame']&.start_with?('path_')
+        render partial: 'layouts/scrapbook/folder_listing',
+          locals: {scrapbook: scrapbook, pathname: pathname}
+      else
+        render locals: {scrapbook: scrapbook, pathname: pathname}, formats: [:html]
+      end
     end
 
     def raw

data/app/helpers/scrapbook/folder_listing_view_model.rb

@@ -3,12 +3,13 @@
 module Scrapbook
   # Model to assest list a folder's contents
   class FolderListingViewModel
-    attr_reader :view, :scrapbook, :pathname, :files, :folders
+    attr_reader :view, :scrapbook, :pathname, :files, :folders, :depth
 
     def initialize(view, scrapbook, pathname)
       self.view = view
       self.scrapbook = scrapbook
       self.pathname = pathname.directory? ? pathname : pathname.dirname
+      self.depth = calculate_depth
       self.folders, self.files = split_files_and_folders
     end
 
@@ -24,12 +25,18 @@ module Scrapbook
     end
 
     def header_name
-      root? ? "/#{scrapbook.name}" : "/#{pathname.basename}/"
+      root? ? scrapbook.name : pathname.basename.to_s
     end
 
     private
 
-    attr_writer :view, :scrapbook, :pathname, :files, :folders
+    attr_writer :view, :scrapbook, :pathname, :files, :folders, :depth
+
+    def calculate_depth
+      return 0 if pathname == scrapbook.pages_pathname
+
+      scrapbook.relative_page_pathname_for(pathname).descend.count
+    end
 
     def split_files_and_folders
       helper = HelperForView.new(view)

data/app/helpers/scrapbook/helper_for_view.rb

@@ -13,6 +13,23 @@ module Scrapbook
       view.short_page_path(scrapbook.relative_page_path_for(pathname))
     end
 
+    def nav_link_for(scrapbook:, pathname:, is_current: false, depth: 0, **kwargs)
+      link_name = pathname == scrapbook.pages_pathname ? scrapbook.name : pathname.basename
+      link_attrs = {
+        data: {'turbo-frame': 'page_content'},
+        class: %w[block w-100],
+        aria: {}
+      }
+      link_attrs[:style] = "padding-left: #{depth}rem;" if depth != 0
+      link_attrs[:aria][:current] = 'page' if is_current
+      link_attrs[:class].concat(Array(kwargs.delete(:class))) if kwargs.include?(:class)
+      link_attrs[:data].merge!(kwargs.delete(:data)) if kwargs.include?(:data)
+      link_attrs[:aria].merge!(kwargs.delete(:aria)) if kwargs.include?(:aria)
+      link_attrs.merge!(kwargs)
+
+      view.link_to(link_name, short_path_to(pathname, scrapbook), **link_attrs)
+    end
+
     def remove_handler_exts_from(pathname)
       pathname.dirname.join(
         pathname.basename.sub(/(?:.#{view.lookup_context.handlers.join('|.')})+\z/, '')

data/app/models/scrapbook/scrapbook.rb

@@ -43,6 +43,15 @@ module Scrapbook
       relative_path
     end
 
+    def relative_page_pathname_for(pathname)
+      relative_path = pathname.relative_path_from(pages_pathname)
+      if relative_path.to_s.start_with?('..')
+        raise ArgumentError, "Pathname isn't inside the scrapbook pages: #{relative_path}"
+      end
+
+      relative_path
+    end
+
     def ==(other)
       other.class == self.class && other.root == root
     end

data/app/views/layouts/scrapbook/_folder_listing.html.erb

@@ -2,8 +2,29 @@
   helper = Scrapbook::HelperForView.new(self)
   listing = Scrapbook::FolderListingViewModel.new(self, scrapbook, pathname)
   pathname_without_handler_exts = helper.remove_handler_exts_from(pathname)
+  indentation_depth = (local_assigns[:nav_depth] || listing.depth) + 1
+  selection_classes = "active:bg-sky-200 hover:bg-sky-50 [&:has([aria-current=page])]:bg-sky-100"
 %>
-<% unless listing.root? %><%= link_to "‹ #{listing.parent_display_name}", helper.short_path_to(listing.pathname.parent), class: 'back-to-parent block w-100' %><% end %>
-<header aria-label="Which folder's contents" class="text-2xl <%= listing.pathname == pathname ? 'bg-sky-100' : '!px-0 children:px-4' %>"><% if listing.pathname == pathname %><span aria-current="page"><%= listing.header_name %></span><% else %><%= link_to(listing.header_name, helper.short_path_to(listing.pathname), class: 'block w-100') %><% end %></header>
-<ul class="!px-0" aria-label="Sub-folders"><% listing.folders.each do |folder| %><li class="children:px-4"><%= link_to "#{folder.basename}/", helper.short_path_to(folder, scrapbook), class: 'block w-100' %></li><% end %></ul>
-<ul class="!px-0" aria-label="Sub-files"><% listing.files.each do |file| %><% next if listing.folders.include?(file) %><li class="children:px-4"><% if file == pathname_without_handler_exts %><span class="block w-100 bg-sky-100" aria-current="page"><%= file.basename %></span><% else %><%= link_to file.basename, helper.short_path_to(file, scrapbook), class: 'block w-100' %><% end %></li><% end %></ul>
+<% unless listing.root? %><%= link_to "‹ #{listing.parent_display_name}", helper.short_path_to(listing.pathname.parent, scrapbook), class: 'back-to-parent block w-100' %><% end %>
+<header aria-label="Which folder's contents" class="text-2xl !px-0 children:px-4 <%= selection_classes %>">
+  <%= helper.nav_link_for(scrapbook: scrapbook, pathname: listing.pathname, is_current: pathname == listing.pathname) %>
+</header>
+<turbo-frame id="path_<%= pathname.hash %>">
+  <ul aria-label="Sub-folders">
+  <% listing.folders.each do |folder| %>
+    <li>
+      <details>
+        <summary class="flex <%= selection_classes %>" style="padding-left: <%= indentation_depth %>rem;">
+          <%= helper.nav_link_for(scrapbook: scrapbook, pathname: folder, class: 'grow') %>
+        </summary>
+        <turbo-frame id="path_<%= folder.hash %>" src="<%= helper.short_path_to(folder, scrapbook) %>" loading="lazy"></turbo-frame>
+      </details>
+    </li>
+  <% end %>
+  </ul>
+  <ul aria-label="Sub-files">
+  <% listing.files.each do |file| %><% next if listing.folders.include?(file) %>
+    <li class="<%= selection_classes %>"><%= helper.nav_link_for(scrapbook: scrapbook, pathname: file, is_current: file == pathname_without_handler_exts, depth: indentation_depth) %></li>
+  <% end %>
+  </ul>
+</turbo-frame>

data/app/views/layouts/scrapbook/application.html.erb

@@ -6,9 +6,14 @@
   <%= csp_meta_tag %>
 
   <%= stylesheet_link_tag "scrapbook/application", media: "all", "data-turbo-track": "reload" %>
+  <%= javascript_include_tag "scrapbook/application" %>
+  <meta name="scrapbook-root" content="<%= root_path %>">
 </head>
 <body class="flex">
-  <nav class="flex-none min-w-[20ch] max-w-[50%] h-screen overflow-scroll children:px-4 py-2 border-solid border-sky-700 border-0 border-r"><%= render 'layouts/scrapbook/folder_listing', scrapbook: local_assigns[:scrapbook], pathname: local_assigns[:pathname] %></nav>
+  <nav id="folder_listing" class="flex-none min-w-[20ch] max-w-[50%] h-screen overflow-scroll border-solid border-sky-700 border-0 border-r"><%= render 'layouts/scrapbook/folder_listing', scrapbook: local_assigns[:scrapbook], pathname: local_assigns[:pathname], nav_depth: 0 %></nav>
   <main class="py-2 px-4 h-screen w-screen overflow-scroll"><%= yield %></main>
+  <script type="text/javascript">
+
+  </script>
 </body>
 </html>

data/app/views/scrapbook/pages/show.html.erb

@@ -1 +1,3 @@
-<iframe src="<%= raw_page_path(scrapbook.relative_page_path_for(pathname)) %>" class="w-full h-full"></iframe>
+<turbo-frame id="page_content" class="w-full h-full" data-turbo-action="advance">
+  <iframe src="<%= raw_page_path(scrapbook.relative_page_path_for(pathname)) %>" class="w-full h-full"></iframe>
+</turbo-frame>

data/lib/generators/scrapbook/install_generator.rb

@@ -21,7 +21,8 @@ module Scrapbook
       relative_path = 'app/assets/config/manifest.js'
       return unless FileTest.exist?(File.expand_path(relative_path, destination_root))
 
-      insert_into_file(relative_path, '//= link scrapbook/application.css')
+      insert_into_file(relative_path, "//= link scrapbook/application.css\n")
+      insert_into_file(relative_path, "//= link scrapbook/application.js\n")
     end
   end
 end

data/lib/scrapbook/engine.rb

@@ -11,9 +11,7 @@ module Scrapbook
 
     initializer 'scrapbook.assets' do |app|
       if app.config.scrapbook.precompile_assets && app.config.respond_to?(:assets)
-        app.config.assets.precompile.concat %w[
-          scrapbook/application.css
-        ]
+        app.config.assets.precompile.push('scrapbook/application.css')
       end
     end
   end

data/lib/scrapbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Scrapbook
-  VERSION = '0.2.2'
+  VERSION = '0.3.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: scrapbook
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.3.0
 platform: ruby
 authors:
 - Brad Lindsay
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-10-01 00:00:00.000000000 Z
+date: 2023-06-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -43,6 +43,7 @@ files:
 - Rakefile
 - app/assets/builds/scrapbook/application.css
 - app/assets/config/scrapbook_manifest.js
+- app/assets/javascripts/scrapbook/application.js
 - app/assets/stylesheets/scrapbook/application.tailwind.css
 - app/controllers/scrapbook/application_controller.rb
 - app/controllers/scrapbook/empty_controller.rb
@@ -50,7 +51,6 @@ files:
 - app/helpers/scrapbook/application_helper.rb
 - app/helpers/scrapbook/folder_listing_view_model.rb
 - app/helpers/scrapbook/helper_for_view.rb
-- app/mailers/scrapbook/application_mailer.rb
 - app/models/scrapbook/scrapbook.rb
 - app/views/layouts/scrapbook/_folder_listing.html.erb
 - app/views/layouts/scrapbook/application.html.erb

data/app/mailers/scrapbook/application_mailer.rb

@@ -1,8 +0,0 @@
-# frozen_string_literal: true
-
-module Scrapbook
-  class ApplicationMailer < ActionMailer::Base
-    default from: 'from@example.com'
-    layout 'mailer'
-  end
-end