yukaii / daily-oops

My blog built with next.js. notion-blog inspired, use HackMD as CMS

Daily Oops Website - The source code of yukai.dev

About

This is the source code of my blog Daily Oops, which is built on Next.js and uses HackMD as a CMS(Content Management System).

You can read the details of how it actually works here (in Chinese).

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

daily-oops's Issues

Unread indicator should hide by default

Prevent flashing of dots

Highlighted selected lines highlight js plugin

https://fluidframework.com/docs/advanced/doc-system/#syntax-formatting-and-line-highlighting

Hugos syntax

```ts {linenos=inline,hl_lines=["2-6",9]}

Proposed syntax (Reveal.js like)

```ts=123 [135-146,122]
// start from line 123, with ranges [135-146] and 122 highlighted
```

```ts= [3-5]
// no line number offset, with range [3-5] highlighted
```

TODOs

• Adjust dark mode gutter text color
• pre/tbody padding right
• toggle line number
• ranges

References

• https://github.com/wcoder/highlightjs-line-numbers.js
• https://revealjs.com/code/#line-numbers-highlights
  • https://github.com/hakimel/reveal.js/blob/master/plugin/highlight/plugin.js#L304
  • https://github.com/hakimel/reveal.js/blob/master/plugin/markdown/plugin.js#L16
• GitHub's file view

Callout syntax

Migrate to Next.js 13 App dir

blocking

• vercel/next.js#43704

Line number background was removed

Scrolling progress br

Switch to remark

Syntax highlight to github dimmed

圖片上傳區

Picture width can be slightly wider than container

Add footer

放一些個人連結（當 Link Tree 來用）

• GitHub
• Twitter
• Instagram
• Twitch
• Facebook

先這些好了

Migrate disqus to isso

• https://posativ.org/isso/

Use shiki as syntax highlighter...?

https://github.com/shikijs/shiki/

Searching

Searching

用 Algolia 就好了。

• http://elasticlunr.com/
• or just use agolia

https://github.com/vercel/next-site/blob/master/scripts/index-docs.js

octicon 風格的向量 favicon

可以用在更多地方

Multiple authors

plain text (simple html) version of site

封面圖

Ref

• https://github.com/ijjk/notion-blog/blob/master/src/lib/blog-helpers.ts#L5

Marktext color

https://yukai.dev/blog/2000/01/01/HackMD-Markdown#emphasis

暗色也是壞

seo tags not rendered

File name for codeblock

https://developers.cloudflare.com/workers/learning/getting-started

Migrate to typescript

Inline annotation like readr

2023-08-29.9.59.35.mov

Keyboard help modal

shikiji

https://github.com/antfu/shikiji

iframe preview cards

Rethink components in Layout

https://reacttricks.com/nested-dynamic-layouts-in-next-apps/

Replace Disqus with giscus

https://giscus.app/

Commands block interaction

Allow pure dark color scheme

後來編輯器和 GitHub 反而沒有用 dimmed 了 XD 喜好真是與時俱進

Host with netlify

that's why #29

Use muted fg for strike through texts

test

next seo

https://github.com/garmeeh/next-seo

Support markdown in fig caption

要做一些超鏈接比較方便，也是常用的

noflash update html attribute

daily-oops/lib/usePrimerDarkMode.js

Line 9 in 5323fde

html.setAttribute('data-color-mode', darkMode.value ? 'dark' : 'light')

dynamic og image

Tags and related posts

Sitemap is broken in SSR deployment

markdown-it-container

https://primer.style/css/support/color-system

GTag not working

Theme screenshots

Integrate ActivityPub protocol

Feeds or commenting

https://github.com/michaelcpuckett/activitypub-core

Excluding features post

too many 500 errors to cause google web master stop crawling

• replace with absolute link in that markdown
• or handle the link gracefully and redirect to 404 page

Keyboard shortcuts