
## Usage

The source code of this site is completely open: [GitHub - la3rence/site](https://github.com/la3rence/site).

<div>
<github user="la3rence" repo="site"></github>
</div>

Directly store the Markdown file (.md) in the `posts` folder to render the current file and make it a static page ([SSG](/blog/ssg-ssr)).

The homepage index directory of the blog is also generated synchronously without manual maintenance.

The **About** page is also generated based on the `readme.md` file.

Blog-related information configuration, such as title, author, etc., can be configured in the `lib/config.mjs` file.

It is recommended to use [pnpm](https://pnpm.io/) as a dependency management tool for node.js (compared to the official npm, pnpm has a great advantage: faster speed and space saving).

```shell
pnpm install
pnpm dev

# [Optional] install turbo via `pnpm i -g turbo`
# and you can try `turbo` for run any script in package.json like:
turbo dev
turbo build
```

Local preview: <http://localhost:3000>.

Use `pnpm build` to package, and `pnpm start` to start the production environment.
Use `pnpm fmt` to format all code and text.

This article shows all the media information that this blog project can display, such as code references, table displays, pictures, videos, Douban(Chinese IMDb) cards, etc.

2024/07 Update:

- The top navigation bar enables frosted glass dynamic suspension

- A new edge to edge design style that makes full use of the screen area to display code and images

## Technical details

This site is composed of the open source `Next.js` framework (from Vercel) and `TailwindCSS` style . The former is an open source SSG/SSR project based on React, and the latter is a popular atomic CSS library that allows me, who is not good at writing original CSS and has a weak foundation, to quickly write flexible styles.

Next.js will actively call some of the functions we have written (`getStaticProps()`) to allow the component to get data input, so that the React component can be rendered in advance **in the building phase**. `remark` library can compile native markdown syntax into DOM corresponding to HTML - In this project, we let it traverse the markdown files in the `posts` folder, compile them one by one, and use them as `props` of the dynamic routing page of `[id].js` to render blog posts:

```js caption="SSG in '[id].js': fetch data in build time" {3} showLineNumbers{38}
export const getStaticProps = async context => {
  const { id } = context.params;
  const mdData = await getMdContentById(id);
  return {
    props: mdData,
  };
};
```

There are many benefits to doing this:

- Suitable for CDN caching
- Excellent SEO performance
- Save network bandwidth and traffic
- O(1) time complexity [TTFB](https://en.wikipedia.org/wiki/Time_to_first_byte)

In a word, fast! If you try to turn off the JavaScript function of the current browser, bascially, this website can still render and display correctly.

Not only that, Next.js also provides **server-side rendering** capabilities, which can also bring a better SEO experience. I won’t go into details.

The above technology is called [JAMstack](#tables)：**J**avaScript, **A**PI & **M**arkup.

An interesting way to say it is that JAMstack is a CDN-first application.

> It's now possible, instead, to push content directly to the network and design frameworks that optimize for this capability. As a result, with optimizations like static asset hoisting, websites are now becoming faster and more reliable than ever before.

### Movie

You can write specific React components to make Markdown support richer page content, similar to `MDX`.
The source of this component is coded via react component in markdown!

Code:

```jsx
// filename: how.md
<div>
<douban id="3042261"></douban>
<div>
```

Result:

<div>
<douban id="3042261"></douban>
<div>

### Images

![Random Image](https://proxy.lawrenceli.me/picsum.photos/400/600?grayscale)

### Video

You can directly display videos from B station through `<bilibili />` component, based on iframe. And you can also make a tiny change to let it be `<youtube />`.

<div style="display: flex; justify-content: center;">
  <iframe width="900" height="480" src="https://www.youtube.com/embed/rR4n-0KYeKQ?si=gLjwn8rHDxYc4cUF"></iframe>
</div>

### Tweet / 𝕏

`<tweet />` component displays tweets:

<div>
<tweet id="20" />
</div>

### Open Graph

Open Graph (OG, Open Graph Protocol) is used to display specific rich media information when sharing web pages on social networks.

![Open Graph](https://lawrenceli.me/api/og?meta=This%20is%20Open%20Graph)

## Tables

JAMstack.

| ROLE |                                                  PROVIDED BY                                                   |
| :--: | :------------------------------------------------------------------------------------------------------------: |
|  J   |                   Client-side JS injected via React Hooks (state, event listeners, effects)                    |
|  A   |                                   API pages inside the pages/api directory.                                    |
|  M   | Pages with no data dependencies or pages with static data deps that trigger build-time static site generation. |

## GitHub Gist

`gist:darylwright/75332f27a6e9bff70bc0406114570829?file=gist-test.ts&highlights=1,3-5`

## WebSub for RSS

Powering WebSub based on GitHub Actions Standard, formerly PubSubHubbub. This allows RSS clients that support WebSub to not only get new articles immediately, but also reduce the number of polling and traffic between the client and the server. Details: [site/issue/324](https://github.com/la3rence/site/issues/324).

## ActivityPub

The website implements interaction with the federated universe through some basic ActivityPub and WebFinger protocols. [Implementation details](https://lawrenceli.me/blog/activitypub).

## I18n

The website supports internationalization through simple configuration. The middle suffix of the markdown file name and the Next.js native locale routing are used to distinguish between language types and display different texts.

## And more to do

Markdown currently uses GitHub Flavored Markdown ([GFM](https://github.github.com/gfm/)) and tries to add support for new syntax elements.

For example: <https://github.com/orgs/community/discussions/16925>

> [!NOTE]
> Critical content demanding immediate user attention due to potential risks.

## Ref Reference Links

- <https://nextjs.org>
- <https://tailwindcss.com>
- <https://rauchg.com/2020/static-hoisting>
- <https://jamstack.org>


This article is used to test the Markdown style end-to-end

How this website was built

## 使用方式

本站源码完全公开：[GitHub - la3rence/site](https://github.com/la3rence/site).

<div>
  <github user="la3rence" repo="site"></github>
</div>

直接将 Markdown 文件 (.md) 存放在 `posts` 文件夹下即可渲染当前文件，使之成为静态页面([SSG](/blog/ssg-ssr))。
博客的首页索引目录也为同步生成，而无需手动维护。

**About** 页面也同理基于 `readme.md` 文件生成而来。

博客相关的信息配置，如标题、作者等可在 `lib/config.mjs` 文件中配置。

推荐使用 [pnpm](https://pnpm.io/zh/) 来作为 node.js 的依赖管理工具（相比官方 npm，pnpm 拥有非常大的优势: 速度更快，且节省空间）。

```shell
pnpm install
pnpm dev

# [Optional] install turbo via `pnpm i -g turbo`
# and you can try `turbo` for run any script in package.json like:
turbo dev
turbo build
```

本地访问 <http://localhost:3000> 即可。

通过 `pnpm build` 来打包，`pnpm start` 则用于生产环境的启动。
通过 `pnpm fmt` 来将所有代码和文本进行格式化。

这篇文章展示了此博客项目所能展示的一切媒体信息，比如代码引用、表格展示、图片、视频、豆瓣卡片等等。

2024/07 更新：

- 顶部导航栏启用毛玻璃动态悬浮
- 全新的 edge to edge 设计风格，充分利用屏幕区域展示代码和图片

## 技术细节

此站点由 Vercel 公司开源的 `Next.js` 框架和 `TailwindCSS` 样式构成。前者是一项基于 React 的 SSG/SSR 开源项目，后者是一个目前流行的原子化 CSS 库，让不太会写 CSS、基础薄弱的我也能快速的写出灵活的样式。

Next.js 会主动调用我们写好的一些函数 (`getStaticProps()`)，让组件得到数据的输入，从而**在构建阶段**将 React 组件提前渲染完成。`remark` 库可以将原生的 markdown 语法编译成 html 对应的 dom - 在此项目中，我们让它固定遍历 `posts` 文件夹下的 markdown 文件，依次编译，让其作为 `[id].js` 的动态路由页面的 `props`，从而渲染出博客文章:

```js caption="SSG in '[id].js': fetch data in build time" {3} showLineNumbers{38}
export const getStaticProps = async context => {
  const { id } = context.params;
  const mdData = await getMdContentById(id);
  return {
    props: mdData,
  };
};
```

这样做的好处很多:

- 适合被 CDN 缓存
- 优秀的 SEO 表现
- 节省网络带宽、流量
- O(1) 时间复杂度的 [TTFB](https://en.wikipedia.org/wiki/Time_to_first_byte)

总之一个字，快！如果你尝试关闭当前浏览器的 JavaScript 功能，这个网站也一样能正确渲染并展现。

不光如此，Next.js 也提供了**服务端渲染**的能力，同样也能带来较好的 SEO 体验，不展开说了。

上述这种技术被称之为 [JAMstack](#tables)：**J**avaScript, **A**PI & **M**arkup.

一种有趣的说法是，JAMstack 是 CDN 优先的应用程序。

> It's now possible, instead, to push content directly to the network and design frameworks that optimize for this capability. As a result, with optimizations like static asset hoisting, websites are now becoming faster and more reliable than ever before.

### Movie

你可以编写特定的 React 组件来让 Markdown 支持更丰富的页面内容，这种实现方式和 `MDX` 类似。
The source of this component is coded via react component in markdown!

Code:

```jsx
// filename: how.md
<div>
  <douban id="3042261"></douban>
<div>
```

Result:

<div>
  <douban id="3042261"></douban>
<div>

### Images

![Random Image](https://proxy.lawrenceli.me/picsum.photos/400/600?grayscale)

### Video

可以直接通过 `<bilibili />` 组件展示来自于 B 站视频，基于 iframe.

<div>
  <bilibili bv="BV1gR4y1u76v"></bilibili>
</div>



### Tweet / 𝕏

`<tweet />` 组件展示推文：

<div>
  <tweet id="1138070453942009856" />
</div>

### Open Graph

Open Graph (OG, 开放图谱协议) 用于社交网络分享网页时展示特定的富媒体信息。

![Open Graph](https://lawrenceli.me/api/og?meta=This%20is%20Open%20Graph)

## Tables

JAMstack.

| ROLE |                                                  PROVIDED BY                                                   |
| :--: | :------------------------------------------------------------------------------------------------------------: |
|  J   |                   Client-side JS injected via React Hooks (state, event listeners, effects)                    |
|  A   |                                   API pages inside the pages/api directory.                                    |
|  M   | Pages with no data dependencies or pages with static data deps that trigger build-time static site generation. |

## GitHub Gist

`gist:darylwright/75332f27a6e9bff70bc0406114570829?file=gist-test.ts&highlights=1,3-5`

## WebSub for RSS

基于 GitHub Actions 来支持 WebSub 标准，即之前的 PubSubHubbub。这使得支持 WebSub 的 RSS 客户端不仅能立刻获取到新文章，也能减少客户端和服务端之间的轮询次数以及流量。细节: [site/issue/324](https://github.com/la3rence/site/issues/324).

## ActivityPub

网站通过最基本的一些 ActivityPub 和 WebFinger 协议部分实现了与联邦宇宙的交互。[实现细节](https://lawrenceli.me/blog/activitypub)。

## I18n

网站通过简单的配置以支持国际化。通过 markdown 文件名的中间后缀来和 Next.js 原生 locale 路由来实现区分语言类型展示不同文本。

## And more to do

Markdown 目前采用 GitHub Flavored Markdown ([GFM](https://github.github.com/gfm/)) ，并尝试添加新的语法元素支持。

例如：<https://github.com/orgs/community/discussions/16925>

> [!NOTE]  
> Critical content demanding immediate user attention due to potential risks.

## Ref 参考链接

- <https://nextjs.org>
- <https://tailwindcss.com>
- <https://rauchg.com/2020/static-hoisting>
- <https://jamstack.org>

此文用于端到端测试 Markdown 样式

这个网站是如何构建的


Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.

- **Static Generation** is the pre-rendering method that generates the HTML at **build time**. The pre-rendered HTML is then _reused_ on each request.
- **Server-side Rendering** is the pre-rendering method that generates the HTML on **each request**.

Importantly, Next.js lets you **choose** which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.


Next.js: Two Forms of Pre-rendering


Next.js 有两种形式的预渲染：**静态生成**和**服务器端渲染**。 区别在于**何时**生成页面的 HTML。

- **静态生成**是在**构建时**生成 HTML 的预渲染方法。 然后，每个请求都会*重用*预渲染的 HTML。
- **服务器端渲染**是在**每个请求**上生成 HTML 的预渲染方法。

重要的是，Next.js 允许您**选择**每个页面使用哪种预渲染表单。 您可以通过对大多数页面使用静态生成并对其他页面使用服务器端渲染来创建「混合」Next.js 应用程序。


Lawrence Li

Tagged with `vercel`

Tagged with vercel

Tagged with `vercel`