1 line
543 KiB
JavaScript
1 line
543 KiB
JavaScript
"use strict";exports.id=819,exports.ids=[819],exports.modules={98819:(e,s,a)=>{a.d(s,{ED:()=>t,hI:()=>n});let n=JSON.parse('[{"title":"Sample .md file","date":"2016-03-08T00:00:00.000Z","tags":["markdown","code","features"],"draft":false,"summary":"Example of a markdown file with code blocks and syntax highlighting","body":{"raw":"\\nA sample post with markdown.\\n\\n## Inline Highlighting\\n\\nSample of inline highlighting `sum = parseInt(num1) + parseInt(num2)`\\n\\n## Code Blocks\\n\\nSome Javascript code\\n\\n```javascript\\nvar num1, num2, sum\\nnum1 = prompt(\'Enter first number\')\\nnum2 = prompt(\'Enter second number\')\\nsum = parseInt(num1) + parseInt(num2) // \\"+\\" means \\"add\\"\\nalert(\'Sum = \' + sum) // \\"+\\" means combine into a string\\n```\\n\\nSome Python code \uD83D\uDC0D\\n\\n```python\\ndef fib():\\n a, b = 0, 1\\n while True: # First iteration:\\n yield a # yield 0 to start with and then\\n a, b = b, a + b # a will now be 1, and b will also be 1, (0 + 1)\\n\\nfor index, fibonacci_number in zip(range(10), fib()):\\n print(\'{i:3}: {f:3}\'.format(i=index, f=fibonacci_number))\\n```\\n","code":"var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var m=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),f=(a,n)=>{for(var s in n)l(a,s,{get:n[s],enumerable:!0})},i=(a,n,s,t)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let c of u(n))!k.call(a,c)&&c!==s&&l(a,c,{get:()=>n[c],enumerable:!(t=m(n,c))||t.enumerable});return a};var w=(a,n,s)=>(s=a!=null?h(N(a)):{},i(n||!a||!a.__esModule?l(s,\\"default\\",{value:a,enumerable:!0}):s,a)),b=a=>i(l({},\\"__esModule\\",{value:!0}),a);var r=g((_,o)=>{o.exports=_jsx_runtime});var y={};f(y,{default:()=>p,frontmatter:()=>x});var e=w(r()),x={title:\\"Sample .md file\\",date:\\"2016-03-08\\",tags:[\\"markdown\\",\\"code\\",\\"features\\"],draft:!1,summary:\\"Example of a markdown file with code blocks and syntax highlighting\\"};function d(a){let n={a:\\"a\\",code:\\"code\\",h2:\\"h2\\",p:\\"p\\",path:\\"path\\",pre:\\"pre\\",span:\\"span\\",svg:\\"svg\\",...a.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.p,{children:\\"A sample post with markdown.\\"}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"inline-highlighting\\",children:[(0,e.jsx)(n.a,{\\"aria-hidden\\":\\"true\\",href:\\"#inline-highlighting\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Inline Highlighting\\"]}),(0,e.jsxs)(n.p,{children:[\\"Sample of inline highlighting \\",(0,e.jsx)(n.code,{children:\\"sum = parseInt(num1) + parseInt(num2)\\"})]}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"code-blocks\\",children:[(0,e.jsx)(n.a,{\\"aria-hidden\\":\\"true\\",href:\\"#code-blocks\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Code Blocks\\"]}),(0,e.jsx)(n.p,{children:\\"Some Javascript code\\"}),(0,e.jsx)(n.pre,{className:\\"language-javascript\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-javascript\\",children:[(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token keyword\\",children:\\"var\\"}),\\" num1\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" num2\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),` sum\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\"num1 \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"=\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"prompt\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'Enter first number\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\"num2 \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"=\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"prompt\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'Enter second number\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\"sum \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"=\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"parseInt\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"num1\\",(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 function\\",children:\\"parseInt\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"num2\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\")\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\'// \\"+\\" means \\"add\\"\'}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"alert\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'Sum = \'\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"+\\"}),\\" sum\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\")\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\'// \\"+\\" means combine into a string\'}),`\\n`]})]})}),(0,e.jsx)(n.p,{children:\\"Some Python code \\\\u{1F40D}\\"}),(0,e.jsx)(n.pre,{className:\\"language-python\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-python\\",children:[(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token keyword\\",children:\\"def\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"fib\\"}),(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:\\":\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" a\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" b \\",(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 number\\",children:\\"1\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token keyword\\",children:\\"while\\"}),\\" \\",(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:\\"# First iteration:\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token keyword\\",children:\\"yield\\"}),\\" a \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"# yield 0 to start with and then\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" a\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" b \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"=\\"}),\\" b\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" a \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"+\\"}),\\" b \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"# a will now be 1, and b will also be 1, (0 + 1)\\"}),`\\n`]}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:`\\n`}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token keyword\\",children:\\"for\\"}),\\" index\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" fibonacci_number \\",(0,e.jsx)(n.span,{className:\\"token keyword\\",children:\\"in\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token builtin\\",children:\\"zip\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsx)(n.span,{className:\\"token builtin\\",children:\\"range\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsx)(n.span,{className:\\"token number\\",children:\\"10\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\")\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" fib\\",(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:\\":\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token keyword\\",children:\\"print\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'{i:3}: {f:3}\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token builtin\\",children:\\"format\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"i\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"=\\"}),\\"index\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" f\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"=\\"}),\\"fibonacci_number\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\")\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]})]})})]})}function p(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(d,{...a})}):d(a)}return b(y);})();\\n;return Component;"},"_id":"blog/code-sample.mdx","_raw":{"sourceFilePath":"blog/code-sample.mdx","sourceFileName":"code-sample.mdx","sourceFileDir":"blog","contentType":"mdx","flattenedPath":"blog/code-sample"},"type":"Blog","readingTime":{"text":"1 min read","minutes":0.595,"time":35700,"words":119},"slug":"code-sample","path":"blog/code-sample","filePath":"blog/code-sample.mdx","toc":[{"value":"Inline Highlighting","url":"#inline-highlighting","depth":2},{"value":"Code Blocks","url":"#code-blocks","depth":2}],"structuredData":{"@context":"https://schema.org","@type":"BlogPosting","headline":"Sample .md file","datePublished":"2016-03-08T00:00:00.000Z","dateModified":"2016-03-08T00:00:00.000Z","description":"Example of a markdown file with code blocks and syntax highlighting","image":"/static/images/twitter-card.png","url":"https://tailwind-nextjs-starter-blog.vercel.app/blog/code-sample"}},{"title":"Deriving the OLS Estimator","date":"2020-12-21T00:00:00.000Z","tags":["next js","math","ols"],"draft":false,"summary":"How to derive the OLS Estimator with matrix notation and a tour of math typesetting using markdown with the help of KaTeX.","body":{"raw":"\\n# Introduction\\n\\nParsing and display of math equations is included in this blog template. Parsing of math is enabled by `remark-math` and `rehype-katex`.\\nKaTeX and its associated font is included in `_document.js` so feel free to use it on any page.\\n[^footnote]\\n\\n[^footnote]: For the full list of supported TeX functions, check out the [KaTeX documentation](https://katex.org/docs/supported.html)\\n\\nInline math symbols can be included by enclosing the term between the `$` symbol.\\n\\nMath code blocks are denoted by `$$`.\\n\\nIf you intend to use the `$` sign instead of math, you can escape it (`\\\\$`), or specify the HTML entity (`$`) [^2]\\n\\nInline or manually enumerated footnotes are also supported. Click on the links above to see them in action.\\n\\n[^2]: \\\\$10 and $20.\\n\\n# Deriving the OLS Estimator\\n\\nUsing matrix notation, let $n$ denote the number of observations and $k$ denote the number of regressors.\\n\\nThe vector of outcome variables $\\\\mathbf{Y}$ is a $n \\\\times 1$ matrix,\\n\\n```tex\\n\\\\mathbf{Y} = \\\\left[\\\\begin{array}\\n {c}\\n y_1 \\\\\\\\\\n . \\\\\\\\\\n . \\\\\\\\\\n . \\\\\\\\\\n y_n\\n\\\\end{array}\\\\right]\\n```\\n\\n$$\\n\\\\mathbf{Y} = \\\\left[\\\\begin{array}\\n {c}\\n y_1 \\\\\\\\\\n . \\\\\\\\\\n . \\\\\\\\\\n . \\\\\\\\\\n y_n\\n\\\\end{array}\\\\right]\\n$$\\n\\nThe matrix of regressors $\\\\mathbf{X}$ is a $n \\\\times k$ matrix (or each row is a $k \\\\times 1$ vector),\\n\\n```latex\\n\\\\mathbf{X} = \\\\left[\\\\begin{array}\\n {ccccc}\\n x_{11} & . & . & . & x_{1k} \\\\\\\\\\n . & . & . & . & . \\\\\\\\\\n . & . & . & . & . \\\\\\\\\\n . & . & . & . & . \\\\\\\\\\n x_{n1} & . & . & . & x_{nn}\\n\\\\end{array}\\\\right] =\\n\\\\left[\\\\begin{array}\\n {c}\\n \\\\mathbf{x}\'_1 \\\\\\\\\\n . \\\\\\\\\\n . \\\\\\\\\\n . \\\\\\\\\\n \\\\mathbf{x}\'_n\\n\\\\end{array}\\\\right]\\n```\\n\\n$$\\n\\\\mathbf{X} = \\\\left[\\\\begin{array}\\n {ccccc}\\n x_{11} & . & . & . & x_{1k} \\\\\\\\\\n . & . & . & . & . \\\\\\\\\\n . & . & . & . & . \\\\\\\\\\n . & . & . & . & . \\\\\\\\\\n x_{n1} & . & . & . & x_{nn}\\n\\\\end{array}\\\\right] =\\n\\\\left[\\\\begin{array}\\n {c}\\n \\\\mathbf{x}\'_1 \\\\\\\\\\n . \\\\\\\\\\n . \\\\\\\\\\n . \\\\\\\\\\n \\\\mathbf{x}\'_n\\n\\\\end{array}\\\\right]\\n$$\\n\\nThe vector of error terms $\\\\mathbf{U}$ is also a $n \\\\times 1$ matrix.\\n\\nAt times it might be easier to use vector notation. For consistency, I will use the bold small x to denote a vector and capital letters to denote a matrix. Single observations are denoted by the subscript.\\n\\n## Least Squares\\n\\n**Start**: \\n$$y_i = \\\\mathbf{x}\'_i \\\\beta + u_i$$\\n\\n**Assumptions**:\\n\\n1. Linearity (given above)\\n2. $E(\\\\mathbf{U}|\\\\mathbf{X}) = 0$ (conditional independence)\\n3. rank($\\\\mathbf{X}$) = $k$ (no multi-collinearity i.e. full rank)\\n4. $Var(\\\\mathbf{U}|\\\\mathbf{X}) = \\\\sigma^2 I_n$ (Homoskedascity)\\n\\n**Aim**: \\nFind $\\\\beta$ that minimises the sum of squared errors:\\n\\n$$\\nQ = \\\\sum_{i=1}^{n}{u_i^2} = \\\\sum_{i=1}^{n}{(y_i - \\\\mathbf{x}\'_i\\\\beta)^2} = (Y-X\\\\beta)\'(Y-X\\\\beta)\\n$$\\n\\n**Solution**: \\nHints: $Q$ is a $1 \\\\times 1$ scalar, by symmetry $\\\\frac{\\\\partial b\'Ab}{\\\\partial b} = 2Ab$.\\n\\nTake matrix derivative w.r.t $\\\\beta$:\\n\\n```tex\\n\\\\begin{aligned}\\n \\\\min Q & = \\\\min_{\\\\beta} \\\\mathbf{Y}\'\\\\mathbf{Y} - 2\\\\beta\'\\\\mathbf{X}\'\\\\mathbf{Y} +\\n \\\\beta\'\\\\mathbf{X}\'\\\\mathbf{X}\\\\beta \\\\\\\\\\n & = \\\\min_{\\\\beta} - 2\\\\beta\'\\\\mathbf{X}\'\\\\mathbf{Y} + \\\\beta\'\\\\mathbf{X}\'\\\\mathbf{X}\\\\beta \\\\\\\\\\n \\\\text{[FOC]}~~~0 & = - 2\\\\mathbf{X}\'\\\\mathbf{Y} + 2\\\\mathbf{X}\'\\\\mathbf{X}\\\\hat{\\\\beta} \\\\\\\\\\n \\\\hat{\\\\beta} & = (\\\\mathbf{X}\'\\\\mathbf{X})^{-1}\\\\mathbf{X}\'\\\\mathbf{Y} \\\\\\\\\\n & = (\\\\sum^{n} \\\\mathbf{x}_i \\\\mathbf{x}\'_i)^{-1} \\\\sum^{n} \\\\mathbf{x}_i y_i\\n\\\\end{aligned}\\n```\\n\\n$$\\n\\\\begin{aligned}\\n \\\\min Q & = \\\\min_{\\\\beta} \\\\mathbf{Y}\'\\\\mathbf{Y} - 2\\\\beta\'\\\\mathbf{X}\'\\\\mathbf{Y} +\\n \\\\beta\'\\\\mathbf{X}\'\\\\mathbf{X}\\\\beta \\\\\\\\\\n & = \\\\min_{\\\\beta} - 2\\\\beta\'\\\\mathbf{X}\'\\\\mathbf{Y} + \\\\beta\'\\\\mathbf{X}\'\\\\mathbf{X}\\\\beta \\\\\\\\\\n \\\\text{[FOC]}~~~0 & = - 2\\\\mathbf{X}\'\\\\mathbf{Y} + 2\\\\mathbf{X}\'\\\\mathbf{X}\\\\hat{\\\\beta} \\\\\\\\\\n \\\\hat{\\\\beta} & = (\\\\mathbf{X}\'\\\\mathbf{X})^{-1}\\\\mathbf{X}\'\\\\mathbf{Y} \\\\\\\\\\n & = (\\\\sum^{n} \\\\mathbf{x}_i \\\\mathbf{x}\'_i)^{-1} \\\\sum^{n} \\\\mathbf{x}_i y_i\\n\\\\end{aligned}\\n$$\\n","code":"var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(a,s)=>()=>(s||a((s={exports:{}}).exports,s),s.exports),v=(a,s)=>{for(var n in s)i(a,n,{get:s[n],enumerable:!0})},c=(a,s,n,t)=>{if(s&&typeof s==\\"object\\"||typeof s==\\"function\\")for(let l of N(s))!u.call(a,l)&&l!==n&&i(a,l,{get:()=>s[l],enumerable:!(t=o(s,l))||t.enumerable});return a};var b=(a,s,n)=>(n=a!=null?p(g(a)):{},c(s||!a||!a.__esModule?i(n,\\"default\\",{value:a,enumerable:!0}):n,a)),f=a=>c(i({},\\"__esModule\\",{value:!0}),a);var r=y((z,m)=>{m.exports=_jsx_runtime});var w={};v(w,{default:()=>d,frontmatter:()=>k});var e=b(r()),k={title:\\"Deriving the OLS Estimator\\",date:\\"2020-12-21\\",tags:[\\"next js\\",\\"math\\",\\"ols\\"],draft:!1,summary:\\"How to derive the OLS Estimator with matrix notation and a tour of math typesetting using markdown with the help of KaTeX.\\"};function h(a){let s={a:\\"a\\",annotation:\\"annotation\\",br:\\"br\\",code:\\"code\\",h1:\\"h1\\",h2:\\"h2\\",li:\\"li\\",math:\\"math\\",mfrac:\\"mfrac\\",mi:\\"mi\\",mn:\\"mn\\",mo:\\"mo\\",mover:\\"mover\\",mrow:\\"mrow\\",mstyle:\\"mstyle\\",msub:\\"msub\\",msubsup:\\"msubsup\\",msup:\\"msup\\",mtable:\\"mtable\\",mtd:\\"mtd\\",mtext:\\"mtext\\",mtr:\\"mtr\\",munder:\\"munder\\",munderover:\\"munderover\\",ol:\\"ol\\",p:\\"p\\",path:\\"path\\",pre:\\"pre\\",section:\\"section\\",semantics:\\"semantics\\",span:\\"span\\",strong:\\"strong\\",sup:\\"sup\\",svg:\\"svg\\",...a.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(s.h1,{className:\\"content-header\\",id:\\"introduction\\",children:[(0,e.jsx)(s.a,{href:\\"#introduction\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(s.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(s.svg,{viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",children:[(0,e.jsx)(s.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(s.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Introduction\\"]}),(0,e.jsxs)(s.p,{children:[\\"Parsing and display of math equations is included in this blog template. Parsing of math is enabled by \\",(0,e.jsx)(s.code,{children:\\"remark-math\\"}),\\" and \\",(0,e.jsx)(s.code,{children:\\"rehype-katex\\"}),\\". KaTeX and its associated font is included in \\",(0,e.jsx)(s.code,{children:\\"_document.js\\"}),\\" so feel free to use it on any page. \\",(0,e.jsx)(s.sup,{children:(0,e.jsx)(s.a,{href:\\"#user-content-fn-footnote\\",\\"aria-describedby\\":\\"footnote-label\\",\\"data-footnote-ref\\":!0,id:\\"user-content-fnref-footnote\\",children:\\"1\\"})})]}),(0,e.jsxs)(s.p,{children:[\\"Inline math symbols can be included by enclosing the term between the \\",(0,e.jsx)(s.code,{children:\\"$\\"}),\\" symbol.\\"]}),(0,e.jsxs)(s.p,{children:[\\"Math code blocks are denoted by \\",(0,e.jsx)(s.code,{children:\\"$$\\"}),\\".\\"]}),(0,e.jsxs)(s.p,{children:[\\"If you intend to use the \\",(0,e.jsx)(s.code,{children:\\"$\\"}),\\" sign instead of math, you can escape it (\\",(0,e.jsx)(s.code,{children:\\"\\\\\\\\$\\"}),\\"), or specify the HTML entity (\\",(0,e.jsx)(s.code,{children:\\"$\\"}),\\") \\",(0,e.jsx)(s.sup,{children:(0,e.jsx)(s.a,{href:\\"#user-content-fn-2\\",\\"aria-describedby\\":\\"footnote-label\\",\\"data-footnote-ref\\":!0,id:\\"user-content-fnref-2\\",children:\\"2\\"})})]}),(0,e.jsx)(s.p,{children:\\"Inline or manually enumerated footnotes are also supported. Click on the links above to see them in action.\\"}),(0,e.jsxs)(s.h1,{className:\\"content-header\\",id:\\"deriving-the-ols-estimator\\",children:[(0,e.jsx)(s.a,{href:\\"#deriving-the-ols-estimator\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(s.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(s.svg,{viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",children:[(0,e.jsx)(s.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(s.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Deriving the OLS Estimator\\"]}),(0,e.jsxs)(s.p,{children:[\\"Using matrix notation, let \\",(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsx)(s.mrow,{children:(0,e.jsx)(s.mi,{children:\\"n\\"})}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"n\\"})]})})}),(0,e.jsx)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".4306em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",children:\\"n\\"})]})})]}),\\" denote the number of observations and \\",(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsx)(s.mrow,{children:(0,e.jsx)(s.mi,{children:\\"k\\"})}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"k\\"})]})})}),(0,e.jsx)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".6944em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".03148em\\"},children:\\"k\\"})]})})]}),\\" denote the number of regressors.\\"]}),(0,e.jsxs)(s.p,{children:[\\"The vector of outcome variables \\",(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsx)(s.mrow,{children:(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"Y\\"})}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"\\\\\\\\mathbf{Y}\\"})]})})}),(0,e.jsx)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".6861em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",style:{marginRight:\\".02875em\\"},children:\\"Y\\"})]})})]}),\\" is a \\",(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mi,{children:\\"n\\"}),(0,e.jsx)(s.mo,{children:\\"\\\\xD7\\"}),(0,e.jsx)(s.mn,{children:\\"1\\"})]}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"n \\\\\\\\times 1\\"})]})})}),(0,e.jsxs)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:[(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".6667em\\",verticalAlign:\\"-.0833em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",children:\\"n\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}}),(0,e.jsx)(s.span,{className:\\"mbin\\",children:\\"\\\\xD7\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}})]}),(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".6444em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"1\\"})]})]})]}),\\" matrix,\\"]}),(0,e.jsx)(s.pre,{className:\\"language-tex\\",children:(0,e.jsxs)(s.code,{className:\\"language-tex code-highlight\\",children:[(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"Y\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" = \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\left\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"[\\"}),(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\begin\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,e.jsx)(s.span,{className:\\"token keyword\\",children:\\"array\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"c\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" y_1 \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\\\\\\\\\\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" . \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\\\\\\\\\\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" . \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\\\\\\\\\\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" . \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\\\\\\\\\\\"}),`\\n`]}),(0,e.jsx)(s.span,{className:\\"code-line\\",children:` y_n\\n`}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\end\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,e.jsx)(s.span,{className:\\"token keyword\\",children:\\"array\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\right\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"]\\"}),`\\n`]})]})}),(0,e.jsx)(s.span,{className:\\"katex-display\\",translate:\\"no\\",children:(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",display:\\"block\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"Y\\"}),(0,e.jsx)(s.mo,{children:\\"=\\"}),(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mo,{fence:\\"true\\",children:\\"[\\"}),(0,e.jsxs)(s.mtable,{columnalign:\\"center\\",columnspacing:\\"1em\\",rowspacing:\\"0.16em\\",children:[(0,e.jsx)(s.mtr,{children:(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsxs)(s.msub,{children:[(0,e.jsx)(s.mi,{children:\\"y\\"}),(0,e.jsx)(s.mn,{children:\\"1\\"})]})})})}),(0,e.jsx)(s.mtr,{children:(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})})}),(0,e.jsx)(s.mtr,{children:(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})})}),(0,e.jsx)(s.mtr,{children:(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})})}),(0,e.jsx)(s.mtr,{children:(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsxs)(s.msub,{children:[(0,e.jsx)(s.mi,{children:\\"y\\"}),(0,e.jsx)(s.mi,{children:\\"n\\"})]})})})})]}),(0,e.jsx)(s.mo,{fence:\\"true\\",children:\\"]\\"})]})]}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"\\\\\\\\mathbf{Y} = \\\\\\\\left[\\\\\\\\begin{array} {c} y_1 \\\\\\\\\\\\\\\\ . \\\\\\\\\\\\\\\\ . \\\\\\\\\\\\\\\\ . \\\\\\\\\\\\\\\\ y_n \\\\\\\\end{array}\\\\\\\\right]\\"})]})})}),(0,e.jsxs)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:[(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".6861em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",style:{marginRight:\\".02875em\\"},children:\\"Y\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mrel\\",children:\\"=\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}})]}),(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\"6em\\",verticalAlign:\\"-2.75em\\"}}),(0,e.jsxs)(s.span,{className:\\"minner\\",children:[(0,e.jsx)(s.span,{className:\\"mopen\\",children:(0,e.jsx)(s.span,{className:\\"delimsizing mult\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"3.25em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-5.25em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"8em\\"}}),(0,e.jsx)(s.span,{style:{width:\\".667em\\",height:\\"6em\\"},children:(0,e.jsx)(s.svg,{viewBox:\\"0 0 667 6000\\",xmlns:\\"http://www.w3.org/2000/svg\\",height:\\"6.000em\\",width:\\"0.667em\\",children:(0,e.jsx)(s.path,{d:`M403 1759 V84 H666 V0 H319 V1759 v2400 v1759 h347 v-84\\nH403z M403 1759 V0 H319 V1759 v2400 v1759 h84z`})})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"2.75em\\"},children:(0,e.jsx)(s.span,{})})})]})})}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsxs)(s.span,{className:\\"mtable\\",children:[(0,e.jsx)(s.span,{className:\\"arraycolsep\\",style:{width:\\".5em\\"}}),(0,e.jsx)(s.span,{className:\\"col-align-c\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\"3.25em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-5.41em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".03588em\\"},children:\\"y\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".3011em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-2.55em\\",marginLeft:\\"-.0359em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"1\\"})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".15em\\"},children:(0,e.jsx)(s.span,{})})})]})})]})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-4.21em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.01em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-1.81em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-.61em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".03588em\\"},children:\\"y\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".1514em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-2.55em\\",marginLeft:\\"-.0359em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"n\\"})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".15em\\"},children:(0,e.jsx)(s.span,{})})})]})})]})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"2.75em\\"},children:(0,e.jsx)(s.span,{})})})]})}),(0,e.jsx)(s.span,{className:\\"arraycolsep\\",style:{width:\\".5em\\"}})]})}),(0,e.jsx)(s.span,{className:\\"mclose\\",children:(0,e.jsx)(s.span,{className:\\"delimsizing mult\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"3.25em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-5.25em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"8em\\"}}),(0,e.jsx)(s.span,{style:{width:\\".667em\\",height:\\"6em\\"},children:(0,e.jsx)(s.svg,{viewBox:\\"0 0 667 6000\\",xmlns:\\"http://www.w3.org/2000/svg\\",height:\\"6.000em\\",width:\\"0.667em\\",children:(0,e.jsx)(s.path,{d:`M347 1759 V0 H0 V84 H263 V1759 v2400 v1759 H0 v84 H347z\\nM347 1759 V0 H263 V1759 v2400 v1759 h84z`})})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"2.75em\\"},children:(0,e.jsx)(s.span,{})})})]})})})]})]})]})]})}),(0,e.jsxs)(s.p,{children:[\\"The matrix of regressors \\",(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsx)(s.mrow,{children:(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"X\\"})}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"\\\\\\\\mathbf{X}\\"})]})})}),(0,e.jsx)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".6861em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"X\\"})]})})]}),\\" is a \\",(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mi,{children:\\"n\\"}),(0,e.jsx)(s.mo,{children:\\"\\\\xD7\\"}),(0,e.jsx)(s.mi,{children:\\"k\\"})]}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"n \\\\\\\\times k\\"})]})})}),(0,e.jsxs)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:[(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".6667em\\",verticalAlign:\\"-.0833em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",children:\\"n\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}}),(0,e.jsx)(s.span,{className:\\"mbin\\",children:\\"\\\\xD7\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}})]}),(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".6944em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".03148em\\"},children:\\"k\\"})]})]})]}),\\" matrix (or each row is a \\",(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mi,{children:\\"k\\"}),(0,e.jsx)(s.mo,{children:\\"\\\\xD7\\"}),(0,e.jsx)(s.mn,{children:\\"1\\"})]}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"k \\\\\\\\times 1\\"})]})})}),(0,e.jsxs)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:[(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".7778em\\",verticalAlign:\\"-.0833em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".03148em\\"},children:\\"k\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}}),(0,e.jsx)(s.span,{className:\\"mbin\\",children:\\"\\\\xD7\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}})]}),(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".6444em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"1\\"})]})]})]}),\\" vector),\\"]}),(0,e.jsx)(s.pre,{className:\\"language-latex\\",children:(0,e.jsxs)(s.code,{className:\\"code-highlight language-latex\\",children:[(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"X\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" = \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\left\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"[\\"}),(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\begin\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,e.jsx)(s.span,{className:\\"token keyword\\",children:\\"array\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"ccccc\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" x_\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"11\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" . \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" . \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" . \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" x_\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"1k\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\\\\\\\\\\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" . \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" . \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" . \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" . \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" . \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\\\\\\\\\\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" . \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" . \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" . \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" . \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" . \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\\\\\\\\\\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" . \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" . \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" . \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" . \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" . \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\\\\\\\\\\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" x_\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"n1\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" . \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" . \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" . \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" x_\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"nn\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\end\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,e.jsx)(s.span,{className:\\"token keyword\\",children:\\"array\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\right\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"]\\"}),` =\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\left\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"[\\"}),(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\begin\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,e.jsx)(s.span,{className:\\"token keyword\\",children:\\"array\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"c\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"x\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\"\'_1 \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\\\\\\\\\\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" . \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\\\\\\\\\\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" . \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\\\\\\\\\\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" . \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\\\\\\\\\\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"x\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\'_n\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\end\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,e.jsx)(s.span,{className:\\"token keyword\\",children:\\"array\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\right\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"]\\"}),`\\n`]})]})}),(0,e.jsx)(s.span,{className:\\"katex-display\\",translate:\\"no\\",children:(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",display:\\"block\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"X\\"}),(0,e.jsx)(s.mo,{children:\\"=\\"}),(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mo,{fence:\\"true\\",children:\\"[\\"}),(0,e.jsxs)(s.mtable,{columnalign:\\"center center center center center\\",columnspacing:\\"1em\\",rowspacing:\\"0.16em\\",children:[(0,e.jsxs)(s.mtr,{children:[(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsxs)(s.msub,{children:[(0,e.jsx)(s.mi,{children:\\"x\\"}),(0,e.jsx)(s.mn,{children:\\"11\\"})]})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsxs)(s.msub,{children:[(0,e.jsx)(s.mi,{children:\\"x\\"}),(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mn,{children:\\"1\\"}),(0,e.jsx)(s.mi,{children:\\"k\\"})]})]})})})]}),(0,e.jsxs)(s.mtr,{children:[(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})})]}),(0,e.jsxs)(s.mtr,{children:[(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})})]}),(0,e.jsxs)(s.mtr,{children:[(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})})]}),(0,e.jsxs)(s.mtr,{children:[(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsxs)(s.msub,{children:[(0,e.jsx)(s.mi,{children:\\"x\\"}),(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mi,{children:\\"n\\"}),(0,e.jsx)(s.mn,{children:\\"1\\"})]})]})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsxs)(s.msub,{children:[(0,e.jsx)(s.mi,{children:\\"x\\"}),(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mi,{children:\\"n\\"}),(0,e.jsx)(s.mi,{children:\\"n\\"})]})]})})})]})]}),(0,e.jsx)(s.mo,{fence:\\"true\\",children:\\"]\\"})]}),(0,e.jsx)(s.mo,{children:\\"=\\"}),(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mo,{fence:\\"true\\",children:\\"[\\"}),(0,e.jsxs)(s.mtable,{columnalign:\\"center\\",columnspacing:\\"1em\\",rowspacing:\\"0.16em\\",children:[(0,e.jsx)(s.mtr,{children:(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsxs)(s.msubsup,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"x\\"}),(0,e.jsx)(s.mn,{children:\\"1\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]})})})}),(0,e.jsx)(s.mtr,{children:(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})})}),(0,e.jsx)(s.mtr,{children:(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})})}),(0,e.jsx)(s.mtr,{children:(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\".\\"})})})}),(0,e.jsx)(s.mtr,{children:(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"false\\",scriptlevel:\\"0\\",children:(0,e.jsxs)(s.msubsup,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"x\\"}),(0,e.jsx)(s.mi,{children:\\"n\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]})})})})]}),(0,e.jsx)(s.mo,{fence:\\"true\\",children:\\"]\\"})]})]}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"\\\\\\\\mathbf{X} = \\\\\\\\left[\\\\\\\\begin{array} {ccccc} x_{11} & . & . & . & x_{1k} \\\\\\\\\\\\\\\\ . & . & . & . & . \\\\\\\\\\\\\\\\ . & . & . & . & . \\\\\\\\\\\\\\\\ . & . & . & . & . \\\\\\\\\\\\\\\\ x_{n1} & . & . & . & x_{nn} \\\\\\\\end{array}\\\\\\\\right] = \\\\\\\\left[\\\\\\\\begin{array} {c} \\\\\\\\mathbf{x}\'_1 \\\\\\\\\\\\\\\\ . \\\\\\\\\\\\\\\\ . \\\\\\\\\\\\\\\\ . \\\\\\\\\\\\\\\\ \\\\\\\\mathbf{x}\'_n \\\\\\\\end{array}\\\\\\\\right]\\"})]})})}),(0,e.jsxs)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:[(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".6861em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"X\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mrel\\",children:\\"=\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}})]}),(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\"6em\\",verticalAlign:\\"-2.75em\\"}}),(0,e.jsxs)(s.span,{className:\\"minner\\",children:[(0,e.jsx)(s.span,{className:\\"mopen\\",children:(0,e.jsx)(s.span,{className:\\"delimsizing mult\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"3.25em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-5.25em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"8em\\"}}),(0,e.jsx)(s.span,{style:{width:\\".667em\\",height:\\"6em\\"},children:(0,e.jsx)(s.svg,{viewBox:\\"0 0 667 6000\\",xmlns:\\"http://www.w3.org/2000/svg\\",height:\\"6.000em\\",width:\\"0.667em\\",children:(0,e.jsx)(s.path,{d:`M403 1759 V84 H666 V0 H319 V1759 v2400 v1759 h347 v-84\\nH403z M403 1759 V0 H319 V1759 v2400 v1759 h84z`})})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"2.75em\\"},children:(0,e.jsx)(s.span,{})})})]})})}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsxs)(s.span,{className:\\"mtable\\",children:[(0,e.jsx)(s.span,{className:\\"arraycolsep\\",style:{width:\\".5em\\"}}),(0,e.jsx)(s.span,{className:\\"col-align-c\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\"3.25em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-5.41em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",children:\\"x\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".3011em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-2.55em\\",marginLeft:\\"0\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"11\\"})})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".15em\\"},children:(0,e.jsx)(s.span,{})})})]})})]})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-4.21em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.01em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-1.81em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-.61em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",children:\\"x\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".3011em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-2.55em\\",marginLeft:\\"0\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsxs)(s.span,{className:\\"mord mtight\\",children:[(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"n\\"}),(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"1\\"})]})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".15em\\"},children:(0,e.jsx)(s.span,{})})})]})})]})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"2.75em\\"},children:(0,e.jsx)(s.span,{})})})]})}),(0,e.jsx)(s.span,{className:\\"arraycolsep\\",style:{width:\\".5em\\"}}),(0,e.jsx)(s.span,{className:\\"arraycolsep\\",style:{width:\\".5em\\"}}),(0,e.jsx)(s.span,{className:\\"col-align-c\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\"3.25em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-5.41em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-4.21em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.01em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-1.81em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-.61em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"2.75em\\"},children:(0,e.jsx)(s.span,{})})})]})}),(0,e.jsx)(s.span,{className:\\"arraycolsep\\",style:{width:\\".5em\\"}}),(0,e.jsx)(s.span,{className:\\"arraycolsep\\",style:{width:\\".5em\\"}}),(0,e.jsx)(s.span,{className:\\"col-align-c\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\"3.25em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-5.41em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-4.21em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.01em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-1.81em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-.61em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"2.75em\\"},children:(0,e.jsx)(s.span,{})})})]})}),(0,e.jsx)(s.span,{className:\\"arraycolsep\\",style:{width:\\".5em\\"}}),(0,e.jsx)(s.span,{className:\\"arraycolsep\\",style:{width:\\".5em\\"}}),(0,e.jsx)(s.span,{className:\\"col-align-c\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\"3.25em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-5.41em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-4.21em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.01em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-1.81em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-.61em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"2.75em\\"},children:(0,e.jsx)(s.span,{})})})]})}),(0,e.jsx)(s.span,{className:\\"arraycolsep\\",style:{width:\\".5em\\"}}),(0,e.jsx)(s.span,{className:\\"arraycolsep\\",style:{width:\\".5em\\"}}),(0,e.jsx)(s.span,{className:\\"col-align-c\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\"3.25em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-5.41em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",children:\\"x\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".3361em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-2.55em\\",marginLeft:\\"0\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsxs)(s.span,{className:\\"mord mtight\\",children:[(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"1\\"}),(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",style:{marginRight:\\".03148em\\"},children:\\"k\\"})]})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".15em\\"},children:(0,e.jsx)(s.span,{})})})]})})]})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-4.21em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.01em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-1.81em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-.61em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",children:\\"x\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".1514em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-2.55em\\",marginLeft:\\"0\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"nn\\"})})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".15em\\"},children:(0,e.jsx)(s.span,{})})})]})})]})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"2.75em\\"},children:(0,e.jsx)(s.span,{})})})]})}),(0,e.jsx)(s.span,{className:\\"arraycolsep\\",style:{width:\\".5em\\"}})]})}),(0,e.jsx)(s.span,{className:\\"mclose\\",children:(0,e.jsx)(s.span,{className:\\"delimsizing mult\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"3.25em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-5.25em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"8em\\"}}),(0,e.jsx)(s.span,{style:{width:\\".667em\\",height:\\"6em\\"},children:(0,e.jsx)(s.svg,{viewBox:\\"0 0 667 6000\\",xmlns:\\"http://www.w3.org/2000/svg\\",height:\\"6.000em\\",width:\\"0.667em\\",children:(0,e.jsx)(s.path,{d:`M347 1759 V0 H0 V84 H263 V1759 v2400 v1759 H0 v84 H347z\\nM347 1759 V0 H263 V1759 v2400 v1759 h84z`})})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"2.75em\\"},children:(0,e.jsx)(s.span,{})})})]})})})]}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mrel\\",children:\\"=\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}})]}),(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\"6em\\",verticalAlign:\\"-2.75em\\"}}),(0,e.jsxs)(s.span,{className:\\"minner\\",children:[(0,e.jsx)(s.span,{className:\\"mopen\\",children:(0,e.jsx)(s.span,{className:\\"delimsizing mult\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"3.25em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-5.25em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"8em\\"}}),(0,e.jsx)(s.span,{style:{width:\\".667em\\",height:\\"6em\\"},children:(0,e.jsx)(s.svg,{viewBox:\\"0 0 667 6000\\",xmlns:\\"http://www.w3.org/2000/svg\\",height:\\"6.000em\\",width:\\"0.667em\\",children:(0,e.jsx)(s.path,{d:`M403 1759 V84 H666 V0 H319 V1759 v2400 v1759 h347 v-84\\nH403z M403 1759 V0 H319 V1759 v2400 v1759 h84z`})})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"2.75em\\"},children:(0,e.jsx)(s.span,{})})})]})})}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsxs)(s.span,{className:\\"mtable\\",children:[(0,e.jsx)(s.span,{className:\\"arraycolsep\\",style:{width:\\".5em\\"}}),(0,e.jsx)(s.span,{className:\\"col-align-c\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\"3.25em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-5.41em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"x\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\".7519em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-2.4519em\\",marginLeft:\\"0\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"1\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.063em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".2481em\\"},children:(0,e.jsx)(s.span,{})})})]})})]})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-4.21em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.01em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-1.81em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\".\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-.61em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"x\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\".7519em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-2.453em\\",marginLeft:\\"0\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"n\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.063em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".247em\\"},children:(0,e.jsx)(s.span,{})})})]})})]})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"2.75em\\"},children:(0,e.jsx)(s.span,{})})})]})}),(0,e.jsx)(s.span,{className:\\"arraycolsep\\",style:{width:\\".5em\\"}})]})}),(0,e.jsx)(s.span,{className:\\"mclose\\",children:(0,e.jsx)(s.span,{className:\\"delimsizing mult\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"3.25em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-5.25em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"8em\\"}}),(0,e.jsx)(s.span,{style:{width:\\".667em\\",height:\\"6em\\"},children:(0,e.jsx)(s.svg,{viewBox:\\"0 0 667 6000\\",xmlns:\\"http://www.w3.org/2000/svg\\",height:\\"6.000em\\",width:\\"0.667em\\",children:(0,e.jsx)(s.path,{d:`M347 1759 V0 H0 V84 H263 V1759 v2400 v1759 H0 v84 H347z\\nM347 1759 V0 H263 V1759 v2400 v1759 h84z`})})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"2.75em\\"},children:(0,e.jsx)(s.span,{})})})]})})})]})]})]})]})}),(0,e.jsxs)(s.p,{children:[\\"The vector of error terms \\",(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsx)(s.mrow,{children:(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"U\\"})}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"\\\\\\\\mathbf{U}\\"})]})})}),(0,e.jsx)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".6861em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"U\\"})]})})]}),\\" is also a \\",(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mi,{children:\\"n\\"}),(0,e.jsx)(s.mo,{children:\\"\\\\xD7\\"}),(0,e.jsx)(s.mn,{children:\\"1\\"})]}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"n \\\\\\\\times 1\\"})]})})}),(0,e.jsxs)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:[(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".6667em\\",verticalAlign:\\"-.0833em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",children:\\"n\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}}),(0,e.jsx)(s.span,{className:\\"mbin\\",children:\\"\\\\xD7\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}})]}),(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".6444em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"1\\"})]})]})]}),\\" matrix.\\"]}),(0,e.jsx)(s.p,{children:\\"At times it might be easier to use vector notation. For consistency, I will use the bold small x to denote a vector and capital letters to denote a matrix. Single observations are denoted by the subscript.\\"}),(0,e.jsxs)(s.h2,{className:\\"content-header\\",id:\\"least-squares\\",children:[(0,e.jsx)(s.a,{href:\\"#least-squares\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(s.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(s.svg,{viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",children:[(0,e.jsx)(s.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(s.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Least Squares\\"]}),(0,e.jsxs)(s.p,{children:[(0,e.jsx)(s.strong,{children:\\"Start\\"}),\\":\\",(0,e.jsx)(s.br,{}),(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsxs)(s.mrow,{children:[(0,e.jsxs)(s.msub,{children:[(0,e.jsx)(s.mi,{children:\\"y\\"}),(0,e.jsx)(s.mi,{children:\\"i\\"})]}),(0,e.jsx)(s.mo,{children:\\"=\\"}),(0,e.jsxs)(s.msubsup,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"x\\"}),(0,e.jsx)(s.mi,{children:\\"i\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]}),(0,e.jsx)(s.mi,{children:\\"\\\\u03B2\\"}),(0,e.jsx)(s.mo,{children:\\"+\\"}),(0,e.jsxs)(s.msub,{children:[(0,e.jsx)(s.mi,{children:\\"u\\"}),(0,e.jsx)(s.mi,{children:\\"i\\"})]})]}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"y_i = \\\\\\\\mathbf{x}\'_i \\\\\\\\beta + u_i\\"})]})})}),(0,e.jsxs)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:[(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".625em\\",verticalAlign:\\"-.1944em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".03588em\\"},children:\\"y\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".3117em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-2.55em\\",marginLeft:\\"-.0359em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"i\\"})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".15em\\"},children:(0,e.jsx)(s.span,{})})})]})})]}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mrel\\",children:\\"=\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}})]}),(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\"1.0106em\\",verticalAlign:\\"-.2587em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"x\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\".7519em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-2.4413em\\",marginLeft:\\"0\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"i\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.063em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".2587em\\"},children:(0,e.jsx)(s.span,{})})})]})})]}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".05278em\\"},children:\\"\\\\u03B2\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}}),(0,e.jsx)(s.span,{className:\\"mbin\\",children:\\"+\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}})]}),(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".5806em\\",verticalAlign:\\"-.15em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",children:\\"u\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".3117em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-2.55em\\",marginLeft:\\"0\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"i\\"})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".15em\\"},children:(0,e.jsx)(s.span,{})})})]})})]})]})]})]})]}),(0,e.jsxs)(s.p,{children:[(0,e.jsx)(s.strong,{children:\\"Assumptions\\"}),\\":\\"]}),(0,e.jsxs)(s.ol,{children:[(0,e.jsx)(s.li,{children:\\"Linearity (given above)\\"}),(0,e.jsxs)(s.li,{children:[(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mi,{children:\\"E\\"}),(0,e.jsx)(s.mo,{stretchy:\\"false\\",children:\\"(\\"}),(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"U\\"}),(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\"\\\\u2223\\"}),(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"X\\"}),(0,e.jsx)(s.mo,{stretchy:\\"false\\",children:\\")\\"}),(0,e.jsx)(s.mo,{children:\\"=\\"}),(0,e.jsx)(s.mn,{children:\\"0\\"})]}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"E(\\\\\\\\mathbf{U}|\\\\\\\\mathbf{X}) = 0\\"})]})})}),(0,e.jsxs)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:[(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\"1em\\",verticalAlign:\\"-.25em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".05764em\\"},children:\\"E\\"}),(0,e.jsx)(s.span,{className:\\"mopen\\",children:\\"(\\"}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"U\\"}),(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"\\\\u2223\\"}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"X\\"}),(0,e.jsx)(s.span,{className:\\"mclose\\",children:\\")\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mrel\\",children:\\"=\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}})]}),(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".6444em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"0\\"})]})]})]}),\\" (conditional independence)\\"]}),(0,e.jsxs)(s.li,{children:[\\"rank(\\",(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsx)(s.mrow,{children:(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"X\\"})}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"\\\\\\\\mathbf{X}\\"})]})})}),(0,e.jsx)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".6861em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"X\\"})]})})]}),\\") = \\",(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsx)(s.mrow,{children:(0,e.jsx)(s.mi,{children:\\"k\\"})}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"k\\"})]})})}),(0,e.jsx)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".6944em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".03148em\\"},children:\\"k\\"})]})})]}),\\" (no multi-collinearity i.e. full rank)\\"]}),(0,e.jsxs)(s.li,{children:[(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mi,{children:\\"V\\"}),(0,e.jsx)(s.mi,{children:\\"a\\"}),(0,e.jsx)(s.mi,{children:\\"r\\"}),(0,e.jsx)(s.mo,{stretchy:\\"false\\",children:\\"(\\"}),(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"U\\"}),(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\"\\\\u2223\\"}),(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"X\\"}),(0,e.jsx)(s.mo,{stretchy:\\"false\\",children:\\")\\"}),(0,e.jsx)(s.mo,{children:\\"=\\"}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mi,{children:\\"\\\\u03C3\\"}),(0,e.jsx)(s.mn,{children:\\"2\\"})]}),(0,e.jsxs)(s.msub,{children:[(0,e.jsx)(s.mi,{children:\\"I\\"}),(0,e.jsx)(s.mi,{children:\\"n\\"})]})]}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"Var(\\\\\\\\mathbf{U}|\\\\\\\\mathbf{X}) = \\\\\\\\sigma^2 I_n\\"})]})})}),(0,e.jsxs)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:[(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\"1em\\",verticalAlign:\\"-.25em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",children:\\"Va\\"}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".02778em\\"},children:\\"r\\"}),(0,e.jsx)(s.span,{className:\\"mopen\\",children:\\"(\\"}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"U\\"}),(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"\\\\u2223\\"}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"X\\"}),(0,e.jsx)(s.span,{className:\\"mclose\\",children:\\")\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mrel\\",children:\\"=\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}})]}),(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".9641em\\",verticalAlign:\\"-.15em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".03588em\\"},children:\\"\\\\u03C3\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8141em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-3.063em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"2\\"})})]})})})})})]}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".07847em\\"},children:\\"I\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".1514em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-2.55em\\",marginLeft:\\"-.0785em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"n\\"})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".15em\\"},children:(0,e.jsx)(s.span,{})})})]})})]})]})]})]}),\\" (Homoskedascity)\\"]})]}),(0,e.jsxs)(s.p,{children:[(0,e.jsx)(s.strong,{children:\\"Aim\\"}),\\":\\",(0,e.jsx)(s.br,{}),\\"Find \\",(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsx)(s.mrow,{children:(0,e.jsx)(s.mi,{children:\\"\\\\u03B2\\"})}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"\\\\\\\\beta\\"})]})})}),(0,e.jsx)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".8889em\\",verticalAlign:\\"-.1944em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".05278em\\"},children:\\"\\\\u03B2\\"})]})})]}),\\" that minimises the sum of squared errors:\\"]}),(0,e.jsx)(s.span,{className:\\"katex-display\\",translate:\\"no\\",children:(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",display:\\"block\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mi,{children:\\"Q\\"}),(0,e.jsx)(s.mo,{children:\\"=\\"}),(0,e.jsxs)(s.munderover,{children:[(0,e.jsx)(s.mo,{children:\\"\\\\u2211\\"}),(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mi,{children:\\"i\\"}),(0,e.jsx)(s.mo,{children:\\"=\\"}),(0,e.jsx)(s.mn,{children:\\"1\\"})]}),(0,e.jsx)(s.mi,{children:\\"n\\"})]}),(0,e.jsxs)(s.msubsup,{children:[(0,e.jsx)(s.mi,{children:\\"u\\"}),(0,e.jsx)(s.mi,{children:\\"i\\"}),(0,e.jsx)(s.mn,{children:\\"2\\"})]}),(0,e.jsx)(s.mo,{children:\\"=\\"}),(0,e.jsxs)(s.munderover,{children:[(0,e.jsx)(s.mo,{children:\\"\\\\u2211\\"}),(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mi,{children:\\"i\\"}),(0,e.jsx)(s.mo,{children:\\"=\\"}),(0,e.jsx)(s.mn,{children:\\"1\\"})]}),(0,e.jsx)(s.mi,{children:\\"n\\"})]}),(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mo,{stretchy:\\"false\\",children:\\"(\\"}),(0,e.jsxs)(s.msub,{children:[(0,e.jsx)(s.mi,{children:\\"y\\"}),(0,e.jsx)(s.mi,{children:\\"i\\"})]}),(0,e.jsx)(s.mo,{children:\\"\\\\u2212\\"}),(0,e.jsxs)(s.msubsup,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"x\\"}),(0,e.jsx)(s.mi,{children:\\"i\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]}),(0,e.jsx)(s.mi,{children:\\"\\\\u03B2\\"}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mo,{stretchy:\\"false\\",children:\\")\\"}),(0,e.jsx)(s.mn,{children:\\"2\\"})]})]}),(0,e.jsx)(s.mo,{children:\\"=\\"}),(0,e.jsx)(s.mo,{stretchy:\\"false\\",children:\\"(\\"}),(0,e.jsx)(s.mi,{children:\\"Y\\"}),(0,e.jsx)(s.mo,{children:\\"\\\\u2212\\"}),(0,e.jsx)(s.mi,{children:\\"X\\"}),(0,e.jsx)(s.mi,{children:\\"\\\\u03B2\\"}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mo,{stretchy:\\"false\\",children:\\")\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]}),(0,e.jsx)(s.mo,{stretchy:\\"false\\",children:\\"(\\"}),(0,e.jsx)(s.mi,{children:\\"Y\\"}),(0,e.jsx)(s.mo,{children:\\"\\\\u2212\\"}),(0,e.jsx)(s.mi,{children:\\"X\\"}),(0,e.jsx)(s.mi,{children:\\"\\\\u03B2\\"}),(0,e.jsx)(s.mo,{stretchy:\\"false\\",children:\\")\\"})]}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"Q = \\\\\\\\sum_{i=1}^{n}{u_i^2} = \\\\\\\\sum_{i=1}^{n}{(y_i - \\\\\\\\mathbf{x}\'_i\\\\\\\\beta)^2} = (Y-X\\\\\\\\beta)\'(Y-X\\\\\\\\beta)\\"})]})})}),(0,e.jsxs)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:[(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".8778em\\",verticalAlign:\\"-.1944em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",children:\\"Q\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mrel\\",children:\\"=\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}})]}),(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\"2.9291em\\",verticalAlign:\\"-1.2777em\\"}}),(0,e.jsx)(s.span,{className:\\"mop op-limits\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\"1.6514em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-1.8723em\\",marginLeft:\\"0\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.05em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsxs)(s.span,{className:\\"mord mtight\\",children:[(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"i\\"}),(0,e.jsx)(s.span,{className:\\"mtight mrel\\",children:\\"=\\"}),(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"1\\"})]})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.05em\\"}}),(0,e.jsx)(s.span,{children:(0,e.jsx)(s.span,{className:\\"mop large-op op-symbol\\",children:\\"\\\\u2211\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-4.3em\\",marginLeft:\\"0\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.05em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"n\\"})})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"1.2777em\\"},children:(0,e.jsx)(s.span,{})})})]})}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".1667em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",children:\\"u\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\".8641em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-2.453em\\",marginLeft:\\"0\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"i\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"2\\"})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".247em\\"},children:(0,e.jsx)(s.span,{})})})]})})]})}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mrel\\",children:\\"=\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}})]}),(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\"2.9291em\\",verticalAlign:\\"-1.2777em\\"}}),(0,e.jsx)(s.span,{className:\\"mop op-limits\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\"1.6514em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-1.8723em\\",marginLeft:\\"0\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.05em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsxs)(s.span,{className:\\"mord mtight\\",children:[(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"i\\"}),(0,e.jsx)(s.span,{className:\\"mtight mrel\\",children:\\"=\\"}),(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"1\\"})]})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.05em\\"}}),(0,e.jsx)(s.span,{children:(0,e.jsx)(s.span,{className:\\"mop large-op op-symbol\\",children:\\"\\\\u2211\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-4.3em\\",marginLeft:\\"0\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.05em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"n\\"})})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"1.2777em\\"},children:(0,e.jsx)(s.span,{})})})]})}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".1667em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mopen\\",children:\\"(\\"}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".03588em\\"},children:\\"y\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".3117em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-2.55em\\",marginLeft:\\"-.0359em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"i\\"})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".15em\\"},children:(0,e.jsx)(s.span,{})})})]})})]}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}}),(0,e.jsx)(s.span,{className:\\"mbin\\",children:\\"\\\\u2212\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"x\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\".8019em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-2.453em\\",marginLeft:\\"0\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"i\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".247em\\"},children:(0,e.jsx)(s.span,{})})})]})})]}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".05278em\\"},children:\\"\\\\u03B2\\"}),(0,e.jsxs)(s.span,{className:\\"mclose\\",children:[(0,e.jsx)(s.span,{className:\\"mclose\\",children:\\")\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8641em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"2\\"})})]})})})})})]})]}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mrel\\",children:\\"=\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}})]}),(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\"1em\\",verticalAlign:\\"-.25em\\"}}),(0,e.jsx)(s.span,{className:\\"mopen\\",children:\\"(\\"}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".22222em\\"},children:\\"Y\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}}),(0,e.jsx)(s.span,{className:\\"mbin\\",children:\\"\\\\u2212\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}})]}),(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\"1.0519em\\",verticalAlign:\\"-.25em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".05278em\\"},children:\\"X\\\\u03B2\\"}),(0,e.jsxs)(s.span,{className:\\"mclose\\",children:[(0,e.jsx)(s.span,{className:\\"mclose\\",children:\\")\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8019em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})})})})})]}),(0,e.jsx)(s.span,{className:\\"mopen\\",children:\\"(\\"}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".22222em\\"},children:\\"Y\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}}),(0,e.jsx)(s.span,{className:\\"mbin\\",children:\\"\\\\u2212\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}})]}),(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\"1em\\",verticalAlign:\\"-.25em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".05278em\\"},children:\\"X\\\\u03B2\\"}),(0,e.jsx)(s.span,{className:\\"mclose\\",children:\\")\\"})]})]})]})}),(0,e.jsxs)(s.p,{children:[(0,e.jsx)(s.strong,{children:\\"Solution\\"}),\\":\\",(0,e.jsx)(s.br,{}),\\"Hints: \\",(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsx)(s.mrow,{children:(0,e.jsx)(s.mi,{children:\\"Q\\"})}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"Q\\"})]})})}),(0,e.jsx)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".8778em\\",verticalAlign:\\"-.1944em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",children:\\"Q\\"})]})})]}),\\" is a \\",(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mn,{children:\\"1\\"}),(0,e.jsx)(s.mo,{children:\\"\\\\xD7\\"}),(0,e.jsx)(s.mn,{children:\\"1\\"})]}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"1 \\\\\\\\times 1\\"})]})})}),(0,e.jsxs)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:[(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".7278em\\",verticalAlign:\\"-.0833em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"1\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}}),(0,e.jsx)(s.span,{className:\\"mbin\\",children:\\"\\\\xD7\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}})]}),(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".6444em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"1\\"})]})]})]}),\\" scalar, by symmetry \\",(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsxs)(s.mrow,{children:[(0,e.jsxs)(s.mfrac,{children:[(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\"\\\\u2202\\"}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mi,{children:\\"b\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]}),(0,e.jsx)(s.mi,{children:\\"A\\"}),(0,e.jsx)(s.mi,{children:\\"b\\"})]}),(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"normal\\",children:\\"\\\\u2202\\"}),(0,e.jsx)(s.mi,{children:\\"b\\"})]})]}),(0,e.jsx)(s.mo,{children:\\"=\\"}),(0,e.jsx)(s.mn,{children:\\"2\\"}),(0,e.jsx)(s.mi,{children:\\"A\\"}),(0,e.jsx)(s.mi,{children:\\"b\\"})]}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"\\\\\\\\frac{\\\\\\\\partial b\'Ab}{\\\\\\\\partial b} = 2Ab\\"})]})})}),(0,e.jsxs)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:[(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\"1.3185em\\",verticalAlign:\\"-.345em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mopen nulldelimiter\\"}),(0,e.jsx)(s.span,{className:\\"mfrac\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\".9735em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-2.655em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsxs)(s.span,{className:\\"mord mtight\\",children:[(0,e.jsx)(s.span,{className:\\"mord mtight\\",style:{marginRight:\\".05556em\\"},children:\\"\\\\u2202\\"}),(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"b\\"})]})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.23em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"frac-line\\",style:{borderBottomWidth:\\".04em\\"}})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.394em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsxs)(s.span,{className:\\"mord mtight\\",children:[(0,e.jsx)(s.span,{className:\\"mord mtight\\",style:{marginRight:\\".05556em\\"},children:\\"\\\\u2202\\"}),(0,e.jsxs)(s.span,{className:\\"mord mtight\\",children:[(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"b\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8278em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-2.931em\\",marginRight:\\".0714em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.5em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size3 size1\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})})})})})]}),(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"A\\"}),(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"b\\"})]})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".345em\\"},children:(0,e.jsx)(s.span,{})})})]})}),(0,e.jsx)(s.span,{className:\\"mclose nulldelimiter\\"})]}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mrel\\",children:\\"=\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}})]}),(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".6944em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"2\\"}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",children:\\"A\\"}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",children:\\"b\\"})]})]})]}),\\".\\"]}),(0,e.jsxs)(s.p,{children:[\\"Take matrix derivative w.r.t \\",(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsx)(s.mrow,{children:(0,e.jsx)(s.mi,{children:\\"\\\\u03B2\\"})}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"\\\\\\\\beta\\"})]})})}),(0,e.jsx)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\".8889em\\",verticalAlign:\\"-.1944em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".05278em\\"},children:\\"\\\\u03B2\\"})]})})]}),\\":\\"]}),(0,e.jsx)(s.pre,{className:\\"language-tex\\",children:(0,e.jsxs)(s.code,{className:\\"language-tex code-highlight\\",children:[(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\begin\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,e.jsx)(s.span,{className:\\"token keyword\\",children:\\"aligned\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\min\\"}),\\" Q \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" = \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\min\\"}),\\"_\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\beta\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"Y\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\"\'\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"Y\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" - 2\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\beta\\"}),\\"\'\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"X\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\"\'\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"Y\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),` +\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\beta\\"}),\\"\'\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"X\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\"\'\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"X\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\beta\\"}),\\" \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\\\\\\\\\\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" = \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\min\\"}),\\"_\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\beta\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" - 2\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\beta\\"}),\\"\'\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"X\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\"\'\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"Y\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" + \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\beta\\"}),\\"\'\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"X\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\"\'\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"X\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\beta\\"}),\\" \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\\\\\\\\\\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\text\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"[\\"}),\\"FOC\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"]\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\"~~~0 \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" = - 2\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"X\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\"\'\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"Y\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" + 2\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"X\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\"\'\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"X\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\hat\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\beta\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\\\\\\\\\\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\hat\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\beta\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" = (\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"X\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\"\'\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"X\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\")^\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"-1\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"X\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\"\'\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"Y\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\\\\\\\\\\\"}),`\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"&\\"}),\\" = (\\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\sum\\"}),\\"^\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"n\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"x\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\"_i \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"x\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\"\'_i)^\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"-1\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\sum\\"}),\\"^\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"n\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" \\",(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\mathbf\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"x\\",(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),`_i y_i\\n`]}),(0,e.jsxs)(s.span,{className:\\"code-line\\",children:[(0,e.jsx)(s.span,{className:\\"token function selector\\",children:\\"\\\\\\\\end\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,e.jsx)(s.span,{className:\\"token keyword\\",children:\\"aligned\\"}),(0,e.jsx)(s.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]})]})}),(0,e.jsx)(s.span,{className:\\"katex-display\\",translate:\\"no\\",children:(0,e.jsxs)(s.span,{className:\\"katex\\",translate:\\"no\\",children:[(0,e.jsx)(s.span,{className:\\"katex-mathml\\",children:(0,e.jsx)(s.math,{xmlns:\\"http://www.w3.org/1998/Math/MathML\\",display:\\"block\\",children:(0,e.jsxs)(s.semantics,{children:[(0,e.jsxs)(s.mtable,{columnalign:\\"right left\\",columnspacing:\\"0em\\",rowspacing:\\"0.25em\\",children:[(0,e.jsxs)(s.mtr,{children:[(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"true\\",scriptlevel:\\"0\\",children:(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mi,{children:\\"min\\"}),(0,e.jsx)(s.mo,{children:\\"\\\\u2061\\"}),(0,e.jsx)(s.mi,{children:\\"Q\\"})]})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"true\\",scriptlevel:\\"0\\",children:(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mrow,{}),(0,e.jsx)(s.mo,{children:\\"=\\"}),(0,e.jsxs)(s.munder,{children:[(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mi,{children:\\"min\\"}),(0,e.jsx)(s.mo,{children:\\"\\\\u2061\\"})]}),(0,e.jsx)(s.mi,{children:\\"\\\\u03B2\\"})]}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"Y\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]}),(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"Y\\"}),(0,e.jsx)(s.mo,{children:\\"\\\\u2212\\"}),(0,e.jsx)(s.mn,{children:\\"2\\"}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mi,{children:\\"\\\\u03B2\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"X\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]}),(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"Y\\"}),(0,e.jsx)(s.mo,{children:\\"+\\"}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mi,{children:\\"\\\\u03B2\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"X\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]}),(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"X\\"}),(0,e.jsx)(s.mi,{children:\\"\\\\u03B2\\"})]})})})]}),(0,e.jsxs)(s.mtr,{children:[(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"true\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mrow,{})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"true\\",scriptlevel:\\"0\\",children:(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mrow,{}),(0,e.jsx)(s.mo,{children:\\"=\\"}),(0,e.jsxs)(s.munder,{children:[(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mi,{children:\\"min\\"}),(0,e.jsx)(s.mo,{children:\\"\\\\u2061\\"})]}),(0,e.jsx)(s.mi,{children:\\"\\\\u03B2\\"})]}),(0,e.jsx)(s.mo,{children:\\"\\\\u2212\\"}),(0,e.jsx)(s.mn,{children:\\"2\\"}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mi,{children:\\"\\\\u03B2\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"X\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]}),(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"Y\\"}),(0,e.jsx)(s.mo,{children:\\"+\\"}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mi,{children:\\"\\\\u03B2\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"X\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]}),(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"X\\"}),(0,e.jsx)(s.mi,{children:\\"\\\\u03B2\\"})]})})})]}),(0,e.jsxs)(s.mtr,{children:[(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"true\\",scriptlevel:\\"0\\",children:(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mtext,{children:\\"[FOC]\\\\xA0\\\\xA0\\\\xA0\\"}),(0,e.jsx)(s.mn,{children:\\"0\\"})]})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"true\\",scriptlevel:\\"0\\",children:(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mrow,{}),(0,e.jsx)(s.mo,{children:\\"=\\"}),(0,e.jsx)(s.mo,{children:\\"\\\\u2212\\"}),(0,e.jsx)(s.mn,{children:\\"2\\"}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"X\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]}),(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"Y\\"}),(0,e.jsx)(s.mo,{children:\\"+\\"}),(0,e.jsx)(s.mn,{children:\\"2\\"}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"X\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]}),(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"X\\"}),(0,e.jsxs)(s.mover,{accent:\\"true\\",children:[(0,e.jsx)(s.mi,{children:\\"\\\\u03B2\\"}),(0,e.jsx)(s.mo,{children:\\"^\\"})]})]})})})]}),(0,e.jsxs)(s.mtr,{children:[(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"true\\",scriptlevel:\\"0\\",children:(0,e.jsxs)(s.mover,{accent:\\"true\\",children:[(0,e.jsx)(s.mi,{children:\\"\\\\u03B2\\"}),(0,e.jsx)(s.mo,{children:\\"^\\"})]})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"true\\",scriptlevel:\\"0\\",children:(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mrow,{}),(0,e.jsx)(s.mo,{children:\\"=\\"}),(0,e.jsx)(s.mo,{stretchy:\\"false\\",children:\\"(\\"}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"X\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]}),(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"X\\"}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mo,{stretchy:\\"false\\",children:\\")\\"}),(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mo,{children:\\"\\\\u2212\\"}),(0,e.jsx)(s.mn,{children:\\"1\\"})]})]}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"X\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]}),(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"Y\\"})]})})})]}),(0,e.jsxs)(s.mtr,{children:[(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"true\\",scriptlevel:\\"0\\",children:(0,e.jsx)(s.mrow,{})})}),(0,e.jsx)(s.mtd,{children:(0,e.jsx)(s.mstyle,{displaystyle:\\"true\\",scriptlevel:\\"0\\",children:(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mrow,{}),(0,e.jsx)(s.mo,{children:\\"=\\"}),(0,e.jsx)(s.mo,{stretchy:\\"false\\",children:\\"(\\"}),(0,e.jsxs)(s.mover,{children:[(0,e.jsx)(s.mo,{children:\\"\\\\u2211\\"}),(0,e.jsx)(s.mi,{children:\\"n\\"})]}),(0,e.jsxs)(s.msub,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"x\\"}),(0,e.jsx)(s.mi,{children:\\"i\\"})]}),(0,e.jsxs)(s.msubsup,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"x\\"}),(0,e.jsx)(s.mi,{children:\\"i\\"}),(0,e.jsx)(s.mo,{lspace:\\"0em\\",mathvariant:\\"normal\\",rspace:\\"0em\\",children:\\"\\\\u2032\\"})]}),(0,e.jsxs)(s.msup,{children:[(0,e.jsx)(s.mo,{stretchy:\\"false\\",children:\\")\\"}),(0,e.jsxs)(s.mrow,{children:[(0,e.jsx)(s.mo,{children:\\"\\\\u2212\\"}),(0,e.jsx)(s.mn,{children:\\"1\\"})]})]}),(0,e.jsxs)(s.mover,{children:[(0,e.jsx)(s.mo,{children:\\"\\\\u2211\\"}),(0,e.jsx)(s.mi,{children:\\"n\\"})]}),(0,e.jsxs)(s.msub,{children:[(0,e.jsx)(s.mi,{mathvariant:\\"bold\\",children:\\"x\\"}),(0,e.jsx)(s.mi,{children:\\"i\\"})]}),(0,e.jsxs)(s.msub,{children:[(0,e.jsx)(s.mi,{children:\\"y\\"}),(0,e.jsx)(s.mi,{children:\\"i\\"})]})]})})})]})]}),(0,e.jsx)(s.annotation,{encoding:\\"application/x-tex\\",children:\\"\\\\\\\\begin{aligned} \\\\\\\\min Q & = \\\\\\\\min_{\\\\\\\\beta} \\\\\\\\mathbf{Y}\'\\\\\\\\mathbf{Y} - 2\\\\\\\\beta\'\\\\\\\\mathbf{X}\'\\\\\\\\mathbf{Y} + \\\\\\\\beta\'\\\\\\\\mathbf{X}\'\\\\\\\\mathbf{X}\\\\\\\\beta \\\\\\\\\\\\\\\\ & = \\\\\\\\min_{\\\\\\\\beta} - 2\\\\\\\\beta\'\\\\\\\\mathbf{X}\'\\\\\\\\mathbf{Y} + \\\\\\\\beta\'\\\\\\\\mathbf{X}\'\\\\\\\\mathbf{X}\\\\\\\\beta \\\\\\\\\\\\\\\\ \\\\\\\\text{[FOC]}~~~0 & = - 2\\\\\\\\mathbf{X}\'\\\\\\\\mathbf{Y} + 2\\\\\\\\mathbf{X}\'\\\\\\\\mathbf{X}\\\\\\\\hat{\\\\\\\\beta} \\\\\\\\\\\\\\\\ \\\\\\\\hat{\\\\\\\\beta} & = (\\\\\\\\mathbf{X}\'\\\\\\\\mathbf{X})^{-1}\\\\\\\\mathbf{X}\'\\\\\\\\mathbf{Y} \\\\\\\\\\\\\\\\ & = (\\\\\\\\sum^{n} \\\\\\\\mathbf{x}_i \\\\\\\\mathbf{x}\'_i)^{-1} \\\\\\\\sum^{n} \\\\\\\\mathbf{x}_i y_i \\\\\\\\end{aligned}\\"})]})})}),(0,e.jsx)(s.span,{className:\\"katex-html\\",\\"aria-hidden\\":\\"true\\",children:(0,e.jsxs)(s.span,{className:\\"base\\",children:[(0,e.jsx)(s.span,{className:\\"strut\\",style:{height:\\"9.7936em\\",verticalAlign:\\"-4.6468em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsxs)(s.span,{className:\\"mtable\\",children:[(0,e.jsx)(s.span,{className:\\"col-align-r\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\"5.1468em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-7.9582em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.6514em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mop\\",children:\\"min\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".1667em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",children:\\"Q\\"})]})]}),(0,e.jsxs)(s.span,{style:{top:\\"-5.93em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.6514em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\"})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.7839em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.6514em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord text\\",children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"[FOC]\\"})}),(0,e.jsx)(s.span,{className:\\"mspace nobreak\\",children:\\"\\\\xA0\\"}),(0,e.jsx)(s.span,{className:\\"mspace nobreak\\",children:\\"\\\\xA0\\"}),(0,e.jsx)(s.span,{className:\\"mspace nobreak\\",children:\\"\\\\xA0\\"}),(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"0\\"})]})]}),(0,e.jsxs)(s.span,{style:{top:\\"-2.166em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.6514em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:(0,e.jsx)(s.span,{className:\\"mord accent\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\".9579em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-3em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".05278em\\"},children:\\"\\\\u03B2\\"})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.2634em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"accent-body\\",style:{left:\\"-.1667em\\"},children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"^\\"})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".1944em\\"},children:(0,e.jsx)(s.span,{})})})]})})})]}),(0,e.jsxs)(s.span,{style:{top:\\".1454em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.6514em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\"})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"4.6468em\\"},children:(0,e.jsx)(s.span,{})})})]})}),(0,e.jsx)(s.span,{className:\\"col-align-l\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\"5.1468em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-7.9582em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.6514em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mrel\\",children:\\"=\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mop op-limits\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\".6679em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-2.3479em\\",marginLeft:\\"0\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",style:{marginRight:\\".05278em\\"},children:\\"\\\\u03B2\\"})})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{children:(0,e.jsx)(s.span,{className:\\"mop\\",children:\\"min\\"})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8882em\\"},children:(0,e.jsx)(s.span,{})})})]})}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".1667em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathbf\\",style:{marginRight:\\".02875em\\"},children:\\"Y\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8019em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})})})})})]}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",style:{marginRight:\\".02875em\\"},children:\\"Y\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}}),(0,e.jsx)(s.span,{className:\\"mbin\\",children:\\"\\\\u2212\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"2\\"}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".05278em\\"},children:\\"\\\\u03B2\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8019em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})})})})})]}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"X\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8019em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})})})})})]}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",style:{marginRight:\\".02875em\\"},children:\\"Y\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}}),(0,e.jsx)(s.span,{className:\\"mbin\\",children:\\"+\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".05278em\\"},children:\\"\\\\u03B2\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8019em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})})})})})]}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"X\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8019em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})})})})})]}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"X\\"}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".05278em\\"},children:\\"\\\\u03B2\\"})]})]}),(0,e.jsxs)(s.span,{style:{top:\\"-5.93em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.6514em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mrel\\",children:\\"=\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mop op-limits\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\".6679em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-2.3479em\\",marginLeft:\\"0\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",style:{marginRight:\\".05278em\\"},children:\\"\\\\u03B2\\"})})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{children:(0,e.jsx)(s.span,{className:\\"mop\\",children:\\"min\\"})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8882em\\"},children:(0,e.jsx)(s.span,{})})})]})}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".1667em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"\\\\u2212\\"}),(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"2\\"}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".05278em\\"},children:\\"\\\\u03B2\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8019em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})})})})})]}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"X\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8019em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})})})})})]}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",style:{marginRight:\\".02875em\\"},children:\\"Y\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}}),(0,e.jsx)(s.span,{className:\\"mbin\\",children:\\"+\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".05278em\\"},children:\\"\\\\u03B2\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8019em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})})})})})]}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"X\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8019em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})})})})})]}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"X\\"}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".05278em\\"},children:\\"\\\\u03B2\\"})]})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.7839em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.6514em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mrel\\",children:\\"=\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"\\\\u2212\\"}),(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"2\\"}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"X\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8019em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})})})})})]}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",style:{marginRight:\\".02875em\\"},children:\\"Y\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}}),(0,e.jsx)(s.span,{className:\\"mbin\\",children:\\"+\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2222em\\"}}),(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"2\\"}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"X\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8019em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})})})})})]}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"X\\"}),(0,e.jsx)(s.span,{className:\\"mord accent\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\".9579em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-3em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".05278em\\"},children:\\"\\\\u03B2\\"})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.2634em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3em\\"}}),(0,e.jsx)(s.span,{className:\\"accent-body\\",style:{left:\\"-.1667em\\"},children:(0,e.jsx)(s.span,{className:\\"mord\\",children:\\"^\\"})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".1944em\\"},children:(0,e.jsx)(s.span,{})})})]})})]})]}),(0,e.jsxs)(s.span,{style:{top:\\"-2.166em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.6514em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mrel\\",children:\\"=\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mopen\\",children:\\"(\\"}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"X\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8019em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})})})})})]}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"X\\"}),(0,e.jsxs)(s.span,{className:\\"mclose\\",children:[(0,e.jsx)(s.span,{className:\\"mclose\\",children:\\")\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8641em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsxs)(s.span,{className:\\"mord mtight\\",children:[(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2212\\"}),(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"1\\"})]})})]})})})})})]}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"X\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8019em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})})})})})]}),(0,e.jsx)(s.span,{className:\\"mord mathbf\\",style:{marginRight:\\".02875em\\"},children:\\"Y\\"})]})]}),(0,e.jsxs)(s.span,{style:{top:\\".1454em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.6514em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mrel\\",children:\\"=\\"}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".2778em\\"}}),(0,e.jsx)(s.span,{className:\\"mopen\\",children:\\"(\\"}),(0,e.jsx)(s.span,{className:\\"mop op-limits\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\"1.6514em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-3.05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.05em\\"}}),(0,e.jsx)(s.span,{children:(0,e.jsx)(s.span,{className:\\"mop large-op op-symbol\\",children:\\"\\\\u2211\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-4.3em\\",marginLeft:\\"0\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.05em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"n\\"})})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".55em\\"},children:(0,e.jsx)(s.span,{})})})]})}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".1667em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"x\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".3117em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-2.55em\\",marginLeft:\\"0\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"i\\"})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".15em\\"},children:(0,e.jsx)(s.span,{})})})]})})]}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"x\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\".8019em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-2.453em\\",marginLeft:\\"0\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"i\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2032\\"})})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".247em\\"},children:(0,e.jsx)(s.span,{})})})]})})]}),(0,e.jsxs)(s.span,{className:\\"mclose\\",children:[(0,e.jsx)(s.span,{className:\\"mclose\\",children:\\")\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsx)(s.span,{className:\\"vlist-t\\",children:(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".8641em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-3.113em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsxs)(s.span,{className:\\"mord mtight\\",children:[(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"\\\\u2212\\"}),(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:\\"1\\"})]})})]})})})})})]}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".1667em\\"}}),(0,e.jsx)(s.span,{className:\\"mop op-limits\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist\\",style:{height:\\"1.6514em\\"},children:[(0,e.jsxs)(s.span,{style:{top:\\"-3.05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.05em\\"}}),(0,e.jsx)(s.span,{children:(0,e.jsx)(s.span,{className:\\"mop large-op op-symbol\\",children:\\"\\\\u2211\\"})})]}),(0,e.jsxs)(s.span,{style:{top:\\"-4.3em\\",marginLeft:\\"0\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"3.05em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"n\\"})})})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".55em\\"},children:(0,e.jsx)(s.span,{})})})]})}),(0,e.jsx)(s.span,{className:\\"mspace\\",style:{marginRight:\\".1667em\\"}}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathbf\\",children:\\"x\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".3117em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-2.55em\\",marginLeft:\\"0\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"i\\"})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".15em\\"},children:(0,e.jsx)(s.span,{})})})]})})]}),(0,e.jsxs)(s.span,{className:\\"mord\\",children:[(0,e.jsx)(s.span,{className:\\"mord mathnormal\\",style:{marginRight:\\".03588em\\"},children:\\"y\\"}),(0,e.jsx)(s.span,{className:\\"msupsub\\",children:(0,e.jsxs)(s.span,{className:\\"vlist-t vlist-t2\\",children:[(0,e.jsxs)(s.span,{className:\\"vlist-r\\",children:[(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".3117em\\"},children:(0,e.jsxs)(s.span,{style:{top:\\"-2.55em\\",marginLeft:\\"-.0359em\\",marginRight:\\".05em\\"},children:[(0,e.jsx)(s.span,{className:\\"pstrut\\",style:{height:\\"2.7em\\"}}),(0,e.jsx)(s.span,{className:\\"mtight sizing reset-size6 size3\\",children:(0,e.jsx)(s.span,{className:\\"mord mtight mathnormal\\",children:\\"i\\"})})]})}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\".15em\\"},children:(0,e.jsx)(s.span,{})})})]})})]})]})]})]}),(0,e.jsx)(s.span,{className:\\"vlist-s\\",children:\\"\\\\u200B\\"})]}),(0,e.jsx)(s.span,{className:\\"vlist-r\\",children:(0,e.jsx)(s.span,{className:\\"vlist\\",style:{height:\\"4.6468em\\"},children:(0,e.jsx)(s.span,{})})})]})})]})})]})})]})}),(0,e.jsxs)(s.section,{className:\\"footnotes\\",\\"data-footnotes\\":!0,children:[(0,e.jsxs)(s.h2,{className:\\"content-header\\",id:\\"footnote-label\\",children:[(0,e.jsx)(s.a,{href:\\"#footnote-label\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(s.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(s.svg,{viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",children:[(0,e.jsx)(s.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(s.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Footnotes\\"]}),(0,e.jsxs)(s.ol,{children:[(0,e.jsx)(s.li,{id:\\"user-content-fn-footnote\\",children:(0,e.jsxs)(s.p,{children:[\\"For the full list of supported TeX functions, check out the \\",(0,e.jsx)(s.a,{href:\\"https://katex.org/docs/supported.html\\",children:\\"KaTeX documentation\\"}),\\" \\",(0,e.jsx)(s.a,{href:\\"#user-content-fnref-footnote\\",\\"aria-label\\":\\"Back to reference 1\\",className:\\"data-footnote-backref\\",\\"data-footnote-backref\\":\\"\\",children:\\"\\\\u21A9\\"})]})}),(0,e.jsx)(s.li,{id:\\"user-content-fn-2\\",children:(0,e.jsxs)(s.p,{children:[\\"$10 and $20. \\",(0,e.jsx)(s.a,{href:\\"#user-content-fnref-2\\",\\"aria-label\\":\\"Back to reference 2\\",className:\\"data-footnote-backref\\",\\"data-footnote-backref\\":\\"\\",children:\\"\\\\u21A9\\"})]})})]})]})]})}function d(a={}){let{wrapper:s}=a.components||{};return s?(0,e.jsx)(s,{...a,children:(0,e.jsx)(h,{...a})}):h(a)}return f(w);})();\\n;return Component;"},"_id":"blog/deriving-ols-estimator.mdx","_raw":{"sourceFilePath":"blog/deriving-ols-estimator.mdx","sourceFileName":"deriving-ols-estimator.mdx","sourceFileDir":"blog","contentType":"mdx","flattenedPath":"blog/deriving-ols-estimator"},"type":"Blog","readingTime":{"text":"3 min read","minutes":2.81,"time":168600,"words":562},"slug":"deriving-ols-estimator","path":"blog/deriving-ols-estimator","filePath":"blog/deriving-ols-estimator.mdx","toc":[{"value":"Introduction","url":"#introduction","depth":1},{"value":"Deriving the OLS Estimator","url":"#deriving-the-ols-estimator","depth":1},{"value":"Least Squares","url":"#least-squares","depth":2}],"structuredData":{"@context":"https://schema.org","@type":"BlogPosting","headline":"Deriving the OLS Estimator","datePublished":"2020-12-21T00:00:00.000Z","dateModified":"2020-12-21T00:00:00.000Z","description":"How to derive the OLS Estimator with matrix notation and a tour of math typesetting using markdown with the help of KaTeX.","image":"/static/images/twitter-card.png","url":"https://tailwind-nextjs-starter-blog.vercel.app/blog/deriving-ols-estimator"}},{"title":"Markdown Guide","date":"2019-10-11T00:00:00.000Z","tags":["github","guide"],"draft":false,"summary":"Markdown cheatsheet for all your blogging needs - headers, lists, images, tables and more! An illustrated guide based on GitHub Flavored Markdown.","body":{"raw":"\\n# Introduction\\n\\nMarkdown and Mdx parsing is supported via `unified`, and other remark and rehype packages. `next-mdx-remote` allows us to parse `.mdx` and `.md` files in a more flexible manner without touching webpack.\\n\\nGitHub flavored markdown is used. `mdx-prism` provides syntax highlighting capabilities for code blocks. Here\'s a demo of how everything looks.\\n\\nThe following markdown cheatsheet is adapted from: https://guides.github.com/features/mastering-markdown/\\n\\n# What is Markdown?\\n\\nMarkdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like `#` or `*`.\\n\\n# Syntax guide\\n\\nHere’s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.\\n\\n## Headers\\n\\n```\\n# This is a h1 tag\\n\\n## This is a h2 tag\\n\\n#### This is a h4 tag\\n```\\n\\n# This is a h1 tag\\n\\n## This is a h2 tag\\n\\n#### This is a h4 tag\\n\\n## Emphasis\\n\\n```\\n_This text will be italic_\\n\\n**This text will be bold**\\n\\n_You **can** combine them_\\n```\\n\\n_This text will be italic_\\n\\n**This text will be bold**\\n\\n_You **can** combine them_\\n\\n## Lists\\n\\n### Unordered\\n\\n```\\n- Item 1\\n- Item 2\\n - Item 2a\\n - Item 2b\\n```\\n\\n- Item 1\\n- Item 2\\n - Item 2a\\n - Item 2b\\n\\n### Ordered\\n\\n```\\n1. Item 1\\n1. Item 2\\n1. Item 3\\n 1. Item 3a\\n 1. Item 3b\\n```\\n\\n1. Item 1\\n1. Item 2\\n1. Item 3\\n 1. Item 3a\\n 1. Item 3b\\n\\n## Images\\n\\n```\\n\\nFormat: \\n```\\n\\n\\n\\n## Links\\n\\n```\\nhttp://github.com - automatic!\\n[GitHub](http://github.com)\\n```\\n\\nhttp://github.com - automatic!\\n[GitHub](http://github.com)\\n\\n## Blockquotes\\n\\n```\\nAs Kanye West said:\\n\\n> We\'re living the future so\\n> the present is our past.\\n```\\n\\nAs Kanye West said:\\n\\n> We\'re living the future so\\n> the present is our past.\\n\\n## Inline code\\n\\n```\\nI think you should use an\\n`<addr>` element here instead.\\n```\\n\\nI think you should use an\\n`<addr>` element here instead.\\n\\n## Syntax highlighting\\n\\nHere’s an example of how you can use syntax highlighting with [GitHub Flavored Markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/):\\n\\n````\\n```js:fancyAlert.js\\nfunction fancyAlert(arg) {\\n if (arg) {\\n $.facebox({ div: \'#foo\' })\\n }\\n}\\n```\\n````\\n\\nAnd here\'s how it looks - nicely colored with styled code titles!\\n\\n```js:fancyAlert.js\\nfunction fancyAlert(arg) {\\n if (arg) {\\n $.facebox({ div: \'#foo\' })\\n }\\n}\\n```\\n\\n## Footnotes\\n\\n```\\nHere is a simple footnote[^1]. With some additional text after it.\\n\\n[^1]: My reference.\\n```\\n\\nHere is a simple footnote[^1]. With some additional text after it.\\n\\n[^1]: My reference.\\n\\n## Task Lists\\n\\n```\\n- [x] list syntax required (any unordered or ordered list supported)\\n- [x] this is a complete item\\n- [ ] this is an incomplete item\\n```\\n\\n- [x] list syntax required (any unordered or ordered list supported)\\n- [x] this is a complete item\\n- [ ] this is an incomplete item\\n\\n## Tables\\n\\nYou can create tables by assembling a list of words and dividing them with hyphens `-` (for the first row), and then separating each column with a pipe `|`:\\n\\n```\\n| First Header | Second Header |\\n| --------------------------- | ---------------------------- |\\n| Content from cell 1 | Content from cell 2 |\\n| Content in the first column | Content in the second column |\\n```\\n\\n| First Header | Second Header |\\n| --------------------------- | ---------------------------- |\\n| Content from cell 1 | Content from cell 2 |\\n| Content in the first column | Content in the second column |\\n\\n## Strikethrough\\n\\nAny word wrapped with two tildes (like `~~this~~`) will appear ~~crossed out~~.\\n","code":"var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(n,a)=>()=>(a||n((a={exports:{}}).exports,a),a.exports),w=(n,a)=>{for(var s in a)c(n,s,{get:a[s],enumerable:!0})},r=(n,a,s,t)=>{if(a&&typeof a==\\"object\\"||typeof a==\\"function\\")for(let l of N(a))!u.call(n,l)&&l!==s&&c(n,l,{get:()=>a[l],enumerable:!(t=m(a,l))||t.enumerable});return n};var b=(n,a,s)=>(s=n!=null?p(k(n)):{},r(a||!n||!n.__esModule?c(s,\\"default\\",{value:n,enumerable:!0}):s,n)),f=n=>r(c({},\\"__esModule\\",{value:!0}),n);var o=g((M,i)=>{i.exports=_jsx_runtime});var y={};w(y,{default:()=>h,frontmatter:()=>x});var e=b(o()),x={title:\\"Markdown Guide\\",date:\\"2019-10-11\\",tags:[\\"github\\",\\"guide\\"],draft:!1,summary:\\"Markdown cheatsheet for all your blogging needs - headers, lists, images, tables and more! An illustrated guide based on GitHub Flavored Markdown.\\"};function d(n){let a={a:\\"a\\",blockquote:\\"blockquote\\",code:\\"code\\",del:\\"del\\",div:\\"div\\",em:\\"em\\",h1:\\"h1\\",h2:\\"h2\\",h3:\\"h3\\",h4:\\"h4\\",img:\\"img\\",input:\\"input\\",li:\\"li\\",ol:\\"ol\\",p:\\"p\\",path:\\"path\\",pre:\\"pre\\",section:\\"section\\",span:\\"span\\",strong:\\"strong\\",sup:\\"sup\\",svg:\\"svg\\",table:\\"table\\",tbody:\\"tbody\\",td:\\"td\\",th:\\"th\\",thead:\\"thead\\",tr:\\"tr\\",ul:\\"ul\\",...n.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(a.h1,{className:\\"content-header\\",id:\\"introduction\\",children:[(0,e.jsx)(a.a,{href:\\"#introduction\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Introduction\\"]}),(0,e.jsxs)(a.p,{children:[\\"Markdown and Mdx parsing is supported via \\",(0,e.jsx)(a.code,{children:\\"unified\\"}),\\", and other remark and rehype packages. \\",(0,e.jsx)(a.code,{children:\\"next-mdx-remote\\"}),\\" allows us to parse \\",(0,e.jsx)(a.code,{children:\\".mdx\\"}),\\" and \\",(0,e.jsx)(a.code,{children:\\".md\\"}),\\" files in a more flexible manner without touching webpack.\\"]}),(0,e.jsxs)(a.p,{children:[\\"GitHub flavored markdown is used. \\",(0,e.jsx)(a.code,{children:\\"mdx-prism\\"}),\\" provides syntax highlighting capabilities for code blocks. Here\'s a demo of how everything looks.\\"]}),(0,e.jsxs)(a.p,{children:[\\"The following markdown cheatsheet is adapted from: \\",(0,e.jsx)(a.a,{href:\\"https://guides.github.com/features/mastering-markdown/\\",children:\\"https://guides.github.com/features/mastering-markdown/\\"})]}),(0,e.jsxs)(a.h1,{className:\\"content-header\\",id:\\"what-is-markdown\\",children:[(0,e.jsx)(a.a,{href:\\"#what-is-markdown\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"What is Markdown?\\"]}),(0,e.jsxs)(a.p,{children:[\\"Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like \\",(0,e.jsx)(a.code,{children:\\"#\\"}),\\" or \\",(0,e.jsx)(a.code,{children:\\"*\\"}),\\".\\"]}),(0,e.jsxs)(a.h1,{className:\\"content-header\\",id:\\"syntax-guide\\",children:[(0,e.jsx)(a.a,{href:\\"#syntax-guide\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Syntax guide\\"]}),(0,e.jsx)(a.p,{children:\\"Here\\\\u2019s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.\\"}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"headers\\",children:[(0,e.jsx)(a.a,{href:\\"#headers\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Headers\\"]}),(0,e.jsx)(a.pre,{className:\\"language-js\\",children:(0,e.jsxs)(a.code,{className:\\"language-js code-highlight\\",children:[(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\"# \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"This\\"}),` is a h1 tag\\n`]}),(0,e.jsx)(a.span,{className:\\"code-line\\",children:`\\n`}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\"## \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"This\\"}),` is a h2 tag\\n`]}),(0,e.jsx)(a.span,{className:\\"code-line\\",children:`\\n`}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\"#### \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"This\\"}),` is a h4 tag\\n`]})]})}),(0,e.jsxs)(a.h1,{className:\\"content-header\\",id:\\"this-is-a-h1-tag\\",children:[(0,e.jsx)(a.a,{href:\\"#this-is-a-h1-tag\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"This is a h1 tag\\"]}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"this-is-a-h2-tag\\",children:[(0,e.jsx)(a.a,{href:\\"#this-is-a-h2-tag\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"This is a h2 tag\\"]}),(0,e.jsxs)(a.h4,{className:\\"content-header\\",id:\\"this-is-a-h4-tag\\",children:[(0,e.jsx)(a.a,{href:\\"#this-is-a-h4-tag\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"This is a h4 tag\\"]}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"emphasis\\",children:[(0,e.jsx)(a.a,{href:\\"#emphasis\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Emphasis\\"]}),(0,e.jsx)(a.pre,{className:\\"language-js\\",children:(0,e.jsxs)(a.code,{className:\\"language-js code-highlight\\",children:[(0,e.jsx)(a.span,{className:\\"code-line\\",children:`_This text will be italic_\\n`}),(0,e.jsx)(a.span,{className:\\"code-line\\",children:`\\n`}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"**\\"}),(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"This\\"}),\\" text will be bold\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"**\\"}),`\\n`]}),(0,e.jsx)(a.span,{className:\\"code-line\\",children:`\\n`}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\"_You \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"**\\"}),\\"can\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"**\\"}),` combine them_\\n`]})]})}),(0,e.jsx)(a.p,{children:(0,e.jsx)(a.em,{children:\\"This text will be italic\\"})}),(0,e.jsx)(a.p,{children:(0,e.jsx)(a.strong,{children:\\"This text will be bold\\"})}),(0,e.jsx)(a.p,{children:(0,e.jsxs)(a.em,{children:[\\"You \\",(0,e.jsx)(a.strong,{children:\\"can\\"}),\\" combine them\\"]})}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"lists\\",children:[(0,e.jsx)(a.a,{href:\\"#lists\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Lists\\"]}),(0,e.jsxs)(a.h3,{className:\\"content-header\\",id:\\"unordered\\",children:[(0,e.jsx)(a.a,{href:\\"#unordered\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Unordered\\"]}),(0,e.jsx)(a.pre,{className:\\"language-js\\",children:(0,e.jsxs)(a.code,{className:\\"language-js code-highlight\\",children:[(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Item\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token number\\",children:\\"1\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Item\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token number\\",children:\\"2\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Item\\"}),` 2a\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Item\\"}),` 2b\\n`]})]})}),(0,e.jsxs)(a.ul,{children:[(0,e.jsx)(a.li,{children:\\"Item 1\\"}),(0,e.jsxs)(a.li,{children:[\\"Item 2\\",(0,e.jsxs)(a.ul,{children:[(0,e.jsx)(a.li,{children:\\"Item 2a\\"}),(0,e.jsx)(a.li,{children:\\"Item 2b\\"})]})]})]}),(0,e.jsxs)(a.h3,{className:\\"content-header\\",id:\\"ordered\\",children:[(0,e.jsx)(a.a,{href:\\"#ordered\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Ordered\\"]}),(0,e.jsx)(a.pre,{className:\\"language-js\\",children:(0,e.jsxs)(a.code,{className:\\"language-js code-highlight\\",children:[(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token number\\",children:\\"1.\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Item\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token number\\",children:\\"1\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token number\\",children:\\"1.\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Item\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token number\\",children:\\"2\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token number\\",children:\\"1.\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Item\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token number\\",children:\\"3\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(a.span,{className:\\"token number\\",children:\\"1.\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Item\\"}),` 3a\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(a.span,{className:\\"token number\\",children:\\"1.\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Item\\"}),` 3b\\n`]})]})}),(0,e.jsxs)(a.ol,{children:[(0,e.jsx)(a.li,{children:\\"Item 1\\"}),(0,e.jsx)(a.li,{children:\\"Item 2\\"}),(0,e.jsxs)(a.li,{children:[\\"Item 3\\",(0,e.jsxs)(a.ol,{children:[(0,e.jsx)(a.li,{children:\\"Item 3a\\"}),(0,e.jsx)(a.li,{children:\\"Item 3b\\"})]})]})]}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"images\\",children:[(0,e.jsx)(a.a,{href:\\"#images\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Images\\"]}),(0,e.jsx)(a.pre,{className:\\"language-js\\",children:(0,e.jsxs)(a.code,{className:\\"language-js code-highlight\\",children:[(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"!\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"[\\"}),(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"GitHub\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Logo\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"]\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"https\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\":\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"github\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(a.span,{className:\\"token property-access\\",children:\\"githubassets\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(a.span,{className:\\"token property-access\\",children:\\"com\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"images\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"modules\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"logos_page\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"GitHub\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Mark\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(a.span,{className:\\"token property-access\\",children:\\"png\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token literal-property property\\",children:\\"Format\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"!\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"[\\"}),(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Alt\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Text\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"]\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"url\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]})]})}),(0,e.jsx)(a.p,{children:(0,e.jsx)(a.img,{alt:\\"GitHub Logo\\",src:\\"https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png\\"})}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"links\\",children:[(0,e.jsx)(a.a,{href:\\"#links\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Links\\"]}),(0,e.jsx)(a.pre,{className:\\"language-js\\",children:(0,e.jsxs)(a.code,{className:\\"language-js code-highlight\\",children:[(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token literal-property property\\",children:\\"http\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\":\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"github\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(a.span,{className:\\"token property-access\\",children:\\"com\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),\\" automatic\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"!\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"[\\"}),(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"GitHub\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"]\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"http\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\":\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"github\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(a.span,{className:\\"token property-access\\",children:\\"com\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]})]})}),(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.a,{href:\\"http://github.com\\",children:\\"http://github.com\\"}),\\" - automatic! \\",(0,e.jsx)(a.a,{href:\\"http://github.com\\",children:\\"GitHub\\"})]}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"blockquotes\\",children:[(0,e.jsx)(a.a,{href:\\"#blockquotes\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Blockquotes\\"]}),(0,e.jsx)(a.pre,{className:\\"language-js\\",children:(0,e.jsxs)(a.code,{className:\\"language-js code-highlight\\",children:[(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"As\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Kanye\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"West\\"}),\\" said\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\":\\"}),`\\n`]}),(0,e.jsx)(a.span,{className:\\"code-line\\",children:`\\n`}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\">\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"We\\"}),`\'re living the future so\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\">\\"}),\\" the present is our past\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\".\\"}),`\\n`]})]})}),(0,e.jsx)(a.p,{children:\\"As Kanye West said:\\"}),(0,e.jsx)(a.blockquote,{children:(0,e.jsx)(a.p,{children:\\"We\'re living the future so the present is our past.\\"})}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"inline-code\\",children:[(0,e.jsx)(a.a,{href:\\"#inline-code\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Inline code\\"]}),(0,e.jsx)(a.pre,{className:\\"language-js\\",children:(0,e.jsxs)(a.code,{className:\\"language-js code-highlight\\",children:[(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token constant\\",children:\\"I\\"}),` think you should use an\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsxs)(a.span,{className:\\"token template-string\\",children:[(0,e.jsx)(a.span,{className:\\"token string template-punctuation\\",children:\\"`\\"}),(0,e.jsx)(a.span,{className:\\"token string\\",children:\\"<addr>\\"}),(0,e.jsx)(a.span,{className:\\"token string template-punctuation\\",children:\\"`\\"})]}),\\" element here instead\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\".\\"}),`\\n`]})]})}),(0,e.jsxs)(a.p,{children:[\\"I think you should use an \\",(0,e.jsx)(a.code,{children:\\"<addr>\\"}),\\" element here instead.\\"]}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"syntax-highlighting\\",children:[(0,e.jsx)(a.a,{href:\\"#syntax-highlighting\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Syntax highlighting\\"]}),(0,e.jsxs)(a.p,{children:[\\"Here\\\\u2019s an example of how you can use syntax highlighting with \\",(0,e.jsx)(a.a,{href:\\"https://help.github.com/articles/basic-writing-and-formatting-syntax/\\",children:\\"GitHub Flavored Markdown\\"}),\\":\\"]}),(0,e.jsx)(a.pre,{className:\\"language-js\\",children:(0,e.jsxs)(a.code,{className:\\"language-js code-highlight\\",children:[(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsxs)(a.span,{className:\\"token template-string\\",children:[(0,e.jsx)(a.span,{className:\\"token string template-punctuation\\",children:\\"`\\"}),(0,e.jsx)(a.span,{className:\\"token string template-punctuation\\",children:\\"`\\"})]}),(0,e.jsxs)(a.span,{className:\\"token template-string\\",children:[(0,e.jsx)(a.span,{className:\\"token string template-punctuation\\",children:\\"`\\"}),(0,e.jsx)(a.span,{className:\\"token string\\",children:`js:fancyAlert.js\\n`})]})]}),(0,e.jsx)(a.span,{className:\\"code-line\\",children:(0,e.jsx)(a.span,{className:\\"token template-string\\",children:(0,e.jsx)(a.span,{className:\\"token string\\",children:`function fancyAlert(arg) {\\n`})})}),(0,e.jsx)(a.span,{className:\\"code-line\\",children:(0,e.jsx)(a.span,{className:\\"token template-string\\",children:(0,e.jsx)(a.span,{className:\\"token string\\",children:` if (arg) {\\n`})})}),(0,e.jsx)(a.span,{className:\\"code-line\\",children:(0,e.jsx)(a.span,{className:\\"token template-string\\",children:(0,e.jsx)(a.span,{className:\\"token string\\",children:` $.facebox({ div: \'#foo\' })\\n`})})}),(0,e.jsx)(a.span,{className:\\"code-line\\",children:(0,e.jsx)(a.span,{className:\\"token template-string\\",children:(0,e.jsx)(a.span,{className:\\"token string\\",children:` }\\n`})})}),(0,e.jsx)(a.span,{className:\\"code-line\\",children:(0,e.jsx)(a.span,{className:\\"token template-string\\",children:(0,e.jsx)(a.span,{className:\\"token string\\",children:`}\\n`})})}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsxs)(a.span,{className:\\"token template-string\\",children:[(0,e.jsx)(a.span,{className:\\"token string\\"}),(0,e.jsx)(a.span,{className:\\"token string template-punctuation\\",children:\\"`\\"})]}),(0,e.jsxs)(a.span,{className:\\"token template-string\\",children:[(0,e.jsx)(a.span,{className:\\"token string template-punctuation\\",children:\\"`\\"}),(0,e.jsx)(a.span,{className:\\"token string template-punctuation\\",children:\\"`\\"})]}),`\\n`]})]})}),(0,e.jsx)(a.p,{children:\\"And here\'s how it looks - nicely colored with styled code titles!\\"}),(0,e.jsx)(a.div,{className:\\"remark-code-title\\",children:\\"fancyAlert.js\\"}),(0,e.jsx)(a.pre,{className:\\"language-js\\",children:(0,e.jsxs)(a.code,{className:\\"language-js code-highlight\\",children:[(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token keyword\\",children:\\"function\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token function\\",children:\\"fancyAlert\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsx)(a.span,{className:\\"token parameter\\",children:\\"arg\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(a.span,{className:\\"token keyword control-flow\\",children:\\"if\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"arg\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" $\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(a.span,{className:\\"token property-access function method\\",children:\\"facebox\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token literal-property property\\",children:\\"div\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token string\\",children:\\"\'#foo\'\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"}\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]})]})}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"footnotes\\",children:[(0,e.jsx)(a.a,{href:\\"#footnotes\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Footnotes\\"]}),(0,e.jsx)(a.pre,{className:\\"language-js\\",children:(0,e.jsxs)(a.code,{className:\\"language-js code-highlight\\",children:[(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Here\\"}),\\" is a simple footnote\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"[\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"^\\"}),(0,e.jsx)(a.span,{className:\\"token number\\",children:\\"1\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"]\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\".\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token property-access\\",children:(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"With\\"})}),\\" some additional text after it\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\".\\"}),`\\n`]}),(0,e.jsx)(a.span,{className:\\"code-line\\",children:`\\n`}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"[\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"^\\"}),(0,e.jsx)(a.span,{className:\\"token number\\",children:\\"1\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"]\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"My\\"}),\\" reference\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\".\\"}),`\\n`]})]})}),(0,e.jsxs)(a.p,{children:[\\"Here is a simple footnote\\",(0,e.jsx)(a.sup,{children:(0,e.jsx)(a.a,{href:\\"#user-content-fn-1\\",\\"aria-describedby\\":\\"footnote-label\\",\\"data-footnote-ref\\":!0,id:\\"user-content-fnref-1\\",children:\\"1\\"})}),\\". With some additional text after it.\\"]}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"task-lists\\",children:[(0,e.jsx)(a.a,{href:\\"#task-lists\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Task Lists\\"]}),(0,e.jsx)(a.pre,{className:\\"language-js\\",children:(0,e.jsxs)(a.code,{className:\\"language-js code-highlight\\",children:[(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"[\\"}),\\"x\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"]\\"}),\\" list syntax \\",(0,e.jsx)(a.span,{className:\\"token function\\",children:\\"required\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"any unordered or ordered list supported\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"[\\"}),\\"x\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"]\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token keyword\\",children:\\"this\\"}),` is a complete item\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"[\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"]\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token keyword\\",children:\\"this\\"}),` is an incomplete item\\n`]})]})}),(0,e.jsxs)(a.ul,{className:\\"contains-task-list\\",children:[(0,e.jsxs)(a.li,{className:\\"task-list-item\\",children:[(0,e.jsx)(a.input,{checked:!0,disabled:!0,type:\\"checkbox\\"}),\\" \\",\\"list syntax required (any unordered or ordered list supported)\\"]}),(0,e.jsxs)(a.li,{className:\\"task-list-item\\",children:[(0,e.jsx)(a.input,{checked:!0,disabled:!0,type:\\"checkbox\\"}),\\" \\",\\"this is a complete item\\"]}),(0,e.jsxs)(a.li,{className:\\"task-list-item\\",children:[(0,e.jsx)(a.input,{disabled:!0,type:\\"checkbox\\"}),\\" \\",\\"this is an incomplete item\\"]})]}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"tables\\",children:[(0,e.jsx)(a.a,{href:\\"#tables\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Tables\\"]}),(0,e.jsxs)(a.p,{children:[\\"You can create tables by assembling a list of words and dividing them with hyphens \\",(0,e.jsx)(a.code,{children:\\"-\\"}),\\" (for the first row), and then separating each column with a pipe \\",(0,e.jsx)(a.code,{children:\\"|\\"}),\\":\\"]}),(0,e.jsx)(a.pre,{className:\\"language-js\\",children:(0,e.jsxs)(a.code,{className:\\"language-js code-highlight\\",children:[(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"|\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"First\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Header\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"|\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Second\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Header\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"|\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"|\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"|\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"|\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"|\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Content\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token keyword module\\",children:\\"from\\"}),\\" cell \\",(0,e.jsx)(a.span,{className:\\"token number\\",children:\\"1\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"|\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Content\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token keyword module\\",children:\\"from\\"}),\\" cell \\",(0,e.jsx)(a.span,{className:\\"token number\\",children:\\"2\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"|\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"|\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Content\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token keyword\\",children:\\"in\\"}),\\" the first column \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"|\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Content\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token keyword\\",children:\\"in\\"}),\\" the second column \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"|\\"}),`\\n`]})]})}),(0,e.jsxs)(a.table,{children:[(0,e.jsx)(a.thead,{children:(0,e.jsxs)(a.tr,{children:[(0,e.jsx)(a.th,{children:\\"First Header\\"}),(0,e.jsx)(a.th,{children:\\"Second Header\\"})]})}),(0,e.jsxs)(a.tbody,{children:[(0,e.jsxs)(a.tr,{children:[(0,e.jsx)(a.td,{children:\\"Content from cell 1\\"}),(0,e.jsx)(a.td,{children:\\"Content from cell 2\\"})]}),(0,e.jsxs)(a.tr,{children:[(0,e.jsx)(a.td,{children:\\"Content in the first column\\"}),(0,e.jsx)(a.td,{children:\\"Content in the second column\\"})]})]})]}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"strikethrough\\",children:[(0,e.jsx)(a.a,{href:\\"#strikethrough\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Strikethrough\\"]}),(0,e.jsxs)(a.p,{children:[\\"Any word wrapped with two tildes (like \\",(0,e.jsx)(a.code,{children:\\"~~this~~\\"}),\\") will appear \\",(0,e.jsx)(a.del,{children:\\"crossed out\\"}),\\".\\"]}),(0,e.jsxs)(a.section,{className:\\"footnotes\\",\\"data-footnotes\\":!0,children:[(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"footnote-label\\",children:[(0,e.jsx)(a.a,{href:\\"#footnote-label\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Footnotes\\"]}),(0,e.jsx)(a.ol,{children:(0,e.jsx)(a.li,{id:\\"user-content-fn-1\\",children:(0,e.jsxs)(a.p,{children:[\\"My reference. \\",(0,e.jsx)(a.a,{href:\\"#user-content-fnref-1\\",\\"aria-label\\":\\"Back to reference 1\\",className:\\"data-footnote-backref\\",\\"data-footnote-backref\\":\\"\\",children:\\"\\\\u21A9\\"})]})})})]})]})}function h(n={}){let{wrapper:a}=n.components||{};return a?(0,e.jsx)(a,{...n,children:(0,e.jsx)(d,{...n})}):d(n)}return f(y);})();\\n;return Component;"},"_id":"blog/github-markdown-guide.mdx","_raw":{"sourceFilePath":"blog/github-markdown-guide.mdx","sourceFileName":"github-markdown-guide.mdx","sourceFileDir":"blog","contentType":"mdx","flattenedPath":"blog/github-markdown-guide"},"type":"Blog","readingTime":{"text":"4 min read","minutes":3.155,"time":189300,"words":631},"slug":"github-markdown-guide","path":"blog/github-markdown-guide","filePath":"blog/github-markdown-guide.mdx","toc":[{"value":"Introduction","url":"#introduction","depth":1},{"value":"What is Markdown?","url":"#what-is-markdown","depth":1},{"value":"Syntax guide","url":"#syntax-guide","depth":1},{"value":"Headers","url":"#headers","depth":2},{"value":"This is a h1 tag","url":"#this-is-a-h1-tag","depth":1},{"value":"This is a h2 tag","url":"#this-is-a-h2-tag","depth":2},{"value":"This is a h4 tag","url":"#this-is-a-h4-tag","depth":4},{"value":"Emphasis","url":"#emphasis","depth":2},{"value":"Lists","url":"#lists","depth":2},{"value":"Unordered","url":"#unordered","depth":3},{"value":"Ordered","url":"#ordered","depth":3},{"value":"Images","url":"#images","depth":2},{"value":"Links","url":"#links","depth":2},{"value":"Blockquotes","url":"#blockquotes","depth":2},{"value":"Inline code","url":"#inline-code","depth":2},{"value":"Syntax highlighting","url":"#syntax-highlighting","depth":2},{"value":"Footnotes","url":"#footnotes","depth":2},{"value":"Task Lists","url":"#task-lists","depth":2},{"value":"Tables","url":"#tables","depth":2},{"value":"Strikethrough","url":"#strikethrough","depth":2}],"structuredData":{"@context":"https://schema.org","@type":"BlogPosting","headline":"Markdown Guide","datePublished":"2019-10-11T00:00:00.000Z","dateModified":"2019-10-11T00:00:00.000Z","description":"Markdown cheatsheet for all your blogging needs - headers, lists, images, tables and more! An illustrated guide based on GitHub Flavored Markdown.","image":"/static/images/twitter-card.png","url":"https://tailwind-nextjs-starter-blog.vercel.app/blog/github-markdown-guide"}},{"title":"Images in Next.js","date":"2020-11-11T00:00:00.000Z","tags":["next js","guide"],"draft":false,"summary":"In this article we introduce adding images in the tailwind starter blog and the benefits and limitations of the next/image component.","authors":["sparrowhawk"],"body":{"raw":"\\n# Introduction\\n\\nThe tailwind starter blog has out of the box support for [Next.js\'s built-in image component](https://nextjs.org/docs/api-reference/next/image) and automatically swaps out default image tags in markdown or mdx documents to use the Image component provided.\\n\\n# Usage\\n\\nTo use in a new page route / javascript file, simply import the image component and call it e.g.\\n\\n```js\\nimport Image from \'next/image\'\\n\\nfunction Home() {\\n return (\\n <>\\n <h1>My Homepage</h1>\\n <Image src=\\"/me.png\\" alt=\\"Picture of the author\\" width={500} height={500} />\\n <p>Welcome to my homepage!</p>\\n </>\\n )\\n}\\n\\nexport default Home\\n```\\n\\nFor a markdown file, the default image tag can be used and the default `img` tag gets replaced by the `Image` component in the build process.\\n\\nAssuming we have a file called `ocean.jpg` in `static/images/ocean.jpg`, the following line of code would generate the optimized image.\\n\\n```\\n\\n```\\n\\nAlternatively, since we are using mdx, we can just use the image component directly! Note, that you would have to provide a fixed width and height. The `img` tag method parses the dimension automatically.\\n\\n```js\\n<Image alt=\\"ocean\\" src=\\"/static/images/ocean.jpg\\" width={256} height={128} />\\n```\\n\\n_Note_: If you try to save the image, it is in webp format, if your browser supports it!\\n\\n\\n\\nPhoto by [YUCAR FotoGrafik](https://unsplash.com/@yucar?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\\non [Unsplash](https://unsplash.com/s/photos/sea?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\\n\\n# Benefits\\n\\n- Smaller image size with Webp (~30% smaller than jpeg)\\n- Responsive images - the correct image size is served based on the user\'s viewport\\n- Lazy loading - images load as they are scrolled to the viewport\\n- Avoids [Cumulative Layout Shift](https://web.dev/cls/)\\n- Optimization on demand instead of build-time - no increase in build time!\\n\\n# Limitations\\n\\n- Due to the reliance on `next/image`, unless you are using an external image CDN like Cloudinary or Imgix, it is practically required to use Vercel for hosting. This is because the component acts like a serverless function that calls a highly optimized image CDN.\\n\\n If you do not want to be tied to Vercel, you can remove `imgToJsx` in `remarkPlugins` in `lib/mdx.js`. This would avoid substituting the default `img` tag.\\n\\n Alternatively, one could wait for image optimization at build time to be supported. A different library, [next-optimized-images](https://github.com/cyrilwanner/next-optimized-images) does that, although it requires transforming the images through webpack which is not done here.\\n\\n- Images from external links are not passed through `next/image`\\n- All images have to be stored in the `public` folder e.g `/static/images/ocean.jpeg`\\n","code":"var Component=(()=>{var m=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var k=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var s in e)t(n,s,{get:e[s],enumerable:!0})},c=(n,e,s,i)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let l of u(e))!N.call(n,l)&&l!==s&&t(n,l,{get:()=>e[l],enumerable:!(i=p(e,l))||i.enumerable});return n};var w=(n,e,s)=>(s=n!=null?m(g(n)):{},c(e||!n||!n.__esModule?t(s,\\"default\\",{value:n,enumerable:!0}):s,n)),y=n=>c(t({},\\"__esModule\\",{value:!0}),n);var r=k((I,o)=>{o.exports=_jsx_runtime});var v={};f(v,{default:()=>h,frontmatter:()=>b});var a=w(r()),b={title:\\"Images in Next.js\\",date:\\"2020-11-11\\",tags:[\\"next js\\",\\"guide\\"],draft:!1,summary:\\"In this article we introduce adding images in the tailwind starter blog and the benefits and limitations of the next/image component.\\",authors:[\\"sparrowhawk\\"]};function d(n){let e={a:\\"a\\",code:\\"code\\",div:\\"div\\",em:\\"em\\",h1:\\"h1\\",li:\\"li\\",p:\\"p\\",path:\\"path\\",pre:\\"pre\\",span:\\"span\\",svg:\\"svg\\",ul:\\"ul\\",...n.components},{Image:s}=e;return s||x(\\"Image\\",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.h1,{className:\\"content-header\\",id:\\"introduction\\",children:[(0,a.jsx)(e.a,{href:\\"#introduction\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(e.span,{className:\\"content-header-link\\",children:(0,a.jsxs)(e.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,a.jsx)(e.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,a.jsx)(e.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Introduction\\"]}),(0,a.jsxs)(e.p,{children:[\\"The tailwind starter blog has out of the box support for \\",(0,a.jsx)(e.a,{href:\\"https://nextjs.org/docs/api-reference/next/image\\",children:\\"Next.js\'s built-in image component\\"}),\\" and automatically swaps out default image tags in markdown or mdx documents to use the Image component provided.\\"]}),(0,a.jsxs)(e.h1,{className:\\"content-header\\",id:\\"usage\\",children:[(0,a.jsx)(e.a,{href:\\"#usage\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(e.span,{className:\\"content-header-link\\",children:(0,a.jsxs)(e.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,a.jsx)(e.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,a.jsx)(e.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Usage\\"]}),(0,a.jsx)(e.p,{children:\\"To use in a new page route / javascript file, simply import the image component and call it e.g.\\"}),(0,a.jsx)(e.pre,{className:\\"language-js\\",children:(0,a.jsxs)(e.code,{className:\\"language-js code-highlight\\",children:[(0,a.jsxs)(e.span,{className:\\"code-line\\",children:[(0,a.jsx)(e.span,{className:\\"token keyword module\\",children:\\"import\\"}),\\" \\",(0,a.jsx)(e.span,{className:\\"token imports\\",children:(0,a.jsx)(e.span,{className:\\"token maybe-class-name\\",children:\\"Image\\"})}),\\" \\",(0,a.jsx)(e.span,{className:\\"token keyword module\\",children:\\"from\\"}),\\" \\",(0,a.jsx)(e.span,{className:\\"token string\\",children:\\"\'next/image\'\\"}),`\\n`]}),(0,a.jsx)(e.span,{className:\\"code-line\\",children:`\\n`}),(0,a.jsxs)(e.span,{className:\\"code-line\\",children:[(0,a.jsx)(e.span,{className:\\"token keyword\\",children:\\"function\\"}),\\" \\",(0,a.jsx)(e.span,{className:\\"token function\\",children:(0,a.jsx)(e.span,{className:\\"token maybe-class-name\\",children:\\"Home\\"})}),(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\")\\"}),\\" \\",(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,a.jsxs)(e.span,{className:\\"code-line\\",children:[\\" \\",(0,a.jsx)(e.span,{className:\\"token keyword control-flow\\",children:\\"return\\"}),\\" \\",(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\"(\\"}),`\\n`]}),(0,a.jsxs)(e.span,{className:\\"code-line\\",children:[\\" \\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"<\\"}),(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\">\\"}),`\\n`]}),(0,a.jsxs)(e.span,{className:\\"code-line\\",children:[\\" \\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"<\\"}),\\"h1\\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\">\\"}),(0,a.jsx)(e.span,{className:\\"token maybe-class-name\\",children:\\"My\\"}),\\" \\",(0,a.jsx)(e.span,{className:\\"token maybe-class-name\\",children:\\"Homepage\\"}),(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"<\\"}),(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"/\\"}),\\"h1\\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\">\\"}),`\\n`]}),(0,a.jsxs)(e.span,{className:\\"code-line\\",children:[\\" \\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"<\\"}),(0,a.jsx)(e.span,{className:\\"token maybe-class-name\\",children:\\"Image\\"}),\\" src\\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"=\\"}),(0,a.jsx)(e.span,{className:\\"token string\\",children:\'\\"/me.png\\"\'}),\\" alt\\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"=\\"}),(0,a.jsx)(e.span,{className:\\"token string\\",children:\'\\"Picture of the author\\"\'}),\\" width\\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"=\\"}),(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,a.jsx)(e.span,{className:\\"token number\\",children:\\"500\\"}),(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" height\\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"=\\"}),(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,a.jsx)(e.span,{className:\\"token number\\",children:\\"500\\"}),(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" \\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"/\\"}),(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\">\\"}),`\\n`]}),(0,a.jsxs)(e.span,{className:\\"code-line\\",children:[\\" \\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"<\\"}),\\"p\\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\">\\"}),(0,a.jsx)(e.span,{className:\\"token maybe-class-name\\",children:\\"Welcome\\"}),\\" to my homepage\\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"!\\"}),(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"<\\"}),(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"/\\"}),\\"p\\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\">\\"}),`\\n`]}),(0,a.jsxs)(e.span,{className:\\"code-line\\",children:[\\" \\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"<\\"}),(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"/\\"}),(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\">\\"}),`\\n`]}),(0,a.jsxs)(e.span,{className:\\"code-line\\",children:[\\" \\",(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,a.jsxs)(e.span,{className:\\"code-line\\",children:[(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,a.jsx)(e.span,{className:\\"code-line\\",children:`\\n`}),(0,a.jsxs)(e.span,{className:\\"code-line\\",children:[(0,a.jsx)(e.span,{className:\\"token keyword module\\",children:\\"export\\"}),\\" \\",(0,a.jsx)(e.span,{className:\\"token keyword module\\",children:\\"default\\"}),\\" \\",(0,a.jsx)(e.span,{className:\\"token maybe-class-name\\",children:\\"Home\\"}),`\\n`]})]})}),(0,a.jsxs)(e.p,{children:[\\"For a markdown file, the default image tag can be used and the default \\",(0,a.jsx)(e.code,{children:\\"img\\"}),\\" tag gets replaced by the \\",(0,a.jsx)(e.code,{children:\\"Image\\"}),\\" component in the build process.\\"]}),(0,a.jsxs)(e.p,{children:[\\"Assuming we have a file called \\",(0,a.jsx)(e.code,{children:\\"ocean.jpg\\"}),\\" in \\",(0,a.jsx)(e.code,{children:\\"static/images/ocean.jpg\\"}),\\", the following line of code would generate the optimized image.\\"]}),(0,a.jsx)(e.pre,{className:\\"language-js\\",children:(0,a.jsx)(e.code,{className:\\"language-js code-highlight\\",children:(0,a.jsxs)(e.span,{className:\\"code-line\\",children:[(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"!\\"}),(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\"[\\"}),\\"ocean\\",(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\"]\\"}),(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"/\\"}),(0,a.jsx)(e.span,{className:\\"token keyword\\",children:\\"static\\"}),(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"/\\"}),\\"images\\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"/\\"}),\\"ocean\\",(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,a.jsx)(e.span,{className:\\"token property-access\\",children:\\"jpg\\"}),(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]})})}),(0,a.jsxs)(e.p,{children:[\\"Alternatively, since we are using mdx, we can just use the image component directly! Note, that you would have to provide a fixed width and height. The \\",(0,a.jsx)(e.code,{children:\\"img\\"}),\\" tag method parses the dimension automatically.\\"]}),(0,a.jsx)(e.pre,{className:\\"language-js\\",children:(0,a.jsx)(e.code,{className:\\"language-js code-highlight\\",children:(0,a.jsxs)(e.span,{className:\\"code-line\\",children:[(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"<\\"}),(0,a.jsx)(e.span,{className:\\"token maybe-class-name\\",children:\\"Image\\"}),\\" alt\\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"=\\"}),(0,a.jsx)(e.span,{className:\\"token string\\",children:\'\\"ocean\\"\'}),\\" src\\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"=\\"}),(0,a.jsx)(e.span,{className:\\"token string\\",children:\'\\"/static/images/ocean.jpg\\"\'}),\\" width\\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"=\\"}),(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,a.jsx)(e.span,{className:\\"token number\\",children:\\"256\\"}),(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" height\\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"=\\"}),(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,a.jsx)(e.span,{className:\\"token number\\",children:\\"128\\"}),(0,a.jsx)(e.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" \\",(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\"/\\"}),(0,a.jsx)(e.span,{className:\\"token operator\\",children:\\">\\"}),`\\n`]})})}),(0,a.jsxs)(e.p,{children:[(0,a.jsx)(e.em,{children:\\"Note\\"}),\\": If you try to save the image, it is in webp format, if your browser supports it!\\"]}),(0,a.jsx)(e.div,{children:(0,a.jsx)(s,{alt:\\"ocean\\",src:\\"/static/images/ocean.jpeg\\",width:\\"1920\\",height:\\"1280\\"})}),(0,a.jsxs)(e.p,{children:[\\"Photo by \\",(0,a.jsx)(e.a,{href:\\"https://unsplash.com/@yucar?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\\",children:\\"YUCAR FotoGrafik\\"}),\\" on \\",(0,a.jsx)(e.a,{href:\\"https://unsplash.com/s/photos/sea?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\\",children:\\"Unsplash\\"})]}),(0,a.jsxs)(e.h1,{className:\\"content-header\\",id:\\"benefits\\",children:[(0,a.jsx)(e.a,{href:\\"#benefits\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(e.span,{className:\\"content-header-link\\",children:(0,a.jsxs)(e.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,a.jsx)(e.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,a.jsx)(e.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Benefits\\"]}),(0,a.jsxs)(e.ul,{children:[(0,a.jsx)(e.li,{children:\\"Smaller image size with Webp (~30% smaller than jpeg)\\"}),(0,a.jsx)(e.li,{children:\\"Responsive images - the correct image size is served based on the user\'s viewport\\"}),(0,a.jsx)(e.li,{children:\\"Lazy loading - images load as they are scrolled to the viewport\\"}),(0,a.jsxs)(e.li,{children:[\\"Avoids \\",(0,a.jsx)(e.a,{href:\\"https://web.dev/cls/\\",children:\\"Cumulative Layout Shift\\"})]}),(0,a.jsx)(e.li,{children:\\"Optimization on demand instead of build-time - no increase in build time!\\"})]}),(0,a.jsxs)(e.h1,{className:\\"content-header\\",id:\\"limitations\\",children:[(0,a.jsx)(e.a,{href:\\"#limitations\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(e.span,{className:\\"content-header-link\\",children:(0,a.jsxs)(e.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,a.jsx)(e.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,a.jsx)(e.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Limitations\\"]}),(0,a.jsxs)(e.ul,{children:[(0,a.jsxs)(e.li,{children:[(0,a.jsxs)(e.p,{children:[\\"Due to the reliance on \\",(0,a.jsx)(e.code,{children:\\"next/image\\"}),\\", unless you are using an external image CDN like Cloudinary or Imgix, it is practically required to use Vercel for hosting. This is because the component acts like a serverless function that calls a highly optimized image CDN.\\"]}),(0,a.jsxs)(e.p,{children:[\\"If you do not want to be tied to Vercel, you can remove \\",(0,a.jsx)(e.code,{children:\\"imgToJsx\\"}),\\" in \\",(0,a.jsx)(e.code,{children:\\"remarkPlugins\\"}),\\" in \\",(0,a.jsx)(e.code,{children:\\"lib/mdx.js\\"}),\\". This would avoid substituting the default \\",(0,a.jsx)(e.code,{children:\\"img\\"}),\\" tag.\\"]}),(0,a.jsxs)(e.p,{children:[\\"Alternatively, one could wait for image optimization at build time to be supported. A different library, \\",(0,a.jsx)(e.a,{href:\\"https://github.com/cyrilwanner/next-optimized-images\\",children:\\"next-optimized-images\\"}),\\" does that, although it requires transforming the images through webpack which is not done here.\\"]})]}),(0,a.jsx)(e.li,{children:(0,a.jsxs)(e.p,{children:[\\"Images from external links are not passed through \\",(0,a.jsx)(e.code,{children:\\"next/image\\"})]})}),(0,a.jsx)(e.li,{children:(0,a.jsxs)(e.p,{children:[\\"All images have to be stored in the \\",(0,a.jsx)(e.code,{children:\\"public\\"}),\\" folder e.g \\",(0,a.jsx)(e.code,{children:\\"/static/images/ocean.jpeg\\"})]})})]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}function x(n,e){throw new Error(\\"Expected \\"+(e?\\"component\\":\\"object\\")+\\" `\\"+n+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return y(v);})();\\n;return Component;"},"_id":"blog/guide-to-using-images-in-nextjs.mdx","_raw":{"sourceFilePath":"blog/guide-to-using-images-in-nextjs.mdx","sourceFileName":"guide-to-using-images-in-nextjs.mdx","sourceFileDir":"blog","contentType":"mdx","flattenedPath":"blog/guide-to-using-images-in-nextjs"},"type":"Blog","readingTime":{"text":"2 min read","minutes":1.95,"time":117000,"words":390},"slug":"guide-to-using-images-in-nextjs","path":"blog/guide-to-using-images-in-nextjs","filePath":"blog/guide-to-using-images-in-nextjs.mdx","toc":[{"value":"Introduction","url":"#introduction","depth":1},{"value":"Usage","url":"#usage","depth":1},{"value":"Benefits","url":"#benefits","depth":1},{"value":"Limitations","url":"#limitations","depth":1}],"structuredData":{"@context":"https://schema.org","@type":"BlogPosting","headline":"Images in Next.js","datePublished":"2020-11-11T00:00:00.000Z","dateModified":"2020-11-11T00:00:00.000Z","description":"In this article we introduce adding images in the tailwind starter blog and the benefits and limitations of the next/image component.","image":"/static/images/twitter-card.png","url":"https://tailwind-nextjs-starter-blog.vercel.app/blog/guide-to-using-images-in-nextjs"}},{"title":"Introducing Tailwind Nextjs Starter Blog","date":"2021-01-12T00:00:00.000Z","tags":["next-js","tailwind","guide"],"lastmod":"2024-08-16T00:00:00.000Z","draft":false,"summary":"Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.","images":["/static/images/canada/mountains.jpg","/static/images/canada/toronto.jpg"],"authors":["default","sparrowhawk"],"body":{"raw":"\\n\\n\\n# Tailwind Nextjs Starter Blog\\n\\n[](https://vercel.com/new/git/external?repository-url=https://github.com/timlrx/tailwind-nextjs-starter-blog)\\n\\n> [!CAUTION]\\n> This is the README of version 1 of the template. It is kept for historical reasons, but is no longer supported. It also serves as a nice example of [Github Alert](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts). For the actual documentation, please refer to the [Github repository](https://github.com/timlrx/tailwind-nextjs-starter-blog).\\n\\nThis is a [Next.js](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/) blogging starter template. Probably the most feature-rich Next.js markdown blogging template out there. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.\\n\\nCheck out the documentation below to get started.\\n\\nFacing issues? Check the [FAQ page](https://github.com/timlrx/tailwind-nextjs-starter-blog/wiki) and do a search on past issues. Feel free to open a new issue if none has been posted previously.\\n\\nFeature request? Check the past discussions to see if it has been brought up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcomed!\\n\\n## Examples\\n\\n- [Demo Blog](https://tailwind-nextjs-starter-blog.vercel.app/) - this repo\\n- [My personal blog](https://www.timlrx.com) - modified to auto-generate blog posts with dates\\n- [Aloisdg\'s cookbook](https://tambouille.vercel.app/) - with pictures and recipes!\\n- [GautierArcin\'s demo with next translate](https://tailwind-nextjs-starter-blog-seven.vercel.app/) - includes translation of mdx posts, [source code](https://github.com/GautierArcin/tailwind-nextjs-starter-blog/tree/demo/next-translate)\\n- [David Levai\'s digital garden](https://davidlevai.com/) - customized design and added email subscriptions\\n- [Thinh\'s Corner](https://thinhcorner.com/) - [customized layout](https://github.com/Th1nhNg0/th1nhng0.vercel.app/blob/5e73a420828d82f01e7147512a2c3273c4ec19f8/layouts/PostLayout.js) with sticky side table of contents\\n\\nUsing the template? Feel free to create a PR and add your blog to this list.\\n\\n## Motivation\\n\\nI wanted to port my existing blog to Nextjs and Tailwind CSS but there was no easy out of the box template to use so I decided to create one. Design is adapted from [Tailwindlabs blog](https://github.com/tailwindlabs/blog.tailwindcss.com).\\n\\nI wanted it to be nearly as feature-rich as popular blogging templates like [beautiful-jekyll](https://github.com/daattali/beautiful-jekyll) and [Hugo Academic](https://github.com/wowchemy/wowchemy-hugo-modules) but with the best of React\'s ecosystem and current web development\'s best practices.\\n\\n## Features\\n\\n- Easy styling customization with [Tailwind 3.0](https://tailwindcss.com/blog/tailwindcss-v3) and primary color attribute\\n- Near perfect lighthouse score - [Lighthouse report](https://www.webpagetest.org/result/210111_DiC1_08f3670c3430bf4a9b76fc3b927716c5/)\\n- Lightweight, 45kB first load JS, uses Preact in production build\\n- Mobile-friendly view\\n- Light and dark theme\\n- Self-hosted font with [Fontsource](https://fontsource.org/)\\n- Supports [plausible](https://plausible.io/), [simple analytics](https://simpleanalytics.com/) and google analytics\\n- [MDX - write JSX in markdown documents!](https://mdxjs.com/)\\n- Server-side syntax highlighting with line numbers and line highlighting via [rehype-prism-plus](https://github.com/timlrx/rehype-prism-plus)\\n- Math display supported via [KaTeX](https://katex.org/)\\n- Citation and bibliography support via [rehype-citation](https://github.com/timlrx/rehype-citation)\\n- Automatic image optimization via [next/image](https://nextjs.org/docs/basic-features/image-optimization)\\n- Flexible data retrieval with [mdx-bundler](https://github.com/kentcdodds/mdx-bundler)\\n- Support for tags - each unique tag will be its own page\\n- Support for multiple authors\\n- Blog templates\\n- TOC component\\n- Support for nested routing of blog posts\\n- Newsletter component with support for Mailchimp, Buttondown, Convertkit, Klaviyo, Revue, Emailoctopus and Beehiiv\\n- Supports [giscus](https://github.com/laymonage/giscus), [utterances](https://github.com/utterance/utterances) or disqus\\n- Projects page\\n- Preconfigured security headers\\n- SEO friendly with RSS feed, sitemaps and more!\\n\\n## Sample posts\\n\\n- [A markdown guide](https://tailwind-nextjs-starter-blog.vercel.app/blog/github-markdown-guide)\\n- [Learn more about images in Next.js](https://tailwind-nextjs-starter-blog.vercel.app/blog/guide-to-using-images-in-nextjs)\\n- [A tour of math typesetting](https://tailwind-nextjs-starter-blog.vercel.app/blog/deriving-ols-estimator)\\n- [Simple MDX image grid](https://tailwind-nextjs-starter-blog.vercel.app/blog/pictures-of-canada)\\n- [Example of long prose](https://tailwind-nextjs-starter-blog.vercel.app/blog/the-time-machine)\\n- [Example of Nested Route Post](https://tailwind-nextjs-starter-blog.vercel.app/blog/nested-route/introducing-multi-part-posts-with-nested-routing)\\n\\n## Quick Start Guide\\n\\n1. JS (official support) - `npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git` or TS (community support) - `npx degit timlrx/tailwind-nextjs-starter-blog#typescript`\\n2. Personalize `siteMetadata.js` (site related information)\\n3. Modify the content security policy in `next.config.js` if you want to use\\n any analytics provider or a commenting solution other than giscus.\\n4. Personalize `authors/default.md` (main author)\\n5. Modify `projectsData.ts`\\n6. Modify `headerNavLinks.ts` to customize navigation links\\n7. Add blog posts\\n8. Deploy on Vercel\\n\\n## Development\\n\\nFirst, run the development server:\\n\\n```bash\\nnpm start\\n# or\\nnpm run dev\\n```\\n\\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\\n\\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\\n\\n## Extend / Customize\\n\\n`data/siteMetadata.js` - contains most of the site related information which should be modified for a user\'s need.\\n\\n`data/authors/default.md` - default author information (required). Additional authors can be added as files in `data/authors`.\\n\\n`data/projectsData.js` - data used to generate styled card on the projects page.\\n\\n`data/headerNavLinks.js` - navigation links.\\n\\n`data/logo.svg` - replace with your own logo.\\n\\n`data/blog` - replace with your own blog posts.\\n\\n`public/static` - store assets such as images and favicons.\\n\\n`tailwind.config.js` and `css/tailwind.css` - contain the tailwind stylesheet which can be modified to change the overall look and feel of the site.\\n\\n`css/prism.css` - controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. [prism themes](https://github.com/PrismJS/prism-themes).\\n\\n`components/social-icons` - to add other icons, simply copy an svg file from [Simple Icons](https://simpleicons.org/) and map them in `index.js`. Other icons use [heroicons](https://heroicons.com/).\\n\\n`components/MDXComponents.js` - pass your own JSX code or React component by specifying it over here. You can then call them directly in the `.mdx` or `.md` file. By default, a custom link and image component is passed.\\n\\n`layouts` - main templates used in pages.\\n\\n`pages` - pages to route to. Read the [Next.js documentation](https://nextjs.org/docs) for more information.\\n\\n`next.config.js` - configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.\\n\\n## Post\\n\\n### Frontmatter\\n\\nFrontmatter follows [Hugo\'s standards](https://gohugo.io/content-management/front-matter/).\\n\\nCurrently 10 fields are supported.\\n\\n```\\ntitle (required)\\ndate (required)\\ntags (required, can be empty array)\\nlastmod (optional)\\ndraft (optional)\\nsummary (optional)\\nimages (optional, if none provided defaults to socialBanner in siteMetadata config)\\nauthors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)\\nlayout (optional list which should correspond to the file names in `data/layouts`)\\ncanonicalUrl (optional, canonical url for the post for SEO)\\n```\\n\\nHere\'s an example of a post\'s frontmatter:\\n\\n```\\n---\\ntitle: \'Introducing Tailwind Nexjs Starter Blog\'\\ndate: \'2021-01-12\'\\nlastmod: \'2021-01-18\'\\ntags: [\'next-js\', \'tailwind\', \'guide\']\\ndraft: false\\nsummary: \'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.\'\\nimages: [\'/static/images/canada/mountains.jpg\', \'/static/images/canada/toronto.jpg\']\\nauthors: [\'default\', \'sparrowhawk\']\\nlayout: PostLayout\\ncanonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog\\n---\\n```\\n\\n### Compose\\n\\nRun `node ./scripts/compose.js` to bootstrap a new post.\\n\\nFollow the interactive prompt to generate a post with pre-filled front matter.\\n\\n## Deploy\\n\\n**Vercel** \\nThe easiest way to deploy the template is to use the [Vercel Platform](https://vercel.com) from the creators of Next.js. Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\\n\\n**Netlify / GitHub Pages / Firebase etc.** \\nAs the template uses `next/image` for image optimization, additional configurations have to be made to deploy on other popular static hosting websites like [Netlify](https://www.netlify.com/) or [GitHub Pages](https://pages.github.com/). An alternative image optimization provider such as Imgix, Cloudinary or Akamai has to be used. Alternatively, replace the `next/image` component with a standard `<img>` tag. See [`next/image` documentation](https://nextjs.org/docs/basic-features/image-optimization) for more details.\\n\\nThe API routes used in the newsletter component cannot be used in a static site export. You will need to use a form API endpoint provider and substitute the route in the newsletter component accordingly. Other hosting platforms such as Netlify also offer alternative solutions - please refer to their docs for more information.\\n\\n## Support\\n\\nUsing the template? Support this effort by giving a star on GitHub, sharing your own blog and giving a shoutout on Twitter or be a project [sponsor](https://github.com/sponsors/timlrx).\\n\\n## Licence\\n\\n[MIT](https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/main/LICENSE) \xa9 [Timothy Lin](https://www.timrlx.com)\\n","code":"var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var w=(n,a)=>()=>(a||n((a={exports:{}}).exports,a),a.exports),N=(n,a)=>{for(var t in a)i(n,t,{get:a[t],enumerable:!0})},r=(n,a,t,s)=>{if(a&&typeof a==\\"object\\"||typeof a==\\"function\\")for(let l of u(a))!f.call(n,l)&&l!==t&&i(n,l,{get:()=>a[l],enumerable:!(s=m(a,l))||s.enumerable});return n};var k=(n,a,t)=>(t=n!=null?p(g(n)):{},r(a||!n||!n.__esModule?i(t,\\"default\\",{value:n,enumerable:!0}):t,n)),b=n=>r(i({},\\"__esModule\\",{value:!0}),n);var c=w((M,o)=>{o.exports=_jsx_runtime});var v={};N(v,{default:()=>h,frontmatter:()=>x});var e=k(c()),x={title:\\"Introducing Tailwind Nextjs Starter Blog\\",date:\\"2021-01-12\\",lastmod:\\"2024-08-16\\",tags:[\\"next-js\\",\\"tailwind\\",\\"guide\\"],draft:!1,summary:\\"Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.\\",images:[\\"/static/images/canada/mountains.jpg\\",\\"/static/images/canada/toronto.jpg\\"],authors:[\\"default\\",\\"sparrowhawk\\"]};function d(n){let a={a:\\"a\\",br:\\"br\\",code:\\"code\\",div:\\"div\\",h1:\\"h1\\",h2:\\"h2\\",h3:\\"h3\\",img:\\"img\\",li:\\"li\\",ol:\\"ol\\",p:\\"p\\",path:\\"path\\",pre:\\"pre\\",span:\\"span\\",strong:\\"strong\\",svg:\\"svg\\",ul:\\"ul\\",...n.components},{Image:t}=a;return t||y(\\"Image\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(a.div,{children:(0,e.jsx)(t,{alt:\\"tailwind-nextjs-banner\\",src:\\"/static/images/twitter-card.png\\",width:\\"1200\\",height:\\"600\\"})}),(0,e.jsxs)(a.h1,{className:\\"content-header\\",id:\\"tailwind-nextjs-starter-blog\\",children:[(0,e.jsx)(a.a,{href:\\"#tailwind-nextjs-starter-blog\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{viewBox:\\"0 0 20 20\\",className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Tailwind Nextjs Starter Blog\\"]}),(0,e.jsx)(a.p,{children:(0,e.jsx)(a.a,{href:\\"https://vercel.com/new/git/external?repository-url=https://github.com/timlrx/tailwind-nextjs-starter-blog\\",children:(0,e.jsx)(a.img,{alt:\\"Deploy with Vercel\\",src:\\"https://vercel.com/button\\"})})}),(0,e.jsxs)(a.div,{className:\\"markdown-alert markdown-alert-caution\\",dir:\\"auto\\",children:[(0,e.jsxs)(a.p,{className:\\"markdown-alert-title\\",dir:\\"auto\\",children:[(0,e.jsx)(a.svg,{viewBox:\\"0 0 16 16\\",\\"aria-hidden\\":\\"true\\",className:\\"octicon\\",height:\\"16\\",width:\\"16\\",children:(0,e.jsx)(a.path,{d:\\"M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\\"})}),\\"CAUTION\\"]}),(0,e.jsxs)(a.p,{children:[\\"This is the README of version 1 of the template. It is kept for historical reasons, but is no longer supported. It also serves as a nice example of \\",(0,e.jsx)(a.a,{href:\\"https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts\\",children:\\"Github Alert\\"}),\\". For the actual documentation, please refer to the \\",(0,e.jsx)(a.a,{href:\\"https://github.com/timlrx/tailwind-nextjs-starter-blog\\",children:\\"Github repository\\"}),\\".\\"]})]}),(0,e.jsxs)(a.p,{children:[\\"This is a \\",(0,e.jsx)(a.a,{href:\\"https://nextjs.org/\\",children:\\"Next.js\\"}),\\", \\",(0,e.jsx)(a.a,{href:\\"https://tailwindcss.com/\\",children:\\"Tailwind CSS\\"}),\\" blogging starter template. Probably the most feature-rich Next.js markdown blogging template out there. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.\\"]}),(0,e.jsx)(a.p,{children:\\"Check out the documentation below to get started.\\"}),(0,e.jsxs)(a.p,{children:[\\"Facing issues? Check the \\",(0,e.jsx)(a.a,{href:\\"https://github.com/timlrx/tailwind-nextjs-starter-blog/wiki\\",children:\\"FAQ page\\"}),\\" and do a search on past issues. Feel free to open a new issue if none has been posted previously.\\"]}),(0,e.jsx)(a.p,{children:\\"Feature request? Check the past discussions to see if it has been brought up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcomed!\\"}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"examples\\",children:[(0,e.jsx)(a.a,{href:\\"#examples\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{viewBox:\\"0 0 20 20\\",className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Examples\\"]}),(0,e.jsxs)(a.ul,{children:[(0,e.jsxs)(a.li,{children:[(0,e.jsx)(a.a,{href:\\"https://tailwind-nextjs-starter-blog.vercel.app/\\",children:\\"Demo Blog\\"}),\\" - this repo\\"]}),(0,e.jsxs)(a.li,{children:[(0,e.jsx)(a.a,{href:\\"https://www.timlrx.com\\",children:\\"My personal blog\\"}),\\" - modified to auto-generate blog posts with dates\\"]}),(0,e.jsxs)(a.li,{children:[(0,e.jsx)(a.a,{href:\\"https://tambouille.vercel.app/\\",children:\\"Aloisdg\'s cookbook\\"}),\\" - with pictures and recipes!\\"]}),(0,e.jsxs)(a.li,{children:[(0,e.jsx)(a.a,{href:\\"https://tailwind-nextjs-starter-blog-seven.vercel.app/\\",children:\\"GautierArcin\'s demo with next translate\\"}),\\" - includes translation of mdx posts, \\",(0,e.jsx)(a.a,{href:\\"https://github.com/GautierArcin/tailwind-nextjs-starter-blog/tree/demo/next-translate\\",children:\\"source code\\"})]}),(0,e.jsxs)(a.li,{children:[(0,e.jsx)(a.a,{href:\\"https://davidlevai.com/\\",children:\\"David Levai\'s digital garden\\"}),\\" - customized design and added email subscriptions\\"]}),(0,e.jsxs)(a.li,{children:[(0,e.jsx)(a.a,{href:\\"https://thinhcorner.com/\\",children:\\"Thinh\'s Corner\\"}),\\" - \\",(0,e.jsx)(a.a,{href:\\"https://github.com/Th1nhNg0/th1nhng0.vercel.app/blob/5e73a420828d82f01e7147512a2c3273c4ec19f8/layouts/PostLayout.js\\",children:\\"customized layout\\"}),\\" with sticky side table of contents\\"]})]}),(0,e.jsx)(a.p,{children:\\"Using the template? Feel free to create a PR and add your blog to this list.\\"}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"motivation\\",children:[(0,e.jsx)(a.a,{href:\\"#motivation\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{viewBox:\\"0 0 20 20\\",className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Motivation\\"]}),(0,e.jsxs)(a.p,{children:[\\"I wanted to port my existing blog to Nextjs and Tailwind CSS but there was no easy out of the box template to use so I decided to create one. Design is adapted from \\",(0,e.jsx)(a.a,{href:\\"https://github.com/tailwindlabs/blog.tailwindcss.com\\",children:\\"Tailwindlabs blog\\"}),\\".\\"]}),(0,e.jsxs)(a.p,{children:[\\"I wanted it to be nearly as feature-rich as popular blogging templates like \\",(0,e.jsx)(a.a,{href:\\"https://github.com/daattali/beautiful-jekyll\\",children:\\"beautiful-jekyll\\"}),\\" and \\",(0,e.jsx)(a.a,{href:\\"https://github.com/wowchemy/wowchemy-hugo-modules\\",children:\\"Hugo Academic\\"}),\\" but with the best of React\'s ecosystem and current web development\'s best practices.\\"]}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"features\\",children:[(0,e.jsx)(a.a,{href:\\"#features\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{viewBox:\\"0 0 20 20\\",className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Features\\"]}),(0,e.jsxs)(a.ul,{children:[(0,e.jsxs)(a.li,{children:[\\"Easy styling customization with \\",(0,e.jsx)(a.a,{href:\\"https://tailwindcss.com/blog/tailwindcss-v3\\",children:\\"Tailwind 3.0\\"}),\\" and primary color attribute\\"]}),(0,e.jsxs)(a.li,{children:[\\"Near perfect lighthouse score - \\",(0,e.jsx)(a.a,{href:\\"https://www.webpagetest.org/result/210111_DiC1_08f3670c3430bf4a9b76fc3b927716c5/\\",children:\\"Lighthouse report\\"})]}),(0,e.jsx)(a.li,{children:\\"Lightweight, 45kB first load JS, uses Preact in production build\\"}),(0,e.jsx)(a.li,{children:\\"Mobile-friendly view\\"}),(0,e.jsx)(a.li,{children:\\"Light and dark theme\\"}),(0,e.jsxs)(a.li,{children:[\\"Self-hosted font with \\",(0,e.jsx)(a.a,{href:\\"https://fontsource.org/\\",children:\\"Fontsource\\"})]}),(0,e.jsxs)(a.li,{children:[\\"Supports \\",(0,e.jsx)(a.a,{href:\\"https://plausible.io/\\",children:\\"plausible\\"}),\\", \\",(0,e.jsx)(a.a,{href:\\"https://simpleanalytics.com/\\",children:\\"simple analytics\\"}),\\" and google analytics\\"]}),(0,e.jsx)(a.li,{children:(0,e.jsx)(a.a,{href:\\"https://mdxjs.com/\\",children:\\"MDX - write JSX in markdown documents!\\"})}),(0,e.jsxs)(a.li,{children:[\\"Server-side syntax highlighting with line numbers and line highlighting via \\",(0,e.jsx)(a.a,{href:\\"https://github.com/timlrx/rehype-prism-plus\\",children:\\"rehype-prism-plus\\"})]}),(0,e.jsxs)(a.li,{children:[\\"Math display supported via \\",(0,e.jsx)(a.a,{href:\\"https://katex.org/\\",children:\\"KaTeX\\"})]}),(0,e.jsxs)(a.li,{children:[\\"Citation and bibliography support via \\",(0,e.jsx)(a.a,{href:\\"https://github.com/timlrx/rehype-citation\\",children:\\"rehype-citation\\"})]}),(0,e.jsxs)(a.li,{children:[\\"Automatic image optimization via \\",(0,e.jsx)(a.a,{href:\\"https://nextjs.org/docs/basic-features/image-optimization\\",children:\\"next/image\\"})]}),(0,e.jsxs)(a.li,{children:[\\"Flexible data retrieval with \\",(0,e.jsx)(a.a,{href:\\"https://github.com/kentcdodds/mdx-bundler\\",children:\\"mdx-bundler\\"})]}),(0,e.jsx)(a.li,{children:\\"Support for tags - each unique tag will be its own page\\"}),(0,e.jsx)(a.li,{children:\\"Support for multiple authors\\"}),(0,e.jsx)(a.li,{children:\\"Blog templates\\"}),(0,e.jsx)(a.li,{children:\\"TOC component\\"}),(0,e.jsx)(a.li,{children:\\"Support for nested routing of blog posts\\"}),(0,e.jsx)(a.li,{children:\\"Newsletter component with support for Mailchimp, Buttondown, Convertkit, Klaviyo, Revue, Emailoctopus and Beehiiv\\"}),(0,e.jsxs)(a.li,{children:[\\"Supports \\",(0,e.jsx)(a.a,{href:\\"https://github.com/laymonage/giscus\\",children:\\"giscus\\"}),\\", \\",(0,e.jsx)(a.a,{href:\\"https://github.com/utterance/utterances\\",children:\\"utterances\\"}),\\" or disqus\\"]}),(0,e.jsx)(a.li,{children:\\"Projects page\\"}),(0,e.jsx)(a.li,{children:\\"Preconfigured security headers\\"}),(0,e.jsx)(a.li,{children:\\"SEO friendly with RSS feed, sitemaps and more!\\"})]}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"sample-posts\\",children:[(0,e.jsx)(a.a,{href:\\"#sample-posts\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{viewBox:\\"0 0 20 20\\",className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Sample posts\\"]}),(0,e.jsxs)(a.ul,{children:[(0,e.jsx)(a.li,{children:(0,e.jsx)(a.a,{href:\\"https://tailwind-nextjs-starter-blog.vercel.app/blog/github-markdown-guide\\",children:\\"A markdown guide\\"})}),(0,e.jsx)(a.li,{children:(0,e.jsx)(a.a,{href:\\"https://tailwind-nextjs-starter-blog.vercel.app/blog/guide-to-using-images-in-nextjs\\",children:\\"Learn more about images in Next.js\\"})}),(0,e.jsx)(a.li,{children:(0,e.jsx)(a.a,{href:\\"https://tailwind-nextjs-starter-blog.vercel.app/blog/deriving-ols-estimator\\",children:\\"A tour of math typesetting\\"})}),(0,e.jsx)(a.li,{children:(0,e.jsx)(a.a,{href:\\"https://tailwind-nextjs-starter-blog.vercel.app/blog/pictures-of-canada\\",children:\\"Simple MDX image grid\\"})}),(0,e.jsx)(a.li,{children:(0,e.jsx)(a.a,{href:\\"https://tailwind-nextjs-starter-blog.vercel.app/blog/the-time-machine\\",children:\\"Example of long prose\\"})}),(0,e.jsx)(a.li,{children:(0,e.jsx)(a.a,{href:\\"https://tailwind-nextjs-starter-blog.vercel.app/blog/nested-route/introducing-multi-part-posts-with-nested-routing\\",children:\\"Example of Nested Route Post\\"})})]}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"quick-start-guide\\",children:[(0,e.jsx)(a.a,{href:\\"#quick-start-guide\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{viewBox:\\"0 0 20 20\\",className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Quick Start Guide\\"]}),(0,e.jsxs)(a.ol,{children:[(0,e.jsxs)(a.li,{children:[\\"JS (official support) - \\",(0,e.jsx)(a.code,{children:\\"npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git\\"}),\\" or TS (community support) - \\",(0,e.jsx)(a.code,{children:\\"npx degit timlrx/tailwind-nextjs-starter-blog#typescript\\"})]}),(0,e.jsxs)(a.li,{children:[\\"Personalize \\",(0,e.jsx)(a.code,{children:\\"siteMetadata.js\\"}),\\" (site related information)\\"]}),(0,e.jsxs)(a.li,{children:[\\"Modify the content security policy in \\",(0,e.jsx)(a.code,{children:\\"next.config.js\\"}),\\" if you want to use any analytics provider or a commenting solution other than giscus.\\"]}),(0,e.jsxs)(a.li,{children:[\\"Personalize \\",(0,e.jsx)(a.code,{children:\\"authors/default.md\\"}),\\" (main author)\\"]}),(0,e.jsxs)(a.li,{children:[\\"Modify \\",(0,e.jsx)(a.code,{children:\\"projectsData.ts\\"})]}),(0,e.jsxs)(a.li,{children:[\\"Modify \\",(0,e.jsx)(a.code,{children:\\"headerNavLinks.ts\\"}),\\" to customize navigation links\\"]}),(0,e.jsx)(a.li,{children:\\"Add blog posts\\"}),(0,e.jsx)(a.li,{children:\\"Deploy on Vercel\\"})]}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"development\\",children:[(0,e.jsx)(a.a,{href:\\"#development\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{viewBox:\\"0 0 20 20\\",className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Development\\"]}),(0,e.jsx)(a.p,{children:\\"First, run the development server:\\"}),(0,e.jsx)(a.pre,{className:\\"language-bash\\",children:(0,e.jsxs)(a.code,{className:\\"code-highlight language-bash\\",children:[(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token function\\",children:\\"npm\\"}),` start\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token comment\\",children:\\"# or\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token function\\",children:\\"npm\\"}),` run dev\\n`]})]})}),(0,e.jsxs)(a.p,{children:[\\"Open \\",(0,e.jsx)(a.a,{href:\\"http://localhost:3000\\",children:\\"http://localhost:3000\\"}),\\" with your browser to see the result.\\"]}),(0,e.jsxs)(a.p,{children:[\\"You can start editing the page by modifying \\",(0,e.jsx)(a.code,{children:\\"pages/index.js\\"}),\\". The page auto-updates as you edit the file.\\"]}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"extend--customize\\",children:[(0,e.jsx)(a.a,{href:\\"#extend--customize\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{viewBox:\\"0 0 20 20\\",className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Extend / Customize\\"]}),(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.code,{children:\\"data/siteMetadata.js\\"}),\\" - contains most of the site related information which should be modified for a user\'s need.\\"]}),(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.code,{children:\\"data/authors/default.md\\"}),\\" - default author information (required). Additional authors can be added as files in \\",(0,e.jsx)(a.code,{children:\\"data/authors\\"}),\\".\\"]}),(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.code,{children:\\"data/projectsData.js\\"}),\\" - data used to generate styled card on the projects page.\\"]}),(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.code,{children:\\"data/headerNavLinks.js\\"}),\\" - navigation links.\\"]}),(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.code,{children:\\"data/logo.svg\\"}),\\" - replace with your own logo.\\"]}),(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.code,{children:\\"data/blog\\"}),\\" - replace with your own blog posts.\\"]}),(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.code,{children:\\"public/static\\"}),\\" - store assets such as images and favicons.\\"]}),(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.code,{children:\\"tailwind.config.js\\"}),\\" and \\",(0,e.jsx)(a.code,{children:\\"css/tailwind.css\\"}),\\" - contain the tailwind stylesheet which can be modified to change the overall look and feel of the site.\\"]}),(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.code,{children:\\"css/prism.css\\"}),\\" - controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. \\",(0,e.jsx)(a.a,{href:\\"https://github.com/PrismJS/prism-themes\\",children:\\"prism themes\\"}),\\".\\"]}),(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.code,{children:\\"components/social-icons\\"}),\\" - to add other icons, simply copy an svg file from \\",(0,e.jsx)(a.a,{href:\\"https://simpleicons.org/\\",children:\\"Simple Icons\\"}),\\" and map them in \\",(0,e.jsx)(a.code,{children:\\"index.js\\"}),\\". Other icons use \\",(0,e.jsx)(a.a,{href:\\"https://heroicons.com/\\",children:\\"heroicons\\"}),\\".\\"]}),(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.code,{children:\\"components/MDXComponents.js\\"}),\\" - pass your own JSX code or React component by specifying it over here. You can then call them directly in the \\",(0,e.jsx)(a.code,{children:\\".mdx\\"}),\\" or \\",(0,e.jsx)(a.code,{children:\\".md\\"}),\\" file. By default, a custom link and image component is passed.\\"]}),(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.code,{children:\\"layouts\\"}),\\" - main templates used in pages.\\"]}),(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.code,{children:\\"pages\\"}),\\" - pages to route to. Read the \\",(0,e.jsx)(a.a,{href:\\"https://nextjs.org/docs\\",children:\\"Next.js documentation\\"}),\\" for more information.\\"]}),(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.code,{children:\\"next.config.js\\"}),\\" - configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.\\"]}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"post\\",children:[(0,e.jsx)(a.a,{href:\\"#post\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{viewBox:\\"0 0 20 20\\",className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Post\\"]}),(0,e.jsxs)(a.h3,{className:\\"content-header\\",id:\\"frontmatter\\",children:[(0,e.jsx)(a.a,{href:\\"#frontmatter\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{viewBox:\\"0 0 20 20\\",className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Frontmatter\\"]}),(0,e.jsxs)(a.p,{children:[\\"Frontmatter follows \\",(0,e.jsx)(a.a,{href:\\"https://gohugo.io/content-management/front-matter/\\",children:\\"Hugo\'s standards\\"}),\\".\\"]}),(0,e.jsx)(a.p,{children:\\"Currently 10 fields are supported.\\"}),(0,e.jsx)(a.pre,{className:\\"language-js\\",children:(0,e.jsxs)(a.code,{className:\\"language-js code-highlight\\",children:[(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token function\\",children:\\"title\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"required\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token function\\",children:\\"date\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"required\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token function\\",children:\\"tags\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"required\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" can be empty array\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token function\\",children:\\"lastmod\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"optional\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token function\\",children:\\"draft\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"optional\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token function\\",children:\\"summary\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"optional\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token function\\",children:\\"images\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"optional\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token keyword control-flow\\",children:\\"if\\"}),\\" none provided defaults to socialBanner \\",(0,e.jsx)(a.span,{className:\\"token keyword\\",children:\\"in\\"}),\\" siteMetadata config\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token function\\",children:\\"authors\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"optional list which should correspond to the file names \\",(0,e.jsx)(a.span,{className:\\"token keyword\\",children:\\"in\\"}),\\" \\",(0,e.jsxs)(a.span,{className:\\"token template-string\\",children:[(0,e.jsx)(a.span,{className:\\"token string template-punctuation\\",children:\\"`\\"}),(0,e.jsx)(a.span,{className:\\"token string\\",children:\\"data/authors\\"}),(0,e.jsx)(a.span,{className:\\"token string template-punctuation\\",children:\\"`\\"})]}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\".\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token property-access\\",children:(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Uses\\"})}),\\" \\",(0,e.jsxs)(a.span,{className:\\"token template-string\\",children:[(0,e.jsx)(a.span,{className:\\"token string template-punctuation\\",children:\\"`\\"}),(0,e.jsx)(a.span,{className:\\"token string\\",children:\\"default\\"}),(0,e.jsx)(a.span,{className:\\"token string template-punctuation\\",children:\\"`\\"})]}),\\" \\",(0,e.jsx)(a.span,{className:\\"token keyword control-flow\\",children:\\"if\\"}),\\" none is specified\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token function\\",children:\\"layout\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"optional list which should correspond to the file names \\",(0,e.jsx)(a.span,{className:\\"token keyword\\",children:\\"in\\"}),\\" \\",(0,e.jsxs)(a.span,{className:\\"token template-string\\",children:[(0,e.jsx)(a.span,{className:\\"token string template-punctuation\\",children:\\"`\\"}),(0,e.jsx)(a.span,{className:\\"token string\\",children:\\"data/layouts\\"}),(0,e.jsx)(a.span,{className:\\"token string template-punctuation\\",children:\\"`\\"})]}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token function\\",children:\\"canonicalUrl\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"optional\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" canonical url \\",(0,e.jsx)(a.span,{className:\\"token keyword control-flow\\",children:\\"for\\"}),\\" the post \\",(0,e.jsx)(a.span,{className:\\"token keyword control-flow\\",children:\\"for\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token constant\\",children:\\"SEO\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]})]})}),(0,e.jsx)(a.p,{children:\\"Here\'s an example of a post\'s frontmatter:\\"}),(0,e.jsx)(a.pre,{className:\\"language-js\\",children:(0,e.jsxs)(a.code,{className:\\"language-js code-highlight\\",children:[(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token literal-property property\\",children:\\"title\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token string\\",children:\\"\'Introducing Tailwind Nexjs Starter Blog\'\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token literal-property property\\",children:\\"date\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token string\\",children:\\"\'2021-01-12\'\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token literal-property property\\",children:\\"lastmod\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token string\\",children:\\"\'2021-01-18\'\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token literal-property property\\",children:\\"tags\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"[\\"}),(0,e.jsx)(a.span,{className:\\"token string\\",children:\\"\'next-js\'\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token string\\",children:\\"\'tailwind\'\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token string\\",children:\\"\'guide\'\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"]\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token literal-property property\\",children:\\"draft\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token boolean\\",children:\\"false\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token literal-property property\\",children:\\"summary\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token string\\",children:\\"\'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.\'\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token literal-property property\\",children:\\"images\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"[\\"}),(0,e.jsx)(a.span,{className:\\"token string\\",children:\\"\'/static/images/canada/mountains.jpg\'\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token string\\",children:\\"\'/static/images/canada/toronto.jpg\'\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"]\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token literal-property property\\",children:\\"authors\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"[\\"}),(0,e.jsx)(a.span,{className:\\"token string\\",children:\\"\'default\'\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token string\\",children:\\"\'sparrowhawk\'\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"]\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token literal-property property\\",children:\\"layout\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"PostLayout\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token literal-property property\\",children:\\"canonicalUrl\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\":\\"}),\\" https\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\":\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"tailwind\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),\\"nextjs\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),\\"starter\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),\\"blog\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(a.span,{className:\\"token property-access\\",children:\\"vercel\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(a.span,{className:\\"token property-access\\",children:\\"app\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"blog\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"introducing\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),\\"tailwind\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),\\"nextjs\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),\\"starter\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),`blog\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"-\\"}),`\\n`]})]})}),(0,e.jsxs)(a.h3,{className:\\"content-header\\",id:\\"compose\\",children:[(0,e.jsx)(a.a,{href:\\"#compose\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{viewBox:\\"0 0 20 20\\",className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Compose\\"]}),(0,e.jsxs)(a.p,{children:[\\"Run \\",(0,e.jsx)(a.code,{children:\\"node ./scripts/compose.js\\"}),\\" to bootstrap a new post.\\"]}),(0,e.jsx)(a.p,{children:\\"Follow the interactive prompt to generate a post with pre-filled front matter.\\"}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"deploy\\",children:[(0,e.jsx)(a.a,{href:\\"#deploy\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{viewBox:\\"0 0 20 20\\",className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Deploy\\"]}),(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.strong,{children:\\"Vercel\\"}),(0,e.jsx)(a.br,{}),\\"The easiest way to deploy the template is to use the \\",(0,e.jsx)(a.a,{href:\\"https://vercel.com\\",children:\\"Vercel Platform\\"}),\\" from the creators of Next.js. Check out the \\",(0,e.jsx)(a.a,{href:\\"https://nextjs.org/docs/deployment\\",children:\\"Next.js deployment documentation\\"}),\\" for more details.\\"]}),(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.strong,{children:\\"Netlify / GitHub Pages / Firebase etc.\\"}),(0,e.jsx)(a.br,{}),\\"As the template uses \\",(0,e.jsx)(a.code,{children:\\"next/image\\"}),\\" for image optimization, additional configurations have to be made to deploy on other popular static hosting websites like \\",(0,e.jsx)(a.a,{href:\\"https://www.netlify.com/\\",children:\\"Netlify\\"}),\\" or \\",(0,e.jsx)(a.a,{href:\\"https://pages.github.com/\\",children:\\"GitHub Pages\\"}),\\". An alternative image optimization provider such as Imgix, Cloudinary or Akamai has to be used. Alternatively, replace the \\",(0,e.jsx)(a.code,{children:\\"next/image\\"}),\\" component with a standard \\",(0,e.jsx)(a.code,{children:\\"<img>\\"}),\\" tag. See \\",(0,e.jsxs)(a.a,{href:\\"https://nextjs.org/docs/basic-features/image-optimization\\",children:[(0,e.jsx)(a.code,{children:\\"next/image\\"}),\\" documentation\\"]}),\\" for more details.\\"]}),(0,e.jsx)(a.p,{children:\\"The API routes used in the newsletter component cannot be used in a static site export. You will need to use a form API endpoint provider and substitute the route in the newsletter component accordingly. Other hosting platforms such as Netlify also offer alternative solutions - please refer to their docs for more information.\\"}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"support\\",children:[(0,e.jsx)(a.a,{href:\\"#support\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{viewBox:\\"0 0 20 20\\",className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Support\\"]}),(0,e.jsxs)(a.p,{children:[\\"Using the template? Support this effort by giving a star on GitHub, sharing your own blog and giving a shoutout on Twitter or be a project \\",(0,e.jsx)(a.a,{href:\\"https://github.com/sponsors/timlrx\\",children:\\"sponsor\\"}),\\".\\"]}),(0,e.jsxs)(a.h2,{className:\\"content-header\\",id:\\"licence\\",children:[(0,e.jsx)(a.a,{href:\\"#licence\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{viewBox:\\"0 0 20 20\\",className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Licence\\"]}),(0,e.jsxs)(a.p,{children:[(0,e.jsx)(a.a,{href:\\"https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/main/LICENSE\\",children:\\"MIT\\"}),\\" \\\\xA9 \\",(0,e.jsx)(a.a,{href:\\"https://www.timrlx.com\\",children:\\"Timothy Lin\\"})]})]})}function h(n={}){let{wrapper:a}=n.components||{};return a?(0,e.jsx)(a,{...n,children:(0,e.jsx)(d,{...n})}):d(n)}function y(n,a){throw new Error(\\"Expected \\"+(a?\\"component\\":\\"object\\")+\\" `\\"+n+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return b(v);})();\\n;return Component;"},"_id":"blog/introducing-tailwind-nextjs-starter-blog.mdx","_raw":{"sourceFilePath":"blog/introducing-tailwind-nextjs-starter-blog.mdx","sourceFileName":"introducing-tailwind-nextjs-starter-blog.mdx","sourceFileDir":"blog","contentType":"mdx","flattenedPath":"blog/introducing-tailwind-nextjs-starter-blog"},"type":"Blog","readingTime":{"text":"7 min read","minutes":6.055,"time":363300,"words":1211},"slug":"introducing-tailwind-nextjs-starter-blog","path":"blog/introducing-tailwind-nextjs-starter-blog","filePath":"blog/introducing-tailwind-nextjs-starter-blog.mdx","toc":[{"value":"Tailwind Nextjs Starter Blog","url":"#tailwind-nextjs-starter-blog","depth":1},{"value":"Examples","url":"#examples","depth":2},{"value":"Motivation","url":"#motivation","depth":2},{"value":"Features","url":"#features","depth":2},{"value":"Sample posts","url":"#sample-posts","depth":2},{"value":"Quick Start Guide","url":"#quick-start-guide","depth":2},{"value":"Development","url":"#development","depth":2},{"value":"Extend / Customize","url":"#extend--customize","depth":2},{"value":"Post","url":"#post","depth":2},{"value":"Frontmatter","url":"#frontmatter","depth":3},{"value":"Compose","url":"#compose","depth":3},{"value":"Deploy","url":"#deploy","depth":2},{"value":"Support","url":"#support","depth":2},{"value":"Licence","url":"#licence","depth":2}],"structuredData":{"@context":"https://schema.org","@type":"BlogPosting","headline":"Introducing Tailwind Nextjs Starter Blog","datePublished":"2021-01-12T00:00:00.000Z","dateModified":"2024-08-16T00:00:00.000Z","description":"Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.","image":"/static/images/canada/mountains.jpg","url":"https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog"}},{"title":"My fancy title","date":"2021-01-31T00:00:00.000Z","tags":["hello"],"draft":true,"summary":"draft post","images":[],"body":{"raw":"\\nDraft post which should not display\\n","code":"var Component=(()=>{var f=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var y=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),_=(t,n)=>{for(var e in n)r(t,e,{get:n[e],enumerable:!0})},c=(t,n,e,s)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let o of p(n))!h.call(t,o)&&o!==e&&r(t,o,{get:()=>n[o],enumerable:!(s=l(n,o))||s.enumerable});return t};var M=(t,n,e)=>(e=t!=null?f(x(t)):{},c(n||!t||!t.__esModule?r(e,\\"default\\",{value:t,enumerable:!0}):e,t)),j=t=>c(r({},\\"__esModule\\",{value:!0}),t);var m=y((C,i)=>{i.exports=_jsx_runtime});var g={};_(g,{default:()=>d,frontmatter:()=>D});var a=M(m()),D={title:\\"My fancy title\\",date:\\"2021-01-31\\",tags:[\\"hello\\"],draft:!0,summary:\\"draft post\\",images:[]};function u(t){let n={p:\\"p\\",...t.components};return(0,a.jsx)(n.p,{children:\\"Draft post which should not display\\"})}function d(t={}){let{wrapper:n}=t.components||{};return n?(0,a.jsx)(n,{...t,children:(0,a.jsx)(u,{...t})}):u(t)}return j(g);})();\\n;return Component;"},"_id":"blog/my-fancy-title.mdx","_raw":{"sourceFilePath":"blog/my-fancy-title.mdx","sourceFileName":"my-fancy-title.mdx","sourceFileDir":"blog","contentType":"mdx","flattenedPath":"blog/my-fancy-title"},"type":"Blog","readingTime":{"text":"1 min read","minutes":0.03,"time":1800,"words":6},"slug":"my-fancy-title","path":"blog/my-fancy-title","filePath":"blog/my-fancy-title.mdx","toc":[],"structuredData":{"@context":"https://schema.org","@type":"BlogPosting","headline":"My fancy title","datePublished":"2021-01-31T00:00:00.000Z","dateModified":"2021-01-31T00:00:00.000Z","description":"draft post","url":"https://tailwind-nextjs-starter-blog.vercel.app/blog/my-fancy-title"}},{"title":"New features in v1","date":"2021-08-07T15:32:14.000Z","tags":["next-js","tailwind","guide"],"lastmod":"2021-02-01T00:00:00.000Z","draft":false,"summary":"An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more","layout":"PostSimple","bibliography":"references-data.bib","body":{"raw":"\\n## Overview\\n\\nA post on the new features introduced in v1.0. New features:\\n\\n<TOCInline toc={props.toc} exclude=\\"Overview\\" toHeading={2} />\\n\\nFirst load JS decreased from 43kB to 39kB despite all the new features added! [^1]\\n\\n[^1]: With the new changes in Nextjs 12, first load JS increase to 45kB.\\n\\nSee [upgrade guide](#upgrade-guide) below if you are migrating from v0 version of the template.\\n\\n## Theme colors\\n\\nYou can easily modify the theme color by changing the primary attribute in the tailwind config file:\\n\\n```js:tailwind.config.js\\ntheme: {\\n colors: {\\n primary: colors.teal,\\n gray: colors.neutral,\\n ...\\n }\\n ...\\n}\\n```\\n\\nThe primary color attribute should be assigned an object with keys from 50, 100, 200 ... 900 and the corresponding color code values.\\n\\nTailwind includes great default color palettes that can be used for theming your own website. Check out [customizing colors documentation page](https://tailwindcss.com/docs/customizing-colors) for the full range of options.\\n\\nMigrating from v1? You can revert to the previous theme by setting `primary` to `colors.sky` (Tailwind 2.2.2 and above, otherwise `colors.lightBlue`) and changing gray to `colors.gray`.\\n\\nFrom v1.1.2+, you can also customize the style of your code blocks easily by modifying the `css/prism.css` stylesheet. Token classnames are compatible with prismjs\\nso you can copy and adapt token styles from a prismjs stylesheet e.g. [prism themes](https://github.com/PrismJS/prism-themes).\\n\\n## Xdm MDX compiler\\n\\nWe switched the MDX bundler from [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote) to [mdx-bundler](https://github.com/kentcdodds/mdx-bundler).\\nThis uses [xdm](https://github.com/wooorm/xdm) under the hood, the latest micromark 3 and remark, rehype libraries.\\n\\n**Warning:** If you were using custom remark or rehype libraries, please upgrade to micromark 3 compatible ones. If you are upgrading, please delete `node_modules` and `package-lock.json` to avoid having past dependencies related issues.\\n\\n[xdm](https://github.com/wooorm/xdm) contains multiple improvements over [@mdx-js/mdx](https://github.com/mdx-js/mdx), the compiler used internally by next-mdx-remote, but there might be some breaking behaviour changes.\\nPlease check your markdown output to verify.\\n\\nSome new possibilities include loading components directly in the mdx file using the import syntax and including js code which could be compiled and bundled at the build step.\\n\\nFor example, the following jsx snippet can be used directly in an MDX file to render the page title component:\\n\\n```jsx\\n// Or import PageTitle from \'./components/PageTitle.js\' if you are using js\\nimport PageTitle from \'./components/PageTitle.tsx\'\\n;<PageTitle> Using JSX components in MDX </PageTitle>\\n```\\n\\nThe default configuration resolves all components relative to the `components` directory.\\n\\n**Note**:\\nComponents which require external image loaders also require additional esbuild configuration.\\nComponents which are dependent on global application state on lifecycle like the Nextjs `Link` component would also not work with this setup as each mdx file is built independently.\\nFor such cases, it is better to use component substitution.\\n\\n## Table of contents component\\n\\nInspired by [Docusaurus](https://docusaurus.io/docs/next/markdown-features/inline-toc) and Gatsby\'s [gatsby-remark-table-of-contents](https://www.gatsbyjs.com/plugins/gatsby-remark-table-of-contents/),\\nthe `toc` variable containing all the top level headings of the document is passed to the MDX file and can be styled accordingly.\\nTo make generating a table of contents (TOC) simple, you can use the existing `TOCInline` component.\\n\\nFor example, the TOC in this post was generated with the following code:\\n\\n```jsx\\n<TOCInline toc={props.toc} exclude=\\"Overview\\" toHeading={2} />\\n```\\n\\nYou can customise the headings that are displayed by configuring the `fromHeading` and `toHeading` props, or exclude particular headings\\nby passing a string or a string array to the `exclude` prop. By default, all headings that are of depth 3 or smaller are indented. This can be configured by changing the `indentDepth` property.\\nA `asDisclosure` prop can be used to render the TOC within an expandable disclosure element.\\n\\nHere\'s the full TOC rendered in a disclosure element.\\n\\n```jsx\\n<TOCInline toc={props.toc} asDisclosure />\\n```\\n\\n<TOCInline toc={props.toc} asDisclosure />\\n\\n## Layouts\\n\\nYou can map mdx blog content to layout components by configuring the frontmatter field. For example, this post is written with the new `PostSimple` layout!\\n\\n### Adding new templates\\n\\nlayout templates are stored in the `./layouts` folder. You can add your React components that you want to map to markdown content in this folder.\\nThe component file name must match that specified in the markdown frontmatter `layout` field.\\n\\nThe only required field is `children` which contains the rendered MDX content, though you would probably want to pass in the frontMatter contents and render it in the template.\\n\\nYou can configure the template to take in other fields - see `PostLayout` component for an example.\\n\\nHere\'s an example layout which you can further customise:\\n\\n```jsx\\nexport default function ExampleLayout({ frontMatter, children }) {\\n const { date, title } = frontMatter\\n\\n return (\\n <SectionContainer>\\n <div>{date}</div>\\n <h1>{title}</h1>\\n <div>{children}</div>\\n </SectionContainer>\\n )\\n}\\n```\\n\\n### Configuring a blog post frontmatter\\n\\nUse the `layout` frontmatter field to specify the template you want to map the markdown post to. Here\'s how the frontmatter of this post looks like:\\n\\n```\\n---\\ntitle: \'New features in v1\'\\ndate: \'2021-05-26 \'\\ntags: [\'next-js\', \'tailwind\', \'guide\']\\ndraft: false\\nsummary: \'Introducing the new layout features - you can map mdx blog content to layout components by configuring the frontmatter field\'\\nlayout: PostSimple\\n---\\n```\\n\\nYou can configure the default layout in the respective page section by modifying the `DEFAULT_LAYOUT` variable.\\nThe `DEFAULT_LAYOUT` for blog posts page is set to `PostLayout`.\\n\\n### Extend\\n\\n`layout` is mapped to wrapper which wraps the entire MDX content.\\n\\n```jsx\\nexport const MDXComponents = {\\n Image,\\n a: CustomLink,\\n pre: Pre,\\n wrapper: ({ components, layout, ...rest }) => {\\n const Layout = require(`../layouts/${layout}`).default\\n return <Layout {...rest} />\\n },\\n}\\n\\nexport const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {\\n const MDXLayout = useMemo(() => getMDXComponent(mdxSource), [mdxSource])\\n\\n return <MDXLayout layout={layout} components={MDXComponents} {...rest} />\\n}\\n```\\n\\nUse the `MDXLayoutRenderer` component on a page where you want to accept a layout name to map to the desired layout.\\nYou need to pass the layout name from the layout folder (it has to be an exact match).\\n\\n## Analytics\\n\\nThe template now supports [plausible](https://plausible.io/), [simple analytics](https://simpleanalytics.com/) and google analytics.\\nConfigure `siteMetadata.js` with the settings that correspond with the desired analytics provider.\\n\\n```js\\nanalytics: {\\n // supports plausible, simpleAnalytics or googleAnalytics\\n plausibleDataDomain: \'\', // e.g. tailwind-nextjs-starter-blog.vercel.app\\n simpleAnalytics: false, // true or false\\n googleAnalyticsId: \'\', // e.g. UA-000000-2 or G-XXXXXXX\\n },\\n```\\n\\nCustom events are also supported. You can import the `logEvent` function from `@components/analytics/[ANALYTICS-PROVIDER]` file and call it when\\ntriggering certain events of interest. _Note_: Additional configuration might be required depending on the analytics provider, please check their official\\ndocumentation for more information.\\n\\n## Blog comments system\\n\\nWe have also added support for [giscus](https://github.com/laymonage/giscus), [utterances](https://github.com/utterance/utterances) or disqus.\\nTo enable, simply configure `siteMetadata.js` comments property with the desired provider and settings as specified in the config file.\\n\\n```js\\ncomment: {\\n // Select a provider and use the environment variables associated to it\\n // https://vercel.com/docs/environment-variables\\n provider: \'giscus\', // supported providers: giscus, utterances, disqus\\n giscusConfig: {\\n // Visit the link below, and follow the steps in the \'configuration\' section\\n // https://giscus.app/\\n repo: process.env.NEXT_PUBLIC_GISCUS_REPO,\\n repositoryId: process.env.NEXT_PUBLIC_GISCUS_REPOSITORY_ID,\\n category: process.env.NEXT_PUBLIC_GISCUS_CATEGORY,\\n categoryId: process.env.NEXT_PUBLIC_GISCUS_CATEGORY_ID,\\n mapping: \'pathname\', // supported options: pathname, url, title\\n reactions: \'1\', // Emoji reactions: 1 = enable / 0 = disable\\n // Send discussion metadata periodically to the parent window: 1 = enable / 0 = disable\\n metadata: \'0\',\\n // theme example: light, dark, dark_dimmed, dark_high_contrast\\n // transparent_dark, preferred_color_scheme, custom\\n theme: \'light\',\\n // theme when dark mode\\n darkTheme: \'transparent_dark\',\\n // If the theme option above is set to \'custom`\\n // please provide a link below to your custom theme css file.\\n // example: https://giscus.app/themes/custom_example.css\\n themeURL: \'\',\\n },\\n utterancesConfig: {\\n // Visit the link below, and follow the steps in the \'configuration\' section\\n // https://utteranc.es/\\n repo: process.env.NEXT_PUBLIC_UTTERANCES_REPO,\\n issueTerm: \'\', // supported options: pathname, url, title\\n label: \'\', // label (optional): Comment \uD83D\uDCAC\\n // theme example: github-light, github-dark, preferred-color-scheme\\n // github-dark-orange, icy-dark, dark-blue, photon-dark, boxy-light\\n theme: \'\',\\n // theme when dark mode\\n darkTheme: \'\',\\n },\\n disqus: {\\n // https://help.disqus.com/en/articles/1717111-what-s-a-shortname\\n shortname: process.env.NEXT_PUBLIC_DISQUS_SHORTNAME,\\n },\\n },\\n```\\n\\n## Multiple authors\\n\\nInformation on authors is now split from `siteMetadata.js` and stored in its own `data/authors` folder as a markdown file. Minimally, you will need to have a `default.md` file with authorship information. You can create additional files as required and the file name will be used as the reference to the author.\\n\\nHere\'s how an author markdown file might look like:\\n\\n```md:default.md\\n---\\nname: Tails Azimuth\\navatar: /static/images/avatar.png\\noccupation: Professor of Atmospheric Science\\ncompany: Stanford University\\nemail: address@yoursite.com\\ntwitter: https://twitter.com/Twitter\\nlinkedin: https://www.linkedin.com\\ngithub: https://github.com\\n---\\n\\nA long description of yourself...\\n```\\n\\nYou can use this information in multiple places across the template. For example in the about section of the page, we grab the default author information with this line of code:\\n\\n```js\\nconst authorDetails = await getFileBySlug(\'authors\', [\'default\'])\\n```\\n\\nThis is rendered in the `AuthorLayout` template.\\n\\n### Multiple authors in blog post\\n\\nThe frontmatter of a blog post accepts an optional `authors` array field. If no field is specified, it is assumed that the default author is used. Simply pass in an array of authors to render multiple authors associated with a post.\\n\\nFor example, the following frontmatter will display the authors given by `data/authors/default.md` and `data/authors/sparrowhawk.md`\\n\\n```yaml\\ntitle: \'My first post\'\\ndate: \'2021-01-12\'\\ndraft: false\\nsummary: \'My first post\'\\nauthors: [\'default\', \'sparrowhawk\']\\n```\\n\\nA demo of a multiple authors post is shown in [Introducing Tailwind Nextjs Starter Blog post](/blog/introducing-tailwind-nextjs-starter-blog).\\n\\n## Copy button for code blocks\\n\\nHover over a code block and you will notice a GitHub-inspired copy button! You can modify `./components/Pre.js` to further customise it.\\nThe component is passed to `MDXComponents` and modifies all `<pre>` blocks.\\n\\n## Line highlighting and line numbers\\n\\nLine highlighting and line numbers are now supported out of the box thanks to the new [rehype-prism-plus plugin](https://github.com/timlrx/rehype-prism-plus)\\n\\nThe following javascript code block:\\n\\n````\\n```js {1, 3-4} showLineNumbers\\nvar num1, num2, sum\\nnum1 = prompt(\'Enter first number\')\\nnum2 = prompt(\'Enter second number\')\\nsum = parseInt(num1) + parseInt(num2) // \\"+\\" means \\"add\\"\\nalert(\'Sum = \' + sum) // \\"+\\" means combine into a string\\n```\\n````\\n\\nwill appear as:\\n\\n```js {1,3-4} showLineNumbers\\nvar num1, num2, sum\\nnum1 = prompt(\'Enter first number\')\\nnum2 = prompt(\'Enter second number\')\\nsum = parseInt(num1) + parseInt(num2) // \\"+\\" means \\"add\\"\\nalert(\'Sum = \' + sum) // \\"+\\" means combine into a string\\n```\\n\\nTo modify the styles, change the following class selectors in the `prism.css` file:\\n\\n```css\\n.code-highlight {\\n @apply float-left min-w-full;\\n}\\n\\n.code-line {\\n @apply -mx-4 block border-l-4 border-opacity-0 pl-4 pr-4;\\n}\\n\\n.code-line.inserted {\\n @apply bg-green-500 bg-opacity-20;\\n}\\n\\n.code-line.deleted {\\n @apply bg-red-500 bg-opacity-20;\\n}\\n\\n.highlight-line {\\n @apply -mx-4 border-l-4 border-primary-500 bg-gray-700 bg-opacity-50;\\n}\\n\\n.line-number::before {\\n @apply -ml-2 mr-4 inline-block w-4 text-right text-gray-400;\\n content: attr(line);\\n}\\n```\\n\\n## Newletter component (v1.1.3)\\n\\nIntroduced in v1.1.3, the newsletter component gives you an easy way to build an audience. It integrates with the following providers:\\n\\n- [Mailchimp](https://mailchimp.com/)\\n- [Buttondown](https://buttondown.email/)\\n- [Convertkit](https://convertkit.com/)\\n\\nTo use it, specify the provider which you are using in the config file and add the necessary environment variables to the `.env` file.\\nFor more information on the required variables, check out `.env.sample.`\\n\\nTwo components are exported, a default `NewsletterForm` and a `BlogNewsletterForm` component, which is also passed in as an MDX component\\nand can be used in a blog post:\\n\\n```jsx\\n<BlogNewsletterForm title=\\"Like what you are reading?\\" />\\n```\\n\\n<BlogNewsletterForm title=\\"Like what you are reading?\\" />\\n\\nThe component relies on nextjs\'s [API routes](https://nextjs.org/docs/api-routes/introduction) which requires a server-side instance of nextjs to be setup\\nand is not compatible with a 100% static site export. Users should either self-host or use a compatible platform like Vercel or Netlify which supports this functionality.\\n\\nA static site compatible alternative is to substitute the route in the newsletter component with a form API endpoint provider.\\n\\n## Bibliography and Citations (v1.2.1)\\n\\n`rehype-citation` plugin is added to the xdm processing pipeline in v1.2.1. This allows you to easily format citations and insert bibliography from an existing bibtex or CSL-json file.\\n\\nFor example, the following markdown code sample:\\n\\n```md\\nStandard citation [@Nash1950]\\nIn-text citations e.g. @Nash1951\\nMultiple citations [see @Nash1950; @Nash1951, page 50]\\n\\n**References:**\\n\\n[^ref]\\n```\\n\\nis rendered to the following:\\n\\nStandard citation [@Nash1950] \\nIn-text citations e.g. @Nash1951 \\nMultiple citations [see @Nash1950; @Nash1951, page 50]\\n\\n**References:**\\n\\n[^ref]\\n\\nA bibliography will be inserted at the end of the document, but this can be overwritten by specifying a `[^Ref]` tag at the intended location.\\nThe plugin uses APA citation formation, but also supports the following CSLs, \'apa\', \'vancouver\', \'harvard1\', \'chicago\', \'mla\', or a path to a user-specified CSL file.\\n\\nSee [rehype-citation readme](https://github.com/timlrx/rehype-citation) for more information on the configuration options.\\n\\n## Self-hosted font (v1.5.0)\\n\\nGoogle font has been replaced with self-hosted font from [Fontsource](https://fontsource.org/). This gives the following [advantages](https://fontsource.org/docs/introduction):\\n\\n> Self-hosting brings significant performance gains as loading fonts from hosted services, such as Google Fonts, lead to an extra (render blocking) network request. To provide perspective, for simple websites it has been seen to double visual load times.\\n>\\n> Fonts remain version locked. Google often pushes updates to their fonts without notice, which may interfere with your live production projects. Manage your fonts like any other NPM dependency.\\n>\\n> Commit to privacy. Google does track the usage of their fonts and for those who are extremely privacy concerned, self-hosting is an alternative.\\n\\nThis leads to a smaller font bundle and a 0.1s faster load time ([webpagetest comparison](https://www.webpagetest.org/video/compare.php?tests=220201_AiDcFH_f68a69b758454dd52d8e67493fdef7da,220201_BiDcMC_bf2d53f14483814ba61e794311dfa771)).\\n\\nTo change the default Inter font:\\n\\n1. Install the preferred [font](https://fontsource.org/fonts) - `npm install -save @fontsource/<font-name>`\\n2. Update the import at `pages/_app.js`- `import \'@fontsource/<font-name>.css\'`\\n3. Update the `fontfamily` property in the tailwind css config file\\n\\n## Upgrade guide\\n\\nThere are significant portions of the code that has been changed from v0 to v1 including support for layouts and a new mdx engine.\\n\\nThere\'s also no real reason to change if the previous one serves your needs and it might be easier to copy\\nthe component changes you are interested in to your existing blog rather than migrating everything over.\\n\\nNonetheless, 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.\\n\\nAnother alternative would be to pull the latest template version with the following code:\\n\\n```bash\\ngit remote add template git@github.com:timlrx/tailwind-nextjs-starter-blog.git\\ngit pull template v1 --allow-unrelated-histories\\nrm -rf node_modules\\n```\\n\\nYou can see an example of such a migration in this [commit](https://github.com/timlrx/timlrx.com/commit/bba1c185384fd6d5cdaac15abf802fdcff027286) for my personal blog.\\n\\nv1 also uses `feed.xml` rather than `index.xml`, to avoid some build issues with Vercel. If you are migrating you should add a redirect to `next.config.js` like so:\\n\\n```js\\nasync redirects() {\\n return [\\n {\\n source: \'/:path/index.xml\',\\n destination: \'/:path/feed.xml\',\\n permanent: true,\\n }\\n ]\\n}\\n```\\n","code":"var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),y=(a,n)=>{for(var s in n)c(a,s,{get:n[s],enumerable:!0})},i=(a,n,s,l)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let t of N(n))!g.call(a,t)&&t!==s&&c(a,t,{get:()=>n[t],enumerable:!(l=u(n,t))||l.enumerable});return a};var w=(a,n,s)=>(s=a!=null?m(k(a)):{},i(n||!a||!a.__esModule?c(s,\\"default\\",{value:a,enumerable:!0}):s,a)),b=a=>i(c({},\\"__esModule\\",{value:!0}),a);var r=f((j,o)=>{o.exports=_jsx_runtime});var x={};y(x,{default:()=>h,frontmatter:()=>v});var e=w(r()),v={title:\\"New features in v1\\",date:\\"2021-08-07T15:32:14Z\\",lastmod:\\"2021-02-01\\",tags:[\\"next-js\\",\\"tailwind\\",\\"guide\\"],draft:!1,summary:\\"An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more\\",layout:\\"PostSimple\\",bibliography:\\"references-data.bib\\"};function d(a){let n={a:\\"a\\",blockquote:\\"blockquote\\",br:\\"br\\",code:\\"code\\",div:\\"div\\",em:\\"em\\",h2:\\"h2\\",h3:\\"h3\\",i:\\"i\\",li:\\"li\\",ol:\\"ol\\",p:\\"p\\",path:\\"path\\",pre:\\"pre\\",section:\\"section\\",span:\\"span\\",strong:\\"strong\\",sup:\\"sup\\",svg:\\"svg\\",ul:\\"ul\\",...a.components},{BlogNewsletterForm:s,TOCInline:l}=n;return s||p(\\"BlogNewsletterForm\\",!0),l||p(\\"TOCInline\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"overview\\",children:[(0,e.jsx)(n.a,{href:\\"#overview\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Overview\\"]}),(0,e.jsx)(n.p,{children:\\"A post on the new features introduced in v1.0. New features:\\"}),(0,e.jsx)(l,{toc:a.toc,exclude:\\"Overview\\",toHeading:2}),(0,e.jsxs)(n.p,{children:[\\"First load JS decreased from 43kB to 39kB despite all the new features added! \\",(0,e.jsx)(n.sup,{children:(0,e.jsx)(n.a,{href:\\"#user-content-fn-1\\",\\"aria-describedby\\":\\"footnote-label\\",\\"data-footnote-ref\\":!0,id:\\"user-content-fnref-1\\",children:\\"1\\"})})]}),(0,e.jsxs)(n.p,{children:[\\"See \\",(0,e.jsx)(n.a,{href:\\"#upgrade-guide\\",children:\\"upgrade guide\\"}),\\" below if you are migrating from v0 version of the template.\\"]}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"theme-colors\\",children:[(0,e.jsx)(n.a,{href:\\"#theme-colors\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Theme colors\\"]}),(0,e.jsx)(n.p,{children:\\"You can easily modify the theme color by changing the primary attribute in the tailwind config file:\\"}),(0,e.jsx)(n.div,{className:\\"remark-code-title\\",children:\\"tailwind.config.js\\"}),(0,e.jsx)(n.pre,{className:\\"language-js\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-js\\",children:[(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"theme\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"colors\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"primary\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" colors\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token property-access\\",children:\\"teal\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"gray\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" colors\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token property-access\\",children:\\"neutral\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token operator spread\\",children:\\"...\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token operator spread\\",children:\\"...\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]})]})}),(0,e.jsx)(n.p,{children:\\"The primary color attribute should be assigned an object with keys from 50, 100, 200 ... 900 and the corresponding color code values.\\"}),(0,e.jsxs)(n.p,{children:[\\"Tailwind includes great default color palettes that can be used for theming your own website. Check out \\",(0,e.jsx)(n.a,{href:\\"https://tailwindcss.com/docs/customizing-colors\\",children:\\"customizing colors documentation page\\"}),\\" for the full range of options.\\"]}),(0,e.jsxs)(n.p,{children:[\\"Migrating from v1? You can revert to the previous theme by setting \\",(0,e.jsx)(n.code,{children:\\"primary\\"}),\\" to \\",(0,e.jsx)(n.code,{children:\\"colors.sky\\"}),\\" (Tailwind 2.2.2 and above, otherwise \\",(0,e.jsx)(n.code,{children:\\"colors.lightBlue\\"}),\\") and changing gray to \\",(0,e.jsx)(n.code,{children:\\"colors.gray\\"}),\\".\\"]}),(0,e.jsxs)(n.p,{children:[\\"From v1.1.2+, you can also customize the style of your code blocks easily by modifying the \\",(0,e.jsx)(n.code,{children:\\"css/prism.css\\"}),\\" stylesheet. Token classnames are compatible with prismjs so you can copy and adapt token styles from a prismjs stylesheet e.g. \\",(0,e.jsx)(n.a,{href:\\"https://github.com/PrismJS/prism-themes\\",children:\\"prism themes\\"}),\\".\\"]}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"xdm-mdx-compiler\\",children:[(0,e.jsx)(n.a,{href:\\"#xdm-mdx-compiler\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Xdm MDX compiler\\"]}),(0,e.jsxs)(n.p,{children:[\\"We switched the MDX bundler from \\",(0,e.jsx)(n.a,{href:\\"https://github.com/hashicorp/next-mdx-remote\\",children:\\"next-mdx-remote\\"}),\\" to \\",(0,e.jsx)(n.a,{href:\\"https://github.com/kentcdodds/mdx-bundler\\",children:\\"mdx-bundler\\"}),\\". This uses \\",(0,e.jsx)(n.a,{href:\\"https://github.com/wooorm/xdm\\",children:\\"xdm\\"}),\\" under the hood, the latest micromark 3 and remark, rehype libraries.\\"]}),(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\\"Warning:\\"}),\\" If you were using custom remark or rehype libraries, please upgrade to micromark 3 compatible ones. If you are upgrading, please delete \\",(0,e.jsx)(n.code,{children:\\"node_modules\\"}),\\" and \\",(0,e.jsx)(n.code,{children:\\"package-lock.json\\"}),\\" to avoid having past dependencies related issues.\\"]}),(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.a,{href:\\"https://github.com/wooorm/xdm\\",children:\\"xdm\\"}),\\" contains multiple improvements over \\",(0,e.jsx)(n.a,{href:\\"https://github.com/mdx-js/mdx\\",children:\\"@mdx-js/mdx\\"}),\\", the compiler used internally by next-mdx-remote, but there might be some breaking behaviour changes. Please check your markdown output to verify.\\"]}),(0,e.jsx)(n.p,{children:\\"Some new possibilities include loading components directly in the mdx file using the import syntax and including js code which could be compiled and bundled at the build step.\\"}),(0,e.jsx)(n.p,{children:\\"For example, the following jsx snippet can be used directly in an MDX file to render the page title component:\\"}),(0,e.jsx)(n.pre,{className:\\"language-jsx\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-jsx\\",children:[(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// Or import PageTitle from \'./components/PageTitle.js\' if you are using js\\"}),`\\n`]}),(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:(0,e.jsx)(n.span,{className:\\"token maybe-class-name\\",children:\\"PageTitle\\"})}),\\" \\",(0,e.jsx)(n.span,{className:\\"token keyword module\\",children:\\"from\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'./components/PageTitle.tsx\'\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(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 class-name\\",children:\\"PageTitle\\"})]}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\">\\"})]}),(0,e.jsx)(n.span,{className:\\"token plain-text\\",children:\\" Using JSX components in MDX \\"}),(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 class-name\\",children:\\"PageTitle\\"})]}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\">\\"})]}),`\\n`]})]})}),(0,e.jsxs)(n.p,{children:[\\"The default configuration resolves all components relative to the \\",(0,e.jsx)(n.code,{children:\\"components\\"}),\\" directory.\\"]}),(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:\\"Note\\"}),\\": Components which require external image loaders also require additional esbuild configuration. Components which are dependent on global application state on lifecycle like the Nextjs \\",(0,e.jsx)(n.code,{children:\\"Link\\"}),\\" component would also not work with this setup as each mdx file is built independently. For such cases, it is better to use component substitution.\\"]}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"table-of-contents-component\\",children:[(0,e.jsx)(n.a,{href:\\"#table-of-contents-component\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Table of contents component\\"]}),(0,e.jsxs)(n.p,{children:[\\"Inspired by \\",(0,e.jsx)(n.a,{href:\\"https://docusaurus.io/docs/next/markdown-features/inline-toc\\",children:\\"Docusaurus\\"}),\\" and Gatsby\'s \\",(0,e.jsx)(n.a,{href:\\"https://www.gatsbyjs.com/plugins/gatsby-remark-table-of-contents/\\",children:\\"gatsby-remark-table-of-contents\\"}),\\", the \\",(0,e.jsx)(n.code,{children:\\"toc\\"}),\\" variable containing all the top level headings of the document is passed to the MDX file and can be styled accordingly. To make generating a table of contents (TOC) simple, you can use the existing \\",(0,e.jsx)(n.code,{children:\\"TOCInline\\"}),\\" component.\\"]}),(0,e.jsx)(n.p,{children:\\"For example, the TOC in this post was generated with the following code:\\"}),(0,e.jsx)(n.pre,{className:\\"language-jsx\\",children:(0,e.jsx)(n.code,{className:\\"code-highlight language-jsx\\",children:(0,e.jsxs)(n.span,{className:\\"code-line\\",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 class-name\\",children:\\"TOCInline\\"})]}),\\" \\",(0,e.jsx)(n.span,{className:\\"token attr-name\\",children:\\"toc\\"}),(0,e.jsxs)(n.span,{className:\\"token language-javascript script\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation script-punctuation\\",children:\\"=\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"props\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token property-access\\",children:\\"toc\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"})]}),\\" \\",(0,e.jsx)(n.span,{className:\\"token attr-name\\",children:\\"exclude\\"}),(0,e.jsxs)(n.span,{className:\\"token attr-value\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation attr-equals\\",children:\\"=\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\'\\"\'}),\\"Overview\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\'\\"\'})]}),\\" \\",(0,e.jsx)(n.span,{className:\\"token attr-name\\",children:\\"toHeading\\"}),(0,e.jsxs)(n.span,{className:\\"token language-javascript script\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation script-punctuation\\",children:\\"=\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,e.jsx)(n.span,{className:\\"token number\\",children:\\"2\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"})]}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"/>\\"})]}),`\\n`]})})}),(0,e.jsxs)(n.p,{children:[\\"You can customise the headings that are displayed by configuring the \\",(0,e.jsx)(n.code,{children:\\"fromHeading\\"}),\\" and \\",(0,e.jsx)(n.code,{children:\\"toHeading\\"}),\\" props, or exclude particular headings by passing a string or a string array to the \\",(0,e.jsx)(n.code,{children:\\"exclude\\"}),\\" prop. By default, all headings that are of depth 3 or smaller are indented. This can be configured by changing the \\",(0,e.jsx)(n.code,{children:\\"indentDepth\\"}),\\" property. A \\",(0,e.jsx)(n.code,{children:\\"asDisclosure\\"}),\\" prop can be used to render the TOC within an expandable disclosure element.\\"]}),(0,e.jsx)(n.p,{children:\\"Here\'s the full TOC rendered in a disclosure element.\\"}),(0,e.jsx)(n.pre,{className:\\"language-jsx\\",children:(0,e.jsx)(n.code,{className:\\"code-highlight language-jsx\\",children:(0,e.jsxs)(n.span,{className:\\"code-line\\",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 class-name\\",children:\\"TOCInline\\"})]}),\\" \\",(0,e.jsx)(n.span,{className:\\"token attr-name\\",children:\\"toc\\"}),(0,e.jsxs)(n.span,{className:\\"token language-javascript script\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation script-punctuation\\",children:\\"=\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"props\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token property-access\\",children:\\"toc\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"})]}),\\" \\",(0,e.jsx)(n.span,{className:\\"token attr-name\\",children:\\"asDisclosure\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"/>\\"})]}),`\\n`]})})}),(0,e.jsx)(l,{toc:a.toc,asDisclosure:!0}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"layouts\\",children:[(0,e.jsx)(n.a,{href:\\"#layouts\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Layouts\\"]}),(0,e.jsxs)(n.p,{children:[\\"You can map mdx blog content to layout components by configuring the frontmatter field. For example, this post is written with the new \\",(0,e.jsx)(n.code,{children:\\"PostSimple\\"}),\\" layout!\\"]}),(0,e.jsxs)(n.h3,{className:\\"content-header\\",id:\\"adding-new-templates\\",children:[(0,e.jsx)(n.a,{href:\\"#adding-new-templates\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Adding new templates\\"]}),(0,e.jsxs)(n.p,{children:[\\"layout templates are stored in the \\",(0,e.jsx)(n.code,{children:\\"./layouts\\"}),\\" folder. You can add your React components that you want to map to markdown content in this folder. The component file name must match that specified in the markdown frontmatter \\",(0,e.jsx)(n.code,{children:\\"layout\\"}),\\" field.\\"]}),(0,e.jsxs)(n.p,{children:[\\"The only required field is \\",(0,e.jsx)(n.code,{children:\\"children\\"}),\\" which contains the rendered MDX content, though you would probably want to pass in the frontMatter contents and render it in the template.\\"]}),(0,e.jsxs)(n.p,{children:[\\"You can configure the template to take in other fields - see \\",(0,e.jsx)(n.code,{children:\\"PostLayout\\"}),\\" component for an example.\\"]}),(0,e.jsx)(n.p,{children:\\"Here\'s an example layout which you can further customise:\\"}),(0,e.jsx)(n.pre,{className:\\"language-jsx\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-jsx\\",children:[(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token keyword module\\",children:\\"export\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token keyword module\\",children:\\"default\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token keyword\\",children:\\"function\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token function\\",children:(0,e.jsx)(n.span,{className:\\"token maybe-class-name\\",children:\\"ExampleLayout\\"})}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsxs)(n.span,{className:\\"token parameter\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\" frontMatter\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" 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:\\"{\\"}),`\\n`]}),(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:\\"{\\"}),\\" date\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" title \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"=\\"}),` frontMatter\\n`]}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:`\\n`}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token keyword control-flow\\",children:\\"return\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",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 class-name\\",children:\\"SectionContainer\\"})]}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\">\\"})]}),(0,e.jsx)(n.span,{className:\\"token plain-text\\",children:`\\n`})]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",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:\\"{\\"}),\\"date\\",(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:\\"</\\"}),\\"div\\"]}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\">\\"})]}),(0,e.jsx)(n.span,{className:\\"token plain-text\\",children:`\\n`})]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",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 punctuation\\",children:\\"{\\"}),\\"title\\",(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:\\"</\\"}),\\"h1\\"]}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\">\\"})]}),(0,e.jsx)(n.span,{className:\\"token plain-text\\",children:`\\n`})]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",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:\\"{\\"}),\\"children\\",(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:\\"</\\"}),\\"div\\"]}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\">\\"})]}),(0,e.jsx)(n.span,{className:\\"token plain-text\\",children:`\\n`})]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",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 class-name\\",children:\\"SectionContainer\\"})]}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\">\\"})]}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]})]})}),(0,e.jsxs)(n.h3,{className:\\"content-header\\",id:\\"configuring-a-blog-post-frontmatter\\",children:[(0,e.jsx)(n.a,{href:\\"#configuring-a-blog-post-frontmatter\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Configuring a blog post frontmatter\\"]}),(0,e.jsxs)(n.p,{children:[\\"Use the \\",(0,e.jsx)(n.code,{children:\\"layout\\"}),\\" frontmatter field to specify the template you want to map the markdown post to. Here\'s how the frontmatter of this post looks like:\\"]}),(0,e.jsx)(n.pre,{className:\\"language-js\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-js\\",children:[(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"-\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"title\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'New features in v1\'\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"date\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'2021-05-26 \'\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"tags\\"}),(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 string\\",children:\\"\'next-js\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'tailwind\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'guide\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"]\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"draft\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token boolean\\",children:\\"false\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"summary\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'Introducing the new layout features - you can map mdx blog content to layout components by configuring the frontmatter field\'\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"layout\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token maybe-class-name\\",children:\\"PostSimple\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"--\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"-\\"}),`\\n`]})]})}),(0,e.jsxs)(n.p,{children:[\\"You can configure the default layout in the respective page section by modifying the \\",(0,e.jsx)(n.code,{children:\\"DEFAULT_LAYOUT\\"}),\\" variable. The \\",(0,e.jsx)(n.code,{children:\\"DEFAULT_LAYOUT\\"}),\\" for blog posts page is set to \\",(0,e.jsx)(n.code,{children:\\"PostLayout\\"}),\\".\\"]}),(0,e.jsxs)(n.h3,{className:\\"content-header\\",id:\\"extend\\",children:[(0,e.jsx)(n.a,{href:\\"#extend\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Extend\\"]}),(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\\"layout\\"}),\\" is mapped to wrapper which wraps the entire MDX content.\\"]}),(0,e.jsx)(n.pre,{className:\\"language-jsx\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-jsx\\",children:[(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token keyword module\\",children:\\"export\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token keyword\\",children:\\"const\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token maybe-class-name\\",children:\\"MDXComponents\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"=\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token maybe-class-name\\",children:\\"Image\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"a\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token maybe-class-name\\",children:\\"CustomLink\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"pre\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token maybe-class-name\\",children:\\"Pre\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token function function-variable\\",children:\\"wrapper\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsxs)(n.span,{className:\\"token parameter\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\" components\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" layout\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token operator spread\\",children:\\"...\\"}),\\"rest \\",(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 operator arrow\\",children:\\"=>\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(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 maybe-class-name\\",children:\\"Layout\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"=\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"require\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsxs)(n.span,{className:\\"token template-string\\",children:[(0,e.jsx)(n.span,{className:\\"token string template-punctuation\\",children:\\"`\\"}),(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"../layouts/\\"}),(0,e.jsxs)(n.span,{className:\\"token interpolation\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation interpolation-punctuation\\",children:\\"${\\"}),\\"layout\\",(0,e.jsx)(n.span,{className:\\"token punctuation interpolation-punctuation\\",children:\\"}\\"})]}),(0,e.jsx)(n.span,{className:\\"token string template-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 keyword module\\",children:\\"default\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token keyword control-flow\\",children:\\"return\\"}),\\" \\",(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 class-name\\",children:\\"Layout\\"})]}),\\" \\",(0,e.jsxs)(n.span,{className:\\"token spread\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,e.jsx)(n.span,{className:\\"token operator spread\\",children:\\"...\\"}),\\"rest\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"})]}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"/>\\"})]}),`\\n`]}),(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:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:`\\n`}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token keyword module\\",children:\\"export\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token keyword\\",children:\\"const\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token function function-variable\\",children:(0,e.jsx)(n.span,{className:\\"token maybe-class-name\\",children:\\"MDXLayoutRenderer\\"})}),\\" \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"=\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsxs)(n.span,{className:\\"token parameter\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\" layout\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" mdxSource\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token operator spread\\",children:\\"...\\"}),\\"rest \\",(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 operator arrow\\",children:\\"=>\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(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 maybe-class-name\\",children:\\"MDXLayout\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"=\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"useMemo\\"}),(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 operator arrow\\",children:\\"=>\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"getMDXComponent\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"mdxSource\\",(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:\\"[\\"}),\\"mdxSource\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"]\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:`\\n`}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token keyword control-flow\\",children:\\"return\\"}),\\" \\",(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 class-name\\",children:\\"MDXLayout\\"})]}),\\" \\",(0,e.jsx)(n.span,{className:\\"token attr-name\\",children:\\"layout\\"}),(0,e.jsxs)(n.span,{className:\\"token language-javascript script\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation script-punctuation\\",children:\\"=\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\"layout\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"})]}),\\" \\",(0,e.jsx)(n.span,{className:\\"token attr-name\\",children:\\"components\\"}),(0,e.jsxs)(n.span,{className:\\"token language-javascript script\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation script-punctuation\\",children:\\"=\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,e.jsx)(n.span,{className:\\"token maybe-class-name\\",children:\\"MDXComponents\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"})]}),\\" \\",(0,e.jsxs)(n.span,{className:\\"token spread\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),(0,e.jsx)(n.span,{className:\\"token operator spread\\",children:\\"...\\"}),\\"rest\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"})]}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"/>\\"})]}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]})]})}),(0,e.jsxs)(n.p,{children:[\\"Use the \\",(0,e.jsx)(n.code,{children:\\"MDXLayoutRenderer\\"}),\\" component on a page where you want to accept a layout name to map to the desired layout. You need to pass the layout name from the layout folder (it has to be an exact match).\\"]}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"analytics\\",children:[(0,e.jsx)(n.a,{href:\\"#analytics\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Analytics\\"]}),(0,e.jsxs)(n.p,{children:[\\"The template now supports \\",(0,e.jsx)(n.a,{href:\\"https://plausible.io/\\",children:\\"plausible\\"}),\\", \\",(0,e.jsx)(n.a,{href:\\"https://simpleanalytics.com/\\",children:\\"simple analytics\\"}),\\" and google analytics. Configure \\",(0,e.jsx)(n.code,{children:\\"siteMetadata.js\\"}),\\" with the settings that correspond with the desired analytics provider.\\"]}),(0,e.jsx)(n.pre,{className:\\"language-js\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-js\\",children:[(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"analytics\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// supports plausible, simpleAnalytics or googleAnalytics\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"plausibleDataDomain\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// e.g. tailwind-nextjs-starter-blog.vercel.app\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"simpleAnalytics\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token boolean\\",children:\\"false\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// true or false\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"googleAnalyticsId\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// e.g. UA-000000-2 or G-XXXXXXX\\"}),`\\n`]}),(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:\\",\\"}),`\\n`]})]})}),(0,e.jsxs)(n.p,{children:[\\"Custom events are also supported. You can import the \\",(0,e.jsx)(n.code,{children:\\"logEvent\\"}),\\" function from \\",(0,e.jsx)(n.code,{children:\\"@components/analytics/[ANALYTICS-PROVIDER]\\"}),\\" file and call it when triggering certain events of interest. \\",(0,e.jsx)(n.em,{children:\\"Note\\"}),\\": Additional configuration might be required depending on the analytics provider, please check their official documentation for more information.\\"]}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"blog-comments-system\\",children:[(0,e.jsx)(n.a,{href:\\"#blog-comments-system\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Blog comments system\\"]}),(0,e.jsxs)(n.p,{children:[\\"We have also added support for \\",(0,e.jsx)(n.a,{href:\\"https://github.com/laymonage/giscus\\",children:\\"giscus\\"}),\\", \\",(0,e.jsx)(n.a,{href:\\"https://github.com/utterance/utterances\\",children:\\"utterances\\"}),\\" or disqus. To enable, simply configure \\",(0,e.jsx)(n.code,{children:\\"siteMetadata.js\\"}),\\" comments property with the desired provider and settings as specified in the config file.\\"]}),(0,e.jsx)(n.pre,{className:\\"language-js\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-js\\",children:[(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"comment\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// Select a provider and use the environment variables associated to it\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// https://vercel.com/docs/environment-variables\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"provider\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'giscus\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// supported providers: giscus, utterances, disqus\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"giscusConfig\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// Visit the link below, and follow the steps in the \'configuration\' section\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// https://giscus.app/\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"repo\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" process\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token property-access\\",children:\\"env\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token constant\\",children:\\"NEXT_PUBLIC_GISCUS_REPO\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"repositoryId\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" process\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token property-access\\",children:\\"env\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token constant\\",children:\\"NEXT_PUBLIC_GISCUS_REPOSITORY_ID\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"category\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" process\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token property-access\\",children:\\"env\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token constant\\",children:\\"NEXT_PUBLIC_GISCUS_CATEGORY\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"categoryId\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" process\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token property-access\\",children:\\"env\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token constant\\",children:\\"NEXT_PUBLIC_GISCUS_CATEGORY_ID\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"mapping\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'pathname\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// supported options: pathname, url, title\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"reactions\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'1\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// Emoji reactions: 1 = enable / 0 = disable\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// Send discussion metadata periodically to the parent window: 1 = enable / 0 = disable\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"metadata\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'0\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// theme example: light, dark, dark_dimmed, dark_high_contrast\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// transparent_dark, preferred_color_scheme, custom\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"theme\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'light\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// theme when dark mode\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"darkTheme\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'transparent_dark\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// If the theme option above is set to \'custom`\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// please provide a link below to your custom theme css file.\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// example: https://giscus.app/themes/custom_example.css\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"themeURL\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(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:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"utterancesConfig\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// Visit the link below, and follow the steps in the \'configuration\' section\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// https://utteranc.es/\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"repo\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" process\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token property-access\\",children:\\"env\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token constant\\",children:\\"NEXT_PUBLIC_UTTERANCES_REPO\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"issueTerm\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// supported options: pathname, url, title\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"label\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// label (optional): Comment \\\\u{1F4AC}\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// theme example: github-light, github-dark, preferred-color-scheme\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// github-dark-orange, icy-dark, dark-blue, photon-dark, boxy-light\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"theme\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// theme when dark mode\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"darkTheme\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(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:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"disqus\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// https://help.disqus.com/en/articles/1717111-what-s-a-shortname\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"shortname\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" process\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token property-access\\",children:\\"env\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token constant\\",children:\\"NEXT_PUBLIC_DISQUS_SHORTNAME\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(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:\\",\\"}),`\\n`]}),(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:\\",\\"}),`\\n`]})]})}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"multiple-authors\\",children:[(0,e.jsx)(n.a,{href:\\"#multiple-authors\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Multiple authors\\"]}),(0,e.jsxs)(n.p,{children:[\\"Information on authors is now split from \\",(0,e.jsx)(n.code,{children:\\"siteMetadata.js\\"}),\\" and stored in its own \\",(0,e.jsx)(n.code,{children:\\"data/authors\\"}),\\" folder as a markdown file. Minimally, you will need to have a \\",(0,e.jsx)(n.code,{children:\\"default.md\\"}),\\" file with authorship information. You can create additional files as required and the file name will be used as the reference to the author.\\"]}),(0,e.jsx)(n.p,{children:\\"Here\'s how an author markdown file might look like:\\"}),(0,e.jsx)(n.div,{className:\\"remark-code-title\\",children:\\"default.md\\"}),(0,e.jsx)(n.pre,{className:\\"language-md\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-md\\",children:[(0,e.jsx)(n.span,{className:\\"code-line\\",children:(0,e.jsxs)(n.span,{className:\\"token front-matter-block\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"---\\"}),`\\n`]})}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:(0,e.jsx)(n.span,{className:\\"token front-matter-block\\",children:(0,e.jsxs)(n.span,{className:\\"token language-yaml front-matter yaml\\",children:[(0,e.jsx)(n.span,{className:\\"token atrule key\\",children:\\"name\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\":\\"}),` Tails Azimuth\\n`]})})}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:(0,e.jsx)(n.span,{className:\\"token front-matter-block\\",children:(0,e.jsxs)(n.span,{className:\\"token language-yaml front-matter yaml\\",children:[(0,e.jsx)(n.span,{className:\\"token atrule key\\",children:\\"avatar\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\":\\"}),` /static/images/avatar.png\\n`]})})}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:(0,e.jsx)(n.span,{className:\\"token front-matter-block\\",children:(0,e.jsxs)(n.span,{className:\\"token language-yaml front-matter yaml\\",children:[(0,e.jsx)(n.span,{className:\\"token atrule key\\",children:\\"occupation\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\":\\"}),` Professor of Atmospheric Science\\n`]})})}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:(0,e.jsx)(n.span,{className:\\"token front-matter-block\\",children:(0,e.jsxs)(n.span,{className:\\"token language-yaml front-matter yaml\\",children:[(0,e.jsx)(n.span,{className:\\"token atrule key\\",children:\\"company\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\":\\"}),` Stanford University\\n`]})})}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:(0,e.jsx)(n.span,{className:\\"token front-matter-block\\",children:(0,e.jsxs)(n.span,{className:\\"token language-yaml front-matter yaml\\",children:[(0,e.jsx)(n.span,{className:\\"token atrule key\\",children:\\"email\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\":\\"}),` address@yoursite.com\\n`]})})}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:(0,e.jsx)(n.span,{className:\\"token front-matter-block\\",children:(0,e.jsxs)(n.span,{className:\\"token language-yaml front-matter yaml\\",children:[(0,e.jsx)(n.span,{className:\\"token atrule key\\",children:\\"twitter\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\":\\"}),\\" https\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\":\\"}),`//twitter.com/Twitter\\n`]})})}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:(0,e.jsx)(n.span,{className:\\"token front-matter-block\\",children:(0,e.jsxs)(n.span,{className:\\"token language-yaml front-matter yaml\\",children:[(0,e.jsx)(n.span,{className:\\"token atrule key\\",children:\\"linkedin\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\":\\"}),\\" https\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\":\\"}),`//www.linkedin.com\\n`]})})}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:(0,e.jsxs)(n.span,{className:\\"token front-matter-block\\",children:[(0,e.jsxs)(n.span,{className:\\"token language-yaml front-matter yaml\\",children:[(0,e.jsx)(n.span,{className:\\"token atrule key\\",children:\\"github\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\":\\"}),\\" https\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\":\\"}),\\"//github.com\\"]}),`\\n`]})}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token front-matter-block\\",children:(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"---\\"})}),`\\n`]}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:`\\n`}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:`A long description of yourself...\\n`})]})}),(0,e.jsx)(n.p,{children:\\"You can use this information in multiple places across the template. For example in the about section of the page, we grab the default author information with this line of code:\\"}),(0,e.jsx)(n.pre,{className:\\"language-js\\",children:(0,e.jsx)(n.code,{className:\\"code-highlight language-js\\",children:(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token keyword\\",children:\\"const\\"}),\\" authorDetails \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"=\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token keyword control-flow\\",children:\\"await\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"getFileBySlug\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'authors\'\\"}),(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 string\\",children:\\"\'default\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"]\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]})})}),(0,e.jsxs)(n.p,{children:[\\"This is rendered in the \\",(0,e.jsx)(n.code,{children:\\"AuthorLayout\\"}),\\" template.\\"]}),(0,e.jsxs)(n.h3,{className:\\"content-header\\",id:\\"multiple-authors-in-blog-post\\",children:[(0,e.jsx)(n.a,{href:\\"#multiple-authors-in-blog-post\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Multiple authors in blog post\\"]}),(0,e.jsxs)(n.p,{children:[\\"The frontmatter of a blog post accepts an optional \\",(0,e.jsx)(n.code,{children:\\"authors\\"}),\\" array field. If no field is specified, it is assumed that the default author is used. Simply pass in an array of authors to render multiple authors associated with a post.\\"]}),(0,e.jsxs)(n.p,{children:[\\"For example, the following frontmatter will display the authors given by \\",(0,e.jsx)(n.code,{children:\\"data/authors/default.md\\"}),\\" and \\",(0,e.jsx)(n.code,{children:\\"data/authors/sparrowhawk.md\\"})]}),(0,e.jsx)(n.pre,{className:\\"language-yaml\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-yaml\\",children:[(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token atrule key\\",children:\\"title\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'My first post\'\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token atrule key\\",children:\\"date\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'2021-01-12\'\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token atrule key\\",children:\\"draft\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token boolean important\\",children:\\"false\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token atrule key\\",children:\\"summary\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'My first post\'\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token atrule key\\",children:\\"authors\\"}),(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 string\\",children:\\"\'default\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'sparrowhawk\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"]\\"}),`\\n`]})]})}),(0,e.jsxs)(n.p,{children:[\\"A demo of a multiple authors post is shown in \\",(0,e.jsx)(n.a,{href:\\"/blog/introducing-tailwind-nextjs-starter-blog\\",children:\\"Introducing Tailwind Nextjs Starter Blog post\\"}),\\".\\"]}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"copy-button-for-code-blocks\\",children:[(0,e.jsx)(n.a,{href:\\"#copy-button-for-code-blocks\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Copy button for code blocks\\"]}),(0,e.jsxs)(n.p,{children:[\\"Hover over a code block and you will notice a GitHub-inspired copy button! You can modify \\",(0,e.jsx)(n.code,{children:\\"./components/Pre.js\\"}),\\" to further customise it. The component is passed to \\",(0,e.jsx)(n.code,{children:\\"MDXComponents\\"}),\\" and modifies all \\",(0,e.jsx)(n.code,{children:\\"<pre>\\"}),\\" blocks.\\"]}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"line-highlighting-and-line-numbers\\",children:[(0,e.jsx)(n.a,{href:\\"#line-highlighting-and-line-numbers\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Line highlighting and line numbers\\"]}),(0,e.jsxs)(n.p,{children:[\\"Line highlighting and line numbers are now supported out of the box thanks to the new \\",(0,e.jsx)(n.a,{href:\\"https://github.com/timlrx/rehype-prism-plus\\",children:\\"rehype-prism-plus plugin\\"})]}),(0,e.jsx)(n.p,{children:\\"The following javascript code block:\\"}),(0,e.jsx)(n.pre,{className:\\"language-js\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-js\\",children:[(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsxs)(n.span,{className:\\"token template-string\\",children:[(0,e.jsx)(n.span,{className:\\"token string template-punctuation\\",children:\\"`\\"}),(0,e.jsx)(n.span,{className:\\"token string template-punctuation\\",children:\\"`\\"})]}),(0,e.jsxs)(n.span,{className:\\"token template-string\\",children:[(0,e.jsx)(n.span,{className:\\"token string template-punctuation\\",children:\\"`\\"}),(0,e.jsx)(n.span,{className:\\"token string\\",children:`js {1, 3-4} showLineNumbers\\n`})]})]}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:(0,e.jsx)(n.span,{className:\\"token template-string\\",children:(0,e.jsx)(n.span,{className:\\"token string\\",children:`var num1, num2, sum\\n`})})}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:(0,e.jsx)(n.span,{className:\\"token template-string\\",children:(0,e.jsx)(n.span,{className:\\"token string\\",children:`num1 = prompt(\'Enter first number\')\\n`})})}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:(0,e.jsx)(n.span,{className:\\"token template-string\\",children:(0,e.jsx)(n.span,{className:\\"token string\\",children:`num2 = prompt(\'Enter second number\')\\n`})})}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:(0,e.jsx)(n.span,{className:\\"token template-string\\",children:(0,e.jsx)(n.span,{className:\\"token string\\",children:`sum = parseInt(num1) + parseInt(num2) // \\"+\\" means \\"add\\"\\n`})})}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:(0,e.jsx)(n.span,{className:\\"token template-string\\",children:(0,e.jsx)(n.span,{className:\\"token string\\",children:`alert(\'Sum = \' + sum) // \\"+\\" means combine into a string\\n`})})}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsxs)(n.span,{className:\\"token template-string\\",children:[(0,e.jsx)(n.span,{className:\\"token string\\"}),(0,e.jsx)(n.span,{className:\\"token string template-punctuation\\",children:\\"`\\"})]}),(0,e.jsxs)(n.span,{className:\\"token template-string\\",children:[(0,e.jsx)(n.span,{className:\\"token string template-punctuation\\",children:\\"`\\"}),(0,e.jsx)(n.span,{className:\\"token string template-punctuation\\",children:\\"`\\"})]}),`\\n`]})]})}),(0,e.jsx)(n.p,{children:\\"will appear as:\\"}),(0,e.jsx)(n.pre,{className:\\"language-js\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-js\\",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:\\"var\\"}),\\" num1\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" num2\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),` sum\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line line-number\\",line:\\"2\\",children:[\\"num1 \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"=\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"prompt\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'Enter first number\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line line-number highlight-line\\",line:\\"3\\",children:[\\"num2 \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"=\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"prompt\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'Enter second number\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line line-number highlight-line\\",line:\\"4\\",children:[\\"sum \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"=\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"parseInt\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"num1\\",(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 function\\",children:\\"parseInt\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"num2\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\")\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\'// \\"+\\" means \\"add\\"\'}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line line-number\\",line:\\"5\\",children:[(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"alert\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'Sum = \'\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"+\\"}),\\" sum\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\")\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\'// \\"+\\" means combine into a string\'}),`\\n`]})]})}),(0,e.jsxs)(n.p,{children:[\\"To modify the styles, change the following class selectors in the \\",(0,e.jsx)(n.code,{children:\\"prism.css\\"}),\\" file:\\"]}),(0,e.jsx)(n.pre,{className:\\"language-css\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-css\\",children:[(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token selector\\",children:(0,e.jsx)(n.span,{className:\\"token class\\",children:\\".code-highlight\\"})}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsxs)(n.span,{className:\\"token atrule\\",children:[(0,e.jsx)(n.span,{className:\\"token rule\\",children:\\"@apply\\"}),\\" float-left min-w-full\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\";\\"})]}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:`\\n`}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token selector\\",children:(0,e.jsx)(n.span,{className:\\"token class\\",children:\\".code-line\\"})}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsxs)(n.span,{className:\\"token atrule\\",children:[(0,e.jsx)(n.span,{className:\\"token rule\\",children:\\"@apply\\"}),\\" -mx-4 block border-l-4 border-opacity-0 pl-4 pr-4\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\";\\"})]}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:`\\n`}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsxs)(n.span,{className:\\"token selector\\",children:[(0,e.jsx)(n.span,{className:\\"token class\\",children:\\".code-line\\"}),(0,e.jsx)(n.span,{className:\\"token class\\",children:\\".inserted\\"})]}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsxs)(n.span,{className:\\"token atrule\\",children:[(0,e.jsx)(n.span,{className:\\"token rule\\",children:\\"@apply\\"}),\\" bg-green-500 bg-opacity-20\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\";\\"})]}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:`\\n`}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsxs)(n.span,{className:\\"token selector\\",children:[(0,e.jsx)(n.span,{className:\\"token class\\",children:\\".code-line\\"}),(0,e.jsx)(n.span,{className:\\"token class\\",children:\\".deleted\\"})]}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsxs)(n.span,{className:\\"token atrule\\",children:[(0,e.jsx)(n.span,{className:\\"token rule\\",children:\\"@apply\\"}),\\" bg-red-500 bg-opacity-20\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\";\\"})]}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:`\\n`}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token selector\\",children:(0,e.jsx)(n.span,{className:\\"token class\\",children:\\".highlight-line\\"})}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsxs)(n.span,{className:\\"token atrule\\",children:[(0,e.jsx)(n.span,{className:\\"token rule\\",children:\\"@apply\\"}),\\" -mx-4 border-l-4 border-primary-500 bg-gray-700 bg-opacity-50\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\";\\"})]}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:`\\n`}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsxs)(n.span,{className:\\"token selector\\",children:[(0,e.jsx)(n.span,{className:\\"token class\\",children:\\".line-number\\"}),(0,e.jsx)(n.span,{className:\\"token pseudo-element\\",children:\\"::before\\"})]}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsxs)(n.span,{className:\\"token atrule\\",children:[(0,e.jsx)(n.span,{className:\\"token rule\\",children:\\"@apply\\"}),\\" -ml-2 mr-4 inline-block w-4 text-right text-gray-400\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\";\\"})]}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property\\",children:\\"content\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"attr\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"line\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\")\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\";\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]})]})}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"newletter-component-v113\\",children:[(0,e.jsx)(n.a,{href:\\"#newletter-component-v113\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Newletter component (v1.1.3)\\"]}),(0,e.jsx)(n.p,{children:\\"Introduced in v1.1.3, the newsletter component gives you an easy way to build an audience. It integrates with the following providers:\\"}),(0,e.jsxs)(n.ul,{children:[(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\\"https://mailchimp.com/\\",children:\\"Mailchimp\\"})}),(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\\"https://buttondown.email/\\",children:\\"Buttondown\\"})}),(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\\"https://convertkit.com/\\",children:\\"Convertkit\\"})})]}),(0,e.jsxs)(n.p,{children:[\\"To use it, specify the provider which you are using in the config file and add the necessary environment variables to the \\",(0,e.jsx)(n.code,{children:\\".env\\"}),\\" file. For more information on the required variables, check out \\",(0,e.jsx)(n.code,{children:\\".env.sample.\\"})]}),(0,e.jsxs)(n.p,{children:[\\"Two components are exported, a default \\",(0,e.jsx)(n.code,{children:\\"NewsletterForm\\"}),\\" and a \\",(0,e.jsx)(n.code,{children:\\"BlogNewsletterForm\\"}),\\" component, which is also passed in as an MDX component and can be used in a blog post:\\"]}),(0,e.jsx)(n.pre,{className:\\"language-jsx\\",children:(0,e.jsx)(n.code,{className:\\"code-highlight language-jsx\\",children:(0,e.jsxs)(n.span,{className:\\"code-line\\",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 class-name\\",children:\\"BlogNewsletterForm\\"})]}),\\" \\",(0,e.jsx)(n.span,{className:\\"token attr-name\\",children:\\"title\\"}),(0,e.jsxs)(n.span,{className:\\"token attr-value\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation attr-equals\\",children:\\"=\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\'\\"\'}),\\"Like what you are reading?\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\'\\"\'})]}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"/>\\"})]}),`\\n`]})})}),(0,e.jsx)(s,{title:\\"Like what you are reading?\\"}),(0,e.jsxs)(n.p,{children:[\\"The component relies on nextjs\'s \\",(0,e.jsx)(n.a,{href:\\"https://nextjs.org/docs/api-routes/introduction\\",children:\\"API routes\\"}),\\" which requires a server-side instance of nextjs to be setup and is not compatible with a 100% static site export. Users should either self-host or use a compatible platform like Vercel or Netlify which supports this functionality.\\"]}),(0,e.jsx)(n.p,{children:\\"A static site compatible alternative is to substitute the route in the newsletter component with a form API endpoint provider.\\"}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"bibliography-and-citations-v121\\",children:[(0,e.jsx)(n.a,{href:\\"#bibliography-and-citations-v121\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Bibliography and Citations (v1.2.1)\\"]}),(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\\"rehype-citation\\"}),\\" plugin is added to the xdm processing pipeline in v1.2.1. This allows you to easily format citations and insert bibliography from an existing bibtex or CSL-json file.\\"]}),(0,e.jsx)(n.p,{children:\\"For example, the following markdown code sample:\\"}),(0,e.jsx)(n.pre,{className:\\"language-md\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-md\\",children:[(0,e.jsx)(n.span,{className:\\"code-line\\",children:`Standard citation [@Nash1950]\\n`}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:`In-text citations e.g. @Nash1951\\n`}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:`Multiple citations [see @Nash1950; @Nash1951, page 50]\\n`}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:`\\n`}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsxs)(n.span,{className:\\"token bold\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"**\\"}),(0,e.jsx)(n.span,{className:\\"token content\\",children:\\"References:\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"**\\"})]}),`\\n`]}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:`\\n`}),(0,e.jsx)(n.span,{className:\\"code-line\\",children:`[^ref]\\n`})]})}),(0,e.jsx)(n.p,{children:\\"is rendered to the following:\\"}),(0,e.jsxs)(n.p,{children:[\\"Standard citation \\",(0,e.jsx)(n.span,{id:\\"citation--nash1950--1\\",children:\\"(Nash, 1950)\\"}),(0,e.jsx)(n.br,{}),\\"In-text citations e.g. \\",(0,e.jsx)(n.span,{id:\\"citation--nash1951--2\\",children:\\"Nash (1951)\\"}),(0,e.jsx)(n.br,{}),\\"Multiple citations \\",(0,e.jsx)(n.span,{id:\\"citation--nash1950--nash1951--3\\",children:\\"(see Nash, 1950, 1951, p. 50)\\"})]}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:\\"References:\\"})}),(0,e.jsxs)(n.div,{className:\\"csl-bib-body references\\",id:\\"refs\\",children:[(0,e.jsxs)(n.div,{className:\\"csl-entry\\",id:\\"bib-nash1950\\",children:[\\"Nash, J. (1950). Equilibrium points in n-person games. \\",(0,e.jsx)(n.i,{children:\\"Proceedings of the National Academy of Sciences\\"}),\\", \\",(0,e.jsx)(n.i,{children:\\"36\\"}),\\"(1), 48\\\\u201349.\\"]}),(0,e.jsxs)(n.div,{className:\\"csl-entry\\",id:\\"bib-nash1951\\",children:[\\"Nash, J. (1951). Non-cooperative games. \\",(0,e.jsx)(n.i,{children:\\"Annals of Mathematics\\"}),\\", 286\\\\u2013295.\\"]})]}),(0,e.jsxs)(n.p,{children:[\\"A bibliography will be inserted at the end of the document, but this can be overwritten by specifying a \\",(0,e.jsx)(n.code,{children:\\"[^Ref]\\"}),\\" tag at the intended location. The plugin uses APA citation formation, but also supports the following CSLs, \'apa\', \'vancouver\', \'harvard1\', \'chicago\', \'mla\', or a path to a user-specified CSL file.\\"]}),(0,e.jsxs)(n.p,{children:[\\"See \\",(0,e.jsx)(n.a,{href:\\"https://github.com/timlrx/rehype-citation\\",children:\\"rehype-citation readme\\"}),\\" for more information on the configuration options.\\"]}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"self-hosted-font-v150\\",children:[(0,e.jsx)(n.a,{href:\\"#self-hosted-font-v150\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Self-hosted font (v1.5.0)\\"]}),(0,e.jsxs)(n.p,{children:[\\"Google font has been replaced with self-hosted font from \\",(0,e.jsx)(n.a,{href:\\"https://fontsource.org/\\",children:\\"Fontsource\\"}),\\". This gives the following \\",(0,e.jsx)(n.a,{href:\\"https://fontsource.org/docs/introduction\\",children:\\"advantages\\"}),\\":\\"]}),(0,e.jsxs)(n.blockquote,{children:[(0,e.jsx)(n.p,{children:\\"Self-hosting brings significant performance gains as loading fonts from hosted services, such as Google Fonts, lead to an extra (render blocking) network request. To provide perspective, for simple websites it has been seen to double visual load times.\\"}),(0,e.jsx)(n.p,{children:\\"Fonts remain version locked. Google often pushes updates to their fonts without notice, which may interfere with your live production projects. Manage your fonts like any other NPM dependency.\\"}),(0,e.jsx)(n.p,{children:\\"Commit to privacy. Google does track the usage of their fonts and for those who are extremely privacy concerned, self-hosting is an alternative.\\"})]}),(0,e.jsxs)(n.p,{children:[\\"This leads to a smaller font bundle and a 0.1s faster load time (\\",(0,e.jsx)(n.a,{href:\\"https://www.webpagetest.org/video/compare.php?tests=220201_AiDcFH_f68a69b758454dd52d8e67493fdef7da,220201_BiDcMC_bf2d53f14483814ba61e794311dfa771\\",children:\\"webpagetest comparison\\"}),\\").\\"]}),(0,e.jsx)(n.p,{children:\\"To change the default Inter font:\\"}),(0,e.jsxs)(n.ol,{children:[(0,e.jsxs)(n.li,{children:[\\"Install the preferred \\",(0,e.jsx)(n.a,{href:\\"https://fontsource.org/fonts\\",children:\\"font\\"}),\\" - \\",(0,e.jsx)(n.code,{children:\\"npm install -save @fontsource/<font-name>\\"})]}),(0,e.jsxs)(n.li,{children:[\\"Update the import at \\",(0,e.jsx)(n.code,{children:\\"pages/_app.js\\"}),\\"- \\",(0,e.jsx)(n.code,{children:\\"import \'@fontsource/<font-name>.css\'\\"})]}),(0,e.jsxs)(n.li,{children:[\\"Update the \\",(0,e.jsx)(n.code,{children:\\"fontfamily\\"}),\\" property in the tailwind css config file\\"]})]}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"upgrade-guide\\",children:[(0,e.jsx)(n.a,{href:\\"#upgrade-guide\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Upgrade guide\\"]}),(0,e.jsx)(n.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,e.jsx)(n.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 in to your existing blog rather than migrating everything over.\\"}),(0,e.jsx)(n.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,e.jsx)(n.p,{children:\\"Another alternative would be to pull the latest template version with the following code:\\"}),(0,e.jsx)(n.pre,{className:\\"language-bash\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-bash\\",children:[(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"git\\"}),\\" remote \\",(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"add\\"}),` template git@github.com:timlrx/tailwind-nextjs-starter-blog.git\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"git\\"}),` pull template v1 --allow-unrelated-histories\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"rm\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token parameter variable\\",children:\\"-rf\\"}),` node_modules\\n`]})]})}),(0,e.jsxs)(n.p,{children:[\\"You can see an example of such a migration in this \\",(0,e.jsx)(n.a,{href:\\"https://github.com/timlrx/timlrx.com/commit/bba1c185384fd6d5cdaac15abf802fdcff027286\\",children:\\"commit\\"}),\\" for my personal blog.\\"]}),(0,e.jsxs)(n.p,{children:[\\"v1 also uses \\",(0,e.jsx)(n.code,{children:\\"feed.xml\\"}),\\" rather than \\",(0,e.jsx)(n.code,{children:\\"index.xml\\"}),\\", to avoid some build issues with Vercel. If you are migrating you should add a redirect to \\",(0,e.jsx)(n.code,{children:\\"next.config.js\\"}),\\" like so:\\"]}),(0,e.jsx)(n.pre,{className:\\"language-js\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-js\\",children:[(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token keyword\\",children:\\"async\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"redirects\\"}),(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:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token keyword control-flow\\",children:\\"return\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"[\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"source\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'/:path/index.xml\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"destination\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'/:path/feed.xml\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token property literal-property\\",children:\\"permanent\\"}),(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:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"]\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]})]})}),(0,e.jsxs)(n.section,{className:\\"footnotes\\",\\"data-footnotes\\":!0,children:[(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"footnote-label\\",children:[(0,e.jsx)(n.a,{href:\\"#footnote-label\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Footnotes\\"]}),(0,e.jsx)(n.ol,{children:(0,e.jsx)(n.li,{id:\\"user-content-fn-1\\",children:(0,e.jsxs)(n.p,{children:[\\"With the new changes in Nextjs 12, first load JS increase to 45kB. \\",(0,e.jsx)(n.a,{href:\\"#user-content-fnref-1\\",\\"aria-label\\":\\"Back to reference 1\\",className:\\"data-footnote-backref\\",\\"data-footnote-backref\\":\\"\\",children:\\"\\\\u21A9\\"})]})})})]})]})}function h(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(d,{...a})}):d(a)}function p(a,n){throw new Error(\\"Expected \\"+(n?\\"component\\":\\"object\\")+\\" `\\"+a+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return b(x);})();\\n;return Component;"},"_id":"blog/new-features-in-v1.mdx","_raw":{"sourceFilePath":"blog/new-features-in-v1.mdx","sourceFileName":"new-features-in-v1.mdx","sourceFileDir":"blog","contentType":"mdx","flattenedPath":"blog/new-features-in-v1"},"type":"Blog","readingTime":{"text":"12 min read","minutes":11.92,"time":715200,"words":2384},"slug":"new-features-in-v1","path":"blog/new-features-in-v1","filePath":"blog/new-features-in-v1.mdx","toc":[{"value":"Overview","url":"#overview","depth":2},{"value":"Theme colors","url":"#theme-colors","depth":2},{"value":"Xdm MDX compiler","url":"#xdm-mdx-compiler","depth":2},{"value":"Table of contents component","url":"#table-of-contents-component","depth":2},{"value":"Layouts","url":"#layouts","depth":2},{"value":"Adding new templates","url":"#adding-new-templates","depth":3},{"value":"Configuring a blog post frontmatter","url":"#configuring-a-blog-post-frontmatter","depth":3},{"value":"Extend","url":"#extend","depth":3},{"value":"Analytics","url":"#analytics","depth":2},{"value":"Blog comments system","url":"#blog-comments-system","depth":2},{"value":"Multiple authors","url":"#multiple-authors","depth":2},{"value":"Multiple authors in blog post","url":"#multiple-authors-in-blog-post","depth":3},{"value":"Copy button for code blocks","url":"#copy-button-for-code-blocks","depth":2},{"value":"Line highlighting and line numbers","url":"#line-highlighting-and-line-numbers","depth":2},{"value":"Newletter component (v1.1.3)","url":"#newletter-component-v113","depth":2},{"value":"Bibliography and Citations (v1.2.1)","url":"#bibliography-and-citations-v121","depth":2},{"value":"Self-hosted font (v1.5.0)","url":"#self-hosted-font-v150","depth":2},{"value":"Upgrade guide","url":"#upgrade-guide","depth":2}],"structuredData":{"@context":"https://schema.org","@type":"BlogPosting","headline":"New features in v1","datePublished":"2021-08-07T15:32:14.000Z","dateModified":"2021-02-01T00:00:00.000Z","description":"An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more","image":"/static/images/twitter-card.png","url":"https://tailwind-nextjs-starter-blog.vercel.app/blog/new-features-in-v1"}},{"title":"O Canada","date":"2017-07-15T00:00:00.000Z","tags":["holiday","canada","images"],"draft":false,"summary":"The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhibition and see how easy it is to replicate with some MDX magic and tailwind classes.","images":["/static/images/canada/mountains.jpg"],"layout":"PostBanner","body":{"raw":"\\nThe scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhibition and see how easy it is to replicate with some MDX magic and tailwind classes.\\n\\nFeatures images served using `next/image` component. The locally stored images are located in a folder with the following path: `/static/images/canada/[filename].jpg`\\n\\nSince we are using mdx, we can create a simple responsive flexbox grid to display our images with a few tailwind css classes.\\n\\n---\\n\\n# Gallery\\n\\n<div className=\\"-mx-2 flex flex-wrap overflow-hidden xl:-mx-2\\">\\n <div className=\\"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2\\">\\n \\n </div>\\n <div className=\\"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2\\">\\n \\n </div>\\n <div className=\\"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2\\">\\n \\n </div>\\n <div className=\\"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2\\">\\n \\n </div>\\n</div>\\n\\n# Implementation\\n\\n```js\\n<div className=\\"-mx-2 flex flex-wrap overflow-hidden xl:-mx-2\\">\\n <div className=\\"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2\\">\\n \\n </div>\\n <div className=\\"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2\\">\\n \\n </div>\\n <div className=\\"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2\\">\\n \\n </div>\\n <div className=\\"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2\\">\\n \\n </div>\\n</div>\\n```\\n\\nWith MDX v2, one can interleave markdown in jsx as shown in the example code.\\n\\n### Photo Credits\\n\\n<div>\\n Maple photo by [Guillaume\\n Jaillet](https://unsplash.com/@i_am_g?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\\n on\\n [Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\\n</div>\\n<div>\\n Mountains photo by [John\\n Lee](https://unsplash.com/@john_artifexfilms?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\\n on\\n [Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\\n</div>\\n<div>\\n Lake photo by [Tj\\n Holowaychuk](https://unsplash.com/@tjholowaychuk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\\n on\\n [Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\\n</div>\\n<div>\\n Toronto photo by [Matthew\\n Henry](https://unsplash.com/@matthewhenry?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\\n on\\n [Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\\n</div>\\n","code":"var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var x=(n,a)=>()=>(a||n((a={exports:{}}).exports,a),a.exports),w=(n,a)=>{for(var s in a)t(n,s,{get:a[s],enumerable:!0})},c=(n,a,s,o)=>{if(a&&typeof a==\\"object\\"||typeof a==\\"function\\")for(let l of u(a))!k.call(n,l)&&l!==s&&t(n,l,{get:()=>a[l],enumerable:!(o=m(a,l))||o.enumerable});return n};var g=(n,a,s)=>(s=n!=null?h(N(n)):{},c(a||!n||!n.__esModule?t(s,\\"default\\",{value:n,enumerable:!0}):s,n)),f=n=>c(t({},\\"__esModule\\",{value:!0}),n);var i=x((M,r)=>{r.exports=_jsx_runtime});var _={};w(_,{default:()=>p,frontmatter:()=>y});var e=g(i()),y={title:\\"O Canada\\",date:\\"2017-07-15\\",tags:[\\"holiday\\",\\"canada\\",\\"images\\"],draft:!1,layout:\\"PostBanner\\",images:[\\"/static/images/canada/mountains.jpg\\"],summary:\\"The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhibition and see how easy it is to replicate with some MDX magic and tailwind classes.\\"};function d(n){let a={a:\\"a\\",code:\\"code\\",div:\\"div\\",h1:\\"h1\\",h3:\\"h3\\",hr:\\"hr\\",p:\\"p\\",path:\\"path\\",pre:\\"pre\\",span:\\"span\\",svg:\\"svg\\",...n.components},{Image:s}=a;return s||v(\\"Image\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(a.p,{children:\\"The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhibition and see how easy it is to replicate with some MDX magic and tailwind classes.\\"}),(0,e.jsxs)(a.p,{children:[\\"Features images served using \\",(0,e.jsx)(a.code,{children:\\"next/image\\"}),\\" component. The locally stored images are located in a folder with the following path: \\",(0,e.jsx)(a.code,{children:\\"/static/images/canada/[filename].jpg\\"})]}),(0,e.jsx)(a.p,{children:\\"Since we are using mdx, we can create a simple responsive flexbox grid to display our images with a few tailwind css classes.\\"}),(0,e.jsx)(a.hr,{}),(0,e.jsxs)(a.h1,{className:\\"content-header\\",id:\\"gallery\\",children:[(0,e.jsx)(a.a,{href:\\"#gallery\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Gallery\\"]}),(0,e.jsxs)(\\"div\\",{className:\\"-mx-2 flex flex-wrap overflow-hidden xl:-mx-2\\",children:[(0,e.jsx)(\\"div\\",{className:\\"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2\\",children:(0,e.jsx)(a.div,{children:(0,e.jsx)(s,{alt:\\"Maple\\",src:\\"/static/images/canada/maple.jpg\\",width:\\"640\\",height:\\"427\\"})})}),(0,e.jsx)(\\"div\\",{className:\\"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2\\",children:(0,e.jsx)(a.div,{children:(0,e.jsx)(s,{alt:\\"Lake\\",src:\\"/static/images/canada/lake.jpg\\",width:\\"640\\",height:\\"427\\"})})}),(0,e.jsx)(\\"div\\",{className:\\"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2\\",children:(0,e.jsx)(a.div,{children:(0,e.jsx)(s,{alt:\\"Mountains\\",src:\\"/static/images/canada/mountains.jpg\\",width:\\"1920\\",height:\\"1375\\"})})}),(0,e.jsx)(\\"div\\",{className:\\"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2\\",children:(0,e.jsx)(a.div,{children:(0,e.jsx)(s,{alt:\\"Toronto\\",src:\\"/static/images/canada/toronto.jpg\\",width:\\"640\\",height:\\"427\\"})})})]}),(0,e.jsxs)(a.h1,{className:\\"content-header\\",id:\\"implementation\\",children:[(0,e.jsx)(a.a,{href:\\"#implementation\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Implementation\\"]}),(0,e.jsx)(a.pre,{className:\\"language-js\\",children:(0,e.jsxs)(a.code,{className:\\"language-js code-highlight\\",children:[(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"<\\"}),\\"div className\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"=\\"}),(0,e.jsx)(a.span,{className:\\"token string\\",children:\'\\"-mx-2 flex flex-wrap overflow-hidden xl:-mx-2\\"\'}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\">\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"<\\"}),\\"div className\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"=\\"}),(0,e.jsx)(a.span,{className:\\"token string\\",children:\'\\"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2\\"\'}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\">\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"!\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"[\\"}),(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Maple\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"]\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),(0,e.jsx)(a.span,{className:\\"token keyword\\",children:\\"static\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"images\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"canada\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"maple\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(a.span,{className:\\"token property-access\\",children:\\"jpg\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"<\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"div\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\">\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"<\\"}),\\"div className\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"=\\"}),(0,e.jsx)(a.span,{className:\\"token string\\",children:\'\\"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2\\"\'}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\">\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"!\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"[\\"}),(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Lake\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"]\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),(0,e.jsx)(a.span,{className:\\"token keyword\\",children:\\"static\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"images\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"canada\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"lake\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(a.span,{className:\\"token property-access\\",children:\\"jpg\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"<\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"div\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\">\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"<\\"}),\\"div className\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"=\\"}),(0,e.jsx)(a.span,{className:\\"token string\\",children:\'\\"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2\\"\'}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\">\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"!\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"[\\"}),(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Mountains\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"]\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),(0,e.jsx)(a.span,{className:\\"token keyword\\",children:\\"static\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"images\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"canada\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"mountains\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(a.span,{className:\\"token property-access\\",children:\\"jpg\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"<\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"div\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\">\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"<\\"}),\\"div className\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"=\\"}),(0,e.jsx)(a.span,{className:\\"token string\\",children:\'\\"my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2\\"\'}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\">\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"!\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"[\\"}),(0,e.jsx)(a.span,{className:\\"token maybe-class-name\\",children:\\"Toronto\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"]\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),(0,e.jsx)(a.span,{className:\\"token keyword\\",children:\\"static\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"images\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"canada\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"toronto\\",(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(a.span,{className:\\"token property-access\\",children:\\"jpg\\"}),(0,e.jsx)(a.span,{className:\\"token punctuation\\",children:\\")\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"<\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"div\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\">\\"}),`\\n`]}),(0,e.jsxs)(a.span,{className:\\"code-line\\",children:[(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"<\\"}),(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\"/\\"}),\\"div\\",(0,e.jsx)(a.span,{className:\\"token operator\\",children:\\">\\"}),`\\n`]})]})}),(0,e.jsx)(a.p,{children:\\"With MDX v2, one can interleave markdown in jsx as shown in the example code.\\"}),(0,e.jsxs)(a.h3,{className:\\"content-header\\",id:\\"photo-credits\\",children:[(0,e.jsx)(a.a,{href:\\"#photo-credits\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(a.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(a.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(a.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(a.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Photo Credits\\"]}),(0,e.jsx)(\\"div\\",{children:(0,e.jsxs)(a.p,{children:[\\"Maple photo by \\",(0,e.jsx)(a.a,{href:\\"https://unsplash.com/@i_am_g?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\\",children:\\"Guillaume Jaillet\\"}),\\" on \\",(0,e.jsx)(a.a,{href:\\"https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\\",children:\\"Unsplash\\"})]})}),(0,e.jsx)(\\"div\\",{children:(0,e.jsxs)(a.p,{children:[\\"Mountains photo by \\",(0,e.jsx)(a.a,{href:\\"https://unsplash.com/@john_artifexfilms?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\\",children:\\"John Lee\\"}),\\" on \\",(0,e.jsx)(a.a,{href:\\"https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\\",children:\\"Unsplash\\"})]})}),(0,e.jsx)(\\"div\\",{children:(0,e.jsxs)(a.p,{children:[\\"Lake photo by \\",(0,e.jsx)(a.a,{href:\\"https://unsplash.com/@tjholowaychuk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\\",children:\\"Tj Holowaychuk\\"}),\\" on \\",(0,e.jsx)(a.a,{href:\\"https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\\",children:\\"Unsplash\\"})]})}),(0,e.jsx)(\\"div\\",{children:(0,e.jsxs)(a.p,{children:[\\"Toronto photo by \\",(0,e.jsx)(a.a,{href:\\"https://unsplash.com/@matthewhenry?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\\",children:\\"Matthew Henry\\"}),\\" on \\",(0,e.jsx)(a.a,{href:\\"https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\\",children:\\"Unsplash\\"})]})})]})}function p(n={}){let{wrapper:a}=n.components||{};return a?(0,e.jsx)(a,{...n,children:(0,e.jsx)(d,{...n})}):d(n)}function v(n,a){throw new Error(\\"Expected \\"+(a?\\"component\\":\\"object\\")+\\" `\\"+n+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return f(_);})();\\n;return Component;"},"_id":"blog/pictures-of-canada.mdx","_raw":{"sourceFilePath":"blog/pictures-of-canada.mdx","sourceFileName":"pictures-of-canada.mdx","sourceFileDir":"blog","contentType":"mdx","flattenedPath":"blog/pictures-of-canada"},"type":"Blog","readingTime":{"text":"2 min read","minutes":1.18,"time":70800,"words":236},"slug":"pictures-of-canada","path":"blog/pictures-of-canada","filePath":"blog/pictures-of-canada.mdx","toc":[{"value":"Gallery","url":"#gallery","depth":1},{"value":"Implementation","url":"#implementation","depth":1},{"value":"Photo Credits","url":"#photo-credits","depth":3}],"structuredData":{"@context":"https://schema.org","@type":"BlogPosting","headline":"O Canada","datePublished":"2017-07-15T00:00:00.000Z","dateModified":"2017-07-15T00:00:00.000Z","description":"The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhibition and see how easy it is to replicate with some MDX magic and tailwind classes.","image":"/static/images/canada/mountains.jpg","url":"https://tailwind-nextjs-starter-blog.vercel.app/blog/pictures-of-canada"}},{"title":"Release of Tailwind Nextjs Starter Blog v2.0","date":"2023-08-05T00:00:00.000Z","tags":["next-js","tailwind","guide","feature"],"lastmod":"2023-08-05T00:00:00.000Z","draft":false,"summary":"Release of Tailwind Nextjs Starter Blog template v2.0, refactored with Nextjs App directory and React Server Components setup.Discover the new features and how to migrate from V1.","images":["/static/images/twitter-card.png"],"body":{"raw":"\\n## Introduction\\n\\nWelcome to the release of Tailwind Nextjs Starter Blog template v2.0. This release is a major refactor of the codebase to support Nextjs App directory and React Server Components. Read on to discover the new features and how to migrate from V1.\\n\\n<TOCInline toc={props.toc} exclude=\\"Introduction\\" />\\n\\n## V1 to V2\\n\\n\\n\\nThe template was first released in January 2021 and has since been used by thousands of users. It is featured on [Next.js Templates](https://vercel.com/templates/next.js/tailwind-css-starter-blog), [Tailwind Awesome](https://www.tailwindawesome.com/resources/tailwind-nextjs-starter-blog) among other listing sites. It attracts 200+ unique visitors daily notching 1500-2000 page views, with 1.3k forks and many other clones.\\n\\nMany thanks to the community of users and contributors for making this template a success! I created a small video montage of the blogs (while cleaning up the list in the readme) to showcase the diversity of the blogs created using the template and to celebrate the milestone:\\n\\n<video controls>\\n <source\\n src=\\"https://github-production-user-asset-6210df.s3.amazonaws.com/28362229/258559849-2124c81f-b99d-4431-839c-347e01a2616c.webm\\"\\n type=\\"video/webm\\"\\n />\\n</video>\\n\\nVersion 2 builds on the success of the previous version and introduces many new features and improvements. The codebase has been refactored to support Next.js App directory and React Server Components. Markdown / MDX is now processed using Contentlayer, a type-safe content SDK that validates and transforms your content into type-safe JSON data. It integrates with Pliny, a new library that provides out of the box Next.js components to enhance your static site with analytics, comments and newsletter subscription. A new command palette (⌘-k) search component is also added to the template.\\n\\nLet\'s dive into the new features and improvements in V2.\\n\\n## Next.js App Directory and React Server Components\\n\\nNow that [Next.js App router](https://nextjs.org/docs/app) is finally stable and is mostly feature compatible with Page Router, the codebase has been migrated to new setup. This allows for a hybrid rendering approach, with the use of React Server Components generated on the server side for faster page loads and smaller bundle sizes, while retaining the ability to sprinkle in client side React components for interactivity.[^1]\\n\\nWith addition powers comes a [new paradigm](https://nextjs.org/docs/getting-started/react-essentials) to learn. I have migrated the codebase to make use of the new features as much as possible. This includes changes in the folder structure, splitting components into server vs client components, leveraging server side data fetching and using the recommended [Metadata](https://nextjs.org/docs/app/building-your-application/optimizing/metadata) API for SEO discoverability.\\n\\nWhile this simplifies the codebase to some extent, it makes migration from the old codebase more difficult. If you are looking to migrate, I recommend starting from a fresh template and copying over your customizations and existing content. See the [migration recommendations](#migration-recommendations) section for more details.\\n\\n## Typescript First\\n\\nThe codebase has been migrated to Typescript. While the previous version of the template was available in both Javascript and Typescript, I decided to reduce the maintenance burden and focus on Typescript. This also allows for better type checking and code completion in IDEs.\\n\\nTypescript is also a perfect match with our new type-safe markdown processor - Contentlayer.\\n\\n## Contentlayer\\n\\n[Contentlayer](https://www.contentlayer.dev/) is a content SDK that validates and transforms your content into type-safe JSON data that you can easily import into your application. It makes working with local markdown or MDX files a breeze. This replaces `MDX-bundler` and our own markdown processing workflow.\\n\\nFirst, a content source is defined, specifying the name of the document type, the source where it is located along with the frontmatter fields and any additional computed fields that should be generated as part of the process.\\n\\n```ts:contentlayer.config.ts\\nexport const Blog = defineDocumentType(() => ({\\n name: \'Blog\',\\n filePathPattern: \'blog/**/*.mdx\',\\n contentType: \'mdx\',\\n fields: {\\n title: { type: \'string\', required: true },\\n date: { type: \'date\', required: true },\\n tags: { type: \'list\', of: { type: \'string\' }, default: [] },\\n ...\\n },\\n computedFields: {\\n readingTime: { type: \'json\', resolve: (doc) => readingTime(doc.body.raw) },\\n slug: {\\n type: \'string\',\\n resolve: (doc) => doc._raw.flattenedPath.replace(/^.+?(\\\\/)/, \'\'),\\n }\\n ...\\n },\\n}))\\n```\\n\\nContentlayer then processes the MDX files with our desired markdown remark or rehype plugins, validates the schema, generate type definitions and output json files that can be easily imported in our pages. Hot reloading comes out of the box, so edits to the markdown files will be reflected in the browser immediately!\\n\\n## Pliny\\n\\nA large reason for the popularity of the template was its customizability and integration with other services from analytics providers to commenting solutions. However, this means that a lot of boilerplate code has to be co-located within the template even if the user does not use the feature. Updates and bug fixes had to be copied manually to the user\'s codebase.\\n\\nTo solve this, I have abstracted the logic to a separate repository - [Pliny](https://github.com/timlrx/pliny). Pliny provides out of the box Next.js components to enhance static sites:\\n\\n- Analytics\\n - Google Analytics\\n - Plausible Analytics\\n - Simple Analytics\\n - Umami Analytics\\n - Posthog\\n- Comments\\n - Disqus\\n - Giscus\\n - Utterances\\n- Newsletter (uses Next 13 API Routes)\\n - Buttondown\\n - Convertkit\\n - Email Octopus\\n - Klaviyo\\n - Mailchimp\\n - Revue\\n- Command palette search with tailwind style sheet\\n - Algolia\\n - Kbar (local search)\\n- UI utility components\\n - Bleed\\n - Newsletter / Blog Newsletter\\n - Pre / Code block\\n - Table of Contents\\n\\nChoose your preferred service by modifying `siteMetadata.js` and changing the appropriate fields. For example to change from Umami Analytics to Plausible, we can change the following fields:\\n\\n```diff-js:siteMetadata.js\\nanalytics: {\\n- umamiAnalytics: {\\n- // We use an env variable for this site to avoid other users cloning our analytics ID\\n- umamiWebsiteId: process.env.NEXT_UMAMI_ID, // e.g. 123e4567-e89b-12d3-a456-426614174000\\n- },\\n+ plausibleAnalytics: {\\n+ plausibleDataDomain: \'\', // e.g. tailwind-nextjs-starter-blog.vercel.app\\n+ },\\n},\\n```\\n\\nChanges in the configuration file gets propagated to the components automatically. No modification to the template is required.\\n\\nUnder the hood, Pliny exports high level components such as `<Analytics analyticsConfig={analyticsConfig}/>` and `<Comments commentsConfig={commentsConfig}/>` which takes in a configuration object and renders the appropriate component. Since the layouts are defined on the server side, Next.js is able to use the configuration object to determine which component to render and send only the required component bundle to the client.\\n\\n## New Search Component\\n\\nWhat\'s a blog in 2023 without a command palette search bar?\\n\\nOne of the most highly requested features have been added \uD83C\uDF89! The search component supports 2 search providers - Algolia and Kbar local search.\\n\\n### Algolia\\n\\n[Algolia Docsearch](https://docsearch.algolia.com/) is popular free service used across many documentation websites. It automatically scrapes the website that has is submitted for indexing and makes the search result available via a beautiful dialog modal. The pliny component is greatly inspired by the Docusaurus implementation and comes with a stylesheet that is compatible with the Tailwind CSS theme.\\n\\n### Kbar\\n\\n[Kbar](https://github.com/timc1/kbar) is a fast, portable, and extensible cmd+k interface. The pliny implementation uses kbar to create a local search dialog box. The component loads a JSON file, default `search.json`, that was created in the contentlayer build process. Try pressing ⌘-k or ctrl-k to see the search bar in action!\\n\\n## Styling and Layout Updates\\n\\n### Theming\\n\\n`tailwind.config.js` has been updated to use tailwind typography defaults where possible and to use the built-in support for dark mode via the `prose-invert` class. This replaces the previous `prose-dark` class and configuration.\\n\\nThe primary theme color is updated from `teal` to `pink` and the primary gray theme from `neutral` to `gray`.\\n\\nInter is now replaced with Space Grotesk as the default font.\\n\\n### New Layouts\\n\\nLayout components available in the `layouts` directory, provide a simple way to customize the look and feel of the blog.[^2]\\n\\nThe downside of building a popular template is that you start seeing multiple similar sites everywhere \uD83D\uDE06. While users are encouraged to customized the layouts to their liking, having more layout options that are easily switchable promotes diversity and perhaps can be a good starting point for further customizations.\\n\\nIn v2, I added a new post layout - `PostBanner`. It features a large banner image and a centered content container. Check out \\"[Pictures of Canada](/blog/pictures-of-canada)\\" blog post which has been updated to use the new layout.\\n\\nThe default blog listing layout has also been updated to include a side bar with blog tags. The search bar in the previous layout has been replace with the new command palette search. To switch back to the old layout, simply change the pages that use the `ListLayoutWithTags` component back to the original `ListLayout`.\\n\\n## Migration Recommendations\\n\\nDue to the large changes in directory structure, setup and tooling, I recommend starting from a fresh template and copying existing content, followed by incrementally migrating changes over to the new template.\\n\\nStyling changes should be relatively minor and can be copied over from the old `tailwind.config.js` to the new one. If copying over, you might need to add back the `prose-dark` class to components that opt into tailwind typography styling. Do modify the font import in the root layout component to use the desired font of choice.\\n\\nChanges to the MDX processing pipeline and schema can be easily ported to the new Contentlayer setup. If there are changes to the frontmatter fields, you can modify the document type in `contentlayer.config.ts` to include the new fields. Custom plugins can be added to the `remarkPlugins` and `rehypePlugins` properties in the `makeSource` export of `contentlayer.config.ts`.\\n\\nMarkdown layouts are no longer sourced automatically from the `layouts` directory. Instead, they have to be specified in the `layouts` object defined in `blog/[...slug]/page.tsx`.[^3]\\n\\nTo port over larger components or pages, I recommend first specificing it as a client component by using the `\\"use client\\"` directive. Once it renders correctly, you can split the interactive components (parts that rely on `use` hooks) as a client component and keep the remaining code as a server component. Consult the comprehensive Next.js [migration guide](https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app) for more details.\\n\\n## Conclusion\\n\\nI hope you enjoy the new features and improvements in V2. If you have any feedback or suggestions, feel free to open an issue or reach out to me on [Twitter](https://twitter.com/timlrx).\\n\\n## Support\\n\\nUsing the template? Support this effort by giving a star on GitHub, sharing your own blog and giving a shoutout on Twitter or be a project [sponsor](https://github.com/sponsors/timlrx).\\n\\n## Licence\\n\\n[MIT](https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/main/LICENSE) \xa9 [Timothy Lin](https://www.timrlx.com)\\n\\n[^1]: The previous version injects Preact into the production build. However, this is no longer possible as it does not support React Server Components. While overall bundle size has increased to about 85kB, most of the content can be pre-rendered on the server side, resulting in a low first contentful paint and time to interactive. Using React throughtout also leads to more consistent behavior with external libraries and components.\\n\\n[^2]: This is different from Next.js App Directory layouts and are best thought of as reusable React containers.\\n\\n[^3]: This takes advantage of Server Components by making it simple to specify the layout of choice in the markdown file and match against the `layouts` object which is then used to render the appropriate layout component.\\n","code":"var Component=(()=>{var m=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var k=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),w=(a,n)=>{for(var t in n)o(a,t,{get:n[t],enumerable:!0})},l=(a,n,t,s)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let i of g(n))!N.call(a,i)&&i!==t&&o(a,i,{get:()=>n[i],enumerable:!(s=u(n,i))||s.enumerable});return a};var y=(a,n,t)=>(t=a!=null?m(f(a)):{},l(n||!a||!a.__esModule?o(t,\\"default\\",{value:a,enumerable:!0}):t,a)),b=a=>l(o({},\\"__esModule\\",{value:!0}),a);var c=k((I,r)=>{r.exports=_jsx_runtime});var x={};w(x,{default:()=>p,frontmatter:()=>v});var e=y(c()),v={title:\\"Release of Tailwind Nextjs Starter Blog v2.0\\",date:\\"2023-08-05\\",lastmod:\\"2023-08-05\\",tags:[\\"next-js\\",\\"tailwind\\",\\"guide\\",\\"feature\\"],draft:!1,summary:\\"Release of Tailwind Nextjs Starter Blog template v2.0, refactored with Nextjs App directory and React Server Components setup.Discover the new features and how to migrate from V1.\\",images:[\\"/static/images/twitter-card.png\\"]};function d(a){let n={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",h3:\\"h3\\",li:\\"li\\",ol:\\"ol\\",p:\\"p\\",path:\\"path\\",pre:\\"pre\\",section:\\"section\\",span:\\"span\\",sup:\\"sup\\",svg:\\"svg\\",ul:\\"ul\\",...a.components},{Image:t,TOCInline:s}=n;return t||h(\\"Image\\",!0),s||h(\\"TOCInline\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"introduction\\",children:[(0,e.jsx)(n.a,{href:\\"#introduction\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Introduction\\"]}),(0,e.jsx)(n.p,{children:\\"Welcome to the release of Tailwind Nextjs Starter Blog template v2.0. This release is a major refactor of the codebase to support Nextjs App directory and React Server Components. Read on to discover the new features and how to migrate from V1.\\"}),(0,e.jsx)(s,{toc:a.toc,exclude:\\"Introduction\\"}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"v1-to-v2\\",children:[(0,e.jsx)(n.a,{href:\\"#v1-to-v2\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"V1 to V2\\"]}),(0,e.jsx)(n.div,{children:(0,e.jsx)(t,{alt:\\"Github Traffic\\",src:\\"/static/images/github-traffic.png\\",width:\\"920\\",height:\\"420\\"})}),(0,e.jsxs)(n.p,{children:[\\"The template was first released in January 2021 and has since been used by thousands of users. It is featured on \\",(0,e.jsx)(n.a,{href:\\"https://vercel.com/templates/next.js/tailwind-css-starter-blog\\",children:\\"Next.js Templates\\"}),\\", \\",(0,e.jsx)(n.a,{href:\\"https://www.tailwindawesome.com/resources/tailwind-nextjs-starter-blog\\",children:\\"Tailwind Awesome\\"}),\\" among other listing sites. It attracts 200+ unique visitors daily notching 1500-2000 page views, with 1.3k forks and many other clones.\\"]}),(0,e.jsx)(n.p,{children:\\"Many thanks to the community of users and contributors for making this template a success! I created a small video montage of the blogs (while cleaning up the list in the readme) to showcase the diversity of the blogs created using the template and to celebrate the milestone:\\"}),(0,e.jsx)(\\"video\\",{controls:!0,children:(0,e.jsx)(\\"source\\",{src:\\"https://github-production-user-asset-6210df.s3.amazonaws.com/28362229/258559849-2124c81f-b99d-4431-839c-347e01a2616c.webm\\",type:\\"video/webm\\"})}),(0,e.jsx)(n.p,{children:\\"Version 2 builds on the success of the previous version and introduces many new features and improvements. The codebase has been refactored to support Next.js App directory and React Server Components. Markdown / MDX is now processed using Contentlayer, a type-safe content SDK that validates and transforms your content into type-safe JSON data. It integrates with Pliny, a new library that provides out of the box Next.js components to enhance your static site with analytics, comments and newsletter subscription. A new command palette (\\\\u2318-k) search component is also added to the template.\\"}),(0,e.jsx)(n.p,{children:\\"Let\'s dive into the new features and improvements in V2.\\"}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"nextjs-app-directory-and-react-server-components\\",children:[(0,e.jsx)(n.a,{href:\\"#nextjs-app-directory-and-react-server-components\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Next.js App Directory and React Server Components\\"]}),(0,e.jsxs)(n.p,{children:[\\"Now that \\",(0,e.jsx)(n.a,{href:\\"https://nextjs.org/docs/app\\",children:\\"Next.js App router\\"}),\\" is finally stable and is mostly feature compatible with Page Router, the codebase has been migrated to new setup. This allows for a hybrid rendering approach, with the use of React Server Components generated on the server side for faster page loads and smaller bundle sizes, while retaining the ability to sprinkle in client side React components for interactivity.\\",(0,e.jsx)(n.sup,{children:(0,e.jsx)(n.a,{href:\\"#user-content-fn-1\\",\\"aria-describedby\\":\\"footnote-label\\",\\"data-footnote-ref\\":!0,id:\\"user-content-fnref-1\\",children:\\"1\\"})})]}),(0,e.jsxs)(n.p,{children:[\\"With addition powers comes a \\",(0,e.jsx)(n.a,{href:\\"https://nextjs.org/docs/getting-started/react-essentials\\",children:\\"new paradigm\\"}),\\" to learn. I have migrated the codebase to make use of the new features as much as possible. This includes changes in the folder structure, splitting components into server vs client components, leveraging server side data fetching and using the recommended \\",(0,e.jsx)(n.a,{href:\\"https://nextjs.org/docs/app/building-your-application/optimizing/metadata\\",children:\\"Metadata\\"}),\\" API for SEO discoverability.\\"]}),(0,e.jsxs)(n.p,{children:[\\"While this simplifies the codebase to some extent, it makes migration from the old codebase more difficult. If you are looking to migrate, I recommend starting from a fresh template and copying over your customizations and existing content. See the \\",(0,e.jsx)(n.a,{href:\\"#migration-recommendations\\",children:\\"migration recommendations\\"}),\\" section for more details.\\"]}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"typescript-first\\",children:[(0,e.jsx)(n.a,{href:\\"#typescript-first\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Typescript First\\"]}),(0,e.jsx)(n.p,{children:\\"The codebase has been migrated to Typescript. While the previous version of the template was available in both Javascript and Typescript, I decided to reduce the maintenance burden and focus on Typescript. This also allows for better type checking and code completion in IDEs.\\"}),(0,e.jsx)(n.p,{children:\\"Typescript is also a perfect match with our new type-safe markdown processor - Contentlayer.\\"}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"contentlayer\\",children:[(0,e.jsx)(n.a,{href:\\"#contentlayer\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Contentlayer\\"]}),(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.a,{href:\\"https://www.contentlayer.dev/\\",children:\\"Contentlayer\\"}),\\" is a content SDK that validates and transforms your content into type-safe JSON data that you can easily import into your application. It makes working with local markdown or MDX files a breeze. This replaces \\",(0,e.jsx)(n.code,{children:\\"MDX-bundler\\"}),\\" and our own markdown processing workflow.\\"]}),(0,e.jsx)(n.p,{children:\\"First, a content source is defined, specifying the name of the document type, the source where it is located along with the frontmatter fields and any additional computed fields that should be generated as part of the process.\\"}),(0,e.jsx)(n.div,{className:\\"remark-code-title\\",children:\\"contentlayer.config.ts\\"}),(0,e.jsx)(n.pre,{className:\\"language-ts\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-ts\\",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\\"}),\\" Blog \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"=\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"defineDocumentType\\"}),(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 operator\\",children:\\"=>\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" name\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'Blog\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" filePathPattern\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'blog/**/*.mdx\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" contentType\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'mdx\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" fields\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" title\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\" type\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'string\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" required\\",(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 punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" date\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\" type\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'date\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" required\\",(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 punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" tags\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\" type\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'list\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token keyword\\",children:\\"of\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\" type\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'string\'\\"}),\\" \\",(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 keyword\\",children:\\"default\\"}),(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.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"...\\"}),`\\n`]}),(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:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" computedFields\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" readingTime\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),\\" type\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'json\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token function function-variable\\",children:\\"resolve\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"doc\\",(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 function\\",children:\\"readingTime\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"doc\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),\\"body\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),\\"raw\\",(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:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" slug\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" type\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'string\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token function function-variable\\",children:\\"resolve\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),\\"doc\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\")\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"=>\\"}),\\" doc\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),\\"_raw\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),\\"flattenedPath\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token function\\",children:\\"replace\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"(\\"}),(0,e.jsxs)(n.span,{className:\\"token regex\\",children:[(0,e.jsx)(n.span,{className:\\"token regex-delimiter\\",children:\\"/\\"}),(0,e.jsxs)(n.span,{className:\\"token language-regex regex-source\\",children:[(0,e.jsx)(n.span,{className:\\"token function anchor\\",children:\\"^\\"}),(0,e.jsx)(n.span,{className:\\"token char-set class-name\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token number quantifier\\",children:\\"+?\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation group\\",children:\\"(\\"}),(0,e.jsx)(n.span,{className:\\"token escape\\",children:\\"\\\\\\\\/\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation group\\",children:\\")\\"})]}),(0,e.jsx)(n.span,{className:\\"token regex-delimiter\\",children:\\"/\\"})]}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\")\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"}\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[\\" \\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"...\\"}),`\\n`]}),(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:\\",\\"}),`\\n`]}),(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:\\")\\"}),`\\n`]})]})}),(0,e.jsx)(n.p,{children:\\"Contentlayer then processes the MDX files with our desired markdown remark or rehype plugins, validates the schema, generate type definitions and output json files that can be easily imported in our pages. Hot reloading comes out of the box, so edits to the markdown files will be reflected in the browser immediately!\\"}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"pliny\\",children:[(0,e.jsx)(n.a,{href:\\"#pliny\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Pliny\\"]}),(0,e.jsx)(n.p,{children:\\"A large reason for the popularity of the template was its customizability and integration with other services from analytics providers to commenting solutions. However, this means that a lot of boilerplate code has to be co-located within the template even if the user does not use the feature. Updates and bug fixes had to be copied manually to the user\'s codebase.\\"}),(0,e.jsxs)(n.p,{children:[\\"To solve this, I have abstracted the logic to a separate repository - \\",(0,e.jsx)(n.a,{href:\\"https://github.com/timlrx/pliny\\",children:\\"Pliny\\"}),\\". Pliny provides out of the box Next.js components to enhance static sites:\\"]}),(0,e.jsxs)(n.ul,{children:[(0,e.jsxs)(n.li,{children:[\\"Analytics\\",(0,e.jsxs)(n.ul,{children:[(0,e.jsx)(n.li,{children:\\"Google Analytics\\"}),(0,e.jsx)(n.li,{children:\\"Plausible Analytics\\"}),(0,e.jsx)(n.li,{children:\\"Simple Analytics\\"}),(0,e.jsx)(n.li,{children:\\"Umami Analytics\\"}),(0,e.jsx)(n.li,{children:\\"Posthog\\"})]})]}),(0,e.jsxs)(n.li,{children:[\\"Comments\\",(0,e.jsxs)(n.ul,{children:[(0,e.jsx)(n.li,{children:\\"Disqus\\"}),(0,e.jsx)(n.li,{children:\\"Giscus\\"}),(0,e.jsx)(n.li,{children:\\"Utterances\\"})]})]}),(0,e.jsxs)(n.li,{children:[\\"Newsletter (uses Next 13 API Routes)\\",(0,e.jsxs)(n.ul,{children:[(0,e.jsx)(n.li,{children:\\"Buttondown\\"}),(0,e.jsx)(n.li,{children:\\"Convertkit\\"}),(0,e.jsx)(n.li,{children:\\"Email Octopus\\"}),(0,e.jsx)(n.li,{children:\\"Klaviyo\\"}),(0,e.jsx)(n.li,{children:\\"Mailchimp\\"}),(0,e.jsx)(n.li,{children:\\"Revue\\"})]})]}),(0,e.jsxs)(n.li,{children:[\\"Command palette search with tailwind style sheet\\",(0,e.jsxs)(n.ul,{children:[(0,e.jsx)(n.li,{children:\\"Algolia\\"}),(0,e.jsx)(n.li,{children:\\"Kbar (local search)\\"})]})]}),(0,e.jsxs)(n.li,{children:[\\"UI utility components\\",(0,e.jsxs)(n.ul,{children:[(0,e.jsx)(n.li,{children:\\"Bleed\\"}),(0,e.jsx)(n.li,{children:\\"Newsletter / Blog Newsletter\\"}),(0,e.jsx)(n.li,{children:\\"Pre / Code block\\"}),(0,e.jsx)(n.li,{children:\\"Table of Contents\\"})]})]})]}),(0,e.jsxs)(n.p,{children:[\\"Choose your preferred service by modifying \\",(0,e.jsx)(n.code,{children:\\"siteMetadata.js\\"}),\\" and changing the appropriate fields. For example to change from Umami Analytics to Plausible, we can change the following fields:\\"]}),(0,e.jsx)(n.div,{className:\\"remark-code-title\\",children:\\"siteMetadata.js\\"}),(0,e.jsx)(n.pre,{className:\\"language-js\\",children:(0,e.jsxs)(n.code,{className:\\"code-highlight language-diff-js\\",children:[(0,e.jsxs)(n.span,{className:\\"code-line\\",children:[(0,e.jsx)(n.span,{className:\\"token literal-property property\\",children:\\"analytics\\"}),(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line deleted\\",children:[(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"-\\"}),\\" umamiAnalytics\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line deleted\\",children:[(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"-\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// We use an env variable for this site to avoid other users cloning our analytics ID\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line deleted\\",children:[(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"-\\"}),\\" umamiWebsiteId\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" process\\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token property-access\\",children:\\"env\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\".\\"}),(0,e.jsx)(n.span,{className:\\"token constant\\",children:\\"NEXT_UMAMI_ID\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// e.g. 123e4567-e89b-12d3-a456-426614174000\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line deleted\\",children:[(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:\\",\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line inserted\\",children:[(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"+\\"}),\\" plausibleAnalytics\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\"{\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line inserted\\",children:[(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\"+\\"}),\\" plausibleDataDomain\\",(0,e.jsx)(n.span,{className:\\"token operator\\",children:\\":\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token string\\",children:\\"\'\'\\"}),(0,e.jsx)(n.span,{className:\\"token punctuation\\",children:\\",\\"}),\\" \\",(0,e.jsx)(n.span,{className:\\"token comment\\",children:\\"// e.g. tailwind-nextjs-starter-blog.vercel.app\\"}),`\\n`]}),(0,e.jsxs)(n.span,{className:\\"code-line inserted\\",children:[(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:\\",\\"}),`\\n`]}),(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:\\",\\"}),`\\n`]})]})}),(0,e.jsx)(n.p,{children:\\"Changes in the configuration file gets propagated to the components automatically. No modification to the template is required.\\"}),(0,e.jsxs)(n.p,{children:[\\"Under the hood, Pliny exports high level components such as \\",(0,e.jsx)(n.code,{children:\\"<Analytics analyticsConfig={analyticsConfig}/>\\"}),\\" and \\",(0,e.jsx)(n.code,{children:\\"<Comments commentsConfig={commentsConfig}/>\\"}),\\" which takes in a configuration object and renders the appropriate component. Since the layouts are defined on the server side, Next.js is able to use the configuration object to determine which component to render and send only the required component bundle to the client.\\"]}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"new-search-component\\",children:[(0,e.jsx)(n.a,{href:\\"#new-search-component\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"New Search Component\\"]}),(0,e.jsx)(n.p,{children:\\"What\'s a blog in 2023 without a command palette search bar?\\"}),(0,e.jsx)(n.p,{children:\\"One of the most highly requested features have been added \\\\u{1F389}! The search component supports 2 search providers - Algolia and Kbar local search.\\"}),(0,e.jsxs)(n.h3,{className:\\"content-header\\",id:\\"algolia\\",children:[(0,e.jsx)(n.a,{href:\\"#algolia\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Algolia\\"]}),(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.a,{href:\\"https://docsearch.algolia.com/\\",children:\\"Algolia Docsearch\\"}),\\" is popular free service used across many documentation websites. It automatically scrapes the website that has is submitted for indexing and makes the search result available via a beautiful dialog modal. The pliny component is greatly inspired by the Docusaurus implementation and comes with a stylesheet that is compatible with the Tailwind CSS theme.\\"]}),(0,e.jsxs)(n.h3,{className:\\"content-header\\",id:\\"kbar\\",children:[(0,e.jsx)(n.a,{href:\\"#kbar\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Kbar\\"]}),(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.a,{href:\\"https://github.com/timc1/kbar\\",children:\\"Kbar\\"}),\\" is a fast, portable, and extensible cmd+k interface. The pliny implementation uses kbar to create a local search dialog box. The component loads a JSON file, default \\",(0,e.jsx)(n.code,{children:\\"search.json\\"}),\\", that was created in the contentlayer build process. Try pressing \\\\u2318-k or ctrl-k to see the search bar in action!\\"]}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"styling-and-layout-updates\\",children:[(0,e.jsx)(n.a,{href:\\"#styling-and-layout-updates\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Styling and Layout Updates\\"]}),(0,e.jsxs)(n.h3,{className:\\"content-header\\",id:\\"theming\\",children:[(0,e.jsx)(n.a,{href:\\"#theming\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Theming\\"]}),(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:\\"tailwind.config.js\\"}),\\" has been updated to use tailwind typography defaults where possible and to use the built-in support for dark mode via the \\",(0,e.jsx)(n.code,{children:\\"prose-invert\\"}),\\" class. This replaces the previous \\",(0,e.jsx)(n.code,{children:\\"prose-dark\\"}),\\" class and configuration.\\"]}),(0,e.jsxs)(n.p,{children:[\\"The primary theme color is updated from \\",(0,e.jsx)(n.code,{children:\\"teal\\"}),\\" to \\",(0,e.jsx)(n.code,{children:\\"pink\\"}),\\" and the primary gray theme from \\",(0,e.jsx)(n.code,{children:\\"neutral\\"}),\\" to \\",(0,e.jsx)(n.code,{children:\\"gray\\"}),\\".\\"]}),(0,e.jsx)(n.p,{children:\\"Inter is now replaced with Space Grotesk as the default font.\\"}),(0,e.jsxs)(n.h3,{className:\\"content-header\\",id:\\"new-layouts\\",children:[(0,e.jsx)(n.a,{href:\\"#new-layouts\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"New Layouts\\"]}),(0,e.jsxs)(n.p,{children:[\\"Layout components available in the \\",(0,e.jsx)(n.code,{children:\\"layouts\\"}),\\" directory, provide a simple way to customize the look and feel of the blog.\\",(0,e.jsx)(n.sup,{children:(0,e.jsx)(n.a,{href:\\"#user-content-fn-2\\",\\"aria-describedby\\":\\"footnote-label\\",\\"data-footnote-ref\\":!0,id:\\"user-content-fnref-2\\",children:\\"2\\"})})]}),(0,e.jsx)(n.p,{children:\\"The downside of building a popular template is that you start seeing multiple similar sites everywhere \\\\u{1F606}. While users are encouraged to customized the layouts to their liking, having more layout options that are easily switchable promotes diversity and perhaps can be a good starting point for further customizations.\\"}),(0,e.jsxs)(n.p,{children:[\\"In v2, I added a new post layout - \\",(0,e.jsx)(n.code,{children:\\"PostBanner\\"}),\'. It features a large banner image and a centered content container. Check out \\"\',(0,e.jsx)(n.a,{href:\\"/blog/pictures-of-canada\\",children:\\"Pictures of Canada\\"}),\'\\" blog post which has been updated to use the new layout.\']}),(0,e.jsxs)(n.p,{children:[\\"The default blog listing layout has also been updated to include a side bar with blog tags. The search bar in the previous layout has been replace with the new command palette search. To switch back to the old layout, simply change the pages that use the \\",(0,e.jsx)(n.code,{children:\\"ListLayoutWithTags\\"}),\\" component back to the original \\",(0,e.jsx)(n.code,{children:\\"ListLayout\\"}),\\".\\"]}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"migration-recommendations\\",children:[(0,e.jsx)(n.a,{href:\\"#migration-recommendations\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Migration Recommendations\\"]}),(0,e.jsx)(n.p,{children:\\"Due to the large changes in directory structure, setup and tooling, I recommend starting from a fresh template and copying existing content, followed by incrementally migrating changes over to the new template.\\"}),(0,e.jsxs)(n.p,{children:[\\"Styling changes should be relatively minor and can be copied over from the old \\",(0,e.jsx)(n.code,{children:\\"tailwind.config.js\\"}),\\" to the new one. If copying over, you might need to add back the \\",(0,e.jsx)(n.code,{children:\\"prose-dark\\"}),\\" class to components that opt into tailwind typography styling. Do modify the font import in the root layout component to use the desired font of choice.\\"]}),(0,e.jsxs)(n.p,{children:[\\"Changes to the MDX processing pipeline and schema can be easily ported to the new Contentlayer setup. If there are changes to the frontmatter fields, you can modify the document type in \\",(0,e.jsx)(n.code,{children:\\"contentlayer.config.ts\\"}),\\" to include the new fields. Custom plugins can be added to the \\",(0,e.jsx)(n.code,{children:\\"remarkPlugins\\"}),\\" and \\",(0,e.jsx)(n.code,{children:\\"rehypePlugins\\"}),\\" properties in the \\",(0,e.jsx)(n.code,{children:\\"makeSource\\"}),\\" export of \\",(0,e.jsx)(n.code,{children:\\"contentlayer.config.ts\\"}),\\".\\"]}),(0,e.jsxs)(n.p,{children:[\\"Markdown layouts are no longer sourced automatically from the \\",(0,e.jsx)(n.code,{children:\\"layouts\\"}),\\" directory. Instead, they have to be specified in the \\",(0,e.jsx)(n.code,{children:\\"layouts\\"}),\\" object defined in \\",(0,e.jsx)(n.code,{children:\\"blog/[...slug]/page.tsx\\"}),\\".\\",(0,e.jsx)(n.sup,{children:(0,e.jsx)(n.a,{href:\\"#user-content-fn-3\\",\\"aria-describedby\\":\\"footnote-label\\",\\"data-footnote-ref\\":!0,id:\\"user-content-fnref-3\\",children:\\"3\\"})})]}),(0,e.jsxs)(n.p,{children:[\\"To port over larger components or pages, I recommend first specificing it as a client component by using the \\",(0,e.jsx)(n.code,{children:\'\\"use client\\"\'}),\\" directive. Once it renders correctly, you can split the interactive components (parts that rely on \\",(0,e.jsx)(n.code,{children:\\"use\\"}),\\" hooks) as a client component and keep the remaining code as a server component. Consult the comprehensive Next.js \\",(0,e.jsx)(n.a,{href:\\"https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app\\",children:\\"migration guide\\"}),\\" for more details.\\"]}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"conclusion\\",children:[(0,e.jsx)(n.a,{href:\\"#conclusion\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Conclusion\\"]}),(0,e.jsxs)(n.p,{children:[\\"I hope you enjoy the new features and improvements in V2. If you have any feedback or suggestions, feel free to open an issue or reach out to me on \\",(0,e.jsx)(n.a,{href:\\"https://twitter.com/timlrx\\",children:\\"Twitter\\"}),\\".\\"]}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"support\\",children:[(0,e.jsx)(n.a,{href:\\"#support\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Support\\"]}),(0,e.jsxs)(n.p,{children:[\\"Using the template? Support this effort by giving a star on GitHub, sharing your own blog and giving a shoutout on Twitter or be a project \\",(0,e.jsx)(n.a,{href:\\"https://github.com/sponsors/timlrx\\",children:\\"sponsor\\"}),\\".\\"]}),(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"licence\\",children:[(0,e.jsx)(n.a,{href:\\"#licence\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Licence\\"]}),(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.a,{href:\\"https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/main/LICENSE\\",children:\\"MIT\\"}),\\" \\\\xA9 \\",(0,e.jsx)(n.a,{href:\\"https://www.timrlx.com\\",children:\\"Timothy Lin\\"})]}),(0,e.jsxs)(n.section,{className:\\"footnotes\\",\\"data-footnotes\\":!0,children:[(0,e.jsxs)(n.h2,{className:\\"content-header\\",id:\\"footnote-label\\",children:[(0,e.jsx)(n.a,{href:\\"#footnote-label\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.span,{className:\\"content-header-link\\",children:(0,e.jsxs)(n.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,e.jsx)(n.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,e.jsx)(n.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Footnotes\\"]}),(0,e.jsxs)(n.ol,{children:[(0,e.jsx)(n.li,{id:\\"user-content-fn-1\\",children:(0,e.jsxs)(n.p,{children:[\\"The previous version injects Preact into the production build. However, this is no longer possible as it does not support React Server Components. While overall bundle size has increased to about 85kB, most of the content can be pre-rendered on the server side, resulting in a low first contentful paint and time to interactive. Using React throughtout also leads to more consistent behavior with external libraries and components. \\",(0,e.jsx)(n.a,{href:\\"#user-content-fnref-1\\",\\"aria-label\\":\\"Back to reference 1\\",className:\\"data-footnote-backref\\",\\"data-footnote-backref\\":\\"\\",children:\\"\\\\u21A9\\"})]})}),(0,e.jsx)(n.li,{id:\\"user-content-fn-2\\",children:(0,e.jsxs)(n.p,{children:[\\"This is different from Next.js App Directory layouts and are best thought of as reusable React containers. \\",(0,e.jsx)(n.a,{href:\\"#user-content-fnref-2\\",\\"aria-label\\":\\"Back to reference 2\\",className:\\"data-footnote-backref\\",\\"data-footnote-backref\\":\\"\\",children:\\"\\\\u21A9\\"})]})}),(0,e.jsx)(n.li,{id:\\"user-content-fn-3\\",children:(0,e.jsxs)(n.p,{children:[\\"This takes advantage of Server Components by making it simple to specify the layout of choice in the markdown file and match against the \\",(0,e.jsx)(n.code,{children:\\"layouts\\"}),\\" object which is then used to render the appropriate layout component. \\",(0,e.jsx)(n.a,{href:\\"#user-content-fnref-3\\",\\"aria-label\\":\\"Back to reference 3\\",className:\\"data-footnote-backref\\",\\"data-footnote-backref\\":\\"\\",children:\\"\\\\u21A9\\"})]})})]})]})]})}function p(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(d,{...a})}):d(a)}function h(a,n){throw new Error(\\"Expected \\"+(n?\\"component\\":\\"object\\")+\\" `\\"+a+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return b(x);})();\\n;return Component;"},"_id":"blog/release-of-tailwind-nextjs-starter-blog-v2.0.mdx","_raw":{"sourceFilePath":"blog/release-of-tailwind-nextjs-starter-blog-v2.0.mdx","sourceFileName":"release-of-tailwind-nextjs-starter-blog-v2.0.mdx","sourceFileDir":"blog","contentType":"mdx","flattenedPath":"blog/release-of-tailwind-nextjs-starter-blog-v2.0"},"type":"Blog","readingTime":{"text":"10 min read","minutes":9.055,"time":543300,"words":1811},"slug":"release-of-tailwind-nextjs-starter-blog-v2.0","path":"blog/release-of-tailwind-nextjs-starter-blog-v2.0","filePath":"blog/release-of-tailwind-nextjs-starter-blog-v2.0.mdx","toc":[{"value":"Introduction","url":"#introduction","depth":2},{"value":"V1 to V2","url":"#v1-to-v2","depth":2},{"value":"Next.js App Directory and React Server Components","url":"#nextjs-app-directory-and-react-server-components","depth":2},{"value":"Typescript First","url":"#typescript-first","depth":2},{"value":"Contentlayer","url":"#contentlayer","depth":2},{"value":"Pliny","url":"#pliny","depth":2},{"value":"New Search Component","url":"#new-search-component","depth":2},{"value":"Algolia","url":"#algolia","depth":3},{"value":"Kbar","url":"#kbar","depth":3},{"value":"Styling and Layout Updates","url":"#styling-and-layout-updates","depth":2},{"value":"Theming","url":"#theming","depth":3},{"value":"New Layouts","url":"#new-layouts","depth":3},{"value":"Migration Recommendations","url":"#migration-recommendations","depth":2},{"value":"Conclusion","url":"#conclusion","depth":2},{"value":"Support","url":"#support","depth":2},{"value":"Licence","url":"#licence","depth":2}],"structuredData":{"@context":"https://schema.org","@type":"BlogPosting","headline":"Release of Tailwind Nextjs Starter Blog v2.0","datePublished":"2023-08-05T00:00:00.000Z","dateModified":"2023-08-05T00:00:00.000Z","description":"Release of Tailwind Nextjs Starter Blog template v2.0, refactored with Nextjs App directory and React Server Components setup.Discover the new features and how to migrate from V1.","image":"/static/images/twitter-card.png","url":"https://tailwind-nextjs-starter-blog.vercel.app/blog/release-of-tailwind-nextjs-starter-blog-v2.0"}},{"title":"The Time Machine","date":"2018-08-15T00:00:00.000Z","tags":["writings","book","reflection"],"draft":false,"summary":"The Time Traveller (for so it will be convenient to speak of him) was expounding a recondite matter to us. His pale grey eyes shone and twinkled, and his usually pale face was flushed and animated...","body":{"raw":"\\n# The Time Machine by H. G. Wells\\n\\n_Title_: The Time Machine\\n\\n_Author_: H. G. Wells\\n\\n_Subject_: Science Fiction\\n\\n_Language_: English\\n\\n_Source_: [Project Gutenberg](https://www.gutenberg.org/ebooks/35)\\n\\n## Introduction\\n\\nThe Time Traveller (for so it will be convenient to speak of him) was\\nexpounding a recondite matter to us. His pale grey eyes shone and\\ntwinkled, and his usually pale face was flushed and animated. The fire\\nburnt brightly, and the soft radiance of the incandescent lights in the\\nlilies of silver caught the bubbles that flashed and passed in our\\nglasses. Our chairs, being his patents, embraced and caressed us rather\\nthan submitted to be sat upon, and there was that luxurious\\nafter-dinner atmosphere, when thought runs gracefully free of the\\ntrammels of precision. And he put it to us in this way—marking the\\npoints with a lean forefinger—as we sat and lazily admired his\\nearnestness over this new paradox (as we thought it) and his fecundity.\\n\\n“You must follow me carefully. I shall have to controvert one or two\\nideas that are almost universally accepted. The geometry, for instance,\\nthey taught you at school is founded on a misconception.”\\n\\n“Is not that rather a large thing to expect us to begin upon?” said\\nFilby, an argumentative person with red hair.\\n\\n“I do not mean to ask you to accept anything without reasonable ground\\nfor it. You will soon admit as much as I need from you. You know of\\ncourse that a mathematical line, a line of thickness _nil_, has no real\\nexistence. They taught you that? Neither has a mathematical plane.\\nThese things are mere abstractions.”\\n\\n“That is all right,” said the Psychologist.\\n\\n“Nor, having only length, breadth, and thickness, can a cube have a\\nreal existence.”\\n\\n“There I object,” said Filby. “Of course a solid body may exist. All\\nreal things—”\\n\\n“So most people think. But wait a moment. Can an _instantaneous_ cube\\nexist?”\\n\\n“Don’t follow you,” said Filby.\\n\\n“Can a cube that does not last for any time at all, have a real\\nexistence?”\\n\\nFilby became pensive. “Clearly,” the Time Traveller proceeded, “any\\nreal body must have extension in _four_ directions: it must have\\nLength, Breadth, Thickness, and—Duration. But through a natural\\ninfirmity of the flesh, which I will explain to you in a moment, we\\nincline to overlook this fact. There are really four dimensions, three\\nwhich we call the three planes of Space, and a fourth, Time. There is,\\nhowever, a tendency to draw an unreal distinction between the former\\nthree dimensions and the latter, because it happens that our\\nconsciousness moves intermittently in one direction along the latter\\nfrom the beginning to the end of our lives.”\\n\\n“That,” said a very young man, making spasmodic efforts to relight his\\ncigar over the lamp; “that . . . very clear indeed.”\\n\\n“Now, it is very remarkable that this is so extensively overlooked,”\\ncontinued the Time Traveller, with a slight accession of cheerfulness.\\n“Really this is what is meant by the Fourth Dimension, though some\\npeople who talk about the Fourth Dimension do not know they mean it. It\\nis only another way of looking at Time. _There is no difference between\\nTime and any of the three dimensions of Space except that our\\nconsciousness moves along it_. But some foolish people have got hold of\\nthe wrong side of that idea. You have all heard what they have to say\\nabout this Fourth Dimension?”\\n\\n“_I_ have not,” said the Provincial Mayor.\\n\\n“It is simply this. That Space, as our mathematicians have it, is\\nspoken of as having three dimensions, which one may call Length,\\nBreadth, and Thickness, and is always definable by reference to three\\nplanes, each at right angles to the others. But some philosophical\\npeople have been asking why _three_ dimensions particularly—why not\\nanother direction at right angles to the other three?—and have even\\ntried to construct a Four-Dimensional geometry. Professor Simon Newcomb\\nwas expounding this to the New York Mathematical Society only a month\\nor so ago. You know how on a flat surface, which has only two\\ndimensions, we can represent a figure of a three-dimensional solid, and\\nsimilarly they think that by models of three dimensions they could\\nrepresent one of four—if they could master the perspective of the\\nthing. See?”\\n\\n“I think so,” murmured the Provincial Mayor; and, knitting his brows,\\nhe lapsed into an introspective state, his lips moving as one who\\nrepeats mystic words. “Yes, I think I see it now,” he said after some\\ntime, brightening in a quite transitory manner.\\n\\n“Well, I do not mind telling you I have been at work upon this geometry\\nof Four Dimensions for some time. Some of my results are curious. For\\ninstance, here is a portrait of a man at eight years old, another at\\nfifteen, another at seventeen, another at twenty-three, and so on. All\\nthese are evidently sections, as it were, Three-Dimensional\\nrepresentations of his Four-Dimensioned being, which is a fixed and\\nunalterable thing.\\n\\n“Scientific people,” proceeded the Time Traveller, after the pause\\nrequired for the proper assimilation of this, “know very well that Time\\nis only a kind of Space. Here is a popular scientific diagram, a\\nweather record. This line I trace with my finger shows the movement of\\nthe barometer. Yesterday it was so high, yesterday night it fell, then\\nthis morning it rose again, and so gently upward to here. Surely the\\nmercury did not trace this line in any of the dimensions of Space\\ngenerally recognised? But certainly it traced such a line, and that\\nline, therefore, we must conclude, was along the Time-Dimension.”\\n\\n“But,” said the Medical Man, staring hard at a coal in the fire, “if\\nTime is really only a fourth dimension of Space, why is it, and why has\\nit always been, regarded as something different? And why cannot we move\\nin Time as we move about in the other dimensions of Space?”\\n\\nThe Time Traveller smiled. “Are you so sure we can move freely in\\nSpace? Right and left we can go, backward and forward freely enough,\\nand men always have done so. I admit we move freely in two dimensions.\\nBut how about up and down? Gravitation limits us there.”\\n\\n“Not exactly,” said the Medical Man. “There are balloons.”\\n\\n“But before the balloons, save for spasmodic jumping and the\\ninequalities of the surface, man had no freedom of vertical movement.”\\n\\n“Still they could move a little up and down,” said the Medical Man.\\n\\n“Easier, far easier down than up.”\\n\\n“And you cannot move at all in Time, you cannot get away from the\\npresent moment.”\\n\\n“My dear sir, that is just where you are wrong. That is just where the\\nwhole world has gone wrong. We are always getting away from the present\\nmoment. Our mental existences, which are immaterial and have no\\ndimensions, are passing along the Time-Dimension with a uniform\\nvelocity from the cradle to the grave. Just as we should travel _down_\\nif we began our existence fifty miles above the earth’s surface.”\\n\\n“But the great difficulty is this,” interrupted the Psychologist. ’You\\n_can_ move about in all directions of Space, but you cannot move about\\nin Time.”\\n\\n“That is the germ of my great discovery. But you are wrong to say that\\nwe cannot move about in Time. For instance, if I am recalling an\\nincident very vividly I go back to the instant of its occurrence: I\\nbecome absent-minded, as you say. I jump back for a moment. Of course\\nwe have no means of staying back for any length of Time, any more than\\na savage or an animal has of staying six feet above the ground. But a\\ncivilised man is better off than the savage in this respect. He can go\\nup against gravitation in a balloon, and why should he not hope that\\nultimately he may be able to stop or accelerate his drift along the\\nTime-Dimension, or even turn about and travel the other way?”\\n\\n“Oh, _this_,” began Filby, “is all—”\\n\\n“Why not?” said the Time Traveller.\\n\\n“It’s against reason,” said Filby.\\n\\n“What reason?” said the Time Traveller.\\n\\n“You can show black is white by argument,” said Filby, “but you will\\nnever convince me.”\\n\\n“Possibly not,” said the Time Traveller. “But now you begin to see the\\nobject of my investigations into the geometry of Four Dimensions. Long\\nago I had a vague inkling of a machine—”\\n\\n“To travel through Time!” exclaimed the Very Young Man.\\n\\n“That shall travel indifferently in any direction of Space and Time, as\\nthe driver determines.”\\n\\nFilby contented himself with laughter.\\n\\n“But I have experimental verification,” said the Time Traveller.\\n\\n“It would be remarkably convenient for the historian,” the Psychologist\\nsuggested. “One might travel back and verify the accepted account of\\nthe Battle of Hastings, for instance!”\\n\\n“Don’t you think you would attract attention?” said the Medical Man.\\n“Our ancestors had no great tolerance for anachronisms.”\\n\\n“One might get one’s Greek from the very lips of Homer and Plato,” the\\nVery Young Man thought.\\n\\n“In which case they would certainly plough you for the Little-go. The\\nGerman scholars have improved Greek so much.”\\n\\n“Then there is the future,” said the Very Young Man. “Just think! One\\nmight invest all one’s money, leave it to accumulate at interest, and\\nhurry on ahead!”\\n\\n“To discover a society,” said I, “erected on a strictly communistic\\nbasis.”\\n\\n“Of all the wild extravagant theories!” began the Psychologist.\\n\\n“Yes, so it seemed to me, and so I never talked of it until—”\\n\\n“Experimental verification!” cried I. “You are going to verify _that_?”\\n\\n“The experiment!” cried Filby, who was getting brain-weary.\\n\\n“Let’s see your experiment anyhow,” said the Psychologist, “though it’s\\nall humbug, you know.”\\n\\nThe Time Traveller smiled round at us. Then, still smiling faintly, and\\nwith his hands deep in his trousers pockets, he walked slowly out of\\nthe room, and we heard his slippers shuffling down the long passage to\\nhis laboratory.\\n\\nThe Psychologist looked at us. “I wonder what he’s got?”\\n\\n“Some sleight-of-hand trick or other,” said the Medical Man, and Filby\\ntried to tell us about a conjuror he had seen at Burslem, but before he\\nhad finished his preface the Time Traveller came back, and Filby’s\\nanecdote collapsed.\\n","code":"var Component=(()=>{var m=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),w=(a,e)=>{for(var n in e)o(a,n,{get:e[n],enumerable:!0})},h=(a,e,n,r)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let i of p(e))!f.call(a,i)&&i!==n&&o(a,i,{get:()=>e[i],enumerable:!(r=u(e,i))||r.enumerable});return a};var v=(a,e,n)=>(n=a!=null?m(y(a)):{},h(e||!a||!a.__esModule?o(n,\\"default\\",{value:a,enumerable:!0}):n,a)),b=a=>h(o({},\\"__esModule\\",{value:!0}),a);var l=g((I,s)=>{s.exports=_jsx_runtime});var k={};w(k,{default:()=>c,frontmatter:()=>T});var t=v(l()),T={title:\\"The Time Machine\\",date:\\"2018-08-15\\",tags:[\\"writings\\",\\"book\\",\\"reflection\\"],draft:!1,summary:\\"The Time Traveller (for so it will be convenient to speak of him) was expounding a recondite matter to us. His pale grey eyes shone and twinkled, and his usually pale face was flushed and animated...\\"};function d(a){let e={a:\\"a\\",em:\\"em\\",h1:\\"h1\\",h2:\\"h2\\",p:\\"p\\",path:\\"path\\",span:\\"span\\",svg:\\"svg\\",...a.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.h1,{className:\\"content-header\\",id:\\"the-time-machine-by-h-g-wells\\",children:[(0,t.jsx)(e.a,{href:\\"#the-time-machine-by-h-g-wells\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,t.jsx)(t.Fragment,{children:(0,t.jsx)(e.span,{className:\\"content-header-link\\",children:(0,t.jsxs)(e.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,t.jsx)(e.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,t.jsx)(e.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"The Time Machine by H. G. Wells\\"]}),(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.em,{children:\\"Title\\"}),\\": The Time Machine\\"]}),(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.em,{children:\\"Author\\"}),\\": H. G. Wells\\"]}),(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.em,{children:\\"Subject\\"}),\\": Science Fiction\\"]}),(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.em,{children:\\"Language\\"}),\\": English\\"]}),(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.em,{children:\\"Source\\"}),\\": \\",(0,t.jsx)(e.a,{href:\\"https://www.gutenberg.org/ebooks/35\\",children:\\"Project Gutenberg\\"})]}),(0,t.jsxs)(e.h2,{className:\\"content-header\\",id:\\"introduction\\",children:[(0,t.jsx)(e.a,{href:\\"#introduction\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,t.jsx)(t.Fragment,{children:(0,t.jsx)(e.span,{className:\\"content-header-link\\",children:(0,t.jsxs)(e.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,t.jsx)(e.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,t.jsx)(e.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Introduction\\"]}),(0,t.jsx)(e.p,{children:\\"The Time Traveller (for so it will be convenient to speak of him) was expounding a recondite matter to us. His pale grey eyes shone and twinkled, and his usually pale face was flushed and animated. The fire burnt brightly, and the soft radiance of the incandescent lights in the lilies of silver caught the bubbles that flashed and passed in our glasses. Our chairs, being his patents, embraced and caressed us rather than submitted to be sat upon, and there was that luxurious after-dinner atmosphere, when thought runs gracefully free of the trammels of precision. And he put it to us in this way\\\\u2014marking the points with a lean forefinger\\\\u2014as we sat and lazily admired his earnestness over this new paradox (as we thought it) and his fecundity.\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CYou must follow me carefully. I shall have to controvert one or two ideas that are almost universally accepted. The geometry, for instance, they taught you at school is founded on a misconception.\\\\u201D\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CIs not that rather a large thing to expect us to begin upon?\\\\u201D said Filby, an argumentative person with red hair.\\"}),(0,t.jsxs)(e.p,{children:[\\"\\\\u201CI do not mean to ask you to accept anything without reasonable ground for it. You will soon admit as much as I need from you. You know of course that a mathematical line, a line of thickness \\",(0,t.jsx)(e.em,{children:\\"nil\\"}),\\", has no real existence. They taught you that? Neither has a mathematical plane. These things are mere abstractions.\\\\u201D\\"]}),(0,t.jsx)(e.p,{children:\\"\\\\u201CThat is all right,\\\\u201D said the Psychologist.\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CNor, having only length, breadth, and thickness, can a cube have a real existence.\\\\u201D\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CThere I object,\\\\u201D said Filby. \\\\u201COf course a solid body may exist. All real things\\\\u2014\\\\u201D\\"}),(0,t.jsxs)(e.p,{children:[\\"\\\\u201CSo most people think. But wait a moment. Can an \\",(0,t.jsx)(e.em,{children:\\"instantaneous\\"}),\\" cube exist?\\\\u201D\\"]}),(0,t.jsx)(e.p,{children:\\"\\\\u201CDon\\\\u2019t follow you,\\\\u201D said Filby.\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CCan a cube that does not last for any time at all, have a real existence?\\\\u201D\\"}),(0,t.jsxs)(e.p,{children:[\\"Filby became pensive. \\\\u201CClearly,\\\\u201D the Time Traveller proceeded, \\\\u201Cany real body must have extension in \\",(0,t.jsx)(e.em,{children:\\"four\\"}),\\" directions: it must have Length, Breadth, Thickness, and\\\\u2014Duration. But through a natural infirmity of the flesh, which I will explain to you in a moment, we incline to overlook this fact. There are really four dimensions, three which we call the three planes of Space, and a fourth, Time. There is, however, a tendency to draw an unreal distinction between the former three dimensions and the latter, because it happens that our consciousness moves intermittently in one direction along the latter from the beginning to the end of our lives.\\\\u201D\\"]}),(0,t.jsx)(e.p,{children:\\"\\\\u201CThat,\\\\u201D said a very young man, making spasmodic efforts to relight his cigar over the lamp; \\\\u201Cthat . . . very clear indeed.\\\\u201D\\"}),(0,t.jsxs)(e.p,{children:[\\"\\\\u201CNow, it is very remarkable that this is so extensively overlooked,\\\\u201D continued the Time Traveller, with a slight accession of cheerfulness. \\\\u201CReally this is what is meant by the Fourth Dimension, though some people who talk about the Fourth Dimension do not know they mean it. It is only another way of looking at Time. \\",(0,t.jsx)(e.em,{children:\\"There is no difference between Time and any of the three dimensions of Space except that our consciousness moves along it\\"}),\\". But some foolish people have got hold of the wrong side of that idea. You have all heard what they have to say about this Fourth Dimension?\\\\u201D\\"]}),(0,t.jsxs)(e.p,{children:[\\"\\\\u201C\\",(0,t.jsx)(e.em,{children:\\"I\\"}),\\" have not,\\\\u201D said the Provincial Mayor.\\"]}),(0,t.jsxs)(e.p,{children:[\\"\\\\u201CIt is simply this. That Space, as our mathematicians have it, is spoken of as having three dimensions, which one may call Length, Breadth, and Thickness, and is always definable by reference to three planes, each at right angles to the others. But some philosophical people have been asking why \\",(0,t.jsx)(e.em,{children:\\"three\\"}),\\" dimensions particularly\\\\u2014why not another direction at right angles to the other three?\\\\u2014and have even tried to construct a Four-Dimensional geometry. Professor Simon Newcomb was expounding this to the New York Mathematical Society only a month or so ago. You know how on a flat surface, which has only two dimensions, we can represent a figure of a three-dimensional solid, and similarly they think that by models of three dimensions they could represent one of four\\\\u2014if they could master the perspective of the thing. See?\\\\u201D\\"]}),(0,t.jsx)(e.p,{children:\\"\\\\u201CI think so,\\\\u201D murmured the Provincial Mayor; and, knitting his brows, he lapsed into an introspective state, his lips moving as one who repeats mystic words. \\\\u201CYes, I think I see it now,\\\\u201D he said after some time, brightening in a quite transitory manner.\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CWell, I do not mind telling you I have been at work upon this geometry of Four Dimensions for some time. Some of my results are curious. For instance, here is a portrait of a man at eight years old, another at fifteen, another at seventeen, another at twenty-three, and so on. All these are evidently sections, as it were, Three-Dimensional representations of his Four-Dimensioned being, which is a fixed and unalterable thing.\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CScientific people,\\\\u201D proceeded the Time Traveller, after the pause required for the proper assimilation of this, \\\\u201Cknow very well that Time is only a kind of Space. Here is a popular scientific diagram, a weather record. This line I trace with my finger shows the movement of the barometer. Yesterday it was so high, yesterday night it fell, then this morning it rose again, and so gently upward to here. Surely the mercury did not trace this line in any of the dimensions of Space generally recognised? But certainly it traced such a line, and that line, therefore, we must conclude, was along the Time-Dimension.\\\\u201D\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CBut,\\\\u201D said the Medical Man, staring hard at a coal in the fire, \\\\u201Cif Time is really only a fourth dimension of Space, why is it, and why has it always been, regarded as something different? And why cannot we move in Time as we move about in the other dimensions of Space?\\\\u201D\\"}),(0,t.jsx)(e.p,{children:\\"The Time Traveller smiled. \\\\u201CAre you so sure we can move freely in Space? Right and left we can go, backward and forward freely enough, and men always have done so. I admit we move freely in two dimensions. But how about up and down? Gravitation limits us there.\\\\u201D\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CNot exactly,\\\\u201D said the Medical Man. \\\\u201CThere are balloons.\\\\u201D\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CBut before the balloons, save for spasmodic jumping and the inequalities of the surface, man had no freedom of vertical movement.\\\\u201D\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CStill they could move a little up and down,\\\\u201D said the Medical Man.\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CEasier, far easier down than up.\\\\u201D\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CAnd you cannot move at all in Time, you cannot get away from the present moment.\\\\u201D\\"}),(0,t.jsxs)(e.p,{children:[\\"\\\\u201CMy dear sir, that is just where you are wrong. That is just where the whole world has gone wrong. We are always getting away from the present moment. Our mental existences, which are immaterial and have no dimensions, are passing along the Time-Dimension with a uniform velocity from the cradle to the grave. Just as we should travel \\",(0,t.jsx)(e.em,{children:\\"down\\"}),\\" if we began our existence fifty miles above the earth\\\\u2019s surface.\\\\u201D\\"]}),(0,t.jsxs)(e.p,{children:[\\"\\\\u201CBut the great difficulty is this,\\\\u201D interrupted the Psychologist. \\\\u2019You \\",(0,t.jsx)(e.em,{children:\\"can\\"}),\\" move about in all directions of Space, but you cannot move about in Time.\\\\u201D\\"]}),(0,t.jsx)(e.p,{children:\\"\\\\u201CThat is the germ of my great discovery. But you are wrong to say that we cannot move about in Time. For instance, if I am recalling an incident very vividly I go back to the instant of its occurrence: I become absent-minded, as you say. I jump back for a moment. Of course we have no means of staying back for any length of Time, any more than a savage or an animal has of staying six feet above the ground. But a civilised man is better off than the savage in this respect. He can go up against gravitation in a balloon, and why should he not hope that ultimately he may be able to stop or accelerate his drift along the Time-Dimension, or even turn about and travel the other way?\\\\u201D\\"}),(0,t.jsxs)(e.p,{children:[\\"\\\\u201COh, \\",(0,t.jsx)(e.em,{children:\\"this\\"}),\\",\\\\u201D began Filby, \\\\u201Cis all\\\\u2014\\\\u201D\\"]}),(0,t.jsx)(e.p,{children:\\"\\\\u201CWhy not?\\\\u201D said the Time Traveller.\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CIt\\\\u2019s against reason,\\\\u201D said Filby.\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CWhat reason?\\\\u201D said the Time Traveller.\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CYou can show black is white by argument,\\\\u201D said Filby, \\\\u201Cbut you will never convince me.\\\\u201D\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CPossibly not,\\\\u201D said the Time Traveller. \\\\u201CBut now you begin to see the object of my investigations into the geometry of Four Dimensions. Long ago I had a vague inkling of a machine\\\\u2014\\\\u201D\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CTo travel through Time!\\\\u201D exclaimed the Very Young Man.\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CThat shall travel indifferently in any direction of Space and Time, as the driver determines.\\\\u201D\\"}),(0,t.jsx)(e.p,{children:\\"Filby contented himself with laughter.\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CBut I have experimental verification,\\\\u201D said the Time Traveller.\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CIt would be remarkably convenient for the historian,\\\\u201D the Psychologist suggested. \\\\u201COne might travel back and verify the accepted account of the Battle of Hastings, for instance!\\\\u201D\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CDon\\\\u2019t you think you would attract attention?\\\\u201D said the Medical Man. \\\\u201COur ancestors had no great tolerance for anachronisms.\\\\u201D\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201COne might get one\\\\u2019s Greek from the very lips of Homer and Plato,\\\\u201D the Very Young Man thought.\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CIn which case they would certainly plough you for the Little-go. The German scholars have improved Greek so much.\\\\u201D\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CThen there is the future,\\\\u201D said the Very Young Man. \\\\u201CJust think! One might invest all one\\\\u2019s money, leave it to accumulate at interest, and hurry on ahead!\\\\u201D\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CTo discover a society,\\\\u201D said I, \\\\u201Cerected on a strictly communistic basis.\\\\u201D\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201COf all the wild extravagant theories!\\\\u201D began the Psychologist.\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CYes, so it seemed to me, and so I never talked of it until\\\\u2014\\\\u201D\\"}),(0,t.jsxs)(e.p,{children:[\\"\\\\u201CExperimental verification!\\\\u201D cried I. \\\\u201CYou are going to verify \\",(0,t.jsx)(e.em,{children:\\"that\\"}),\\"?\\\\u201D\\"]}),(0,t.jsx)(e.p,{children:\\"\\\\u201CThe experiment!\\\\u201D cried Filby, who was getting brain-weary.\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CLet\\\\u2019s see your experiment anyhow,\\\\u201D said the Psychologist, \\\\u201Cthough it\\\\u2019s all humbug, you know.\\\\u201D\\"}),(0,t.jsx)(e.p,{children:\\"The Time Traveller smiled round at us. Then, still smiling faintly, and with his hands deep in his trousers pockets, he walked slowly out of the room, and we heard his slippers shuffling down the long passage to his laboratory.\\"}),(0,t.jsx)(e.p,{children:\\"The Psychologist looked at us. \\\\u201CI wonder what he\\\\u2019s got?\\\\u201D\\"}),(0,t.jsx)(e.p,{children:\\"\\\\u201CSome sleight-of-hand trick or other,\\\\u201D said the Medical Man, and Filby tried to tell us about a conjuror he had seen at Burslem, but before he had finished his preface the Time Traveller came back, and Filby\\\\u2019s anecdote collapsed.\\"})]})}function c(a={}){let{wrapper:e}=a.components||{};return e?(0,t.jsx)(e,{...a,children:(0,t.jsx)(d,{...a})}):d(a)}return b(k);})();\\n;return Component;"},"_id":"blog/the-time-machine.mdx","_raw":{"sourceFilePath":"blog/the-time-machine.mdx","sourceFileName":"the-time-machine.mdx","sourceFileDir":"blog","contentType":"mdx","flattenedPath":"blog/the-time-machine"},"type":"Blog","readingTime":{"text":"9 min read","minutes":8.53,"time":511800,"words":1706},"slug":"the-time-machine","path":"blog/the-time-machine","filePath":"blog/the-time-machine.mdx","toc":[{"value":"The Time Machine by H. G. Wells","url":"#the-time-machine-by-h-g-wells","depth":1},{"value":"Introduction","url":"#introduction","depth":2}],"structuredData":{"@context":"https://schema.org","@type":"BlogPosting","headline":"The Time Machine","datePublished":"2018-08-15T00:00:00.000Z","dateModified":"2018-08-15T00:00:00.000Z","description":"The Time Traveller (for so it will be convenient to speak of him) was expounding a recondite matter to us. His pale grey eyes shone and twinkled, and his usually pale face was flushed and animated...","image":"/static/images/twitter-card.png","url":"https://tailwind-nextjs-starter-blog.vercel.app/blog/the-time-machine"}},{"title":"Introducing Multi-part Posts with Nested Routing","date":"2021-05-02T00:00:00.000Z","tags":["multi-author","next-js","feature"],"draft":false,"summary":"The blog template supports posts in nested sub-folders. This can be used to group posts of similar content e.g. a multi-part course. This post is itself an example of a nested route!","body":{"raw":"\\n# Nested Routes\\n\\nThe blog template supports posts in nested sub-folders. This helps in organisation and can be used to group posts of similar content e.g. a multi-part series. This post is itself an example of a nested route! It\'s located in the `/data/blog/nested-route` folder.\\n\\n## How\\n\\nSimplify create multiple folders inside the main `/data/blog` folder and add your `.md`/`.mdx` files to them. You can even create something like `/data/blog/nested-route/deeply-nested-route/my-post.md`\\n\\nWe use Next.js catch all routes to handle the routing and path creations.\\n\\n## Use Cases\\n\\nHere are some reasons to use nested routes\\n\\n- More logical content organisation (blogs will still be displayed based on the created date)\\n- Multi-part posts\\n- Different sub-routes for each author\\n- Internationalization (though it would be recommended to use [Next.js built-in i8n routing](https://nextjs.org/docs/advanced-features/i18n-routing))\\n\\n## Note\\n\\n- The previous/next post links at bottom of the template are currently sorted by date. One could explore modifying the template to refer the reader to the previous/next post in the series, rather than by date.\\n","code":"var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var w=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),x=(a,e)=>{for(var n in e)s(a,n,{get:e[n],enumerable:!0})},o=(a,e,n,r)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let l of m(e))!f.call(a,l)&&l!==n&&s(a,l,{get:()=>e[l],enumerable:!(r=p(e,l))||r.enumerable});return a};var b=(a,e,n)=>(n=a!=null?u(g(a)):{},o(e||!a||!a.__esModule?s(n,\\"default\\",{value:a,enumerable:!0}):n,a)),v=a=>o(s({},\\"__esModule\\",{value:!0}),a);var d=w((k,i)=>{i.exports=_jsx_runtime});var M={};x(M,{default:()=>c,frontmatter:()=>N});var t=b(d()),N={title:\\"Introducing Multi-part Posts with Nested Routing\\",date:\\"2021-05-02\\",tags:[\\"multi-author\\",\\"next-js\\",\\"feature\\"],draft:!1,summary:\\"The blog template supports posts in nested sub-folders. This can be used to group posts of similar content e.g. a multi-part course. This post is itself an example of a nested route!\\"};function h(a){let e={a:\\"a\\",code:\\"code\\",h1:\\"h1\\",h2:\\"h2\\",li:\\"li\\",p:\\"p\\",path:\\"path\\",span:\\"span\\",svg:\\"svg\\",ul:\\"ul\\",...a.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(e.h1,{className:\\"content-header\\",id:\\"nested-routes\\",children:[(0,t.jsx)(e.a,{href:\\"#nested-routes\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,t.jsx)(t.Fragment,{children:(0,t.jsx)(e.span,{className:\\"content-header-link\\",children:(0,t.jsxs)(e.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,t.jsx)(e.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,t.jsx)(e.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Nested Routes\\"]}),(0,t.jsxs)(e.p,{children:[\\"The blog template supports posts in nested sub-folders. This helps in organisation and can be used to group posts of similar content e.g. a multi-part series. This post is itself an example of a nested route! It\'s located in the \\",(0,t.jsx)(e.code,{children:\\"/data/blog/nested-route\\"}),\\" folder.\\"]}),(0,t.jsxs)(e.h2,{className:\\"content-header\\",id:\\"how\\",children:[(0,t.jsx)(e.a,{href:\\"#how\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,t.jsx)(t.Fragment,{children:(0,t.jsx)(e.span,{className:\\"content-header-link\\",children:(0,t.jsxs)(e.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,t.jsx)(e.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,t.jsx)(e.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"How\\"]}),(0,t.jsxs)(e.p,{children:[\\"Simplify create multiple folders inside the main \\",(0,t.jsx)(e.code,{children:\\"/data/blog\\"}),\\" folder and add your \\",(0,t.jsx)(e.code,{children:\\".md\\"}),\\"/\\",(0,t.jsx)(e.code,{children:\\".mdx\\"}),\\" files to them. You can even create something like \\",(0,t.jsx)(e.code,{children:\\"/data/blog/nested-route/deeply-nested-route/my-post.md\\"})]}),(0,t.jsx)(e.p,{children:\\"We use Next.js catch all routes to handle the routing and path creations.\\"}),(0,t.jsxs)(e.h2,{className:\\"content-header\\",id:\\"use-cases\\",children:[(0,t.jsx)(e.a,{href:\\"#use-cases\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,t.jsx)(t.Fragment,{children:(0,t.jsx)(e.span,{className:\\"content-header-link\\",children:(0,t.jsxs)(e.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,t.jsx)(e.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,t.jsx)(e.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Use Cases\\"]}),(0,t.jsx)(e.p,{children:\\"Here are some reasons to use nested routes\\"}),(0,t.jsxs)(e.ul,{children:[(0,t.jsx)(e.li,{children:\\"More logical content organisation (blogs will still be displayed based on the created date)\\"}),(0,t.jsx)(e.li,{children:\\"Multi-part posts\\"}),(0,t.jsx)(e.li,{children:\\"Different sub-routes for each author\\"}),(0,t.jsxs)(e.li,{children:[\\"Internationalization (though it would be recommended to use \\",(0,t.jsx)(e.a,{href:\\"https://nextjs.org/docs/advanced-features/i18n-routing\\",children:\\"Next.js built-in i8n routing\\"}),\\")\\"]})]}),(0,t.jsxs)(e.h2,{className:\\"content-header\\",id:\\"note\\",children:[(0,t.jsx)(e.a,{href:\\"#note\\",\\"aria-hidden\\":\\"true\\",tabIndex:\\"-1\\",children:(0,t.jsx)(t.Fragment,{children:(0,t.jsx)(e.span,{className:\\"content-header-link\\",children:(0,t.jsxs)(e.svg,{className:\\"h-5 linkicon w-5\\",fill:\\"currentColor\\",viewBox:\\"0 0 20 20\\",xmlns:\\"http://www.w3.org/2000/svg\\",children:[(0,t.jsx)(e.path,{d:\\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\\"}),(0,t.jsx)(e.path,{d:\\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\\"})]})})})}),\\"Note\\"]}),(0,t.jsx)(e.ul,{children:(0,t.jsx)(e.li,{children:\\"The previous/next post links at bottom of the template are currently sorted by date. One could explore modifying the template to refer the reader to the previous/next post in the series, rather than by date.\\"})})]})}function c(a={}){let{wrapper:e}=a.components||{};return e?(0,t.jsx)(e,{...a,children:(0,t.jsx)(h,{...a})}):h(a)}return v(M);})();\\n;return Component;"},"_id":"blog/nested-route/introducing-multi-part-posts-with-nested-routing.mdx","_raw":{"sourceFilePath":"blog/nested-route/introducing-multi-part-posts-with-nested-routing.mdx","sourceFileName":"introducing-multi-part-posts-with-nested-routing.mdx","sourceFileDir":"blog/nested-route","contentType":"mdx","flattenedPath":"blog/nested-route/introducing-multi-part-posts-with-nested-routing"},"type":"Blog","readingTime":{"text":"1 min read","minutes":0.845,"time":50700,"words":169},"slug":"nested-route/introducing-multi-part-posts-with-nested-routing","path":"blog/nested-route/introducing-multi-part-posts-with-nested-routing","filePath":"blog/nested-route/introducing-multi-part-posts-with-nested-routing.mdx","toc":[{"value":"Nested Routes","url":"#nested-routes","depth":1},{"value":"How","url":"#how","depth":2},{"value":"Use Cases","url":"#use-cases","depth":2},{"value":"Note","url":"#note","depth":2}],"structuredData":{"@context":"https://schema.org","@type":"BlogPosting","headline":"Introducing Multi-part Posts with Nested Routing","datePublished":"2021-05-02T00:00:00.000Z","dateModified":"2021-05-02T00:00:00.000Z","description":"The blog template supports posts in nested sub-folders. This can be used to group posts of similar content e.g. a multi-part course. This post is itself an example of a nested route!","image":"/static/images/twitter-card.png","url":"https://tailwind-nextjs-starter-blog.vercel.app/blog/nested-route/introducing-multi-part-posts-with-nested-routing"}}]'),t=JSON.parse('[{"name":"Tails Azimuth","avatar":"/static/images/avatar.png","occupation":"Professor of Atmospheric Science","company":"Stanford University","email":"address@yoursite.com","twitter":"https://twitter.com/Twitter","linkedin":"https://www.linkedin.com","github":"https://github.com","body":{"raw":"\\nTails Azimuth is a professor of atmospheric sciences at the Stanford AI Lab. His research interests includes complexity modelling of tailwinds, headwinds and crosswinds.\\n\\nHe leads the clean energy group which develops 3D air pollution-climate models, writes differential equation solvers, and manufactures titanium plated air ballons. In his free time he bakes raspberry pi.\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.\\n","code":"var Component=(()=>{var d=Object.create;var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),x=(e,t)=>{for(var s in t)n(e,s,{get:t[s],enumerable:!0})},o=(e,t,s,r)=>{if(t&&typeof t==\\"object\\"||typeof t==\\"function\\")for(let a of h(t))!g.call(e,a)&&a!==s&&n(e,a,{get:()=>t[a],enumerable:!(r=p(t,a))||r.enumerable});return e};var v=(e,t,s)=>(s=e!=null?d(f(e)):{},o(t||!e||!e.__esModule?n(s,\\"default\\",{value:e,enumerable:!0}):s,e)),b=e=>o(n({},\\"__esModule\\",{value:!0}),e);var l=w((q,c)=>{c.exports=_jsx_runtime});var _={};x(_,{default:()=>m,frontmatter:()=>y});var i=v(l()),y={name:\\"Tails Azimuth\\",avatar:\\"/static/images/avatar.png\\",occupation:\\"Professor of Atmospheric Science\\",company:\\"Stanford University\\",email:\\"address@yoursite.com\\",twitter:\\"https://twitter.com/Twitter\\",linkedin:\\"https://www.linkedin.com\\",github:\\"https://github.com\\"};function u(e){let t={p:\\"p\\",...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:\\"Tails Azimuth is a professor of atmospheric sciences at the Stanford AI Lab. His research interests includes complexity modelling of tailwinds, headwinds and crosswinds.\\"}),(0,i.jsx)(t.p,{children:\\"He leads the clean energy group which develops 3D air pollution-climate models, writes differential equation solvers, and manufactures titanium plated air ballons. In his free time he bakes raspberry pi.\\"}),(0,i.jsx)(t.p,{children:\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.\\"})]})}function m(e={}){let{wrapper:t}=e.components||{};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}return b(_);})();\\n;return Component;"},"_id":"authors/default.mdx","_raw":{"sourceFilePath":"authors/default.mdx","sourceFileName":"default.mdx","sourceFileDir":"authors","contentType":"mdx","flattenedPath":"authors/default"},"type":"Authors","readingTime":{"text":"1 min read","minutes":0.45,"time":27000,"words":90},"slug":"default","path":"authors/default","filePath":"authors/default.mdx","toc":[]},{"name":"Sparrow Hawk","avatar":"/static/images/sparrowhawk-avatar.jpg","occupation":"Wizard of Earthsea","company":"Earthsea","twitter":"https://twitter.com/sparrowhawk","linkedin":"https://www.linkedin.com/sparrowhawk","body":{"raw":"\\nAt birth, Ged was given the child-name Duny by his mother. He was born on the island of Gont, as a son of a bronzesmith. His mother died before he reached the age of one. As a small boy, Ged had overheard the village witch, his maternal aunt, using various words of power to call goats. Ged later used the words without an understanding of their meanings, to surprising effect.\\n\\nThe witch knew that using words of power effectively without understanding them required innate power, so she endeavored to teach him what little she knew. After learning more from her, he was able to call animals to him. Particularly, he was seen in the company of wild sparrowhawks so often that his \\"use name\\" became Sparrowhawk.\\n","code":"var Component=(()=>{var m=Object.create;var o=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),k=(e,t)=>{for(var n in t)o(e,n,{get:t[n],enumerable:!0})},i=(e,t,n,s)=>{if(t&&typeof t==\\"object\\"||typeof t==\\"function\\")for(let r of p(t))!f.call(e,r)&&r!==n&&o(e,r,{get:()=>t[r],enumerable:!(s=l(t,r))||s.enumerable});return e};var x=(e,t,n)=>(n=e!=null?m(u(e)):{},i(t||!e||!e.__esModule?o(n,\\"default\\",{value:e,enumerable:!0}):n,e)),b=e=>i(o({},\\"__esModule\\",{value:!0}),e);var w=g((j,h)=>{h.exports=_jsx_runtime});var y={};k(y,{default:()=>d,frontmatter:()=>v});var a=x(w()),v={name:\\"Sparrow Hawk\\",avatar:\\"/static/images/sparrowhawk-avatar.jpg\\",occupation:\\"Wizard of Earthsea\\",company:\\"Earthsea\\",twitter:\\"https://twitter.com/sparrowhawk\\",linkedin:\\"https://www.linkedin.com/sparrowhawk\\"};function c(e){let t={p:\\"p\\",...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.p,{children:\\"At birth, Ged was given the child-name Duny by his mother. He was born on the island of Gont, as a son of a bronzesmith. His mother died before he reached the age of one. As a small boy, Ged had overheard the village witch, his maternal aunt, using various words of power to call goats. Ged later used the words without an understanding of their meanings, to surprising effect.\\"}),(0,a.jsx)(t.p,{children:\'The witch knew that using words of power effectively without understanding them required innate power, so she endeavored to teach him what little she knew. After learning more from her, he was able to call animals to him. Particularly, he was seen in the company of wild sparrowhawks so often that his \\"use name\\" became Sparrowhawk.\'})]})}function d(e={}){let{wrapper:t}=e.components||{};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(c,{...e})}):c(e)}return b(y);})();\\n;return Component;"},"_id":"authors/sparrowhawk.mdx","_raw":{"sourceFilePath":"authors/sparrowhawk.mdx","sourceFileName":"sparrowhawk.mdx","sourceFileDir":"authors","contentType":"mdx","flattenedPath":"authors/sparrowhawk"},"type":"Authors","readingTime":{"text":"1 min read","minutes":0.63,"time":37800,"words":126},"slug":"sparrowhawk","path":"authors/sparrowhawk","filePath":"authors/sparrowhawk.mdx","toc":[]}]');[...n,...t]}};
|