[{"data":1,"prerenderedAt":567},["ShallowReactive",2],{"blog-post-\u002Fblog\u002Frendering-check":3},{"en":4,"ko":314},{"id":5,"title":6,"author":7,"body":8,"date":302,"description":303,"extension":304,"meta":305,"navigation":306,"path":307,"seo":308,"stem":309,"tags":310,"updated":312,"__hash__":313},"blog_en\u002Fblog\u002Frendering-check.md","Rendering check — every element on one page","DM Studio",{"type":9,"value":10,"toc":293},"minimark",[11,15,20,41,46,67,71,88,94,98,101,113,116,127,131,134,198,202,280,283,289],[12,13,14],"p",{},"This page exists to be looked at. It puts every markdown element the blog can produce on a\nsingle screen, so a typography regression shows up in one screenshot instead of being found\nlater on a real article.",[16,17,19],"h2",{"id":18},"why-a-fixture-instead-of-a-real-article","Why a fixture instead of a real article",[12,21,22,23,27,28,31,32,35,36,40],{},"Prose styles for the blog live in ",[24,25,26],"code",{},"app\u002Fpages\u002Fblog\u002F[...slug].vue"," under ",[24,29,30],{},".prose :deep(...)",",\nbecause ",[24,33,34],{},"ContentRenderer"," output falls outside Vue's scoped-style boundary. That means a\nmissing selector doesn't throw — the element just renders unstyled and nobody notices until\na reader hits it. A fixture that uses ",[37,38,39],"strong",{},"every"," element turns a silent gap into a visible one.",[42,43,45],"h3",{"id":44},"what-this-checks","What this checks",[47,48,49,58,61,64],"ol",{},[50,51,52,53,55,56],"li",{},"Heading scale and spacing across ",[24,54,16],{}," and ",[24,57,42],{},[50,59,60],{},"Body measure, line height, and paragraph rhythm",[50,62,63],{},"List, table, quote, and code block treatment",[50,65,66],{},"Link colour against the surrounding text",[16,68,70],{"id":69},"text-level-elements","Text-level elements",[12,72,73,74,77,78,81,82,87],{},"Body copy sits at 16px with a 1.75 line height, which puts a comfortable measure inside the\n720px column. ",[37,75,76],{},"Bold text"," should read heavier without jumping baseline. Inline code such as\n",[24,79,80],{},"queryCollection('blog_en')"," needs a tinted background that doesn't swallow the surrounding\nline. A ",[83,84,86],"a",{"href":85},"\u002Fpricing","link to the pricing page"," should be distinguishable from body text by\ncolour alone, since underlines are off.",[89,90,91],"blockquote",{},[12,92,93],{},"A quote is set with a left rule and muted text. It should feel like an aside, not a heading.",[16,95,97],{"id":96},"lists","Lists",[12,99,100],{},"Unordered:",[102,103,104,107,110],"ul",{},[50,105,106],{},"One item, short.",[50,108,109],{},"A second item long enough to wrap onto a second line, so the indent of the wrapped line can\nbe checked against the marker rather than the text.",[50,111,112],{},"A third item.",[12,114,115],{},"Ordered:",[47,117,118,121,124],{},[50,119,120],{},"First step",[50,122,123],{},"Second step",[50,125,126],{},"Third step",[16,128,130],{"id":129},"a-table","A table",[12,132,133],{},"Tables scroll horizontally inside their own container rather than pushing the page wide.",[135,136,137,153],"table",{},[138,139,140],"thead",{},[141,142,143,147,150],"tr",{},[144,145,146],"th",{},"Limit",[144,148,149],{},"Value",[144,151,152],{},"Adjustable",[154,155,156,168,178,188],"tbody",{},[141,157,158,162,165],{},[159,160,161],"td",{},"Daily maximum",[159,163,164],{},"100 sends",[159,166,167],{},"Down only",[141,169,170,173,176],{},[159,171,172],{},"Send interval",[159,174,175],{},"20–40 seconds, randomized",[159,177,167],{},[141,179,180,183,186],{},[159,181,182],{},"Batch size",[159,184,185],{},"10 sends",[159,187,167],{},[141,189,190,193,196],{},[159,191,192],{},"Rest between batches",[159,194,195],{},"30 minutes minimum",[159,197,167],{},[16,199,201],{"id":200},"a-code-block","A code block",[203,204,209],"pre",{"className":205,"code":206,"language":207,"meta":208,"style":208},"language-ts shiki shiki-themes github-light github-dark","\u002F\u002F content.config.ts — the two collections differ only in `source`\nblog_en: defineCollection({\n  type: 'page',\n  source: { include: 'en\u002Fblog\u002F**', prefix: '\u002Fblog' },\n  schema: blogSchema,\n})\n","ts","",[24,210,211,220,237,250,268,274],{"__ignoreMap":208},[212,213,216],"span",{"class":214,"line":215},"line",1,[212,217,219],{"class":218},"sJ8bj","\u002F\u002F content.config.ts — the two collections differ only in `source`\n",[212,221,223,227,231,234],{"class":214,"line":222},2,[212,224,226],{"class":225},"sScJk","blog_en",[212,228,230],{"class":229},"sVt8B",": ",[212,232,233],{"class":225},"defineCollection",[212,235,236],{"class":229},"({\n",[212,238,240,243,247],{"class":214,"line":239},3,[212,241,242],{"class":229},"  type: ",[212,244,246],{"class":245},"sZZnC","'page'",[212,248,249],{"class":229},",\n",[212,251,253,256,259,262,265],{"class":214,"line":252},4,[212,254,255],{"class":229},"  source: { include: ",[212,257,258],{"class":245},"'en\u002Fblog\u002F**'",[212,260,261],{"class":229},", prefix: ",[212,263,264],{"class":245},"'\u002Fblog'",[212,266,267],{"class":229}," },\n",[212,269,271],{"class":214,"line":270},5,[212,272,273],{"class":229},"  schema: blogSchema,\n",[212,275,277],{"class":214,"line":276},6,[212,278,279],{"class":229},"})\n",[281,282],"hr",{},[12,284,285,286,288],{},"After the horizontal rule above, spacing should reset cleanly into a final paragraph. If\nanything on this page looks unstyled, the missing selector is in ",[24,287,30],{},".",[290,291,292],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":208,"searchDepth":222,"depth":222,"links":294},[295,298,299,300,301],{"id":18,"depth":222,"text":19,"children":296},[297],{"id":44,"depth":239,"text":45},{"id":69,"depth":222,"text":70},{"id":96,"depth":222,"text":97},{"id":129,"depth":222,"text":130},{"id":200,"depth":222,"text":201},"2026-09-04","A fixture post that exercises every markdown element the blog can render, so typography regressions show up in one screenshot.","md",{},true,"\u002Fblog\u002Frendering-check",{"title":6,"description":303},"blog\u002Frendering-check",[311],"internal",null,"_GXCaL00Br61ep_yOO1ph74PfC1F3dJmI3_rFYzGzXs",{"id":315,"title":316,"author":7,"body":317,"date":302,"description":562,"extension":304,"meta":563,"navigation":306,"path":307,"seo":564,"stem":309,"tags":565,"updated":312,"__hash__":566},"blog_ko\u002Fblog\u002Frendering-check.md","렌더링 점검 — 모든 요소를 한 페이지에",{"type":9,"value":318,"toc":553},[319,322,326,346,350,369,373,389,394,397,400,411,414,425,428,431,489,493,543,545,551],[12,320,321],{},"이 페이지는 눈으로 보기 위해 존재한다. 블로그가 만들어낼 수 있는 마크다운 요소를 한 화면에\n모아두면, 타이포그래피가 깨졌을 때 실제 글에서 뒤늦게 발견하는 대신 스크린샷 한 장에서 드러난다.",[16,323,325],{"id":324},"실제-글이-아니라-픽스처인-이유","실제 글이 아니라 픽스처인 이유",[12,327,328,329,331,332,334,335,337,338,341,342,345],{},"블로그의 prose 스타일은 ",[24,330,26],{},"의 ",[24,333,30],{},"에 있다.\n",[24,336,34],{}," 산출물이 Vue scoped 스타일 범위 ",[37,339,340],{},"밖","이기 때문이다. 그래서 셀렉터가 하나\n빠져도 에러가 나지 않는다 — 그 요소만 스타일 없이 렌더되고, 실제 독자가 그 부분에 닿을 때까지\n아무도 모른다. ",[37,343,344],{},"모든"," 요소를 쓰는 픽스처는 그 조용한 구멍을 눈에 보이게 만든다.",[42,347,349],{"id":348},"무엇을-점검하나","무엇을 점검하나",[47,351,352,360,363,366],{},[50,353,354,356,357,359],{},[24,355,16],{},"·",[24,358,42],{}," 크기 위계와 여백",[50,361,362],{},"본문 한 줄 길이, 행간, 문단 리듬",[50,364,365],{},"목록·표·인용·코드 블록 처리",[50,367,368],{},"본문 대비 링크 색",[16,370,372],{"id":371},"인라인-요소","인라인 요소",[12,374,375,376,379,380,383,384,388],{},"본문은 16px에 행간 1.75다. 720px 칼럼 안에서 읽기 편한 길이가 나와야 한다. ",[37,377,378],{},"굵은 글씨","는\n베이스라인이 튀지 않으면서 무게만 더 나가야 한다. ",[24,381,382],{},"queryCollection('blog_ko')"," 같은 인라인\n코드는 배경 색조가 주변 줄을 삼키지 않아야 한다. ",[83,385,387],{"href":386},"\u002Fko\u002Fpricing","요금제 페이지로 가는 링크","는\n밑줄이 없으므로 색만으로 본문과 구분돼야 한다.",[89,390,391],{},[12,392,393],{},"인용은 왼쪽 라인과 흐린 글씨로 잡았다. 제목이 아니라 곁말처럼 읽혀야 한다.",[16,395,396],{"id":396},"목록",[12,398,399],{},"순서 없는 목록:",[102,401,402,405,408],{},[50,403,404],{},"짧은 항목 하나.",[50,406,407],{},"두 번째 항목은 두 줄로 넘어갈 만큼 길게 써서, 줄바꿈된 다음 줄의 들여쓰기가 글머리 기호가\n아니라 텍스트에 맞는지 확인할 수 있게 한다.",[50,409,410],{},"세 번째 항목.",[12,412,413],{},"순서 있는 목록:",[47,415,416,419,422],{},[50,417,418],{},"첫 단계",[50,420,421],{},"두 번째 단계",[50,423,424],{},"세 번째 단계",[16,426,427],{"id":427},"표",[12,429,430],{},"표는 페이지를 넓히지 않고 자기 컨테이너 안에서 좌우로 스크롤된다.",[135,432,433,446],{},[138,434,435],{},[141,436,437,440,443],{},[144,438,439],{},"한도",[144,441,442],{},"값",[144,444,445],{},"조절",[154,447,448,459,469,479],{},[141,449,450,453,456],{},[159,451,452],{},"하루 최대 발송",[159,454,455],{},"100건",[159,457,458],{},"하향만",[141,460,461,464,467],{},[159,462,463],{},"발송 간격",[159,465,466],{},"20–40초 랜덤",[159,468,458],{},[141,470,471,474,477],{},[159,472,473],{},"배치 크기",[159,475,476],{},"10건",[159,478,458],{},[141,480,481,484,487],{},[159,482,483],{},"배치 간 휴식",[159,485,486],{},"최소 30분",[159,488,458],{},[16,490,492],{"id":491},"코드-블록","코드 블록",[203,494,496],{"className":205,"code":495,"language":207,"meta":208,"style":208},"\u002F\u002F content.config.ts — 두 컬렉션은 `source`만 다르다\nblog_ko: defineCollection({\n  type: 'page',\n  source: { include: 'ko\u002Fblog\u002F**', prefix: '\u002Fblog' },\n  schema: blogSchema,\n})\n",[24,497,498,503,514,522,535,539],{"__ignoreMap":208},[212,499,500],{"class":214,"line":215},[212,501,502],{"class":218},"\u002F\u002F content.config.ts — 두 컬렉션은 `source`만 다르다\n",[212,504,505,508,510,512],{"class":214,"line":222},[212,506,507],{"class":225},"blog_ko",[212,509,230],{"class":229},[212,511,233],{"class":225},[212,513,236],{"class":229},[212,515,516,518,520],{"class":214,"line":239},[212,517,242],{"class":229},[212,519,246],{"class":245},[212,521,249],{"class":229},[212,523,524,526,529,531,533],{"class":214,"line":252},[212,525,255],{"class":229},[212,527,528],{"class":245},"'ko\u002Fblog\u002F**'",[212,530,261],{"class":229},[212,532,264],{"class":245},[212,534,267],{"class":229},[212,536,537],{"class":214,"line":270},[212,538,273],{"class":229},[212,540,541],{"class":214,"line":276},[212,542,279],{"class":229},[281,544],{},[12,546,547,548,550],{},"위 구분선 다음으로 여백이 깨끗하게 리셋되고 마지막 문단으로 이어져야 한다. 이 페이지에서\n스타일이 안 먹은 것처럼 보이는 요소가 있다면, 빠진 셀렉터는 ",[24,549,30],{},"에 있다.",[290,552,292],{},{"title":208,"searchDepth":222,"depth":222,"links":554},[555,558,559,560,561],{"id":324,"depth":222,"text":325,"children":556},[557],{"id":348,"depth":239,"text":349},{"id":371,"depth":222,"text":372},{"id":396,"depth":222,"text":396},{"id":427,"depth":222,"text":427},{"id":491,"depth":222,"text":492},"블로그가 렌더할 수 있는 마크다운 요소를 전부 담은 픽스처 글. 타이포그래피 회귀가 스크린샷 한 장에서 드러나게 하는 용도다.",{},{"title":316,"description":562},[311],"LM_ht3mJBLNFPFK-FGnkJ_mmvD8cPUmDG3G1yg9Nv-U",1788843117598]