├── content ├── assets │ ├── .gitkeep │ └── assets.yaml ├── trees │ └── .gitkeep ├── collections │ ├── .gitkeep │ ├── articles.yaml │ └── articles │ │ ├── 1996-11-18.dance.md │ │ ├── 1996-08-16.nectar.md │ │ └── 1994-07-05.magic.md ├── globals │ ├── .gitkeep │ └── settings.yaml ├── navigation │ └── .gitkeep └── taxonomies │ └── .gitkeep ├── public ├── assets │ ├── .gitkeep │ └── content │ │ ├── lagoa.jpg │ │ ├── surge.jpg │ │ ├── reebok-pumps.jpg │ │ └── .meta │ │ ├── surge-soda-can-feature.jpg.yaml │ │ ├── lagoa.jpg.yaml │ │ ├── surge.jpg.yaml │ │ └── reebok-pumps.jpg.yaml ├── fonts │ ├── ibm_vga8.woff │ └── ibm_vga8.woff2 └── build │ ├── assets │ ├── ibm_vga8-CPxoLRKf.woff2 │ ├── ibm_vga8-euaoFEp9.woff │ └── site-D72fQdmO.css │ └── manifest.json ├── resources ├── js │ ├── site.js │ ├── cp.js │ ├── KeyboardLink.vue │ └── LinkToolbar.vue ├── views │ ├── .gitkeep │ ├── errors │ │ └── 404.antlers.html │ ├── components │ │ └── link-toolbar.antlers.html │ ├── home.antlers.html │ ├── article.antlers.html │ └── layout.antlers.html ├── blueprints │ ├── .gitkeep │ ├── collections │ │ └── articles │ │ │ └── article.yaml │ └── globals │ │ └── settings.yaml ├── fonts │ ├── ibm_vga8.woff │ └── ibm_vga8.woff2 └── css │ ├── tailwind.css │ └── site.css ├── postcss.config.js ├── starter-kit.yaml ├── vite.config.js ├── composer.json ├── package.json ├── routes └── web.php ├── tailwind.config.js └── README.md /content/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /content/trees/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /resources/js/site.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /content/collections/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /content/globals/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /content/navigation/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /content/taxonomies/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /resources/views/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /resources/blueprints/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /content/assets/assets.yaml: -------------------------------------------------------------------------------- 1 | title: Assets 2 | disk: assets -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/fonts/ibm_vga8.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statamic/starter-kit-doogie-browser/HEAD/public/fonts/ibm_vga8.woff -------------------------------------------------------------------------------- /public/fonts/ibm_vga8.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statamic/starter-kit-doogie-browser/HEAD/public/fonts/ibm_vga8.woff2 -------------------------------------------------------------------------------- /public/assets/content/lagoa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statamic/starter-kit-doogie-browser/HEAD/public/assets/content/lagoa.jpg -------------------------------------------------------------------------------- /public/assets/content/surge.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statamic/starter-kit-doogie-browser/HEAD/public/assets/content/surge.jpg -------------------------------------------------------------------------------- /resources/fonts/ibm_vga8.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statamic/starter-kit-doogie-browser/HEAD/resources/fonts/ibm_vga8.woff -------------------------------------------------------------------------------- /resources/fonts/ibm_vga8.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statamic/starter-kit-doogie-browser/HEAD/resources/fonts/ibm_vga8.woff2 -------------------------------------------------------------------------------- /public/assets/content/reebok-pumps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statamic/starter-kit-doogie-browser/HEAD/public/assets/content/reebok-pumps.jpg -------------------------------------------------------------------------------- /public/assets/content/.meta/surge-soda-can-feature.jpg.yaml: -------------------------------------------------------------------------------- 1 | data: { } 2 | size: 76240 3 | last_modified: 1579206544 4 | width: 1500 5 | height: 750 6 | -------------------------------------------------------------------------------- /public/build/assets/ibm_vga8-CPxoLRKf.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statamic/starter-kit-doogie-browser/HEAD/public/build/assets/ibm_vga8-CPxoLRKf.woff2 -------------------------------------------------------------------------------- /public/build/assets/ibm_vga8-euaoFEp9.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statamic/starter-kit-doogie-browser/HEAD/public/build/assets/ibm_vga8-euaoFEp9.woff -------------------------------------------------------------------------------- /resources/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss/base"; 2 | 3 | @import "site"; 4 | 5 | @import "tailwindcss/components"; 6 | 7 | @import "tailwindcss/utilities"; 8 | -------------------------------------------------------------------------------- /resources/views/errors/404.antlers.html: -------------------------------------------------------------------------------- 1 |
2 |

