antfu / antfu.me Goto Github PK

Clear and concise description of the problem

Hi there,
I hope you are doing well.
I have been reading your website and I really enjoy your work, have a few questions about adding some new features to your website:

Mermaid diagrams

I know that there is a Mermaid package that can be added to Vitepress, but this site is not built with Vitepress.

I have not seen any diagrams in your articles that have been written with Mermaid, but I would like to know if it has been implemented. If not, how can we implement it?

Code block features

In VitePress and other websites like nextjs.org, code blocks have the following features:

• Language type in the top right corner, e.g : py-ts-js-cpp-sh-perl- ...
• A nav bar or a status bar above the code block for information such as the file address and name etc ...
• Code focus and highlight features etc ... (which some of are implemented in vitepress doc)

How can these features be added to this site?

I notice that when I read the code examples in your articles, there is no copy button, information bar, or language icon for the code snippet.

Using VitePress features

How can I use Vitepress and vitepress doc features on this site, especially the Markdown writing features?
Thank you for your time and consideration.

Best regards,

Suggested solution

I can add MathJax with the markdown-it MathJax package, but what about Mermaid? What if we can utilize VitePress Doc's MathJax and Mermaid native features in your website and incorporate them into .md posts?

As for Code Focus and Code block features, aside from CSS workarounds, are there any other logical ways to achieve what we want?

Antfu's website is great, but it lacks the awesome features found in your other works.

Of course, if we consider the blog page and its posts as personal articles, then they don't necessarily need code block features like Next.js Doc or VitePress Doc provide. However, if we intend to create more technical articles and style them as documentation, it would be great to have code block features such as code focus and code highlighting etc ...

Alternative

No response

Additional context

Markdown feature
https://vitepress.dev/guide/markdown

Nextjs code block style
https://nextjs.org/docs/getting-started/installation

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Describe the bug

I like how the Dots art background looks but I notices it takes a huge amount of CPU usage on a Windows laptop with 12th Gen Intel Core i7-1265U, around 40-50%, and make the fan speed up.

Reproduction

Go to the page with Dots art background, notice the CPU usage increases

System Info

Windows 11 x64, 12th Gen Intel Core i7-1265U, Chrome

Used Package Manager

bun

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Contributions

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests (actually just go ahead and do it, thanks!)

Describe the bug

I see the table of contents hidden on the left, but the article mention it’s on the right。

I have read reimagine-atomic-css article, it's very cool and I want use it in new project👍

Reproduction

https://antfu.me/posts/reimagine-atomic-css

System Info

not need

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

• Horizontal overflow
• White scrollbars in dark mode

Do you use netlify cms for managing your content? I see your config.yml file and you set folder for post to content/posts but i don't see content folder.

Cool personal web btw :)

Describe the bug

托尼托尼，🥹，按照你的项目结构搭建自己的博客过程中，使用vite的pages插件，404页面使用的是..404].md这个文件名，为啥会出现这个问题呀

Reproduction

无

System Info

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1
    Memory: 398.75 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.20.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.4 - /usr/local/bin/npm
    pnpm: 8.7.5 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 117.0.5938.88
    Safari: 17.0

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Describe the bug

I have a question. After using npm to build, I use live-server to start the server in the dist file. There is no problem in initial entry, but the page cannot be found after refreshing, and the vercel build has the same problem. I recently discovered this problem while updating my blog. When I packaged your blog, I found that you had the same problem, but your online blog was normal. Why was this? How did you solve it?

Initially, I suspected that there was a routing problem after vite-plugin-pages was packaged. I found a similar builded problem in vite-plugin-pages/issues#247. Hope to get your help, I will close this issues.

Reproduction

only cannot find the page after refreshing

System Info

cd antfu.me
pnpm run build
cd dist
live-server

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

I just run:

$ git clone https://github.com/antfu/antfu.me
$ pnpm i
$ pnpm build

An error has occurred when I build：

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
node:internal/modules/cjs/loader:933
  const err = new Error(message);
              ^

Error: Cannot find module 'file:\D:\VscodeItems\antfu.me\.vite-ssg-temp\main.cjs'
Require stack:
- D:\VscodeItems\antfu.me\node_modules\.pnpm\v[email protected]_6acdbf34162ba7e10d9a1c150af90728\node_modules\vite-ssg\dist\node\cli.mjs    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at build (file:///D:/VscodeItems/antfu.me/node_modules/.pnpm/[email protected]_6acdbf34162ba7e10d9a1c150af90728/node_modules/vite-ssg/dist/node/cli.mjs:185:77)
    at async Object.handler (file:///D:/VscodeItems/antfu.me/node_modules/.pnpm/[email protected]_6acdbf34162ba7e10d9a1c150af90728/node_modules/vite-ssg/dist/node/cli.mjs:298:3) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\VscodeItems\\antfu.me\\node_modules\\.pnpm\\[email protected]_6acdbf34162ba7e10d9a1c150af90728\\node_modules\\vite-ssg\\dist\\node\\cli.mjs'
  ]
}
 ELIFECYCLE  Command failed with exit code 1.

My env：

node: 16.13.1
OS: win10

Describe the bug

When I created over 200 lines of code blocks in the markdown, there was an error in building the pnpm run build. If I delete it, it can be successfully built. I think it should be a bug.

Reproduction

pnpm run build

System Info

System:
    OS: macOS 13.3.1
    CPU: arm64 Apple M1
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.17.1 - /usr/local/bin/node
    npm: 9.6.6 - /usr/local/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Safari: 16.4

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Describe the bug

Publishing date is Nov 1, 2022 and estimated reading time is 12 mins. But it seems that this post is truncated. Did something unexpected happen, or to be continued?

Looking forward to the complete post!

Reproduction

https://antfu.me/posts/nuxt3-or-vitesse

System Info

Ignore

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Describe the bug

You would expect the Blog nav link to remain active when on a specific posts/post, but the .md pages are not recognized as children of the posts (or notes) index link by the router.

Reproduction

Visit https://antfu.me/posts/animated-svg-logo, check the Blog nav link for .active-router-link class

System Info

This is not setup dependent, but is present in the compiled page output.

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Describe the bug

The build is completed successfully, but still, animations aren't opening after hosting using GitHub pages. The subpages show 404 error,

please help me fix this I'm stuck here since last 1 month
https://www.rudrakshkarpe.me/portfolio/

Reproduction

https://github.com/rudrakshkarpe/portfolio

System Info

chrome, Edge

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Describe the bug

/projects -> icones' link should be 'https://icones.js.org/'

'https://icones.js.app/' is not working~

Reproduction

https://antfu.me/projects

System Info

none

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.