updated info
This commit is contained in:
parent
081f5b1f67
commit
53c673673a
@ -13,7 +13,7 @@ export default function Projects() {
|
|||||||
Projects
|
Projects
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
|
<p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
|
||||||
Showcase your projects with a hero image (16 x 9)
|
Spit, Grit and a whole lotta duct tape - Penguins of Madagascar
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="container py-12">
|
<div className="container py-12">
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
{"next-js":6,"tailwind":3,"guide":5,"feature":2,"multi-author":1,"hello":1,"math":1,"ols":1,"github":1,"writings":1,"book":1,"reflection":1,"holiday":1,"canada":1,"images":1,"markdown":1,"code":1,"features":1}
|
{"markdown":1,"code":1,"features":1,"github":1,"guide":4,"next-js":3,"tailwind":2,"yoyoyoy":1,"feature":1,"writings":1,"book":1,"reflection":1}
|
||||||
@ -1,16 +1,17 @@
|
|||||||
---
|
---
|
||||||
name: Tails Azimuth
|
name: Jonathan Branan
|
||||||
avatar: /static/images/avatar.png
|
avatar: /static/images/avatar.png
|
||||||
occupation: Professor of Atmospheric Science
|
occupation: Software Engineer
|
||||||
company: Stanford University
|
company: Fortra
|
||||||
email: address@yoursite.com
|
email: jonathan.branan@fortra.com
|
||||||
twitter: https://twitter.com/Twitter
|
linkedin: https://www.linkedin.com/in/jonathanbranan/
|
||||||
linkedin: https://www.linkedin.com
|
github: https://github.com/jonbranan
|
||||||
github: https://github.com
|
gitea: https://git.jonb.io/jblu
|
||||||
---
|
---
|
||||||
|
|
||||||
Tails Azimuth is a professor of atmospheric sciences at the Stanford AI Lab. His research interests includes complexity modelling of tailwinds, headwinds and crosswinds.
|
Jonathan Branan is a Software Engineer at Fortra. He is mostly self-taught however he did attend a vocational school at Rackspace Open Cloud Academy.
|
||||||
|
|
||||||
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.
|
He has worked for Geek Squad repairing computers, GlobalScape as a Lead of the Client Services department and as a Product Owner of MFT applications at Fortra.
|
||||||
|
|
||||||
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.
|
He currently lives in San Antonio, Texas with his wife and two dogs. He enjoys Basketball, Video games, cooking, camping(backpacking, glamping), watching movies,
|
||||||
|
making mixed drinks and building Lego's. Jonathan and his wife like to frequently travel.
|
||||||
@ -1,12 +0,0 @@
|
|||||||
---
|
|
||||||
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
|
|
||||||
---
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
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.
|
|
||||||
@ -1,143 +0,0 @@
|
|||||||
---
|
|
||||||
title: Deriving the OLS Estimator
|
|
||||||
date: '2020-12-21'
|
|
||||||
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.'
|
|
||||||
---
|
|
||||||
|
|
||||||
# Introduction
|
|
||||||
|
|
||||||
Parsing and display of math equations is included in this blog template. Parsing of math is enabled by `remark-math` and `rehype-katex`.
|
|
||||||
KaTeX and its associated font is included in `_document.js` so feel free to use it on any page.
|
|
||||||
[^footnote]
|
|
||||||
|
|
||||||
[^footnote]: For the full list of supported TeX functions, check out the [KaTeX documentation](https://katex.org/docs/supported.html)
|
|
||||||
|
|
||||||
Inline math symbols can be included by enclosing the term between the `$` symbol.
|
|
||||||
|
|
||||||
Math code blocks are denoted by `$$`.
|
|
||||||
|
|
||||||
If you intend to use the `$` sign instead of math, you can escape it (`\$`), or specify the HTML entity (`$`) [^2]
|
|
||||||
|
|
||||||
Inline or manually enumerated footnotes are also supported. Click on the links above to see them in action.
|
|
||||||
|
|
||||||
[^2]: \$10 and $20.
|
|
||||||
|
|
||||||
# Deriving the OLS Estimator
|
|
||||||
|
|
||||||
Using matrix notation, let $n$ denote the number of observations and $k$ denote the number of regressors.
|
|
||||||
|
|
||||||
The vector of outcome variables $\mathbf{Y}$ is a $n \times 1$ matrix,
|
|
||||||
|
|
||||||
```tex
|
|
||||||
\mathbf{Y} = \left[\begin{array}
|
|
||||||
{c}
|
|
||||||
y_1 \\
|
|
||||||
. \\
|
|
||||||
. \\
|
|
||||||
. \\
|
|
||||||
y_n
|
|
||||||
\end{array}\right]
|
|
||||||
```
|
|
||||||
|
|
||||||
$$
|
|
||||||
\mathbf{Y} = \left[\begin{array}
|
|
||||||
{c}
|
|
||||||
y_1 \\
|
|
||||||
. \\
|
|
||||||
. \\
|
|
||||||
. \\
|
|
||||||
y_n
|
|
||||||
\end{array}\right]
|
|
||||||
$$
|
|
||||||
|
|
||||||
The matrix of regressors $\mathbf{X}$ is a $n \times k$ matrix (or each row is a $k \times 1$ vector),
|
|
||||||
|
|
||||||
```latex
|
|
||||||
\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]
|
|
||||||
```
|
|
||||||
|
|
||||||
$$
|
|
||||||
\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]
|
|
||||||
$$
|
|
||||||
|
|
||||||
The vector of error terms $\mathbf{U}$ is also a $n \times 1$ matrix.
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
## Least Squares
|
|
||||||
|
|
||||||
**Start**:
|
|
||||||
$$y_i = \mathbf{x}'_i \beta + u_i$$
|
|
||||||
|
|
||||||
**Assumptions**:
|
|
||||||
|
|
||||||
1. Linearity (given above)
|
|
||||||
2. $E(\mathbf{U}|\mathbf{X}) = 0$ (conditional independence)
|
|
||||||
3. rank($\mathbf{X}$) = $k$ (no multi-collinearity i.e. full rank)
|
|
||||||
4. $Var(\mathbf{U}|\mathbf{X}) = \sigma^2 I_n$ (Homoskedascity)
|
|
||||||
|
|
||||||
**Aim**:
|
|
||||||
Find $\beta$ that minimises the sum of squared errors:
|
|
||||||
|
|
||||||
$$
|
|
||||||
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)
|
|
||||||
$$
|
|
||||||
|
|
||||||
**Solution**:
|
|
||||||
Hints: $Q$ is a $1 \times 1$ scalar, by symmetry $\frac{\partial b'Ab}{\partial b} = 2Ab$.
|
|
||||||
|
|
||||||
Take matrix derivative w.r.t $\beta$:
|
|
||||||
|
|
||||||
```tex
|
|
||||||
\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}
|
|
||||||
```
|
|
||||||
|
|
||||||
$$
|
|
||||||
\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}
|
|
||||||
$$
|
|
||||||
@ -4,7 +4,7 @@ date: '2020-11-11'
|
|||||||
tags: ['next js', 'guide']
|
tags: ['next js', 'guide']
|
||||||
draft: false
|
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.'
|
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']
|
authors: ['default']
|
||||||
---
|
---
|
||||||
|
|
||||||
# Introduction
|
# Introduction
|
||||||
|
|||||||
@ -162,7 +162,7 @@ Here's an example of a post's frontmatter:
|
|||||||
title: 'Introducing Tailwind Nexjs Starter Blog'
|
title: 'Introducing Tailwind Nexjs Starter Blog'
|
||||||
date: '2021-01-12'
|
date: '2021-01-12'
|
||||||
lastmod: '2021-01-18'
|
lastmod: '2021-01-18'
|
||||||
tags: ['next-js', 'tailwind', 'guide']
|
tags: ['next-js', 'tailwind', 'guide','yoyoyoy']
|
||||||
draft: false
|
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.'
|
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']
|
images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
---
|
---
|
||||||
title: My fancy title
|
title: My fancy title
|
||||||
date: '2021-01-31'
|
date: '2021-01-31'
|
||||||
tags: ['hello']
|
tags: ['yoyoyoy']
|
||||||
draft: true
|
draft: false
|
||||||
summary: draft post
|
summary: draft post
|
||||||
images: []
|
images: []
|
||||||
---
|
---
|
||||||
|
|||||||
@ -1,30 +0,0 @@
|
|||||||
---
|
|
||||||
title: Introducing Multi-part Posts with Nested Routing
|
|
||||||
date: '2021-05-02'
|
|
||||||
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!'
|
|
||||||
---
|
|
||||||
|
|
||||||
# Nested Routes
|
|
||||||
|
|
||||||
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 `/data/blog/nested-route` folder.
|
|
||||||
|
|
||||||
## How
|
|
||||||
|
|
||||||
Simplify 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`
|
|
||||||
|
|
||||||
We use Next.js catch all routes to handle the routing and path creations.
|
|
||||||
|
|
||||||
## Use Cases
|
|
||||||
|
|
||||||
Here are some reasons to use nested routes
|
|
||||||
|
|
||||||
- More logical content organisation (blogs will still be displayed based on the created date)
|
|
||||||
- Multi-part posts
|
|
||||||
- Different sub-routes for each author
|
|
||||||
- Internationalization (though it would be recommended to use [Next.js built-in i8n routing](https://nextjs.org/docs/advanced-features/i18n-routing))
|
|
||||||
|
|
||||||
## Note
|
|
||||||
|
|
||||||
- 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.
|
|
||||||
@ -1,449 +0,0 @@
|
|||||||
---
|
|
||||||
title: 'New features in v1'
|
|
||||||
date: 2021-08-07T15:32:14Z
|
|
||||||
lastmod: '2021-02-01'
|
|
||||||
tags: ['next-js', 'tailwind', 'guide']
|
|
||||||
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
|
|
||||||
---
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
A post on the new features introduced in v1.0. New features:
|
|
||||||
|
|
||||||
<TOCInline toc={props.toc} exclude="Overview" toHeading={2} />
|
|
||||||
|
|
||||||
First load JS decreased from 43kB to 39kB despite all the new features added! [^1]
|
|
||||||
|
|
||||||
[^1]: With the new changes in Nextjs 12, first load JS increase to 45kB.
|
|
||||||
|
|
||||||
See [upgrade guide](#upgrade-guide) below if you are migrating from v0 version of the template.
|
|
||||||
|
|
||||||
## Theme colors
|
|
||||||
|
|
||||||
You can easily modify the theme color by changing the primary attribute in the tailwind config file:
|
|
||||||
|
|
||||||
```js:tailwind.config.js
|
|
||||||
theme: {
|
|
||||||
colors: {
|
|
||||||
primary: colors.teal,
|
|
||||||
gray: colors.neutral,
|
|
||||||
...
|
|
||||||
}
|
|
||||||
...
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
The primary color attribute should be assigned an object with keys from 50, 100, 200 ... 900 and the corresponding color code values.
|
|
||||||
|
|
||||||
Tailwind 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.
|
|
||||||
|
|
||||||
Migrating 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`.
|
|
||||||
|
|
||||||
From 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
|
|
||||||
so you can copy and adapt token styles from a prismjs stylesheet e.g. [prism themes](https://github.com/PrismJS/prism-themes).
|
|
||||||
|
|
||||||
## Xdm MDX compiler
|
|
||||||
|
|
||||||
We switched the MDX bundler from [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote) to [mdx-bundler](https://github.com/kentcdodds/mdx-bundler).
|
|
||||||
This uses [xdm](https://github.com/wooorm/xdm) under the hood, the latest micromark 3 and remark, rehype libraries.
|
|
||||||
|
|
||||||
**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.
|
|
||||||
|
|
||||||
[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.
|
|
||||||
Please check your markdown output to verify.
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
For example, the following jsx snippet can be used directly in an MDX file to render the page title component:
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
// Or import PageTitle from './components/PageTitle.js' if you are using js
|
|
||||||
import PageTitle from './components/PageTitle.tsx'
|
|
||||||
;<PageTitle> Using JSX components in MDX </PageTitle>
|
|
||||||
```
|
|
||||||
|
|
||||||
The default configuration resolves all components relative to the `components` directory.
|
|
||||||
|
|
||||||
**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 `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.
|
|
||||||
|
|
||||||
## Table of contents component
|
|
||||||
|
|
||||||
Inspired 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/),
|
|
||||||
the `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 `TOCInline` component.
|
|
||||||
|
|
||||||
For example, the TOC in this post was generated with the following code:
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
<TOCInline toc={props.toc} exclude="Overview" toHeading={2} />
|
|
||||||
```
|
|
||||||
|
|
||||||
You can customise the headings that are displayed by configuring the `fromHeading` and `toHeading` props, or exclude particular headings
|
|
||||||
by 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.
|
|
||||||
A `asDisclosure` prop can be used to render the TOC within an expandable disclosure element.
|
|
||||||
|
|
||||||
Here's the full TOC rendered in a disclosure element.
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
<TOCInline toc={props.toc} asDisclosure />
|
|
||||||
```
|
|
||||||
|
|
||||||
<TOCInline toc={props.toc} asDisclosure />
|
|
||||||
|
|
||||||
## Layouts
|
|
||||||
|
|
||||||
You can map mdx blog content to layout components by configuring the frontmatter field. For example, this post is written with the new `PostSimple` layout!
|
|
||||||
|
|
||||||
### Adding new templates
|
|
||||||
|
|
||||||
layout templates are stored in the `./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 `layout` field.
|
|
||||||
|
|
||||||
The 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.
|
|
||||||
|
|
||||||
You can configure the template to take in other fields - see `PostLayout` component for an example.
|
|
||||||
|
|
||||||
Here's an example layout which you can further customise:
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
export default function ExampleLayout({ frontMatter, children }) {
|
|
||||||
const { date, title } = frontMatter
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SectionContainer>
|
|
||||||
<div>{date}</div>
|
|
||||||
<h1>{title}</h1>
|
|
||||||
<div>{children}</div>
|
|
||||||
</SectionContainer>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Configuring a blog post frontmatter
|
|
||||||
|
|
||||||
Use 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:
|
|
||||||
|
|
||||||
```
|
|
||||||
---
|
|
||||||
title: 'New features in v1'
|
|
||||||
date: '2021-05-26 '
|
|
||||||
tags: ['next-js', 'tailwind', 'guide']
|
|
||||||
draft: false
|
|
||||||
summary: 'Introducing the new layout features - you can map mdx blog content to layout components by configuring the frontmatter field'
|
|
||||||
layout: PostSimple
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
You can configure the default layout in the respective page section by modifying the `DEFAULT_LAYOUT` variable.
|
|
||||||
The `DEFAULT_LAYOUT` for blog posts page is set to `PostLayout`.
|
|
||||||
|
|
||||||
### Extend
|
|
||||||
|
|
||||||
`layout` is mapped to wrapper which wraps the entire MDX content.
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
export const MDXComponents = {
|
|
||||||
Image,
|
|
||||||
a: CustomLink,
|
|
||||||
pre: Pre,
|
|
||||||
wrapper: ({ components, layout, ...rest }) => {
|
|
||||||
const Layout = require(`../layouts/${layout}`).default
|
|
||||||
return <Layout {...rest} />
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
|
|
||||||
const MDXLayout = useMemo(() => getMDXComponent(mdxSource), [mdxSource])
|
|
||||||
|
|
||||||
return <MDXLayout layout={layout} components={MDXComponents} {...rest} />
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Use the `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).
|
|
||||||
|
|
||||||
## Analytics
|
|
||||||
|
|
||||||
The template now supports [plausible](https://plausible.io/), [simple analytics](https://simpleanalytics.com/) and google analytics.
|
|
||||||
Configure `siteMetadata.js` with the settings that correspond with the desired analytics provider.
|
|
||||||
|
|
||||||
```js
|
|
||||||
analytics: {
|
|
||||||
// supports plausible, simpleAnalytics or googleAnalytics
|
|
||||||
plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
|
|
||||||
simpleAnalytics: false, // true or false
|
|
||||||
googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
|
|
||||||
},
|
|
||||||
```
|
|
||||||
|
|
||||||
Custom events are also supported. You can import the `logEvent` function from `@components/analytics/[ANALYTICS-PROVIDER]` file and call it when
|
|
||||||
triggering certain events of interest. _Note_: Additional configuration might be required depending on the analytics provider, please check their official
|
|
||||||
documentation for more information.
|
|
||||||
|
|
||||||
## Blog comments system
|
|
||||||
|
|
||||||
We have also added support for [giscus](https://github.com/laymonage/giscus), [utterances](https://github.com/utterance/utterances) or disqus.
|
|
||||||
To enable, simply configure `siteMetadata.js` comments property with the desired provider and settings as specified in the config file.
|
|
||||||
|
|
||||||
```js
|
|
||||||
comment: {
|
|
||||||
// Select a provider and use the environment variables associated to it
|
|
||||||
// https://vercel.com/docs/environment-variables
|
|
||||||
provider: 'giscus', // supported providers: giscus, utterances, disqus
|
|
||||||
giscusConfig: {
|
|
||||||
// Visit the link below, and follow the steps in the 'configuration' section
|
|
||||||
// https://giscus.app/
|
|
||||||
repo: process.env.NEXT_PUBLIC_GISCUS_REPO,
|
|
||||||
repositoryId: process.env.NEXT_PUBLIC_GISCUS_REPOSITORY_ID,
|
|
||||||
category: process.env.NEXT_PUBLIC_GISCUS_CATEGORY,
|
|
||||||
categoryId: process.env.NEXT_PUBLIC_GISCUS_CATEGORY_ID,
|
|
||||||
mapping: 'pathname', // supported options: pathname, url, title
|
|
||||||
reactions: '1', // Emoji reactions: 1 = enable / 0 = disable
|
|
||||||
// Send discussion metadata periodically to the parent window: 1 = enable / 0 = disable
|
|
||||||
metadata: '0',
|
|
||||||
// theme example: light, dark, dark_dimmed, dark_high_contrast
|
|
||||||
// transparent_dark, preferred_color_scheme, custom
|
|
||||||
theme: 'light',
|
|
||||||
// theme when dark mode
|
|
||||||
darkTheme: 'transparent_dark',
|
|
||||||
// If the theme option above is set to 'custom`
|
|
||||||
// please provide a link below to your custom theme css file.
|
|
||||||
// example: https://giscus.app/themes/custom_example.css
|
|
||||||
themeURL: '',
|
|
||||||
},
|
|
||||||
utterancesConfig: {
|
|
||||||
// Visit the link below, and follow the steps in the 'configuration' section
|
|
||||||
// https://utteranc.es/
|
|
||||||
repo: process.env.NEXT_PUBLIC_UTTERANCES_REPO,
|
|
||||||
issueTerm: '', // supported options: pathname, url, title
|
|
||||||
label: '', // label (optional): Comment 💬
|
|
||||||
// theme example: github-light, github-dark, preferred-color-scheme
|
|
||||||
// github-dark-orange, icy-dark, dark-blue, photon-dark, boxy-light
|
|
||||||
theme: '',
|
|
||||||
// theme when dark mode
|
|
||||||
darkTheme: '',
|
|
||||||
},
|
|
||||||
disqus: {
|
|
||||||
// https://help.disqus.com/en/articles/1717111-what-s-a-shortname
|
|
||||||
shortname: process.env.NEXT_PUBLIC_DISQUS_SHORTNAME,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
```
|
|
||||||
|
|
||||||
## Multiple authors
|
|
||||||
|
|
||||||
Information 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.
|
|
||||||
|
|
||||||
Here's how an author markdown file might look like:
|
|
||||||
|
|
||||||
```md:default.md
|
|
||||||
---
|
|
||||||
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
|
|
||||||
---
|
|
||||||
|
|
||||||
A long description of yourself...
|
|
||||||
```
|
|
||||||
|
|
||||||
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:
|
|
||||||
|
|
||||||
```js
|
|
||||||
const authorDetails = await getFileBySlug('authors', ['default'])
|
|
||||||
```
|
|
||||||
|
|
||||||
This is rendered in the `AuthorLayout` template.
|
|
||||||
|
|
||||||
### Multiple authors in blog post
|
|
||||||
|
|
||||||
The 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.
|
|
||||||
|
|
||||||
For example, the following frontmatter will display the authors given by `data/authors/default.md` and `data/authors/sparrowhawk.md`
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
title: 'My first post'
|
|
||||||
date: '2021-01-12'
|
|
||||||
draft: false
|
|
||||||
summary: 'My first post'
|
|
||||||
authors: ['default', 'sparrowhawk']
|
|
||||||
```
|
|
||||||
|
|
||||||
A demo of a multiple authors post is shown in [Introducing Tailwind Nextjs Starter Blog post](/blog/introducing-tailwind-nextjs-starter-blog).
|
|
||||||
|
|
||||||
## Copy button for code blocks
|
|
||||||
|
|
||||||
Hover over a code block and you will notice a GitHub-inspired copy button! You can modify `./components/Pre.js` to further customise it.
|
|
||||||
The component is passed to `MDXComponents` and modifies all `<pre>` blocks.
|
|
||||||
|
|
||||||
## Line highlighting and line numbers
|
|
||||||
|
|
||||||
Line 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)
|
|
||||||
|
|
||||||
The following javascript code block:
|
|
||||||
|
|
||||||
````
|
|
||||||
```js {1, 3-4} showLineNumbers
|
|
||||||
var num1, num2, sum
|
|
||||||
num1 = prompt('Enter first number')
|
|
||||||
num2 = prompt('Enter second number')
|
|
||||||
sum = parseInt(num1) + parseInt(num2) // "+" means "add"
|
|
||||||
alert('Sum = ' + sum) // "+" means combine into a string
|
|
||||||
```
|
|
||||||
````
|
|
||||||
|
|
||||||
will appear as:
|
|
||||||
|
|
||||||
```js {1,3-4} showLineNumbers
|
|
||||||
var num1, num2, sum
|
|
||||||
num1 = prompt('Enter first number')
|
|
||||||
num2 = prompt('Enter second number')
|
|
||||||
sum = parseInt(num1) + parseInt(num2) // "+" means "add"
|
|
||||||
alert('Sum = ' + sum) // "+" means combine into a string
|
|
||||||
```
|
|
||||||
|
|
||||||
To modify the styles, change the following class selectors in the `prism.css` file:
|
|
||||||
|
|
||||||
```css
|
|
||||||
.code-highlight {
|
|
||||||
@apply float-left min-w-full;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-line {
|
|
||||||
@apply -mx-4 block border-l-4 border-opacity-0 pl-4 pr-4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-line.inserted {
|
|
||||||
@apply bg-green-500 bg-opacity-20;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-line.deleted {
|
|
||||||
@apply bg-red-500 bg-opacity-20;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-line {
|
|
||||||
@apply -mx-4 border-l-4 border-primary-500 bg-gray-700 bg-opacity-50;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line-number::before {
|
|
||||||
@apply -ml-2 mr-4 inline-block w-4 text-right text-gray-400;
|
|
||||||
content: attr(line);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Newletter component (v1.1.3)
|
|
||||||
|
|
||||||
Introduced in v1.1.3, the newsletter component gives you an easy way to build an audience. It integrates with the following providers:
|
|
||||||
|
|
||||||
- [Mailchimp](https://mailchimp.com/)
|
|
||||||
- [Buttondown](https://buttondown.email/)
|
|
||||||
- [Convertkit](https://convertkit.com/)
|
|
||||||
|
|
||||||
To use it, specify the provider which you are using in the config file and add the necessary environment variables to the `.env` file.
|
|
||||||
For more information on the required variables, check out `.env.sample.`
|
|
||||||
|
|
||||||
Two components are exported, a default `NewsletterForm` and a `BlogNewsletterForm` component, which is also passed in as an MDX component
|
|
||||||
and can be used in a blog post:
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
<BlogNewsletterForm title="Like what you are reading?" />
|
|
||||||
```
|
|
||||||
|
|
||||||
<BlogNewsletterForm title="Like what you are reading?" />
|
|
||||||
|
|
||||||
The 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
|
|
||||||
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.
|
|
||||||
|
|
||||||
A static site compatible alternative is to substitute the route in the newsletter component with a form API endpoint provider.
|
|
||||||
|
|
||||||
## Bibliography and Citations (v1.2.1)
|
|
||||||
|
|
||||||
`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.
|
|
||||||
|
|
||||||
For example, the following markdown code sample:
|
|
||||||
|
|
||||||
```md
|
|
||||||
Standard citation [@Nash1950]
|
|
||||||
In-text citations e.g. @Nash1951
|
|
||||||
Multiple citations [see @Nash1950; @Nash1951, page 50]
|
|
||||||
|
|
||||||
**References:**
|
|
||||||
|
|
||||||
[^ref]
|
|
||||||
```
|
|
||||||
|
|
||||||
is rendered to the following:
|
|
||||||
|
|
||||||
Standard citation [@Nash1950]
|
|
||||||
In-text citations e.g. @Nash1951
|
|
||||||
Multiple citations [see @Nash1950; @Nash1951, page 50]
|
|
||||||
|
|
||||||
**References:**
|
|
||||||
|
|
||||||
[^ref]
|
|
||||||
|
|
||||||
A bibliography will be inserted at the end of the document, but this can be overwritten by specifying a `[^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.
|
|
||||||
|
|
||||||
See [rehype-citation readme](https://github.com/timlrx/rehype-citation) for more information on the configuration options.
|
|
||||||
|
|
||||||
## Self-hosted font (v1.5.0)
|
|
||||||
|
|
||||||
Google font has been replaced with self-hosted font from [Fontsource](https://fontsource.org/). This gives the following [advantages](https://fontsource.org/docs/introduction):
|
|
||||||
|
|
||||||
> 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.
|
|
||||||
>
|
|
||||||
> 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.
|
|
||||||
>
|
|
||||||
> Commit to privacy. Google does track the usage of their fonts and for those who are extremely privacy concerned, self-hosting is an alternative.
|
|
||||||
|
|
||||||
This 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)).
|
|
||||||
|
|
||||||
To change the default Inter font:
|
|
||||||
|
|
||||||
1. Install the preferred [font](https://fontsource.org/fonts) - `npm install -save @fontsource/<font-name>`
|
|
||||||
2. Update the import at `pages/_app.js`- `import '@fontsource/<font-name>.css'`
|
|
||||||
3. Update the `fontfamily` property in the tailwind css config file
|
|
||||||
|
|
||||||
## Upgrade guide
|
|
||||||
|
|
||||||
There are significant portions of the code that has been changed from v0 to v1 including support for layouts and a new mdx engine.
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
Another alternative would be to pull the latest template version with the following code:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
git remote add template git@github.com:timlrx/tailwind-nextjs-starter-blog.git
|
|
||||||
git pull template v1 --allow-unrelated-histories
|
|
||||||
rm -rf node_modules
|
|
||||||
```
|
|
||||||
|
|
||||||
You can see an example of such a migration in this [commit](https://github.com/timlrx/timlrx.com/commit/bba1c185384fd6d5cdaac15abf802fdcff027286) for my personal blog.
|
|
||||||
|
|
||||||
v1 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:
|
|
||||||
|
|
||||||
```js
|
|
||||||
async redirects() {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
source: '/:path/index.xml',
|
|
||||||
destination: '/:path/feed.xml',
|
|
||||||
permanent: true,
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
---
|
|
||||||
title: O Canada
|
|
||||||
date: '2017-07-15'
|
|
||||||
tags: ['holiday', 'canada', 'images']
|
|
||||||
draft: false
|
|
||||||
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.
|
|
||||||
---
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
Features images served using `next/image` component. The locally stored images are located in a folder with the following path: `/static/images/canada/[filename].jpg`
|
|
||||||
|
|
||||||
Since we are using mdx, we can create a simple responsive flexbox grid to display our images with a few tailwind css classes.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# Gallery
|
|
||||||
|
|
||||||
<div className="-mx-2 flex flex-wrap overflow-hidden xl:-mx-2">
|
|
||||||
<div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
# Implementation
|
|
||||||
|
|
||||||
```js
|
|
||||||
<div className="-mx-2 flex flex-wrap overflow-hidden xl:-mx-2">
|
|
||||||
<div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
With MDX v2, one can interleave markdown in jsx as shown in the example code.
|
|
||||||
|
|
||||||
### Photo Credits
|
|
||||||
|
|
||||||
<div>
|
|
||||||
Maple photo by [Guillaume
|
|
||||||
Jaillet](https://unsplash.com/@i_am_g?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
on
|
|
||||||
[Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Mountains photo by [John
|
|
||||||
Lee](https://unsplash.com/@john_artifexfilms?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
on
|
|
||||||
[Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Lake photo by [Tj
|
|
||||||
Holowaychuk](https://unsplash.com/@tjholowaychuk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
on
|
|
||||||
[Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Toronto photo by [Matthew
|
|
||||||
Henry](https://unsplash.com/@matthewhenry?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
on
|
|
||||||
[Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
</div>
|
|
||||||
@ -7,17 +7,17 @@ const siteMetadata = {
|
|||||||
language: 'en-us',
|
language: 'en-us',
|
||||||
theme: 'system', // system, dark or light
|
theme: 'system', // system, dark or light
|
||||||
siteUrl: 'https://jonb.io',
|
siteUrl: 'https://jonb.io',
|
||||||
siteRepo: 'https://git.jonb.io/jblu/jonb.io.git',
|
siteRepo: 'https://git.jonb.io/jblu/jonbio.git',
|
||||||
siteLogo: `${process.env.BASE_PATH || ''}/static/images/logo.png`,
|
siteLogo: `${process.env.BASE_PATH || ''}/static/images/logo.png`,
|
||||||
socialBanner: `${process.env.BASE_PATH || ''}/static/images/twitter-card.png`,
|
socialBanner: `${process.env.BASE_PATH || ''}/static/images/twitter-card.png`,
|
||||||
// mastodon: 'https://mastodon.social/@mastodonuser',
|
// mastodon: 'https://mastodon.social/@mastodonuser',
|
||||||
email: 'jonbranan@gmail.com',
|
email: 'jonbranan@gmail.com',
|
||||||
github: 'https://github.com',
|
github: 'https://github.com/jonbranan',
|
||||||
// x: 'https://twitter.com/x',
|
// x: 'https://twitter.com/x',
|
||||||
// twitter: 'https://twitter.com/Twitter',
|
// twitter: 'https://twitter.com/Twitter',
|
||||||
// facebook: 'https://facebook.com',
|
// facebook: 'https://facebook.com',
|
||||||
// youtube: 'https://youtube.com',
|
// youtube: 'https://youtube.com',
|
||||||
linkedin: 'https://www.linkedin.com',
|
linkedin: 'https://www.linkedin.com/in/jonathanbranan/',
|
||||||
// threads: 'https://www.threads.net',
|
// threads: 'https://www.threads.net',
|
||||||
// instagram: 'https://www.instagram.com',
|
// instagram: 'https://www.instagram.com',
|
||||||
locale: 'en-US',
|
locale: 'en-US',
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user