404 Page not found

3 |
4 | -------------------------------------------------------------------------------- /public/assets/content/.meta/lagoa.jpg.yaml: -------------------------------------------------------------------------------- 1 | data: { } 2 | size: 317647 3 | last_modified: 1729225326 4 | width: 1344 5 | height: 896 6 | mime_type: image/jpeg 7 | duration: null 8 | -------------------------------------------------------------------------------- /public/assets/content/.meta/surge.jpg.yaml: -------------------------------------------------------------------------------- 1 | data: { } 2 | size: 66884 3 | last_modified: 1729225326 4 | width: 1500 5 | height: 750 6 | mime_type: image/jpeg 7 | duration: null 8 | -------------------------------------------------------------------------------- /public/assets/content/.meta/reebok-pumps.jpg.yaml: -------------------------------------------------------------------------------- 1 | data: { } 2 | size: 82743 3 | last_modified: 1729225326 4 | width: 940 5 | height: 611 6 | mime_type: image/jpeg 7 | duration: null 8 | -------------------------------------------------------------------------------- /content/collections/articles.yaml: -------------------------------------------------------------------------------- 1 | title: Articles 2 | route: '{slug}' 3 | template: article 4 | revisions: false 5 | date: true 6 | date_behavior: 7 | past: public 8 | future: private 9 | -------------------------------------------------------------------------------- /starter-kit.yaml: -------------------------------------------------------------------------------- 1 | export_paths: 2 | - content 3 | - resources/blueprints 4 | - resources/css 5 | - resources/js 6 | - resources/views 7 | - resources/fonts 8 | - routes/web.php 9 | - public/assets 10 | - public/build 11 | - package.json 12 | - postcss.config.js 13 | - tailwind.config.js 14 | - vite.config.js 15 | - README.md 16 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import laravel from 'laravel-vite-plugin'; 3 | import vue from '@vitejs/plugin-vue'; 4 | 5 | export default defineConfig({ 6 | plugins: [ 7 | laravel({ 8 | input: [ 9 | 'resources/css/site.css', 10 | ], 11 | refresh: true, 12 | }), 13 | ], 14 | }); 15 | -------------------------------------------------------------------------------- /content/globals/settings.yaml: -------------------------------------------------------------------------------- 1 | id: 9242876a-41c4-42f8-96f8-ac92d6025406 2 | title: Settings 3 | data: 4 | site_name: 'My Secret Public Diary' 5 | links: 6 | - 7 | name: Home 8 | url: '/' 9 | - 10 | name: Twitter 11 | url: 'https://twitter.com/statamic' 12 | - 13 | name: Github 14 | url: 'https://github.com/statamic/starter-kit-doogie-browser' 15 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "statamic/starter-kit-doogie-browser", 3 | "extra": { 4 | "statamic": { 5 | "name": "Starter Kit Doogie Browser", 6 | "description": "Statamic Starter Kit: Doogie Browser" 7 | } 8 | }, 9 | "scripts": { 10 | "post-create-project-cmd": [ 11 | "@php upgrade-cli-notice.php" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /resources/js/cp.js: -------------------------------------------------------------------------------- 1 | /** 2 | * When extending the control panel, be sure to uncomment the necessary code for your build process: 3 | * https://statamic.dev/extending/control-panel 4 | */ 5 | 6 | // import ExampleFieldtype from './components/fieldtypes/ExampleFieldtype.vue'; 7 | 8 | // Statamic.booting(() => { 9 | // Statamic.$components.register('example-fieldtype', ExampleFieldtype); 10 | // }); 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "type": "module", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build" 7 | }, 8 | "devDependencies": { 9 | "@vitejs/plugin-vue": "^5.1.4", 10 | "autoprefixer": "^10.4.19", 11 | "laravel-vite-plugin": "^1.0.2", 12 | "postcss": "^8.4.38", 13 | "tailwindcss": "^3.4.3", 14 | "vite": "^5.2.8" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /resources/views/components/link-toolbar.antlers.html: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /public/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "resources/css/site.css": { 3 | "file": "assets/site-D72fQdmO.css", 4 | "src": "resources/css/site.css", 5 | "isEntry": true 6 | }, 7 | "resources/fonts/ibm_vga8.woff": { 8 | "file": "assets/ibm_vga8-euaoFEp9.woff", 9 | "src": "resources/fonts/ibm_vga8.woff" 10 | }, 11 | "resources/fonts/ibm_vga8.woff2": { 12 | "file": "assets/ibm_vga8-CPxoLRKf.woff2", 13 | "src": "resources/fonts/ibm_vga8.woff2" 14 | } 15 | } -------------------------------------------------------------------------------- /resources/js/KeyboardLink.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 26 | -------------------------------------------------------------------------------- /routes/web.php: -------------------------------------------------------------------------------- 1 | 'Home' 18 | ]); 19 | -------------------------------------------------------------------------------- /resources/views/home.antlers.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | {{ settings:site_name }} 4 |

5 |

6 |
7 | {{ collection:articles }} 8 |
9 | {{ date format="Y_m_d" }} 10 | 11 | {{ title }} 12 |
13 | {{ /collection:articles }} 14 |
15 | -------------------------------------------------------------------------------- /resources/blueprints/collections/articles/article.yaml: -------------------------------------------------------------------------------- 1 | title: Article 2 | sections: 3 | main: 4 | display: Main 5 | fields: 6 | - 7 | handle: title 8 | field: 9 | type: text 10 | display: Title 11 | - 12 | handle: content 13 | field: 14 | type: markdown 15 | display: Content 16 | restrict: false 17 | automatic_line_breaks: true 18 | automatic_links: false 19 | escape_markup: false 20 | smartypants: false 21 | - 22 | handle: excerpt 23 | field: 24 | type: textarea 25 | display: Excerpt 26 | character_limit: 160 27 | - 28 | handle: author 29 | field: 30 | type: users 31 | display: Author 32 | default: current 33 | max_items: 1 34 | -------------------------------------------------------------------------------- /resources/blueprints/globals/settings.yaml: -------------------------------------------------------------------------------- 1 | title: 'Global Settings' 2 | sections: 3 | main: 4 | display: Main 5 | fields: 6 | - 7 | handle: site_name 8 | field: 9 | type: text 10 | display: 'Site Name' 11 | - 12 | handle: links 13 | field: 14 | fields: 15 | - 16 | handle: name 17 | field: 18 | type: text 19 | display: Name 20 | - 21 | handle: url 22 | field: 23 | type: text 24 | display: URL 25 | mode: table 26 | add_row: 'Add Link' 27 | reorderable: true 28 | type: grid 29 | instructions: 'Set links in the bottom nav bar. A keyboard shortcut will be assigned to the first letter of the name.' 30 | display: Links 31 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | content: [ 3 | './resources/**/*.antlers.html', 4 | './resources/**/*.antlers.php', 5 | './resources/**/*.blade.php', 6 | './resources/**/*.vue', 7 | './content/**/*.md', 8 | ], 9 | 10 | theme: { 11 | boxShadow: { 12 | DEFAULT: '0 20px 0px -10px black', 13 | none: 'none', 14 | }, 15 | colors: { 16 | transparent: 'transparent', 17 | black: '#000000', 18 | white: '#ffffff', 19 | aqua: '#20d2ff', 20 | 'aqua-light': '#7cdcf5', 21 | blue: '#0030ff', 22 | red: '#bf0000', 23 | gray: '#eeeeee', 24 | }, 25 | fontFamily: { 26 | mono: [ 27 | 'ibm_vga8', 28 | 'monospaced' 29 | ], 30 | }, 31 | fontSize: { 32 | base: '1.35rem', 33 | lg: '1.55rem', 34 | xl: '2rem', 35 | }, 36 | }, 37 | }; 38 | -------------------------------------------------------------------------------- /resources/views/article.antlers.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | {{ collection:newer limit="1" }} 4 | 5 | <<< 6 | 7 | {{ /collection:newer }} 8 | 9 | {{ title }} 10 | 11 | {{ collection:older limit="1" }} 12 | 13 | >>> 14 | 15 | {{ /collection:older }} 16 |

17 |
18 | 19 |
20 | {{ glide:batch width="640" height="480" fit="crop" pixelate="4" }} 21 | {{ content | remove_left("

") | ensure_left("

{date}...") | widont }} 22 | {{ /glide:batch}} 23 |

24 | -------------------------------------------------------------------------------- /resources/js/LinkToolbar.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 44 | -------------------------------------------------------------------------------- /resources/views/layout.antlers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{ title }} — {{ settings:site_name }} 8 | 9 | 10 | {{ vite src="resources/css/site.css" }} 11 | 12 | 13 | 14 |
15 |
16 |
17 | {{ template_content }} 18 |
19 |
20 |
21 | {{ partial:components/link-toolbar }} 22 | Powered by Statamic 23 |
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /resources/css/site.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss/base"; 2 | @import "tailwindcss/components"; 3 | @import "tailwindcss/utilities"; 4 | 5 | @font-face { 6 | font-family: 'ibm_vga8'; 7 | font-style: normal; 8 | font-weight: normal; 9 | src: url('/resources/fonts/ibm_vga8.woff2') format('woff2'), 10 | url('/resources/fonts/ibm_vga8.woff') format('woff'); 11 | } 12 | 13 | mark { 14 | @apply bg-transparent text-red; 15 | } 16 | 17 | .content { 18 | 19 | p { 20 | @apply mb-6; 21 | } 22 | 23 | h1, h2, h3, h4, h5, h6 { 24 | @apply text-lg uppercase; 25 | } 26 | 27 | a { 28 | @apply bg-white text-blue px-1; 29 | &:hover { 30 | @apply text-red; 31 | } 32 | } 33 | 34 | ul:not(.list-none) { 35 | @apply pl-0 ml-16 mb-6; 36 | list-style-type: square; 37 | li { 38 | @apply mb-1; 39 | } 40 | } 41 | 42 | > blockquote { 43 | @apply font-bold text-xl mb-6 border-l-4 border-aqua pl-8 ml-8 py-8; 44 | p:last-child { 45 | margin-bottom: 0; 46 | } 47 | } 48 | 49 | img { 50 | @apply border-4 mb-4 max-w-full; 51 | } 52 | 53 | > table { 54 | @apply w-auto text-left border-2 border-collapse mb-6; 55 | th { 56 | @apply py-1 px-4 uppercase tracking-widest border-2; 57 | } 58 | 59 | td { 60 | @apply py-1 px-4 border-2; 61 | } 62 | 63 | p { 64 | @apply leading-normal; 65 | } 66 | } 67 | } 68 | 69 | @screen lg { 70 | .content img { 71 | @apply float-left mr-8; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |

Statamic Logo

3 | 4 |

5 | Statamic Starter Kit: Doogie Browser 6 |

7 | 8 | > View on the [Statamic Marketplace](https://statamic.com/starter-kits/statamic/doogie-browser)! 9 | 10 | 11 | ## Features 12 | - Articles blogging collection with homepage listing 13 | - Markdown focused writing experience 14 | - Keyboard shortcuts for navigation (left/right for previous/next entry) 15 | - Customizable link/toolbar with keyboard shortcuts 16 | - Old school Doogie Howser/IBM word processor design 17 | - Automatic downsampling of all images for that cutting-edge VGA feel 18 | - "Typography" using [IBM VGA8](https://int10h.org/oldschool-pc-fonts/fontlist/#ibmvgamcga) 19 | - Responsive (even that wasn't a thing in the DOS days) 20 | - Built with [TailwindCSS](https://tailwindcss.com) 21 | - :100: Lighthouse score 22 | 23 | 24 | ## Quick Start 25 | 26 | ### 1. Create a new site 27 | 28 | You can create a new site using the [Statamic CLI](https://github.com/statamic/cli): 29 | 30 | ``` 31 | statamic new your-site statamic/starter-kit-doogie-browser 32 | ``` 33 | 34 | Or you can install manually into a fresh [Statamic installation](https://statamic.dev/installation) by running: 35 | 36 | ``` 37 | php please starter-kit:install statamic/starter-kit-doogie-browser --clear-site 38 | ``` 39 | 40 | ### 2. Make a new user 41 | 42 | The above installers should prompt you to make a user, but you can also run `php please make:user`. You'll want it to be a `super` so you have access to everything. 43 | 44 | ### 3. Recompile the CSS and JS (optional) 45 | 46 | This starter kit comes with precompiled CSS and JS. If you want to modify anything, just recompile it. 47 | 48 | ``` 49 | npm i && npm run dev 50 | ``` 51 | 52 | To compile for production again: 53 | 54 | ``` 55 | npm run build 56 | ``` 57 | 58 | ### 4. Do your thing! 59 | 60 | If you're using [Laravel Herd](https://herd.laravel.com/) (or similar), your site should be available at `http://your-site.test`. You can access the control panel at `http://your-site.test/cp` and login with your new user. Open up the source code, follow along with the [Statamic docs](https://statamic.dev), and enjoy! 61 | 62 | ## Contributing 63 | 64 | Contributions are always welcome, no matter how large or small. Before contributing, please read the [code of conduct](https://github.com/statamic/cms/wiki/Code-of-Conduct). 65 | -------------------------------------------------------------------------------- /content/collections/articles/1996-11-18.dance.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: | 3 | "Dance Like No One is Watching" Is Bad Advice 4 | excerpt: 'The Macarena is an international hit & dance craze. The song is inspired by flamenco dancer Diana Herrera''s beauty, but do you know where the dance came from?' 5 | id: 7ac0bdda-1b84-45f8-ac52-2575dd7e8251 6 | --- 7 | The Macarena by Los Del Rio (Remixed by the Bayside Boys) has been #1 on the charts for 14 weeks in a row. 8 | 9 | It's an international hit and dance craze. Rumor has it that the band spotted a beautiful flamenco dancer named Diana Patricia Cubillan Herrera at a private party held by the Venezuelan empresario in Venezuela. Her beauty and grace inspired them to write the song, and the rest is history. 10 | 11 | But do you know where the dance featured in their [music video](https://www.youtube.com/watch?v=MXVx6yJQbn8) (released earlier this year) came from? No, of course you don't. 12 | 13 | ## It happened in Rio 14 | 15 | Last spring I was vacationing in Rio with my family. We had been there a few weeks, staying in a friend of the family's villa in the quiet area of Lagoa. 16 | 17 | ![Lagoa](/assets/content/lagoa.jpg) 18 | 19 | My sisters were out kayaking on the lake just after sunrise one morning and I had just finished a bit of yoga on the roof to limber up. My mother always told me to dance like no one is watching, so I had grown accustom to practicing my soul moves without care for anyone passing by. 20 | 21 | I had just finished my series of self-healing moves focused on loving and hugging yourself when two older men in black suits waved up at me. 22 | 23 | > “Buenos movimientos, chico!” 24 | 25 | I waved back and shouted my thanks. They went on with their day, and I with mine and soon I forgot about the exchange. 26 | 27 | The next day they were back. And the next. On the fourth day they had a small crowd with them and a video camera – one of those fancy new handheld ones that used the little mini tapes. I wanted one of those. 28 | 29 | I finished my movements quickly and headed down the back stairs to meet these would-be fans. But when I rounded the corner they were gone. 30 | 31 | I didn't see them again after that. I asked around the neighborhood and discovered that they were a famous Spanish musical duo on an extended tour through South America. 32 | 33 | Imagine my surprise when the Macarena dance took the world by storm. I don't begrudge the world my moves – they have such meaning packed into them and everyone with an open mind can learn their lessons – but I never got so much as a thank you, nor did I earn a dime. 34 | 35 | ## The worst part 36 | 37 | The part of this story that bums me out the most, however, is that now when I dance my soul dance, people think I'm following a fad. Now I must be certain no one is watching when I dance. 38 | 39 | **Oh, how I've longed to share my story!** I thank you for listening. May you live long and dance your own dance without care or consequence. 40 | -------------------------------------------------------------------------------- /content/collections/articles/1996-08-16.nectar.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Nectar of the Gods' 3 | excerpt: 'The time had come. We had seen the commercials. This was our first foray into the underground competitive world of Surge.' 4 | id: 8e4b4e60-5dfb-47b0-a2d7-a904d64aeb80 5 | --- 6 | The day started just like any other. Wake up at 5:30am, brush my teeth, bathe in a tub of warm milk, and trim my toenails while quietly resenting the fact that _Flipper_ was on Nickelodeon at this hour instead of _Rocko's Modern Life_. That would have to wait until 5:30*pm* for that, and I am impatient. 7 | 8 | In truth, the day would likely be spent slogging my way through _Gumby_, _Rugrats_, _Muppet Babies_, _Allegra's Window_, _Gullah Gullah Island_, _Eureeka's Castle_, and numerous other shows fit for my little sister before I could hang with Rocko. But I digress. My life was about to change. 9 | 10 | The doorbell rang. It was 11am and I opened the door to see my friend Matt standing there with a maniacal grin on his face. Behind him, toppled furniture was scattered about my yard and a dozen neighborhood kids were arranged in a haphazard circle. In the center of this ring of humans stood a tall pedestal upon which rested a cylindrical and metallic green can. 11 | 12 | The time had come. We had seen the commercials. This was our first foray into the [underground competitive world](https://www.youtube.com/watch?v=CTY8hrvFck8) of Fully Loaded Citrus Sodas with Carbos. 13 | 14 | **Off to the side someone screamed the single word that would forever alter the course my life.** 15 | 16 | > “Surge!!!” 17 | 18 | As if bolt of lightning struck us all at once, we sprinted — nay, _hurled_ our bodies towards the pedestal without regard for life or limb. The collision of human bodies could be heard 6 blocks away as fists swung and hands clawed, hair tore away in chunks, buttons flew from plaid hoodies tied around waists, and sneakers took to the air, loose of their foots. 19 | 20 | I can't say how, or at what cost, but my hand closed around the ice cold can first. It was mine. The crowd fell back, subservient to the victor like the days of Sparticus, Crixus, and Marcus Attilius. I cracked the tab and a cool spray of citrus coated those lucky enough to be close. I tossed my head back and from the height of my upwards and outstretched arm, poured the sweet nectar of the gods down my throat. 21 | 22 | ![Surge](/assets/content/surge.jpg) 23 | 24 | ## Wherein I left my body 25 | 26 | I could hear a symphony from on high, replete with horns, trumpets, harps, and one very faint ukulele. My soul lifted up out of me and I was carried away in a torrent of joy. I looked down and for a brief moment I could see my body before a wave of carbo-laden sucrose crashed over my consciousness. 27 | 28 | I lost all sense of time. Did I surf the seas of maltodextrin for a minute? An hour? A year? Was Yellow #5 my brother? Truly I could not tell you, for I do not know. 29 | 30 | ## Wherein I returned 31 | 32 | My body was transformed. Lean muscle rippled with unbridled strength and my vision had become sharp and keen. My mind raced with access to deep wells of new knowledge and wisdom. I surveyed my lawn, the neighborhood, and my subordinates and knew my life would never be the same. 33 | 34 | **Victory is sweet. Surge is sweeter.** 35 | -------------------------------------------------------------------------------- /content/collections/articles/1994-07-05.magic.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'The Magic Happens at 7 1/2 Pumps' 3 | excerpt: 'It took me 2 years, 1 month, and 21 days to save up for a pair of Reebok Pumps. When I finally got them, they didn''t work as advertised. Or did they?' 4 | id: af43e0fb-a338-4433-b60a-3bed773be341 5 | --- 6 | Ever since the day Dee Brown pumped up his Reeboks and went on to win the 1991 NBA Slam Dunk Contest, I had been saving to buy a pair. 7 | 8 | It took me 2 years, 1 month, and 21 days, but I'm a proud owner of those black, white, and orange Reebok Pump Omni Lights. 9 | 10 | ![Reebok Pump Omni Lights](/assets/content/reebok-pumps.jpg) 11 | 12 | Only, they didn't work as advertised. The commercials promised that with just a few pumps and I'd soar like Jordan, like an eagle, like a feather on the wind. In reality, I lost 2mm on my vertical jump because they're heavier than my previous kicks. I was devastated, but determined. 13 | 14 | I hunted down a [VHS tape](https://www.youtube.com/watch?v=6uD8ZqkoM5E) of the dunk contest and watched it a dozen times. It was undeniable! Dee Brown lined up for a dunk bit first paused to reach down, pump his Reeboks, and immediately dazzled the crowd. This was no fluke. It was the shoes. I studied the footage. Closely, carefully, and methodically. 15 | 16 | At first it appeared that Dee pumped his sneakers 10 or 11 times. He really went to town on those things. But neither 10 pumps nor 11 pumps made any difference for me. In fact, 11 pumps started to cut off my circulation which one time caused me to stumble and fall into a chain link fence which left diamond shape marks on my face for the better part of a day. 17 | 18 | So I went full scientific method. In order, I tried: 19 | 20 | - 8 pumps 3 times 21 | - 9 pumps 3 times 22 | - 10 pumps 5 times 23 | - 11 pumps 5 times 24 | - 12 pumps once, even though 11 was already too many 25 | 26 | **Nothing.** Shame. Regret. I had spent almost 2 years of allowance on these sneakers! But then I noticed something. I was reviewing Dee's footage and even though the VHS tape was worn and tracking poorly from all the use, I saw it. 3 missed pumps and one single half pump. It's not clear if his fingers were sweaty and he mis-pumped a few times or perhaps he was masking the secret to his greatness. Either way, the secret knowledge was mine, and just time too because my VHS tape was worn thin and nearly unplayable. 27 | 28 | **The magic happens at 7 1/2 pumps.** 29 | 30 | With Dee and Reebok's secret knowledge in hand, I could dunk! I could soar! I began playing street ball downtown for money, and started to rake it in. I made friends more easily than any point in my life and enemies even easilier. I found I, just like Dee Brown, had to mask the number of pumps lest my competitors gain the hard-earned secret to my success. 31 | 32 | > “Where'd you learn how to jump like that, kid?” 33 | 34 | I spun around to see NBA legend Clyde Drexler towering over me. I had just schooled a trio of posers in a rousing game of 3-on-1 and had literally dunked over two of them at once. 35 | 36 | "Oh you know, here and there." I replied. He eyed my pumps. I eyed his pumps. We made eye content and something of a shared secret passed between us. The corner of his mouth cracked upwards in a smirk. "I expect I'll be seeing you in a few years, kid." 37 | 38 | I expect he shall. I expect very much indeed. 39 | -------------------------------------------------------------------------------- /public/build/assets/site-D72fQdmO.css: -------------------------------------------------------------------------------- 1 | *,:before,:after{--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-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--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: rgb(59 130 246 / .5);--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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::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-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--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: rgb(59 130 246 / .5);--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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html,:host{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,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}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,samp,pre{font-family:ibm_vga8,monospaced;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}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-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-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,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.relative{position:relative}.bottom-0{bottom:0}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.top-8{top:2rem}.my-8{margin-top:2rem;margin-bottom:2rem}.mb-8{margin-bottom:2rem}.mt-2{margin-top:.5rem}.block{display:block}.flex{display:flex}.hidden{display:none}.h-full{height:100%}.w-full{width:100%}.cursor-text{cursor:text}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-y-scroll{overflow-y:scroll}.rounded{border-radius:.25rem}.border-2{border-width:2px}.bg-aqua{--tw-bg-opacity: 1;background-color:rgb(32 210 255 / var(--tw-bg-opacity, 1))}.bg-blue{--tw-bg-opacity: 1;background-color:rgb(0 48 255 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.p-1{padding:.25rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.font-mono{font-family:ibm_vga8,monospaced}.text-base{font-size:1.35rem}.text-lg{font-size:1.55rem}.uppercase{text-transform:uppercase}.leading-normal{line-height:1.5}.leading-relaxed{line-height:1.625}.text-aqua-light{--tw-text-opacity: 1;color:rgb(124 220 245 / var(--tw-text-opacity, 1))}.text-blue{--tw-text-opacity: 1;color:rgb(0 48 255 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.shadow{--tw-shadow: 0 20px 0px -10px black;--tw-shadow-colored: 0 20px 0px -10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.ring{--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(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}@font-face{font-family:ibm_vga8;font-style:normal;font-weight:400;src:url(/build/assets/ibm_vga8-CPxoLRKf.woff2) format("woff2"),url(/build/assets/ibm_vga8-euaoFEp9.woff) format("woff")}mark{background-color:transparent;--tw-text-opacity: 1;color:rgb(191 0 0 / var(--tw-text-opacity, 1))}.content p{margin-bottom:1.5rem}.content h1,.content h2,.content h3,.content h4,.content h5,.content h6{font-size:1.55rem}.content h1,.content h2,.content h3,.content h4,.content h5,.content h6{text-transform:uppercase}.content a{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.content a{padding-left:.25rem;padding-right:.25rem}.content a{--tw-text-opacity: 1;color:rgb(0 48 255 / var(--tw-text-opacity, 1))}.content a:hover{--tw-text-opacity: 1;color:rgb(191 0 0 / var(--tw-text-opacity, 1))}.content ul:not(.list-none){margin-left:4rem}.content ul:not(.list-none){margin-bottom:1.5rem}.content ul:not(.list-none){padding-left:0}.content ul:not(.list-none){list-style-type:square}.content ul:not(.list-none) li{margin-bottom:.25rem}.content>blockquote{margin-bottom:1.5rem}.content>blockquote{margin-left:2rem}.content>blockquote{border-left-width:4px}.content>blockquote{--tw-border-opacity: 1;border-color:rgb(32 210 255 / var(--tw-border-opacity, 1))}.content>blockquote{padding-top:2rem;padding-bottom:2rem}.content>blockquote{padding-left:2rem}.content>blockquote{font-size:2rem}.content>blockquote{font-weight:700}.content>blockquote p:last-child{margin-bottom:0}.content img{margin-bottom:1rem}.content img{max-width:100%}.content img{border-width:4px}.content>table{margin-bottom:1.5rem}.content>table{width:auto}.content>table{border-collapse:collapse}.content>table{border-width:2px}.content>table{text-align:left}.content>table th{border-width:2px}.content>table th{padding-top:.25rem;padding-bottom:.25rem}.content>table th{padding-left:1rem;padding-right:1rem}.content>table th{text-transform:uppercase}.content>table th{letter-spacing:.1em}.content>table td{border-width:2px}.content>table td{padding-top:.25rem;padding-bottom:.25rem}.content>table td{padding-left:1rem;padding-right:1rem}.content>table p{line-height:1.5}@media (min-width: 1024px){.content img{float:left;margin-right:2rem}}.hover\:bg-gray:hover{--tw-bg-opacity: 1;background-color:rgb(238 238 238 / var(--tw-bg-opacity, 1))}.hover\:text-blue:hover{--tw-text-opacity: 1;color:rgb(0 48 255 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}@media (min-width: 768px){.md\:absolute{position:absolute}.md\:flex{display:flex}.md\:pb-2{padding-bottom:.5rem}}@media (min-width: 1024px){.lg\:absolute{position:absolute}.lg\:my-2{margin-top:.5rem;margin-bottom:.5rem}.lg\:mb-0{margin-bottom:0}.lg\:inline{display:inline}.lg\:h-10{height:2.5rem}.lg\:h-screen{height:100vh}.lg\:p-8{padding:2rem}.lg\:px-12{padding-left:3rem;padding-right:3rem}.lg\:py-12{padding-top:3rem;padding-bottom:3rem}} 2 | --------------------------------------------------------------------------------