INSERT INTO "public"."post" ("id", "user_id", "parent_id", "slug", "type", "title", "description", "image", "content", "categories", "tags", "author_name", "author_image", "status", "created_at", "updated_at", "deleted_at", "sort") VALUES ('65f3ff87-cd45-42d9-99d4-68012b0a012e', '8ed04d25-9aac-4da0-b030-0fd839d50608', '', 'use-recharts-in-mdx', 'article', 'Use recharts in mdx', '', 'https://img-template-mdx-blog.16781678.xyz/uploads/2025-12-20/1766221811322-45c98139-5bb2-4c3b-8995-a88a61fbefab.jpg', '# 图表组件演示

这个页面展示了如何在 MDX 中使用图表组件。

## 线图示例

```chart
{
  "data": [
    {"name": "1月", "value": 400},
    {"name": "2月", "value": 300},
    {"name": "3月", "value": 600},
    {"name": "4月", "value": 800},
    {"name": "5月", "value": 500},
    {"name": "6月", "value": 700}
  ],
  "xKey": "name",
  "yKey": "value"
}
```

## 柱状图示例

```bar
{
  "data": [
    {"name": "React", "value": 88},
    {"name": "Vue", "value": 70},
    {"name": "Angular", "value": 60},
    {"name": "Svelte", "value": 45},
    {"name": "Next.js", "value": 82}
  ],
  "xKey": "name",
  "yKey": "value"
}
```

## 面积图示例

```area
{"data":[{"name":"Q1","value":1200},{"name":"Q2","value":1900},{"name":"Q3","value":2400},{"name":"Q4","value":2800}],"xKey":"name","yKey":"value"}
```

## 饼图示例

```pie
{"data":[{"name":"桌面端","value":45},{"name":"移动端","value":35},{"name":"平板端","value":20}],"xKey":"name","yKey":"value"}
```

## 多系列线图示例

```multiline
{"data":[{"name":"1月","销售额":250,"利润":400},{"name":"2月","销售额":150,"利润":300},{"name":"3月","销售额":380,"利润":600},{"name":"4月","销售额":390,"利润":800},{"name":"5月","销售额":470,"利润":500},{"name":"6月","销售额":370,"利润":700}],"xKey":"name","series":["销售额","利润"]}
```

## 使用说明

### 基本结构

每个图表都需要包装在 `ChartContainer` 中：

```
<ChartContainer config={chartConfig} className="h-[300px]">
  <LineChart data={data}>{/* 图表内容 */}</LineChart>
</ChartContainer>
```

### 配置对象

`chartConfig` 定义了数据系列的标签和颜色：

```
export const chartConfig = {
  value: {
    label: "数值标签",
    color: "hsl(var(--chart-1))",
  },
};
```

### 数据格式

数据应该是对象数组：

```
export const data = [
  { name: "标签1", value: 100 },
  { name: "标签2", value: 200 },
];
```

### 可用组件

现在你可以在 MDX 中使用以下组件：

```
ChartContainer: 图表容器
ChartTooltip, ChartTooltipContent: 工具提示
ChartLegend, ChartLegendContent: 图例
LineChart, Line: 线图
BarChart, Bar: 柱状图
AreaChart, Area: 面积图
PieChart, Pie, Cell: 饼图
XAxis, YAxis: 坐标轴
CartesianGrid: 网格线
```

所有这些组件都已经集成到 MDX 环境中，可以直接使用！', '', '', '', 'https://img-template-mdx-blog.16781678.xyz/uploads/2025-12-20/1766218959213-f3a2fd31-1868-4eb3-b6e1-aa9a2338a9f0.jpg', 'published', '2025-12-20 08:25:59.92302', '2025-12-20 09:40:27.249', null, '0'), ('aab30819-ce9d-40ba-a5fa-4b32effae3fb', '8ed04d25-9aac-4da0-b030-0fd839d50608', '', 'the-age-of-the-app-is-over', 'article', 'The Age of the App is Over', 'We think in projects, goals, and people. So why are our smartphones built around apps?', 'https://img-template-mdx-blog.16781678.xyz/uploads/2025-12-20/1766218533255-bead27c2-4885-4bd0-9195-86343199d30f.webp', 'When you wake up each morning, do you think: what apps do I want to use?

Or do you wonder instead: what goals do I want to achieve?

For the last decade, our smartphones — the most important computers in our lives — have forced us to think about life in a pretty specific way. “There’s an app for that!” Apple proclaimed, as they laid out the very first home screen in a way anyone could understand.

This was comforting at first, as we built our tool belt of utilities — a million little apps that did just one thing. But today, our digital lives are far more complex. Instead of working inside one app at a time, we work across them, pulling together bits and pieces of each to accomplish the task at hand.

A chat room from one app. A style guide from another. A how-to, and a bug report. And an empty email, to write out what we learned. In our minds, these apps bleed together like watercolors to help us achieve one goal, but on our phones, they’re confined to their own tiny boxes laid out on a perfect grid.

Each of the things we need is but a page inside the apps we use, but we can’t tear them out to create a system that works for us. You can only tap that big brand logo on your home screen and dive in from the top down, each and every time.

As we begun work on Arc for Mobile, we came face to face with truths like these. Things we’d never questioned! And we realized that our lives don’t revolve around apps — they revolve around people. Projects. Goals. Tools. And the space you’ve created to bring it all together, and get something done.

We wondered: how can we better design the computer of the future around this truth?

And we asked: what if our home screens felt more like home?

We initially designed Arc for iPhone to be a mirror for your Spaces on desktop — a place to look for things you’ve saved.

But the more we used it, the more we discovered that it was the missing home screen we didn’t know we needed. It allowed us to pull out just the parts of apps we wanted, whether it was a document, a photo album, a playlist, or a chat room, and organize it inside Spaces for different parts of our lives. Thanks to deep-linking, tapping one of these pinned tabs bounced you right over to that exact place inside another app.

We grew more excited as we realized the same principles underpinned how we organize our homes in real life. Is a home cozy? Spartan? Or cluttered?

No, a home is only what you make it — with all your habits, character, and idiosyncrasies.

The reading corner of your couch, with the slightly frayed cushion beside an always-messy pile of books, still to read. Your desk on a Monday morning, most papers cleared off, except your notebook and planner. Your studio one evening, with your inspiration, materials, and tools all splayed out to every corner.

A tweet by Kristina Varshavskaya These spaces are messy and wonderful, and can’t be confined to one grid or system. Because it’s your system.

So why then, when we boot up our computers and smartphones, are we forced to organize everything under a system designed for everyone? Just imagine if all of your furniture was bolted down to a neat grid, or the different rooms in your home were organized by brand instead of purpose!

And so, how might we create a new framework for computing that feels more like home?

We still believe that "if our hope is to create software with feeling, it means inviting people in to craft it for themselves — to mold it to the contours of their unique lives and taste.” And we have a few thoughts on how to make that happen, but if you know us, you know that the prompt is almost always more interesting than the answer.

What if you had one mental model for how to find things? For example, one search bar to search all your apps, instead of needing to remember exactly where the search box lives in each of them. You deserve the ability to pull out parts of those apps to form projects — your own little library of things you need.

What if you had the right to build your own structure to organize your life? Whether you’re a minimalist with just one Space, everything splayed out, or a productivity pro with a dozen Spaces — one for each and every project — there’s no right or wrong. There’s just what works for you, and you should have the ability to execute it.

What if you had the ability to express yourself in your space? While Arc is still limited in how much you can customize your Spaces and Sidebar, we look forward to offering many more ways in the future. Because one wallpaper is not enough to make you feel at home. It’s a soundtrack. A texture. And so much more.

A couple of team prototypes. We’re always dreaming! While we can’t fully say we’re now using Arc as our main home screen on iPhone, we do fully believe that the era of computing revolving around apps is nearing its close. It’s just a matter of when.

Apps are incredible tools to get things done, but maybe they aren’t the best filing cabinets, desks, and spaces we need to manage our disparate worlds — and to inspire us to be our best selves.

So, whether you’re an app-maker or just an app-lover, dream with us: how would you design a digital space to help you be your best self?

Our instinct is that dragging apps around a grid is not the only way.

We can dream of something better.', '', '', '', '', 'published', '2025-12-20 08:15:57.667874', '2025-12-20 08:15:57.168', null, '0'), ('c885b9d9-b75a-45ee-8a2e-e5233c1af1c6', '8ed04d25-9aac-4da0-b030-0fd839d50608', '', 'digital-nomad-april-journal', 'article', '数字游牧四月记', '旅居当然是一件快乐的事情，但我曾因为无法成为三毛而沮丧。这四个月里，我没有悬壶济世，也没有遇到哭泣的骆驼，电脑是陪伴我最久的朋友。', 'https://img-template-mdx-blog.16781678.xyz/uploads/2025-12-20/1766223732259-ab1836be-5f54-4c0f-9805-41eb7ea07221.jpg', '旅居当然是一件快乐的事情，但我曾因为无法成为三毛而沮丧。

这四个月里，我没有悬壶济世，也没有遇到哭泣的骆驼，电脑是陪伴我最久的朋友。


![image](https://img-template-mdx-blog.16781678.xyz/uploads/2025-12-20/1766223799955-s8s95c.jpg)

我现在已经不沮丧了，因为人不该为了「无法成为任何人」的念头而痛苦，知道自己是谁就很好了，我就是个事业狂。

几乎每天的白天时光，我们都会待在清迈大学，过着三点一线的生活。打车穿过没有人行道的清迈马路，大约三四公里就到了饭堂，旁边是图书馆。

道路两旁放眼望去全是青绿色，密密匝匝的草地。那里的大树又高又壮，总想冲上去抱抱，吸收天地灵气。


![image](https://img-template-mdx-blog.16781678.xyz/uploads/2025-12-20/1766223813465-hw8qw0.jpg)

下车后我和老丁开始分道扬镳，我去饭堂吃早餐买咖啡，他继续步行至图书馆。

起初我会因为这样的安排忍不住埋怨他： “你每天潜水，我一个人工作一个人吃饭，背着电脑在咖啡厅待一天”。

后来我发现我的委屈并不来自他，我只是孤独、只是不习惯，当原有的支持体系变化之后，需要时间进化至新的平衡。

他喜欢海，我喜欢山，我们完全可以独自去任何自己享受的地方，未来我们俩即使在不同的国家，也不要感到意外。

好的关系本该如此，没有你我也是完整的个体，有你更好。

## 食欲

我有个坏习惯：即使吃不完，也喜欢点一堆食物。

有一次我去 Levi 学习自由潜的潜店办公，间隙和师傅聊了起来，他和我们讲诉他在日本和捕鲸船的故事。

“有一回潜水，我和船员聊起了天，他问我你们中国人吃鲸鱼吗？我说不吃，然后船员鬼鬼祟祟又一脸骄傲地说：我们吃！“

师傅还尝试还原他们的表情。

“他们为什么要吃鲸，为了展示权力吗？”我问。

“不，是饮食文化习惯。但我觉得他们不应该如此，现在食物已经不紧缺了，我们没有必要为了习惯去过度消耗生物”。听到这里我的泪水已经在眼眶打转。

> 一鲸落，万物生

我觉得很惭愧，不再以纯粹的经济价值衡量食物，改掉了这个坏习惯。

## 物欲

清迈大学附近的公寓是需要自己带四件套的，因为住不久，我和 levi 一致决定要去淘便宜货。

附近有个便宜的市场，到了现场仍然被物价震惊了，枕头 8 块钱。

付款之后我突然感到有些委屈，我对我有这样的念头感到惊讶：

> 我没有试用这个枕头，却因为他过于便宜而否定他的价值

我是个体验派，无论是线上产品还是线下体验，我都应该更相信我自己的感觉，而不是任何评价体系。

## 家人


![image](https://img-template-mdx-blog.16781678.xyz/uploads/2025-12-20/1766223910408-tydcrg.jpg)

旅居之后，把两个 7 岁的好大儿送回了外婆家，已经成为了外婆的乖孙孙。


![image](https://img-template-mdx-blog.16781678.xyz/uploads/2025-12-20/1766223926366-rvmobh.jpg)

非常感谢我亲爱的母亲，我做任何决定都无条件地信任、支持我，爱你～', '', '', '', '', 'published', '2025-12-20 09:41:41.078279', '2025-12-20 09:47:11.239', null, '0'), ('f7789636-5171-4677-a4f3-d75819fe4560', '8ed04d25-9aac-4da0-b030-0fd839d50608', '', 'what-i-talk-about-when-i-talk-about-product', 'article', 'What I talk about when I talk about product', 'Sometimes, software building can feel a lot like running.', 'https://img-template-mdx-blog.16781678.xyz/uploads/2025-12-20/1766218702133-228d039e-c417-40a8-a9eb-586b85ccb3fe.webp', '> Origin Post: https://browsercompany.substack.com/p/what-i-talk-about-when-i-talk-about

“I''m often asked what I think about as I run. I always ponder the question. What exactly do I think about when I''m running? I don''t have a clue.”

Haruki Murakami, What I Talk About When I Talk About Running

At The Browser Company, we have a belief that says assume you don’t know. It underpins a lot of how and why we started building Arc, and is the starting point to some of the largest decisions we’ve made. A steady mix of intuition, experimentation — and endurance.

Sometimes it’s thrilling.

Other times, much like running, software building can be meandering.

And hard to talk about.

Truthfully, we weren’t quite sure if we should share a true behind the scenes of what product discussions actually look like for our team — but we’re learning to do the things that make us most uncomfortable.

So, here we are! Grab a tea and settle into your corner of the sofa, as our Head of Design, Dustin, and CEO Josh share a glimpse into What We Talk About When We Talk About Product.

Some days it’s about the question behind the question.

Most times, we don’t have a clue.

From us to you —

Your neighborhood Browser Company', '', '', '', '', 'published', '2025-12-20 08:19:38.49881', '2025-12-20 08:19:37.991', null, '0');