[{"data":1,"prerenderedAt":1309},["ShallowReactive",2],{"blog:2023:reading-time-with-nuxt3-content":3,"blogMore-Development":1295,"comments-reading-time-with-nuxt3-content":1308},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"category":11,"tags":12,"excerpt":15,"body":30,"_type":1286,"_id":1287,"_source":1288,"_file":1289,"_stem":1290,"_extension":1291,"url":1292,"wordCount":1293,"minutes":125,"commentCount":1294},"/blog/2023/reading-time-with-nuxt3-content","2023",false,"en","Adding reading time to Nuxt3 content","I've been using Nuxt2 quite a bit for my sites (including this one) and am now starting to use Nuxt3 for a few new ones and am finding the docs lacking in many places or confusing in others so hope to post a few more tips in the coming weeks.","2023-02-07T10:03:00-08:00","Development",[13,14],"Nuxt","webdev",{"type":16,"children":17},"root",[18,25],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":9},"text",{"type":19,"tag":20,"props":26,"children":27},{},[28],{"type":24,"value":29},"Today we have the \"reading time\" popularised by sites like Medium.",{"type":16,"children":31,"toc":1281},[32,36,40,47,61,703,708,714,727,996,1001,1182,1188,1193,1265,1270,1275],{"type":19,"tag":20,"props":33,"children":34},{},[35],{"type":24,"value":9},{"type":19,"tag":20,"props":37,"children":38},{},[39],{"type":24,"value":29},{"type":19,"tag":41,"props":42,"children":44},"h2",{"id":43},"nuxt3",[45],{"type":24,"value":46},"Nuxt3",{"type":19,"tag":20,"props":48,"children":49},{},[50,52,59],{"type":24,"value":51},"In Nuxt3 if we are using the content module then create a new file called ",{"type":19,"tag":53,"props":54,"children":56},"code",{"className":55},[],[57],{"type":24,"value":58},"/server/plugins/reading-time.ts",{"type":24,"value":60}," with the following contents:",{"type":19,"tag":62,"props":63,"children":68},"pre",{"className":64,"code":65,"language":66,"meta":67,"style":67},"language-typescript shiki shiki-themes everforest-light dracula","import { visit } from \"unist-util-visit\"\n\nconst wpm = 225\n\nexport default defineNitroPlugin((nitroApp) => {\n  nitroApp.hooks.hook(\"content:file:afterParse\", (file) => {\n    if (file._id.endsWith(\".md\") && !file.wordCount) {\n      file.wordCount = 0\n      visit(\n        file.body,\n        (n: any) => n.type === \"text\",\n        (node) => {\n          file.wordCount += node.value.trim().split(/\\s+/).length\n        }\n      )\n      file.minutes = Math.ceil(file.wordCount / wpm)\n    }\n  })\n})\n","typescript","",[69],{"type":19,"tag":53,"props":70,"children":71},{"__ignoreMap":67},[72,113,123,149,157,203,273,349,376,390,408,478,503,601,610,619,676,685,694],{"type":19,"tag":73,"props":74,"children":77},"span",{"class":75,"line":76},"line",1,[78,84,90,96,102,108],{"type":19,"tag":73,"props":79,"children":81},{"style":80},"--shiki-default:#DF69BA;--shiki-dark:#FF79C6",[82],{"type":24,"value":83},"import",{"type":19,"tag":73,"props":85,"children":87},{"style":86},"--shiki-default:#5C6A72;--shiki-dark:#F8F8F2",[88],{"type":24,"value":89}," { visit } ",{"type":19,"tag":73,"props":91,"children":93},{"style":92},"--shiki-default:#F85552;--shiki-dark:#FF79C6",[94],{"type":24,"value":95},"from",{"type":19,"tag":73,"props":97,"children":99},{"style":98},"--shiki-default:#DFA000;--shiki-dark:#E9F284",[100],{"type":24,"value":101}," \"",{"type":19,"tag":73,"props":103,"children":105},{"style":104},"--shiki-default:#DFA000;--shiki-dark:#F1FA8C",[106],{"type":24,"value":107},"unist-util-visit",{"type":19,"tag":73,"props":109,"children":110},{"style":98},[111],{"type":24,"value":112},"\"\n",{"type":19,"tag":73,"props":114,"children":116},{"class":75,"line":115},2,[117],{"type":19,"tag":73,"props":118,"children":120},{"emptyLinePlaceholder":119},true,[121],{"type":24,"value":122},"\n",{"type":19,"tag":73,"props":124,"children":126},{"class":75,"line":125},3,[127,133,138,143],{"type":19,"tag":73,"props":128,"children":130},{"style":129},"--shiki-default:#F57D26;--shiki-dark:#FF79C6",[131],{"type":24,"value":132},"const",{"type":19,"tag":73,"props":134,"children":135},{"style":86},[136],{"type":24,"value":137}," wpm ",{"type":19,"tag":73,"props":139,"children":140},{"style":129},[141],{"type":24,"value":142},"=",{"type":19,"tag":73,"props":144,"children":146},{"style":145},"--shiki-default:#DF69BA;--shiki-dark:#BD93F9",[147],{"type":24,"value":148}," 225\n",{"type":19,"tag":73,"props":150,"children":152},{"class":75,"line":151},4,[153],{"type":19,"tag":73,"props":154,"children":155},{"emptyLinePlaceholder":119},[156],{"type":24,"value":122},{"type":19,"tag":73,"props":158,"children":160},{"class":75,"line":159},5,[161,166,171,177,182,188,193,198],{"type":19,"tag":73,"props":162,"children":163},{"style":80},[164],{"type":24,"value":165},"export",{"type":19,"tag":73,"props":167,"children":168},{"style":92},[169],{"type":24,"value":170}," default",{"type":19,"tag":73,"props":172,"children":174},{"style":173},"--shiki-default:#8DA101;--shiki-dark:#50FA7B",[175],{"type":24,"value":176}," defineNitroPlugin",{"type":19,"tag":73,"props":178,"children":179},{"style":86},[180],{"type":24,"value":181},"((",{"type":19,"tag":73,"props":183,"children":185},{"style":184},"--shiki-default:#5C6A72;--shiki-default-font-style:inherit;--shiki-dark:#FFB86C;--shiki-dark-font-style:italic",[186],{"type":24,"value":187},"nitroApp",{"type":19,"tag":73,"props":189,"children":190},{"style":86},[191],{"type":24,"value":192},") ",{"type":19,"tag":73,"props":194,"children":195},{"style":129},[196],{"type":24,"value":197},"=>",{"type":19,"tag":73,"props":199,"children":200},{"style":86},[201],{"type":24,"value":202}," {\n",{"type":19,"tag":73,"props":204,"children":206},{"class":75,"line":205},6,[207,212,218,223,227,232,237,242,247,251,256,261,265,269],{"type":19,"tag":73,"props":208,"children":209},{"style":86},[210],{"type":24,"value":211},"  nitroApp",{"type":19,"tag":73,"props":213,"children":215},{"style":214},"--shiki-default:#939F91;--shiki-dark:#F8F8F2",[216],{"type":24,"value":217},".",{"type":19,"tag":73,"props":219,"children":220},{"style":86},[221],{"type":24,"value":222},"hooks",{"type":19,"tag":73,"props":224,"children":225},{"style":214},[226],{"type":24,"value":217},{"type":19,"tag":73,"props":228,"children":229},{"style":173},[230],{"type":24,"value":231},"hook",{"type":19,"tag":73,"props":233,"children":234},{"style":86},[235],{"type":24,"value":236},"(",{"type":19,"tag":73,"props":238,"children":239},{"style":98},[240],{"type":24,"value":241},"\"",{"type":19,"tag":73,"props":243,"children":244},{"style":104},[245],{"type":24,"value":246},"content:file:afterParse",{"type":19,"tag":73,"props":248,"children":249},{"style":98},[250],{"type":24,"value":241},{"type":19,"tag":73,"props":252,"children":253},{"style":86},[254],{"type":24,"value":255},", (",{"type":19,"tag":73,"props":257,"children":258},{"style":184},[259],{"type":24,"value":260},"file",{"type":19,"tag":73,"props":262,"children":263},{"style":86},[264],{"type":24,"value":192},{"type":19,"tag":73,"props":266,"children":267},{"style":129},[268],{"type":24,"value":197},{"type":19,"tag":73,"props":270,"children":271},{"style":86},[272],{"type":24,"value":202},{"type":19,"tag":73,"props":274,"children":276},{"class":75,"line":275},7,[277,282,287,291,296,300,305,309,313,318,322,326,331,336,340,344],{"type":19,"tag":73,"props":278,"children":279},{"style":92},[280],{"type":24,"value":281},"    if",{"type":19,"tag":73,"props":283,"children":284},{"style":86},[285],{"type":24,"value":286}," (file",{"type":19,"tag":73,"props":288,"children":289},{"style":214},[290],{"type":24,"value":217},{"type":19,"tag":73,"props":292,"children":293},{"style":86},[294],{"type":24,"value":295},"_id",{"type":19,"tag":73,"props":297,"children":298},{"style":214},[299],{"type":24,"value":217},{"type":19,"tag":73,"props":301,"children":302},{"style":173},[303],{"type":24,"value":304},"endsWith",{"type":19,"tag":73,"props":306,"children":307},{"style":86},[308],{"type":24,"value":236},{"type":19,"tag":73,"props":310,"children":311},{"style":98},[312],{"type":24,"value":241},{"type":19,"tag":73,"props":314,"children":315},{"style":104},[316],{"type":24,"value":317},".md",{"type":19,"tag":73,"props":319,"children":320},{"style":98},[321],{"type":24,"value":241},{"type":19,"tag":73,"props":323,"children":324},{"style":86},[325],{"type":24,"value":192},{"type":19,"tag":73,"props":327,"children":328},{"style":129},[329],{"type":24,"value":330},"&&",{"type":19,"tag":73,"props":332,"children":333},{"style":129},[334],{"type":24,"value":335}," !",{"type":19,"tag":73,"props":337,"children":338},{"style":86},[339],{"type":24,"value":260},{"type":19,"tag":73,"props":341,"children":342},{"style":214},[343],{"type":24,"value":217},{"type":19,"tag":73,"props":345,"children":346},{"style":86},[347],{"type":24,"value":348},"wordCount) {\n",{"type":19,"tag":73,"props":350,"children":352},{"class":75,"line":351},8,[353,358,362,367,371],{"type":19,"tag":73,"props":354,"children":355},{"style":86},[356],{"type":24,"value":357},"      file",{"type":19,"tag":73,"props":359,"children":360},{"style":214},[361],{"type":24,"value":217},{"type":19,"tag":73,"props":363,"children":364},{"style":86},[365],{"type":24,"value":366},"wordCount ",{"type":19,"tag":73,"props":368,"children":369},{"style":129},[370],{"type":24,"value":142},{"type":19,"tag":73,"props":372,"children":373},{"style":145},[374],{"type":24,"value":375}," 0\n",{"type":19,"tag":73,"props":377,"children":379},{"class":75,"line":378},9,[380,385],{"type":19,"tag":73,"props":381,"children":382},{"style":173},[383],{"type":24,"value":384},"      visit",{"type":19,"tag":73,"props":386,"children":387},{"style":86},[388],{"type":24,"value":389},"(\n",{"type":19,"tag":73,"props":391,"children":393},{"class":75,"line":392},10,[394,399,403],{"type":19,"tag":73,"props":395,"children":396},{"style":86},[397],{"type":24,"value":398},"        file",{"type":19,"tag":73,"props":400,"children":401},{"style":214},[402],{"type":24,"value":217},{"type":19,"tag":73,"props":404,"children":405},{"style":86},[406],{"type":24,"value":407},"body,\n",{"type":19,"tag":73,"props":409,"children":411},{"class":75,"line":410},11,[412,417,422,428,434,438,442,447,451,456,461,465,469,473],{"type":19,"tag":73,"props":413,"children":414},{"style":86},[415],{"type":24,"value":416},"        (",{"type":19,"tag":73,"props":418,"children":419},{"style":184},[420],{"type":24,"value":421},"n",{"type":19,"tag":73,"props":423,"children":425},{"style":424},"--shiki-default:#939F91;--shiki-dark:#FF79C6",[426],{"type":24,"value":427},":",{"type":19,"tag":73,"props":429,"children":431},{"style":430},"--shiki-default:#3A94C5;--shiki-default-font-style:inherit;--shiki-dark:#8BE9FD;--shiki-dark-font-style:italic",[432],{"type":24,"value":433}," any",{"type":19,"tag":73,"props":435,"children":436},{"style":86},[437],{"type":24,"value":192},{"type":19,"tag":73,"props":439,"children":440},{"style":129},[441],{"type":24,"value":197},{"type":19,"tag":73,"props":443,"children":444},{"style":86},[445],{"type":24,"value":446}," n",{"type":19,"tag":73,"props":448,"children":449},{"style":214},[450],{"type":24,"value":217},{"type":19,"tag":73,"props":452,"children":453},{"style":86},[454],{"type":24,"value":455},"type ",{"type":19,"tag":73,"props":457,"children":458},{"style":129},[459],{"type":24,"value":460},"===",{"type":19,"tag":73,"props":462,"children":463},{"style":98},[464],{"type":24,"value":101},{"type":19,"tag":73,"props":466,"children":467},{"style":104},[468],{"type":24,"value":24},{"type":19,"tag":73,"props":470,"children":471},{"style":98},[472],{"type":24,"value":241},{"type":19,"tag":73,"props":474,"children":475},{"style":86},[476],{"type":24,"value":477},",\n",{"type":19,"tag":73,"props":479,"children":481},{"class":75,"line":480},12,[482,486,491,495,499],{"type":19,"tag":73,"props":483,"children":484},{"style":86},[485],{"type":24,"value":416},{"type":19,"tag":73,"props":487,"children":488},{"style":184},[489],{"type":24,"value":490},"node",{"type":19,"tag":73,"props":492,"children":493},{"style":86},[494],{"type":24,"value":192},{"type":19,"tag":73,"props":496,"children":497},{"style":129},[498],{"type":24,"value":197},{"type":19,"tag":73,"props":500,"children":501},{"style":86},[502],{"type":24,"value":202},{"type":19,"tag":73,"props":504,"children":506},{"class":75,"line":505},13,[507,512,516,520,525,530,534,539,543,548,553,557,562,566,572,578,583,587,592,596],{"type":19,"tag":73,"props":508,"children":509},{"style":86},[510],{"type":24,"value":511},"          file",{"type":19,"tag":73,"props":513,"children":514},{"style":214},[515],{"type":24,"value":217},{"type":19,"tag":73,"props":517,"children":518},{"style":86},[519],{"type":24,"value":366},{"type":19,"tag":73,"props":521,"children":522},{"style":129},[523],{"type":24,"value":524},"+=",{"type":19,"tag":73,"props":526,"children":527},{"style":86},[528],{"type":24,"value":529}," node",{"type":19,"tag":73,"props":531,"children":532},{"style":214},[533],{"type":24,"value":217},{"type":19,"tag":73,"props":535,"children":536},{"style":86},[537],{"type":24,"value":538},"value",{"type":19,"tag":73,"props":540,"children":541},{"style":214},[542],{"type":24,"value":217},{"type":19,"tag":73,"props":544,"children":545},{"style":173},[546],{"type":24,"value":547},"trim",{"type":19,"tag":73,"props":549,"children":550},{"style":86},[551],{"type":24,"value":552},"()",{"type":19,"tag":73,"props":554,"children":555},{"style":214},[556],{"type":24,"value":217},{"type":19,"tag":73,"props":558,"children":559},{"style":173},[560],{"type":24,"value":561},"split",{"type":19,"tag":73,"props":563,"children":564},{"style":86},[565],{"type":24,"value":236},{"type":19,"tag":73,"props":567,"children":569},{"style":568},"--shiki-default:#DFA000;--shiki-dark:#FF5555",[570],{"type":24,"value":571},"/",{"type":19,"tag":73,"props":573,"children":575},{"style":574},"--shiki-default:#DFA000;--shiki-dark:#BD93F9",[576],{"type":24,"value":577},"\\s",{"type":19,"tag":73,"props":579,"children":580},{"style":129},[581],{"type":24,"value":582},"+",{"type":19,"tag":73,"props":584,"children":585},{"style":568},[586],{"type":24,"value":571},{"type":19,"tag":73,"props":588,"children":589},{"style":86},[590],{"type":24,"value":591},")",{"type":19,"tag":73,"props":593,"children":594},{"style":214},[595],{"type":24,"value":217},{"type":19,"tag":73,"props":597,"children":598},{"style":86},[599],{"type":24,"value":600},"length\n",{"type":19,"tag":73,"props":602,"children":604},{"class":75,"line":603},14,[605],{"type":19,"tag":73,"props":606,"children":607},{"style":86},[608],{"type":24,"value":609},"        }\n",{"type":19,"tag":73,"props":611,"children":613},{"class":75,"line":612},15,[614],{"type":19,"tag":73,"props":615,"children":616},{"style":86},[617],{"type":24,"value":618},"      )\n",{"type":19,"tag":73,"props":620,"children":622},{"class":75,"line":621},16,[623,627,631,636,640,645,649,654,659,663,667,671],{"type":19,"tag":73,"props":624,"children":625},{"style":86},[626],{"type":24,"value":357},{"type":19,"tag":73,"props":628,"children":629},{"style":214},[630],{"type":24,"value":217},{"type":19,"tag":73,"props":632,"children":633},{"style":86},[634],{"type":24,"value":635},"minutes ",{"type":19,"tag":73,"props":637,"children":638},{"style":129},[639],{"type":24,"value":142},{"type":19,"tag":73,"props":641,"children":642},{"style":86},[643],{"type":24,"value":644}," Math",{"type":19,"tag":73,"props":646,"children":647},{"style":214},[648],{"type":24,"value":217},{"type":19,"tag":73,"props":650,"children":651},{"style":173},[652],{"type":24,"value":653},"ceil",{"type":19,"tag":73,"props":655,"children":656},{"style":86},[657],{"type":24,"value":658},"(file",{"type":19,"tag":73,"props":660,"children":661},{"style":214},[662],{"type":24,"value":217},{"type":19,"tag":73,"props":664,"children":665},{"style":86},[666],{"type":24,"value":366},{"type":19,"tag":73,"props":668,"children":669},{"style":129},[670],{"type":24,"value":571},{"type":19,"tag":73,"props":672,"children":673},{"style":86},[674],{"type":24,"value":675}," wpm)\n",{"type":19,"tag":73,"props":677,"children":679},{"class":75,"line":678},17,[680],{"type":19,"tag":73,"props":681,"children":682},{"style":86},[683],{"type":24,"value":684},"    }\n",{"type":19,"tag":73,"props":686,"children":688},{"class":75,"line":687},18,[689],{"type":19,"tag":73,"props":690,"children":691},{"style":86},[692],{"type":24,"value":693},"  })\n",{"type":19,"tag":73,"props":695,"children":697},{"class":75,"line":696},19,[698],{"type":19,"tag":73,"props":699,"children":700},{"style":86},[701],{"type":24,"value":702},"})\n",{"type":19,"tag":20,"props":704,"children":705},{},[706],{"type":24,"value":707},"This is a little more convoluted than in Nuxt2 because there we were able to look at the plain text and set a property before parsing (beforeParse), however in Nuxt3 those properties do not persist all the way through to the page.",{"type":19,"tag":41,"props":709,"children":711},{"id":710},"nuxt2",[712],{"type":24,"value":713},"Nuxt2",{"type":19,"tag":20,"props":715,"children":716},{},[717,719,725],{"type":24,"value":718},"For completeness in case you are still using Nuxt2 the equivalent there was to modify ",{"type":19,"tag":53,"props":720,"children":722},{"className":721},[],[723],{"type":24,"value":724},"nuxt.config.js",{"type":24,"value":726}," to add this block:",{"type":19,"tag":62,"props":728,"children":730},{"className":64,"code":729,"language":66,"meta":67,"style":67},"export default {\n  // ...\n  hooks: {\n    \"content:file:beforeInsert\": (document) => {\n      if (document.extension === \".md\" && document.minutes === undefined) {\n        document.minutes = readingTime(document.text)\n      }\n      document.category = getCategory(document)\n    },\n  },\n  // ...\n}\n",[731],{"type":19,"tag":53,"props":732,"children":733},{"__ignoreMap":67},[734,749,758,774,817,887,926,934,965,973,981,988],{"type":19,"tag":73,"props":735,"children":736},{"class":75,"line":76},[737,741,745],{"type":19,"tag":73,"props":738,"children":739},{"style":80},[740],{"type":24,"value":165},{"type":19,"tag":73,"props":742,"children":743},{"style":92},[744],{"type":24,"value":170},{"type":19,"tag":73,"props":746,"children":747},{"style":86},[748],{"type":24,"value":202},{"type":19,"tag":73,"props":750,"children":751},{"class":75,"line":115},[752],{"type":19,"tag":73,"props":753,"children":755},{"style":754},"--shiki-default:#939F91;--shiki-default-font-style:italic;--shiki-dark:#6272A4;--shiki-dark-font-style:inherit",[756],{"type":24,"value":757},"  // ...\n",{"type":19,"tag":73,"props":759,"children":760},{"class":75,"line":125},[761,766,770],{"type":19,"tag":73,"props":762,"children":763},{"style":86},[764],{"type":24,"value":765},"  hooks",{"type":19,"tag":73,"props":767,"children":768},{"style":424},[769],{"type":24,"value":427},{"type":19,"tag":73,"props":771,"children":772},{"style":86},[773],{"type":24,"value":202},{"type":19,"tag":73,"props":775,"children":776},{"class":75,"line":151},[777,782,787,791,795,800,805,809,813],{"type":19,"tag":73,"props":778,"children":779},{"style":98},[780],{"type":24,"value":781},"    \"",{"type":19,"tag":73,"props":783,"children":784},{"style":104},[785],{"type":24,"value":786},"content:file:beforeInsert",{"type":19,"tag":73,"props":788,"children":789},{"style":98},[790],{"type":24,"value":241},{"type":19,"tag":73,"props":792,"children":793},{"style":424},[794],{"type":24,"value":427},{"type":19,"tag":73,"props":796,"children":797},{"style":86},[798],{"type":24,"value":799}," (",{"type":19,"tag":73,"props":801,"children":802},{"style":184},[803],{"type":24,"value":804},"document",{"type":19,"tag":73,"props":806,"children":807},{"style":86},[808],{"type":24,"value":192},{"type":19,"tag":73,"props":810,"children":811},{"style":129},[812],{"type":24,"value":197},{"type":19,"tag":73,"props":814,"children":815},{"style":86},[816],{"type":24,"value":202},{"type":19,"tag":73,"props":818,"children":819},{"class":75,"line":159},[820,825,830,834,839,843,847,851,855,860,865,869,873,877,882],{"type":19,"tag":73,"props":821,"children":822},{"style":92},[823],{"type":24,"value":824},"      if",{"type":19,"tag":73,"props":826,"children":827},{"style":86},[828],{"type":24,"value":829}," (document",{"type":19,"tag":73,"props":831,"children":832},{"style":214},[833],{"type":24,"value":217},{"type":19,"tag":73,"props":835,"children":836},{"style":86},[837],{"type":24,"value":838},"extension ",{"type":19,"tag":73,"props":840,"children":841},{"style":129},[842],{"type":24,"value":460},{"type":19,"tag":73,"props":844,"children":845},{"style":98},[846],{"type":24,"value":101},{"type":19,"tag":73,"props":848,"children":849},{"style":104},[850],{"type":24,"value":317},{"type":19,"tag":73,"props":852,"children":853},{"style":98},[854],{"type":24,"value":241},{"type":19,"tag":73,"props":856,"children":857},{"style":129},[858],{"type":24,"value":859}," &&",{"type":19,"tag":73,"props":861,"children":862},{"style":86},[863],{"type":24,"value":864}," document",{"type":19,"tag":73,"props":866,"children":867},{"style":214},[868],{"type":24,"value":217},{"type":19,"tag":73,"props":870,"children":871},{"style":86},[872],{"type":24,"value":635},{"type":19,"tag":73,"props":874,"children":875},{"style":129},[876],{"type":24,"value":460},{"type":19,"tag":73,"props":878,"children":879},{"style":145},[880],{"type":24,"value":881}," undefined",{"type":19,"tag":73,"props":883,"children":884},{"style":86},[885],{"type":24,"value":886},") {\n",{"type":19,"tag":73,"props":888,"children":889},{"class":75,"line":205},[890,895,899,903,907,912,917,921],{"type":19,"tag":73,"props":891,"children":892},{"style":86},[893],{"type":24,"value":894},"        document",{"type":19,"tag":73,"props":896,"children":897},{"style":214},[898],{"type":24,"value":217},{"type":19,"tag":73,"props":900,"children":901},{"style":86},[902],{"type":24,"value":635},{"type":19,"tag":73,"props":904,"children":905},{"style":129},[906],{"type":24,"value":142},{"type":19,"tag":73,"props":908,"children":909},{"style":173},[910],{"type":24,"value":911}," readingTime",{"type":19,"tag":73,"props":913,"children":914},{"style":86},[915],{"type":24,"value":916},"(document",{"type":19,"tag":73,"props":918,"children":919},{"style":214},[920],{"type":24,"value":217},{"type":19,"tag":73,"props":922,"children":923},{"style":86},[924],{"type":24,"value":925},"text)\n",{"type":19,"tag":73,"props":927,"children":928},{"class":75,"line":275},[929],{"type":19,"tag":73,"props":930,"children":931},{"style":86},[932],{"type":24,"value":933},"      }\n",{"type":19,"tag":73,"props":935,"children":936},{"class":75,"line":351},[937,942,946,951,955,960],{"type":19,"tag":73,"props":938,"children":939},{"style":86},[940],{"type":24,"value":941},"      document",{"type":19,"tag":73,"props":943,"children":944},{"style":214},[945],{"type":24,"value":217},{"type":19,"tag":73,"props":947,"children":948},{"style":86},[949],{"type":24,"value":950},"category ",{"type":19,"tag":73,"props":952,"children":953},{"style":129},[954],{"type":24,"value":142},{"type":19,"tag":73,"props":956,"children":957},{"style":173},[958],{"type":24,"value":959}," getCategory",{"type":19,"tag":73,"props":961,"children":962},{"style":86},[963],{"type":24,"value":964},"(document)\n",{"type":19,"tag":73,"props":966,"children":967},{"class":75,"line":378},[968],{"type":19,"tag":73,"props":969,"children":970},{"style":86},[971],{"type":24,"value":972},"    },\n",{"type":19,"tag":73,"props":974,"children":975},{"class":75,"line":392},[976],{"type":19,"tag":73,"props":977,"children":978},{"style":86},[979],{"type":24,"value":980},"  },\n",{"type":19,"tag":73,"props":982,"children":983},{"class":75,"line":410},[984],{"type":19,"tag":73,"props":985,"children":986},{"style":754},[987],{"type":24,"value":757},{"type":19,"tag":73,"props":989,"children":990},{"class":75,"line":480},[991],{"type":19,"tag":73,"props":992,"children":993},{"style":86},[994],{"type":24,"value":995},"}\n",{"type":19,"tag":20,"props":997,"children":998},{},[999],{"type":24,"value":1000},"Then place this function at the end of the file:",{"type":19,"tag":62,"props":1002,"children":1004},{"className":64,"code":1003,"language":66,"meta":67,"style":67},"export const readingTime = (text) => {\n  const wpm = 225\n  const words = text.trim().split(/\\s+/).length\n  return Math.ceil(words / wpm)\n}\n",[1005],{"type":19,"tag":53,"props":1006,"children":1007},{"__ignoreMap":67},[1008,1049,1069,1142,1175],{"type":19,"tag":73,"props":1009,"children":1010},{"class":75,"line":76},[1011,1015,1020,1024,1029,1033,1037,1041,1045],{"type":19,"tag":73,"props":1012,"children":1013},{"style":80},[1014],{"type":24,"value":165},{"type":19,"tag":73,"props":1016,"children":1017},{"style":129},[1018],{"type":24,"value":1019}," const",{"type":19,"tag":73,"props":1021,"children":1022},{"style":173},[1023],{"type":24,"value":911},{"type":19,"tag":73,"props":1025,"children":1026},{"style":129},[1027],{"type":24,"value":1028}," =",{"type":19,"tag":73,"props":1030,"children":1031},{"style":86},[1032],{"type":24,"value":799},{"type":19,"tag":73,"props":1034,"children":1035},{"style":184},[1036],{"type":24,"value":24},{"type":19,"tag":73,"props":1038,"children":1039},{"style":86},[1040],{"type":24,"value":192},{"type":19,"tag":73,"props":1042,"children":1043},{"style":129},[1044],{"type":24,"value":197},{"type":19,"tag":73,"props":1046,"children":1047},{"style":86},[1048],{"type":24,"value":202},{"type":19,"tag":73,"props":1050,"children":1051},{"class":75,"line":115},[1052,1057,1061,1065],{"type":19,"tag":73,"props":1053,"children":1054},{"style":129},[1055],{"type":24,"value":1056},"  const",{"type":19,"tag":73,"props":1058,"children":1059},{"style":86},[1060],{"type":24,"value":137},{"type":19,"tag":73,"props":1062,"children":1063},{"style":129},[1064],{"type":24,"value":142},{"type":19,"tag":73,"props":1066,"children":1067},{"style":145},[1068],{"type":24,"value":148},{"type":19,"tag":73,"props":1070,"children":1071},{"class":75,"line":125},[1072,1076,1081,1085,1090,1094,1098,1102,1106,1110,1114,1118,1122,1126,1130,1134,1138],{"type":19,"tag":73,"props":1073,"children":1074},{"style":129},[1075],{"type":24,"value":1056},{"type":19,"tag":73,"props":1077,"children":1078},{"style":86},[1079],{"type":24,"value":1080}," words ",{"type":19,"tag":73,"props":1082,"children":1083},{"style":129},[1084],{"type":24,"value":142},{"type":19,"tag":73,"props":1086,"children":1087},{"style":86},[1088],{"type":24,"value":1089}," text",{"type":19,"tag":73,"props":1091,"children":1092},{"style":214},[1093],{"type":24,"value":217},{"type":19,"tag":73,"props":1095,"children":1096},{"style":173},[1097],{"type":24,"value":547},{"type":19,"tag":73,"props":1099,"children":1100},{"style":86},[1101],{"type":24,"value":552},{"type":19,"tag":73,"props":1103,"children":1104},{"style":214},[1105],{"type":24,"value":217},{"type":19,"tag":73,"props":1107,"children":1108},{"style":173},[1109],{"type":24,"value":561},{"type":19,"tag":73,"props":1111,"children":1112},{"style":86},[1113],{"type":24,"value":236},{"type":19,"tag":73,"props":1115,"children":1116},{"style":568},[1117],{"type":24,"value":571},{"type":19,"tag":73,"props":1119,"children":1120},{"style":574},[1121],{"type":24,"value":577},{"type":19,"tag":73,"props":1123,"children":1124},{"style":129},[1125],{"type":24,"value":582},{"type":19,"tag":73,"props":1127,"children":1128},{"style":568},[1129],{"type":24,"value":571},{"type":19,"tag":73,"props":1131,"children":1132},{"style":86},[1133],{"type":24,"value":591},{"type":19,"tag":73,"props":1135,"children":1136},{"style":214},[1137],{"type":24,"value":217},{"type":19,"tag":73,"props":1139,"children":1140},{"style":86},[1141],{"type":24,"value":600},{"type":19,"tag":73,"props":1143,"children":1144},{"class":75,"line":151},[1145,1150,1154,1158,1162,1167,1171],{"type":19,"tag":73,"props":1146,"children":1147},{"style":92},[1148],{"type":24,"value":1149},"  return",{"type":19,"tag":73,"props":1151,"children":1152},{"style":86},[1153],{"type":24,"value":644},{"type":19,"tag":73,"props":1155,"children":1156},{"style":214},[1157],{"type":24,"value":217},{"type":19,"tag":73,"props":1159,"children":1160},{"style":173},[1161],{"type":24,"value":653},{"type":19,"tag":73,"props":1163,"children":1164},{"style":86},[1165],{"type":24,"value":1166},"(words ",{"type":19,"tag":73,"props":1168,"children":1169},{"style":129},[1170],{"type":24,"value":571},{"type":19,"tag":73,"props":1172,"children":1173},{"style":86},[1174],{"type":24,"value":675},{"type":19,"tag":73,"props":1176,"children":1177},{"class":75,"line":159},[1178],{"type":19,"tag":73,"props":1179,"children":1180},{"style":86},[1181],{"type":24,"value":995},{"type":19,"tag":41,"props":1183,"children":1185},{"id":1184},"displaying-it",[1186],{"type":24,"value":1187},"Displaying it",{"type":19,"tag":20,"props":1189,"children":1190},{},[1191],{"type":24,"value":1192},"Now, anywhere on your page where you are displaying content from those markdown files you can simply do:",{"type":19,"tag":62,"props":1194,"children":1198},{"className":1195,"code":1196,"language":1197,"meta":67,"style":67},"language-html shiki shiki-themes everforest-light dracula","\u003Cp v-if=\"post.minutes\">{{ post.minutes}} minutes\u003C/p>\n","html",[1199],{"type":19,"tag":53,"props":1200,"children":1201},{"__ignoreMap":67},[1202],{"type":19,"tag":73,"props":1203,"children":1204},{"class":75,"line":76},[1205,1211,1215,1221,1226,1231,1237,1241,1246,1251,1256,1260],{"type":19,"tag":73,"props":1206,"children":1208},{"style":1207},"--shiki-default:#8DA101;--shiki-dark:#F8F8F2",[1209],{"type":24,"value":1210},"\u003C",{"type":19,"tag":73,"props":1212,"children":1213},{"style":129},[1214],{"type":24,"value":20},{"type":19,"tag":73,"props":1216,"children":1218},{"style":1217},"--shiki-default:#DFA000;--shiki-default-font-style:inherit;--shiki-dark:#50FA7B;--shiki-dark-font-style:italic",[1219],{"type":24,"value":1220}," v-if",{"type":19,"tag":73,"props":1222,"children":1224},{"style":1223},"--shiki-default:#8DA101;--shiki-dark:#FF79C6",[1225],{"type":24,"value":142},{"type":19,"tag":73,"props":1227,"children":1229},{"style":1228},"--shiki-default:#8DA101;--shiki-dark:#E9F284",[1230],{"type":24,"value":241},{"type":19,"tag":73,"props":1232,"children":1234},{"style":1233},"--shiki-default:#8DA101;--shiki-dark:#F1FA8C",[1235],{"type":24,"value":1236},"post.minutes",{"type":19,"tag":73,"props":1238,"children":1239},{"style":1228},[1240],{"type":24,"value":241},{"type":19,"tag":73,"props":1242,"children":1243},{"style":1207},[1244],{"type":24,"value":1245},">",{"type":19,"tag":73,"props":1247,"children":1248},{"style":86},[1249],{"type":24,"value":1250},"{{ post.minutes}} minutes",{"type":19,"tag":73,"props":1252,"children":1253},{"style":1207},[1254],{"type":24,"value":1255},"\u003C/",{"type":19,"tag":73,"props":1257,"children":1258},{"style":129},[1259],{"type":24,"value":20},{"type":19,"tag":73,"props":1261,"children":1262},{"style":1207},[1263],{"type":24,"value":1264},">\n",{"type":19,"tag":20,"props":1266,"children":1267},{},[1268],{"type":24,"value":1269},"I've chosen a reading speed of 225 words-per-minute but obviously reading speed is highly subjective.",{"type":19,"tag":20,"props":1271,"children":1272},{},[1273],{"type":24,"value":1274},"One flexible alternative would be to record the number of words an article has and then in the front-end divide it by a user-configurable value. While it's unlikely worth the effort on a small site where somebody is hitting a single article if you're putting out a lot of related interesting content a viewer might peruse through it could be nice.",{"type":19,"tag":1276,"props":1277,"children":1278},"style",{},[1279],{"type":24,"value":1280},"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":67,"searchDepth":115,"depth":115,"links":1282},[1283,1284,1285],{"id":43,"depth":115,"text":46},{"id":710,"depth":115,"text":713},{"id":1184,"depth":115,"text":1187},"markdown","content:blog:2023:reading-time-with-nuxt3-content.md","content","blog/2023/reading-time-with-nuxt3-content.md","blog/2023/reading-time-with-nuxt3-content","md","/blog/2023/reading-time-with-nuxt3-content/",511,0,[1296,1300,1304],{"title":1297,"date":1298,"url":1299},"HTML5 Video Cheatsheet: Optimizing videos for the web","2025-12-05T00:00:00Z","/blog/2025/html5-video-cheatsheet/",{"title":1301,"date":1302,"url":1303},"Transactions in the MongoDB EF Core Provider","2025-10-25","/blog/2025/mongodb-explicit-transactions/",{"title":1305,"date":1306,"url":1307},"Queryable Encryption with the MongoDB EF Core Provider","2025-09-22","/blog/2025/mongodb-queryable-encryption/",[],1779224631397]