"})," blocks."]}),`
`,(0,a.jsxs)(e.h2,{id:"line-highlighting-and-line-numbers",children:[(0,a.jsx)(e.a,{href:"#line-highlighting-and-line-numbers","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"Line highlighting and line numbers"]}),`
`,(0,a.jsxs)(e.p,{children:["Line highlighting and line numbers is now supported out of the box thanks to the new ",(0,a.jsx)(e.a,{href:"https://github.com/timlrx/rehype-prism-plus",children:"rehype-prism-plus plugin"})]}),`
`,(0,a.jsx)(e.p,{children:"The following javascript code block:"}),`
`,(0,a.jsx)(e.pre,{children:(0,a.jsxs)(e.code,{children:[(0,a.jsx)(e.div,{className:"code-line",children:"```js {1, 3-4} showLineNumbers"}),(0,a.jsx)(e.div,{className:"code-line",children:"var num1, num2, sum"}),(0,a.jsx)(e.div,{className:"code-line",children:"num1 = prompt('Enter first number')"}),(0,a.jsx)(e.div,{className:"code-line",children:"num2 = prompt('Enter second number')"}),(0,a.jsx)(e.div,{className:"code-line",children:'sum = parseInt(num1) + parseInt(num2) // "+" means "add"'}),(0,a.jsx)(e.div,{className:"code-line",children:`alert('Sum = ' + sum) // "+" means combine into a string`}),(0,a.jsx)(e.div,{className:"code-line",children:"```"})]})}),`
`,(0,a.jsx)(e.p,{children:"will appear as:"}),`
`,(0,a.jsx)(e.pre,{className:"language-js",children:(0,a.jsxs)(e.code,{className:"language-js",children:[(0,a.jsxs)(e.div,{className:"code-line line-number highlight-line",line:"1",children:[(0,a.jsx)(e.span,{className:"text-code-purple",children:"var"})," num1",(0,a.jsx)(e.span,{className:"text-code-white",children:","})," num2",(0,a.jsx)(e.span,{className:"text-code-white",children:","})," sum",(0,a.jsx)(e.span,{className:"text-code-white",children:";"})]}),(0,a.jsxs)(e.div,{className:"code-line line-number",line:"2",children:["num1 ",(0,a.jsx)(e.span,{className:"",children:"="})," ",(0,a.jsx)(e.span,{className:"text-code-blue",children:"prompt"}),(0,a.jsx)(e.span,{className:"text-code-white",children:"("}),(0,a.jsx)(e.span,{className:"text-code-green",children:"'Enter first number'"}),(0,a.jsx)(e.span,{className:"text-code-white",children:")"}),(0,a.jsx)(e.span,{className:"text-code-white",children:";"})]}),(0,a.jsxs)(e.div,{className:"code-line line-number highlight-line",line:"3",children:["num2 ",(0,a.jsx)(e.span,{className:"",children:"="})," ",(0,a.jsx)(e.span,{className:"text-code-blue",children:"prompt"}),(0,a.jsx)(e.span,{className:"text-code-white",children:"("}),(0,a.jsx)(e.span,{className:"text-code-green",children:"'Enter second number'"}),(0,a.jsx)(e.span,{className:"text-code-white",children:")"}),(0,a.jsx)(e.span,{className:"text-code-white",children:";"})]}),(0,a.jsxs)(e.div,{className:"code-line line-number highlight-line",line:"4",children:["sum ",(0,a.jsx)(e.span,{className:"",children:"="})," ",(0,a.jsx)(e.span,{className:"text-code-blue",children:"parseInt"}),(0,a.jsx)(e.span,{className:"text-code-white",children:"("}),"num1",(0,a.jsx)(e.span,{className:"text-code-white",children:")"})," ",(0,a.jsx)(e.span,{className:"",children:"+"})," ",(0,a.jsx)(e.span,{className:"text-code-blue",children:"parseInt"}),(0,a.jsx)(e.span,{className:"text-code-white",children:"("}),"num2",(0,a.jsx)(e.span,{className:"text-code-white",children:")"}),(0,a.jsx)(e.span,{className:"text-code-white",children:";"})," ",(0,a.jsx)(e.span,{className:"text-gray-400 italic",children:'// "+" means "add"'})]}),(0,a.jsxs)(e.div,{className:"code-line line-number",line:"5",children:[(0,a.jsx)(e.span,{className:"text-code-blue",children:"alert"}),(0,a.jsx)(e.span,{className:"text-code-white",children:"("}),(0,a.jsx)(e.span,{className:"text-code-green",children:"'Sum = '"})," ",(0,a.jsx)(e.span,{className:"",children:"+"})," sum",(0,a.jsx)(e.span,{className:"text-code-white",children:")"}),(0,a.jsx)(e.span,{className:"text-code-white",children:";"})," ",(0,a.jsx)(e.span,{className:"text-gray-400 italic",children:'// "+" means combine into a string'})]})]})}),`
`,(0,a.jsxs)(e.p,{children:["To modify the styles, change the following class selectors in the ",(0,a.jsx)(e.code,{children:"tailwind.css"})," file:"]}),`
`,(0,a.jsx)(e.pre,{className:"language-css",children:(0,a.jsxs)(e.code,{className:"language-css",children:[(0,a.jsxs)(e.div,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"",children:(0,a.jsx)(e.span,{className:"",children:".code-line"})})," ",(0,a.jsx)(e.span,{className:"text-code-white",children:"{"})]}),(0,a.jsxs)(e.div,{className:"code-line",children:["  ",(0,a.jsxs)(e.span,{className:"",children:[(0,a.jsx)(e.span,{className:"",children:"@apply"})," pl-4 -mx-4 border-l-4 border-",(0,a.jsx)(e.span,{className:"",children:"gray"}),(0,a.jsx)(e.span,{className:"",children:"-800"}),(0,a.jsx)(e.span,{className:"text-code-white",children:";"})]})]}),(0,a.jsx)(e.div,{className:"code-line",children:(0,a.jsx)(e.span,{className:"text-code-white",children:"}"})}),(0,a.jsx)(e.div,{className:"code-line",children:`
`}),(0,a.jsxs)(e.div,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"",children:(0,a.jsx)(e.span,{className:"",children:".highlight-line"})})," ",(0,a.jsx)(e.span,{className:"text-code-white",children:"{"})]}),(0,a.jsxs)(e.div,{className:"code-line",children:["  ",(0,a.jsxs)(e.span,{className:"",children:[(0,a.jsx)(e.span,{className:"",children:"@apply"})," -mx-4 bg-",(0,a.jsx)(e.span,{className:"",children:"gray"}),(0,a.jsx)(e.span,{className:"",children:"-700"})," bg-opacity-50 border-l-4 border-primary-500",(0,a.jsx)(e.span,{className:"text-code-white",children:";"})]})]}),(0,a.jsx)(e.div,{className:"code-line",children:(0,a.jsx)(e.span,{className:"text-code-white",children:"}"})}),(0,a.jsx)(e.div,{className:"code-line",children:`
`}),(0,a.jsxs)(e.div,{className:"code-line",children:[(0,a.jsxs)(e.span,{className:"",children:[(0,a.jsx)(e.span,{className:"",children:".line-number"}),(0,a.jsx)(e.span,{className:"",children:"::before"})]})," ",(0,a.jsx)(e.span,{className:"text-code-white",children:"{"})]}),(0,a.jsxs)(e.div,{className:"code-line",children:["  ",(0,a.jsxs)(e.span,{className:"",children:[(0,a.jsx)(e.span,{className:"",children:"@apply"})," pr-4 -ml-2 text-",(0,a.jsx)(e.span,{className:"",children:"gray"}),(0,a.jsx)(e.span,{className:"",children:"-400"}),(0,a.jsx)(e.span,{className:"text-code-white",children:";"})]})]}),(0,a.jsxs)(e.div,{className:"code-line",children:["  ",(0,a.jsx)(e.span,{className:"",children:"content"}),(0,a.jsx)(e.span,{className:"text-code-white",children:":"})," ",(0,a.jsx)(e.span,{className:"text-code-blue",children:"attr"}),(0,a.jsx)(e.span,{className:"text-code-white",children:"("}),"line",(0,a.jsx)(e.span,{className:"text-code-white",children:")"}),(0,a.jsx)(e.span,{className:"text-code-white",children:";"})]}),(0,a.jsx)(e.div,{className:"code-line",children:(0,a.jsx)(e.span,{className:"text-code-white",children:"}"})})]})}),`
`,(0,a.jsxs)(e.h2,{id:"upgrade-guide",children:[(0,a.jsx)(e.a,{href:"#upgrade-guide","aria-hidden":"true",tabIndex:"-1",children:(0,a.jsx)(e.span,{className:"icon icon-link"})}),"Upgrade guide"]}),`
`,(0,a.jsx)(e.p,{children:"There are significant portions of the code that has been changed from v0 to v1 including support for layouts and a new mdx engine."}),`
`,(0,a.jsx)(e.p,{children:`There's also no real reason to change if the previous one serves your needs and it might be easier to copy
the component changes you are interested to your existing blog rather than migrating everything over.`}),`
`,(0,a.jsx)(e.p,{children:"Nonetheless, if you want to do so and have not changed much of the template, you could clone the new version and copy over the blog post over to the new template."}),`
`,(0,a.jsx)(e.p,{children:"Another alternative would be to pull the latest tempate version with the following code:"}),`
`,(0,a.jsx)(e.pre,{className:"language-bash",children:(0,a.jsxs)(e.code,{className:"language-bash",children:[(0,a.jsxs)(e.div,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"text-code-blue",children:"git"})," remote ",(0,a.jsx)(e.span,{className:"text-code-blue",children:"add"})," template git@github.com:timlrx/tailwind-nextjs-starter-blog.git"]}),(0,a.jsxs)(e.div,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"text-code-blue",children:"git"})," pull template v1 --allow-unrelated-histories"]}),(0,a.jsxs)(e.div,{className:"code-line",children:[(0,a.jsx)(e.span,{className:"text-code-blue",children:"rm"})," -rf node_modules"]})]})}),`
`,(0,a.jsxs)(e.p,{children:["You can see an example of such a migration in this ",(0,a.jsx)(e.a,{href:"https://github.com/timlrx/timlrx.com/commit/bba1c185384fd6d5cdaac15abf802fdcff027286",children:"commit"})," for my personal blog."]}),`
`,(0,a.jsxs)(e.p,{children:["v1 also uses ",(0,a.jsx)(e.code,{children:"feed.xml"})," rather than ",(0,a.jsx)(e.code,{children:"index.xml"}),", to avoid some build issues with vercel. If you are migrating you should add a redirect to ",(0,a.jsx)(e.code,{children:"next.config.js"})," like so:"]}),`
`,(0,a.jsx)(e.pre,{children:(0,a.jsxs)(e.code,{children:[(0,a.jsx)(e.div,{className:"code-line",children:"async redirects() {"}),(0,a.jsx)(e.div,{className:"code-line",children:"  return ["}),(0,a.jsx)(e.div,{className:"code-line",children:"    {"}),(0,a.jsx)(e.div,{className:"code-line",children:"      source: '/:path/index.xml',"}),(0,a.jsx)(e.div,{className:"code-line",children:"      destination: '/:path/feed.xml',"}),(0,a.jsx)(e.div,{className:"code-line",children:"      permanent: true,"}),(0,a.jsx)(e.div,{className:"code-line",children:"    }"}),(0,a.jsx)(e.div,{className:"code-line",children:"  ]"}),(0,a.jsx)(e.div,{className:"code-line",children:"}"})]})})]});return c?(0,a.jsx)(c,Object.assign({},s,{children:d})):d}var b=y;return k;})();
;return Component.default;
Under Construction 🚧
