https://next-project-starter.vercel.app/_next/static/chunks/pages/docs-e83edfd2883c8cc2c458.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[172],{77:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return m}});var o=n(8768),r=n(5126),i=n(3905),a=n(159),p=n(219),s=(n(7294),["components"]),l={};function c(e){var t=e.components,n=(0,p.Z)(e,s);return(0,i.kt)("wrapper",(0,a.Z)({},l,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h2",null,"Getting Started"),(0,i.kt)("p",null,"To create a new project, run:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre"},"git clone https://github.com/johnpolacek/project-starter.git your-project-name\ncd your-project-name\nnpm install\n")),(0,i.kt)("p",null,"To run the project in your local development environment:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre"},"npm run dev\n")),(0,i.kt)("p",null,"Turn on automatic code formatting with ",(0,i.kt)("a",{parentName:"p",href:"https://prettier.io/"},"prettier"),":"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre"},"npm run format-watch\n")),(0,i.kt)("h2",null,"Project Settings"),(0,i.kt)("p",null,"Update ",(0,i.kt)("inlineCode",{parentName:"p"},"package.json")," with info for your own project\u2019s name and other info."),(0,i.kt)("p",null,"A global document head with ",(0,i.kt)("inlineCode",{parentName:"p"},"<title>"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"<description>"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"<meta>")," tags and more can be updated by editing ",(0,i.kt)("inlineCode",{parentName:"p"},"src/layout/Head.js"),"."),(0,i.kt)("p",null,"If you are using Google Analytics or other services you need to embed on every page, add them to the ",(0,i.kt)("inlineCode",{parentName:"p"},"Wrapper")," component at ",(0,i.kt)("inlineCode",{parentName:"p"},"src/layout/Wrapper.js")),(0,i.kt)("h2",null,"Authoring"),(0,i.kt)("p",null,"Refer to the ",(0,i.kt)("a",{parentName:"p",href:"https://nextjs.org/docs/basic-features/pages"},"Next.js docs")," for how to author pages and ",(0,i.kt)("a",{parentName:"p",href:"https://nextjs.org/docs/routing/introduction"},"set up routing"),"."),(0,i.kt)("p",null,"Each page contains a ",(0,i.kt)("inlineCode",{parentName:"p"},"Layout")," component with the ",(0,i.kt)("inlineCode",{parentName:"p"},"Header")," and ",(0,i.kt)("inlineCode",{parentName:"p"},"Footer")," components and a ",(0,i.kt)("inlineCode",{parentName:"p"},"Main")," component for the page content itself. The ",(0,i.kt)("inlineCode",{parentName:"p"},"Layout")," component accepts props for the url, title, description and more that are used to set meta tag data on each page - see ",(0,i.kt)("inlineCode",{parentName:"p"},"src/layout/Wrapper.js"),"."),(0,i.kt)("p",null,"You can write long form content in markdown with ",(0,i.kt)("a",{parentName:"p",href:"https://mdxjs.com/"},"mdx"),". For example, this project\u2019s homepage content has been authored in markdown - see ",(0,i.kt)("inlineCode",{parentName:"p"},"src/markdown/Home.mdx")," and these docs have been imported to ",(0,i.kt)("inlineCode",{parentName:"p"},"src/views/Docs.js")," from the project\u2019s top level ",(0,i.kt)("inlineCode",{parentName:"p"},"README.md")," file."),(0,i.kt)("p",null,"This starter project comes with its own components like in the ",(0,i.kt)("inlineCode",{parentName:"p"},"/src/ui")," folder that you can use, customize or throw away."),(0,i.kt)("h2",null,"Routing"),(0,i.kt)("p",null,"This project comes with some default routes - see the ",(0,i.kt)("inlineCode",{parentName:"p"},"/pages")," folder. The ",(0,i.kt)("inlineCode",{parentName:"p"},"/app")," route features a parameterized route that uses ",(0,i.kt)("inlineCode",{parentName:"p"},"AppContext")," to switch between different color modes and share that state with different components, in this case the project\u2019s ",(0,i.kt)("inlineCode",{parentName:"p"},"Main")," component - see ",(0,i.kt)("inlineCode",{parentName:"p"},"src/views/App.js"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"src/context/AppContext.js")," and ",(0,i.kt)("inlineCode",{parentName:"p"},"src/ui/Main.js"),"."),(0,i.kt)("p",null,"Refer to the ",(0,i.kt)("a",{parentName:"p",href:"https://nextjs.org/docs/routing/introduction"}

