[{"data":1,"prerenderedAt":847},["ShallowReactive",2],{"blog:2025:improved-content-articles-in-nuxt3":3,"blogMore-Development":833,"comments-improved-content-articles-in-nuxt3":846},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"category":11,"tags":12,"excerpt":15,"body":47,"_type":824,"_id":825,"_source":826,"_file":827,"_stem":828,"_extension":829,"url":830,"wordCount":831,"minutes":168,"commentCount":832},"/blog/2025/improved-content-articles-in-nuxt3","2025",false,"en","Enhancing content articles in Nuxt3","I've already covered reading time and generated excerpts for Nuxt3 content but there are still a couple more things you can do to enhance your content articles.","2025-02-14T00:00:00-00:00","Development",[13,14],"Nuxt","webdev",{"type":16,"children":17},"root",[18,34],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23,26,28,30,32],{"type":24,"value":25},"text","I've already covered ",{"type":24,"value":27},"reading time",{"type":24,"value":29}," and ",{"type":24,"value":31},"generated excerpts",{"type":24,"value":33}," for Nuxt3 content but there are still a couple more things you can do to enhance your content articles.",{"type":19,"tag":20,"props":35,"children":36},{},[37,39,41,43,45],{"type":24,"value":38},"I love typography and that includes the use of em-dashes, smart-quotes and other typographic niceties. I do not however enjoying having to type them in my simple markdown files. Luckily, Nuxt3 Content v2 is built on top of ",{"type":24,"value":40},"Remark",{"type":24,"value":42}," which has many plugins including ",{"type":24,"value":44},"remark-typography",{"type":24,"value":46}," which does exactly what we want.",{"type":16,"children":48,"toc":820},[49,66,73,92,131,243,257,263,268,281,809,814],{"type":19,"tag":20,"props":50,"children":51},{},[52,53,59,60,65],{"type":24,"value":25},{"type":19,"tag":54,"props":55,"children":57},"a",{"href":56},"/blog/2023/reading-time-with-nuxt3-content",[58],{"type":24,"value":27},{"type":24,"value":29},{"type":19,"tag":54,"props":61,"children":63},{"href":62},"/blog/2024/generated-excerpts-for-nuxt3-content",[64],{"type":24,"value":31},{"type":24,"value":33},{"type":19,"tag":67,"props":68,"children":70},"h2",{"id":69},"enhanced-typography",[71],{"type":24,"value":72},"Enhanced typography",{"type":19,"tag":20,"props":74,"children":75},{},[76,77,84,85,91],{"type":24,"value":38},{"type":19,"tag":54,"props":78,"children":82},{"href":79,"rel":80},"https://github.com/remarkjs/remark",[81],"nofollow",[83],{"type":24,"value":40},{"type":24,"value":42},{"type":19,"tag":54,"props":86,"children":89},{"href":87,"rel":88},"https://codsen.com/os/remark-typography",[81],[90],{"type":24,"value":44},{"type":24,"value":46},{"type":19,"tag":93,"props":94,"children":95},"ol",{},[96,110],{"type":19,"tag":97,"props":98,"children":99},"li",{},[100,102,108],{"type":24,"value":101},"Install ",{"type":19,"tag":103,"props":104,"children":106},"code",{"className":105},[],[107],{"type":24,"value":44},{"type":24,"value":109}," with your package manager of choice (bun/yarn/npm/pnpm)",{"type":19,"tag":97,"props":111,"children":112},{},[113,115,121,123,129],{"type":24,"value":114},"Add the plugin to you ",{"type":19,"tag":103,"props":116,"children":118},{"className":117},[],[119],{"type":24,"value":120},"nuxt.config.js",{"type":24,"value":122}," or ",{"type":19,"tag":103,"props":124,"children":126},{"className":125},[],[127],{"type":24,"value":128},"ts",{"type":24,"value":130}," file via:",{"type":19,"tag":132,"props":133,"children":138},"pre",{"className":134,"code":135,"language":136,"meta":137,"style":137},"language-javascript shiki shiki-themes everforest-light dracula"," content: {\n    markdown: {\n      remarkPlugins: {\n        \"remark-typography\": {},\n      },\n    },\n","javascript","",[139],{"type":19,"tag":103,"props":140,"children":141},{"__ignoreMap":137},[142,166,183,200,225,234],{"type":19,"tag":143,"props":144,"children":147},"span",{"class":145,"line":146},"line",1,[148,154,160],{"type":19,"tag":143,"props":149,"children":151},{"style":150},"--shiki-default:#35A77C;--shiki-dark:#F8F8F2",[152],{"type":24,"value":153}," content",{"type":19,"tag":143,"props":155,"children":157},{"style":156},"--shiki-default:#939F91;--shiki-dark:#F8F8F2",[158],{"type":24,"value":159},":",{"type":19,"tag":143,"props":161,"children":163},{"style":162},"--shiki-default:#5C6A72;--shiki-dark:#F8F8F2",[164],{"type":24,"value":165}," {\n",{"type":19,"tag":143,"props":167,"children":169},{"class":145,"line":168},2,[170,175,179],{"type":19,"tag":143,"props":171,"children":172},{"style":150},[173],{"type":24,"value":174},"    markdown",{"type":19,"tag":143,"props":176,"children":177},{"style":156},[178],{"type":24,"value":159},{"type":19,"tag":143,"props":180,"children":181},{"style":162},[182],{"type":24,"value":165},{"type":19,"tag":143,"props":184,"children":186},{"class":145,"line":185},3,[187,192,196],{"type":19,"tag":143,"props":188,"children":189},{"style":150},[190],{"type":24,"value":191},"      remarkPlugins",{"type":19,"tag":143,"props":193,"children":194},{"style":156},[195],{"type":24,"value":159},{"type":19,"tag":143,"props":197,"children":198},{"style":162},[199],{"type":24,"value":165},{"type":19,"tag":143,"props":201,"children":203},{"class":145,"line":202},4,[204,210,215,220],{"type":19,"tag":143,"props":205,"children":207},{"style":206},"--shiki-default:#DFA000;--shiki-dark:#E9F284",[208],{"type":24,"value":209},"        \"",{"type":19,"tag":143,"props":211,"children":213},{"style":212},"--shiki-default:#DFA000;--shiki-dark:#F1FA8C",[214],{"type":24,"value":44},{"type":19,"tag":143,"props":216,"children":217},{"style":206},[218],{"type":24,"value":219},"\"",{"type":19,"tag":143,"props":221,"children":222},{"style":162},[223],{"type":24,"value":224},": {},\n",{"type":19,"tag":143,"props":226,"children":228},{"class":145,"line":227},5,[229],{"type":19,"tag":143,"props":230,"children":231},{"style":162},[232],{"type":24,"value":233},"      },\n",{"type":19,"tag":143,"props":235,"children":237},{"class":145,"line":236},6,[238],{"type":19,"tag":143,"props":239,"children":240},{"style":162},[241],{"type":24,"value":242},"    },\n",{"type":19,"tag":20,"props":244,"children":245},{},[246,248,255],{"type":24,"value":247},"If you want more control also consider checking out the ",{"type":19,"tag":54,"props":249,"children":252},{"href":250,"rel":251},"https://github.com/remarkjs/remark-textr",[81],[253],{"type":24,"value":254},"Remark-Textr",{"type":24,"value":256}," plugin which lets you build the options you like.",{"type":19,"tag":67,"props":258,"children":260},{"id":259},"set-front-matter-image-from-content",[261],{"type":24,"value":262},"Set front-matter image from content",{"type":19,"tag":20,"props":264,"children":265},{},[266],{"type":24,"value":267},"It's great when rendering cards or links to other pages (or when using RSS) to be able to specify an image for the post but again, it's a pain to do it manually!",{"type":19,"tag":20,"props":269,"children":270},{},[271,273,279],{"type":24,"value":272},"Fortunately, a tiny bit of code can be used to grab the first image from the content and set it as the ",{"type":19,"tag":103,"props":274,"children":276},{"className":275},[],[277],{"type":24,"value":278},"image",{"type":24,"value":280}," property on the content object in much the same pattern as the reading time and excerpt plugins.",{"type":19,"tag":132,"props":282,"children":286},{"className":283,"code":284,"language":285,"meta":137,"style":137},"language-typescript shiki shiki-themes everforest-light dracula","import type { MarkdownNode, MarkdownRoot, ParsedContent } from \"@nuxt/content\"\n\nexport default defineNitroPlugin((nitroApp) => {\n  nitroApp.hooks.hook(\"content:file:afterParse\", (file) => {\n    if (file._id.endsWith(\".md\") && file.body) {\n      addFirstImage(file)\n    }\n  })\n})\n\nconst addFirstImage = (file: ParsedContent) => {\n  if (file.image) return\n  visit(file.body!.children, (n) => {\n    if (n?.tag == \"img\") {\n      file.image = n.props.src\n    }\n  })\n}\n","typescript",[287],{"type":19,"tag":103,"props":288,"children":289},{"__ignoreMap":137},[290,330,339,384,451,522,535,544,553,562,570,621,648,702,738,784,792,800],{"type":19,"tag":143,"props":291,"children":292},{"class":145,"line":146},[293,299,305,310,315,320,325],{"type":19,"tag":143,"props":294,"children":296},{"style":295},"--shiki-default:#DF69BA;--shiki-dark:#FF79C6",[297],{"type":24,"value":298},"import",{"type":19,"tag":143,"props":300,"children":302},{"style":301},"--shiki-default:#F85552;--shiki-dark:#FF79C6",[303],{"type":24,"value":304}," type",{"type":19,"tag":143,"props":306,"children":307},{"style":162},[308],{"type":24,"value":309}," { MarkdownNode, MarkdownRoot, ParsedContent } ",{"type":19,"tag":143,"props":311,"children":312},{"style":301},[313],{"type":24,"value":314},"from",{"type":19,"tag":143,"props":316,"children":317},{"style":206},[318],{"type":24,"value":319}," \"",{"type":19,"tag":143,"props":321,"children":322},{"style":212},[323],{"type":24,"value":324},"@nuxt/content",{"type":19,"tag":143,"props":326,"children":327},{"style":206},[328],{"type":24,"value":329},"\"\n",{"type":19,"tag":143,"props":331,"children":332},{"class":145,"line":168},[333],{"type":19,"tag":143,"props":334,"children":336},{"emptyLinePlaceholder":335},true,[337],{"type":24,"value":338},"\n",{"type":19,"tag":143,"props":340,"children":341},{"class":145,"line":185},[342,347,352,358,363,369,374,380],{"type":19,"tag":143,"props":343,"children":344},{"style":295},[345],{"type":24,"value":346},"export",{"type":19,"tag":143,"props":348,"children":349},{"style":301},[350],{"type":24,"value":351}," default",{"type":19,"tag":143,"props":353,"children":355},{"style":354},"--shiki-default:#8DA101;--shiki-dark:#50FA7B",[356],{"type":24,"value":357}," defineNitroPlugin",{"type":19,"tag":143,"props":359,"children":360},{"style":162},[361],{"type":24,"value":362},"((",{"type":19,"tag":143,"props":364,"children":366},{"style":365},"--shiki-default:#5C6A72;--shiki-default-font-style:inherit;--shiki-dark:#FFB86C;--shiki-dark-font-style:italic",[367],{"type":24,"value":368},"nitroApp",{"type":19,"tag":143,"props":370,"children":371},{"style":162},[372],{"type":24,"value":373},") ",{"type":19,"tag":143,"props":375,"children":377},{"style":376},"--shiki-default:#F57D26;--shiki-dark:#FF79C6",[378],{"type":24,"value":379},"=>",{"type":19,"tag":143,"props":381,"children":382},{"style":162},[383],{"type":24,"value":165},{"type":19,"tag":143,"props":385,"children":386},{"class":145,"line":202},[387,392,397,402,406,411,416,420,425,429,434,439,443,447],{"type":19,"tag":143,"props":388,"children":389},{"style":162},[390],{"type":24,"value":391},"  nitroApp",{"type":19,"tag":143,"props":393,"children":394},{"style":156},[395],{"type":24,"value":396},".",{"type":19,"tag":143,"props":398,"children":399},{"style":162},[400],{"type":24,"value":401},"hooks",{"type":19,"tag":143,"props":403,"children":404},{"style":156},[405],{"type":24,"value":396},{"type":19,"tag":143,"props":407,"children":408},{"style":354},[409],{"type":24,"value":410},"hook",{"type":19,"tag":143,"props":412,"children":413},{"style":162},[414],{"type":24,"value":415},"(",{"type":19,"tag":143,"props":417,"children":418},{"style":206},[419],{"type":24,"value":219},{"type":19,"tag":143,"props":421,"children":422},{"style":212},[423],{"type":24,"value":424},"content:file:afterParse",{"type":19,"tag":143,"props":426,"children":427},{"style":206},[428],{"type":24,"value":219},{"type":19,"tag":143,"props":430,"children":431},{"style":162},[432],{"type":24,"value":433},", (",{"type":19,"tag":143,"props":435,"children":436},{"style":365},[437],{"type":24,"value":438},"file",{"type":19,"tag":143,"props":440,"children":441},{"style":162},[442],{"type":24,"value":373},{"type":19,"tag":143,"props":444,"children":445},{"style":376},[446],{"type":24,"value":379},{"type":19,"tag":143,"props":448,"children":449},{"style":162},[450],{"type":24,"value":165},{"type":19,"tag":143,"props":452,"children":453},{"class":145,"line":227},[454,459,464,468,473,477,482,486,490,495,499,503,508,513,517],{"type":19,"tag":143,"props":455,"children":456},{"style":301},[457],{"type":24,"value":458},"    if",{"type":19,"tag":143,"props":460,"children":461},{"style":162},[462],{"type":24,"value":463}," (file",{"type":19,"tag":143,"props":465,"children":466},{"style":156},[467],{"type":24,"value":396},{"type":19,"tag":143,"props":469,"children":470},{"style":162},[471],{"type":24,"value":472},"_id",{"type":19,"tag":143,"props":474,"children":475},{"style":156},[476],{"type":24,"value":396},{"type":19,"tag":143,"props":478,"children":479},{"style":354},[480],{"type":24,"value":481},"endsWith",{"type":19,"tag":143,"props":483,"children":484},{"style":162},[485],{"type":24,"value":415},{"type":19,"tag":143,"props":487,"children":488},{"style":206},[489],{"type":24,"value":219},{"type":19,"tag":143,"props":491,"children":492},{"style":212},[493],{"type":24,"value":494},".md",{"type":19,"tag":143,"props":496,"children":497},{"style":206},[498],{"type":24,"value":219},{"type":19,"tag":143,"props":500,"children":501},{"style":162},[502],{"type":24,"value":373},{"type":19,"tag":143,"props":504,"children":505},{"style":376},[506],{"type":24,"value":507},"&&",{"type":19,"tag":143,"props":509,"children":510},{"style":162},[511],{"type":24,"value":512}," file",{"type":19,"tag":143,"props":514,"children":515},{"style":156},[516],{"type":24,"value":396},{"type":19,"tag":143,"props":518,"children":519},{"style":162},[520],{"type":24,"value":521},"body) {\n",{"type":19,"tag":143,"props":523,"children":524},{"class":145,"line":236},[525,530],{"type":19,"tag":143,"props":526,"children":527},{"style":354},[528],{"type":24,"value":529},"      addFirstImage",{"type":19,"tag":143,"props":531,"children":532},{"style":162},[533],{"type":24,"value":534},"(file)\n",{"type":19,"tag":143,"props":536,"children":538},{"class":145,"line":537},7,[539],{"type":19,"tag":143,"props":540,"children":541},{"style":162},[542],{"type":24,"value":543},"    }\n",{"type":19,"tag":143,"props":545,"children":547},{"class":145,"line":546},8,[548],{"type":19,"tag":143,"props":549,"children":550},{"style":162},[551],{"type":24,"value":552},"  })\n",{"type":19,"tag":143,"props":554,"children":556},{"class":145,"line":555},9,[557],{"type":19,"tag":143,"props":558,"children":559},{"style":162},[560],{"type":24,"value":561},"})\n",{"type":19,"tag":143,"props":563,"children":565},{"class":145,"line":564},10,[566],{"type":19,"tag":143,"props":567,"children":568},{"emptyLinePlaceholder":335},[569],{"type":24,"value":338},{"type":19,"tag":143,"props":571,"children":573},{"class":145,"line":572},11,[574,579,584,589,594,598,603,609,613,617],{"type":19,"tag":143,"props":575,"children":576},{"style":376},[577],{"type":24,"value":578},"const",{"type":19,"tag":143,"props":580,"children":581},{"style":354},[582],{"type":24,"value":583}," addFirstImage",{"type":19,"tag":143,"props":585,"children":586},{"style":376},[587],{"type":24,"value":588}," =",{"type":19,"tag":143,"props":590,"children":591},{"style":162},[592],{"type":24,"value":593}," (",{"type":19,"tag":143,"props":595,"children":596},{"style":365},[597],{"type":24,"value":438},{"type":19,"tag":143,"props":599,"children":601},{"style":600},"--shiki-default:#939F91;--shiki-dark:#FF79C6",[602],{"type":24,"value":159},{"type":19,"tag":143,"props":604,"children":606},{"style":605},"--shiki-default:#35A77C;--shiki-default-font-style:inherit;--shiki-dark:#8BE9FD;--shiki-dark-font-style:italic",[607],{"type":24,"value":608}," ParsedContent",{"type":19,"tag":143,"props":610,"children":611},{"style":162},[612],{"type":24,"value":373},{"type":19,"tag":143,"props":614,"children":615},{"style":376},[616],{"type":24,"value":379},{"type":19,"tag":143,"props":618,"children":619},{"style":162},[620],{"type":24,"value":165},{"type":19,"tag":143,"props":622,"children":624},{"class":145,"line":623},12,[625,630,634,638,643],{"type":19,"tag":143,"props":626,"children":627},{"style":301},[628],{"type":24,"value":629},"  if",{"type":19,"tag":143,"props":631,"children":632},{"style":162},[633],{"type":24,"value":463},{"type":19,"tag":143,"props":635,"children":636},{"style":156},[637],{"type":24,"value":396},{"type":19,"tag":143,"props":639,"children":640},{"style":162},[641],{"type":24,"value":642},"image) ",{"type":19,"tag":143,"props":644,"children":645},{"style":301},[646],{"type":24,"value":647},"return\n",{"type":19,"tag":143,"props":649,"children":651},{"class":145,"line":650},13,[652,657,662,666,671,676,680,685,690,694,698],{"type":19,"tag":143,"props":653,"children":654},{"style":354},[655],{"type":24,"value":656},"  visit",{"type":19,"tag":143,"props":658,"children":659},{"style":162},[660],{"type":24,"value":661},"(file",{"type":19,"tag":143,"props":663,"children":664},{"style":156},[665],{"type":24,"value":396},{"type":19,"tag":143,"props":667,"children":668},{"style":162},[669],{"type":24,"value":670},"body",{"type":19,"tag":143,"props":672,"children":673},{"style":376},[674],{"type":24,"value":675},"!",{"type":19,"tag":143,"props":677,"children":678},{"style":156},[679],{"type":24,"value":396},{"type":19,"tag":143,"props":681,"children":682},{"style":162},[683],{"type":24,"value":684},"children, (",{"type":19,"tag":143,"props":686,"children":687},{"style":365},[688],{"type":24,"value":689},"n",{"type":19,"tag":143,"props":691,"children":692},{"style":162},[693],{"type":24,"value":373},{"type":19,"tag":143,"props":695,"children":696},{"style":376},[697],{"type":24,"value":379},{"type":19,"tag":143,"props":699,"children":700},{"style":162},[701],{"type":24,"value":165},{"type":19,"tag":143,"props":703,"children":705},{"class":145,"line":704},14,[706,710,715,720,724,729,733],{"type":19,"tag":143,"props":707,"children":708},{"style":301},[709],{"type":24,"value":458},{"type":19,"tag":143,"props":711,"children":712},{"style":162},[713],{"type":24,"value":714}," (n?.tag ",{"type":19,"tag":143,"props":716,"children":717},{"style":376},[718],{"type":24,"value":719},"==",{"type":19,"tag":143,"props":721,"children":722},{"style":206},[723],{"type":24,"value":319},{"type":19,"tag":143,"props":725,"children":726},{"style":212},[727],{"type":24,"value":728},"img",{"type":19,"tag":143,"props":730,"children":731},{"style":206},[732],{"type":24,"value":219},{"type":19,"tag":143,"props":734,"children":735},{"style":162},[736],{"type":24,"value":737},") {\n",{"type":19,"tag":143,"props":739,"children":741},{"class":145,"line":740},15,[742,747,751,756,761,766,770,775,779],{"type":19,"tag":143,"props":743,"children":744},{"style":162},[745],{"type":24,"value":746},"      file",{"type":19,"tag":143,"props":748,"children":749},{"style":156},[750],{"type":24,"value":396},{"type":19,"tag":143,"props":752,"children":753},{"style":162},[754],{"type":24,"value":755},"image ",{"type":19,"tag":143,"props":757,"children":758},{"style":376},[759],{"type":24,"value":760},"=",{"type":19,"tag":143,"props":762,"children":763},{"style":162},[764],{"type":24,"value":765}," n",{"type":19,"tag":143,"props":767,"children":768},{"style":156},[769],{"type":24,"value":396},{"type":19,"tag":143,"props":771,"children":772},{"style":162},[773],{"type":24,"value":774},"props",{"type":19,"tag":143,"props":776,"children":777},{"style":156},[778],{"type":24,"value":396},{"type":19,"tag":143,"props":780,"children":781},{"style":162},[782],{"type":24,"value":783},"src\n",{"type":19,"tag":143,"props":785,"children":787},{"class":145,"line":786},16,[788],{"type":19,"tag":143,"props":789,"children":790},{"style":162},[791],{"type":24,"value":543},{"type":19,"tag":143,"props":793,"children":795},{"class":145,"line":794},17,[796],{"type":19,"tag":143,"props":797,"children":798},{"style":162},[799],{"type":24,"value":552},{"type":19,"tag":143,"props":801,"children":803},{"class":145,"line":802},18,[804],{"type":19,"tag":143,"props":805,"children":806},{"style":162},[807],{"type":24,"value":808},"}\n",{"type":19,"tag":20,"props":810,"children":811},{},[812],{"type":24,"value":813},"Damien",{"type":19,"tag":815,"props":816,"children":817},"style",{},[818],{"type":24,"value":819},"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":137,"searchDepth":168,"depth":168,"links":821},[822,823],{"id":69,"depth":168,"text":72},{"id":259,"depth":168,"text":262},"markdown","content:blog:2025:improved-content-articles-in-nuxt3.md","content","blog/2025/improved-content-articles-in-nuxt3.md","blog/2025/improved-content-articles-in-nuxt3","md","/blog/2025/improved-content-articles-in-nuxt3/",353,0,[834,838,842],{"title":835,"date":836,"url":837},"HTML5 Video Cheatsheet: Optimizing videos for the web","2025-12-05T00:00:00Z","/blog/2025/html5-video-cheatsheet/",{"title":839,"date":840,"url":841},"Transactions in the MongoDB EF Core Provider","2025-10-25","/blog/2025/mongodb-explicit-transactions/",{"title":843,"date":844,"url":845},"Queryable Encryption with the MongoDB EF Core Provider","2025-09-22","/blog/2025/mongodb-queryable-encryption/",[],1779224630193]