var Component=(()=>{var m=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var g=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),b=(a,n)=>{for(var s in n)t(a,s,{get:n[s],enumerable:!0})},o=(a,n,s,l)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of u(n))!k.call(a,c)&&c!==s&&t(a,c,{get:()=>n[c],enumerable:!(l=h(n,c))||l.enumerable});return a};var y=(a,n,s)=>(s=a!=null?m(N(a)):{},o(n||!a||!a.__esModule?t(s,"default",{value:a,enumerable:!0}):s,a)),w=a=>o(t({},"__esModule",{value:!0}),a);var p=g((D,r)=>{r.exports=_jsx_runtime});var S={};b(S,{default:()=>v,frontmatter:()=>f});var e=y(p()),f={title:"Everything but the Kitchen Sink",description:"A Way to Test Features in MDX. Every article template needs a kitchen sink!",date:"2021-12-21T19:32:00.237Z"};function d(a){let n=Object.assign({p:"p",strong:"strong",code:"code",a:"a",h2:"h2",span:"span",blockquote:"blockquote",pre:"pre",ol:"ol",li:"li",ul:"ul"},a.components),{Kbd:s,Gallery:l,Image:c}=n;return l||i("Gallery",!0),c||i("Image",!0),s||i("Kbd",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:"DETROIT"}),' - This is the "Kitchen Sink" article, what follows is just a bunch of nonsense so I can dogfood my styling and featue set. I feel like this is a common practice as we do it at Graham Media Group, and the ',(0,e.jsx)(n.code,{children:"@tailwindcss/typography"})," plugin has a ",(0,e.jsx)(n.a,{href:"https://play.tailwindcss.com/uj1vGACRJA?layout=preview",children:"great example"})," of testing possible typography combinations."]}),` `,(0,e.jsxs)(n.h2,{id:"break-up-content-with-an-h2-tag",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#break-up-content-with-an-h2-tag",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Break up content with an h2 tag"]}),` `,(0,e.jsx)(n.p,{children:`Widespread power outages caused by intense winds have prompted DTE Energy to call in hundreds of out-of-state crews to help restore power to Southeastern Michigan residents.`}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsx)(n.p,{children:"Every line of code written comes at a price: maintenance. To avoid paying for a lot of code, we build reusable software. The problem with code re-use is that it gets in the way of changing your mind later on."}),` `]}),` `,(0,e.jsx)(n.p,{children:`All of Metro Detroit faced a high wind warning Saturday, as the windy day produced gusts over 60 mph at times through the afternoon, causing tens of thousands of customers to lose power. At some point in the day, more than 160,000 customers had lost power due to the severe weather.`}),` `,(0,e.jsx)(n.pre,{className:"language-ts",children:(0,e.jsxs)(n.code,{className:"language-ts code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"createStash"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"payload",(0,e.jsx)(n.span,{className:"token operator",children:":"})," CreateOrUpdateStashInput",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"/* ... */"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsxs)(n.h2,{id:"code-blocks",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#code-blocks",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Code blocks"]}),` `,(0,e.jsxs)(n.p,{children:["Syntax highighting through ",(0,e.jsx)(n.code,{children:"rehype-prism-plus"})," and a custom rehype plugin providing meta value parsing for filenames."]}),` `,(0,e.jsx)(n.pre,Object.assign({1:""},{className:"language-tsx",showLineNumbers:""},{"9-16":""},{children:(0,e.jsxs)(n.code,Object.assign({1:""},{className:"language-tsx code-highlight",showLineNumbers:""},{"9-16":""},{children:[(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"1",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," users ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"await"})," prisma",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"user"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"findMany"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[" select",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[" id",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"true"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[" email",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"true"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[" firstName",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"true"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[" team",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"true"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token comment",children:"// <-- just add the field I want"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[" stringValue",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"this is a string"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"9",children:[" where",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"10",children:[" team",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"11",children:[" id",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"12",children:[" equals",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"this is a string"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"13",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"14",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"15",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"16",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]}))})),` `,(0,e.jsx)(n.pre,{className:"language-jsx",filename:"useStore.ts",children:(0,e.jsxs)(n.code,{className:"language-jsx code-highlight",filename:"useStore.ts",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:"create"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"zustand"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," useStore ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"create"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:(0,e.jsx)(n.span,{className:"token keyword",children:"set"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"bears"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"increasePopulation"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token function",children:"set"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"state"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"bears"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," state",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"bears"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"removeAllBears"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token function",children:"set"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"bears"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"0"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// Block without line numbers"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," users",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Array"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" id",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"string"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" email",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"string"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" firstName",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"string"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" team",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Team"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.pre,{className:"language-css",showLineNumbers:"",filename:"app/styles/shared.css",children:(0,e.jsxs)(n.code,{className:"language-css code-highlight",showLineNumbers:"",filename:"app/styles/shared.css",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token comment",children:"/* scope with class names */"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{className:"token selector",children:(0,e.jsx)(n.span,{className:"token class",children:".PrimaryButton"})})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"display"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," flex",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"align-items"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," center",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"justify-content"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," center",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:"padding"}),(0,e.jsx)(n.span,{className:"token punctuation",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"0.5"}),(0,e.jsx)(n.span,{className:"token unit",children:"rem"})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"}),(0,e.jsx)(n.span,{className:"token unit",children:"rem"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"8",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"9",children:[(0,e.jsx)(n.span,{className:"token selector",children:(0,e.jsx)(n.span,{className:"token class",children:".TileGrid"})})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"/* ... */"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"12",children:` `}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"13",children:(0,e.jsx)(n.span,{className:"token comment",children:`/* or scope with data attributes to avoid concatenating `})}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"14",children:[(0,e.jsx)(n.span,{className:"token comment",children:" className props, but it's really up to you */"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"15",children:[(0,e.jsx)(n.span,{className:"token selector",children:(0,e.jsxs)(n.span,{className:"token attribute",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token attr-name",children:"data-primary-button"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})]})})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"16",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"/* ... */"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"17",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"18",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"19",children:[(0,e.jsx)(n.span,{className:"token selector",children:(0,e.jsxs)(n.span,{className:"token attribute",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token attr-name",children:"data-tile-grid"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})]})})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"20",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"/* ... */"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"21",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["I love keyboard shortcuts, one of my favorites is the ",(0,e.jsxs)("kbd",{children:[(0,e.jsx)(s,{children:"Cmd"})," + ",(0,e.jsx)(s,{children:"K"})]}),` menu that has become a popular shortcut for navigating web apps.`]}),` `,(0,e.jsxs)(n.h2,{id:"framer-motion-is-awesome-it-helped-me-build-the-gallery",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#framer-motion-is-awesome-it-helped-me-build-the-gallery",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Framer Motion is awesome, it helped me build the gallery"]}),` `,(0,e.jsxs)(l,{aspectRatio:"16 / 9",children:[(0,e.jsx)(c,{src:"kenny/posts/kitchen-sink/detroit-skyline",alt:"Detroit skyline"}),(0,e.jsx)(c,{src:"kenny/posts/kitchen-sink/drone-snow",alt:"Snowy river shot from above via drone"}),(0,e.jsx)(c,{src:"kenny/posts/kitchen-sink/sleeping-bear",alt:"Kids playing on a sand dune in the distance",height:void 0,width:void 0,style:{objectFit:"contain"},fill:!0})]}),` `,(0,e.jsx)(n.p,{children:"It's important to cover all of these use cases for a few reasons:"}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsx)(n.li,{children:"We want everything to look good out of the box."}),` `,(0,e.jsx)(n.li,{children:"Really just the first reason, that's the whole point of the plugin."}),` `,(0,e.jsx)(n.li,{children:"Here's a third pretend reason though a list with three items looks more realistic than a list with two items."}),` `]}),` `,(0,e.jsxs)(n.p,{children:[`Several neighborhoods faced uprooted trees and toppling power lines amid the high winds. Select `,(0,e.jsx)(n.code,{children:"any word"})," from the following list."]}),` `,(0,e.jsx)(n.p,{children:"Now I'm going to show you an example of an unordered list to make sure that looks good, too:"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"So here is the first item in this list."}),` `,(0,e.jsx)(n.li,{children:"In this example we're keeping the items short."}),` `,(0,e.jsx)(n.li,{children:"Later, we'll use longer, more complex list items."}),` `]}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",filename:"app/routes/posts/index.tsx",showLineNumbers:"",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",filename:"app/routes/posts/index.tsx",showLineNumbers:"",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"})})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"react"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"LoaderData"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Await"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"ReturnType"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token keyword",children:"typeof"})," getLoaderData",(0,e.jsx)(n.span,{className:"token operator",children:">>"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"3",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getLoaderData"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," users ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"await"})," prismaRead",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"user"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"findMany"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[" select",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[" id",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"true"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[" email",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"true"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"9",children:[" firstName",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"true"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[" team",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"true"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[" postReads",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:[" select",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"13",children:[" postSlug",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"true"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"14",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"15",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"16",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"17",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"18",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," users ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"19",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"20",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"21",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// export const loader: LoaderFunction = async ({ request }) => {"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"22",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// return json(await getLoaderData());"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"23",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// };"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"24",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"25",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"UsersPage"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"26",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," data ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsxs)(n.span,{className:"token generic-function",children:[(0,e.jsx)(n.span,{className:"token function",children:"useLoaderData"}),(0,e.jsxs)(n.span,{className:"token generic class-name",children:[(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"LoaderData",(0,e.jsx)(n.span,{className:"token operator",children:">"})]})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"27",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"28",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"29",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"h1"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"Users"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"30",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"ul"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"31",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token comment",children:"/* all this auto-completes and type checks!! */"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"32",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"data",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"users"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"user",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"33",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"li"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"key"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"user",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"id"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"34",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"user",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"firstName"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"35",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"36",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"37",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"38",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"39",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"40",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsxs)(n.h2,{id:"bye-for-now",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#bye-for-now",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Bye for now"]}),` `,(0,e.jsx)(n.p,{children:`According to DTE, the Metro Detroit area suffered from more than 1,500 downed wires, broken poles and tree-related damage.`}),` `,(0,e.jsx)(n.p,{children:`As of 8:20 a.m. Sunday, about 70,000 DTE Energy customers were without power. At that time, power was restored to about 90,000 customers so far, officials said. We\u2019re tracking Sunday power outages right here.`}),` `,(0,e.jsx)(n.p,{children:`Clicking "reset" above will reset our component to a different state from its initial state which is probably a mistake, so we want that to not be possible. Click it multiple times and it's getting reset to something completely different every time. Now, I definitely agree with you. This is an example of someone using the API wrong. But if it's not a lot of work we may as well make this impossible right?`}),` `,(0,e.jsxs)(n.p,{children:[`So, how can we grab hold of the actual initial value and ignore any changes to that prop? I've got a hint for you. It's not so complicated as `,(0,e.jsx)(n.code,{children:"useEffect"}),` with an `,(0,e.jsx)(n.code,{children:"isMounted"}),` boolean or whatever. It's actually pretty simple. And there are a few ways we could do it:`]}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," current",(0,e.jsx)(n.span,{className:"token operator",children:":"})," initialState ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"useRef"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," count",(0,e.jsx)(n.span,{className:"token operator",children:":"})," initialCount ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"initialState",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"useState"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," count",(0,e.jsx)(n.span,{className:"token operator",children:":"})," initialCount ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"initialState",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"useReducer"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"s",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," s",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," count",(0,e.jsx)(n.span,{className:"token operator",children:":"})," initialCount ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// actual initial count is: initialState.count"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:`The Detroit-based utility company said Saturday that it would be calling in 500 additional crews to help restore power to affected customers. Officials say power is expected to be restored to most customers, 80%-90%, by the end of the day Sunday.`}),` `,(0,e.jsx)(n.p,{children:`The company says it hopes to have power restored to all schools in time for class on Monday.`})]})}function x(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(d,a)})):d(a)}var v=x;function i(a,n){throw new Error("Expected "+(n?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(S);})(); ;return Component;