[{"_1":2,"_256":-5,"_257":-5},"loaderData",{"_3":4},"routes/services/blog/web/index/route",{"_5":6,"_51":52,"_251":252,"_253":254,"_255":-7},"meta",{"_7":8,"_35":36},"metaTags",[9,12,17,20,22,25,28,31,33],{"_10":11},"title","Blog - Where you see my sounds 🎵",{"_13":14,"_15":16},"name","description","content","This is where I share my thoughts and insights.",{"_18":19,"_15":11},"property","og:title",{"_18":21,"_15":16},"og:description",{"_18":23,"_15":24},"og:type","website",{"_18":26,"_15":27},"og:url","https://papacloud.vercel.app/blog",{"_13":29,"_15":30},"twitter:card","summary_large_image",{"_13":32,"_15":11},"twitter:title",{"_13":34,"_15":16},"twitter:description","seo",{"_37":38,"_39":11,"_40":16,"_41":-5,"_42":-5,"_43":44,"_45":46,"_47":48,"_49":50},"id",61,"metaTitle","metaDescription","keywords","ogImage","autoGenerated",true,"route","/blog","createdAt",["D",1746608338292],"updatedAt",["D",1746608338292],"posts",[53,110,143,166,191,217],{"_37":54,"_55":56,"_10":57,"_15":58,"_59":60,"_61":62,"_63":64,"_65":66,"_47":67,"_49":68,"_69":54,"_70":71,"_35":87,"_92":93,"_104":105},1,"slug","react-router-dev-routes-is-not-available-runtime","react-router/dev/routes is not Available @ Runtime","{\"type\":\"doc\",\"content\":[{\"type\":\"blockquote\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"TL;DR: config 選項可以作為 function 提供使用者所需的 functions / env。\"}]}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"前情提要\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"我的 side project 是用 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://reactrouter.com/home\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"React Router v7\"},{\"type\":\"text\",\"text\":\"，前身是 Remix，使用 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"app/routes.ts\"},{\"type\":\"text\",\"text\":\" 定義 routes。\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"為了讓未來專案可以快速有個 solid base，所以這三天在處理 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"routes 跟 config\"},{\"type\":\"text\",\"text\":\"，準備把現在這個已經有「Better Auth、Dashboard、TipTap Rich Editor、Email Service、Object Storage（我用 Cloudflare R2）」的專案，\"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"擴充一個「services」資料夾\"},{\"type\":\"text\",\"text\":\"，未來其他專案的內容可以模組化的直接放在裡面，並只需要定義 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"config.tsx\"},{\"type\":\"text\",\"text\":\" 就能在 Dashboard 顯示側邊按鈕，以及自定義任何 route。\"}]},{\"type\":\"horizontalRule\"},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"先來看看原本的 config type。\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"tsx\"},\"content\":[{\"type\":\"text\",\"text\":\"export interface Service {\\n\\t// ...\\n\\t/**\\n\\t * Routes specific to the service\\n\\t * @example\\n\\t * ```\\n\\t * routes: [\\n\\t * \\t\\troute('/new-shop', './routes/services/new-service/shop/layout.tsx', [\\n\\t * \\t\\tindex('./routes/services/new-service/shop/index.tsx'),\\n\\t * \\t\\troute(\\n\\t * \\t\\t\\t':productId',\\n\\t * \\t\\t\\t'./routes/services/new-service/shop/product/route.tsx',\\n\\t * \\t\\t),\\n\\t * \\t]),\\n\\t * ]\\n\\t * ```\\n\\t */\\n\\troutes?: RouteConfig\\n\\t// ...\\n}\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"這邊 routes 請未來的我直接提供 rrv7 官方的 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"routes.ts\"},{\"type\":\"text\",\"text\":\" 用法，所以必須直接 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"import { route, index } from \\\"@react-router/dev/routes\\\"\"},{\"type\":\"text\",\"text\":\"。\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"實際的 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"config.ts\"},{\"type\":\"text\",\"text\":\" 看起來像是這樣：\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"tsx\"},\"content\":[{\"type\":\"text\",\"text\":\"import { route, index } from \\\"@react-router/dev/routes\\\"\\n\\nexport const config = {\\n\\tdashboard: {\\n logo: '/logo-100.png',\\n },\\n\\troutes: [\\n\\t\\troute(\\n\\t\\t\\t'/example-shop',\\n\\t\\t\\t'./routes/services/example-service/shop/layout.tsx',\\n\\t\\t\\t[\\n\\t\\t\\t\\tindex('./routes/services/example-service/shop/index.tsx'),\\n\\t\\t\\t\\troute(\\n\\t\\t\\t\\t\\t':productId',\\n\\t\\t\\t\\t\\t'./routes/services/example-service/shop/product/route.tsx',\\n\\t\\t\\t\\t),\\n\\t\\t\\t],\\n\\t\\t),\\n\\t],\\n\\t// ...\\n} satisfies Service\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"因為 config 會用到 route & index，而且會被其他 runtime 讀取（例如 /dashboard 讀取 service 的 logo），因此會被包進去最終的 bundle，造成在運行時（runtime）找不到位在 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"package.json\"},{\"type\":\"text\",\"text\":\" devDependencies 的 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"react-router/dev\"},{\"type\":\"text\",\"text\":\"。\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"解決方法：將原本的 routes Array 轉換成 Function\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"tsx\"},\"content\":[{\"type\":\"text\",\"text\":\"import type {\\n\\tindex,\\n\\tlayout,\\n\\tprefix,\\n\\troute,\\n\\tRouteConfig,\\n} from '@react-router/dev/routes'\\n\\ntype RouteHelper = {\\n\\tindex: typeof index\\n\\troute: typeof route\\n\\tlayout: typeof layout\\n\\tprefix: typeof prefix\\n}\\n\\nexport interface Service {\\n\\t// ...\\n\\t/**\\n\\t * Routes specific to the service\\n\\t * @example\\n\\t * ```\\n\\t * routes: ({ route, index }) => [\\n\\t * \\t\\troute('/new-shop', './routes/services/new-service/shop/layout.tsx', [\\n\\t * \\t\\tindex('./routes/services/new-service/shop/index.tsx'),\\n\\t * \\t\\troute(\\n\\t * \\t\\t\\t':productId',\\n\\t * \\t\\t\\t'./routes/services/new-service/shop/product/route.tsx',\\n\\t * \\t\\t),\\n\\t * \\t]),\\n\\t * ]\\n\\t * ```\\n\\t */\\n\\troutes?: (helper: RouteHelper) => RouteConfig\\n\\t// ...\\n}\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"這樣 service config 的 routes 就會是一個很單純的，不需要任何 import 的 Function！\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"只在 build 時建立 routes\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"原本的方式，讓開發者不管怎樣都要 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"import react-routes/dev\"},{\"type\":\"text\",\"text\":\"，現在則是只有 type，並且只有在真的會用到 routes 的地方（例如 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"app/routes.ts\"},{\"type\":\"text\",\"text\":\"），才會 import，並在使用時丟入 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"{ index, route, prefix, layout }\"},{\"type\":\"text\",\"text\":\" 就能取得。\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"像是下面這個：\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"typescript\"},\"content\":[{\"type\":\"text\",\"text\":\"import {\\n\\tindex,\\n\\tlayout,\\n\\tprefix,\\n\\troute,\\n\\ttype RouteConfig,\\n} from '@react-router/dev/routes'\\n\\nexport const servicesRoutes = () => {\\n\\tconst modules = getServiceRoutesModules()\\n\\tconst servicesRoutes: RouteConfig = []\\n\\n\\t/**\\n\\t * Automatically includes all service routes without manual imports\\n\\t */\\n\\tfor (const [path, service] of Object.entries(modules)) {\\n\\t\\ttry {\\n\\t\\t\\tif (!service.routes) continue\\n\\t\\t\\t// 丟入四個 route config functions，取得實際的 routes\\n\\t\\t\\tconst routes = service.routes({\\n\\t\\t\\t\\tindex,\\n\\t\\t\\t\\troute,\\n\\t\\t\\t\\tprefix,\\n\\t\\t\\t\\tlayout,\\n\\t\\t\\t})\\n\\n\\t\\t\\tif (Array.isArray(routes)) {\\n\\t\\t\\t\\tservicesRoutes.push(...routes)\\n\\t\\t\\t}\\n\\t\\t} catch (error) {\\n\\t\\t\\tconsole.error(`Failed to load routes from ${path}:`, error)\\n\\t\\t}\\n\\t}\\n\\n\\treturn servicesRoutes\\n}\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"就這樣！其實很多大專案也是這樣處理的，像是 vite \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"defineConfig\"},{\"type\":\"text\",\"text\":\"，或是 better-auth 的 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"betterAuth()\"},{\"type\":\"text\",\"text\":\"。\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"如果對我的 Side Project 有興趣的話可以去 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://github.com/gjc14/papa.git\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Papa GitHub resource\"},{\"type\":\"text\",\"text\":\" 看看～\"}]}]}","excerpt","TL;DR: config 選項可以作為 function 提供使用者所需的 functions / env。 ","featuredImage","/assets/9c440035-ff5f-455f-bee4-2c327de7eb00","status","PUBLISHED","authorId","psRr2HBzP8Fv7Nxyvr45KY4mpcLu1sCY",["D",1752344143749],["D",1761404106992],"seoId","author",{"_37":66,"_13":72,"_73":74,"_75":44,"_76":77,"_47":78,"_49":79,"_80":81,"_82":83,"_84":85,"_86":-5},"Yin","email","yin@yinc.me","emailVerified","image","https://placecats.com/300/200",["D",1744040568491],["D",1744040568491],"role","admin","banned",false,"banReason","","banExpires",{"_37":54,"_39":57,"_40":60,"_41":88,"_42":62,"_43":44,"_45":89,"_47":90,"_49":91},"1","/blog/react-router-dev-routes-is-not-available-runtime",["D",1752344143749],["D",1761404107553],"tags",[94,98,102],{"_37":95,"_13":96,"_55":97,"_14":-5},434,"Papa","papa",{"_37":99,"_13":100,"_55":101,"_14":-5},435,"Open Source","open-source",{"_37":54,"_13":103,"_55":103,"_14":85},"react-router","categories",[106],{"_37":107,"_13":108,"_55":103,"_14":85,"_109":-5},8,"React Router","parentId",{"_37":111,"_55":112,"_10":113,"_15":114,"_59":115,"_61":-5,"_63":64,"_65":66,"_47":116,"_49":117,"_69":111,"_70":118,"_35":121,"_92":127,"_104":142},2,"jotai-vs.-zustand-react-state-management","Jotai (状態) React State Management（與 Zustand 微比較）","{\"type\":\"doc\",\"content\":[{\"type\":\"blockquote\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"TL;DR: 如果要找取代 Context 的就用 Jotai，跟 Context 一樣要使用必須有 Provider，也有跟 useState 幾乎一樣的 API，資料存在 Context 層；正在找全域 state 的就用 Zustand，他是存在 Module 層\"}]}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Jotai & Zustand 背景介紹\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"真可愛，這兩個字的意思分別是日文跟德文的「狀態」，都是在 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://pmnd.rs/\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Poimandres\"},{\"type\":\"text\",\"text\":\" 底下的專案，Jotai 作者 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://x.com/dai_shi\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Daishi Kato (@dai_shi) / X\"},{\"type\":\"text\",\"text\":\" 在加入 Poimandres 後開始接手 Zustand 維護，後來又做了 Jotai！\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"簡潔的 Jotai API vs. 全能的 Zustand\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"在 Jotai docs 就有簡單說明他跟 useContext / Zustand / Recoli 的差別，詳細可以看 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://jotai.org/docs/recipes/large-objects\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Large objects — Jotai\"},{\"type\":\"text\",\"text\":\"。我看下來，簡單來說差異主要是在儲存的地方，Jotai 主要把狀態存在「context level」而 Zustand 則是存在「module level」（在 app 外全域儲存），所以 Zustand 用 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"createStore()\"},{\"type\":\"text\",\"text\":\"隨時隨地都能使用，不需要包 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"\"},{\"type\":\"text\",\"text\":\"；而 Jotai 是用 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"atom\"},{\"type\":\"text\",\"text\":\"，必須要在 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"\"},{\"type\":\"text\",\"text\":\" 中才能使用。\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"以下簡單說明 Jotai 的用法：\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Jotai \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"focusAtom\"},{\"type\":\"text\",\"text\":\" 訂閱大 Object 中特定項目\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"如果是用 state 儲存，例如說一篇文章，結構如下：\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"ts\"},\"content\":[{\"type\":\"text\",\"text\":\"const [postRelated, setPostRelated] = useState({\\n author: {},\\n post: {},\\n seo: {},\\n tags: {},\\n categories: {},\\n})\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"壞處顯而易見，即使我只是改個跟內文不相關的 tag / category / author / seo，整個使用到這些東西的 component 都會 rerender，這時候就會需要將整個 PostRelated 拆分成超多項，分別用 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"useState\"},{\"type\":\"text\",\"text\":\" / \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"useContext\"},{\"type\":\"text\",\"text\":\" 存並傳到 child components 中，而且他們兩個裡面的東西並不會自動拆分狀態，牽一髮動全身。\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"這時候 Jotai 的好處就來了！使用 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"focusAtom()\"},{\"type\":\"text\",\"text\":\" 只訂閱特定的 object key，只有當該 atom 內容有改變時才會 rerender：\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"tsx\"},\"content\":[{\"type\":\"text\",\"text\":\"// data comes from server\\nconst postRelatedAtom = atom({\\n author: {},\\n post: {},\\n seo: {},\\n tags: [],\\n categories: [],\\n})\\n\\n// 這樣就直接可以作為新的 atom 使用\\nconst authorAtom = focusAtom(postRelatedAtom, (optic) => optic.prop('author'))\\nconst postAtom = focusAtom(postRelatedAtom, (optic) => optic.prop('post'))\\n\\n// Parent\\nfunction PostLayout() {\\n return (\\n \\n \\n \\n \\n )\\n}\\n\\n// Children\\nfunction PostHeader() {\\n const [authorState, setAuthorState] = useAtom(authorAtom)\\n return \\n}\\nfunction PostContent() {\\n const [postState, setPostState] = useAtom(postAtom)\\n // ... change post to html\\n return \\n}\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null}},{\"type\":\"blockquote\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"現在知道 atom 的概念其實就是一個 syntax 非常簡單，卻可以達到跟 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"useContext\"},{\"type\":\"text\",\"text\":\" 一樣結果的東東，可以想像成在 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"\"},{\"type\":\"text\",\"text\":\" 內，可以隨意取用的 state。\"}]}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null}}]}","簡潔的 Jotai API vs. 全能的 Zustand\n\n在 Jotai docs 就有簡單說明他跟 useContext / Zustand / Recoli 的差別，詳細可以看 Large objects — Jotai。我看下來，簡單來說差異主要是在儲存的地方，Jotai 主要把狀態存在「context level」而 Zustand 則是存在「module level」（在 app 外全域儲存）。",["D",1752466276066],["D",1753644092565],{"_37":66,"_13":72,"_73":74,"_75":44,"_76":77,"_47":119,"_49":120,"_80":81,"_82":83,"_84":85,"_86":-5},["D",1744040568491],["D",1744040568491],{"_37":111,"_39":122,"_40":123,"_41":-5,"_42":-5,"_43":44,"_45":124,"_47":125,"_49":126},"Jotai vs. Zustand React State Management","簡潔的 Jotai API vs. 全能的 Zustand\n\n在 Jotai docs 就有簡單說明他跟 useContext / Zustand / Recoli 的差別，詳細可以看 Large objects — Jotai。我看下來，簡單來說差異主要是在儲存的地方，Jotai 主要把狀態存在「context level」而 Zustand 則是存在「module level」（在 app 外全域儲存）","/blog/jotai-vs.-zustand-react-state-management",["D",1752466276066],["D",1753644093132],[128,131,135,139],{"_37":111,"_13":129,"_55":130,"_14":85},"Jotai","jotai",{"_37":132,"_13":133,"_55":134,"_14":85},3,"Zustand","zustand",{"_37":136,"_13":137,"_55":138,"_14":85},4,"Context","context",{"_37":140,"_13":141,"_55":141,"_14":85},5,"狀態",[],{"_37":136,"_55":144,"_10":145,"_15":146,"_59":147,"_61":-5,"_63":64,"_65":66,"_47":148,"_49":149,"_69":136,"_70":150,"_35":153,"_92":157,"_104":165},"automatically-generate-sitemap-in-react-router-v7","Automatically Generate Sitemap in React Router v7","{\"type\":\"doc\",\"content\":[{\"type\":\"blockquote\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"This post will go through the process of generating the Sitemap in React Router v7 from \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"virtual:react-router/server-build\"}]}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"TL;DR: This is \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"loader()\"},{\"type\":\"text\",\"text\":\" for \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"sitemap.xml\"},{\"type\":\"text\",\"text\":\" route\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"tsx\"},\"content\":[{\"type\":\"text\",\"text\":\"import * as serverBuild from 'virtual:react-router/server-build'\\n\\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\\n\\tconst url = new URL(request.url)\\n\\tconst origin = url.origin\\n\\n\\tconst systemSitemaps = sitemapUrlsFromServerBuild(origin, serverBuild.routes)\\n}\\n\\n\\tconst urlTags = toXmlUrlTagss([...systemSitemaps])\\n\\n\\ttry {\\n\\t\\treturn new Response(\\n\\t\\t\\t`\\n\\t\\t\\t\\t\\n\\t\\t\\t\\t\\t${urlTags.join('\\\\n')}\\n\\t\\t\\t\\t`,\\n\\t\\t\\t{\\n\\t\\t\\t\\tstatus: 200,\\n\\t\\t\\t\\theaders: {\\n\\t\\t\\t\\t\\t'Content-Type': 'application/xml',\\n\\t\\t\\t\\t\\t'X-Content-Type-Options': 'nosniff',\\n\\t\\t\\t\\t\\t'Cache-Control': 'public, max-age=3600',\\n\\t\\t\\t\\t},\\n\\t\\t\\t},\\n\\t\\t)\\n\\t} catch (e) {\\n\\t\\tconsole.error('Error generating sitemap:', e)\\n\\t\\tthrow new Response('', { status: 500 })\\n\\t}\\n}\\n\\n/**\\n * Generate sitemap URLs from server build routes\\n */\\nfunction sitemapUrlsFromServerBuild(\\n\\torigin: string,\\n\\troutes: typeof serverBuild.routes,\\n): SitemapURL[] {\\n\\tconst urls: SitemapURL[] = []\\n\\tconst now = new Date()\\n\\n\\tfor (const key in routes) {\\n\\t\\t/**\\n\\t\\t * 'routes/papa/dashboard/assets/resource': {\\n\\t\\t * id: 'routes/papa/dashboard/assets/resource',\\n\\t\\t * parentId: 'routes/papa/dashboard/layout/route',\\n\\t\\t * path: 'assets/resource',\\n\\t\\t * index: undefined,\\n\\t\\t * caseSensitive: undefined,\\n\\t\\t * module: [Object: null prototype] [Module] {\\n\\t\\t * action: [Getter],\\n\\t\\t * loader: [Getter]\\n\\t\\t * }\\n\\t\\t * },\\n\\t\\t */\\n\\t\\tconst route = routes[key]\\n\\t\\tif (!route || !route.path) continue\\n\\t\\tconst path = route.path\\n\\n\\t\\tif (\\n\\t\\t\\t!path.includes(':') && // exclude dynamic segments\\n\\t\\t\\t!path.includes('*') // exclude catch-all segments\\n\\t\\t) {\\n\\t\\t\\tlet parentRoute = route.parentId ? routes[route.parentId] : undefined\\n\\t\\t\\tlet fullPath = path\\n\\n\\t\\t\\twhile (parentRoute) {\\n\\t\\t\\t\\tif (parentRoute?.path) {\\n\\t\\t\\t\\t\\tfullPath = `${parentRoute.path}/${fullPath}`\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tparentRoute = parentRoute.parentId\\n\\t\\t\\t\\t\\t? routes[parentRoute.parentId]\\n\\t\\t\\t\\t\\t: undefined\\n\\t\\t\\t}\\n\\n\\t\\t\\t// filter\\n\\t\\t\\tif (\\n\\t\\t\\t\\tfullPath.startsWith('/dashboard') ||\\n\\t\\t\\t\\tfullPath.startsWith('/api') ||\\n\\t\\t\\t\\t['/sitemap.xml', '/robots.txt'].includes(fullPath)\\n\\t\\t\\t) {\\n\\t\\t\\t\\tcontinue\\n\\t\\t\\t}\\n\\n\\t\\t\\turls.push({\\n\\t\\t\\t\\tloc: `${origin}${fullPath}`,\\n\\t\\t\\t\\tlastmod: now,\\n\\t\\t\\t})\\n\\t\\t}\\n\\t}\\n\\n\\treturn urls\\n}\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"sitemapUrlsFromServerBuild()\"},{\"type\":\"text\",\"text\":\" function will loop through the routes, concat current routes with all its parents, and returns SitemapUrl typed array.\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"ts\"},\"content\":[{\"type\":\"text\",\"text\":\"/**\\n * @see https://www.sitemaps.org/protocol.html#sitemapElement\\n */\\nexport interface SitemapURL {\\n\\t/** URL of the page. This URL must begin with the protocol (such as http) and end with a trailing slash, if your web server requires it. This value must be less than 2,048 characters. */\\n\\tloc: string\\n\\t/**\\n\\t * The date of last modification of the page. This date should be in W3C Datetime format. This format allows you to omit the time portion, if desired, and use YYYY-MM-DD.\\n\\t *\\n\\t * Note that the date must be set to the date the linked page was last modified, not when the sitemap is generated.\\n\\t *\\n\\t * Note also that this tag is separate from the If-Modified-Since (304) header the server can return, and search engines may use the information from both sources differently.\\n\\t * @see https://www.w3.org/TR/NOTE-datetime */\\n\\tlastmod?: Date\\n\\t/**\\n\\t * How frequently the page is likely to change. This value provides general information to search engines and may not correlate exactly to how often they crawl the page. Valid values are:\\n\\t *\\n\\t * - always\\n\\t * - hourly\\n\\t * - daily\\n\\t * - weekly\\n\\t * - monthly\\n\\t * - yearly\\n\\t * - never\\n\\t *\\n\\t * The value \\\"always\\\" should be used to describe documents that change each time they are accessed. The value \\\"never\\\" should be used to describe archived URLs.\\n\\t *\\n\\t * Please note that the value of this tag is considered a hint and not a command. Even though search engine crawlers may consider this information when making decisions, they may crawl pages marked \\\"hourly\\\" less frequently than that, and they may crawl pages marked \\\"yearly\\\" more frequently than that. Crawlers may periodically crawl pages marked \\\"never\\\" so that they can handle unexpected changes to those pages.\\n\\t */\\n\\tchangefreq?:\\n\\t\\t| 'always'\\n\\t\\t| 'hourly'\\n\\t\\t| 'daily'\\n\\t\\t| 'weekly'\\n\\t\\t| 'monthly'\\n\\t\\t| 'yearly'\\n\\t\\t| 'never'\\n\\t/**\\n\\t * The priority of this URL relative to other URLs on your site. Valid values range from 0.0 to 1.0. This value does not affect how your pages are compared to pages on other sites—it only lets the search engines know which pages you deem most important for the crawlers.\\n\\t *\\n\\t * The default priority of a page is 0.5.\\n\\t *\\n\\t * Please note that the priority you assign to a page is not likely to influence the position of your URLs in a search engine's result pages. Search engines may use this information when selecting between URLs on the same site, so you can use this tag to increase the likelihood that your most important pages are present in a search index.\\n\\t *\\n\\t * Also, please note that assigning a high priority to all of the URLs on your site is not likely to help you. Since the priority is relative, it is only used to select between URLs on your site.\\n\\t * @default 0.5\\n\\t */\\n\\tpriority?: number\\n}\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"The \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"serverBuild.routes\"},{\"type\":\"text\",\"text\":\" Looks Like This\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"tsx\"},\"content\":[{\"type\":\"text\",\"text\":\"{\\n root: {\\n id: 'root',\\n parentId: undefined,\\n path: '',\\n index: undefined,\\n caseSensitive: undefined,\\n module: [Object: null prototype] [Module] {\\n meta: [Getter],\\n Layout: [Getter],\\n loader: [Getter],\\n default: [Getter],\\n ErrorBoundary: [Getter]\\n }\\n },\\n 'routes/web/layout': {\\n id: 'routes/web/layout',\\n parentId: 'root',\\n path: undefined,\\n index: undefined,\\n caseSensitive: undefined,\\n module: [Object: null prototype] [Module] {\\n meta: [Getter],\\n default: [Getter],\\n ErrorBoundary: [Getter]\\n }\\n },\\n 'routes/web/index/route': {\\n id: 'routes/web/index/route',\\n parentId: 'routes/web/layout',\\n path: undefined,\\n index: true,\\n caseSensitive: undefined,\\n module: [Object: null prototype] [Module] { default: [Getter] }\\n },\\n 'routes/web/blog/post-slug/route': {\\n id: 'routes/web/blog/post-slug/route',\\n parentId: 'routes/web/blog/layout',\\n path: ':postSlug',\\n index: undefined,\\n caseSensitive: undefined,\\n module: [Object: null prototype] [Module] { default: [Getter] }\\n },\\n 'routes/web/$/route': {\\n id: 'routes/web/$/route',\\n parentId: 'routes/web/layout',\\n path: '/*',\\n index: undefined,\\n caseSensitive: undefined,\\n module: [Object: null prototype] [Module] {\\n loader: [Getter],\\n default: [Getter]\\n }\\n },\\n 'routes/web/_robots.txt': {\\n id: 'routes/web/_robots.txt',\\n parentId: 'routes/web/layout',\\n path: '/robots.txt',\\n index: undefined,\\n caseSensitive: undefined,\\n module: [Object: null prototype] [Module] { loader: [Getter] }\\n },\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null}}]}","this post will go through the process of generating the Sitemap in React Router v7 from virtual:react-router/server-build",["D",1753036227877],["D",1753644353693],{"_37":66,"_13":72,"_73":74,"_75":44,"_76":77,"_47":151,"_49":152,"_80":81,"_82":83,"_84":85,"_86":-5},["D",1744040568491],["D",1744040568491],{"_37":136,"_39":145,"_40":147,"_41":-5,"_42":-5,"_43":44,"_45":154,"_47":155,"_49":156},"/blog/automatically-generate-sitemap-in-react-router-v7",["D",1753036227877],["D",1753644354532],[158,159,162],{"_37":54,"_13":103,"_55":103,"_14":85},{"_37":160,"_13":161,"_55":161,"_14":85},11,"remix",{"_37":163,"_13":164,"_55":164,"_14":85},12,"sitemap",[],{"_37":140,"_55":167,"_10":168,"_15":169,"_59":170,"_61":-5,"_63":64,"_65":66,"_47":171,"_49":172,"_69":140,"_70":173,"_35":176,"_92":180,"_104":190},"react-router-v7-csp-content-security-policy-config","React Router v7 CSP (Content Security Policy) Configuration","{\"type\":\"doc\",\"content\":[{\"type\":\"blockquote\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"CSP References: \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Content Security Policy (CSP) - HTTP | MDN\"},{\"type\":\"text\",\"text\":\", \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Content Security Policy - OWASP Cheat Sheet Series\"},{\"type\":\"text\",\"text\":\", \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://content-security-policy.com/\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Content-Security-Policy (CSP) Header Quick Reference\"},{\"type\":\"text\",\"text\":\".\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"React Router References: \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://reactrouter.com/how-to/middleware#response-headers\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Middleware#response-headers | React Router\"},{\"type\":\"text\",\"text\":\", \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://reactrouter.com/how-to/security#security\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Security | React Router\"},{\"type\":\"text\",\"text\":\", \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://github.com/remix-run/remix/issues/183\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Security - Can't use CSP that blocks 'unsafe-inline'; · Issue #183 · remix-run/remix\"}]}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null}},{\"type\":\"bulletList\",\"content\":[{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Github repository: \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://github.com/gjc14/rrv7-csp\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"gjc14/rrv7-csp\"}]}]}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Why Should You Consider CSP\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"We are implementing \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"CSP (Content Security Policy)\"},{\"type\":\"text\",\"text\":\" for our website. This is a basic header setting to prevent XSS attack, and is widely implemented. However, I cannot find a solid and promising way to get the nonce set in \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"React Router v7 - framework mode\"},{\"type\":\"text\",\"text\":\", and really lack of documentation.\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"This post will walk through the steps to set up CSP via middleware and loader in React Router v7.\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Important Steps:\"}]},{\"type\":\"orderedList\",\"attrs\":{\"start\":1,\"type\":null},\"content\":[{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Generate nonce and \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"pass to context\"},{\"type\":\"text\",\"text\":\" in either \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"root loader()\"},{\"type\":\"text\",\"text\":\" or \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"middleware\"},{\"type\":\"text\",\"text\":\".\"}]}]},{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"entry.server.tsx\"},{\"type\":\"text\",\"text\":\": React Router uses some inline script for DX, so we should get nonce from the context here and pass it to these scripts. p.s. \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"middleware[]\"},{\"type\":\"text\",\"text\":\" → \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"loader()\"},{\"type\":\"text\",\"text\":\" → \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"handleRequest()\"},{\"type\":\"text\",\"text\":\".\"}]}]},{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Add nonce meta tag\"}]}]}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Generate Nonce in Root Loader or Middleware\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"They are both capable of configuring headers, if you don’t want to use future middleware flag, just return headers with \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"data()\"},{\"type\":\"text\",\"text\":\" in root loader. However, I use \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"unstable_createContext()\"},{\"type\":\"text\",\"text\":\" to share nonce in server. \"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"Please remember to set nonce in the context either in loader or in middleware!\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"Create Nonce Context\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"tsx\"},\"content\":[{\"type\":\"text\",\"text\":\"// context/csp-nonce.ts\\nexport const nonceContext = unstable_createContext()\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"In root \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"loader()\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"tsx\"},\"content\":[{\"type\":\"text\",\"text\":\"// root.tsx\\nexport const headers = ({ loaderHeaders }: Route.HeadersArgs) => {\\n return loaderHeaders;\\n};\\n\\nexport const loader = ({ context }: Route.LoaderArgs) => {\\n const nonce = generateNonce();\\n const headers = {\\n [process.env.NODE_ENV === \\\"production\\\"\\n ? \\\"Content-Security-Policy\\\"\\n : \\\"Content-Security-Policy-Report-Only\\\"]: getContentSecurityPolicy(nonce),\\n /** @see https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Reference/Headers/Strict-Transport-Security */\\n \\\"Strict-Transport-Security\\\": \\\"max-age=3600\\\", // 1 hour. HTTPS only\\n \\\"X-Frame-Options\\\": \\\"SAMEORIGIN\\\", // Prevent clickjacking\\n \\\"X-Content-Type-Options\\\": \\\"nosniff\\\", // Prevent MIME type sniffing\\n };\\n context.set(nonceContext, nonce);\\n return data({ nonce }, { headers });\\n};\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"In middleware\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"tsx\"},\"content\":[{\"type\":\"text\",\"text\":\"// root.tsx\\nconst headersMiddleware: Route.unstable_MiddlewareFunction = async (\\n\\t{ context, request },\\n\\tnext,\\n) => {\\n\\tconst nonce = generateNonce()\\n\\n\\tconst headers = {\\n\\t\\t[process.env.NODE_ENV === 'production'\\n\\t\\t\\t? 'Content-Security-Policy'\\n\\t\\t\\t: 'Content-Security-Policy-Report-Only']: getContentSecurityPolicy(nonce),\\n\\t\\t/** @see https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Reference/Headers/Strict-Transport-Security */\\n\\t\\t'Strict-Transport-Security': 'max-age=3600', // 1 hour. HTTPS only\\n\\t\\t'X-Frame-Options': 'SAMEORIGIN', // Prevent clickjacking\\n\\t\\t'X-Content-Type-Options': 'nosniff', // Prevent MIME type sniffing\\n\\t}\\n\\n\\tcontext.set(nonceContext, nonce)\\n\\n\\tconst response = await next()\\n\\tfor (const [key, value] of Object.entries(headers)) {\\n\\t\\tresponse.headers.set(key, value)\\n\\t}\\n\\n\\treturn response\\n}\\n\\nexport const unstable_middleware: Route.unstable_MiddlewareFunction[] = [headersMiddleware]\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Retrieve nonce from context in \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"entry.server.tsx\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Here in the \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"handleRequest()\"},{\"type\":\"text\",\"text\":\" function, we could retrieve nonce context set from loader or middleware, and we should pass the nonce to \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"renderToPipeableStream()\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"This solves \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"import(\\\"/node_modules/.pnpm/@react-router+dev@7.6.2_@...\"},{\"type\":\"text\",\"text\":\" in dev and \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"import(\\\"/assets/entry.client-BYY3z-UA.js\\\");\"},{\"type\":\"text\",\"text\":\" in prod.\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"tsx\"},\"content\":[{\"type\":\"text\",\"text\":\"export default function handleRequest(props) {\\n let nonce: string;\\n\\n try {\\n // If root headers does not set, there will not be a nonce\\n nonce = loadContext.get(nonceContext);\\n } catch (error) {\\n nonce = generateNonce();\\n console.warn(\\\"No nonce found in context, generating a fallback.\\\");\\n }\\n\\n // ...\\n const { pipe, abort } = renderToPipeableStream(\\n ,\\n // ^ pass nonce to \\n {\\n nonce, // and renderToPipeableStream\\n // ...\\n }\\n );\\n // ...\\n}\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Add nonce Meta Tag\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Vite will automatically search for \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"csp-nonce\"},{\"type\":\"text\",\"text\":\" meta.\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"This is quite confusing, in vite documentation they do mentions that vite will inject a \"},{\"type\":\"text\",\"marks\":[{\"type\":\"textStyle\",\"attrs\":{\"backgroundColor\":null,\"color\":\"rgb(223, 223, 214)\",\"fontFamily\":null,\"fontSize\":null,\"lineHeight\":null}}],\"text\":\"meta tag, but only when \"},{\"type\":\"text\",\"marks\":[{\"type\":\"textStyle\",\"attrs\":{\"backgroundColor\":null,\"color\":\"rgb(223, 223, 214)\",\"fontFamily\":null,\"fontSize\":null,\"lineHeight\":null}},{\"type\":\"bold\"}],\"text\":\"html.cspNonce\"},{\"type\":\"text\",\"marks\":[{\"type\":\"textStyle\",\"attrs\":{\"backgroundColor\":null,\"color\":\"rgb(223, 223, 214)\",\"fontFamily\":null,\"fontSize\":null,\"lineHeight\":null}}],\"text\":\" is configured (\"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://vite.dev/guide/features.html#content-security-policy-csp\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Features | Vite\"},{\"type\":\"text\",\"marks\":[{\"type\":\"textStyle\",\"attrs\":{\"backgroundColor\":null,\"color\":\"rgb(223, 223, 214)\",\"fontFamily\":null,\"fontSize\":null,\"lineHeight\":null}}],\"text\":\"). You could find this script throwing error if you don’t provide a meta tag:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":null},\"content\":[{\"type\":\"text\",\"text\":\"const cspNonce = \\\"document\\\" in globalThis ? document.querySelector(\\\"meta[property=csp-nonce]\\\")?.nonce : void 0;\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"Whatever, so we provide corresponding meta tag in root:\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"jsx\"},\"content\":[{\"type\":\"text\",\"text\":\"//...\\nexport function Layout({ children }: { children: React.ReactNode }) {\\n//...\\nreturn(\\n\\t\\t// ...\\n\\t\\t\\n\\t\\t\\t\\n\\t\\t\\t\\n+\\t\\t\\t{import.env.meta.DEV && \\n\\t\\t\\t\\n\\t\\t\\t\\n\\t\\t\\n\\t\\t// ...\\n\\t)\\n}\"}]},{\"type\":\"horizontalRule\"},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Unsolved Issue: CSS Import in Dev Mode\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"import \\\"./app.css\\\";\"},{\"type\":\"text\",\"text\":\" in root is a conventional way to share global style. However, vite directly inject the \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\" {/* This throws error */}\\n \\n \\n )\\n}\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"The way I solve this is by using \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"remix-utils\"},{\"type\":\"text\",\"text\":\" \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"use-hydrated\"},{\"type\":\"text\",\"text\":\" hook, only renders the nonce after hydrating. \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://github.com/sergiodxa/remix-utils/blob/main/src/react/use-hydrated.ts\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"remix-utils-use-hydrated\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"tsx\"},\"content\":[{\"type\":\"text\",\"text\":\"// ...\\nconst isHydrated = useHydrated()\\nconst safeNonce = isHydrated ? nonce : undefined\\n// ...\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://github.com/kentcdodds/nonce-hydration-issues\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"kentcdodds/nonce-hydration-issues\"},{\"type\":\"text\",\"text\":\": This reproduction made by \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://github.com/kentcdodds\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}},{\"type\":\"textStyle\",\"attrs\":{\"backgroundColor\":null,\"color\":\"rgb(240, 246, 252)\",\"fontFamily\":null,\"fontSize\":null,\"lineHeight\":null}},{\"type\":\"bold\"}],\"text\":\"Kent C. Dodds\"},{\"type\":\"text\",\"text\":\" may be really helpful if you encounter this problem.\"}]}]}","This post will walk through the steps to set up CSP via middleware and loader in React Router v7.",["D",1753123903717],["D",1753644430217],{"_37":66,"_13":72,"_73":74,"_75":44,"_76":77,"_47":174,"_49":175,"_80":81,"_82":83,"_84":85,"_86":-5},["D",1744040568491],["D",1744040568491],{"_37":140,"_39":168,"_40":170,"_41":-5,"_42":-5,"_43":44,"_45":177,"_47":178,"_49":179},"/blog/react-router-v7-csp-content-security-policy-config",["D",1753123903717],["D",1753644431107],[181,184,187],{"_37":182,"_13":183,"_55":183,"_14":85},13,"headers",{"_37":185,"_13":186,"_55":186,"_14":85},14,"middleware",{"_37":188,"_13":189,"_55":189,"_14":85},15,"nonce",[],{"_37":192,"_55":193,"_10":194,"_15":195,"_59":196,"_61":-5,"_63":64,"_65":66,"_47":197,"_49":198,"_69":199,"_70":200,"_35":203,"_92":207,"_104":213},32,"handle-bigint-from-postgresql-to-typescript-intl-i","Handle BigInt from PostgreSQL to TypeScript Intl in React","{\"type\":\"doc\",\"content\":[{\"type\":\"blockquote\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"This post shows how to handle PostgreSQL \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"bigint\"},{\"type\":\"text\",\"text\":\" type after querying in TypeScript React with \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"Intl.NumberFormat\"},{\"type\":\"text\",\"text\":\".\"}]}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"TL;DR\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"To glue up this gap, I transform \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"bigint\"},{\"type\":\"text\",\"text\":\" to text when querying (using \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"::text\"},{\"type\":\"text\",\"text\":\" in SQL, resulting JavaScript \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"string\"},{\"type\":\"text\",\"text\":\" type), then convert it to BigInt immediately.\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Why This Is a Problem\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"This issue occurs when I’m trying to display extremely small price such as crypto, and extremely large price such as a price of a high inflation currency. \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"JavaScript natively supports \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"number\"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\" to up to 2^53-1\"},{\"type\":\"text\",\"text\":\", while in PostgreSQL, \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"bigint\"},{\"type\":\"text\",\"text\":\" supports 8 bits 2^63-1, and \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"numeric\"},{\"type\":\"text\",\"text\":\" can go even further. This gap will cause precision loss when displaying in the frontend.\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Choosing the Right Database Type\"}]},{\"type\":\"orderedList\",\"attrs\":{\"start\":1,\"type\":null},\"content\":[{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"varchar\"},{\"type\":\"text\",\"text\":\" for numbers\"},{\"type\":\"hardBreak\"},{\"type\":\"text\",\"text\":\"Flexible but additional unintuitive SQL when querying, also not performant as numbers.\"}]}]},{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"numeric\"},{\"type\":\"hardBreak\"},{\"type\":\"text\",\"text\":\"Support precision and scale, but not flexible per row.\"}]}]},{\"type\":\"listItem\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"bigint\"},{\"type\":\"hardBreak\"},{\"type\":\"text\",\"text\":\"Most performant among all, but requires additional calculations in the application.\"}]}]}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"Implementation Strategy\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"SQL to TypeScript\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"To ensure consistency and avoid precision loss, I convert numeric values to \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"text\"},{\"type\":\"text\",\"text\":\" in SQL, then parse them as \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"BigInt\"},{\"type\":\"text\",\"text\":\" in TypeScript.\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"sql\"},\"content\":[{\"type\":\"text\",\"text\":\"SELECT jsonb_build_object('price', p.price::text, 'sale_price', p.sale_price::text) FROM products AS p;\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"From String to BigInt type\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"This function is called when data retrieved from database, converting two PostgreSQL \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"bigint\"},{\"type\":\"text\",\"text\":\" string column, \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"price\"},{\"type\":\"text\",\"text\":\" and \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"sale_price\"},{\"type\":\"text\",\"text\":\", to \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"BigInt\"},{\"type\":\"text\",\"text\":\" in JavaScript.\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"ts\"},\"content\":[{\"type\":\"text\",\"text\":\"function convertPriceStringToBigInt(data: T): T {\\n const result = { ...data }\\n\\n if (typeof result.price === 'string') {\\n result.price = BigInt(result.price)\\n }\\n\\n if (typeof result.sale_price === 'string') {\\n result.sale_price = BigInt(result.sale_price)\\n }\\n\\n return result\\n}\\n\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"Formatting for Display\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"After constructing a valid data for frontend, we could start formatting the number value with scale, which returns a string for display directly.\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"ts\"},\"content\":[{\"type\":\"text\",\"text\":\"function formatPrice(price: bigint, scale: number): string {\\n\\tif (scale < 0) throw new Error('Scale must be non-negative')\\n\\tif (price < 0n) return '-' + formatPrice(-price, scale)\\n\\n\\tlet str = price.toString()\\n\\tif (scale === 0) return str\\n\\t\\t\\n\\tlet integerPart: string\\n\\tlet fractionalPart: string\\n\\tif (str.length > scale) {\\n\\t\\tintegerPart = str.slice(0, -scale)\\n\\t\\tfractionalPart = str.slice(-scale)\\n\\t} else {\\n\\t\\tintegerPart = '0'\\n\\t\\tfractionalPart = str.padStart(scale, '0')\\n\\t}\\n\\treturn `${integerPart}.${fractionalPart}`\\n}\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"Localized Currency Display with \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"Intl\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"To preview with \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"Intl\"},{\"type\":\"text\",\"text\":\", you could pass a valid numeric string directly to it. \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://github.com/microsoft/TypeScript/pull/57595\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Passing string is valid since \"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://github.com/microsoft/TypeScript/pull/57595\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}},{\"type\":\"bold\"}],\"text\":\"ES2023.Intl\"},{\"type\":\"text\",\"text\":\", so you should update your \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"tsconfig.json\"},{\"type\":\"text\",\"text\":\" to something later.\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"json\"},\"content\":[{\"type\":\"text\",\"text\":\"// tsconfig.json\\n{\\n // ...\\n \\\"compilerOptions\\\": {\\n \\\"lib\\\": [\\\"DOM\\\", \\\"DOM.Iterable\\\", \\\"ESNext\\\"],\\n \\\"target\\\": \\\"ESNext\\\",\\n \\\"module\\\": \\\"ESNext\\\"\\n // ...\\n }\\n}\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"language\":\"typescriptreact\"},\"content\":[{\"type\":\"text\",\"text\":\"const priceString = \\\"9007199254740993999\\\"\\nconst scale = 3\\nconst fmt = new Intl.NumberFormat('es-ES', {\\n\\tstyle: 'currency',\\n\\tcurrency: displayPrice.currency,\\n})\\nconst priceFmtd = formatPrice(priceString, scale)\\n\\nconst display = fmt.format(priceFmtd as Intl.StringNumericLiteral)\\n// '9.007.199.254.740.993.999,000 €'\\nconsole.log(fmt.format(\\\"999999999999.9999\\\"))\\n// '1.000.000.000.000,000 €' // because scale 3, number rounded\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null}}]}","This post shows how to handle PostgreSQL bigint type after querying in TypeScript React with Intl. NumberFormat.",["D",1760731164860],["D",1760734912076],43,{"_37":66,"_13":72,"_73":74,"_75":44,"_76":77,"_47":201,"_49":202,"_80":81,"_82":83,"_84":85,"_86":-5},["D",1744040568491],["D",1744040568491],{"_37":199,"_39":194,"_40":196,"_41":-5,"_42":-5,"_43":44,"_45":204,"_47":205,"_49":206},"/blog/handle-bigint-from-postgresql-to-typescript-intl-i",["D",1760731164860],["D",1760734912686],[208,209],{"_37":54,"_13":103,"_55":103,"_14":85},{"_37":210,"_13":211,"_55":212,"_14":85},16,"PostgreSQL","postgresql",[214],{"_37":160,"_13":215,"_55":216,"_14":85,"_109":-5},"Software Development","software-development",{"_37":218,"_55":219,"_10":220,"_15":221,"_59":222,"_61":-5,"_63":64,"_65":66,"_47":223,"_49":224,"_69":225,"_70":226,"_35":229,"_92":233,"_104":250},48,"vscode-forward-port-inline-blame-copilot-加速你的開發速度","VSCode Forward Port、Inline Blame、Copilot，加速你的開發速度！","{\"type\":\"doc\",\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"嗨～\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"學軟體開發一段時間了，從一開始到現在都是使用 VSCode，因為非常了解剛開始接觸這個功能複雜的 IDE 時的崩潰，所以今天整理了以下三個在現在，我每天使用時都會讚嘆跟感謝 Microsoft 的 VSCode 功能，希望能幫助你的工作流程與學習過程更順利與快速！\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"免費的 Forward Port\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"開發時通常會是在自己電腦 localhost 上跑開發的內容，不管是在 port 5000 / 3000 / 8000 / 5173 還是多少，如果只是自己看當然沒問題，但當你要分享給別人時，就會是個大問題。最一開始我都是用 ngrok，直到去年才發現其實內建的 Terminal 右邊右邊右邊那個…就是 Microsoft 免費的 Port Forward 功能！！！只需要登入 Microsoft GitHub 帳號就可以用了！\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"打開之後只要在 Port 輸入想 Forward 的 Port，然後就能複製私人連結，如果你想讓大家看到，請記得\"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"把 Port Visibility 改成 Pulbic\"},{\"type\":\"text\",\"text\":\" 不然他們會需要登入 GitHub 才能看到內容。\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"內建完整的 Git 視圖\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"Inline Blame\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"如果上網查，就是告訴你安裝 GitLens 外掛，但…本人的破筆電只剩下幾百 MB 的空間，所以一直都沒狠下心安裝，只能眼睜睜看著別人很帥的 Inline Blame 顯示每行是在什麼時候改過的，自己卻吃不到，直到上週（沒錯就是上週）我才知道在 Settings 裡面找 Git Blame 打開「\"},{\"type\":\"text\",\"marks\":[{\"type\":\"textStyle\",\"attrs\":{\"backgroundColor\":null,\"color\":\"rgb(204, 204, 204)\",\"fontFamily\":null,\"fontSize\":null,\"lineHeight\":null}},{\"type\":\"bold\"}],\"text\":\"Editor Decoration\"},{\"type\":\"text\",\"text\":\"」就有了！\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"因為內建 Source Control 其實在最下面的 bar 就有顯示 Blame，所以我一直想說為什麼他們就差這麼一哩把它顯示出來，卻死都不做，結果那天我 hover 下面 bar 資訊，點進去設定就看到 Git Blame Editor Decoration，啟用後就是另一片天空，真是開心！\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":3},\"content\":[{\"type\":\"text\",\"text\":\"Source Control\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"而 Source Control 也是，雖然去年確實還很陽春，但 2025 的今天，你可以直接在這 commit push pull，以及顯示漂亮的所有其他 branch 狀態，這樣就不用在 terminal \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"git commit -m …\"},{\"type\":\"text\",\"text\":\" \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"git push\"},{\"type\":\"text\",\"text\":\" \"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"git pull\"},{\"type\":\"text\",\"text\":\" ，現在我只有處理 remote 時還會用到 terminal，其他都直接在這個 UI 完成，非常方便！\"}]},{\"type\":\"heading\",\"attrs\":{\"textAlign\":null,\"level\":2},\"content\":[{\"type\":\"text\",\"text\":\"GitHub Copilot 教育方案\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"最後這個一樣只要準備你的 GitHub 帳號，通過 Education 認證就可以免費用到飽，這真的是我看過最佛的方案，Chat 不只是 Ask，還有 Agent 的功能，直接讀取 + 修改 codebase，而且模型\"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"可以選用 Claude Sonnet 4、o1、Gemini 2.5 Pro\"},{\"type\":\"text\",\"text\":\"！！！這些都是非常貴的模型，全部免費欸讚爆 ❤️\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":null},\"content\":[{\"type\":\"text\",\"text\":\"請參考：\"},{\"type\":\"text\",\"marks\":[{\"type\":\"link\",\"attrs\":{\"href\":\"https://github.com/education/students\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer nofollow\",\"class\":null}}],\"text\":\"Students - GitHub Education\"},{\"type\":\"text\",\"text\":\"。\"}]}]}","今天整理了以下三個在現在，我每天使用時都會讚嘆跟感謝 Microsoft 的 VSCode 功能：「Forward Port、Source Control、GitHub Copilot」，希望能幫助你的工作流程與學習過程更順利與快速！",["D",1751812383037],["D",1753643288106],70,{"_37":66,"_13":72,"_73":74,"_75":44,"_76":77,"_47":227,"_49":228,"_80":81,"_82":83,"_84":85,"_86":-5},["D",1744040568491],["D",1744040568491],{"_37":225,"_39":220,"_40":222,"_41":-5,"_42":-5,"_43":44,"_45":230,"_47":231,"_49":232},"/blog/vscode-forward-port-inline-blame-copilot-加速你的開發速度",["D",1751812383037],["D",1753643289028],[234,238,242,246],{"_37":235,"_13":236,"_55":237,"_14":85},470,"VSCode","vscode",{"_37":239,"_13":240,"_55":241,"_14":85},471,"Port Forward","port-forward",{"_37":243,"_13":244,"_55":245,"_14":85},472,"Ngrok","ngrok",{"_37":247,"_13":248,"_55":249,"_14":85},473,"Microsoft","microsoft",[],"categoryFilter",[],"tagFilter",[],"q","actionData","errors"]

Blog - Where you see my sounds 🎵

Blog.

react-router/dev/routes is not Available @ Runtime

Jotai (状態) React State Management（與 Zustand 微比較）

Automatically Generate Sitemap in React Router v7

React Router v7 CSP (Content Security Policy) Configuration

Handle BigInt from PostgreSQL to TypeScript Intl in React

VSCode Forward Port、Inline Blame、Copilot，加速你的開發速度！