1,"Next.js docs")," for more info about how routing works."),(0,i.kt)("h2",null,"Styling"),(0,i.kt)("p",null,"Configure your project\u2019s color scheme, typography and other design system values by editing the theme object in ",(0,i.kt)("inlineCode",{parentName:"p"},"src/layout/Theme.js"),". For more info on the theme object, refer to the ",(0,i.kt)("a",{parentName:"p",href:"https://system-ui.com/theme/"},"System UI Theme Specification")," and the ",(0,i.kt)("a",{parentName:"p",href:"https://theme-ui.com/theming"},"Theme UI docs"),"."),(0,i.kt)("p",null,"Edit global styles in ",(0,i.kt)("inlineCode",{parentName:"p"},"src/layout/Styles.js"),"."),(0,i.kt)("p",null,"Style components using Theme UI\u2019s ",(0,i.kt)("a",{parentName:"p",href:"https://theme-ui.com/sx-prop"},"sx prop")," or use its ",(0,i.kt)("a",{parentName:"p",href:"https://theme-ui.com/components"},"built-in components"),". You can also drop in components from any ",(0,i.kt)("a",{parentName:"p",href:"https://styled-system.com/"},"styled-system")," compatible component framework, such as ",(0,i.kt)("a",{parentName:"p",href:"https://chakra-ui.com/"},"Chakra UI"),". For more info, refer to the ",(0,i.kt)("a",{parentName:"p",href:"https://theme-ui.com/theming"},"Theme UI docs"),"."),(0,i.kt)("h2",null,"Tests"),(0,i.kt)("p",null,"This project uses ",(0,i.kt)("a",{parentName:"p",href:"https://www.cypress.io/"},"Cypress")," for testing. Tests have been written for the landing page, docs and app."),(0,i.kt)("p",null,"Expand, modify or delete these tests in ",(0,i.kt)("inlineCode",{parentName:"p"},"cypress/integration")," folder. A custom command written for testing the example App can be found in ",(0,i.kt)("inlineCode",{parentName:"p"},"cypress/support/commands.js")),(0,i.kt)("p",null,"To run tests:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre"},"npm run test\n")),(0,i.kt)("h2",null,"Deploy"),(0,i.kt)("p",null,"The deploy script in ",(0,i.kt)("inlineCode",{parentName:"p"},"package.json")," will run tests, push to master then deploy to ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/zeit/now"},"now"),"."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre"},"npm run deploy\n")),(0,i.kt)("p",null,"The first time your run the script you will need to set up your ",(0,i.kt)("a",{parentName:"p",href:"https://vercel.com"},"vercel")," account and configure your project for deployment."))}c.isMDXComponent=!0;var u=n(5893),d=function(){return(0,u.jsx)(i.Zo,{children:(0,u.jsx)(r.xu,{id:"docs",sx:{py:[2,2,3,4],maxWidth:"800px",mx:"auto",width:"100%"},children:(0,u.jsx)(c,{})})})},m=function(){return(0,u.jsx)(o.Z,{url:"https://next-project-starter.vercel.app/docs",title:"Next Project Starter Docs",description:"Next Project Starter Docs for building Web Apps with Next.js, Theme UI, Cypress",twitter:"johnpolacek",imageUrl:"https://next-project-starter.vercel.app/project-logo.png",imageAlt:"Next Project Starter Logo",children:(0,u.jsx)(d,{})})}},2887:function(e,t,n){"use strict";n.d(t,{I:function(){return i},w:function(){return a}});var o=n(7294),r=n(5893),i=(0,o.createContext)({}),a=function(e){var t=e.children,n=(0,o.useState)(null),a=n[0],p=n[1];return(0,r.jsx)(i.Provider,{value:{mode:a,setMode:p},children:t})}},8768:function(e,t,n){"use strict";n.d(t,{Z:function(){return k}});var o=n(3569),r=n(2887),i=n(9008),a=n(5893),p=function(e){var t=e.title,n=e.description,o=e.url,r=e.imageUrl,p=e.imageAlt,s=e.twitter;return(0,a.jsx)(a.Fragment,{children:(0,a.jsxs)(i.default,{children:[(0,a.jsx)("title",{children:t}),(0,a.jsx)("link",{rel:"icon",type:"image/x-icon",href:"/favicon.ico"}),(0,a.jsx)("link",{rel:"canonical",href:o}),(0,a.jsx)("meta",{name:"description",content:n}),(0,a.jsx)("meta",{property:"og:title",content:t}),(0,a.jsx)("meta",{property:"og:description",content:n}),r&&(0,a.jsx)("meta",{property:"og:image",content:r}),p&&(0,a.jsx)("meta",{property:"og:image:alt",content:p}),(0,a.jsx)("meta",{property:"og:url",content:o}),(0,a.jsx)("meta",{name:"twitter:card",content:r?"summary_large_image":"summary"}),(0,a.jsx)("meta",{name:"twitter:site",content:s}),(0,a.jsx)("meta",{name:"twitter:creator",content:s}),(0,a.jsx)("meta",{name:"twitter:title",content:t}),(0,a.jsx)("meta",{name:"twitter:description",content:n}),r&&(0,a.jsx)("meta",{property:"twitter:image",content:r}),p&&(0,a.jsx)("meta",{property:"twitter:image:alt",content:p})]})})},s=n(5988),l=n(8733),c=n(8802),u=function(){return(0,l.tZ)(s.default,{id:"2218449866",dynamic:[c.Z.fonts.body,c.Z.colors.primary,c.Z.fonts.heading,c.Z.colors.primary]},["button,hr,input{overflow:visible;}","progress,sub,sup{vertical-align:baseline;}",'[type="checkbox"],[type="radio"],legend{box-sizing:border-box;padding:0;}',"html{line-height:1.2;-webkit-text-size-adjust:100%;}","body{margin:0;font-family:".concat(c.Z.fonts.body,";}"),"hr{box-sizing:content-box;height:0;}

