jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate to rsc and app dir

Browse Source
This commit is contained in:
Timothy Lin
2023-07-07 11:17:22 +08:00
parent a03d358ef9
commit 09ba0550ca
121 changed files with 13431 additions and 12945 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
data/authors/default.md → data/authors/default.mdx
View File

0
data/authors/sparrowhawk.md → data/authors/sparrowhawk.mdx
View File

0
data/blog/code-sample.md → data/blog/code-sample.mdx
View File

4
data/blog/deriving-ols-estimator.mdx
View File

@ -10,7 +10,9 @@ summary: 'How to derive the OLS Estimator with matrix notation and a tour of mat
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.
^[For the full list of supported TeX functions, check out the [KaTeX documentation](https://katex.org/docs/supported.html)]
[^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.

8
data/blog/guide-to-using-images-in-nextjs.mdx
View File

@ -49,12 +49,8 @@ _Note_: If you try to save the image, it is in webp format, if your browser supp
![ocean](/static/images/ocean.jpeg)
<p>
Photo by [YUCAR
FotoGrafik](https://unsplash.com/@yucar?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
on
[Unsplash](https://unsplash.com/s/photos/sea?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
</p>
Photo by [YUCAR FotoGrafik](https://unsplash.com/@yucar?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
on [Unsplash](https://unsplash.com/s/photos/sea?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
# Benefits

26
data/blog/introducing-tailwind-nextjs-starter-blog.mdx
View File

@ -60,7 +60,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
- Blog templates
- TOC component
- Support for nested routing of blog posts
- Newsletter component with support for mailchimp, buttondown, convertkit, klaviyo, revue, and emailoctopus
- Newsletter component with support for mailchimp, buttondown and convertkit
- Supports [giscus](https://github.com/laymonage/giscus), [utterances](https://github.com/utterance/utterances) or disqus
- Projects page
- Preconfigured security headers
@ -77,27 +77,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
## Quick Start Guide
1. Try installing the starter using the new [Pliny project CLI](https://github.com/timlrx/pliny):
```bash
npm i -g @pliny/cli
pliny new --template=starter-blog my-blog
```
It supports the updated version of the blog with Contentlayer, optional choice of TS/JS and different package managers as well as more modularized components which will be the basis of the template going forward.
Alternatively to stick with the current version, TypeScript and Contentlayer:
```bash
npx degit 'timlrx/tailwind-nextjs-starter-blog#contentlayer'
```
or JS (official support)
```bash
npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git
```
1. 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`
2. Personalize `siteMetadata.js` (site related information)
3. Modify the content security policy in `next.config.js` if you want to use
any analytics provider or a commenting solution other than giscus.
@ -157,7 +137,7 @@ You can start editing the page by modifying `pages/index.js`. The page auto-upda
Frontmatter follows [Hugo's standards](https://gohugo.io/content-management/front-matter/).
Currently 7 fields are supported.
Currently 10 fields are supported.
```
title (required)

2
data/blog/my-fancy-title.md → data/blog/my-fancy-title.mdx
View File

@ -3,7 +3,7 @@ title: My fancy title
date: '2021-01-31'
tags: ['hello']
draft: true
summary:
summary: draft post
images: []
---

0
data/blog/nested-route/introducing-multi-part-posts-with-nested-routing.md → data/blog/nested-route/introducing-multi-part-posts-with-nested-routing.mdx
View File

14
data/blog/new-features-in-v1.mdx
View File

@ -7,7 +7,6 @@ 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
canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/new-features-in-v1/
---
## Overview
@ -16,7 +15,9 @@ 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!^[With the new changes in Nextjs 12, first load JS increase to 45kB.]
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.
@ -59,14 +60,11 @@ Some new possibilities include loading components directly in the mdx file using
For example, the following jsx snippet can be used directly in an MDX file to render the page title component:
```jsx
import PageTitle from './PageTitle.js'
// 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>
```
import PageTitle from './PageTitle.js'
<PageTitle> Using JSX components in MDX </PageTitle>
The default configuration resolves all components relative to the `components` directory.
**Note**:
@ -338,7 +336,7 @@ To modify the styles, change the following class selectors in the `prism.css` fi
}
.line-number::before {
@apply mr-4 -ml-2 inline-block w-4 text-right text-gray-400;
@apply -ml-2 mr-4 inline-block w-4 text-right text-gray-400;
content: attr(line);
}
```

20
data/blog/pictures-of-canada.mdx
View File

@ -18,17 +18,17 @@ Since we are using mdx, we can create a simple responsive flexbox grid to displa
# Gallery
<div className="flex flex-wrap -mx-2 overflow-hidden xl:-mx-2">
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<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">
![Maple](/static/images/canada/maple.jpg)
</div>
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
![Lake](/static/images/canada/lake.jpg)
</div>
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
![Mountains](/static/images/canada/mountains.jpg)
</div>
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
![Toronto](/static/images/canada/toronto.jpg)
</div>
</div>
@ -36,17 +36,17 @@ Since we are using mdx, we can create a simple responsive flexbox grid to displa
# Implementation
```js
<div className="flex flex-wrap -mx-2 overflow-hidden xl:-mx-2">
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<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">
![Maple](/static/images/canada/maple.jpg)
</div>
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
![Lake](/static/images/canada/lake.jpg)
</div>
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
![Mountains](/static/images/canada/mountains.jpg)
</div>
<div className="my-1 px-2 w-full overflow-hidden xl:my-1 xl:px-2 xl:w-1/2">
<div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
![Toronto](/static/images/canada/toronto.jpg)
</div>
</div>

6
data/blog/the-time-machine.mdx
View File

@ -3,9 +3,9 @@ title: 'The Time Machine'
date: '2018-08-15'
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...'
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...
---
# The Time Machine by H. G. Wells

0
data/headerNavLinks.js → data/headerNavLinks.ts
View File

0
data/projectsData.js → data/projectsData.ts
View File

2
data/references-data.bib
View File

@ -30,4 +30,4 @@
author={Xie, Yihui},
year={2016},
publisher={CRC Press}
}
}

45
data/siteMetadata.js
View File

@ -1,3 +1,6 @@
// @ts-check
/** @type {import("pliny/config").PlinyConfig } */
const siteMetadata = {
title: 'Next.js Starter Blog',
author: 'Tails Azimuth',
@ -24,16 +27,16 @@ const siteMetadata = {
plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
simpleAnalytics: false, // true or false
umamiWebsiteId: '', // e.g. 123e4567-e89b-12d3-a456-426614174000
posthogProjectApiKey: '', // e.g. AhnJK8392ndPOav87as450xd
googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
posthogAnalyticsId: '', // posthog.init e.g. phc_5yXvArzvRdqtZIsHkEm3Fkkhm3d0bEYUXCaFISzqPSQ
},
newsletter: {
// supports mailchimp, buttondown, convertkit, klaviyo, revue, emailoctopus
// Please add your .env file and modify it according to your selection
provider: 'buttondown',
},
comment: {
// If you want to use a commenting system other than giscus you have to add it to the
comments: {
// If you want to use an analytics provider you have to add it to the
// content security policy in the `next.config.js` file.
// Select a provider and use the environment variables associated to it
// https://vercel.com/docs/environment-variables
@ -52,34 +55,30 @@ const siteMetadata = {
// theme example: light, dark, dark_dimmed, dark_high_contrast
// transparent_dark, preferred_color_scheme, custom
theme: 'light',
// Place the comment box above the comments. options: bottom, top
inputPosition: 'bottom',
// Choose the language giscus will be displayed in. options: en, es, zh-CN, zh-TW, ko, ja etc
lang: 'en',
// 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: '',
},
disqusConfig: {
// https://help.disqus.com/en/articles/1717111-what-s-a-shortname
shortname: process.env.NEXT_PUBLIC_DISQUS_SHORTNAME,
// This corresponds to the `data-lang="en"` in giscus's configurations
lang: 'en',
},
},
// search: {
// provider: 'kbar', // kbar or algolia
// kbarConfig: {
// searchDocumentsPath: 'search.json', // path to load documents to search
// },
// provider: 'algolia',
// algoliaConfig: {
// // The application ID provided by Algolia
// appId: 'R2IYF7ETH7',
// // Public API key: it is safe to commit it
// apiKey: '599cec31baffa4868cae4e79f180729b',
// indexName: 'docsearch',
// },
// },
}
module.exports = siteMetadata