1","code,kbd,pre,samp{font-family:monospace,monospace;font-size:14px;}","pre{padding:16px 32px 16px 16px;margin:0 0 32px 0;background:#f4f4f4;display:inline-block;}","pre code{padding:0;background:none;}","code{background:#f4f4f4;padding:4px 6px;}","a{background-color:transparent;}","abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}","b,strong{font-weight:bolder;}","small{font-size:80%;}","sub,sup{font-size:75%;line-height:0;position:relative;}","sub{bottom:-0.25em;}","sup{top:-0.5em;}","img{border-style:none;}","button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}","button,select{text-transform:none;}",'[type="button"],[type="reset"],[type="submit"],button{-webkit-appearance:button;}','[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0;}','[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px;}',"fieldset{padding:0.35em 0.75em 0.625em;}","legend{color:inherit;display:table;max-width:100%;white-space:normal;}","textarea{overflow:auto;}",'[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}','[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}','[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}',"::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}","details{display:block;}","summary{display:list-item;}","[hidden],template{display:none;}","html{box-sizing:border-box;}","*,*:before,*:after{box-sizing:inherit;}","body{margin:0;min-height:100vh;height:100%;}",'button,input[type="submit"]{cursor:pointer;background:'.concat(c.Z.colors.primary,";color:white;border-radius:4px;border:none;}"),"p{line-height:1.5;margin:0 0 16px;}","ul{margin-top:0;}","select{padding:8px;}","h1,h2,h3,h4,h5,h6{text-rendering:optimizelegibility;line-height:1.2;margin:0 0 16px;font-family:".concat(c.Z.fonts.heading,";}"),"input,select,textarea{padding:4px;border:solid 2px #aed7ff;font-size:16px;font-family:inherit;}","select{-webkit-appearance:menulist;}","table{border-collapse:collapse;}","input{text-align:inherit;padding-left:4px;}","a{color:".concat(c.Z.colors.primary,";}"),"#docs h2{padding-top:32px;}"])},d=n(5126),m=n(7294),h=function(e){var t=e.children,n=(0,m.useContext)(r.I).mode;return(0,a.jsx)(d.xu,{as:"main",sx:{display:"flex",flex:1,minHeight:"80vh",px:[3,4],pb:4,alignItems:"center",bg:n||"white",transition:"background-color 200ms linear, border-color 200ms linear",borderBottom:"solid 1px",borderTop:"solid 1px",borderColor:n||"#EEE"},children:t})};function f(e){var t=e.children,n=(0,m.useState)(t),o=n[0],r=n[1],i=(0,m.useState)("fadeOut"),p=i[0],s=i[1];return(0,m.useEffect)((function(){s("fadeIn")}),[]),(0,m.useEffect)((function(){t!==o&&s("fadeOut")}),[t,r,o]),(0,a.jsx)(d.xu,{onTransitionEnd:function(){"fadeOut"===p&&(r(t),s("fadeIn"))},sx:{opacity:"fadeOut"===p?0:1,transition:".25s",width:"100%"},children:o})}var g=function(e){var t=e.title,n=e.description,o=e.url,r=e.imageUrl,i=e.imageAlt,s=e.twitter,l=e.children;return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(p,{title:t,description:n,url:o,imageUrl:r,imageAlt:i,twitter:s}),(0,a.jsx)(h,{children:(0,a.jsx)(f,{children:l})}),(0,a.jsx)(u,{})]})},k=function(e){var t=e.title,n=e.description,i=e.url,p=e.imageUrl,s=e.imageAlt,l=e.twitter,u=e.children;return(0,a.jsx)(o.f,{theme:c.Z,children:(0,a.jsx)(r.w,{children:(0,a.jsx)(g,{title:t,description:n,url:i,imageUrl:p,imageAlt:s,twitter:l,children:u})})})}},4653:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs",function(){return n(77)}])},159:function(e,t,n){"use strict";function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}n.d(t,{Z:function(){return o}})},219:function(e,t,n){"use strict";function o(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}n.d(t,{Z:function(){return o}})}},function(e){e.O(0,[905,774,888,179],(function(){return t=4653,e(e.s=t);var t}));var t=e.O();_N_E=t}]);