[{"data":1,"prerenderedAt":15149},["ShallowReactive",2],{"hubs_menu":3,"\u002Fprojects\u002Fjamstart\u002Fstyleslayout":254,"projects_jamstart-chapter_guide_JAMStartSetup":1122,"mdc-dtb5-key":15120,"mdc-ue4ruv-key":15131,"mdc-dt9e-key":15140},[4,60,161],{"id":5,"title":6,"author":7,"body":8,"content_type":28,"date_created":29,"date_modified":30,"description":31,"editor":30,"extension":32,"guide":30,"image":33,"image_alt":34,"is_list_exclude":35,"is_manual_image":35,"is_manual_title":35,"is_toc":35,"keywords":36,"meta":47,"navigation":51,"og_description":30,"og_image":30,"og_image_alt":30,"og_title":30,"path":52,"peer_order":26,"project":53,"projects":30,"published":54,"seo":55,"sitemap":56,"stem":57,"tagline":58,"version":30,"x_card":30,"x_creator_handle":30,"x_description":30,"x_image":30,"x_image_alt":30,"x_title":30,"__hash__":59},"content\u002Fprojects\u002Fcicd.md","CICD","John Pennock",{"type":9,"value":10,"toc":24},"minimark",[11,21],[12,13,14,15,20],"p",{},"Sometimes your static web site needs some custom work to increase the safety and reduce the tedium of deployment.  As a solopreneur having a 'hands-free' deployment is a requirement. With a very specific issue in mind (",[16,17,19],"a",{"href":18},"\u002Fblog\u002F2025\u002Fs3statichosting","AWS S3 Static Hosting",") I adventured into creating CICD tools.  My initial tools will be NPM packages and article on aws codepipelines.",[22,23],"project-hub",{},{"title":25,"searchDepth":26,"depth":26,"links":27},"",2,[],"hub","2025-07-28",null,"CICD is a set of guides, deployment tools and packages useful for solopreneur cloud infrastructure, deployments and maintenance of websites and services","md","\u002Fimages\u002Fprojects\u002Fcicdstaticlogo.png","A screen, CICD recycle logo, and 'CI\u002FCD Deploying Static Generated Sites'",false,[6,37,38,39,40,41,42,43,44,45,46],"nuxt","Vue_js","JavaScript","YAML","AWS_S3","CloudFront","npm","package","deploy","CLI",{"repos":48},[49,50],"sitemap-diff","nuxtss-s3-fix",true,"\u002Fprojects\u002Fcicd","CICDTools","published",{"title":6,"description":31},{"loc":52},"projects\u002Fcicd","Solo CICD","WUwKeU4xhX6nWf_3UpD0aPCQ80HtTQppleiZgDsxEFs",{"id":61,"title":62,"author":7,"body":63,"content_type":28,"date_created":141,"date_modified":142,"description":143,"editor":30,"extension":32,"guide":30,"image":144,"image_alt":74,"is_list_exclude":35,"is_manual_image":51,"is_manual_title":35,"is_toc":35,"keywords":145,"meta":152,"navigation":51,"og_description":30,"og_image":30,"og_image_alt":30,"og_title":30,"path":154,"peer_order":155,"project":62,"projects":30,"published":54,"seo":156,"sitemap":157,"stem":158,"tagline":159,"version":30,"x_card":30,"x_creator_handle":30,"x_description":30,"x_image":30,"x_image_alt":30,"x_title":30,"__hash__":160},"content\u002Fprojects\u002Fjamstart.md","JAMStart",{"type":9,"value":64,"toc":139},[65,75,78,90,92],[66,67,69],"monk-inset",{"size":68},"lg",[70,71],"img",{"alt":72,"src":73,"title":74},"JAMStart logo","\u002Fimages\u002Fprojects\u002FJAMStartLogoSolid.jpg","JAMStart Logo",[12,76,77],{},"JAMStart is starter code, tools and guides for building a new content static web site. It is designed to be easy to set up, inexpensive to host, SEO friendly, mobile responsive, and author friendly. JAMStart is ideal for solo developers, bloggers, writers, and small businesses who want to create and own their own web presence without relying on third-party platforms.",[12,79,80],{},[16,81,89],{"className":82,"href":86,"rel":87},[83,84,85],"my-2","text-2xl","font-bold","http:\u002F\u002Fjamstart.pennockprojects.com",[88],"nofollow","See JAMStart live",[22,91],{},[93,94,95,100,109,115,121,130],"icon-bank",{},[70,96],{"alt":97,"src":98,"title":99},"Nuxt.js Logo","\u002Fimages\u002Fquickrefs\u002FNuxt3Logo.png","Nuxt Logo",[101,102,103],"template",{"v-slot:two":25},[70,104],{"alt":105,"src":106,"title":105,"className":107},"Vue.js Logo","\u002Fimages\u002Fquickrefs\u002Fvue-logo.png",[108],"scale-50",[101,110,111],{"v-slot:three":25},[70,112],{"alt":113,"src":114,"title":113},"Markdown Logo","\u002Fimages\u002Fquickrefs\u002FMarkdownFileLogo.png",[101,116,117],{"v-slot:four":25},[70,118],{"alt":119,"src":120,"title":119},"Tailwind CSS Logo","\u002Fimages\u002Fquickrefs\u002Ftailwindlogo.jpg",[101,122,123],{"v-slot:five":25},[70,124],{"alt":125,"src":126,"title":125,"className":127},"GitHub Logo","\u002Fimages\u002Fquickrefs\u002FGitHubLogo.png",[128,129],"dark-invert-bright","scale-75",[101,131,132],{"v-slot:six":25},[70,133],{"alt":134,"src":135,"title":136,"className":137},"AWS Logo","\u002Fimages\u002Fquickrefs\u002FAWSLogo.svg","Amazon Web Services Logo",[138],"dark-hue-rotate",{"title":25,"searchDepth":26,"depth":26,"links":140},[],"2024-05-03","2025-01-31","JAMStart is a starter template for new inexpensive static content web-site using Nuxt.js front-end, Markdown content, and git based deployment.","\u002Fimages\u002Fprojects\u002FJAMStartLogoSolidLandscape.jpg",[37,38,39,146,40,41,42,147,148,149,150,151],"Markdown","CloudFlare Analytics","cookie free","starter","git deployment","free to use",{"repos":153},[62,49,50],"\u002Fprojects\u002Fjamstart",1,{"title":62,"description":143},{"loc":154},"projects\u002Fjamstart","Free Web Site Starter","VaERxR9AcY3W2-rdnS5x2E7Jjz_oMqKC9cAoM_ZoGSI",{"id":162,"title":163,"author":30,"body":164,"content_type":28,"date_created":25,"date_modified":30,"description":240,"editor":30,"extension":32,"guide":30,"image":241,"image_alt":242,"is_list_exclude":35,"is_manual_image":35,"is_manual_title":35,"is_toc":35,"keywords":243,"meta":246,"navigation":51,"og_description":30,"og_image":30,"og_image_alt":30,"og_title":30,"path":247,"peer_order":239,"project":248,"projects":30,"published":54,"seo":249,"sitemap":250,"stem":251,"tagline":252,"version":30,"x_card":30,"x_creator_handle":30,"x_description":30,"x_image":30,"x_image_alt":30,"x_title":30,"__hash__":253},"content\u002Fprojects\u002Fqrpdf\u002Findex.md","QR PDF",{"type":9,"value":165,"toc":236},[166,171,234],[167,168,170],"h3",{"id":169},"notes","Notes",[172,173,174,194,201,226],"ul",{},[175,176,177,181,182,186,187,193],"li",{},[16,178,180],{"href":179},"\u002Fprojects\u002Fqrpdf\u002Fexperiments\u002Fpdfview\u002Fdgp\u002Fcloroxpage","Clorox SDS"," and ",[16,183,185],{"href":184},"\u002Fprojects\u002Fqrpdf\u002Fexperiments\u002Fpdfview\u002Fdgp\u002Fsharpiepage","Sharpie SDS"," uses ",[16,188,192],{"href":189,"rel":190,"target":191},"https:\u002F\u002Fwww.vue-pdf-viewer.dev\u002F",[88],"_blank","Vue PDF Viewer"," - Works everywhere",[175,195,196,200],{},[16,197,199],{"href":198},"\u002Fprojects\u002Fqrpdf\u002Fexperiments\u002Fpdfview\u002Fdgp\u002Fwd40","WD-40 SDS"," uses Browser Embed PDF Viewer - This didn't seem to work on my Android Chrome",[175,202,203,207,208],{},[16,204,206],{"href":205},"\u002Fprojects\u002Fqrpdf\u002Fexperiments\u002Fpdfview\u002Fdgp\u002Friviera","Riviera Apartment"," has a hard coded QR code\n",[172,209,210,218],{},[175,211,212,213,217],{},"I'm unhappy with ",[214,215,216],"del",{},"qrcodecreator.com"," -",[175,219,220,225],{},[16,221,224],{"href":222,"rel":223,":target":191},"https:\u002F\u002Fbitly.com\u002F",[88],"bitly.com"," 3 free QR non-expiring codes per month.",[175,227,228,233],{},[16,229,232],{"href":230,"rel":231,":target":191},"https:\u002F\u002Fmsdsdigital.com\u002F",[88],"MSDS Digital"," is a general website that provides SDS services for poster printing and e-book binders for a fee.",[22,235],{},{"title":25,"searchDepth":26,"depth":26,"links":237},[238],{"id":169,"depth":239,"text":170},3,"A project to dynamically generate QR codes to pages hosting PDF files.","\u002Fimages\u002Fprojects\u002FPDFViewerRect.jpg","A giant bulletin board with PDF files pinned to it in front of a crowd of people",[244,245],"QR_code","PDF",{},"\u002Fprojects\u002Fqrpdf","QRPDF",{"title":163,"description":240},{"loc":247},"projects\u002Fqrpdf\u002Findex","QR Codes PDF Files","IiRj1WNilnu-yn4XyNcYjLZqUgmMsCgbKgziQM8BSJw",{"id":255,"title":256,"author":7,"body":257,"content_type":1111,"date_created":1112,"date_modified":30,"description":1113,"editor":30,"extension":32,"guide":1114,"image":265,"image_alt":264,"is_list_exclude":35,"is_manual_image":51,"is_manual_title":35,"is_toc":51,"keywords":30,"meta":1115,"navigation":51,"og_description":30,"og_image":30,"og_image_alt":30,"og_title":30,"path":1116,"peer_order":558,"project":62,"projects":30,"published":54,"seo":1117,"sitemap":1118,"stem":1119,"tagline":1120,"version":30,"x_card":30,"x_creator_handle":30,"x_description":30,"x_image":30,"x_image_alt":30,"x_title":30,"__hash__":1121},"content\u002Fprojects\u002Fjamstart\u002F6.StylesLayout.md","Styles, Layout, and Navigation",{"type":9,"value":258,"toc":1103},[259,271,276,280,311,319,395,401,407,460,464,483,486,608,635,639,642,655,691,705,707,954,958,969,1017,1047,1065,1100],[260,261,262,266],"figure-caption",{},[70,263],{"alt":264,"src":265},"Decorative crown molding","\u002Fimages\u002Fprojects\u002FCrownMolding.png",[101,267,268],{"v-slot:caption":25},[12,269,270],{},"An actual photo of the custom extras that were added to JAMStart",[272,273,275],"h2",{"id":274},"styles","Styles",[167,277,279],{"id":278},"tailwind-css","Tailwind CSS",[12,281,282,283,287,288,291,292,295,296,299,300,303,304,181,307,310],{},"In a ",[284,285,286],"code",{},".vue"," file you can use tailwind CSS classes directly in the elements within the ",[284,289,290],{},"\u003Ctemplate>\u003C\u002Ftemplate>"," section, or you can create CSS rules in the ",[284,293,294],{},"\u003Cstyle>\u003C\u002Fstyle>"," section. To add tailwind classes in the style section use the ",[284,297,298],{},"@apply"," line, for example, the class ",[284,301,302],{},"link"," has the tailwind CSS class ",[284,305,306],{},"p-1",[284,308,309],{},"hover:bg-gray-200"," applied to it.",[312,313,315,316],"h4",{"id":314},"apply-tailwind-in","@apply Tailwind in ",[317,318],"style",{},[320,321,325],"pre",{"className":322,"code":323,"language":324,"meta":25,"style":25},"language-vue shiki shiki-themes min-light min-dark monokai","\u003Cstyle scoped>\n.link {\n  @apply p-1 hover:bg-gray-200\n}\n\u003C\u002Fstyle>\n","vue",[284,326,327,345,353,379,385],{"__ignoreMap":25},[328,329,331,335,338,342],"span",{"class":330,"line":155},"line",[328,332,334],{"class":333},"sxUMQ","\u003C",[328,336,317],{"class":337},"szMGX",[328,339,341],{"class":340},"srTi1"," scoped",[328,343,344],{"class":333},">\n",[328,346,347,350],{"class":330,"line":26},[328,348,349],{"class":340},".link",[328,351,352],{"class":333}," {\n",[328,354,355,358,362,365,368,371,375],{"class":330,"line":239},[328,356,357],{"class":333},"  @",[328,359,361],{"class":360},"sraLd","apply",[328,363,364],{"class":360}," p-",[328,366,367],{"class":333},"1 ",[328,369,370],{"class":360},"hover",[328,372,374],{"class":373},"skixG",":",[328,376,378],{"class":377},"sF6MT","bg-gray-200\n",[328,380,382],{"class":330,"line":381},4,[328,383,384],{"class":333},"}\n",[328,386,388,391,393],{"class":330,"line":387},5,[328,389,390],{"class":333},"\u003C\u002F",[328,392,317],{"class":337},[328,394,344],{"class":333},[312,396,398,399],{"id":397},"tailwind-in","Tailwind in ",[101,400],{},[12,402,403,404,406],{},"or the same classes used in the ",[284,405,290],{}," section",[320,408,410],{"className":322,"code":409,"language":324,"meta":25,"style":25},"\u003Ctemplate>\n  \u003Ca class=\"p-1 hover:bg-gray-200\" src=\"\">Link\u003C\u002Fa>\n\u003C\u002Ftemplate>\n",[284,411,412,420,452],{"__ignoreMap":25},[328,413,414,416,418],{"class":330,"line":155},[328,415,334],{"class":333},[328,417,101],{"class":337},[328,419,344],{"class":333},[328,421,422,425,427,430,433,437,440,442,445,448,450],{"class":330,"line":26},[328,423,424],{"class":333},"  \u003C",[328,426,16],{"class":337},[328,428,429],{"class":340}," class",[328,431,432],{"class":373},"=",[328,434,436],{"class":435},"shHn5","\"p-1 hover:bg-gray-200\"",[328,438,439],{"class":340}," src",[328,441,432],{"class":373},[328,443,444],{"class":435},"\"\"",[328,446,447],{"class":333},">Link\u003C\u002F",[328,449,16],{"class":337},[328,451,344],{"class":333},[328,453,454,456,458],{"class":330,"line":239},[328,455,390],{"class":333},[328,457,101],{"class":337},[328,459,344],{"class":333},[312,461,463],{"id":462},"deep-bind-selectors","Deep() Bind() selectors",[12,465,466,467,181,470,473,474,476,477,479,480,406],{},"Two useful vue functions I found helpful with tailwind css are the ",[284,468,469],{},":deep()",[284,471,472],{},"v-bind()"," functions.  ",[284,475,469],{}," is useful to select descendent HTML elements and even ones that are dynamically placed.  ",[284,478,472],{}," allows you to feed your style section with variables from the ",[284,481,482],{},"\u003Cscript>\u003C\u002Fscript>",[12,484,485],{},"For example:",[320,487,489],{"className":322,"code":488,"language":324,"meta":25,"style":25},"\u003Cstyle>\n.monk-inset :deep(p) {\n  font-size: v-bind('pFontSizeClass');\n  line-height: v-bind('pLineHeightClass');\n  height: v-bind('pLineHeightClass');\n  margin: -0.2ch 0 0 0;\n  @apply p-0\n}\n\u003C\u002Fstyle>\n",[284,490,491,499,512,529,543,556,582,594,599],{"__ignoreMap":25},[328,492,493,495,497],{"class":330,"line":155},[328,494,334],{"class":333},[328,496,317],{"class":337},[328,498,344],{"class":333},[328,500,501,504,507,509],{"class":330,"line":26},[328,502,503],{"class":340},".monk-inset",[328,505,506],{"class":333}," :deep(",[328,508,12],{"class":337},[328,510,511],{"class":333},") {\n",[328,513,514,518,520,523,526],{"class":330,"line":239},[328,515,517],{"class":516},"sibI6","  font-size",[328,519,374],{"class":373},[328,521,522],{"class":377}," v-bind(",[328,524,525],{"class":435},"'pFontSizeClass'",[328,527,528],{"class":333},");\n",[328,530,531,534,536,538,541],{"class":330,"line":381},[328,532,533],{"class":516},"  line-height",[328,535,374],{"class":373},[328,537,522],{"class":377},[328,539,540],{"class":435},"'pLineHeightClass'",[328,542,528],{"class":333},[328,544,545,548,550,552,554],{"class":330,"line":387},[328,546,547],{"class":516},"  height",[328,549,374],{"class":373},[328,551,522],{"class":377},[328,553,540],{"class":435},[328,555,528],{"class":333},[328,557,559,562,564,568,572,575,577,579],{"class":330,"line":558},6,[328,560,561],{"class":516},"  margin",[328,563,374],{"class":373},[328,565,567],{"class":566},"s0Ixy"," -0.2",[328,569,571],{"class":570},"sPL9d","ch",[328,573,574],{"class":566}," 0",[328,576,574],{"class":566},[328,578,574],{"class":566},[328,580,581],{"class":333},";\n",[328,583,585,587,589,591],{"class":330,"line":584},7,[328,586,357],{"class":333},[328,588,361],{"class":360},[328,590,364],{"class":360},[328,592,593],{"class":333},"0\n",[328,595,597],{"class":330,"line":596},8,[328,598,384],{"class":333},[328,600,602,604,606],{"class":330,"line":601},9,[328,603,390],{"class":333},[328,605,317],{"class":337},[328,607,344],{"class":333},[12,609,610,611,614,615,617,618,621,622,625,626,625,629,631,632,634],{},"This ",[284,612,613],{},":deep(p)"," selects all p sections within the element of class ",[284,616,503],{},".  The ",[284,619,620],{},"v-bind({variable})"," brings the variables ",[284,623,624],{},"pFontSizeClass",", ",[284,627,628],{},"pLineHeightClass",[284,630,628],{}," to set those css styles programmatically.  The ",[284,633,298],{}," includes tailwind classes.",[272,636,638],{"id":637},"layout","Layout",[12,640,641],{},"The JAMStart pages belong to the Nuxt Layout system. A default layout is applied to all pages that don't contain a custom layout.  This gives all the pages a common structure.",[12,643,644,645,648,649,652,653,406],{},"The ",[284,646,647],{},"NuxtLayout"," system is established in the ",[284,650,651],{},"app\u002Fapp.vue"," file in the ",[284,654,290],{},[320,656,660],{"className":657,"code":658,"language":659,"meta":25,"style":25},"language-html shiki shiki-themes min-light min-dark monokai","  \u003CNuxtLayout>\n    \u003CNuxtPage \u002F>\n  \u003C\u002FNuxtLayout>\n","html",[284,661,662,671,682],{"__ignoreMap":25},[328,663,664,666,669],{"class":330,"line":155},[328,665,424],{"class":333},[328,667,647],{"class":668},"sPLuR",[328,670,344],{"class":333},[328,672,673,676,679],{"class":330,"line":26},[328,674,675],{"class":333},"    \u003C",[328,677,678],{"class":668},"NuxtPage",[328,680,681],{"class":333}," \u002F>\n",[328,683,684,687,689],{"class":330,"line":239},[328,685,686],{"class":333},"  \u003C\u002F",[328,688,647],{"class":668},[328,690,344],{"class":333},[12,692,693,694,697,698,700,701,704],{},"The default page layout is specified in ",[284,695,696],{},"app\u002Flayouts\u002Fdefault.vue"," file inside its ",[284,699,290],{}," section.  The ",[284,702,703],{},"\u003Cslot \u002F>"," element is where the html from the page is injected.",[12,706,485],{},[320,708,710],{"className":657,"code":709,"language":659,"meta":25,"style":25},"\u003Ctemplate>\n  \u003Cdiv class=\"mt-2 mb-2 container mx-auto max-w-4xl\">\n    \u003Cheader class=\"flex justify-between items-start sm:items-center\">\n      \u003Cdiv class=\"flex items-center sm:space-x-12\">\n        \u003Cdiv class=\"hidden sm:block\">\n          \u003CNuxtLink to=\"\u002F\" class=\"text-xl font-semibold p-2 hover:bg-gray-200 dark:hover:bg-gray-800\">JAMStart\u003C\u002FNuxtLink>\n        \u003C\u002Fdiv>\n        \u003CTopMenu \u002F>\n      \u003C\u002Fdiv>\n      \n      \u003CClientOnly>\n        \u003CColorModeSelector \u002F>\n      \u003C\u002FClientOnly>\n    \u003C\u002Fheader>\n    \u003Cmain class=\"p-1 md:p-2 mt-2 md:mt-10 mx-auto\">\n      \u003Cslot \u002F>\n    \u003C\u002Fmain>\n    \u003CFooterMain \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[284,711,712,720,736,752,768,784,814,823,832,841,847,857,867,876,886,903,917,926,936,945],{"__ignoreMap":25},[328,713,714,716,718],{"class":330,"line":155},[328,715,334],{"class":333},[328,717,101],{"class":337},[328,719,344],{"class":333},[328,721,722,724,727,729,731,734],{"class":330,"line":26},[328,723,424],{"class":333},[328,725,726],{"class":337},"div",[328,728,429],{"class":340},[328,730,432],{"class":373},[328,732,733],{"class":435},"\"mt-2 mb-2 container mx-auto max-w-4xl\"",[328,735,344],{"class":333},[328,737,738,740,743,745,747,750],{"class":330,"line":239},[328,739,675],{"class":333},[328,741,742],{"class":337},"header",[328,744,429],{"class":340},[328,746,432],{"class":373},[328,748,749],{"class":435},"\"flex justify-between items-start sm:items-center\"",[328,751,344],{"class":333},[328,753,754,757,759,761,763,766],{"class":330,"line":381},[328,755,756],{"class":333},"      \u003C",[328,758,726],{"class":337},[328,760,429],{"class":340},[328,762,432],{"class":373},[328,764,765],{"class":435},"\"flex items-center sm:space-x-12\"",[328,767,344],{"class":333},[328,769,770,773,775,777,779,782],{"class":330,"line":387},[328,771,772],{"class":333},"        \u003C",[328,774,726],{"class":337},[328,776,429],{"class":340},[328,778,432],{"class":373},[328,780,781],{"class":435},"\"hidden sm:block\"",[328,783,344],{"class":333},[328,785,786,789,792,795,797,800,802,804,807,810,812],{"class":330,"line":558},[328,787,788],{"class":333},"          \u003C",[328,790,791],{"class":668},"NuxtLink",[328,793,794],{"class":340}," to",[328,796,432],{"class":373},[328,798,799],{"class":435},"\"\u002F\"",[328,801,429],{"class":340},[328,803,432],{"class":373},[328,805,806],{"class":435},"\"text-xl font-semibold p-2 hover:bg-gray-200 dark:hover:bg-gray-800\"",[328,808,809],{"class":333},">JAMStart\u003C\u002F",[328,811,791],{"class":668},[328,813,344],{"class":333},[328,815,816,819,821],{"class":330,"line":584},[328,817,818],{"class":333},"        \u003C\u002F",[328,820,726],{"class":337},[328,822,344],{"class":333},[328,824,825,827,830],{"class":330,"line":596},[328,826,772],{"class":333},[328,828,829],{"class":668},"TopMenu",[328,831,681],{"class":333},[328,833,834,837,839],{"class":330,"line":601},[328,835,836],{"class":333},"      \u003C\u002F",[328,838,726],{"class":337},[328,840,344],{"class":333},[328,842,844],{"class":330,"line":843},10,[328,845,846],{"class":333},"      \n",[328,848,850,852,855],{"class":330,"line":849},11,[328,851,756],{"class":333},[328,853,854],{"class":668},"ClientOnly",[328,856,344],{"class":333},[328,858,860,862,865],{"class":330,"line":859},12,[328,861,772],{"class":333},[328,863,864],{"class":668},"ColorModeSelector",[328,866,681],{"class":333},[328,868,870,872,874],{"class":330,"line":869},13,[328,871,836],{"class":333},[328,873,854],{"class":668},[328,875,344],{"class":333},[328,877,879,882,884],{"class":330,"line":878},14,[328,880,881],{"class":333},"    \u003C\u002F",[328,883,742],{"class":337},[328,885,344],{"class":333},[328,887,889,891,894,896,898,901],{"class":330,"line":888},15,[328,890,675],{"class":333},[328,892,893],{"class":337},"main",[328,895,429],{"class":340},[328,897,432],{"class":373},[328,899,900],{"class":435},"\"p-1 md:p-2 mt-2 md:mt-10 mx-auto\"",[328,902,344],{"class":333},[328,904,906,908,911,915],{"class":330,"line":905},16,[328,907,756],{"class":333},[328,909,910],{"class":337},"slot",[328,912,914],{"class":913},"sA23Y"," \u002F",[328,916,344],{"class":333},[328,918,920,922,924],{"class":330,"line":919},17,[328,921,881],{"class":333},[328,923,893],{"class":337},[328,925,344],{"class":333},[328,927,929,931,934],{"class":330,"line":928},18,[328,930,675],{"class":333},[328,932,933],{"class":668},"FooterMain",[328,935,681],{"class":333},[328,937,939,941,943],{"class":330,"line":938},19,[328,940,686],{"class":333},[328,942,726],{"class":337},[328,944,344],{"class":333},[328,946,948,950,952],{"class":330,"line":947},20,[328,949,390],{"class":333},[328,951,101],{"class":337},[328,953,344],{"class":333},[167,955,957],{"id":956},"custom-layouts","Custom Layouts",[12,959,960,961,964,965,968],{},"To create a custom layout create a new layout file, i.e. ",[284,962,963],{},"another.vue"," in the ",[284,966,967],{},"app\u002Flayouts\u002F"," directory.  Then use one of the following three ways:",[970,971,972,998],"ol",{},[175,973,974,977,978,980,981,983,984,987,988,991,992,994,995,997],{},[284,975,976],{},"\u003CNuxtLayout>"," element. Wherever the ",[284,979,976],{}," element is invoked (for JAMStart it is in ",[284,982,651],{},") you can add a property to choose a different layout other than ",[284,985,986],{},"default.vue",".  For example, ",[284,989,990],{},"\u003CNuxtLayout :name=\"another\">\u003C\u002FNuxtLayout>"," would use the ",[284,993,963],{}," instead of ",[284,996,986],{},".",[175,999,1000,1003,1004,1006,1007,1010,1011,1013,1014,1016],{},[284,1001,1002],{},"definePageMeta()"," macro. ",[284,1005,1002],{}," is a compiler macro that you can use to set metadata for any page components located in the ",[284,1008,1009],{},"app\u002Fpages\u002F"," directory, the key ",[284,1012,637],{}," can be used to select a custom layout. For example, to use ",[284,1015,963],{}," layout",[320,1018,1022],{"className":1019,"code":1020,"language":1021,"meta":25,"style":25},"language-js shiki shiki-themes min-light min-dark monokai","definePageMeta({\n  layout: 'another'\n})\n","js",[284,1023,1024,1032,1042],{"__ignoreMap":25},[328,1025,1026,1029],{"class":330,"line":155},[328,1027,1028],{"class":340},"definePageMeta",[328,1030,1031],{"class":333},"({\n",[328,1033,1034,1037,1039],{"class":330,"line":26},[328,1035,1036],{"class":333},"  layout",[328,1038,374],{"class":373},[328,1040,1041],{"class":435}," 'another'\n",[328,1043,1044],{"class":330,"line":239},[328,1045,1046],{"class":333},"})\n",[970,1048,1049],{"start":239},[175,1050,1051,1054,1055,1057,1058,1061,1062,1064],{},[284,1052,1053],{},"setPageLayout()"," composable.  You can dynamically update the layout by using ",[284,1056,1053],{}," composable.  For example, when ",[284,1059,1060],{},"enableCustomLayout()"," is invoked, the ",[284,1063,963],{}," layout is applied to the page.",[320,1066,1068],{"className":1019,"code":1067,"language":1021,"meta":25,"style":25},"function enableCustomLayout () {\n  setPageLayout('another')\n}\n",[284,1069,1070,1082,1096],{"__ignoreMap":25},[328,1071,1072,1076,1079],{"class":330,"line":155},[328,1073,1075],{"class":1074},"s-Tb5","function",[328,1077,1078],{"class":340}," enableCustomLayout",[328,1080,1081],{"class":333}," () {\n",[328,1083,1084,1087,1090,1093],{"class":330,"line":26},[328,1085,1086],{"class":340},"  setPageLayout",[328,1088,1089],{"class":333},"(",[328,1091,1092],{"class":435},"'another'",[328,1094,1095],{"class":333},")\n",[328,1097,1098],{"class":330,"line":239},[328,1099,384],{"class":333},[317,1101,1102],{},"html pre.shiki code .sxUMQ, html code.shiki .sxUMQ{--shiki-default:#24292EFF;--shiki-dark:#B392F0;--shiki-sepia:#F8F8F2}html pre.shiki code .szMGX, html code.shiki .szMGX{--shiki-default:#22863A;--shiki-dark:#FFAB70;--shiki-sepia:#F92672}html pre.shiki code .srTi1, html code.shiki .srTi1{--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-sepia:#A6E22E}html pre.shiki code .sraLd, html code.shiki .sraLd{--shiki-default:#1976D2;--shiki-dark:#79B8FF;--shiki-sepia:#F8F8F2}html pre.shiki code .skixG, html code.shiki .skixG{--shiki-default:#D32F2F;--shiki-dark:#F97583;--shiki-sepia:#F8F8F2}html pre.shiki code .sF6MT, html code.shiki .sF6MT{--shiki-default:#1976D2;--shiki-dark:#F8F8F8;--shiki-sepia:#F8F8F2}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);}html .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html pre.shiki code .shHn5, html code.shiki .shHn5{--shiki-default:#22863A;--shiki-dark:#FFAB70;--shiki-sepia:#E6DB74}html pre.shiki code .sibI6, html code.shiki .sibI6{--shiki-default:#1976D2;--shiki-default-font-style:inherit;--shiki-dark:#79B8FF;--shiki-dark-font-style:inherit;--shiki-sepia:#66D9EF;--shiki-sepia-font-style:italic}html pre.shiki code .s0Ixy, html code.shiki .s0Ixy{--shiki-default:#1976D2;--shiki-dark:#F8F8F8;--shiki-sepia:#AE81FF}html pre.shiki code .sPL9d, html code.shiki .sPL9d{--shiki-default:#D32F2F;--shiki-dark:#F8F8F8;--shiki-sepia:#F92672}html pre.shiki code .sPLuR, html code.shiki .sPLuR{--shiki-default:#22863A;--shiki-dark:#FFAB70;--shiki-sepia:#F44747}html pre.shiki code .sA23Y, html code.shiki .sA23Y{--shiki-default:#24292EFF;--shiki-dark:#B392F0;--shiki-sepia:#F44747}html pre.shiki code .s-Tb5, html code.shiki .s-Tb5{--shiki-default:#D32F2F;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit;--shiki-sepia:#66D9EF;--shiki-sepia-font-style:italic}",{"title":25,"searchDepth":26,"depth":26,"links":1104},[1105,1108],{"id":274,"depth":26,"text":275,"children":1106},[1107],{"id":278,"depth":239,"text":279},{"id":637,"depth":26,"text":638,"children":1109},[1110],{"id":956,"depth":239,"text":957},"how-to","2025-03-10","Developer notes about using the styles, layouts, and navigation of the JAMStart Starter site.","JAMStartSetup",{},"\u002Fprojects\u002Fjamstart\u002Fstyleslayout",{"title":256,"description":1113},{"loc":1116},"projects\u002Fjamstart\u002F6.StylesLayout","Styling","gK62_58Py_zZwO-vDlO_poS4o_KZQ6RfNtEGH3_nfe0",[1123,1281,2479,5296,6484,7661,8611,9245,9992,13653,15092],{"id":1124,"title":1125,"author":7,"body":1126,"content_type":1111,"date_created":1269,"date_modified":1270,"description":1271,"editor":30,"extension":32,"guide":1114,"image":1272,"image_alt":1273,"is_list_exclude":35,"is_manual_image":35,"is_manual_title":35,"is_toc":51,"keywords":30,"meta":1274,"navigation":51,"og_description":30,"og_image":30,"og_image_alt":30,"og_title":30,"path":1275,"peer_order":155,"project":62,"projects":30,"published":54,"seo":1276,"sitemap":1277,"stem":1278,"tagline":1279,"version":30,"x_card":30,"x_creator_handle":30,"x_description":30,"x_image":30,"x_image_alt":30,"x_title":30,"__hash__":1280},"content\u002Fprojects\u002Fjamstart\u002F1.WhatsIncluded.md","Introduction to JAMStart",{"type":9,"value":1127,"toc":1260},[1128,1136,1139,1143,1172,1176,1191,1195,1206,1210,1224,1227,1248,1252],[12,1129,1130,1131,1135],{},"I use JAMStart for a template for my own new static site creation. You can use as a starting point for your own projects, or you can also use it as a means of learning the basics of Nuxt content site web development. All of it is freely shared with the ",[16,1132,1134],{"href":1133},"\u002Flicense","MIT License",". Fork, modify or learn as needed.",[12,1137,1138],{},"\"JAMStart\", is a loose acronym for Javascript, AWS, Markdown, and Static, is a play on the JAMStack, a well-known acronym for JavaScript, APIs, and Markup in web development.",[272,1140,1142],{"id":1141},"features","Features",[970,1144,1145,1148,1151,1154,1157,1160,1163,1166,1169],{},[175,1146,1147],{},"Easy setup",[175,1149,1150],{},"Author a blog post or article in Markdown with front-matter YAML metadata",[175,1152,1153],{},"Automatically your post or article on git commit\u002Fpush",[175,1155,1156],{},"Share the post or article on social media sites with friendly thumbnails and descriptions.",[175,1158,1159],{},"Responsive design with Tailwind CSS for mobile, tablet, and desktop",[175,1161,1162],{},"SEO friendly with Nuxt Meta Tags",[175,1164,1165],{},"Static Site Generation (SSG) with Nuxt.js and NuxtContent.js Markdown",[175,1167,1168],{},"Cookie-free Web Analytics",[175,1170,1171],{},"AWS CICD Pipeline for automatic site hosting",[272,1173,1175],{"id":1174},"structure-overview","Structure Overview",[12,1177,1178,1179,1184,1185,1190],{},"The JAMStart project is structured as a ",[16,1180,1183],{"href":1181,"rel":1182},"https:\u002F\u002Fnuxt.com",[88],"Nuxt.js"," application with ",[16,1186,1189],{"href":1187,"rel":1188},"https:\u002F\u002Fcontent.nuxt.com",[88],"NuxtContent"," for Markdown content authoring. The application is organized into folders where you can author new content in Markdown content or work with the framework custom components and modules.",[272,1192,1194],{"id":1193},"technologies-used","Technologies Used",[172,1196,1197,1200,1203],{},[175,1198,1199],{},"Nuxt.js (Vue.js Framework) - JavaScript",[175,1201,1202],{},"HTML\u002FCSS - Tailwind CSS, Markdown, YAML",[175,1204,1205],{},"Services - GitHub, AWS S3 and CloudFront, Cloudflare Analytics",[167,1207,1209],{"id":1208},"skills-needed","Skills needed",[172,1211,1212,1215,1218,1221],{},[175,1213,1214],{},"Basic understanding of JavaScript",[175,1216,1217],{},"Good understanding of HTML, CSS, Markdown, and web design principles",[175,1219,1220],{},"Good understanding of Git and GitHub",[175,1222,1223],{},"Basic understanding of AWS Services and Console (help provided)",[272,1225,1142],{"id":1226},"features-1",[970,1228,1229,1231,1233,1235,1237,1239,1241,1243,1245],{},[175,1230,1147],{},[175,1232,1150],{},[175,1234,1153],{},[175,1236,1156],{},[175,1238,1159],{},[175,1240,1162],{},[175,1242,1165],{},[175,1244,1168],{},[175,1246,1247],{},"AWS CICD Pipeline for S3 static site hosting",[272,1249,1251],{"id":1250},"thank-you","Thank You!",[12,1253,1254,1255,1259],{},"Thank you for considering JAMStart for your web development needs. I hope it helps you create a fantastic content website quickly and easily. If you have any questions, suggestions, or feedback, please feel free to reach out to me via the contact information provided in the ",[16,1256,1258],{"href":1257},"\u002Fabout","About Me"," page.`",{"title":25,"searchDepth":26,"depth":26,"links":1261},[1262,1263,1264,1267,1268],{"id":1141,"depth":26,"text":1142},{"id":1174,"depth":26,"text":1175},{"id":1193,"depth":26,"text":1194,"children":1265},[1266],{"id":1208,"depth":239,"text":1209},{"id":1226,"depth":26,"text":1142},{"id":1250,"depth":26,"text":1251},"2025-04-08","2025-12-15","A list of pages, custom controls, navigation, and dependencies for JAMStart","\u002Fimages\u002Fprojects\u002FWebsiteParts.jpg","a drawn web page with callouts to different parts",{},"\u002Fprojects\u002Fjamstart\u002Fwhatsincluded",{"title":1125,"description":1271},{"loc":1275},"projects\u002Fjamstart\u002F1.WhatsIncluded","Intro","6jMYYzIHolq13bml3UtjKBEjp2frmXZgLSfM0JxSKkM",{"id":1282,"title":1283,"author":7,"body":1284,"content_type":1111,"date_created":2461,"date_modified":2462,"description":2463,"editor":30,"extension":32,"guide":1114,"image":2464,"image_alt":2465,"is_list_exclude":35,"is_manual_image":35,"is_manual_title":35,"is_toc":51,"keywords":2466,"meta":2472,"navigation":51,"og_description":30,"og_image":30,"og_image_alt":30,"og_title":30,"path":2473,"peer_order":843,"project":62,"projects":30,"published":54,"seo":2474,"sitemap":2475,"stem":2476,"tagline":2477,"version":30,"x_card":30,"x_creator_handle":30,"x_description":30,"x_image":30,"x_image_alt":30,"x_title":30,"__hash__":2478},"content\u002Fprojects\u002Fjamstart\u002F10.BuildDeploy.md","CICD Pipeline - GitHub to S3",{"type":9,"value":1285,"toc":2444},[1286,1292,1296,1299,1303,1306,1374,1378,1386,1390,1397,1401,1404,1482,1489,1495,1554,1558,1572,1575,1578,1585,1588,1678,1685,1689,1692,1785,1789,1796,1800,1803,1807,1810,1821,1824,1834,1836,1843,1848,1865,1875,1877,1883,1887,1890,1915,1918,1929,1933,1936,1947,1950,1954,1957,2019,2021,2025,2028,2031,2091,2095,2200,2204,2212,2316,2320,2326,2376,2380,2383,2386,2390,2393,2396,2404,2408,2411,2415,2418,2441],[12,1287,1288],{},[1289,1290],"binding",{"value":1291},"description",[272,1293,1295],{"id":1294},"why-use-a-cicd-pipeline","Why Use a CICD pipeline?",[12,1297,1298],{},"A Continuous Integration and Continuous Delivery (CICD) system creates stress-free and consistent deployments.  When you are dealing with multiple sites, this consistency is key. The pros and cons of using CICD vs. manual are:",[312,1300,1302],{"id":1301},"why-use-a-cicd-pipeline-1","Why Use a CICD Pipeline?",[12,1304,1305],{},"The main reasons to use a CICD pipeline are:",[970,1307,1308,1316,1333,1347,1355,1366],{},[175,1309,1310,1311],{},"Automation\n",[172,1312,1313],{},[175,1314,1315],{},"once set up, the pipeline will automatically build, stage, and deploy your site whenever changes are pushed to the designated branch in your GitHub repository.",[175,1317,1318,1319],{},"Consistency\n",[172,1320,1321,1324,1327,1330],{},[175,1322,1323],{},"the pipeline ensures that the build and deployment process is consistent and repeatable, reducing the risk of human error.",[175,1325,1326],{},"The Build Machine is fresh, dedicated to building and always on-demand. No chance of update, installation issues, or viruses.",[175,1328,1329],{},"Your source code is pulled fresh from GitHub. No chance of uploading code that hasn't been checked-in.",[175,1331,1332],{},"Your NPM dependencies are always installed anew on each build.",[175,1334,1335,1336],{},"Speed\n",[172,1337,1338,1341,1344],{},[175,1339,1340],{},"the pipeline can significantly speed up the build and deployment process, allowing for faster updates and releases.",[175,1342,1343],{},"Downtime for your web-site is minimal",[175,1345,1346],{},"You can roll-back to previous versions",[175,1348,1349,1350],{},"Version Control Integration\n",[172,1351,1352],{},[175,1353,1354],{},"the pipeline can be integrated with version control systems like GitHub, allowing for automatic builds and deployments triggered by code changes.",[175,1356,1357,1358],{},"Testing and Validation\n",[172,1359,1360,1363],{},[175,1361,1362],{},"the pipeline can include automated testing and validation steps, ensuring that code changes do not introduce bugs or issues.",[175,1364,1365],{},"the CICD can put insert 'approval' checkpoints or stages",[175,1367,1368,1369],{},"Solo Scalability\n",[172,1370,1371],{},[175,1372,1373],{},"the pipeline can easily scale to handle multiple projects deployments. As a solo developer as I scale by creating more than one site, I can use the same pipeline with minor configuration changes.",[312,1375,1377],{"id":1376},"cicd-cons","CICD Cons",[970,1379,1380,1383],{},[175,1381,1382],{},"It costs money. This can be mitigated by using small build machines and unnecessary build times (the main driver of money is how many minutes of build machine time is used.)",[175,1384,1385],{},"CICD errors require 'operational' skill set to locate and fix. On the other hand, you can have similar problems and skill set issues with the manual method as well, so it is usually easier with a CICD than finding out what manual steps you took.",[272,1387,1389],{"id":1388},"cloud-infrastructure","Cloud Infrastructure",[12,1391,1392,1393,1396],{},"A detailed overview and how-to guide on creating the cloud infrastructure required for hosting a Nuxt static site on AWS S3 can be found in the ",[16,1394,1389],{"href":1395},"\u002Fprojects\u002Fcicd\u002Fclouds3static"," article.",[167,1398,1400],{"id":1399},"hosting-buckets","Hosting Buckets",[12,1402,1403],{},"The project uses three S3 buckets to host the different stages of the site.",[1405,1406,1407,1423],"table",{},[1408,1409,1410],"thead",{},[1411,1412,1413,1417,1420],"tr",{},[1414,1415,1416],"th",{},"Environment",[1414,1418,1419],{},"S3 Bucket Name  \u003C=> Subdomain",[1414,1421,1422],{},"Description",[1424,1425,1426,1448,1465],"tbody",{},[1411,1427,1428,1432,1441],{},[1429,1430,1431],"td",{},"Production",[1429,1433,1434,1437,1438],{},[284,1435,1436],{},"yourdomain.com"," \u003C=> ",[284,1439,1440],{},"https:\u002F\u002Fyourdomain.com",[1429,1442,1443,1444,1447],{},"The live production bucket site, works with CloudFront (hence ",[284,1445,1446],{},"https",")",[1411,1449,1450,1453,1462],{},[1429,1451,1452],{},"Staging",[1429,1454,1455,1458,1459],{},[284,1456,1457],{},"stage.yourdomain.com","  \u003C=> ",[284,1460,1461],{},"http:\u002F\u002Fstage.yourdomain.com",[1429,1463,1464],{},"The staging site. Prod builds are first deployed here and then after approval can deploy from stage to prod",[1411,1466,1467,1470,1479],{},[1429,1468,1469],{},"Development",[1429,1471,1472,1475,1476],{},[284,1473,1474],{},"dev.yourdomain.com","    \u003C=> ",[284,1477,1478],{},"http:\u002F\u002Fdev.yourdomain.com",[1429,1480,1481],{},"The development site for local testing in the cloud. Purely for dev and quick test purposes.",[167,1483,1485,1486],{"id":1484},"configuring-packagejson","Configuring ",[284,1487,1488],{},"package.json",[12,1490,1491,1492,1494],{},"Once you have your AWS S3 buckets for prod, stage, and dev and CloudFront for prod, you should replace the placeholders in ",[284,1493,1488],{}," to your infrastructure",[1405,1496,1497,1507],{},[1408,1498,1499],{},[1411,1500,1501,1505],{},[1414,1502,1503],{},[284,1504,1488],{},[1414,1506,1422],{},[1424,1508,1509,1521,1533,1544],{},[1411,1510,1511,1516],{},[1429,1512,1513],{},[284,1514,1515],{},"JMSTprodS3",[1429,1517,1518,1519],{},"Replace with your project production S3 bucket, this will be the same as your Domain Name, e.g., ",[284,1520,1436],{},[1411,1522,1523,1528],{},[1429,1524,1525],{},[284,1526,1527],{},"JMSTdevS3",[1429,1529,1530,1531],{},"Replace with your project staging S3 bucket name, e.g., ",[284,1532,1474],{},[1411,1534,1535,1540],{},[1429,1536,1537],{},[284,1538,1539],{},"JMSTstageS3",[1429,1541,1530,1542],{},[284,1543,1457],{},[1411,1545,1546,1551],{},[1429,1547,1548],{},[284,1549,1550],{},"JMSTCloudFrontId",[1429,1552,1553],{},"Replace with your CloudFront Distribution ID for your production site. This is used to invalidate the CloudFront cache after deployment to prod",[312,1555,1557],{"id":1556},"build-and-deploy-scripts","Build and Deploy Scripts",[12,1559,1560,1561,1563,1564,1567,1568,1571],{},"Within ",[284,1562,1488],{}," file, the ",[284,1565,1566],{},"scripts"," section contains a number of useful build and deploy scripts for managing your JAMStart project deployment to AWS S3. These scripts can be run using ",[284,1569,1570],{},"npm run \u003Cscript-name>"," command.",[12,1573,1574],{},"This scripts assume you have a locally configured AWS CLI with sufficient permissions to access and modify the S3 buckets and CloudFront distribution.",[12,1576,1577],{},"Each project script has a format of",[172,1579,1580],{},[175,1581,1582],{},[284,1583,1584],{},"\u003Caction>:\u003Ctarget>:\u003Coptional target2>",[12,1586,1587],{},"where:",[172,1589,1590,1639],{},[175,1591,1592,1595,1596],{},[284,1593,1594],{},"\u003Caction>"," - what you want to do,\n",[172,1597,1598,1604,1610,1616,1621,1627,1633],{},[175,1599,1600,1603],{},[284,1601,1602],{},"clean",": deletes files at target, single target",[175,1605,1606,1609],{},[284,1607,1608],{},"copy",": copies generated files to target, two targets",[175,1611,1612,1615],{},[284,1613,1614],{},"fix",": fixes S3 hosted files, single target",[175,1617,1618,1620],{},[284,1619,45],{},": copies and fixes generated files for hosting in S3 buckets, two targets",[175,1622,1623,1626],{},[284,1624,1625],{},"diff",": compares sitemaps between two targets, two targets",[175,1628,1629,1632],{},[284,1630,1631],{},"precheck",": generates files, runs tests and diffs sitemap in preparation for deployment (smoke test), single target",[175,1634,1635,1638],{},[284,1636,1637],{},"invalidate",": invalidates CloudFront cache for target, single target",[175,1640,1641,625,1644,1647,1648],{},[284,1642,1643],{},"\u003Ctarget>",[284,1645,1646],{},"\u003Coptional target2>"," - the target buckets\n",[172,1649,1650,1660,1666,1672],{},[175,1651,1652,1655,1656,1659],{},[284,1653,1654],{},"build"," - target is the current build machine, local or cloud, in the ",[284,1657,1658],{},".\u002Foutput\u002Fpublic"," directory, the generated files",[175,1661,1662,1665],{},[284,1663,1664],{},"prod"," - target is related to cloud production environment",[175,1667,1668,1671],{},[284,1669,1670],{},"stage"," - target is in cloud staging environment",[175,1673,1674,1677],{},[284,1675,1676],{},"dev"," - target is in cloud development environment",[12,1679,1680,1681,1684],{},"For example, ",[284,1682,1683],{},"deploy:stage:prod"," means to deploy from the staging S3 bucket to the production S3 bucket.",[312,1686,1688],{"id":1687},"development-to-prod-workflow","Development to Prod Workflow",[12,1690,1691],{},"In a typical deployment to production workflow, you would:",[970,1693,1694,1707,1717,1727,1732,1735,1738,1760,1765,1775],{},[175,1695,1696,1697],{},"Development and test locally using\n",[172,1698,1699],{},[175,1700,1701,181,1704],{},[284,1702,1703],{},"npm run dev",[284,1705,1706],{},"localhost:3000",[175,1708,1709,1710],{},"Generate the static site locally and compare to production using\n",[172,1711,1712],{},[175,1713,1714],{},[284,1715,1716],{},"npm run precheck:prod",[175,1718,1719,1720],{},"Deploy the generated site to the development environment using:\n",[172,1721,1722],{},[175,1723,1724],{},[284,1725,1726],{},"npm run deploy:build:dev",[175,1728,1729,1730],{},"Validate the development site at ",[284,1731,1478],{},[175,1733,1734],{},"Rinse and repeat steps 1-4 until satisfied",[175,1736,1737],{},"Git push your changes to the main branch",[175,1739,1740,1741,1745,1746],{},"The CICD pipeline will ",[1742,1743,1744],"strong",{},"automatically"," build and deploy to staging S3 bucket.\n",[172,1747,1748],{},[175,1749,1750,1751,625,1754,625,1757],{},"Note, if you are not using CICD, you can manually deploy to staging using, ",[284,1752,1753],{},"npm run generate",[284,1755,1756],{},"npm run deploy:build:stage",[284,1758,1759],{},"npm run fix:stage",[175,1761,1762,1763],{},"Validate the prod build at the staging site at ",[284,1764,1461],{},[175,1766,1767,1768],{},"When approved, deploy the staging site code to production (note even though this run manually you are just copying from staging to prod):\n",[172,1769,1770],{},[175,1771,1772],{},[284,1773,1774],{},"npm run deploy:stage:prod",[175,1776,1777,1778],{},"Invalidate the CloudFront cache to ensure the new site is live and any cloud cached files are updated using:\n",[172,1779,1780],{},[175,1781,1782],{},[284,1783,1784],{},"npm run invalidate:prod",[272,1786,1788],{"id":1787},"cicd-pipeline","CICD Pipeline",[12,1790,1791,1792,1396],{},"A detailed overview and hot-to guide on creating a CICD pipeline for building and deploying a Nuxt static site to AWS S3 can be found in the ",[16,1793,1795],{"href":1794},"\u002Fprojects\u002Fcicd\u002Fcicds3static","CICD Pipeline Infrastructure",[272,1797,1799],{"id":1798},"production-pipeline","Production Pipeline",[12,1801,1802],{},"The Prod Pipeline will gather your source from git, build it, and deploy it to production infrastructure.",[167,1804,1806],{"id":1805},"source-build-deploy","Source Build Deploy",[12,1808,1809],{},"The base Build and Deploy pipeline consists of three Stages",[970,1811,1812,1815,1818],{},[175,1813,1814],{},"Source",[175,1816,1817],{},"Build",[175,1819,1820],{},"Deploy",[312,1822,1814],{"id":1823},"source",[12,1825,1826,1827,1829,1830,1833],{},"The source stage will trigger on a 'git push' to the ",[284,1828,893],{}," branch (or whatever git branch you designate). It will copy all the code from GitHub to the AWS CodeBuild Machine. The package from GitHub to AWS Codebuild is called ",[284,1831,1832],{},"SourceArti"," and is stored in CodePipeline S3.",[312,1835,1817],{"id":1654},[12,1837,1838,1839,1842],{},"A CodeBuild EC2 machine is spun up on-demand. It is a ",[284,1840,1841],{},"Linux:g1.small"," machine with Free Tier 100 build minutes a month. For my blog I typically use about 1 1\u002F2 minutes - 2 minutes a build.",[12,1844,644,1845,1847],{},[284,1846,1832],{}," from Source is copied and uncompressed onto the file-system of the CodeBuild EC2 machine.",[12,1849,1850,1851,1854,1855,1858,1859,1861,1862,1864],{},"The CodeBuild machine then follows the phases in the ",[284,1852,1853],{},"buildspec.yml"," file in the root of the repo. It will do the ",[284,1856,1857],{},"npm install"," reading the repo ",[284,1860,1488],{}," file and installing packages directly. It will run the ",[284,1863,1753],{}," command to layout your Nuxt SSG site.",[12,1866,1867,1868,1871,1872,997],{},"If successful, the built files from ",[284,1869,1870],{},"dist"," will be compressed and stored in the CodePipeline S3 bucket as ",[284,1873,1874],{},"BuildArti",[312,1876,1820],{"id":45},[12,1878,1879,1880,1882],{},"The CodeDeploy phase will grab the ",[284,1881,1874],{}," compressed files, decompress and copy the files to your live website S3 bucket.",[167,1884,1886],{"id":1885},"new-codepipeline-steps","New CodePipeline Steps",[12,1888,1889],{},"Important, you should have created a custom domain, prepared an S3 bucket and received a site certificate prior to creating the AWS CodePipeline.",[970,1891,1892,1895,1898,1909,1912],{},[175,1893,1894],{},"Requisition a S3 bucket configured for Static Site Hosting",[175,1896,1897],{},"Requisition a CodePipeline - Git Sync, AWS CodeBuild, Deploy to S3 Bucket",[175,1899,1900,1901],{},"Requisition a Route 53 hosted zone\n",[172,1902,1903,1906],{},[175,1904,1905],{},"Non-certificate (http warning)",[175,1907,1908],{},"CloudFront with certificate (https)",[175,1910,1911],{},"Requisition a CloudFront Distribution",[175,1913,1914],{},"Requisition a https Certificate",[12,1916,1917],{},"Create an AWS CodePipeline that will perform three tasks.",[970,1919,1920,1923,1926],{},[175,1921,1922],{},"Attach and watch a GitHub repo branch for changes",[175,1924,1925],{},"Initiate AWS Codebuild and generate your Nuxt 3 Static Site",[175,1927,1928],{},"Copy the built Nuxt Static Site into your S3 site bucket",[312,1930,1932],{"id":1931},"create-a-codepipeline","Create a CodePipeline",[12,1934,1935],{},"From AWS Console find CodePipeline and choose 'Create'",[172,1937,1938,1941,1944],{},[175,1939,1940],{},"Create a unique name for the pipeline",[175,1942,1943],{},"Choose Queued",[175,1945,1946],{},"Leave the pipeline role",[12,1948,1949],{},"Next",[312,1951,1953],{"id":1952},"pipeline-git-sync","Pipeline Git sync",[12,1955,1956],{},"Choose a stage source",[1405,1958,1959,1969],{},[1408,1960,1961],{},[1411,1962,1963,1966],{},[1414,1964,1965],{},"Field",[1414,1967,1968],{},"State",[1424,1970,1971,1979,1987,1995,2003,2011],{},[1411,1972,1973,1976],{},[1429,1974,1975],{},"Source Provider",[1429,1977,1978],{},"'GitHub (version 2)'",[1411,1980,1981,1984],{},[1429,1982,1983],{},"Connection",[1429,1985,1986],{},"Use existing or choose 'Connect to GitHub'",[1411,1988,1989,1992],{},[1429,1990,1991],{},"Repository name",[1429,1993,1994],{},"(pick your repo)",[1411,1996,1997,2000],{},[1429,1998,1999],{},"Default branch",[1429,2001,2002],{},"(pick your branch)",[1411,2004,2005,2008],{},[1429,2006,2007],{},"Output artifact format",[1429,2009,2010],{},"CodePipeline default",[1411,2012,2013,2016],{},[1429,2014,2015],{},"Trigger - Trigger type",[1429,2017,2018],{},"No filter (launches on push)",[12,2020,1949],{},[312,2022,2024],{"id":2023},"pipeline-codebuild","Pipeline CodeBuild",[12,2026,2027],{},"Build - Optional",[12,2029,2030],{},"Build provider → AWS codeBuild",[1405,2032,2033,2041],{},[1408,2034,2035],{},[1411,2036,2037,2039],{},[1414,2038,1965],{},[1414,2040,1968],{},[1424,2042,2043,2051,2059,2067,2075,2083],{},[1411,2044,2045,2048],{},[1429,2046,2047],{},"Build Provider",[1429,2049,2050],{},"'AWS CodeBuild'",[1411,2052,2053,2056],{},[1429,2054,2055],{},"Region",[1429,2057,2058],{},"(pick your region)",[1411,2060,2061,2064],{},[1429,2062,2063],{},"Input artifacts",[1429,2065,2066],{},"SourceArtifact (from the GitHub sync above)",[1411,2068,2069,2072],{},[1429,2070,2071],{},"Project Name",[1429,2073,2074],{},"(pick your project name or choose 'Create Project')",[1411,2076,2077,2080],{},[1429,2078,2079],{},"Environment variables",[1429,2081,2082],{},"(leave blank or add)",[1411,2084,2085,2088],{},[1429,2086,2087],{},"Build type",[1429,2089,2090],{},"Single build",[312,2092,2094],{"id":2093},"create-build-projects","Create Build Projects",[1405,2096,2097,2105],{},[1408,2098,2099],{},[1411,2100,2101,2103],{},[1414,2102,1965],{},[1414,2104,1968],{},[1424,2106,2107,2115,2123,2131,2139,2147,2155,2163,2174,2182,2190],{},[1411,2108,2109,2112],{},[1429,2110,2111],{},"Project name",[1429,2113,2114],{},"(pick a project name)",[1411,2116,2117,2120],{},[1429,2118,2119],{},"Source 1 - Primary",[1429,2121,2122],{},"Source provider - AWS CodePipeline",[1411,2124,2125,2128],{},[1429,2126,2127],{},"Environment Provisioning model",[1429,2129,2130],{},"On-demand",[1411,2132,2133,2136],{},[1429,2134,2135],{},"Environment image",[1429,2137,2138],{},"Managed image",[1411,2140,2141,2144],{},[1429,2142,2143],{},"Environment Compute",[1429,2145,2146],{},"EC2",[1411,2148,2149,2152],{},[1429,2150,2151],{},"Operating system",[1429,2153,2154],{},"Amazon Linux",[1411,2156,2157,2160],{},[1429,2158,2159],{},"Runtime",[1429,2161,2162],{},"Standard",[1411,2164,2165,2168],{},[1429,2166,2167],{},"Image",[1429,2169,2170,2173],{},[284,2171,2172],{},"aws","\u002Fcodebuild\u002Famazonlinux2-x86_64-standard:5.0",[1411,2175,2176,2179],{},[1429,2177,2178],{},"Image Version",[1429,2180,2181],{},"Always use the latest image for this runtime version",[1411,2183,2184,2187],{},[1429,2185,2186],{},"Buildspec Build specifications",[1429,2188,2189],{},"Use a Buildspec file",[1411,2191,2192,2195],{},[1429,2193,2194],{},"Buildspec name",[1429,2196,2197,2198,1447],{},"(leave blank or ",[284,2199,1853],{},[312,2201,2203],{"id":2202},"pipeline-buildspecyml","Pipeline buildspec.yml",[12,2205,2206,2207,2211],{},"Add the following ",[16,2208,1853],{"href":2209,"rel":2210},"https:\u002F\u002Fdocs.aws.amazon.com\u002Fcodebuild\u002Flatest\u002Fuserguide\u002Fbuild-spec-ref.html",[88]," file to your repo. These are the instructions that will be used to build the Nuxt static site as well as indicating where the built files will exist after build.",[320,2213,2217],{"className":2214,"code":2215,"language":2216,"meta":25,"style":25},"language-yml shiki shiki-themes min-light min-dark monokai","version: 0.2\n\nphases:\n  install:\n    commands:\n      - npm install\n  build:\n    commands:\n      - npm run generate\nartifacts:\n  files:\n    - '**\u002F*'\n  base-directory: 'dist'\n","yml",[284,2218,2219,2229,2234,2242,2249,2256,2264,2271,2277,2284,2291,2298,2306],{"__ignoreMap":25},[328,2220,2221,2224,2226],{"class":330,"line":155},[328,2222,2223],{"class":570},"version",[328,2225,374],{"class":373},[328,2227,2228],{"class":566}," 0.2\n",[328,2230,2231],{"class":330,"line":26},[328,2232,2233],{"emptyLinePlaceholder":51},"\n",[328,2235,2236,2239],{"class":330,"line":239},[328,2237,2238],{"class":570},"phases",[328,2240,2241],{"class":373},":\n",[328,2243,2244,2247],{"class":330,"line":381},[328,2245,2246],{"class":570},"  install",[328,2248,2241],{"class":373},[328,2250,2251,2254],{"class":330,"line":387},[328,2252,2253],{"class":570},"    commands",[328,2255,2241],{"class":373},[328,2257,2258,2261],{"class":330,"line":558},[328,2259,2260],{"class":333},"      - ",[328,2262,2263],{"class":435},"npm install\n",[328,2265,2266,2269],{"class":330,"line":584},[328,2267,2268],{"class":570},"  build",[328,2270,2241],{"class":373},[328,2272,2273,2275],{"class":330,"line":596},[328,2274,2253],{"class":570},[328,2276,2241],{"class":373},[328,2278,2279,2281],{"class":330,"line":601},[328,2280,2260],{"class":333},[328,2282,2283],{"class":435},"npm run generate\n",[328,2285,2286,2289],{"class":330,"line":843},[328,2287,2288],{"class":570},"artifacts",[328,2290,2241],{"class":373},[328,2292,2293,2296],{"class":330,"line":849},[328,2294,2295],{"class":570},"  files",[328,2297,2241],{"class":373},[328,2299,2300,2303],{"class":330,"line":859},[328,2301,2302],{"class":333},"    - ",[328,2304,2305],{"class":435},"'**\u002F*'\n",[328,2307,2308,2311,2313],{"class":330,"line":869},[328,2309,2310],{"class":570},"  base-directory",[328,2312,374],{"class":373},[328,2314,2315],{"class":435}," 'dist'\n",[167,2317,2319],{"id":2318},"aws-codedeploy","AWS CodeDeploy",[12,2321,2322,2323,2325],{},"The third stage of the pipeline, ",[284,2324,45],{},", copies the built files to the S3 website bucket",[1405,2327,2328,2336],{},[1408,2329,2330],{},[1411,2331,2332,2334],{},[1414,2333,1965],{},[1414,2335,1968],{},[1424,2337,2338,2346,2353,2360,2368],{},[1411,2339,2340,2343],{},[1429,2341,2342],{},"Deploy provider",[1429,2344,2345],{},"'Amazon S3'",[1411,2347,2348,2350],{},[1429,2349,2055],{},[1429,2351,2352],{},"(pick your Region, same as build)",[1411,2354,2355,2357],{},[1429,2356,2063],{},[1429,2358,2359],{},"'BuildArtifact'",[1411,2361,2362,2365],{},[1429,2363,2364],{},"Bucket",[1429,2366,2367],{},"(pick your bucket)",[1411,2369,2370,2373],{},[1429,2371,2372],{},"Extract file before deploy",[1429,2374,2375],{},"enabled",[312,2377,2379],{"id":2378},"verify","Verify",[12,2381,2382],{},"If all your steps are correct, your code pipeline should run. You should validate by opening the website at the S3 bucket website endpoint.",[12,2384,2385],{},"S3 → {static site bucket} → properties → Static website hosting | Bucket website endpoint",[272,2387,2389],{"id":2388},"dev-infrastructure-optional","Dev Infrastructure (optional)",[12,2391,2392],{},"The Dev (Development) Infrastructure consists of cloud resources that host your development web site - for testing and validation before deployment. A dev infrastructure and pipeline are optional and may or may not be implemented for your site needs. A content heavy site with multiple proofreaders, editors, or authors, might want a dev infrastructure to view the web site before deployment to production. A solo author might be fine will validating the site locally and skip the dev infrastructure.",[12,2394,2395],{},"Recommended Resources",[970,2397,2398,2401],{},[175,2399,2400],{},"AWS Route53 Hosted zone",[175,2402,2403],{},"AWS S3 Bucket",[272,2405,2407],{"id":2406},"dev-pipeline-optional","Dev Pipeline (optional)",[12,2409,2410],{},"A Developer Pipeline is used to host your site for testing before deploying to prod",[272,2412,2414],{"id":2413},"resources","Resources",[12,2416,2417],{},"The following videos illustrate many of the steps used here:",[172,2419,2420,2427,2434],{},[175,2421,2422],{},[16,2423,2426],{"href":2424,"rel":2425},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=X9cdkqBgLbs",[88],"Amazon S3 - Static Website Hosting with Custom Domain and TLS by Bryan Krausen",[175,2428,2429],{},[16,2430,2433],{"href":2431,"rel":2432},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=jZrfiPW58k8&ab_channel=DevSpot",[88],"AWS CodePipeline CI\u002FCD by DevSpot",[175,2435,2436],{},[16,2437,2440],{"href":2438,"rel":2439},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=JRZiQFVWpi8&ab_channel=TinyTechnicalTutorials",[88],"Amazon Route 53 Basics Tutorial | Domain Registration, A Records, CNAME Records, Aliases, Subdomains by Tiny Technical Tutorials",[317,2442,2443],{},"html pre.shiki code .sPL9d, html code.shiki .sPL9d{--shiki-default:#D32F2F;--shiki-dark:#F8F8F8;--shiki-sepia:#F92672}html pre.shiki code .skixG, html code.shiki .skixG{--shiki-default:#D32F2F;--shiki-dark:#F97583;--shiki-sepia:#F8F8F2}html pre.shiki code .s0Ixy, html code.shiki .s0Ixy{--shiki-default:#1976D2;--shiki-dark:#F8F8F8;--shiki-sepia:#AE81FF}html pre.shiki code .sxUMQ, html code.shiki .sxUMQ{--shiki-default:#24292EFF;--shiki-dark:#B392F0;--shiki-sepia:#F8F8F2}html pre.shiki code .shHn5, html code.shiki .shHn5{--shiki-default:#22863A;--shiki-dark:#FFAB70;--shiki-sepia:#E6DB74}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);}html .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}",{"title":25,"searchDepth":26,"depth":26,"links":2445},[2446,2447,2452,2453,2458,2459,2460],{"id":1294,"depth":26,"text":1295},{"id":1388,"depth":26,"text":1389,"children":2448},[2449,2450],{"id":1399,"depth":239,"text":1400},{"id":1484,"depth":239,"text":2451},"Configuring package.json",{"id":1787,"depth":26,"text":1788},{"id":1798,"depth":26,"text":1799,"children":2454},[2455,2456,2457],{"id":1805,"depth":239,"text":1806},{"id":1885,"depth":239,"text":1886},{"id":2318,"depth":239,"text":2319},{"id":2388,"depth":26,"text":2389},{"id":2406,"depth":26,"text":2407},{"id":2413,"depth":26,"text":2414},"2023-09-13","2025-06-10","How to use AWS infrastructure to create a git push CI\u002FCD pipeline for a Nuxt 3 Static website built and deployed to a AWS S3 bucket with a fully qualified custom domain name","\u002Fimages\u002Fprojects\u002FGitHubAWSCodePipeline.jpg","GitHub logo and AWS CodePipeline Logos",[2467,37,2468,2469,2470,41,2471],"Ops_Pipeline","SSG","CDN","Ops_Build","GitHub",{},"\u002Fprojects\u002Fjamstart\u002Fbuilddeploy",{"title":1283,"description":2463},{"loc":2473},"projects\u002Fjamstart\u002F10.BuildDeploy","Deploy Host","DLfdRhOIj4m-WOiUWJbeDVuXRxhlYgAHIe_CY7BQIME",{"id":2480,"title":2481,"author":7,"body":2482,"content_type":1111,"date_created":5282,"date_modified":30,"description":5283,"editor":30,"extension":32,"guide":1114,"image":5284,"image_alt":5285,"is_list_exclude":35,"is_manual_image":35,"is_manual_title":35,"is_toc":51,"keywords":5286,"meta":5288,"navigation":51,"og_description":30,"og_image":30,"og_image_alt":30,"og_title":30,"path":5290,"peer_order":26,"project":62,"projects":30,"published":54,"seo":5291,"sitemap":5292,"stem":5293,"tagline":5294,"version":30,"x_card":30,"x_creator_handle":30,"x_description":30,"x_image":30,"x_image_alt":30,"x_title":30,"__hash__":5295},"content\u002Fprojects\u002Fjamstart\u002F2.CopyClone.md","Project Setup",{"type":9,"value":2483,"toc":5258},[2484,2487,2501,2505,2508,2511,2520,2524,2544,2548,2555,2661,2665,2675,3097,3101,3104,3108,3111,3155,3161,3170,3174,3258,3266,3270,3283,3335,3341,3347,3356,3432,3437,3443,3447,3461,3750,3764,3812,3816,3834,3841,3916,3924,4043,4060,4112,4116,4134,4204,4348,4366,4536,4540,4547,4634,4638,4647,4651,4660,4666,4669,4677,4683,4703,4731,4741,4763,4769,4789,4830,4837,4851,4961,4968,4982,4986,5010,5173,5177,5180,5183,5206,5209,5237,5240,5252,5255],[12,2485,2486],{},"The initial setup steps to create a new project using JAMStart are:",[970,2488,2489,2492,2495,2498],{},[175,2490,2491],{},"Choose a project name and domain name",[175,2493,2494],{},"Start the new project by cloning JAMStart repo",[175,2496,2497],{},"Update your Project to your requirements, replacing all the placeholder names and values with your project specific information.",[175,2499,2500],{},"Become familiar with built-in NPM dependencies",[167,2502,2504],{"id":2503},"philosophy","Philosophy",[12,2506,2507],{},"JAMStart is not meant to be an evergreen foundation layer for your web sites. Instead is a quick starting point for creating the scaffolding and framework for a new Nuxt Markdown static site. No need to 'synch' to the JAMStart repo later. You own your code going forward, warts 😦 and wonders 😍 both.",[272,2509,2071],{"id":2510},"project-name",[12,2512,2513,2514,625,2516,2519],{},"You should decide on your project name early. The project name that will be used in your git repo, the ",[284,2515,1488],{},[284,2517,2518],{},"README.md",", and other places in the code. It should be a short, memorable name that reflects the purpose of your project, ideally you want it to be unique and available as a domain name as well.",[167,2521,2523],{"id":2522},"project-domain-name","Project Domain Name",[12,2525,2526,2527,2530,2531,181,2534,2537,2538,2543],{},"You should also obtain your project web domain early. The domain name is the web address that users will use to access your site. Further you will want to create unique email names based on that domain to service each site. If you obtain the ",[284,2528,2529],{},"foobar.biz"," domain name, you will want to create email accounts like ",[284,2532,2533],{},"info@foobar.biz",[284,2535,2536],{},"help@foobar.biz",", etc.  It should be easy to remember, spell, and type. While you can use any domain registrar to purchase a domain name, I recommend using ",[16,2539,2542],{"href":2540,"rel":2541,"target":191},"https:\u002F\u002Faws.amazon.com\u002Froute53\u002F",[88],"AWS Route 53"," since the JAMStart project will discuss how to build, deploy, host, and manage your site on AWS as well and having it already in Route 53 makes it easier. If you don't have an AWS account, you should create one.  If you already have a domain from somewhere else, you should transfer it into Route 53 as well.",[272,2545,2547],{"id":2546},"clone-start","Clone Start",[12,2549,2550,2551,2554],{},"In the following steps, ",[284,2552,2553],{},"NewProject"," is the name of your new repo but you would substitute your real project name instead.",[970,2556,2557,2574,2592,2606,2620,2639,2651],{},[175,2558,2559,2560,2562,2563],{},"Create ",[284,2561,2553],{}," repo at GitHub, GitLab, BitBucket, etc.\n",[172,2564,2565,2568],{},[175,2566,2567],{},"do not create any files, READMEs, etc.  Leave blank.",[175,2569,2570,2571],{},"collect your new repo url to your repo  => ",[284,2572,2573],{},"\u003CNewProject git_url>",[175,2575,2576,2577],{},"Clone from the JAMStart repo\n",[172,2578,2579],{},[175,2580,2581,2584],{},[284,2582,2583],{},"git clone https:\u002F\u002Fgithub.com\u002FPennockProjects\u002FJAMStart.git {NewProject DirName}",[172,2585,2586],{},[175,2587,2588,2589,2591],{},"the ",[284,2590,2553],{}," directory, will get created during this step.",[175,2593,2594,2595,2598,2599],{},"Change into your ",[284,2596,2597],{},"{NewProject DirName}"," directory\n",[172,2600,2601],{},[175,2602,2603],{},[284,2604,2605],{},"cd {NewProject DirName}",[175,2607,2608,2609],{},"Install Dependencies\n",[172,2610,2611],{},[175,2612,2613,2615,2616,2619],{},[284,2614,1857],{}," or ",[284,2617,2618],{},"yarn install"," depending on your package manager",[175,2621,2622,2623],{},"Run the project locally to verify it works\n",[172,2624,2625,2632],{},[175,2626,2627,2615,2629],{},[284,2628,1703],{},[284,2630,2631],{},"yarn dev",[175,2633,2634,2635,2638],{},"open browser to ",[284,2636,2637],{},"http:\u002F\u002Flocalhost:3000"," to verify it works",[175,2640,2641,2642,2644],{},"Set your remote to your ",[284,2643,2573],{},[172,2645,2646],{},[175,2647,2648],{},[284,2649,2650],{},"git remote set-url origin \u003CNewProject git_url>",[175,2652,2653,2654],{},"Push it\n",[172,2655,2656],{},[175,2657,2658],{},[284,2659,2660],{},"git push",[167,2662,2664],{"id":2663},"example","Example",[12,2666,2667,2668,2671,2672],{},"As an example, here is the command-line for how I did this for a new Repo called ",[284,2669,2670],{},"TestCloneCopy",".   The GitHub url I created looked like this ",[284,2673,2674],{},"https:\u002F\u002Fgithub.com\u002FPennockProjects\u002FTestCloneCopy.git",[320,2676,2680],{"className":2677,"code":2678,"language":2679,"meta":25,"style":25},"language-bash shiki shiki-themes min-light min-dark monokai","PS C:\\dev> git clone https:\u002F\u002Fgithub.com\u002FPennockProjects\u002FJAMStart.git TestCloneCopy    \nCloning into 'TestCloneCopy'...\nremote: Enumerating objects: 668, done.\nremote: Counting objects: 100% (668\u002F668), done.\nremote: Compressing objects: 100% (329\u002F329), done.\nremote: Total 668 (delta 323), reused 653 (delta 311), pack-reused 0 (from 0)\nReceiving objects: 100% (668\u002F668), 7.97 MiB | 10.13 MiB\u002Fs, done.\nResolving deltas: 100% (323\u002F323), done.\nPS C:\\dev> cd .\\TestCloneCopy\\\nPS C:\\dev\\TestCloneCopy> git remote set-url origin https:\u002F\u002Fgithub.com\u002FPennockProjects\u002FTestCloneCopy.git\nPS C:\\dev\\TestCloneCopy> git push\nEnumerating objects: 668, done.\nCounting objects: 100% (668\u002F668), done.\nDelta compression using up to 8 threads.\nCompressing objects: 100% (317\u002F317), done.\nWriting objects: 100% (668\u002F668), 7.97 MiB | 3.27 MiB\u002Fs, done.\nTotal 668 (delta 323), reused 668 (delta 323)\nremote: Resolving deltas: 100% (323\u002F323), done.\nTo https:\u002F\u002Fgithub.com\u002FPennockProjects\u002FTestCloneCopy.git\n * [new branch]      main -> main\nPS C:\\dev\\TestCloneCopy> \n","bash",[284,2681,2682,2720,2734,2751,2766,2780,2815,2838,2851,2880,2917,2940,2951,2962,2984,2996,3016,3037,3050,3057,3078],{"__ignoreMap":25},[328,2683,2684,2687,2691,2695,2698,2701,2705,2708,2711,2714,2717],{"class":330,"line":155},[328,2685,2686],{"class":340},"PS",[328,2688,2690],{"class":2689},"sCqw6"," C:",[328,2692,2694],{"class":2693},"sPj-R","\\d",[328,2696,2697],{"class":2689},"e",[328,2699,2700],{"class":333},"v",[328,2702,2704],{"class":2703},"s-2sM",">",[328,2706,2707],{"class":2689}," git",[328,2709,2710],{"class":2689}," clone",[328,2712,2713],{"class":2689}," https:\u002F\u002Fgithub.com\u002FPennockProjects\u002FJAMStart.git",[328,2715,2716],{"class":2689}," TestCloneCopy",[328,2718,2719],{"class":333},"    \n",[328,2721,2722,2725,2728,2731],{"class":330,"line":26},[328,2723,2724],{"class":340},"Cloning",[328,2726,2727],{"class":2689}," into",[328,2729,2730],{"class":435}," 'TestCloneCopy'",[328,2732,2733],{"class":2689},"...\n",[328,2735,2736,2739,2742,2745,2748],{"class":330,"line":239},[328,2737,2738],{"class":340},"remote:",[328,2740,2741],{"class":2689}," Enumerating",[328,2743,2744],{"class":2689}," objects:",[328,2746,2747],{"class":2689}," 668,",[328,2749,2750],{"class":2689}," done.\n",[328,2752,2753,2755,2758,2760,2763],{"class":330,"line":381},[328,2754,2738],{"class":340},[328,2756,2757],{"class":2689}," Counting",[328,2759,2744],{"class":2689},[328,2761,2762],{"class":2689}," 100%",[328,2764,2765],{"class":333}," (668\u002F668), done.\n",[328,2767,2768,2770,2773,2775,2777],{"class":330,"line":387},[328,2769,2738],{"class":340},[328,2771,2772],{"class":2689}," Compressing",[328,2774,2744],{"class":2689},[328,2776,2762],{"class":2689},[328,2778,2779],{"class":333}," (329\u002F329), done.\n",[328,2781,2782,2784,2787,2790,2793,2796,2799,2802,2805,2808,2811,2813],{"class":330,"line":558},[328,2783,2738],{"class":340},[328,2785,2786],{"class":2689}," Total",[328,2788,2789],{"class":566}," 668",[328,2791,2792],{"class":333}," (delta ",[328,2794,2795],{"class":566},"323",[328,2797,2798],{"class":333},"), reused 653 (",[328,2800,2801],{"class":340},"delta",[328,2803,2804],{"class":566}," 311",[328,2806,2807],{"class":333},"), pack-reused 0 (",[328,2809,2810],{"class":340},"from",[328,2812,574],{"class":566},[328,2814,1095],{"class":333},[328,2816,2817,2820,2822,2824,2827,2830,2833,2836],{"class":330,"line":584},[328,2818,2819],{"class":340},"Receiving",[328,2821,2744],{"class":2689},[328,2823,2762],{"class":2689},[328,2825,2826],{"class":333}," (668\u002F668), 7.97 MiB ",[328,2828,2829],{"class":2703},"|",[328,2831,2832],{"class":340}," 10.13",[328,2834,2835],{"class":2689}," MiB\u002Fs,",[328,2837,2750],{"class":2689},[328,2839,2840,2843,2846,2848],{"class":330,"line":596},[328,2841,2842],{"class":340},"Resolving",[328,2844,2845],{"class":2689}," deltas:",[328,2847,2762],{"class":2689},[328,2849,2850],{"class":333}," (323\u002F323), done.\n",[328,2852,2853,2855,2857,2859,2861,2863,2865,2868,2871,2874,2877],{"class":330,"line":601},[328,2854,2686],{"class":340},[328,2856,2690],{"class":2689},[328,2858,2694],{"class":2693},[328,2860,2697],{"class":2689},[328,2862,2700],{"class":333},[328,2864,2704],{"class":2703},[328,2866,2867],{"class":2689}," cd",[328,2869,2870],{"class":2689}," .",[328,2872,2873],{"class":2693},"\\T",[328,2875,2876],{"class":2689},"estCloneCopy",[328,2878,2879],{"class":2693},"\\\n",[328,2881,2882,2885,2888,2890,2893,2895,2898,2901,2903,2905,2908,2911,2914],{"class":330,"line":843},[328,2883,2884],{"class":333},"PS ",[328,2886,2887],{"class":2689},"C:",[328,2889,2694],{"class":2693},[328,2891,2892],{"class":2689},"ev",[328,2894,2873],{"class":2693},[328,2896,2897],{"class":2689},"estCloneCop",[328,2899,2900],{"class":333},"y",[328,2902,2704],{"class":2703},[328,2904,2707],{"class":2689},[328,2906,2907],{"class":2689}," remote",[328,2909,2910],{"class":2689}," set-url",[328,2912,2913],{"class":2689}," origin",[328,2915,2916],{"class":2689}," https:\u002F\u002Fgithub.com\u002FPennockProjects\u002FTestCloneCopy.git\n",[328,2918,2919,2921,2923,2925,2927,2929,2931,2933,2935,2937],{"class":330,"line":849},[328,2920,2686],{"class":340},[328,2922,2690],{"class":2689},[328,2924,2694],{"class":2693},[328,2926,2892],{"class":2689},[328,2928,2873],{"class":2693},[328,2930,2897],{"class":2689},[328,2932,2900],{"class":333},[328,2934,2704],{"class":2703},[328,2936,2707],{"class":2689},[328,2938,2939],{"class":2689}," push\n",[328,2941,2942,2945,2947,2949],{"class":330,"line":859},[328,2943,2944],{"class":340},"Enumerating",[328,2946,2744],{"class":2689},[328,2948,2747],{"class":2689},[328,2950,2750],{"class":2689},[328,2952,2953,2956,2958,2960],{"class":330,"line":869},[328,2954,2955],{"class":340},"Counting",[328,2957,2744],{"class":2689},[328,2959,2762],{"class":2689},[328,2961,2765],{"class":333},[328,2963,2964,2967,2970,2973,2976,2978,2981],{"class":330,"line":878},[328,2965,2966],{"class":340},"Delta",[328,2968,2969],{"class":2689}," compression",[328,2971,2972],{"class":2689}," using",[328,2974,2975],{"class":2689}," up",[328,2977,794],{"class":2689},[328,2979,2980],{"class":566}," 8",[328,2982,2983],{"class":2689}," threads.\n",[328,2985,2986,2989,2991,2993],{"class":330,"line":888},[328,2987,2988],{"class":340},"Compressing",[328,2990,2744],{"class":2689},[328,2992,2762],{"class":2689},[328,2994,2995],{"class":333}," (317\u002F317), done.\n",[328,2997,2998,3001,3003,3005,3007,3009,3012,3014],{"class":330,"line":905},[328,2999,3000],{"class":340},"Writing",[328,3002,2744],{"class":2689},[328,3004,2762],{"class":2689},[328,3006,2826],{"class":333},[328,3008,2829],{"class":2703},[328,3010,3011],{"class":340}," 3.27",[328,3013,2835],{"class":2689},[328,3015,2750],{"class":2689},[328,3017,3018,3021,3023,3025,3027,3030,3032,3035],{"class":330,"line":919},[328,3019,3020],{"class":340},"Total",[328,3022,2789],{"class":566},[328,3024,2792],{"class":333},[328,3026,2795],{"class":566},[328,3028,3029],{"class":333},"), reused 668 (",[328,3031,2801],{"class":340},[328,3033,3034],{"class":566}," 323",[328,3036,1095],{"class":333},[328,3038,3039,3041,3044,3046,3048],{"class":330,"line":928},[328,3040,2738],{"class":340},[328,3042,3043],{"class":2689}," Resolving",[328,3045,2845],{"class":2689},[328,3047,2762],{"class":2689},[328,3049,2850],{"class":333},[328,3051,3052,3055],{"class":330,"line":938},[328,3053,3054],{"class":340},"To",[328,3056,2916],{"class":2689},[328,3058,3059,3062,3065,3068,3071,3073,3075],{"class":330,"line":947},[328,3060,3061],{"class":340}," *",[328,3063,3064],{"class":333}," [new ",[328,3066,3067],{"class":2689},"branch]",[328,3069,3070],{"class":2689},"      main",[328,3072,217],{"class":333},[328,3074,2704],{"class":2703},[328,3076,3077],{"class":2689}," main\n",[328,3079,3081,3083,3085,3087,3089,3091,3093,3095],{"class":330,"line":3080},21,[328,3082,2686],{"class":340},[328,3084,2690],{"class":2689},[328,3086,2694],{"class":2693},[328,3088,2892],{"class":2689},[328,3090,2873],{"class":2693},[328,3092,2897],{"class":2689},[328,3094,2900],{"class":333},[328,3096,344],{"class":2703},[272,3098,3100],{"id":3099},"customize-your-project","Customize Your Project",[12,3102,3103],{},"Now that you have cloned the repo, you should update the placeholder names, such as a project name, copyright year, etc. to reflect your new project.",[167,3105,3107],{"id":3106},"global","Global",[12,3109,3110],{},"This placeholders are found in various files throughout the project.  They should be updated using a global find and replace in your text editor or IDE.  You can go through them manually, but a global find and replace is much faster.",[1405,3112,3113,3128],{},[1408,3114,3115],{},[1411,3116,3117,3120,3122,3125],{},[1414,3118,3119],{},"Placeholder",[1414,3121,1422],{},[1414,3123,3124],{},"Files",[1414,3126,3127],{},"Method of Change",[1424,3129,3130,3143],{},[1411,3131,3132,3134,3137,3140],{},[1429,3133,62],{},[1429,3135,3136],{},"Your new Project Name in PascalCase",[1429,3138,3139],{},"various",[1429,3141,3142],{},"global find and replace",[1411,3144,3145,3148,3151,3153],{},[1429,3146,3147],{},"jamstart",[1429,3149,3150],{},"Your new project name in lowercase",[1429,3152,3139],{},[1429,3154,3142],{},[167,3156,3158,3160],{"id":3157},"packagejson-file",[284,3159,1488],{}," file",[12,3162,3163,3164,3166,3167,3169],{},"Now that you have cloned the repo, you should update the ",[284,3165,1488],{}," file in the root of your repo to reflect your new project.  Typically, I keep my ",[284,3168,1488],{}," file simple since most of my content sites are held in private repos and not published to NPM.  At a minimum, you should update the following fields:",[312,3171,3173],{"id":3172},"description-fields","Description Fields",[1405,3175,3176,3185],{},[1408,3177,3178],{},[1411,3179,3180,3183],{},[1414,3181,3182],{},"JSON Field",[1414,3184,1422],{},[1424,3186,3187,3195,3202,3209,3223,3231,3242,3250],{},[1411,3188,3189,3192],{},[1429,3190,3191],{},"name",[1429,3193,3194],{},"Name of the package, all lowercase",[1411,3196,3197,3199],{},[1429,3198,2223],{},[1429,3200,3201],{},"Version of the package",[1411,3203,3204,3206],{},[1429,3205,1291],{},[1429,3207,3208],{},"Short description of the package",[1411,3210,3211,3214],{},[1429,3212,3213],{},"license",[1429,3215,3216,3217,2615,3220],{},"License type for the package, e.g. ",[284,3218,3219],{},"MIT",[284,3221,3222],{},"UNLICENSED",[1411,3224,3225,3228],{},[1429,3226,3227],{},"homepage",[1429,3229,3230],{},"URL of the project homepage",[1411,3232,3233,3236],{},[1429,3234,3235],{},"repository",[1429,3237,3238,3239,3241],{},"Repository URL (use",[284,3240,2573],{}," ) from your git project creation",[1411,3243,3244,3247],{},[1429,3245,3246],{},"author",[1429,3248,3249],{},"Replace with the Author of the package",[1411,3251,3252,3255],{},[1429,3253,3254],{},"keywords",[1429,3256,3257],{},"Keywords for package discovery",[12,3259,3260,3261,3265],{},"See ",[16,3262,3264],{"href":3263},"\u002Fcheats\u002Fnpm#common-fields-to-update","Cheat sheet: NPM package.json"," for more details on each field and an example to use.",[312,3267,3269],{"id":3268},"project-scripts","Project Scripts",[12,3271,3272,3273,3275,3276,3278,3279,3282],{},"In the ",[284,3274,1566],{}," section of the ",[284,3277,1488],{}," file, there are some project specific scripts that have placeholders that you you will need to update, although it is probably best to wait to replace them during the ",[16,3280,3281],{"href":2473},"Build Deploy Pipeline"," setup.  The placeholders to replace are:",[1405,3284,3285,3294],{},[1408,3286,3287],{},[1411,3288,3289,3292],{},[1414,3290,3291],{},"Scripts Placeholder",[1414,3293,1422],{},[1424,3295,3296,3306,3316,3326],{},[1411,3297,3298,3302],{},[1429,3299,3300],{},[284,3301,1515],{},[1429,3303,1518,3304],{},[284,3305,1436],{},[1411,3307,3308,3312],{},[1429,3309,3310],{},[284,3311,1527],{},[1429,3313,1530,3314],{},[284,3315,1474],{},[1411,3317,3318,3322],{},[1429,3319,3320],{},[284,3321,1539],{},[1429,3323,1530,3324],{},[284,3325,1457],{},[1411,3327,3328,3332],{},[1429,3329,3330],{},[284,3331,1550],{},[1429,3333,3334],{},"Replace with your CloudFront Distribution ID for your production site. This is used to invalidate the CloudFront cache after deployment to prod.",[167,3336,3338,3160],{"id":3337},"nuxtconfigts-file",[284,3339,3340],{},"nuxt.config.ts",[12,3342,3343,3344,3346],{},"There are several placeholders in the ",[284,3345,3340],{}," file that you should be updated to reflect your new project.",[12,3348,644,3349,181,3352,3355],{},[284,3350,3351],{},"site",[284,3353,3354],{},"socialShare"," sections should be updated to reflect your new project URL and name.  These are used for SEO and social sharing metadata.",[320,3357,3361],{"className":3358,"code":3359,"language":3360,"meta":25,"style":25},"language-ts shiki shiki-themes min-light min-dark monokai","  site: { \n    url: 'https:\u002F\u002FJMSTprodURL',\n    name: 'JMSTprodName'\n  },\n\n  socialShare: {\n    baseUrl: 'https:\u002F\u002FJMSTprodURL'\n  }\n","ts",[284,3362,3363,3374,3387,3397,3404,3408,3417,3427],{"__ignoreMap":25},[328,3364,3365,3368,3371],{"class":330,"line":155},[328,3366,3367],{"class":333},"  site",[328,3369,374],{"class":3370},"sizxJ",[328,3372,3373],{"class":333}," { \n",[328,3375,3376,3379,3381,3384],{"class":330,"line":26},[328,3377,3378],{"class":333},"    url",[328,3380,374],{"class":3370},[328,3382,3383],{"class":435}," 'https:\u002F\u002FJMSTprodURL'",[328,3385,3386],{"class":3370},",\n",[328,3388,3389,3392,3394],{"class":330,"line":239},[328,3390,3391],{"class":333},"    name",[328,3393,374],{"class":3370},[328,3395,3396],{"class":435}," 'JMSTprodName'\n",[328,3398,3399,3402],{"class":330,"line":381},[328,3400,3401],{"class":333},"  }",[328,3403,3386],{"class":3370},[328,3405,3406],{"class":330,"line":387},[328,3407,2233],{"emptyLinePlaceholder":51},[328,3409,3410,3413,3415],{"class":330,"line":558},[328,3411,3412],{"class":333},"  socialShare",[328,3414,374],{"class":3370},[328,3416,352],{"class":333},[328,3418,3419,3422,3424],{"class":330,"line":584},[328,3420,3421],{"class":333},"    baseUrl",[328,3423,374],{"class":3370},[328,3425,3426],{"class":435}," 'https:\u002F\u002FJMSTprodURL'\n",[328,3428,3429],{"class":330,"line":596},[328,3430,3431],{"class":333},"  }\n",[167,3433,3435,3160],{"id":3434},"readmemd-file",[284,3436,2518],{},[12,3438,3439,3440,3442],{},"Replace the contents of ",[284,3441,2518],{}," with your new project information.",[167,3444,3446],{"id":3445},"seo-and-metadata","SEO and Metadata",[12,3448,3272,3449,3452,3453,3456,3457,3460],{},[284,3450,3451],{},"app.vue"," file, there are several placeholders that you should be updated to reflect your new project.  You should replace all the placeholders in the ",[284,3454,3455],{},"metaDefaults"," object that have ",[284,3458,3459],{},"JMST"," in the name.  This variable is used to set the default SEO and social sharing metadata for your site.",[320,3462,3464],{"className":1019,"code":3463,"language":1021,"meta":25,"style":25},"const metaDefaults = {\n  isProdEnv: process.env.NODE_ENV === \"production\",\n  siteName: 'JAMStart',\n  title: 'JMSTseoTitle',\n  description: 'JMSTseoDescription',\n  author: 'JMSTseoAuthor',\n  creator: 'JMSTseoCreator',\n  rootUrl: \"https:\u002F\u002FJMSTsiteURL.com\",\n  robots: 'index, follow',\n  copyright: '© [JMSTcopyrightYears] [JMSTcopyrightName]',\n  ogType: 'article',\n  imageRoot: '\u002Fimages',\n  image2x1: '\u002Fimages\u002FJMSTimage2x1.jpg',\n  image2x1Width: 1200,\n  image2x1Height: 600,\n  image1x1: '\u002Fimages\u002FJMSTimage1x1.png',\n  image1x1Width: 1024,\n  image1x1Height: 1024,\n  image_alt: 'JMSTsocialShareimage_alt',\n  twitterCard: 'summary_large_image',\n  twitterSiteHandle: '@JMSTsiteHandleX',\n  twitterCreatorHandle: '@JMSTcreateHandleX'\n}\n",[284,3465,3466,3479,3507,3519,3531,3543,3555,3567,3579,3591,3603,3615,3627,3639,3651,3663,3675,3687,3698,3710,3722,3734,3745],{"__ignoreMap":25},[328,3467,3468,3471,3474,3477],{"class":330,"line":155},[328,3469,3470],{"class":1074},"const",[328,3472,3473],{"class":360}," metaDefaults",[328,3475,3476],{"class":2703}," =",[328,3478,352],{"class":333},[328,3480,3481,3484,3486,3489,3491,3494,3496,3499,3502,3505],{"class":330,"line":26},[328,3482,3483],{"class":333},"  isProdEnv",[328,3485,374],{"class":373},[328,3487,3488],{"class":360}," process",[328,3490,997],{"class":333},[328,3492,3493],{"class":360},"env",[328,3495,997],{"class":333},[328,3497,3498],{"class":360},"NODE_ENV",[328,3500,3501],{"class":2703}," ===",[328,3503,3504],{"class":435}," \"production\"",[328,3506,3386],{"class":3370},[328,3508,3509,3512,3514,3517],{"class":330,"line":239},[328,3510,3511],{"class":333},"  siteName",[328,3513,374],{"class":373},[328,3515,3516],{"class":435}," 'JAMStart'",[328,3518,3386],{"class":3370},[328,3520,3521,3524,3526,3529],{"class":330,"line":381},[328,3522,3523],{"class":333},"  title",[328,3525,374],{"class":373},[328,3527,3528],{"class":435}," 'JMSTseoTitle'",[328,3530,3386],{"class":3370},[328,3532,3533,3536,3538,3541],{"class":330,"line":387},[328,3534,3535],{"class":333},"  description",[328,3537,374],{"class":373},[328,3539,3540],{"class":435}," 'JMSTseoDescription'",[328,3542,3386],{"class":3370},[328,3544,3545,3548,3550,3553],{"class":330,"line":558},[328,3546,3547],{"class":333},"  author",[328,3549,374],{"class":373},[328,3551,3552],{"class":435}," 'JMSTseoAuthor'",[328,3554,3386],{"class":3370},[328,3556,3557,3560,3562,3565],{"class":330,"line":584},[328,3558,3559],{"class":333},"  creator",[328,3561,374],{"class":373},[328,3563,3564],{"class":435}," 'JMSTseoCreator'",[328,3566,3386],{"class":3370},[328,3568,3569,3572,3574,3577],{"class":330,"line":596},[328,3570,3571],{"class":333},"  rootUrl",[328,3573,374],{"class":373},[328,3575,3576],{"class":435}," \"https:\u002F\u002FJMSTsiteURL.com\"",[328,3578,3386],{"class":3370},[328,3580,3581,3584,3586,3589],{"class":330,"line":601},[328,3582,3583],{"class":333},"  robots",[328,3585,374],{"class":373},[328,3587,3588],{"class":435}," 'index, follow'",[328,3590,3386],{"class":3370},[328,3592,3593,3596,3598,3601],{"class":330,"line":843},[328,3594,3595],{"class":333},"  copyright",[328,3597,374],{"class":373},[328,3599,3600],{"class":435}," '© [JMSTcopyrightYears] [JMSTcopyrightName]'",[328,3602,3386],{"class":3370},[328,3604,3605,3608,3610,3613],{"class":330,"line":849},[328,3606,3607],{"class":333},"  ogType",[328,3609,374],{"class":373},[328,3611,3612],{"class":435}," 'article'",[328,3614,3386],{"class":3370},[328,3616,3617,3620,3622,3625],{"class":330,"line":859},[328,3618,3619],{"class":333},"  imageRoot",[328,3621,374],{"class":373},[328,3623,3624],{"class":435}," '\u002Fimages'",[328,3626,3386],{"class":3370},[328,3628,3629,3632,3634,3637],{"class":330,"line":869},[328,3630,3631],{"class":333},"  image2x1",[328,3633,374],{"class":373},[328,3635,3636],{"class":435}," '\u002Fimages\u002FJMSTimage2x1.jpg'",[328,3638,3386],{"class":3370},[328,3640,3641,3644,3646,3649],{"class":330,"line":878},[328,3642,3643],{"class":333},"  image2x1Width",[328,3645,374],{"class":373},[328,3647,3648],{"class":566}," 1200",[328,3650,3386],{"class":3370},[328,3652,3653,3656,3658,3661],{"class":330,"line":888},[328,3654,3655],{"class":333},"  image2x1Height",[328,3657,374],{"class":373},[328,3659,3660],{"class":566}," 600",[328,3662,3386],{"class":3370},[328,3664,3665,3668,3670,3673],{"class":330,"line":905},[328,3666,3667],{"class":333},"  image1x1",[328,3669,374],{"class":373},[328,3671,3672],{"class":435}," '\u002Fimages\u002FJMSTimage1x1.png'",[328,3674,3386],{"class":3370},[328,3676,3677,3680,3682,3685],{"class":330,"line":919},[328,3678,3679],{"class":333},"  image1x1Width",[328,3681,374],{"class":373},[328,3683,3684],{"class":566}," 1024",[328,3686,3386],{"class":3370},[328,3688,3689,3692,3694,3696],{"class":330,"line":928},[328,3690,3691],{"class":333},"  image1x1Height",[328,3693,374],{"class":373},[328,3695,3684],{"class":566},[328,3697,3386],{"class":3370},[328,3699,3700,3703,3705,3708],{"class":330,"line":938},[328,3701,3702],{"class":333},"  image_alt",[328,3704,374],{"class":373},[328,3706,3707],{"class":435}," 'JMSTsocialShareimage_alt'",[328,3709,3386],{"class":3370},[328,3711,3712,3715,3717,3720],{"class":330,"line":947},[328,3713,3714],{"class":333},"  twitterCard",[328,3716,374],{"class":373},[328,3718,3719],{"class":435}," 'summary_large_image'",[328,3721,3386],{"class":3370},[328,3723,3724,3727,3729,3732],{"class":330,"line":3080},[328,3725,3726],{"class":333},"  twitterSiteHandle",[328,3728,374],{"class":373},[328,3730,3731],{"class":435}," '@JMSTsiteHandleX'",[328,3733,3386],{"class":3370},[328,3735,3737,3740,3742],{"class":330,"line":3736},22,[328,3738,3739],{"class":333},"  twitterCreatorHandle",[328,3741,374],{"class":373},[328,3743,3744],{"class":435}," '@JMSTcreateHandleX'\n",[328,3746,3748],{"class":330,"line":3747},23,[328,3749,384],{"class":333},[12,3751,3752,3753,181,3756,3759,3760,3763],{},"There are two images used for social sharing, ",[284,3754,3755],{},"image2x1",[284,3757,3758],{},"image1x1",".  You should replace these images in the ",[284,3761,3762],{},"\u002Fpublic\u002Fimages"," folder with your own images that represent your project.  The recommended sizes are:",[1405,3765,3766,3780],{},[1408,3767,3768],{},[1411,3769,3770,3772,3775,3778],{},[1414,3771,2167],{},[1414,3773,3774],{},"Size (pixels)",[1414,3776,3777],{},"Aspect Ratio",[1414,3779,1422],{},[1424,3781,3782,3797],{},[1411,3783,3784,3788,3791,3794],{},[1429,3785,3786],{},[284,3787,3755],{},[1429,3789,3790],{},"1200 x 600",[1429,3792,3793],{},"2:1",[1429,3795,3796],{},"Used for Facebook, LinkedIn sharing",[1411,3798,3799,3803,3806,3809],{},[1429,3800,3801],{},[284,3802,3758],{},[1429,3804,3805],{},"1024 x 1024",[1429,3807,3808],{},"1:1",[1429,3810,3811],{},"Used for Twitter sharing",[167,3813,3815],{"id":3814},"default-font","Default Font",[12,3817,3272,3818,3820,3821,3826,3827,3830,3831,3833],{},[284,3819,3451],{}," file, the Google font 'Rubik' is set to be the default font.  To replace it, choose a font from ",[16,3822,3825],{"href":3823,"rel":3824,"target":191},"https:\u002F\u002Ffonts.google.com\u002F",[88],"Google Fonts"," or another font provider.  Look for the embed codes or similar from the font provider.  The head links are set using the Nuxt.js ",[284,3828,3829],{},"useHead"," composable. This means you will need to translate the html embed codes into the ",[284,3832,3829],{}," format.",[12,3835,3836,3837,3840],{},"For example, the embed code from Google Fonts for ",[284,3838,3839],{},"Open Sans"," font looks like this:",[320,3842,3844],{"className":657,"code":3843,"language":659,"meta":25,"style":25},"  \u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n  \u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n  \u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap\" rel=\"stylesheet\">\n",[284,3845,3846,3870,3894],{"__ignoreMap":25},[328,3847,3848,3850,3852,3855,3857,3860,3863,3865,3868],{"class":330,"line":155},[328,3849,424],{"class":333},[328,3851,302],{"class":337},[328,3853,3854],{"class":340}," rel",[328,3856,432],{"class":373},[328,3858,3859],{"class":435},"\"preconnect\"",[328,3861,3862],{"class":340}," href",[328,3864,432],{"class":373},[328,3866,3867],{"class":435},"\"https:\u002F\u002Ffonts.googleapis.com\"",[328,3869,344],{"class":333},[328,3871,3872,3874,3876,3878,3880,3882,3884,3886,3889,3892],{"class":330,"line":26},[328,3873,424],{"class":333},[328,3875,302],{"class":337},[328,3877,3854],{"class":340},[328,3879,432],{"class":373},[328,3881,3859],{"class":435},[328,3883,3862],{"class":340},[328,3885,432],{"class":373},[328,3887,3888],{"class":435},"\"https:\u002F\u002Ffonts.gstatic.com\"",[328,3890,3891],{"class":340}," crossorigin",[328,3893,344],{"class":333},[328,3895,3896,3898,3900,3902,3904,3907,3909,3911,3914],{"class":330,"line":239},[328,3897,424],{"class":333},[328,3899,302],{"class":337},[328,3901,3862],{"class":340},[328,3903,432],{"class":373},[328,3905,3906],{"class":435},"\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap\"",[328,3908,3854],{"class":340},[328,3910,432],{"class":373},[328,3912,3913],{"class":435},"\"stylesheet\"",[328,3915,344],{"class":333},[12,3917,3918,3919,652,3921,3923],{},"in the ",[284,3920,3451],{},[284,3922,3829],{}," composable you would replace the 'Rubik' font href objects, demarcated by 'JMSTfont', to look like this:",[320,3925,3927],{"className":1019,"code":3926,"language":1021,"meta":25,"style":25},"  useHead({\n    link: [\n      \u002F\u002F JMSTfont start default Font\n      { rel: 'preconnect', href: 'https:\u002F\u002Ffonts.googleapis.com' },\n      { rel: 'preconnect', href: 'https:\u002F\u002Ffonts.gstatic.com', crossorigin: '' },\n      { rel: 'stylesheet', href: 'https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap' }\n      \u002F\u002F JMSTfont end default Font\n    ]\n  })\n",[284,3928,3929,3936,3946,3952,3977,4007,4028,4033,4038],{"__ignoreMap":25},[328,3930,3931,3934],{"class":330,"line":155},[328,3932,3933],{"class":340},"  useHead",[328,3935,1031],{"class":333},[328,3937,3938,3941,3943],{"class":330,"line":26},[328,3939,3940],{"class":333},"    link",[328,3942,374],{"class":373},[328,3944,3945],{"class":333}," [\n",[328,3947,3948],{"class":330,"line":239},[328,3949,3951],{"class":3950},"sNgeA","      \u002F\u002F JMSTfont start default Font\n",[328,3953,3954,3957,3959,3962,3965,3967,3969,3972,3975],{"class":330,"line":381},[328,3955,3956],{"class":333},"      { rel",[328,3958,374],{"class":373},[328,3960,3961],{"class":435}," 'preconnect'",[328,3963,3964],{"class":3370},",",[328,3966,3862],{"class":333},[328,3968,374],{"class":373},[328,3970,3971],{"class":435}," 'https:\u002F\u002Ffonts.googleapis.com'",[328,3973,3974],{"class":333}," }",[328,3976,3386],{"class":3370},[328,3978,3979,3981,3983,3985,3987,3989,3991,3994,3996,3998,4000,4003,4005],{"class":330,"line":387},[328,3980,3956],{"class":333},[328,3982,374],{"class":373},[328,3984,3961],{"class":435},[328,3986,3964],{"class":3370},[328,3988,3862],{"class":333},[328,3990,374],{"class":373},[328,3992,3993],{"class":435}," 'https:\u002F\u002Ffonts.gstatic.com'",[328,3995,3964],{"class":3370},[328,3997,3891],{"class":333},[328,3999,374],{"class":373},[328,4001,4002],{"class":435}," ''",[328,4004,3974],{"class":333},[328,4006,3386],{"class":3370},[328,4008,4009,4011,4013,4016,4018,4020,4022,4025],{"class":330,"line":558},[328,4010,3956],{"class":333},[328,4012,374],{"class":373},[328,4014,4015],{"class":435}," 'stylesheet'",[328,4017,3964],{"class":3370},[328,4019,3862],{"class":333},[328,4021,374],{"class":373},[328,4023,4024],{"class":435}," 'https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'",[328,4026,4027],{"class":333}," }\n",[328,4029,4030],{"class":330,"line":584},[328,4031,4032],{"class":3950},"      \u002F\u002F JMSTfont end default Font\n",[328,4034,4035],{"class":330,"line":596},[328,4036,4037],{"class":333},"    ]\n",[328,4039,4040],{"class":330,"line":601},[328,4041,4042],{"class":333},"  })\n",[12,4044,4045,4046,4049,4050,4052,4053,4055,4056,4059],{},"Next replace the global CSS font-family in the ",[284,4047,4048],{},"\u003Cstyle>"," section of ",[284,4051,3451],{}," file, marked with 'JMSTfont' to use your new font.  For ",[284,4054,3839],{},", you would change the ",[284,4057,4058],{},"font-family"," line to look like this:",[320,4061,4065],{"className":4062,"code":4063,"language":4064,"meta":25,"style":25},"language-css shiki shiki-themes min-light min-dark monokai","\u003Cstyle>\n  body {\n    font-family: 'Open Sans', sans-serif;\n  }\n\u003C\u002Fstyle>\n","css",[284,4066,4067,4075,4082,4100,4104],{"__ignoreMap":25},[328,4068,4069,4071,4073],{"class":330,"line":155},[328,4070,334],{"class":333},[328,4072,317],{"class":337},[328,4074,344],{"class":2703},[328,4076,4077,4080],{"class":330,"line":26},[328,4078,4079],{"class":337},"  body",[328,4081,352],{"class":333},[328,4083,4084,4087,4089,4092,4094,4098],{"class":330,"line":239},[328,4085,4086],{"class":516},"    font-family",[328,4088,374],{"class":373},[328,4090,4091],{"class":435}," 'Open Sans'",[328,4093,3964],{"class":3370},[328,4095,4097],{"class":4096},"sO7y7"," sans-serif",[328,4099,581],{"class":333},[328,4101,4102],{"class":330,"line":381},[328,4103,3431],{"class":333},[328,4105,4106,4108,4110],{"class":330,"line":387},[328,4107,390],{"class":333},[328,4109,317],{"class":337},[328,4111,344],{"class":2703},[167,4113,4115],{"id":4114},"favicon-images","FavIcon Images",[12,4117,4118,4119,4122,4123,2615,4128,4133],{},"Further there is a set of FavIcon images in the ",[284,4120,4121],{},"\u002Fpublic"," folder that you should replace with your own FavIcon images. Create an icon for your site and then you can use a tool like ",[16,4124,4127],{"href":4125,"rel":4126},"https:\u002F\u002Ffavicon.io\u002F",[88],"Fav Icon Suite generator - favicon.io",[16,4129,4132],{"href":4130,"rel":4131},"https:\u002F\u002Frealfavicongenerator.net\u002F",[88],"RealFaviconGenerator"," to generate a set of FavIcon images for your project.",[970,4135,4136,4164,4197],{},[175,4137,4138,4139,2241,4141],{},"Remove these files at ",[284,4140,4121],{},[172,4142,4143,4146,4149,4152,4155,4158,4161],{},[175,4144,4145],{},"android-chrome-192x192.png",[175,4147,4148],{},"android-chrome-512x512.png",[175,4150,4151],{},"apple-touch-icon.png",[175,4153,4154],{},"favicon-16x16.png",[175,4156,4157],{},"favicon-32x32.png",[175,4159,4160],{},"favicon.ico",[175,4162,4163],{},"site.webmanifest",[175,4165,4166,4167,4169,4170,4173,4174,4176,4177],{},"Add your new FavIcon files to the ",[284,4168,4121],{}," folder. For example, when I used ",[284,4171,4172],{},"https:\u002F\u002Frealfavicongenerator.net"," to create my FavIcons, I downloaded a zip file that contained all the FavIcon files.  I extracted the files and copied them into the ",[284,4175,4121],{}," folder (which should be empty after you removed the previous FavIcon files).  The files I added were:\n",[172,4178,4179,4181,4184,4187,4189,4192,4195],{},[175,4180,4160],{},[175,4182,4183],{},"favicon.svg",[175,4185,4186],{},"favicon-96x96.png",[175,4188,4163],{},[175,4190,4191],{},"web-app-manifest-192x192.png",[175,4193,4194],{},"web-app-manifest-512x512.png",[175,4196,4151],{},[175,4198,4199,4200,4203],{},"Your FontProvider should also provide you with some a set of ",[284,4201,4202],{},"\u003Chead>\u003Clink>"," elements .  In my example, it was:",[320,4205,4207],{"className":657,"code":4206,"language":659,"meta":25,"style":25},"\u003Clink rel=\"icon\" type=\"image\u002Fpng\" href=\"\u002Ffavicon-96x96.png\" sizes=\"96x96\" \u002F>\n\u003Clink rel=\"icon\" type=\"image\u002Fsvg+xml\" href=\"\u002Ffavicon.svg\" \u002F>\n\u003Clink rel=\"shortcut icon\" href=\"\u002Ffavicon.ico\" \u002F>\n\u003Clink rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"\u002Fapple-touch-icon.png\" \u002F>\n\u003Clink rel=\"manifest\" href=\"\u002Fsite.webmanifest\" \u002F>\n",[284,4208,4209,4247,4275,4297,4326],{"__ignoreMap":25},[328,4210,4211,4213,4215,4217,4219,4222,4225,4227,4230,4232,4234,4237,4240,4242,4245],{"class":330,"line":155},[328,4212,334],{"class":333},[328,4214,302],{"class":337},[328,4216,3854],{"class":340},[328,4218,432],{"class":373},[328,4220,4221],{"class":435},"\"icon\"",[328,4223,4224],{"class":340}," type",[328,4226,432],{"class":373},[328,4228,4229],{"class":435},"\"image\u002Fpng\"",[328,4231,3862],{"class":340},[328,4233,432],{"class":373},[328,4235,4236],{"class":435},"\"\u002Ffavicon-96x96.png\"",[328,4238,4239],{"class":340}," sizes",[328,4241,432],{"class":373},[328,4243,4244],{"class":435},"\"96x96\"",[328,4246,681],{"class":333},[328,4248,4249,4251,4253,4255,4257,4259,4261,4263,4266,4268,4270,4273],{"class":330,"line":26},[328,4250,334],{"class":333},[328,4252,302],{"class":337},[328,4254,3854],{"class":340},[328,4256,432],{"class":373},[328,4258,4221],{"class":435},[328,4260,4224],{"class":340},[328,4262,432],{"class":373},[328,4264,4265],{"class":435},"\"image\u002Fsvg+xml\"",[328,4267,3862],{"class":340},[328,4269,432],{"class":373},[328,4271,4272],{"class":435},"\"\u002Ffavicon.svg\"",[328,4274,681],{"class":333},[328,4276,4277,4279,4281,4283,4285,4288,4290,4292,4295],{"class":330,"line":239},[328,4278,334],{"class":333},[328,4280,302],{"class":337},[328,4282,3854],{"class":340},[328,4284,432],{"class":373},[328,4286,4287],{"class":435},"\"shortcut icon\"",[328,4289,3862],{"class":340},[328,4291,432],{"class":373},[328,4293,4294],{"class":435},"\"\u002Ffavicon.ico\"",[328,4296,681],{"class":333},[328,4298,4299,4301,4303,4305,4307,4310,4312,4314,4317,4319,4321,4324],{"class":330,"line":381},[328,4300,334],{"class":333},[328,4302,302],{"class":337},[328,4304,3854],{"class":340},[328,4306,432],{"class":373},[328,4308,4309],{"class":435},"\"apple-touch-icon\"",[328,4311,4239],{"class":340},[328,4313,432],{"class":373},[328,4315,4316],{"class":435},"\"180x180\"",[328,4318,3862],{"class":340},[328,4320,432],{"class":373},[328,4322,4323],{"class":435},"\"\u002Fapple-touch-icon.png\"",[328,4325,681],{"class":333},[328,4327,4328,4330,4332,4334,4336,4339,4341,4343,4346],{"class":330,"line":387},[328,4329,334],{"class":333},[328,4331,302],{"class":337},[328,4333,3854],{"class":340},[328,4335,432],{"class":373},[328,4337,4338],{"class":435},"\"manifest\"",[328,4340,3862],{"class":340},[328,4342,432],{"class":373},[328,4344,4345],{"class":435},"\"\u002Fsite.webmanifest\"",[328,4347,681],{"class":333},[970,4349,4350],{"start":381},[175,4351,4352,4353,652,4355,4358,4359,4362,4363,4365],{},"Within the ",[284,4354,3451],{},[284,4356,4357],{},"useHead()"," composable, replace current links, bracketed with ",[284,4360,4361],{},"JMSTfavIcon"," comments, with the equivalent links provided by your FontProvider.  For example, you would replace the current FavIcon links in ",[284,4364,3451],{}," with the above links from your FontProvider, like this:",[320,4367,4369],{"className":1019,"code":4368,"language":1021,"meta":25,"style":25},"  useHead({\n    link: [\n      { rel: 'icon', type: 'image\u002Fpng', href: '\u002Ffavicon-96x96.png', sizes: '96x96' },\n      { rel: 'icon', type: 'image\u002Fsvg+xml', href: '\u002Ffavicon.svg' },\n      { rel: 'shortcut icon', href: '\u002Ffavicon.ico' },\n      { rel: 'apple-touch-icon', sizes: '180x180', href: '\u002Fapple-touch-icon.png' },\n      { rel: 'manifest', href: '\u002Fsite.webmanifest' }\n    ]\n  })\n",[284,4370,4371,4377,4385,4425,4455,4477,4508,4528,4532],{"__ignoreMap":25},[328,4372,4373,4375],{"class":330,"line":155},[328,4374,3933],{"class":340},[328,4376,1031],{"class":333},[328,4378,4379,4381,4383],{"class":330,"line":26},[328,4380,3940],{"class":333},[328,4382,374],{"class":373},[328,4384,3945],{"class":333},[328,4386,4387,4389,4391,4394,4396,4398,4400,4403,4405,4407,4409,4412,4414,4416,4418,4421,4423],{"class":330,"line":239},[328,4388,3956],{"class":333},[328,4390,374],{"class":373},[328,4392,4393],{"class":435}," 'icon'",[328,4395,3964],{"class":3370},[328,4397,4224],{"class":333},[328,4399,374],{"class":373},[328,4401,4402],{"class":435}," 'image\u002Fpng'",[328,4404,3964],{"class":3370},[328,4406,3862],{"class":333},[328,4408,374],{"class":373},[328,4410,4411],{"class":435}," '\u002Ffavicon-96x96.png'",[328,4413,3964],{"class":3370},[328,4415,4239],{"class":333},[328,4417,374],{"class":373},[328,4419,4420],{"class":435}," '96x96'",[328,4422,3974],{"class":333},[328,4424,3386],{"class":3370},[328,4426,4427,4429,4431,4433,4435,4437,4439,4442,4444,4446,4448,4451,4453],{"class":330,"line":381},[328,4428,3956],{"class":333},[328,4430,374],{"class":373},[328,4432,4393],{"class":435},[328,4434,3964],{"class":3370},[328,4436,4224],{"class":333},[328,4438,374],{"class":373},[328,4440,4441],{"class":435}," 'image\u002Fsvg+xml'",[328,4443,3964],{"class":3370},[328,4445,3862],{"class":333},[328,4447,374],{"class":373},[328,4449,4450],{"class":435}," '\u002Ffavicon.svg'",[328,4452,3974],{"class":333},[328,4454,3386],{"class":3370},[328,4456,4457,4459,4461,4464,4466,4468,4470,4473,4475],{"class":330,"line":387},[328,4458,3956],{"class":333},[328,4460,374],{"class":373},[328,4462,4463],{"class":435}," 'shortcut icon'",[328,4465,3964],{"class":3370},[328,4467,3862],{"class":333},[328,4469,374],{"class":373},[328,4471,4472],{"class":435}," '\u002Ffavicon.ico'",[328,4474,3974],{"class":333},[328,4476,3386],{"class":3370},[328,4478,4479,4481,4483,4486,4488,4490,4492,4495,4497,4499,4501,4504,4506],{"class":330,"line":558},[328,4480,3956],{"class":333},[328,4482,374],{"class":373},[328,4484,4485],{"class":435}," 'apple-touch-icon'",[328,4487,3964],{"class":3370},[328,4489,4239],{"class":333},[328,4491,374],{"class":373},[328,4493,4494],{"class":435}," '180x180'",[328,4496,3964],{"class":3370},[328,4498,3862],{"class":333},[328,4500,374],{"class":373},[328,4502,4503],{"class":435}," '\u002Fapple-touch-icon.png'",[328,4505,3974],{"class":333},[328,4507,3386],{"class":3370},[328,4509,4510,4512,4514,4517,4519,4521,4523,4526],{"class":330,"line":584},[328,4511,3956],{"class":333},[328,4513,374],{"class":373},[328,4515,4516],{"class":435}," 'manifest'",[328,4518,3964],{"class":3370},[328,4520,3862],{"class":333},[328,4522,374],{"class":373},[328,4524,4525],{"class":435}," '\u002Fsite.webmanifest'",[328,4527,4027],{"class":333},[328,4529,4530],{"class":330,"line":596},[328,4531,4037],{"class":333},[328,4533,4534],{"class":330,"line":601},[328,4535,4042],{"class":333},[167,4537,4539],{"id":4538},"copyright-notices","Copyright Notices",[12,4541,4542,4543],{},"In JAMStart there are several copyright notices. The specific license notice used depend on the type of project you are creating. See this blog post for more details on how I handle copyright and licensing notices for my projects: ",[16,4544,4546],{"href":4545},"\u002Fblog\u002F2026\u002Fcopyrightlicense","Copyright and Licensing for Code and Content Projects",[1405,4548,4549,4561],{},[1408,4550,4551],{},[1411,4552,4553,4556,4559],{},[1414,4554,4555],{},"File",[1414,4557,4558],{},"Type",[1414,4560,1422],{},[1424,4562,4563,4576,4589,4602,4618],{},[1411,4564,4565,4570,4573],{},[1429,4566,4567],{},[284,4568,4569],{},".\u002FLICENSE.txt",[1429,4571,4572],{},"Git Project Notice",[1429,4574,4575],{},"This is the main notice that governs the code in the repository",[1411,4577,4578,4583,4586],{},[1429,4579,4580],{},[284,4581,4582],{},".\u002Fpackage.json",[1429,4584,4585],{},"NPM package Notice",[1429,4587,4588],{},"This is the notice if the project is published as an NPM package.",[1411,4590,4591,4596,4599],{},[1429,4592,4593],{},[284,4594,4595],{},".\u002Fapp.vue",[1429,4597,4598],{},"SEO Copyright Notice",[1429,4600,4601],{},"This is the copyright notice is embedded in the meta tags of each generated web page.",[1411,4603,4604,4609,4612],{},[1429,4605,4606],{},[284,4607,4608],{},".\u002Fcontent\u002Flicense.md",[1429,4610,4611],{},"Generated web site license page",[1429,4613,4614,4615,4617],{},"This is the notice that is shown for the ",[284,4616,1133],{}," page on the generated web site, which provides more details about the specific copyright and license used for the content and code on the site.",[1411,4619,4620,4625,4628],{},[1429,4621,4622],{},[284,4623,4624],{},".\u002Fcomponents\u002FFooterMain.vue",[1429,4626,4627],{},"Generated web site footer",[1429,4629,4630,4631,4633],{},"This is the notice that is shown in the footer of each page on the generated web site and links to the ",[284,4632,1133],{}," page.",[312,4635,4637],{"id":4636},"choosing-a-license","Choosing a License",[12,4639,4640,4641,4646],{},"You can use a tool like ",[16,4642,4645],{"href":4643,"rel":4644,"target":191},"https:\u002F\u002Fchoosealicense.com\u002F",[88],"Choose a License"," to help you choose a license and get the text for it.",[312,4648,4650],{"id":4649},"licensetxt-file","LICENSE.txt file",[12,4652,644,4653,4656,4657,4659],{},[284,4654,4655],{},"LICENSE.txt"," file in the root of your git repository should be updated to reflect the license you want to use for your git project. The JAMStart git project is open source and released under the MIT license and you will find the MIT license text in the ",[284,4658,4655],{}," file.",[12,4661,4662,4663,4665],{},"If your repo is also open source, you can keep the MIT license and just update the copyright notice in the license text to reflect your name and the current year, or if you want to use a different license, you should replace the contents of the ",[284,4664,4655],{}," file with the text of the license you want to use.",[12,4667,4668],{},"If your repo is private, I would replace the license text with a simple notice that states that the code is proprietary and owned by you, and that all rights are reserved. In case the code gets out in the wild, the notice should make it clear that the code is not licensed for public use. For example:",[320,4670,4675],{"className":4671,"code":4673,"language":4674,"meta":25},[4672],"language-text","Copyright (c) 2024-2026 John P. Pennock. All Rights Reserved. Unlicensed.\nThis code is proprietary and owned by John P. Pennock. Unauthorized \ncopying, distribution, modification, or use of this code is strictly \nprohibited.\n","text",[284,4676,4673],{"__ignoreMap":25},[312,4678,4680,4682],{"id":4679},"packagejson-npm-notice",[284,4681,1488],{}," NPM Notice",[12,4684,4685,4686,4688,4689,4691,4692,625,4694,4697,4698,4700,4701,4659],{},"If you plan to publish your project as an NPM package, you should also include a license field in your ",[284,4687,1488],{}," file that specifies the license for your package (same as ",[284,4690,4655],{},"). This is important for users who want to use your package and need to know the terms under which it is licensed. If you are using an open source license, you can specify the license type (e.g., ",[284,4693,3219],{},[284,4695,4696],{},"GPL-3.0",", etc.) in the ",[284,4699,3213],{}," field of your ",[284,4702,1488],{},[320,4704,4708],{"className":4705,"code":4706,"language":4707,"meta":25,"style":25},"language-json shiki shiki-themes min-light min-dark monokai","{\n  \"license\": \"MIT\"\n}\n","json",[284,4709,4710,4715,4727],{"__ignoreMap":25},[328,4711,4712],{"class":330,"line":155},[328,4713,4714],{"class":333},"{\n",[328,4716,4717,4721,4723],{"class":330,"line":26},[328,4718,4720],{"class":4719},"sbzP7","  \"license\"",[328,4722,374],{"class":3370},[328,4724,4726],{"class":4725},"sgki-"," \"MIT\"\n",[328,4728,4729],{"class":330,"line":239},[328,4730,384],{"class":333},[12,4732,4733,4734,964,4736,4700,4738,4740],{},"If your project is private and is not meant to be released as a package, you can specify ",[284,4735,3222],{},[284,4737,3213],{},[284,4739,1488],{}," file to indicate that the package is not licensed for public use.",[320,4742,4744],{"className":4705,"code":4743,"language":4707,"meta":25,"style":25},"{\n  \"license\": \"UNLICENSED\"\n}\n",[284,4745,4746,4750,4759],{"__ignoreMap":25},[328,4747,4748],{"class":330,"line":155},[328,4749,4714],{"class":333},[328,4751,4752,4754,4756],{"class":330,"line":26},[328,4753,4720],{"class":4719},[328,4755,374],{"class":3370},[328,4757,4758],{"class":4725}," \"UNLICENSED\"\n",[328,4760,4761],{"class":330,"line":239},[328,4762,384],{"class":333},[312,4764,4766,4768],{"id":4765},"appvue-seo-notice",[284,4767,3451],{}," SEO Notice",[12,4770,4771,4772,4775,4776,4778,4779,4781,4782,4784,4785,4788],{},"Search and replace \"",[284,4773,4774],{},"[JMSTcopyrightYears] [JMSTcopyrightName]","\" in the ",[284,4777,3213],{}," field of the ",[284,4780,3455],{}," object in the ",[284,4783,3451],{}," file with your copyright notice. This will ensure that the correct copyright information is included in the meta tags of each generated web page for SEO and social sharing purposes.  For example, if your name is John P. Pennock and the current year is 2026, you would replace it with ",[284,4786,4787],{},"© 2026 John P. Pennock"," like this:",[320,4790,4792],{"className":1019,"code":4791,"language":1021,"meta":25,"style":25},"  const metaDefaults = {\n    \u002F\u002F ...\n    copyright: '© 2026 John P. Pennock',\n    \u002F\u002F ...\n  }\n",[284,4793,4794,4805,4810,4822,4826],{"__ignoreMap":25},[328,4795,4796,4799,4801,4803],{"class":330,"line":155},[328,4797,4798],{"class":1074},"  const",[328,4800,3473],{"class":360},[328,4802,3476],{"class":2703},[328,4804,352],{"class":333},[328,4806,4807],{"class":330,"line":26},[328,4808,4809],{"class":3950},"    \u002F\u002F ...\n",[328,4811,4812,4815,4817,4820],{"class":330,"line":239},[328,4813,4814],{"class":333},"    copyright",[328,4816,374],{"class":373},[328,4818,4819],{"class":435}," '© 2026 John P. Pennock'",[328,4821,3386],{"class":3370},[328,4823,4824],{"class":330,"line":381},[328,4825,4809],{"class":3950},[328,4827,4828],{"class":330,"line":387},[328,4829,3431],{"class":333},[312,4831,4833,4834],{"id":4832},"web-site-footer-footermainvue","Web Site Footer ",[284,4835,4836],{},"FooterMain.vue",[12,4838,3272,4839,4841,4842,4844,4845,4847,4848,4788],{},[284,4840,4836],{}," file, there is a copyright notice in the footer of each page on the generated web site that links to the ",[284,4843,1133],{}," page.  You should replace the placeholder text \"",[284,4846,4774],{},"\" in the footer with your own copyright noticeFor example, if your name is John P. Pennock and the current year is 2026, you would replace it with ",[284,4849,4850],{},"2026 John P. Pennock",[320,4852,4854],{"className":322,"code":4853,"language":324,"meta":25,"style":25},"\u003Ctemplate>\n  \u003Cfooter class=\"text-center prose dark:prose-invert lg:prose-xl\">\n    © 2026 John P. Pennock. \n    \u003Cspan class=\"hidden lg:inline-block lg:mr-2\">See\u003C\u002Fspan>\n    \u003CNuxtLink to=\"\u002Flicense\">License\u003C\u002FNuxtLink>\n    \u003Cspan class=\"hidden lg:inline-block lg:ml-2\">for details.\u003C\u002Fspan>\n  \u003C\u002Ffooter>\n\u003C\u002Ftemplate>\n",[284,4855,4856,4864,4880,4885,4905,4925,4945,4953],{"__ignoreMap":25},[328,4857,4858,4860,4862],{"class":330,"line":155},[328,4859,334],{"class":333},[328,4861,101],{"class":337},[328,4863,344],{"class":333},[328,4865,4866,4868,4871,4873,4875,4878],{"class":330,"line":26},[328,4867,424],{"class":333},[328,4869,4870],{"class":337},"footer",[328,4872,429],{"class":340},[328,4874,432],{"class":373},[328,4876,4877],{"class":435},"\"text-center prose dark:prose-invert lg:prose-xl\"",[328,4879,344],{"class":333},[328,4881,4882],{"class":330,"line":239},[328,4883,4884],{"class":333},"    © 2026 John P. Pennock. \n",[328,4886,4887,4889,4891,4893,4895,4898,4901,4903],{"class":330,"line":381},[328,4888,675],{"class":333},[328,4890,328],{"class":337},[328,4892,429],{"class":340},[328,4894,432],{"class":373},[328,4896,4897],{"class":435},"\"hidden lg:inline-block lg:mr-2\"",[328,4899,4900],{"class":333},">See\u003C\u002F",[328,4902,328],{"class":337},[328,4904,344],{"class":333},[328,4906,4907,4909,4911,4913,4915,4918,4921,4923],{"class":330,"line":387},[328,4908,675],{"class":333},[328,4910,791],{"class":337},[328,4912,794],{"class":340},[328,4914,432],{"class":373},[328,4916,4917],{"class":435},"\"\u002Flicense\"",[328,4919,4920],{"class":333},">License\u003C\u002F",[328,4922,791],{"class":337},[328,4924,344],{"class":333},[328,4926,4927,4929,4931,4933,4935,4938,4941,4943],{"class":330,"line":558},[328,4928,675],{"class":333},[328,4930,328],{"class":337},[328,4932,429],{"class":340},[328,4934,432],{"class":373},[328,4936,4937],{"class":435},"\"hidden lg:inline-block lg:ml-2\"",[328,4939,4940],{"class":333},">for details.\u003C\u002F",[328,4942,328],{"class":337},[328,4944,344],{"class":333},[328,4946,4947,4949,4951],{"class":330,"line":584},[328,4948,686],{"class":333},[328,4950,4870],{"class":337},[328,4952,344],{"class":333},[328,4954,4955,4957,4959],{"class":330,"line":596},[328,4956,390],{"class":333},[328,4958,101],{"class":337},[328,4960,344],{"class":333},[312,4962,4964,4965],{"id":4963},"license-page-licensemd","License Page ",[284,4966,4967],{},"license.md",[12,4969,3272,4970,4972,4973,4975,4976,4978,4979,4981],{},[284,4971,4967],{}," file, the site copyright notice details are shown on the ",[284,4974,1133],{}," page of the generated web site.  You should replace the placeholder text \"",[284,4977,4774],{},"\" in the license page with your own name and year. Further, you should update the license text to reflect the specific license you are using for your project. For example, if you are using the MIT License, you would replace the text in ",[284,4980,4967],{}," with the text of the MIT License and update the copyright notice at the top to reflect your name and the current year.",[272,4983,4985],{"id":4984},"examine-npm-dependencies","Examine NPM Dependencies",[12,4987,4988,4989,4991,4992,2615,4995,4998,4999,5002,5003,5006,5007,5009],{},"Knowing the the NPM dependencies in the ",[284,4990,1488],{}," file will help you understand the libraries and tools your project relies on. The dependencies in the JAMStart repo are the ones that I use for my projects, but you may want to add or remove dependencies based on your specific project requirements. You should also check for any outdated dependencies and update them to the latest versions to ensure that your project is using the most secure and stable versions of the packages. You can use a tool like ",[284,4993,4994],{},"npm outdated",[284,4996,4997],{},"yarn outdated"," to check for outdated dependencies. For updating dependencies I recommend using ",[284,5000,5001],{},"npm install \u003Cpackage>@\u003Cversion>"," to make sure you are getting the exact version you want. ",[284,5004,5005],{},"npm update"," will also update dependencies but it will update to the latest version that satisfies the version range specified in your ",[284,5008,1488],{}," file, which may not always be what you want.",[1405,5011,5012,5021],{},[1408,5013,5014],{},[1411,5015,5016,5019],{},[1414,5017,5018],{},"Dependency",[1414,5020,1422],{},[1424,5022,5023,5032,5044,5054,5071,5081,5091,5101,5113,5123,5133,5143,5153,5163],{},[1411,5024,5025,5029],{},[1429,5026,5027],{},[284,5028,37],{},[1429,5030,5031],{},"The Nuxt.js framework, which is the foundation of the JAMStart project.",[1411,5033,5034,5041],{},[1429,5035,5036,3964,5038],{},[284,5037,324],{},[284,5039,5040],{},"vue-router",[1429,5042,5043],{},"The Vue.js framework, which Nuxt.js uses for the user interface of the JAMStart project.",[1411,5045,5046,5051],{},[1429,5047,5048],{},[284,5049,5050],{},"@nuxt\u002Fcontent",[1429,5052,5053],{},"The Nuxt Content module, which allows you to write your content as Markdown files.",[1411,5055,5056,5061],{},[1429,5057,5058],{},[284,5059,5060],{},"remark-unwrap-images",[1429,5062,5063,5064,5067,5068,997],{},"A plugin for the Nuxt Content module to undo the default image markdown to html conversion. The default is ",[284,5065,5066],{},"\u003Cp>\u003Cimg \u002F>\u003C\u002Fp>",", but with the plugin images become ",[284,5069,5070],{},"\u003Cimg \u002F>",[1411,5072,5073,5078],{},[1429,5074,5075],{},[284,5076,5077],{},"@nuxt\u002Fimage",[1429,5079,5080],{},"Provides optimized image handling for your Nuxt.js application.",[1411,5082,5083,5088],{},[1429,5084,5085],{},[284,5086,5087],{},"@nuxtjs\u002Fsitemap",[1429,5089,5090],{},"The Nuxt Sitemap module, which generates a sitemap for your Nuxt.js application to improve SEO and deployment",[1411,5092,5093,5098],{},[1429,5094,5095],{},[284,5096,5097],{},"@stefanobartoletti\u002Fnuxt-social-share",[1429,5099,5100],{},"A Nuxt module for adding social sharing buttons to your application.",[1411,5102,5103,5108],{},[1429,5104,5105],{},[284,5106,5107],{},"better-sqlite3",[1429,5109,5110,5111,997],{},"A performant SQLite3 library required for ",[284,5112,5050],{},[1411,5114,5115,5120],{},[1429,5116,5117],{},[284,5118,5119],{},"nuxt-cloudflare-analytics",[1429,5121,5122],{},"A Nuxt module for integrating Cloudflare Analytics into your application.",[1411,5124,5125,5130],{},[1429,5126,5127],{},[284,5128,5129],{},"@nuxtjs\u002Fcolor-mode",[1429,5131,5132],{},"A Nuxt module for handling color modes (e.g., dark mode) in your application.",[1411,5134,5135,5140],{},[1429,5136,5137],{},[284,5138,5139],{},"@nuxtjs\u002Ftailwindcss",[1429,5141,5142],{},"A Nuxt module for integrating Tailwind CSS into your application.",[1411,5144,5145,5150],{},[1429,5146,5147],{},[284,5148,5149],{},"@tailwindcss\u002Ftypography",[1429,5151,5152],{},"A Tailwind CSS plugin for adding typography styles to your application.",[1411,5154,5155,5160],{},[1429,5156,5157],{},[284,5158,5159],{},"@pennockprojects\u002Fnuxtss-s3-fix",[1429,5161,5162],{},"A deployment tool for fixing Nuxt static sites on AWS S3.",[1411,5164,5165,5170],{},[1429,5166,5167],{},[284,5168,5169],{},"@pennockprojects\u002Fsitemap-diff",[1429,5171,5172],{},"A deployment tool for generating sitemap differences between deployments.",[272,5174,5176],{"id":5175},"summary","Summary",[12,5178,5179],{},"You have now created your new project by cloning the JAMStart repo and updating the project names and files to reflect your new project.",[12,5181,5182],{},"You have provided the following inputs to customize your project:",[970,5184,5185,5188,5191,5194,5197,5200,5203],{},[175,5186,5187],{},"Your Project Name",[175,5189,5190],{},"Your Project Domain Name",[175,5192,5193],{},"Your Project Git Repository",[175,5195,5196],{},"Your Project FavIcons",[175,5198,5199],{},"Your Project Default Social Sharing Images - 2x1 and 1x1 images.",[175,5201,5202],{},"Your Project Default Font",[175,5204,5205],{},"Your Project Copyright and License information",[12,5207,5208],{},"You have updated the following placeholders in your project files:",[970,5210,5211,5216,5221],{},[175,5212,5213,5215],{},[1742,5214,62],{}," to your Project Name in PascalCase",[175,5217,5218,5220],{},[1742,5219,3147],{}," to your Project Name in lowercase",[175,5222,5223,5224,5226,5227,625,5229,5231,5232,5234,5235,1447],{},"all placeholders that start with ",[1742,5225,3459],{}," in ",[284,5228,1488],{},[284,5230,3340],{},", and ",[284,5233,3451],{}," files (except for build deploy placeholders in ",[284,5236,1488],{},[12,5238,5239],{},"You should smoke test your project again to verify it still runs locally.",[320,5241,5243],{"className":2677,"code":5242,"language":2679,"meta":25,"style":25},"> npm run dev\n",[284,5244,5245],{"__ignoreMap":25},[328,5246,5247,5249],{"class":330,"line":155},[328,5248,2704],{"class":2703},[328,5250,5251],{"class":333}," npm run dev\n",[12,5253,5254],{},"You are now ready to move on to the next step of using Nuxt.js features in your JAMStart project.",[317,5256,5257],{},"html pre.shiki code .srTi1, html code.shiki .srTi1{--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-sepia:#A6E22E}html pre.shiki code .sCqw6, html code.shiki .sCqw6{--shiki-default:#2B5581;--shiki-dark:#9DB1C5;--shiki-sepia:#E6DB74}html pre.shiki code .sPj-R, html code.shiki .sPj-R{--shiki-default:#24292EFF;--shiki-dark:#B392F0;--shiki-sepia:#AE81FF}html pre.shiki code .sxUMQ, html code.shiki .sxUMQ{--shiki-default:#24292EFF;--shiki-dark:#B392F0;--shiki-sepia:#F8F8F2}html pre.shiki code .s-2sM, html code.shiki .s-2sM{--shiki-default:#D32F2F;--shiki-dark:#F97583;--shiki-sepia:#F92672}html pre.shiki code .shHn5, html code.shiki .shHn5{--shiki-default:#22863A;--shiki-dark:#FFAB70;--shiki-sepia:#E6DB74}html pre.shiki code .s0Ixy, html code.shiki .s0Ixy{--shiki-default:#1976D2;--shiki-dark:#F8F8F8;--shiki-sepia:#AE81FF}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);}html .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html pre.shiki code .sizxJ, html code.shiki .sizxJ{--shiki-default:#212121;--shiki-dark:#BBBBBB;--shiki-sepia:#F8F8F2}html pre.shiki code .s-Tb5, html code.shiki .s-Tb5{--shiki-default:#D32F2F;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit;--shiki-sepia:#66D9EF;--shiki-sepia-font-style:italic}html pre.shiki code .sraLd, html code.shiki .sraLd{--shiki-default:#1976D2;--shiki-dark:#79B8FF;--shiki-sepia:#F8F8F2}html pre.shiki code .skixG, html code.shiki .skixG{--shiki-default:#D32F2F;--shiki-dark:#F97583;--shiki-sepia:#F8F8F2}html pre.shiki code .szMGX, html code.shiki .szMGX{--shiki-default:#22863A;--shiki-dark:#FFAB70;--shiki-sepia:#F92672}html pre.shiki code .sNgeA, html code.shiki .sNgeA{--shiki-default:#C2C3C5;--shiki-dark:#6B737C;--shiki-sepia:#88846F}html pre.shiki code .sibI6, html code.shiki .sibI6{--shiki-default:#1976D2;--shiki-default-font-style:inherit;--shiki-dark:#79B8FF;--shiki-dark-font-style:inherit;--shiki-sepia:#66D9EF;--shiki-sepia-font-style:italic}html pre.shiki code .sO7y7, html code.shiki .sO7y7{--shiki-default:#1976D2;--shiki-dark:#79B8FF;--shiki-sepia:#66D9EF}html pre.shiki code .sbzP7, html code.shiki .sbzP7{--shiki-default:#D32F2F;--shiki-default-font-style:inherit;--shiki-dark:#F8F8F8;--shiki-dark-font-style:inherit;--shiki-sepia:#66D9EF;--shiki-sepia-font-style:italic}html pre.shiki code .sgki-, html code.shiki .sgki-{--shiki-default:#22863A;--shiki-dark:#FFAB70;--shiki-sepia:#CFCFC2}",{"title":25,"searchDepth":26,"depth":26,"links":5259},[5260,5261,5264,5267,5280,5281],{"id":2503,"depth":239,"text":2504},{"id":2510,"depth":26,"text":2071,"children":5262},[5263],{"id":2522,"depth":239,"text":2523},{"id":2546,"depth":26,"text":2547,"children":5265},[5266],{"id":2663,"depth":239,"text":2664},{"id":3099,"depth":26,"text":3100,"children":5268},[5269,5270,5272,5274,5276,5277,5278,5279],{"id":3106,"depth":239,"text":3107},{"id":3157,"depth":239,"text":5271},"package.json file",{"id":3337,"depth":239,"text":5273},"nuxt.config.ts file",{"id":3434,"depth":239,"text":5275},"README.md file",{"id":3445,"depth":239,"text":3446},{"id":3814,"depth":239,"text":3815},{"id":4114,"depth":239,"text":4115},{"id":4538,"depth":239,"text":4539},{"id":4984,"depth":26,"text":4985},{"id":5175,"depth":26,"text":5176},"2025-03-13","Make JAMStart your own. 'Copy Clone' the repo, find and replace, and update NPM dependencies.","\u002Fimages\u002Fprojects\u002Fblogassemblyline.jpg","A blog site assembly line",[37,38,39,146,40,5287,2469,149,2471],"Cloud_Storage",{"repos":5289},[62],"\u002Fprojects\u002Fjamstart\u002Fcopyclone",{"title":2481,"description":5283},{"loc":5290},"projects\u002Fjamstart\u002F2.CopyClone","Copy Clone","Fe6MoFCssl23-lS7VrfMGk7U2d1UWEQrYdfCsZnzDhE",{"id":5297,"title":5298,"author":7,"body":5299,"content_type":1111,"date_created":6474,"date_modified":30,"description":6475,"editor":30,"extension":32,"guide":1114,"image":6476,"image_alt":6477,"is_list_exclude":35,"is_manual_image":35,"is_manual_title":35,"is_toc":51,"keywords":30,"meta":6478,"navigation":51,"og_description":30,"og_image":30,"og_image_alt":30,"og_title":30,"path":6479,"peer_order":239,"project":62,"projects":30,"published":54,"seo":6480,"sitemap":6481,"stem":6482,"tagline":5303,"version":30,"x_card":30,"x_creator_handle":30,"x_description":30,"x_image":30,"x_image_alt":30,"x_title":30,"__hash__":6483},"content\u002Fprojects\u002Fjamstart\u002F3.NuxtUsage.md","Nuxt Usage",{"type":9,"value":5300,"toc":6452},[5301,5304,5307,5310,5321,5325,5331,5335,5343,5347,5407,5411,5424,5471,5475,5517,5521,5545,5549,5591,5595,5604,5608,5611,5631,5635,5638,5656,5660,5663,5677,5681,5691,5695,5803,5806,5904,6013,6017,6022,6129,6133,6137,6200,6204,6208,6249,6253,6259,6420,6423,6449],[272,5302,5303],{"id":37},"Nuxt",[12,5305,5306],{},"JAMStart uses Nuxt.js as the front-end framework. Nuxt is a framework built on top of Vue.js that provides static site generation, server-side rendering, and powerful routing capabilities out of the box. It simplifies the development of Vue.js applications by providing a structured way to organize your code and handle common tasks.",[12,5308,5309],{},"JAMStart leverages Nuxt static site generation feature to create a site that is fast, SEO-friendly, author friendly, and easy to maintain. By design, JAMStart does not use the server or server-side features of Nuxt which allows you to host the website statically and cheaply. If you need the Nuxt server or server-side features, you can always add them later.",[12,5311,5312,5313,5316,5317,5320],{},"The use of Nuxt Content module allows for seamless authoring of blog posts and\u002For articles in Markdown. Each blog, article, or page is authored in a single Markdown file (with ",[284,5314,5315],{},".md"," extension) and stored in the ",[284,5318,5319],{},"\u002Fcontent"," directory. Each Markdown file can include front-matter YAML metadata for titles, descriptions, thumbnails, dates, tags, and other custom data for SEO and social media sharing. The Markdown files are automatically converted into HTML pages with site CSS by Nuxt Content in the static generation phase.  This adheres to the separation of content and presentation principle of web design.",[167,5322,5324],{"id":5323},"example-markdown-page","Example Markdown Page",[320,5326,5329],{"className":5327,"code":5328,"language":4674},[4672],"---\ntitle: Hello World\ndescription: When I first learned to code, I was told that I should always write a 'Hello, World!' module first.\ndate_created: 2024-05-03\nauthor: John Pennock\nkeywords: [c_language, hello_world]\nis_manual_image: true\nimage: \u002Fimages\u002Fblog\u002FC_KandR.jpg\nimage_alt: Front cover of \"The C Programming Language\" by Kernighan and Ritchie\n---\nHello, World!\n\n```c\n#include \u003Cstdio.h>\n\nint main()\n{\n    printf(\"Hello World\");\n\n    return 0;\n}\n```\n",[284,5330,5328],{"__ignoreMap":25},[167,5332,5334],{"id":5333},"nuxt-3-directory-structure","Nuxt 3 Directory Structure",[12,5336,5337,5342],{},[16,5338,5341],{"href":5339,"rel":5340},"https:\u002F\u002Fnuxt.com\u002Fblog\u002Fv4",[88],"Nuxt 4 has been released",". JAMStart used Nuxt 3 but chooses to use the Nuxt 4 with minimal changes needed.",[272,5344,5346],{"id":5345},"key-files-and-directories","Key Files and Directories",[1405,5348,5349,5358],{},[1408,5350,5351],{},[1411,5352,5353,5356],{},[1414,5354,5355],{},"File or Folder",[1414,5357,1422],{},[1424,5359,5360,5368,5376,5383,5391,5399],{},[1411,5361,5362,5365],{},[1429,5363,5364],{},"\u002Fapp\u002Fapp.vue",[1429,5366,5367],{},"starting app",[1411,5369,5370,5373],{},[1429,5371,5372],{},"\u002Fapp\u002Fpages",[1429,5374,5375],{},"pages *.vue folder",[1411,5377,5378,5380],{},[1429,5379,5319],{},[1429,5381,5382],{},"pages *.md folder",[1411,5384,5385,5388],{},[1429,5386,5387],{},"\u002Fapp\u002Flayouts",[1429,5389,5390],{},"layouts folder",[1411,5392,5393,5396],{},[1429,5394,5395],{},"\u002Fapp\u002Fcomponents",[1429,5397,5398],{},"vue custom components folder",[1411,5400,5401,5404],{},[1429,5402,5403],{},"\u002Fapp\u002Frouter.options.js",[1429,5405,5406],{},"router options file",[167,5408,5410],{"id":5409},"nuxt-4-compatibility","Nuxt 4 Compatibility",[12,5412,5413,5414,5417,5418,5421,5422,4659],{},"Nuxt 4 is imminent and the current Nuxt 3 has a mode that will allow you to future proof the directory structure. Opt-in to the v4 directory structure which means they are going to move the client code from the root to the ",[284,5415,5416],{},"app"," folder. You can enable Nuxt 4 compatibility adding the ",[284,5419,5420],{},"future"," key in the ",[284,5423,3340],{},[320,5425,5427],{"className":1019,"code":5426,"language":1021,"meta":25,"style":25},"export default defineNuxtConfig({\n  future: {\n    compatibilityVersion: 4,\n  }\n})\n\n",[284,5428,5429,5442,5451,5463,5467],{"__ignoreMap":25},[328,5430,5431,5434,5437,5440],{"class":330,"line":155},[328,5432,5433],{"class":2703},"export",[328,5435,5436],{"class":2703}," default",[328,5438,5439],{"class":340}," defineNuxtConfig",[328,5441,1031],{"class":333},[328,5443,5444,5447,5449],{"class":330,"line":26},[328,5445,5446],{"class":333},"  future",[328,5448,374],{"class":373},[328,5450,352],{"class":333},[328,5452,5453,5456,5458,5461],{"class":330,"line":239},[328,5454,5455],{"class":333},"    compatibilityVersion",[328,5457,374],{"class":373},[328,5459,5460],{"class":566}," 4",[328,5462,3386],{"class":3370},[328,5464,5465],{"class":330,"line":381},[328,5466,3431],{"class":333},[328,5468,5469],{"class":330,"line":387},[328,5470,1046],{"class":333},[312,5472,5474],{"id":5473},"nuxt-4-changes","Nuxt 4 Changes",[1405,5476,5477,5487],{},[1408,5478,5479],{},[1411,5480,5481,5484],{},[1414,5482,5483],{},"Nuxt 3",[1414,5485,5486],{},"Nuxt 4",[1424,5488,5489,5496,5503,5510],{},[1411,5490,5491,5494],{},[1429,5492,5493],{},"\u002Fapp.vue",[1429,5495,5364],{},[1411,5497,5498,5501],{},[1429,5499,5500],{},"\u002Fpages",[1429,5502,5372],{},[1411,5504,5505,5508],{},[1429,5506,5507],{},"\u002Flayouts",[1429,5509,5387],{},[1411,5511,5512,5515],{},[1429,5513,5514],{},"\u002Fcomponents",[1429,5516,5395],{},[312,5518,5520],{"id":5519},"nuxt-4-unchanged","Nuxt 4 Unchanged",[1405,5522,5523,5531],{},[1408,5524,5525],{},[1411,5526,5527,5529],{},[1414,5528,5483],{},[1414,5530,5486],{},[1424,5532,5533,5539],{},[1411,5534,5535,5537],{},[1429,5536,5319],{},[1429,5538,5319],{},[1411,5540,5541,5543],{},[1429,5542,5403],{},[1429,5544,5403],{},[272,5546,5548],{"id":5547},"nuxt-routing","Nuxt Routing",[172,5550,5551,5558,5572,5579,5585],{},[175,5552,5553,5554,5557],{},"A route is created automatically for each page in the ",[284,5555,5556],{},"pages"," directory. A subdirectory will add a level to the route parameter.",[175,5559,5560,5561,5564,5565,5567,5568,5571],{},"Use ",[284,5562,5563],{},"\u003CNuxtPage \u002F>"," where you want to pages to appear based on route. Typically, this is in the ",[284,5566,3451],{}," file, within the ",[284,5569,5570],{},"\u003CNuxtLayout \u002F>"," element",[175,5573,5574,5575,5578],{},"Add a routing page with a parameter you add ",[284,5576,5577],{},"[]"," to the filename!",[175,5580,5581,5582],{},"Add the parameter name inside the brackets like ",[284,5583,5584],{},"[...slug].vue",[175,5586,5587,5590],{},[284,5588,5589],{},"slug"," means where spaces are dash characters - blog post short name",[272,5592,5594],{"id":5593},"nuxt-modules","Nuxt Modules",[12,5596,5597,5598,5603],{},"You can browse Nuxt modules ",[16,5599,5602],{"href":5600,"rel":5601},"https:\u002F\u002Fnuxt.com\u002Fmodules",[88],"here",". You install a Nuxt specific package according to the instructions.",[272,5605,5607],{"id":5606},"component-names","Component Names",[12,5609,5610],{},"When a component has a compound name you can either name the file as either",[172,5612,5613,5619],{},[175,5614,5615,5618],{},[284,5616,5617],{},"compound-name.vue"," or",[175,5620,5621,5624,5625,5627,5628],{},[284,5622,5623],{},"CompoundName.vue"," (my preferred)\nIn either case, when coding the component in the ",[284,5626,290],{}," section of a page the reference would be ",[284,5629,5630],{},"\u003CCompoundName>\u003C\u002FCompoundName>",[272,5632,5634],{"id":5633},"data-fetching","Data fetching",[12,5636,5637],{},"Nuxt has three built in data fetching methods",[970,5639,5640,5646,5651],{},[175,5641,5642,5645],{},[284,5643,5644],{},"useFetch"," composable",[175,5647,5648,5645],{},[284,5649,5650],{},"useAsyncData",[175,5652,5653],{},[284,5654,5655],{},"$fetch",[272,5657,5659],{"id":5658},"npm-dependencies","NPM Dependencies",[12,5661,5662],{},"After cloning, you should examine the NPM dependencies and:",[172,5664,5665,5668,5671,5674],{},[175,5666,5667],{},"understand what the role of each dependency is in the project and where the documentation is for it",[175,5669,5670],{},"update any dependencies, at least the minor and patch updates.",[175,5672,5673],{},"optionally, remove any dependencies you do not need for your project",[175,5675,5676],{},"get for security updates",[167,5678,5680],{"id":5679},"understand-the-dependencies","Understand the Dependencies",[12,5682,5683,5684,1488,5687,5690],{},"You can do this by using ",[284,5685,5686],{},"npm outdated'.  editing the ",[284,5688,5689],{},"file and changing the version numbers to the latest versions, or you can use a tool like","npm-check-updates` to automatically update the versions for you.",[272,5692,5694],{"id":5693},"key-files-and-folders","Key Files and Folders",[1405,5696,5697,5706],{},[1408,5698,5699],{},[1411,5700,5701,5704],{},[1414,5702,5703],{},"Folder",[1414,5705,1422],{},[1424,5707,5708,5718,5728,5738,5747,5756,5765,5774,5784,5793],{},[1411,5709,5710,5715],{},[1429,5711,5712],{},[284,5713,5714],{},"\u002F",[1429,5716,5717],{},"root folder",[1411,5719,5720,5725],{},[1429,5721,5722],{},[284,5723,5724],{},"\u002Fapp",[1429,5726,5727],{},"Nuxt.js client folder (v4 compatibility)",[1411,5729,5730,5735],{},[1429,5731,5732],{},[284,5733,5734],{},"\u002Fserver",[1429,5736,5737],{},"Nuxt.js server folder",[1411,5739,5740,5744],{},[1429,5741,5742],{},[284,5743,5372],{},[1429,5745,5746],{},"Nuxt.js client pages root folder",[1411,5748,5749,5753],{},[1429,5750,5751],{},[284,5752,5319],{},[1429,5754,5755],{},"NuxtContent Markdown pages folder",[1411,5757,5758,5762],{},[1429,5759,5760],{},[284,5761,5387],{},[1429,5763,5764],{},"Nuxt.js layouts folder",[1411,5766,5767,5771],{},[1429,5768,5769],{},[284,5770,5395],{},[1429,5772,5773],{},"Vue.js custom components folder",[1411,5775,5776,5781],{},[1429,5777,5778],{},[284,5779,5780],{},"\u002Fapp\u002Fcomponents\u002Fcontent",[1429,5782,5783],{},"NuxtContent components folder",[1411,5785,5786,5790],{},[1429,5787,5788],{},[284,5789,4121],{},[1429,5791,5792],{},"Images and files served live",[1411,5794,5795,5800],{},[1429,5796,5797],{},[284,5798,5799],{},"\u002Fshared\u002Futils",[1429,5801,5802],{},"JavaScript shared (client&server)",[272,5804,3124],{"id":5805},"files",[1405,5807,5808,5817],{},[1408,5809,5810],{},[1411,5811,5812,5815],{},[1414,5813,5814],{},"Options and Script Files",[1414,5816,1422],{},[1424,5818,5819,5829,5838,5848,5858,5867,5876,5886,5895],{},[1411,5820,5821,5826],{},[1429,5822,5823],{},[284,5824,5825],{},".gitignore",[1429,5827,5828],{},"Git ignore options file",[1411,5830,5831,5835],{},[1429,5832,5833],{},[284,5834,3340],{},[1429,5836,5837],{},"Nuxt.js options file",[1411,5839,5840,5845],{},[1429,5841,5842],{},[284,5843,5844],{},"content.config.ts",[1429,5846,5847],{},"NuxtContent options file",[1411,5849,5850,5855],{},[1429,5851,5852],{},[284,5853,5854],{},"tailwind.config.js",[1429,5856,5857],{},"Tailwind CSS options",[1411,5859,5860,5864],{},[1429,5861,5862],{},[284,5863,1488],{},[1429,5865,5866],{},"NPM package dependency file",[1411,5868,5869,5873],{},[1429,5870,5871],{},[284,5872,1853],{},[1429,5874,5875],{},"AWS CodeBuild script",[1411,5877,5878,5883],{},[1429,5879,5880],{},[284,5881,5882],{},"tsconfig.json",[1429,5884,5885],{},"Typescript options file (not used)",[1411,5887,5888,5892],{},[1429,5889,5890],{},[284,5891,4655],{},[1429,5893,5894],{},"License file for repo",[1411,5896,5897,5901],{},[1429,5898,5899],{},[284,5900,2518],{},[1429,5902,5903],{},"README file for git repo",[1405,5905,5906,5915],{},[1408,5907,5908],{},[1411,5909,5910,5913],{},[1414,5911,5912],{},"Site Files",[1414,5914,1422],{},[1424,5916,5917,5927,5936,5946,5956,5966,5976,5986,5995,6004],{},[1411,5918,5919,5924],{},[1429,5920,5921],{},[284,5922,5923],{},"error.vue",[1429,5925,5926],{},"Vue page for ERRORS",[1411,5928,5929,5933],{},[1429,5930,5931],{},[284,5932,5364],{},[1429,5934,5935],{},"Vue.js application entry",[1411,5937,5938,5943],{},[1429,5939,5940],{},[284,5941,5942],{},"\u002Fapp\u002Fpages\u002F*.vue",[1429,5944,5945],{},"Nuxt.js pages",[1411,5947,5948,5953],{},[1429,5949,5950],{},[284,5951,5952],{},"\u002Fcontent\u002F*.md",[1429,5954,5955],{},"NuxtContent Content pages",[1411,5957,5958,5963],{},[1429,5959,5960],{},[284,5961,5962],{},"\u002Fcontent\u002Flicense.md",[1429,5964,5965],{},"License page for website",[1411,5967,5968,5973],{},[1429,5969,5970],{},[284,5971,5972],{},"\u002Fapp\u002Flayouts\u002F*.vue",[1429,5974,5975],{},"Nuxt.js layouts components",[1411,5977,5978,5983],{},[1429,5979,5980],{},[284,5981,5982],{},"\u002Fapp\u002Fcomponents\u002F*.vue",[1429,5984,5985],{},"Vue.js custom components",[1411,5987,5988,5992],{},[1429,5989,5990],{},[284,5991,5780],{},[1429,5993,5994],{},"NuxtContent custom components",[1411,5996,5997,6001],{},[1429,5998,5999],{},[284,6000,5403],{},[1429,6002,6003],{},"Vue.js router options file",[1411,6005,6006,6011],{},[1429,6007,6008],{},[284,6009,6010],{},"\u002Fshared\u002Futils\u002F*.[js,ts]",[1429,6012,5802],{},[272,6014,6016],{"id":6015},"content-pages","Content Pages",[12,6018,6019,6020],{},"at ",[284,6021,5319],{},[1405,6023,6024,6036],{},[1408,6025,6026],{},[1411,6027,6028,6031,6033],{},[1414,6029,6030],{},"Page",[1414,6032,4555],{},[1414,6034,6035],{},"Description\u002FPurpose",[1424,6037,6038,6051,6064,6077,6090,6103,6116],{},[1411,6039,6040,6043,6048],{},[1429,6041,6042],{},"Home",[1429,6044,6045],{},[284,6046,6047],{},"\u002Findex.md",[1429,6049,6050],{},"show code\u002Fpre blocks with styling",[1411,6052,6053,6056,6061],{},[1429,6054,6055],{},"About",[1429,6057,6058],{},[284,6059,6060],{},"\u002Fabout.md",[1429,6062,6063],{},"no frills content page",[1411,6065,6066,6069,6074],{},[1429,6067,6068],{},"Articles Home",[1429,6070,6071],{},[284,6072,6073],{},"\u002Farticles\u002Findex.md",[1429,6075,6076],{},"longer form content",[1411,6078,6079,6082,6087],{},[1429,6080,6081],{},"Articles",[1429,6083,6084],{},[284,6085,6086],{},"\u002Farticles\u002F*.md",[1429,6088,6089],{},"a set of articles",[1411,6091,6092,6095,6100],{},[1429,6093,6094],{},"Git Repo",[1429,6096,6097],{},[284,6098,6099],{},"gitprojects.md",[1429,6101,6102],{},"shows external API usage",[1411,6104,6105,6108,6113],{},[1429,6106,6107],{},"Blog Home",[1429,6109,6110],{},[284,6111,6112],{},"blog\u002Findex.md",[1429,6114,6115],{},"blog list",[1411,6117,6118,6121,6126],{},[1429,6119,6120],{},"Blog Posts",[1429,6122,6123],{},[284,6124,6125],{},"blog\u002F202x\u002F*.md",[1429,6127,6128],{},"a set of posts",[272,6130,6132],{"id":6131},"nuxtcontent-controls","NuxtContent Controls",[12,6134,6019,6135],{},[284,6136,5780],{},[1405,6138,6139,6148],{},[1408,6140,6141],{},[1411,6142,6143,6146],{},[1414,6144,6145],{},"Custom Control File",[1414,6147,6035],{},[1424,6149,6150,6160,6170,6180,6190],{},[1411,6151,6152,6157],{},[1429,6153,6154],{},[284,6155,6156],{},"CollectionList.vue",[1429,6158,6159],{},"parent list of posts, used in both articles and blog",[1411,6161,6162,6167],{},[1429,6163,6164],{},[284,6165,6166],{},"FigureCaption.vue",[1429,6168,6169],{},"A centered full-width block image with a caption",[1411,6171,6172,6177],{},[1429,6173,6174],{},[284,6175,6176],{},"GitList.vue",[1429,6178,6179],{},"retrieves a list of GitHub repos",[1411,6181,6182,6187],{},[1429,6183,6184],{},[284,6185,6186],{},"MonkInset.vue",[1429,6188,6189],{},"Floats an image or text with content flowing around it.",[1411,6191,6192,6197],{},[1429,6193,6194],{},[284,6195,6196],{},"TocLinks.vue",[1429,6198,6199],{},"Creates a table of contents for page.",[272,6201,6203],{"id":6202},"vue-controls","Vue Controls",[12,6205,6019,6206],{},[284,6207,5395],{},[1405,6209,6210,6218],{},[1408,6211,6212],{},[1411,6213,6214,6216],{},[1414,6215,6145],{},[1414,6217,6035],{},[1424,6219,6220,6230,6239],{},[1411,6221,6222,6227],{},[1429,6223,6224],{},[284,6225,6226],{},"ColorModeSelector.vue",[1429,6228,6229],{},"control to toggle dark modes",[1411,6231,6232,6236],{},[1429,6233,6234],{},[284,6235,4836],{},[1429,6237,6238],{},"bottom menu",[1411,6240,6241,6246],{},[1429,6242,6243],{},[284,6244,6245],{},"TopMenu.vue",[1429,6247,6248],{},"top menu",[272,6250,6252],{"id":6251},"dependencies","Dependencies",[12,6254,6255,6256],{},"from ",[284,6257,6258],{},"\u002Fpackage.json",[320,6260,6262],{"className":4705,"code":6261,"language":4707,"meta":25,"style":25},"  \"dependencies\": {\n    \"@nuxt\u002Fcontent\": \"^3.1.1\",\n    \"@stefanobartoletti\u002Fnuxt-social-share\": \"^1.2.0\",\n    \"nuxt\": \"^3.6.0\",\n    \"nuxt-cloudflare-analytics\": \"^1.0.8\",\n    \"remark-unwrap-images\": \"^4.0.0\",\n    \"vue\": \"^3.4.21\",\n    \"vue-router\": \"^4.3.0\"\n  },\n  \"devDependencies\": {\n    \"@nuxt\u002Fdevtools\": \"^0.0.1\",\n    \"@nuxtjs\u002Fcolor-mode\": \"^3.3.3\",\n    \"@nuxtjs\u002Ftailwindcss\": \"^6.11.4\",\n    \"@tailwindcss\u002Ftypography\": \"^0.5.13\"\n  }\n}\n",[284,6263,6264,6272,6284,6296,6308,6320,6332,6344,6354,6359,6366,6378,6390,6402,6412,6416],{"__ignoreMap":25},[328,6265,6266,6269],{"class":330,"line":155},[328,6267,6268],{"class":435},"  \"dependencies\"",[328,6270,6271],{"class":333},": {\n",[328,6273,6274,6277,6279,6282],{"class":330,"line":26},[328,6275,6276],{"class":4719},"    \"@nuxt\u002Fcontent\"",[328,6278,374],{"class":3370},[328,6280,6281],{"class":4725}," \"^3.1.1\"",[328,6283,3386],{"class":3370},[328,6285,6286,6289,6291,6294],{"class":330,"line":239},[328,6287,6288],{"class":4719},"    \"@stefanobartoletti\u002Fnuxt-social-share\"",[328,6290,374],{"class":3370},[328,6292,6293],{"class":4725}," \"^1.2.0\"",[328,6295,3386],{"class":3370},[328,6297,6298,6301,6303,6306],{"class":330,"line":381},[328,6299,6300],{"class":4719},"    \"nuxt\"",[328,6302,374],{"class":3370},[328,6304,6305],{"class":4725}," \"^3.6.0\"",[328,6307,3386],{"class":3370},[328,6309,6310,6313,6315,6318],{"class":330,"line":387},[328,6311,6312],{"class":4719},"    \"nuxt-cloudflare-analytics\"",[328,6314,374],{"class":3370},[328,6316,6317],{"class":4725}," \"^1.0.8\"",[328,6319,3386],{"class":3370},[328,6321,6322,6325,6327,6330],{"class":330,"line":558},[328,6323,6324],{"class":4719},"    \"remark-unwrap-images\"",[328,6326,374],{"class":3370},[328,6328,6329],{"class":4725}," \"^4.0.0\"",[328,6331,3386],{"class":3370},[328,6333,6334,6337,6339,6342],{"class":330,"line":584},[328,6335,6336],{"class":4719},"    \"vue\"",[328,6338,374],{"class":3370},[328,6340,6341],{"class":4725}," \"^3.4.21\"",[328,6343,3386],{"class":3370},[328,6345,6346,6349,6351],{"class":330,"line":596},[328,6347,6348],{"class":4719},"    \"vue-router\"",[328,6350,374],{"class":3370},[328,6352,6353],{"class":4725}," \"^4.3.0\"\n",[328,6355,6356],{"class":330,"line":601},[328,6357,6358],{"class":333},"  },\n",[328,6360,6361,6364],{"class":330,"line":843},[328,6362,6363],{"class":435},"  \"devDependencies\"",[328,6365,6271],{"class":333},[328,6367,6368,6371,6373,6376],{"class":330,"line":849},[328,6369,6370],{"class":4719},"    \"@nuxt\u002Fdevtools\"",[328,6372,374],{"class":3370},[328,6374,6375],{"class":4725}," \"^0.0.1\"",[328,6377,3386],{"class":3370},[328,6379,6380,6383,6385,6388],{"class":330,"line":859},[328,6381,6382],{"class":4719},"    \"@nuxtjs\u002Fcolor-mode\"",[328,6384,374],{"class":3370},[328,6386,6387],{"class":4725}," \"^3.3.3\"",[328,6389,3386],{"class":3370},[328,6391,6392,6395,6397,6400],{"class":330,"line":869},[328,6393,6394],{"class":4719},"    \"@nuxtjs\u002Ftailwindcss\"",[328,6396,374],{"class":3370},[328,6398,6399],{"class":4725}," \"^6.11.4\"",[328,6401,3386],{"class":3370},[328,6403,6404,6407,6409],{"class":330,"line":878},[328,6405,6406],{"class":4719},"    \"@tailwindcss\u002Ftypography\"",[328,6408,374],{"class":3370},[328,6410,6411],{"class":4725}," \"^0.5.13\"\n",[328,6413,6414],{"class":330,"line":888},[328,6415,3431],{"class":333},[328,6417,6418],{"class":330,"line":905},[328,6419,384],{"class":333},[12,6421,6422],{},"Essentially, the dependencies are:",[970,6424,6425,6428,6431,6434,6437,6440,6443,6446],{},[175,6426,6427],{},"Nuxt.js v3",[175,6429,6430],{},"Nuxt Content v3",[175,6432,6433],{},"Nuxt Devtools - (for debugging)",[175,6435,6436],{},"Nuxt Color Mode - (for dark modes)",[175,6438,6439],{},"Nuxt Tailwind CSS - style",[175,6441,6442],{},"Tailwind Prose and Typography - Content Readability",[175,6444,6445],{},"Nuxt Social Share buttons",[175,6447,6448],{},"Nuxt CloudFlare Analytics - Cookie-free CloudFlare Analytics for static site",[317,6450,6451],{},"html pre.shiki code .s-2sM, html code.shiki .s-2sM{--shiki-default:#D32F2F;--shiki-dark:#F97583;--shiki-sepia:#F92672}html pre.shiki code .srTi1, html code.shiki .srTi1{--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-sepia:#A6E22E}html pre.shiki code .sxUMQ, html code.shiki .sxUMQ{--shiki-default:#24292EFF;--shiki-dark:#B392F0;--shiki-sepia:#F8F8F2}html pre.shiki code .skixG, html code.shiki .skixG{--shiki-default:#D32F2F;--shiki-dark:#F97583;--shiki-sepia:#F8F8F2}html pre.shiki code .s0Ixy, html code.shiki .s0Ixy{--shiki-default:#1976D2;--shiki-dark:#F8F8F8;--shiki-sepia:#AE81FF}html pre.shiki code .sizxJ, html code.shiki .sizxJ{--shiki-default:#212121;--shiki-dark:#BBBBBB;--shiki-sepia:#F8F8F2}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);}html .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html pre.shiki code .shHn5, html code.shiki .shHn5{--shiki-default:#22863A;--shiki-dark:#FFAB70;--shiki-sepia:#E6DB74}html pre.shiki code .sbzP7, html code.shiki .sbzP7{--shiki-default:#D32F2F;--shiki-default-font-style:inherit;--shiki-dark:#F8F8F8;--shiki-dark-font-style:inherit;--shiki-sepia:#66D9EF;--shiki-sepia-font-style:italic}html pre.shiki code .sgki-, html code.shiki .sgki-{--shiki-default:#22863A;--shiki-dark:#FFAB70;--shiki-sepia:#CFCFC2}",{"title":25,"searchDepth":26,"depth":26,"links":6453},[6454,6458,6461,6462,6463,6464,6465,6468,6469,6470,6471,6472,6473],{"id":37,"depth":26,"text":5303,"children":6455},[6456,6457],{"id":5323,"depth":239,"text":5324},{"id":5333,"depth":239,"text":5334},{"id":5345,"depth":26,"text":5346,"children":6459},[6460],{"id":5409,"depth":239,"text":5410},{"id":5547,"depth":26,"text":5548},{"id":5593,"depth":26,"text":5594},{"id":5606,"depth":26,"text":5607},{"id":5633,"depth":26,"text":5634},{"id":5658,"depth":26,"text":5659,"children":6466},[6467],{"id":5679,"depth":239,"text":5680},{"id":5693,"depth":26,"text":5694},{"id":5805,"depth":26,"text":3124},{"id":6015,"depth":26,"text":6016},{"id":6131,"depth":26,"text":6132},{"id":6202,"depth":26,"text":6203},{"id":6251,"depth":26,"text":6252},"2025-04-17","Notes about how the JAMStart project uses Nuxt.js and Nuxt Content Module","\u002Fimages\u002Fprojects\u002Fjamstartnuxt.jpg","Nuxt.js version 3 logo",{},"\u002Fprojects\u002Fjamstart\u002Fnuxtusage",{"title":5298,"description":6475},{"loc":6479},"projects\u002Fjamstart\u002F3.NuxtUsage","tXh0aqqYsK0iJt6X85TzKp4XL7kKBkVd9iiE4GeCq3I",{"id":6485,"title":6486,"author":7,"body":6487,"content_type":1111,"date_created":7650,"date_modified":30,"description":7651,"editor":30,"extension":32,"guide":1114,"image":7652,"image_alt":7653,"is_list_exclude":35,"is_manual_image":35,"is_manual_title":35,"is_toc":51,"keywords":30,"meta":7654,"navigation":51,"og_description":30,"og_image":30,"og_image_alt":30,"og_title":30,"path":7655,"peer_order":381,"project":62,"projects":30,"published":54,"seo":7656,"sitemap":7657,"stem":7658,"tagline":7659,"version":30,"x_card":30,"x_creator_handle":30,"x_description":30,"x_image":30,"x_image_alt":30,"x_title":30,"__hash__":7660},"content\u002Fprojects\u002Fjamstart\u002F4.Content.md","Nuxt Content Usage",{"type":9,"value":6488,"toc":7633},[6489,6493,6500,6530,6534,6537,6561,6565,6572,6582,6585,6629,6631,6638,6653,6661,6665,6680,6686,6738,6742,6749,6768,6773,6811,6813,6822,6825,6828,6846,6849,6863,6873,7039,7042,7046,7049,7051,7090,7093,7096,7100,7138,7192,7196,7212,7216,7264,7268,7272,7316,7318,7330,7332,7430,7446,7450,7459,7462,7480,7485,7534,7537,7630],[272,6490,6492],{"id":6491},"nuxt-content-doc","Nuxt Content Doc",[12,6494,644,6495,6499],{},[16,6496,6492],{"href":6497,"rel":6498},"https:\u002F\u002Fcontent.nuxt.com\u002Fcomponents\u002Fcontent-doc",[88]," is a Nuxt module that allows you to generate HTML content from markdown files.  Used in combination with Tailwind Typography module to automatically 'up level the default style' Markdown documents to beautiful and readable HTML.",[172,6501,6502,6509,6516,6523],{},[175,6503,6504],{},[16,6505,6508],{"href":6506,"rel":6507},"https:\u002F\u002Fmarkdownlivepreview.com\u002F",[88],"Markdown Cheat Sheet",[175,6510,6511],{},[16,6512,6515],{"href":6513,"rel":6514},"https:\u002F\u002Fwww.markdownguide.org\u002Fextended-syntax\u002F",[88],"Markdown Extended Syntax",[175,6517,6518],{},[16,6519,6522],{"href":6520,"rel":6521},"https:\u002F\u002Fgithub.com\u002Fgithub-linguist\u002Flinguist\u002Fblob\u002Fmaster\u002Flib\u002Flinguist\u002Flanguages.yml",[88],"Markdown Syntax Highlighting - GitHub",[175,6524,6525],{},[16,6526,6529],{"href":6527,"rel":6528},"https:\u002F\u002Fcontent.nuxt.com\u002Fusage\u002Fmarkdown",[88],"Markdown NuxtContent Usage",[167,6531,6533],{"id":6532},"installation","Installation",[12,6535,6536],{},"Install Content Doc",[320,6538,6542],{"className":6539,"code":6540,"language":6541,"meta":25,"style":25},"language-shell shiki shiki-themes min-light min-dark monokai","npx nuxi@latest module add content\n","shell",[284,6543,6544],{"__ignoreMap":25},[328,6545,6546,6549,6552,6555,6558],{"class":330,"line":155},[328,6547,6548],{"class":340},"npx",[328,6550,6551],{"class":2689}," nuxi@latest",[328,6553,6554],{"class":2689}," module",[328,6556,6557],{"class":2689}," add",[328,6559,6560],{"class":2689}," content\n",[272,6562,6564],{"id":6563},"nuxtcontent-remark-plugin","NuxtContent Remark Plugin",[12,6566,6567,6568,6571],{},"Nuxt Content uses the MDC Remark plugins process Markdown text and to allow Markdown to support Vue components.  One downside to this approach is that it will convert an image into a ",[284,6569,6570],{},"\u003Cp>\u003Cimg>\u003C\u002Fp>"," structure. For example, an image specified in Markdown like this:",[320,6573,6576],{"className":6574,"code":6575,"language":32,"meta":25,"style":25},"language-md shiki shiki-themes min-light min-dark monokai","![Logo](\u002Fimages\u002FPPNDLogoSm.png)\n",[284,6577,6578],{"__ignoreMap":25},[328,6579,6580],{"class":330,"line":155},[328,6581,6575],{},[12,6583,6584],{},"It will get converted by the MDC Remark plugin into HTML like this:",[320,6586,6588],{"className":657,"code":6587,"language":659,"meta":25,"style":25},"\u003Cp>\n  \u003Cimg title=\"Logo\" src=\"\u002Fimages\u002FPPNDLogoSm.png\">\n\u003C\u002Fp>\n",[284,6589,6590,6598,6621],{"__ignoreMap":25},[328,6591,6592,6594,6596],{"class":330,"line":155},[328,6593,334],{"class":333},[328,6595,12],{"class":337},[328,6597,344],{"class":333},[328,6599,6600,6602,6604,6607,6609,6612,6614,6616,6619],{"class":330,"line":26},[328,6601,424],{"class":333},[328,6603,70],{"class":337},[328,6605,6606],{"class":340}," title",[328,6608,432],{"class":373},[328,6610,6611],{"class":435},"\"Logo\"",[328,6613,439],{"class":340},[328,6615,432],{"class":373},[328,6617,6618],{"class":435},"\"\u002Fimages\u002FPPNDLogoSm.png\"",[328,6620,344],{"class":333},[328,6622,6623,6625,6627],{"class":330,"line":239},[328,6624,390],{"class":333},[328,6626,12],{"class":337},[328,6628,344],{"class":333},[167,6630,5060],{"id":5060},[12,6632,6633,6634,6637],{},"The outer ",[284,6635,6636],{},"\u003Cp>\u003C\u002Fp>"," tags can cause formatting issues.",[12,6639,6640,6641,6646,6647,6652],{},"NuxtContent MDC uses ",[16,6642,6645],{"href":6643,"rel":6644},"https:\u002F\u002Fgithub.com\u002Fremarkjs\u002Fremark\u002Fblob\u002Fmaster\u002Fdoc\u002Fplugins.md",[88],"remark plugins list"," to do the conversion to code blocks. A ",[16,6648,6651],{"href":6649,"rel":6650},"https:\u002F\u002Fgithub.com\u002Fremarkjs\u002Fremark-unwrap-images",[88],"remark-unwrap-images plugin"," will unwrap images from the paragraph elements.",[12,6654,644,6655,6660],{},[16,6656,6659],{"href":6657,"rel":6658},"https:\u002F\u002Fcontent.nuxt.com\u002Fget-started\u002Fconfiguration#markdown",[88],"Nuxt Configuration for remark plugins documents"," on how to enable them.",[167,6662,6664],{"id":6663},"unwrap-installation","Unwrap Installation",[320,6666,6668],{"className":6539,"code":6667,"language":6541,"meta":25,"style":25},"npm install remark-unwrap-images\n",[284,6669,6670],{"__ignoreMap":25},[328,6671,6672,6674,6677],{"class":330,"line":155},[328,6673,43],{"class":340},[328,6675,6676],{"class":2689}," install",[328,6678,6679],{"class":2689}," remark-unwrap-images\n",[12,6681,6682,6683],{},"And then add this to your ",[284,6684,6685],{},"nuxt.config.js",[320,6687,6689],{"className":1019,"code":6688,"language":1021,"meta":25,"style":25},"content: {\n  markdown: {\n    remarkPlugins: ['remark-unwrap-images']\n  },\n},\n",[284,6690,6691,6700,6709,6725,6731],{"__ignoreMap":25},[328,6692,6693,6696,6698],{"class":330,"line":155},[328,6694,6695],{"class":333},"content",[328,6697,374],{"class":3370},[328,6699,352],{"class":333},[328,6701,6702,6705,6707],{"class":330,"line":26},[328,6703,6704],{"class":333},"  markdown",[328,6706,374],{"class":3370},[328,6708,352],{"class":333},[328,6710,6711,6714,6716,6719,6722],{"class":330,"line":239},[328,6712,6713],{"class":333},"    remarkPlugins",[328,6715,374],{"class":3370},[328,6717,6718],{"class":333}," [",[328,6720,6721],{"class":435},"'remark-unwrap-images'",[328,6723,6724],{"class":333},"]\n",[328,6726,6727,6729],{"class":330,"line":381},[328,6728,3401],{"class":333},[328,6730,3386],{"class":3370},[328,6732,6733,6736],{"class":330,"line":387},[328,6734,6735],{"class":333},"}",[328,6737,3386],{"class":3370},[272,6739,6741],{"id":6740},"nuxt-color-mode","Nuxt Color mode",[12,6743,6744,6745],{},"This module helps your website support dark, light, sepia, and default color modes. Docs can be found ",[16,6746,5602],{"href":6747,"rel":6748},"https:\u002F\u002Fcolor-mode.nuxtjs.org\u002F",[88],[320,6750,6752],{"className":2677,"code":6751,"language":2679,"meta":25,"style":25},"npx nuxi module add color-mode\n",[284,6753,6754],{"__ignoreMap":25},[328,6755,6756,6758,6761,6763,6765],{"class":330,"line":155},[328,6757,6548],{"class":340},[328,6759,6760],{"class":2689}," nuxi",[328,6762,6554],{"class":2689},[328,6764,6557],{"class":2689},[328,6766,6767],{"class":2689}," color-mode\n",[12,6769,6770,6771],{},"make sure it is added to ",[284,6772,3340],{},[320,6774,6776],{"className":1019,"code":6775,"language":1021,"meta":25,"style":25},"export default defineNuxtConfig({\n  modules: [\n    '@nuxtjs\u002Fcolor-mode'\n  ]\n})\n\n",[284,6777,6778,6788,6797,6802,6807],{"__ignoreMap":25},[328,6779,6780,6782,6784,6786],{"class":330,"line":155},[328,6781,5433],{"class":2703},[328,6783,5436],{"class":2703},[328,6785,5439],{"class":340},[328,6787,1031],{"class":333},[328,6789,6790,6793,6795],{"class":330,"line":26},[328,6791,6792],{"class":333},"  modules",[328,6794,374],{"class":373},[328,6796,3945],{"class":333},[328,6798,6799],{"class":330,"line":239},[328,6800,6801],{"class":435},"    '@nuxtjs\u002Fcolor-mode'\n",[328,6803,6804],{"class":330,"line":381},[328,6805,6806],{"class":333},"  ]\n",[328,6808,6809],{"class":330,"line":387},[328,6810,1046],{"class":333},[272,6812,279],{"id":278},[12,6814,6815,6816,181,6818,6821],{},"The Tailwind CSS module enables the use of Tailwind CSS classes and particularly the Typographic Prose class for NuxtContent Markdown files. Tailwind CSS has a CSS 'reset', which resets the basic default classes for common HTML elements like ",[284,6817,6636],{},[284,6819,6820],{},"\u003Ch1>\u003C\u002Fh1>",".  The Tailwind Typographic Prose class is an Uber class which will style its element and all of its children elements with carefully chosen defaults for consistency and readability.",[167,6823,6533],{"id":6824},"installation-1",[12,6826,6827],{},"I installed the Tailwind CSS module using the nuxt cli like this:",[320,6829,6831],{"className":6539,"code":6830,"language":6541,"meta":25,"style":25},"npx nuxi@latest module add tailwindcss\n",[284,6832,6833],{"__ignoreMap":25},[328,6834,6835,6837,6839,6841,6843],{"class":330,"line":155},[328,6836,6548],{"class":340},[328,6838,6551],{"class":2689},[328,6840,6554],{"class":2689},[328,6842,6557],{"class":2689},[328,6844,6845],{"class":2689}," tailwindcss\n",[12,6847,6848],{},"And the Tailwind Typographic prose module like this:",[320,6850,6852],{"className":6539,"code":6851,"language":6541,"meta":25,"style":25},"npm install @tailwindcss\u002Ftypography\n",[284,6853,6854],{"__ignoreMap":25},[328,6855,6856,6858,6860],{"class":330,"line":155},[328,6857,43],{"class":340},[328,6859,6676],{"class":2689},[328,6861,6862],{"class":2689}," @tailwindcss\u002Ftypography\n",[12,6864,6865,6866,6868,6869,6872],{},"The typographic prose module is a plugin to the tailwind css nuxt module.  To configure it, create a ",[284,6867,5854],{}," file and add the following configuration. The ",[284,6870,6871],{},"100ch"," is the 100 character standard width for prose sections.",[320,6874,6876],{"className":1019,"code":6875,"language":1021,"meta":25,"style":25},"\u002F** @type {import('tailwindcss').Config} *\u002F\nmodule.exports = {\n  darkMode: 'class',\n  plugins: [\n    require('@tailwindcss\u002Ftypography')\n  ],\n  theme: {\n    extend: {\n      typography: {\n        DEFAULT: {\n          css: {\n            maxWidth: '100ch', \u002F\u002F add required value here\n          }\n        }\n      }\n    },\n  },\n}\n",[284,6877,6878,6893,6907,6919,6928,6940,6947,6956,6965,6974,6983,6992,7007,7012,7017,7022,7029,7035],{"__ignoreMap":25},[328,6879,6880,6883,6886,6890],{"class":330,"line":155},[328,6881,6882],{"class":3950},"\u002F** ",[328,6884,6885],{"class":1074},"@type",[328,6887,6889],{"class":6888},"sz2Vg"," {import('tailwindcss').Config}",[328,6891,6892],{"class":3950}," *\u002F\n",[328,6894,6895,6898,6900,6903,6905],{"class":330,"line":26},[328,6896,6897],{"class":516},"module",[328,6899,997],{"class":333},[328,6901,6902],{"class":516},"exports",[328,6904,3476],{"class":2703},[328,6906,352],{"class":333},[328,6908,6909,6912,6914,6917],{"class":330,"line":239},[328,6910,6911],{"class":333},"  darkMode",[328,6913,374],{"class":373},[328,6915,6916],{"class":435}," 'class'",[328,6918,3386],{"class":3370},[328,6920,6921,6924,6926],{"class":330,"line":381},[328,6922,6923],{"class":333},"  plugins",[328,6925,374],{"class":373},[328,6927,3945],{"class":333},[328,6929,6930,6933,6935,6938],{"class":330,"line":387},[328,6931,6932],{"class":340},"    require",[328,6934,1089],{"class":333},[328,6936,6937],{"class":435},"'@tailwindcss\u002Ftypography'",[328,6939,1095],{"class":333},[328,6941,6942,6945],{"class":330,"line":558},[328,6943,6944],{"class":333},"  ]",[328,6946,3386],{"class":3370},[328,6948,6949,6952,6954],{"class":330,"line":584},[328,6950,6951],{"class":333},"  theme",[328,6953,374],{"class":373},[328,6955,352],{"class":333},[328,6957,6958,6961,6963],{"class":330,"line":596},[328,6959,6960],{"class":333},"    extend",[328,6962,374],{"class":373},[328,6964,352],{"class":333},[328,6966,6967,6970,6972],{"class":330,"line":601},[328,6968,6969],{"class":333},"      typography",[328,6971,374],{"class":373},[328,6973,352],{"class":333},[328,6975,6976,6979,6981],{"class":330,"line":843},[328,6977,6978],{"class":333},"        DEFAULT",[328,6980,374],{"class":373},[328,6982,352],{"class":333},[328,6984,6985,6988,6990],{"class":330,"line":849},[328,6986,6987],{"class":333},"          css",[328,6989,374],{"class":373},[328,6991,352],{"class":333},[328,6993,6994,6997,6999,7002,7004],{"class":330,"line":859},[328,6995,6996],{"class":333},"            maxWidth",[328,6998,374],{"class":373},[328,7000,7001],{"class":435}," '100ch'",[328,7003,3964],{"class":3370},[328,7005,7006],{"class":3950}," \u002F\u002F add required value here\n",[328,7008,7009],{"class":330,"line":869},[328,7010,7011],{"class":333},"          }\n",[328,7013,7014],{"class":330,"line":878},[328,7015,7016],{"class":333},"        }\n",[328,7018,7019],{"class":330,"line":888},[328,7020,7021],{"class":333},"      }\n",[328,7023,7024,7027],{"class":330,"line":905},[328,7025,7026],{"class":333},"    }",[328,7028,3386],{"class":3370},[328,7030,7031,7033],{"class":330,"line":919},[328,7032,3401],{"class":333},[328,7034,3386],{"class":3370},[328,7036,7037],{"class":330,"line":928},[328,7038,384],{"class":333},[12,7040,7041],{},"Restarting the server will enable the new module.",[167,7043,7045],{"id":7044},"dev-tools","Dev Tools",[12,7047,7048],{},"Auto Install\nYou just need to go to your nuxt.config file and set dev tools to true:",[12,7050,3340],{},[320,7052,7054],{"className":1019,"code":7053,"language":1021,"meta":25,"style":25},"export default defineNuxtConfig({\n  devtools: { enabled: true },\n})\n",[284,7055,7056,7066,7086],{"__ignoreMap":25},[328,7057,7058,7060,7062,7064],{"class":330,"line":155},[328,7059,5433],{"class":2703},[328,7061,5436],{"class":2703},[328,7063,5439],{"class":340},[328,7065,1031],{"class":333},[328,7067,7068,7071,7073,7076,7078,7082,7084],{"class":330,"line":26},[328,7069,7070],{"class":333},"  devtools",[328,7072,374],{"class":373},[328,7074,7075],{"class":333}," { enabled",[328,7077,374],{"class":373},[328,7079,7081],{"class":7080},"snb_r"," true",[328,7083,3974],{"class":333},[328,7085,3386],{"class":3370},[328,7087,7088],{"class":330,"line":239},[328,7089,1046],{"class":333},[12,7091,7092],{},"Nuxt will automatically install the DevTools module for you.",[12,7094,7095],{},"You can check in the Vue dev tools under the modules section.",[167,7097,7099],{"id":7098},"using-tailwind-typographic-prose","Using Tailwind Typographic Prose",[12,7101,7102,7103,7108,7109,7112,7113,7116,7117,2615,7120,7123,7124,7126,7127,7129,7130,7133,7134,7137],{},"A common way to add the ",[16,7104,7107],{"href":7105,"rel":7106},"https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Ftailwindcss-typography?tab=readme-ov-file",[88],"Tailwind Typographic"," prose class is to add the ",[284,7110,7111],{},"class=\"prose\""," attribute to the parent element containing the NuxtContent ",[284,7114,7115],{},"\u003CContentRenderer \u002F>"," element, for example the surrounding ",[284,7118,7119],{},"\u003Cdiv>\u003C\u002Fdiv>",[284,7121,7122],{},"\u003Carticle>\u003C\u002Farticle>"," element. Tailwind CSS, by default, will strip all the normal default HTML styling, i.e. the ",[284,7125,6820],{}," element is not shown as large by default. When you use the Prose class it reasserts a clean and typography styling.  The ",[284,7128,6820],{}," elements are all set to this.  You add the tailwind class ",[284,7131,7132],{},"prose"," for light mode and ",[284,7135,7136],{},"dark: prose-invert"," for dark mode.",[320,7139,7141],{"className":322,"code":7140,"language":324,"meta":25,"style":25},"\u003Ctemplate>\n  \u003Carticle class=\"prose dark:prose-invert\">\n    \u003CContentRenderer \u002F>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n",[284,7142,7143,7151,7167,7176,7184],{"__ignoreMap":25},[328,7144,7145,7147,7149],{"class":330,"line":155},[328,7146,334],{"class":333},[328,7148,101],{"class":337},[328,7150,344],{"class":333},[328,7152,7153,7155,7158,7160,7162,7165],{"class":330,"line":26},[328,7154,424],{"class":333},[328,7156,7157],{"class":337},"article",[328,7159,429],{"class":340},[328,7161,432],{"class":373},[328,7163,7164],{"class":435},"\"prose dark:prose-invert\"",[328,7166,344],{"class":333},[328,7168,7169,7171,7174],{"class":330,"line":239},[328,7170,675],{"class":333},[328,7172,7173],{"class":337},"ContentRenderer",[328,7175,681],{"class":333},[328,7177,7178,7180,7182],{"class":330,"line":381},[328,7179,686],{"class":333},[328,7181,7157],{"class":337},[328,7183,344],{"class":333},[328,7185,7186,7188,7190],{"class":330,"line":387},[328,7187,390],{"class":333},[328,7189,101],{"class":337},[328,7191,344],{"class":333},[167,7193,7195],{"id":7194},"using-tailwind-css","Using Tailwind CSS",[12,7197,282,7198,287,7200,291,7202,295,7204,299,7206,303,7208,181,7210,310],{},[284,7199,286],{},[284,7201,290],{},[284,7203,294],{},[284,7205,298],{},[284,7207,302],{},[284,7209,306],{},[284,7211,309],{},[312,7213,315,7214],{"id":314},[317,7215],{},[320,7217,7218],{"className":322,"code":323,"language":324,"meta":25,"style":25},[284,7219,7220,7230,7236,7252,7256],{"__ignoreMap":25},[328,7221,7222,7224,7226,7228],{"class":330,"line":155},[328,7223,334],{"class":333},[328,7225,317],{"class":337},[328,7227,341],{"class":340},[328,7229,344],{"class":333},[328,7231,7232,7234],{"class":330,"line":26},[328,7233,349],{"class":340},[328,7235,352],{"class":333},[328,7237,7238,7240,7242,7244,7246,7248,7250],{"class":330,"line":239},[328,7239,357],{"class":333},[328,7241,361],{"class":360},[328,7243,364],{"class":360},[328,7245,367],{"class":333},[328,7247,370],{"class":360},[328,7249,374],{"class":373},[328,7251,378],{"class":377},[328,7253,7254],{"class":330,"line":381},[328,7255,384],{"class":333},[328,7257,7258,7260,7262],{"class":330,"line":387},[328,7259,390],{"class":333},[328,7261,317],{"class":337},[328,7263,344],{"class":333},[312,7265,398,7266],{"id":397},[101,7267],{},[12,7269,403,7270,406],{},[284,7271,290],{},[320,7273,7274],{"className":322,"code":409,"language":324,"meta":25,"style":25},[284,7275,7276,7284,7308],{"__ignoreMap":25},[328,7277,7278,7280,7282],{"class":330,"line":155},[328,7279,334],{"class":333},[328,7281,101],{"class":337},[328,7283,344],{"class":333},[328,7285,7286,7288,7290,7292,7294,7296,7298,7300,7302,7304,7306],{"class":330,"line":26},[328,7287,424],{"class":333},[328,7289,16],{"class":337},[328,7291,429],{"class":340},[328,7293,432],{"class":373},[328,7295,436],{"class":435},[328,7297,439],{"class":340},[328,7299,432],{"class":373},[328,7301,444],{"class":435},[328,7303,447],{"class":333},[328,7305,16],{"class":337},[328,7307,344],{"class":333},[328,7309,7310,7312,7314],{"class":330,"line":239},[328,7311,390],{"class":333},[328,7313,101],{"class":337},[328,7315,344],{"class":333},[312,7317,463],{"id":462},[12,7319,466,7320,181,7322,473,7324,476,7326,479,7328,406],{},[284,7321,469],{},[284,7323,472],{},[284,7325,469],{},[284,7327,472],{},[284,7329,482],{},[12,7331,485],{},[320,7333,7334],{"className":322,"code":488,"language":324,"meta":25,"style":25},[284,7335,7336,7344,7354,7366,7378,7390,7408,7418,7422],{"__ignoreMap":25},[328,7337,7338,7340,7342],{"class":330,"line":155},[328,7339,334],{"class":333},[328,7341,317],{"class":337},[328,7343,344],{"class":333},[328,7345,7346,7348,7350,7352],{"class":330,"line":26},[328,7347,503],{"class":340},[328,7349,506],{"class":333},[328,7351,12],{"class":337},[328,7353,511],{"class":333},[328,7355,7356,7358,7360,7362,7364],{"class":330,"line":239},[328,7357,517],{"class":516},[328,7359,374],{"class":373},[328,7361,522],{"class":377},[328,7363,525],{"class":435},[328,7365,528],{"class":333},[328,7367,7368,7370,7372,7374,7376],{"class":330,"line":381},[328,7369,533],{"class":516},[328,7371,374],{"class":373},[328,7373,522],{"class":377},[328,7375,540],{"class":435},[328,7377,528],{"class":333},[328,7379,7380,7382,7384,7386,7388],{"class":330,"line":387},[328,7381,547],{"class":516},[328,7383,374],{"class":373},[328,7385,522],{"class":377},[328,7387,540],{"class":435},[328,7389,528],{"class":333},[328,7391,7392,7394,7396,7398,7400,7402,7404,7406],{"class":330,"line":558},[328,7393,561],{"class":516},[328,7395,374],{"class":373},[328,7397,567],{"class":566},[328,7399,571],{"class":570},[328,7401,574],{"class":566},[328,7403,574],{"class":566},[328,7405,574],{"class":566},[328,7407,581],{"class":333},[328,7409,7410,7412,7414,7416],{"class":330,"line":584},[328,7411,357],{"class":333},[328,7413,361],{"class":360},[328,7415,364],{"class":360},[328,7417,593],{"class":333},[328,7419,7420],{"class":330,"line":596},[328,7421,384],{"class":333},[328,7423,7424,7426,7428],{"class":330,"line":601},[328,7425,390],{"class":333},[328,7427,317],{"class":337},[328,7429,344],{"class":333},[12,7431,610,7432,614,7434,617,7436,621,7438,625,7440,625,7442,631,7444,634],{},[284,7433,613],{},[284,7435,503],{},[284,7437,620],{},[284,7439,624],{},[284,7441,628],{},[284,7443,628],{},[284,7445,298],{},[272,7447,7449],{"id":7448},"social-share-buttons","Social Share Buttons",[12,7451,7452,7453,7458],{},"Since each page has custom metadata, I also wanted convenience buttons to quickly share the page on social media. ",[16,7454,7457],{"href":7455,"rel":7456,":target":191},"https:\u002F\u002Fnuxt.com\u002Fmodules\u002Fnuxt-social-share",[88],"Stefano Bartoletti Nuxt Social Share module"," was a good and easy as following the instructions to add the module. Then add the component into the page template.",[12,7460,7461],{},"The terminal command I issued.",[320,7463,7465],{"className":6539,"code":7464,"language":6541,"meta":25,"style":25},"npx nuxi@latest module add nuxt-social-share\n",[284,7466,7467],{"__ignoreMap":25},[328,7468,7469,7471,7473,7475,7477],{"class":330,"line":155},[328,7470,6548],{"class":340},[328,7472,6551],{"class":2689},[328,7474,6554],{"class":2689},[328,7476,6557],{"class":2689},[328,7478,7479],{"class":2689}," nuxt-social-share\n",[12,7481,7482,7484],{},[284,7483,3340],{}," entries required.  You need to replace your public website instead of the placeholder website below.",[320,7486,7488],{"className":3358,"code":7487,"language":3360,"meta":25,"style":25},"  modules: [\n    '@stefanobartoletti\u002Fnuxt-social-share'\n  ],\n\n  socialShare: {\n    baseUrl: 'https:\u002F\u002Fplaceholder.jamstart.com'\n  }\n",[284,7489,7490,7498,7503,7509,7513,7521,7530],{"__ignoreMap":25},[328,7491,7492,7494,7496],{"class":330,"line":155},[328,7493,6792],{"class":333},[328,7495,374],{"class":3370},[328,7497,3945],{"class":333},[328,7499,7500],{"class":330,"line":26},[328,7501,7502],{"class":435},"    '@stefanobartoletti\u002Fnuxt-social-share'\n",[328,7504,7505,7507],{"class":330,"line":239},[328,7506,6944],{"class":333},[328,7508,3386],{"class":3370},[328,7510,7511],{"class":330,"line":381},[328,7512,2233],{"emptyLinePlaceholder":51},[328,7514,7515,7517,7519],{"class":330,"line":387},[328,7516,3412],{"class":333},[328,7518,374],{"class":3370},[328,7520,352],{"class":333},[328,7522,7523,7525,7527],{"class":330,"line":558},[328,7524,3421],{"class":333},[328,7526,374],{"class":3370},[328,7528,7529],{"class":435}," 'https:\u002F\u002Fplaceholder.jamstart.com'\n",[328,7531,7532],{"class":330,"line":584},[328,7533,3431],{"class":333},[12,7535,7536],{},"Here is the usage within the code.",[320,7538,7540],{"className":322,"code":7539,"language":324,"meta":25,"style":25},"\u003Ctemplate>\n\u002F\u003C!-- snip -->\n  \u003CSocialShare\n    v-for=\"network in ['facebook', 'x', 'linkedin', 'email']\"\n    :key=\"network\"\n    :label=\"false\"\n    :network=\"network\"\n    :styled=\"true\"\n  \u002F>\n\u003C!-- snip -->\n\u003C\u002Ftemplate>\n",[284,7541,7542,7550,7557,7564,7574,7584,7594,7603,7613,7618,7622],{"__ignoreMap":25},[328,7543,7544,7546,7548],{"class":330,"line":155},[328,7545,334],{"class":333},[328,7547,101],{"class":337},[328,7549,344],{"class":333},[328,7551,7552,7554],{"class":330,"line":26},[328,7553,5714],{"class":333},[328,7555,7556],{"class":3950},"\u003C!-- snip -->\n",[328,7558,7559,7561],{"class":330,"line":239},[328,7560,424],{"class":333},[328,7562,7563],{"class":337},"SocialShare\n",[328,7565,7566,7569,7571],{"class":330,"line":381},[328,7567,7568],{"class":340},"    v-for",[328,7570,432],{"class":373},[328,7572,7573],{"class":435},"\"network in ['facebook', 'x', 'linkedin', 'email']\"\n",[328,7575,7576,7579,7581],{"class":330,"line":387},[328,7577,7578],{"class":340},"    :key",[328,7580,432],{"class":373},[328,7582,7583],{"class":435},"\"network\"\n",[328,7585,7586,7589,7591],{"class":330,"line":558},[328,7587,7588],{"class":340},"    :label",[328,7590,432],{"class":373},[328,7592,7593],{"class":435},"\"false\"\n",[328,7595,7596,7599,7601],{"class":330,"line":584},[328,7597,7598],{"class":340},"    :network",[328,7600,432],{"class":373},[328,7602,7583],{"class":435},[328,7604,7605,7608,7610],{"class":330,"line":596},[328,7606,7607],{"class":340},"    :styled",[328,7609,432],{"class":373},[328,7611,7612],{"class":435},"\"true\"\n",[328,7614,7615],{"class":330,"line":601},[328,7616,7617],{"class":333},"  \u002F>\n",[328,7619,7620],{"class":330,"line":843},[328,7621,7556],{"class":3950},[328,7623,7624,7626,7628],{"class":330,"line":849},[328,7625,390],{"class":333},[328,7627,101],{"class":337},[328,7629,344],{"class":333},[317,7631,7632],{},"html pre.shiki code .srTi1, html code.shiki .srTi1{--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-sepia:#A6E22E}html pre.shiki code .sCqw6, html code.shiki .sCqw6{--shiki-default:#2B5581;--shiki-dark:#9DB1C5;--shiki-sepia:#E6DB74}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);}html .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html pre.shiki code .sxUMQ, html code.shiki .sxUMQ{--shiki-default:#24292EFF;--shiki-dark:#B392F0;--shiki-sepia:#F8F8F2}html pre.shiki code .szMGX, html code.shiki .szMGX{--shiki-default:#22863A;--shiki-dark:#FFAB70;--shiki-sepia:#F92672}html pre.shiki code .skixG, html code.shiki .skixG{--shiki-default:#D32F2F;--shiki-dark:#F97583;--shiki-sepia:#F8F8F2}html pre.shiki code .shHn5, html code.shiki .shHn5{--shiki-default:#22863A;--shiki-dark:#FFAB70;--shiki-sepia:#E6DB74}html pre.shiki code .sizxJ, html code.shiki .sizxJ{--shiki-default:#212121;--shiki-dark:#BBBBBB;--shiki-sepia:#F8F8F2}html pre.shiki code .s-2sM, html code.shiki .s-2sM{--shiki-default:#D32F2F;--shiki-dark:#F97583;--shiki-sepia:#F92672}html pre.shiki code .sNgeA, html code.shiki .sNgeA{--shiki-default:#C2C3C5;--shiki-dark:#6B737C;--shiki-sepia:#88846F}html pre.shiki code .s-Tb5, html code.shiki .s-Tb5{--shiki-default:#D32F2F;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit;--shiki-sepia:#66D9EF;--shiki-sepia-font-style:italic}html pre.shiki code .sz2Vg, html code.shiki .sz2Vg{--shiki-default:#6F42C1;--shiki-default-text-decoration:inherit;--shiki-dark:#B392F0;--shiki-dark-text-decoration:inherit;--shiki-sepia:#A6E22E;--shiki-sepia-text-decoration:underline}html pre.shiki code .sibI6, html code.shiki .sibI6{--shiki-default:#1976D2;--shiki-default-font-style:inherit;--shiki-dark:#79B8FF;--shiki-dark-font-style:inherit;--shiki-sepia:#66D9EF;--shiki-sepia-font-style:italic}html pre.shiki code .snb_r, html code.shiki .snb_r{--shiki-default:#1976D2;--shiki-dark:#79B8FF;--shiki-sepia:#AE81FF}html pre.shiki code .sraLd, html code.shiki .sraLd{--shiki-default:#1976D2;--shiki-dark:#79B8FF;--shiki-sepia:#F8F8F2}html pre.shiki code .sF6MT, html code.shiki .sF6MT{--shiki-default:#1976D2;--shiki-dark:#F8F8F8;--shiki-sepia:#F8F8F2}html pre.shiki code .s0Ixy, html code.shiki .s0Ixy{--shiki-default:#1976D2;--shiki-dark:#F8F8F8;--shiki-sepia:#AE81FF}html pre.shiki code .sPL9d, html code.shiki .sPL9d{--shiki-default:#D32F2F;--shiki-dark:#F8F8F8;--shiki-sepia:#F92672}",{"title":25,"searchDepth":26,"depth":26,"links":7634},[7635,7638,7642,7643,7649],{"id":6491,"depth":26,"text":6492,"children":7636},[7637],{"id":6532,"depth":239,"text":6533},{"id":6563,"depth":26,"text":6564,"children":7639},[7640,7641],{"id":5060,"depth":239,"text":5060},{"id":6663,"depth":239,"text":6664},{"id":6740,"depth":26,"text":6741},{"id":278,"depth":26,"text":279,"children":7644},[7645,7646,7647,7648],{"id":6824,"depth":239,"text":6533},{"id":7044,"depth":239,"text":7045},{"id":7098,"depth":239,"text":7099},{"id":7194,"depth":239,"text":7195},{"id":7448,"depth":26,"text":7449},"2025-03-04","Developer notes about the modules, modifications, and issues used to build the JAMStart Starter site.","\u002Fimages\u002Fprojects\u002Fsetupcontent.jpg","typewriter with content on the page",{"topic":1469},"\u002Fprojects\u002Fjamstart\u002Fcontent",{"title":6486,"description":7651},{"loc":7655},"projects\u002Fjamstart\u002F4.Content","Content","I7b-44guK15n5pkmL5H7Y_bi7jJifIGK1Shbfk88YrY",{"id":7662,"title":7663,"author":7,"body":7664,"content_type":1111,"date_created":8600,"date_modified":30,"description":8601,"editor":30,"extension":32,"guide":1114,"image":8602,"image_alt":8603,"is_list_exclude":35,"is_manual_image":35,"is_manual_title":35,"is_toc":51,"keywords":30,"meta":8604,"navigation":51,"og_description":30,"og_image":30,"og_image_alt":30,"og_title":30,"path":8605,"peer_order":387,"project":62,"projects":30,"published":54,"seo":8606,"sitemap":8607,"stem":8608,"tagline":8609,"version":30,"x_card":30,"x_creator_handle":30,"x_description":30,"x_image":30,"x_image_alt":30,"x_title":30,"__hash__":8610},"content\u002Fprojects\u002Fjamstart\u002F5.Components.md","Content Components",{"type":9,"value":7665,"toc":8580},[7666,7672,7689,7691,7705,7709,7712,7723,7726,7738,7742,7753,7756,7760,7770,7774,7794,7798,7828,7832,7839,7843,7861,7870,7918,7922,7931,7939,7942,7953,7972,7975,7985,7997,8035,8039,8057,8061,8064,8096,8107,8114,8117,8157,8160,8167,8197,8201,8206,8213,8223,8227,8230,8234,8243,8293,8296,8377,8381,8383,8388,8393,8396,8398,8404,8409,8411,8413,8418,8422,8424,8426,8431,8436,8439,8441,8446,8451,8453,8457,8460,8465,8470,8472,8475,8479,8483,8485,8488,8492,8496,8498,8501,8505,8509,8511,8514,8518,8522,8524,8528,8531,8537,8539,8542,8546,8549,8552,8556,8558,8561,8565,8568,8571,8575,8577],[66,7667,7669],{"size":7668},"xl",[12,7670,7671],{},"N",[12,7673,7674,7675,7677,7678,7681,7682,181,7685,7688],{},"uxtContent Custom Components are vue.js components that reside in SFC ",[284,7676,286],{}," file(s) and are used to add custom UI from Markdown content text. For example a custom component can be accessed in Markdown with ",[284,7679,7680],{},"::figcaption"," and convert specified markdown text and links into a ",[284,7683,7684],{},"\u003Cfigure>\u003C\u002Ffigure>",[284,7686,7687],{},"\u003Cfigcaption>\u003C\u002Ffigcaption>"," HTML elements.",[272,7690,2414],{"id":2413},[172,7692,7693,7699],{},[175,7694,7695],{},[16,7696,7698],{"href":7697},"\u002Fcheats\u002Fnuxtcontentcheat","NuxtContent Cheat Sheet",[175,7700,7701],{},[16,7702,7704],{"href":7703},"\u002Fblog\u002F2024\u002Fnuxtcontentcomponentimplement","NuxtContent Content Component Blog",[272,7706,7708],{"id":7707},"prerequisites","Prerequisites",[12,7710,7711],{},"To use the JAMStart Content Components in different projects the following prerequisites are required.",[172,7713,7714,7717,7720],{},[175,7715,7716],{},"nuxt project",[175,7718,7719],{},"NuxtContent module",[175,7721,7722],{},"Tailwind Typographic Prose module",[312,7724,1189],{"id":7725},"nuxtcontent",[12,7727,644,7728,7733,7734,7737],{},[16,7729,7732],{"href":7730,"rel":7731},"https:\u002F\u002Fnuxt.com\u002Fmodules\u002Fcontent",[88],"Nuxt Content"," module for a Nuxt.js project allows you to write beautiful web pages and articles using ",[16,7735,146],{"href":7736},"\u002Fcheats\u002Fmarkdown",". Markdown is a text file syntax that can be quickly converted into HTML with headers, text, images, etc. A Markdown text file is small, readable on its own, and quick to write in any text editor. The NuxtContent module reads the Markdown files and converts them to HTML.",[312,7739,7741],{"id":7740},"tailwind-css-typographic-prose","Tailwind CSS Typographic Prose",[12,7743,7744,7745,7747,7748,7752],{},"The Tailwind CSS Typographic Prose module automatically styles common HTML elements for readability on the web. By adding the ",[284,7746,7132],{}," class to the parent element all the children elements inherit the base readability. See this ",[16,7749,7751],{"href":7750},"\u002Fabout\u002Fsitebuild#tailwind-css","Tailwind Typographic implementation"," for installation of the module and issues I've encountered with it.",[272,7754,7663],{"id":7755},"content-components",[312,7757,7759],{"id":7758},"content-component-directory","Content Component Directory",[12,7761,7762,7763,7766,7767,7769],{},"The JAMStart content component files can be found at ",[284,7764,7765],{},".\u002Fapp\u002Fcomponents\u002Fcontent",", and adding a new content component is as simple as placing the component ",[284,7768,286],{}," file there.",[167,7771,7773],{"id":7772},"markdown-usage","Markdown Usage",[12,7775,7776,7777,7780,7781,7784,7785,7789,7790,7793],{},"The Markdown syntax for specifying which content will belong to the custom component is to use start tag ",[284,7778,7779],{},"::[name]"," and an end ",[284,7782,7783],{},"::"," tags.  Everything in between the tags is the ",[7786,7787,7788],"em",{},"default slot"," of the component.  The ",[284,7791,7792],{},"[name]"," being the name of the custom component.",[312,7795,7797],{"id":7796},"name-casing","Name Casing",[12,7799,7800,7801,2615,7804,7807,7808,7810,7811,625,7814,625,7817,7820,7821,7824,7825,7827],{},"To invoke the custom component from your Markdown content, you can use snake-case, ",[284,7802,7803],{},"PascalCase",[284,7805,7806],{},"camelCase"," for multi-worded components, i.e. a custom component ",[284,7809,6166],{}," could be invoked as ",[284,7812,7813],{},"::figure-caption",[284,7815,7816],{},"::FigureCaption",[284,7818,7819],{},"::figureCaption",", or ",[284,7822,7823],{},"::figurecaption"," (case is not meaningful). The ",[284,7826,7813],{}," style is recommended as it might be more easy to type for content writers.",[167,7829,7831],{"id":7830},"slots","Slots",[12,7833,7834,7835,7838],{},"Content components can have a single default slot or a default slot and multiple additional slots. Each Custom Component is different, and read the component documentation to see what slots it supports. As an example a ",[284,7836,7837],{},"FigureCaption"," component, might use the default slot for the figure and a named slot for the caption.",[312,7840,7842],{"id":7841},"slot-markdown-syntax","Slot Markdown Syntax",[12,7844,7845,7846,7849,7850,7852,7853,7856,7857,7860],{},"Within the NuxtContent Custom Component block, the text up to the next slot or the end of the block is the default slot.  Named slots are specified with ",[284,7847,7848],{},"#[SlotName]"," on a single line and everything after that until the next named component or end of the block is for that slot. For example, a ",[284,7851,7837],{}," might specify the figure in the default slot, the main caption in the ",[284,7854,7855],{},"#caption"," named slot, and the sub caption in ",[284,7858,7859],{},"#subcaption"," named slot.",[12,7862,7863,7864,7866,7867,7869],{},"For example, this shows ",[284,7865,7837],{}," custom component using default and ",[284,7868,7855],{}," slots.",[320,7871,7873],{"className":6574,"code":7872,"language":32,"meta":25,"style":25},"::FigureCaption\n![Pennock Projects Logo as a Circuit Board Badge](\u002Fimages\u002FPennockProjectsLogo.png)\n\n#caption\nThis is the caption for the caption named slot\n\n#subcaption\nThis is the sub caption for the subcaption named slot\n::\n",[284,7874,7875,7880,7885,7889,7894,7899,7903,7908,7913],{"__ignoreMap":25},[328,7876,7877],{"class":330,"line":155},[328,7878,7879],{},"::FigureCaption\n",[328,7881,7882],{"class":330,"line":26},[328,7883,7884],{},"![Pennock Projects Logo as a Circuit Board Badge](\u002Fimages\u002FPennockProjectsLogo.png)\n",[328,7886,7887],{"class":330,"line":239},[328,7888,2233],{"emptyLinePlaceholder":51},[328,7890,7891],{"class":330,"line":381},[328,7892,7893],{},"#caption\n",[328,7895,7896],{"class":330,"line":387},[328,7897,7898],{},"This is the caption for the caption named slot\n",[328,7900,7901],{"class":330,"line":558},[328,7902,2233],{"emptyLinePlaceholder":51},[328,7904,7905],{"class":330,"line":584},[328,7906,7907],{},"#subcaption\n",[328,7909,7910],{"class":330,"line":596},[328,7911,7912],{},"This is the sub caption for the subcaption named slot\n",[328,7914,7915],{"class":330,"line":601},[328,7916,7917],{},"::\n",[167,7919,7921],{"id":7920},"passing-props","Passing Props",[12,7923,7924,7925,7930],{},"To pass ",[16,7926,7929],{"href":7927,"rel":7928},"https:\u002F\u002Fcontent.nuxt.com\u002Fusage\u002Fmarkdown#props",[88],"properties"," to a NuxtContent components there are two different methods:",[970,7932,7933,7936],{},[175,7934,7935],{},"Inline Method",[175,7937,7938],{},"YAML Method",[312,7940,7935],{"id":7941},"inline-method",[12,7943,7944,7945,7948,7949,7952],{},"The inline method uses ",[284,7946,7947],{},"{}"," after the component name (no space) with different ",[284,7950,7951],{},"key=value"," pairs separated by a space.",[320,7954,7956],{"className":6574,"code":7955,"language":32,"meta":25,"style":25},"::alert{type=\"warning\" icon=\"exclamation-circle\"}\nOops! An error occurred\n::\n",[284,7957,7958,7963,7968],{"__ignoreMap":25},[328,7959,7960],{"class":330,"line":155},[328,7961,7962],{},"::alert{type=\"warning\" icon=\"exclamation-circle\"}\n",[328,7964,7965],{"class":330,"line":26},[328,7966,7967],{},"Oops! An error occurred\n",[328,7969,7970],{"class":330,"line":239},[328,7971,7917],{},[312,7973,7938],{"id":7974},"yaml-method",[12,7976,7977,7978,7981,7982],{},"The YAML method uses ",[284,7979,7980],{},"--- {props} ---"," in the space below the component name, one per key in YAML syntax, i.e. ",[284,7983,7984],{},"key: value",[12,7986,7987,7988,625,7991,5231,7993,7996],{},"In this example, you are passing ",[284,7989,7990],{},"icon",[284,7992,1291],{},[284,7994,7995],{},"title"," props to the `IconCard' custom component.",[320,7998,8000],{"className":6574,"code":7999,"language":32,"meta":25,"style":25},"::icon-card\n---\nicon: IconNuxt\ndescription: Harness the full power of Nuxt and the Nuxt ecosystem.\ntitle: Nuxt Architecture.\n---\n::\n",[284,8001,8002,8007,8012,8017,8022,8027,8031],{"__ignoreMap":25},[328,8003,8004],{"class":330,"line":155},[328,8005,8006],{},"::icon-card\n",[328,8008,8009],{"class":330,"line":26},[328,8010,8011],{},"---\n",[328,8013,8014],{"class":330,"line":239},[328,8015,8016],{},"icon: IconNuxt\n",[328,8018,8019],{"class":330,"line":381},[328,8020,8021],{},"description: Harness the full power of Nuxt and the Nuxt ecosystem.\n",[328,8023,8024],{"class":330,"line":387},[328,8025,8026],{},"title: Nuxt Architecture.\n",[328,8028,8029],{"class":330,"line":558},[328,8030,8011],{},[328,8032,8033],{"class":330,"line":584},[328,8034,7917],{},[272,8036,8038],{"id":8037},"figurecaption-component","FigureCaption Component",[260,8040,8041,8045],{},[70,8042],{"alt":8043,"src":8044},"Fanciful 16th century map of Asia in the shape of Pegasus","\u002Fimages\u002Fprojects\u002FFigureCaptionExample.jpg",[101,8046,8047],{"v-slot:caption":25},[12,8048,8049,8052,8053,8056],{},[1742,8050,8051],{},"Figure 1"," - ",[7786,8054,8055],{},"Asia in the Shape of a Winged Horse"," is Heinrich Bunting's 16th century map of the continent of Asia shaped in the figure of Pegasus, the winged horse sprung from the decapitated body of Medusa, from Greek mythology",[167,8058,8060],{"id":8059},"how-to-use-figurecaption","How to Use FigureCaption",[12,8062,8063],{},"FigureCaption is a custom Nuxt Content Component that adds an image with a caption to any Markdown page.  To add this, include the following bare bones text into a Markdown content page.",[320,8065,8069],{"className":8066,"code":8067,"language":8068,"meta":25,"style":25},"language-markdown shiki shiki-themes min-light min-dark monokai","\n::figure-caption\n\n#caption\n\n::\n\n","markdown",[284,8070,8071,8075,8080,8084,8088,8092],{"__ignoreMap":25},[328,8072,8073],{"class":330,"line":155},[328,8074,2233],{"emptyLinePlaceholder":51},[328,8076,8077],{"class":330,"line":26},[328,8078,8079],{},"::figure-caption\n",[328,8081,8082],{"class":330,"line":239},[328,8083,2233],{"emptyLinePlaceholder":51},[328,8085,8086],{"class":330,"line":381},[328,8087,7893],{},[328,8089,8090],{"class":330,"line":387},[328,8091,2233],{"emptyLinePlaceholder":51},[328,8093,8094],{"class":330,"line":558},[328,8095,7917],{},[12,8097,8098,8099,8102,8103,181,8105],{},"Insert a picture in the form of ",[284,8100,8101],{},"[picture alt text](\\url\\to\\image)"," between ",[284,8104,7813],{},[284,8106,7855],{},[12,8108,8109,8110,181,8112],{},"Write the caption text between ",[284,8111,7855],{},[284,8113,7783],{},[12,8115,8116],{},"For example, to get the same Figure Capture as is displayed at the top of this page, write the following text into a Markdown content page.",[320,8118,8120],{"className":8066,"code":8119,"language":8068,"meta":25,"style":25},"## FigureCaption Component\n\n::FigureCaption\n![Fanciful 16th century map of Asia in the shape of Pegasus](\u002Fimages\u002Fprojects\u002FFigureCaptionExample.jpg)\n\n#caption\n**Figure 1** - _Asia in the Shape of a Winged Horse_ is Heinrich Bunting's 16th century map of the continent of Asia shaped in the figure of Pegasus, the winged horse sprung from the decapitated body of Medusa, from Greek mythology\n::\n\n",[284,8121,8122,8127,8131,8135,8140,8144,8148,8153],{"__ignoreMap":25},[328,8123,8124],{"class":330,"line":155},[328,8125,8126],{},"## FigureCaption Component\n",[328,8128,8129],{"class":330,"line":26},[328,8130,2233],{"emptyLinePlaceholder":51},[328,8132,8133],{"class":330,"line":239},[328,8134,7879],{},[328,8136,8137],{"class":330,"line":381},[328,8138,8139],{},"![Fanciful 16th century map of Asia in the shape of Pegasus](\u002Fimages\u002Fprojects\u002FFigureCaptionExample.jpg)\n",[328,8141,8142],{"class":330,"line":387},[328,8143,2233],{"emptyLinePlaceholder":51},[328,8145,8146],{"class":330,"line":558},[328,8147,7893],{},[328,8149,8150],{"class":330,"line":584},[328,8151,8152],{},"**Figure 1** - _Asia in the Shape of a Winged Horse_ is Heinrich Bunting's 16th century map of the continent of Asia shaped in the figure of Pegasus, the winged horse sprung from the decapitated body of Medusa, from Greek mythology\n",[328,8154,8155],{"class":330,"line":596},[328,8156,7917],{},[167,8158,8159],{"id":284},"Code",[12,8161,8162,8163,8166],{},"The Figure with Caption content component at ",[284,8164,8165],{},"\\app\\components\\content\\FigureCaption.vue"," renders an image as a full block with an optional caption of text below.  It shows:",[172,8168,8169,8172,8174,8179,8185,8191],{},[175,8170,8171],{},"Block Component",[175,8173,7831],{},[175,8175,8176,8177],{},"Default Slot ",[284,8178,703],{},[175,8180,8181,8182],{},"Named Slots ",[284,8183,8184],{},"\u003Cslot name=\"caption\" \u002F>",[175,8186,8187,8188],{},"Conditional Slot ",[284,8189,8190],{},"v-if=\"$slots.caption\"",[175,8192,8193,8194],{},"Combinator Selector in Scoped Style ",[284,8195,8196],{},":deep(img)",[272,8198,8200],{"id":8199},"monkinset-component","MonkInset Component",[66,8202,8203],{"size":68},[12,8204,8205],{},"M",[66,8207,8209],{"size":7668,"float":8208},"right",[70,8210],{"alt":8211,"src":8212},"Page from a Bible Illuminated Manuscript","\u002Fimages\u002Fprojects\u002FIlluminatedManuscriptBiblePage.jfif",[12,8214,8215,8216,8218,8219],{},"onkInset is a JAMStart developed NuxtContent custom component that cordons specific character or image content (actually any text or images) in a markdown file and places it in a separate sized ",[284,8217,7119],{}," element and floats it right or left. The intent is that one can create an effect similar to large embellished initial characters of an illuminated medieval manuscript and the other text 'flows' around it. See ",[16,8220,8222],{"href":8221},"#examples","examples",[167,8224,8226],{"id":8225},"monkinset-slots","MonkInset Slots",[12,8228,8229],{},"MonkInset only has a default slot.",[167,8231,8233],{"id":8232},"monkinset-parameters","MonkInset Parameters",[12,8235,8236,8237,181,8240],{},"The two main key parameters for MonkInset ",[284,8238,8239],{},"float",[284,8241,8242],{},"size",[172,8244,8245,8263],{},[175,8246,8247,8250,8251],{},[284,8248,8249],{},"float:"," - float to right or left\n",[172,8252,8253,8259],{},[175,8254,8255,8258],{},[284,8256,8257],{},"left"," (default)",[175,8260,8261],{},[284,8262,8208],{},[175,8264,8265,8268,8269],{},[284,8266,8267],{},"size:"," - pick a size\n",[172,8270,8271,8276,8281,8285,8289],{},[175,8272,8273],{},[284,8274,8275],{},"xs",[175,8277,8278],{},[284,8279,8280],{},"sm",[175,8282,8283,8258],{},[284,8284,32],{},[175,8286,8287],{},[284,8288,68],{},[175,8290,8291],{},[284,8292,7668],{},[12,8294,8295],{},"Additionally, some CSS parameters can be overridden",[172,8297,8298,8322,8336,8346,8357,8367],{},[175,8299,8300,8303,8304,8306,8307,8310,8311,8314,8315,8318,8319,997],{},[284,8301,8302],{},"margin"," - This is the margin on the side of the MonkInset ",[284,8305,7119],{}," element separating it from the content on the other side.  If ",[284,8308,8309],{},"float=\"left\""," it is ",[284,8312,8313],{},"margin-right:",", if ",[284,8316,8317],{},"\"float=right\"",", it is ",[284,8320,8321],{},"margin-left",[175,8323,8324,8327,8328,8331,8332,8335],{},[284,8325,8326],{},"maxHeight"," - This the ",[284,8329,8330],{},"max-height:"," of any ",[284,8333,8334],{},"\u003Cimg>\u003Cimg>"," element within MonkInset",[175,8337,8338,8327,8341,8331,8344,8335],{},[284,8339,8340],{},"maxWidth",[284,8342,8343],{},"max-width",[284,8345,8334],{},[175,8347,8348,8351,8352,8331,8355,8335],{},[284,8349,8350],{},"fontSize"," - This is the ",[284,8353,8354],{},"fontsize:",[284,8356,6636],{},[175,8358,8359,8351,8362,8331,8365,8335],{},[284,8360,8361],{},"height",[284,8363,8364],{},"height:",[284,8366,6636],{},[175,8368,8369,8351,8372,8331,8375,8335],{},[284,8370,8371],{},"lineHeight",[284,8373,8374],{},"line-height:",[284,8376,6636],{},[167,8378,8380],{"id":8379},"text-examples","Text Examples",[312,8382,8275],{"id":8275},[66,8384,8385],{"size":8275},[12,8386,8387],{},"Xs",[66,8389,8390],{"size":8275,"float":8208},[12,8391,8392],{},"X",[12,8394,8395],{},"Cillum esse pariatur et culpa amet. Commodo non do dolor exercitation. Ad cupidatat commodo quis quis consequat.",[312,8397,8280],{"id":8280},[66,8399,8401],{"size":8400},"small",[12,8402,8403],{},"S",[66,8405,8406],{"size":8400,"float":8208},[12,8407,8408],{},"Sm",[12,8410,8395],{},[312,8412,32],{"id":32},[66,8414,8415],{},[12,8416,8417],{},"Md",[66,8419,8420],{"float":8208},[12,8421,8205],{},[12,8423,8395],{},[312,8425,68],{"id":68},[66,8427,8428],{"size":68},[12,8429,8430],{},"L",[66,8432,8433],{"size":68,"float":8208},[12,8434,8435],{},"Lg",[12,8437,8438],{},"Cillum esse pariatur et culpa amet. Commodo non do dolor exercitation. Ad cupidatat commodo quis quis consequat.\nCillum esse pariatur et culpa amet. Commodo non do dolor exercitation. Ad cupidatat commodo quis quis consequat.",[312,8440,7668],{"id":7668},[66,8442,8443],{"size":7668},[12,8444,8445],{},"Xl",[66,8447,8448],{"size":7668,"float":8208},[12,8449,8450],{},"l",[12,8452,8438],{},[167,8454,8456],{"id":8455},"emoji-examples","Emoji Examples",[312,8458,8275],{"id":8459},"xs-1",[66,8461,8462],{"size":8275},[12,8463,8464],{},"💣",[66,8466,8467],{"size":8275,"float":8208},[12,8468,8469],{},"⛄",[12,8471,8395],{},[312,8473,8280],{"id":8474},"sm-1",[66,8476,8477],{"size":8280},[12,8478,8469],{},[66,8480,8481],{"size":8280,"float":8208},[12,8482,8464],{},[12,8484,8395],{},[312,8486,32],{"id":8487},"md-1",[66,8489,8490],{},[12,8491,8464],{},[66,8493,8494],{"float":8208},[12,8495,8469],{},[12,8497,8395],{},[312,8499,68],{"id":8500},"lg-1",[66,8502,8503],{"size":68},[12,8504,8469],{},[66,8506,8507],{"size":68,"float":8208},[12,8508,8464],{},[12,8510,8438],{},[312,8512,7668],{"id":8513},"xl-1",[66,8515,8516],{"size":7668},[12,8517,8464],{},[66,8519,8520],{"size":7668,"float":8208},[12,8521,8469],{},[12,8523,8438],{},[167,8525,8527],{"id":8526},"image-examples","Image Examples",[312,8529,8275],{"id":8530},"xs-2",[66,8532,8533],{"size":8275},[70,8534],{"alt":8535,"src":8536},"Pennock Projects Logo as a Circuit Board Badge","\u002Fimages\u002FPennockProjectsLogo.png",[12,8538,8438],{},[312,8540,8280],{"id":8541},"sm-2",[66,8543,8544],{"size":8280,"float":8208},[70,8545],{"alt":8535,"src":8536},[12,8547,8548],{},"Cillum esse pariatur et culpa amet. Commodo non do dolor exercitation. Ad cupidatat commodo quis quis consequat. Cillum esse pariatur et culpa amet. Commodo non do dolor exercitation. Ad cupidatat commodo quis quis consequat.",[312,8550,32],{"id":8551},"md-2",[66,8553,8554],{},[70,8555],{"alt":8535,"src":8536},[12,8557,8438],{},[312,8559,68],{"id":8560},"lg-2",[66,8562,8563],{"size":68,"float":8208},[70,8564],{"alt":8535,"src":8536},[12,8566,8567],{},"Cillum esse pariatur et culpa amet. Commodo non do dolor exercitation. Ad cupidatat commodo quis quis consequat.\nCillum esse pariatur et culpa amet. Commodo non do dolor exercitation. Ad cupidatat commodo quis quis consequat.\nCillum esse pariatur et culpa amet. Commodo non do dolor exercitation. Ad cupidatat commodo quis quis consequat.",[312,8569,7668],{"id":8570},"xl-2",[66,8572,8573],{"size":7668},[70,8574],{"alt":8535,"src":8536},[12,8576,8567],{},[317,8578,8579],{},"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);}html .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}",{"title":25,"searchDepth":26,"depth":26,"links":8581},[8582,8583,8584,8589,8593],{"id":2413,"depth":26,"text":2414},{"id":7707,"depth":26,"text":7708},{"id":7755,"depth":26,"text":7663,"children":8585},[8586,8587,8588],{"id":7772,"depth":239,"text":7773},{"id":7830,"depth":239,"text":7831},{"id":7920,"depth":239,"text":7921},{"id":8037,"depth":26,"text":8038,"children":8590},[8591,8592],{"id":8059,"depth":239,"text":8060},{"id":284,"depth":239,"text":8159},{"id":8199,"depth":26,"text":8200,"children":8594},[8595,8596,8597,8598,8599],{"id":8225,"depth":239,"text":8226},{"id":8232,"depth":239,"text":8233},{"id":8379,"depth":239,"text":8380},{"id":8455,"depth":239,"text":8456},{"id":8526,"depth":239,"text":8527},"2024-07-24","How to use Vue.js Nuxt.js NuxtContent Custom Components in Markdown","\u002Fimages\u002Fprojects\u002FCustomComponentsAs2PuzzlePieces.jpg","Custom Component as Puzzle Pieces",{},"\u002Fprojects\u002Fjamstart\u002Fcomponents",{"title":7663,"description":8601},{"loc":8605},"projects\u002Fjamstart\u002F5.Components","Components","_GzmPqAAS5tz8lDETRy4TnWC3Md6U4RwL0fCs-Xlqds",{"id":255,"title":256,"author":7,"body":8612,"content_type":1111,"date_created":1112,"date_modified":30,"description":1113,"editor":30,"extension":32,"guide":1114,"image":265,"image_alt":264,"is_list_exclude":35,"is_manual_image":51,"is_manual_title":35,"is_toc":51,"keywords":30,"meta":9242,"navigation":51,"og_description":30,"og_image":30,"og_image_alt":30,"og_title":30,"path":1116,"peer_order":558,"project":62,"projects":30,"published":54,"seo":9243,"sitemap":9244,"stem":1119,"tagline":1120,"version":30,"x_card":30,"x_creator_handle":30,"x_description":30,"x_image":30,"x_image_alt":30,"x_title":30,"__hash__":1121},{"type":9,"value":8613,"toc":9234},[8614,8622,8624,8626,8642,8646,8694,8698,8702,8746,8748,8760,8762,8860,8876,8878,8880,8888,8916,8924,8926,9134,9136,9142,9172,9194,9206,9232],[260,8615,8616,8618],{},[70,8617],{"alt":264,"src":265},[101,8619,8620],{"v-slot:caption":25},[12,8621,270],{},[272,8623,275],{"id":274},[167,8625,279],{"id":278},[12,8627,282,8628,287,8630,291,8632,295,8634,299,8636,303,8638,181,8640,310],{},[284,8629,286],{},[284,8631,290],{},[284,8633,294],{},[284,8635,298],{},[284,8637,302],{},[284,8639,306],{},[284,8641,309],{},[312,8643,315,8644],{"id":314},[317,8645],{},[320,8647,8648],{"className":322,"code":323,"language":324,"meta":25,"style":25},[284,8649,8650,8660,8666,8682,8686],{"__ignoreMap":25},[328,8651,8652,8654,8656,8658],{"class":330,"line":155},[328,8653,334],{"class":333},[328,8655,317],{"class":337},[328,8657,341],{"class":340},[328,8659,344],{"class":333},[328,8661,8662,8664],{"class":330,"line":26},[328,8663,349],{"class":340},[328,8665,352],{"class":333},[328,8667,8668,8670,8672,8674,8676,8678,8680],{"class":330,"line":239},[328,8669,357],{"class":333},[328,8671,361],{"class":360},[328,8673,364],{"class":360},[328,8675,367],{"class":333},[328,8677,370],{"class":360},[328,8679,374],{"class":373},[328,8681,378],{"class":377},[328,8683,8684],{"class":330,"line":381},[328,8685,384],{"class":333},[328,8687,8688,8690,8692],{"class":330,"line":387},[328,8689,390],{"class":333},[328,8691,317],{"class":337},[328,8693,344],{"class":333},[312,8695,398,8696],{"id":397},[101,8697],{},[12,8699,403,8700,406],{},[284,8701,290],{},[320,8703,8704],{"className":322,"code":409,"language":324,"meta":25,"style":25},[284,8705,8706,8714,8738],{"__ignoreMap":25},[328,8707,8708,8710,8712],{"class":330,"line":155},[328,8709,334],{"class":333},[328,8711,101],{"class":337},[328,8713,344],{"class":333},[328,8715,8716,8718,8720,8722,8724,8726,8728,8730,8732,8734,8736],{"class":330,"line":26},[328,8717,424],{"class":333},[328,8719,16],{"class":337},[328,8721,429],{"class":340},[328,8723,432],{"class":373},[328,8725,436],{"class":435},[328,8727,439],{"class":340},[328,8729,432],{"class":373},[328,8731,444],{"class":435},[328,8733,447],{"class":333},[328,8735,16],{"class":337},[328,8737,344],{"class":333},[328,8739,8740,8742,8744],{"class":330,"line":239},[328,8741,390],{"class":333},[328,8743,101],{"class":337},[328,8745,344],{"class":333},[312,8747,463],{"id":462},[12,8749,466,8750,181,8752,473,8754,476,8756,479,8758,406],{},[284,8751,469],{},[284,8753,472],{},[284,8755,469],{},[284,8757,472],{},[284,8759,482],{},[12,8761,485],{},[320,8763,8764],{"className":322,"code":488,"language":324,"meta":25,"style":25},[284,8765,8766,8774,8784,8796,8808,8820,8838,8848,8852],{"__ignoreMap":25},[328,8767,8768,8770,8772],{"class":330,"line":155},[328,8769,334],{"class":333},[328,8771,317],{"class":337},[328,8773,344],{"class":333},[328,8775,8776,8778,8780,8782],{"class":330,"line":26},[328,8777,503],{"class":340},[328,8779,506],{"class":333},[328,8781,12],{"class":337},[328,8783,511],{"class":333},[328,8785,8786,8788,8790,8792,8794],{"class":330,"line":239},[328,8787,517],{"class":516},[328,8789,374],{"class":373},[328,8791,522],{"class":377},[328,8793,525],{"class":435},[328,8795,528],{"class":333},[328,8797,8798,8800,8802,8804,8806],{"class":330,"line":381},[328,8799,533],{"class":516},[328,8801,374],{"class":373},[328,8803,522],{"class":377},[328,8805,540],{"class":435},[328,8807,528],{"class":333},[328,8809,8810,8812,8814,8816,8818],{"class":330,"line":387},[328,8811,547],{"class":516},[328,8813,374],{"class":373},[328,8815,522],{"class":377},[328,8817,540],{"class":435},[328,8819,528],{"class":333},[328,8821,8822,8824,8826,8828,8830,8832,8834,8836],{"class":330,"line":558},[328,8823,561],{"class":516},[328,8825,374],{"class":373},[328,8827,567],{"class":566},[328,8829,571],{"class":570},[328,8831,574],{"class":566},[328,8833,574],{"class":566},[328,8835,574],{"class":566},[328,8837,581],{"class":333},[328,8839,8840,8842,8844,8846],{"class":330,"line":584},[328,8841,357],{"class":333},[328,8843,361],{"class":360},[328,8845,364],{"class":360},[328,8847,593],{"class":333},[328,8849,8850],{"class":330,"line":596},[328,8851,384],{"class":333},[328,8853,8854,8856,8858],{"class":330,"line":601},[328,8855,390],{"class":333},[328,8857,317],{"class":337},[328,8859,344],{"class":333},[12,8861,610,8862,614,8864,617,8866,621,8868,625,8870,625,8872,631,8874,634],{},[284,8863,613],{},[284,8865,503],{},[284,8867,620],{},[284,8869,624],{},[284,8871,628],{},[284,8873,628],{},[284,8875,298],{},[272,8877,638],{"id":637},[12,8879,641],{},[12,8881,644,8882,648,8884,652,8886,406],{},[284,8883,647],{},[284,8885,651],{},[284,8887,290],{},[320,8889,8890],{"className":657,"code":658,"language":659,"meta":25,"style":25},[284,8891,8892,8900,8908],{"__ignoreMap":25},[328,8893,8894,8896,8898],{"class":330,"line":155},[328,8895,424],{"class":333},[328,8897,647],{"class":668},[328,8899,344],{"class":333},[328,8901,8902,8904,8906],{"class":330,"line":26},[328,8903,675],{"class":333},[328,8905,678],{"class":668},[328,8907,681],{"class":333},[328,8909,8910,8912,8914],{"class":330,"line":239},[328,8911,686],{"class":333},[328,8913,647],{"class":668},[328,8915,344],{"class":333},[12,8917,693,8918,697,8920,700,8922,704],{},[284,8919,696],{},[284,8921,290],{},[284,8923,703],{},[12,8925,485],{},[320,8927,8928],{"className":657,"code":709,"language":659,"meta":25,"style":25},[284,8929,8930,8938,8952,8966,8980,8994,9018,9026,9034,9042,9046,9054,9062,9070,9078,9092,9102,9110,9118,9126],{"__ignoreMap":25},[328,8931,8932,8934,8936],{"class":330,"line":155},[328,8933,334],{"class":333},[328,8935,101],{"class":337},[328,8937,344],{"class":333},[328,8939,8940,8942,8944,8946,8948,8950],{"class":330,"line":26},[328,8941,424],{"class":333},[328,8943,726],{"class":337},[328,8945,429],{"class":340},[328,8947,432],{"class":373},[328,8949,733],{"class":435},[328,8951,344],{"class":333},[328,8953,8954,8956,8958,8960,8962,8964],{"class":330,"line":239},[328,8955,675],{"class":333},[328,8957,742],{"class":337},[328,8959,429],{"class":340},[328,8961,432],{"class":373},[328,8963,749],{"class":435},[328,8965,344],{"class":333},[328,8967,8968,8970,8972,8974,8976,8978],{"class":330,"line":381},[328,8969,756],{"class":333},[328,8971,726],{"class":337},[328,8973,429],{"class":340},[328,8975,432],{"class":373},[328,8977,765],{"class":435},[328,8979,344],{"class":333},[328,8981,8982,8984,8986,8988,8990,8992],{"class":330,"line":387},[328,8983,772],{"class":333},[328,8985,726],{"class":337},[328,8987,429],{"class":340},[328,8989,432],{"class":373},[328,8991,781],{"class":435},[328,8993,344],{"class":333},[328,8995,8996,8998,9000,9002,9004,9006,9008,9010,9012,9014,9016],{"class":330,"line":558},[328,8997,788],{"class":333},[328,8999,791],{"class":668},[328,9001,794],{"class":340},[328,9003,432],{"class":373},[328,9005,799],{"class":435},[328,9007,429],{"class":340},[328,9009,432],{"class":373},[328,9011,806],{"class":435},[328,9013,809],{"class":333},[328,9015,791],{"class":668},[328,9017,344],{"class":333},[328,9019,9020,9022,9024],{"class":330,"line":584},[328,9021,818],{"class":333},[328,9023,726],{"class":337},[328,9025,344],{"class":333},[328,9027,9028,9030,9032],{"class":330,"line":596},[328,9029,772],{"class":333},[328,9031,829],{"class":668},[328,9033,681],{"class":333},[328,9035,9036,9038,9040],{"class":330,"line":601},[328,9037,836],{"class":333},[328,9039,726],{"class":337},[328,9041,344],{"class":333},[328,9043,9044],{"class":330,"line":843},[328,9045,846],{"class":333},[328,9047,9048,9050,9052],{"class":330,"line":849},[328,9049,756],{"class":333},[328,9051,854],{"class":668},[328,9053,344],{"class":333},[328,9055,9056,9058,9060],{"class":330,"line":859},[328,9057,772],{"class":333},[328,9059,864],{"class":668},[328,9061,681],{"class":333},[328,9063,9064,9066,9068],{"class":330,"line":869},[328,9065,836],{"class":333},[328,9067,854],{"class":668},[328,9069,344],{"class":333},[328,9071,9072,9074,9076],{"class":330,"line":878},[328,9073,881],{"class":333},[328,9075,742],{"class":337},[328,9077,344],{"class":333},[328,9079,9080,9082,9084,9086,9088,9090],{"class":330,"line":888},[328,9081,675],{"class":333},[328,9083,893],{"class":337},[328,9085,429],{"class":340},[328,9087,432],{"class":373},[328,9089,900],{"class":435},[328,9091,344],{"class":333},[328,9093,9094,9096,9098,9100],{"class":330,"line":905},[328,9095,756],{"class":333},[328,9097,910],{"class":337},[328,9099,914],{"class":913},[328,9101,344],{"class":333},[328,9103,9104,9106,9108],{"class":330,"line":919},[328,9105,881],{"class":333},[328,9107,893],{"class":337},[328,9109,344],{"class":333},[328,9111,9112,9114,9116],{"class":330,"line":928},[328,9113,675],{"class":333},[328,9115,933],{"class":668},[328,9117,681],{"class":333},[328,9119,9120,9122,9124],{"class":330,"line":938},[328,9121,686],{"class":333},[328,9123,726],{"class":337},[328,9125,344],{"class":333},[328,9127,9128,9130,9132],{"class":330,"line":947},[328,9129,390],{"class":333},[328,9131,101],{"class":337},[328,9133,344],{"class":333},[167,9135,957],{"id":956},[12,9137,960,9138,964,9140,968],{},[284,9139,963],{},[284,9141,967],{},[970,9143,9144,9160],{},[175,9145,9146,977,9148,980,9150,983,9152,987,9154,991,9156,994,9158,997],{},[284,9147,976],{},[284,9149,976],{},[284,9151,651],{},[284,9153,986],{},[284,9155,990],{},[284,9157,963],{},[284,9159,986],{},[175,9161,9162,1003,9164,1006,9166,1010,9168,1013,9170,1016],{},[284,9163,1002],{},[284,9165,1002],{},[284,9167,1009],{},[284,9169,637],{},[284,9171,963],{},[320,9173,9174],{"className":1019,"code":1020,"language":1021,"meta":25,"style":25},[284,9175,9176,9182,9190],{"__ignoreMap":25},[328,9177,9178,9180],{"class":330,"line":155},[328,9179,1028],{"class":340},[328,9181,1031],{"class":333},[328,9183,9184,9186,9188],{"class":330,"line":26},[328,9185,1036],{"class":333},[328,9187,374],{"class":373},[328,9189,1041],{"class":435},[328,9191,9192],{"class":330,"line":239},[328,9193,1046],{"class":333},[970,9195,9196],{"start":239},[175,9197,9198,1054,9200,1057,9202,1061,9204,1064],{},[284,9199,1053],{},[284,9201,1053],{},[284,9203,1060],{},[284,9205,963],{},[320,9207,9208],{"className":1019,"code":1067,"language":1021,"meta":25,"style":25},[284,9209,9210,9218,9228],{"__ignoreMap":25},[328,9211,9212,9214,9216],{"class":330,"line":155},[328,9213,1075],{"class":1074},[328,9215,1078],{"class":340},[328,9217,1081],{"class":333},[328,9219,9220,9222,9224,9226],{"class":330,"line":26},[328,9221,1086],{"class":340},[328,9223,1089],{"class":333},[328,9225,1092],{"class":435},[328,9227,1095],{"class":333},[328,9229,9230],{"class":330,"line":239},[328,9231,384],{"class":333},[317,9233,1102],{},{"title":25,"searchDepth":26,"depth":26,"links":9235},[9236,9239],{"id":274,"depth":26,"text":275,"children":9237},[9238],{"id":278,"depth":239,"text":279},{"id":637,"depth":26,"text":638,"children":9240},[9241],{"id":956,"depth":239,"text":957},{},{"title":256,"description":1113},{"loc":1116},{"id":9246,"title":9247,"author":30,"body":9248,"content_type":1111,"date_created":9978,"date_modified":30,"description":9979,"editor":30,"extension":32,"guide":1114,"image":9980,"image_alt":9981,"is_list_exclude":35,"is_manual_image":35,"is_manual_title":35,"is_toc":51,"keywords":9982,"meta":9986,"navigation":51,"og_description":30,"og_image":30,"og_image_alt":30,"og_title":30,"path":9987,"peer_order":584,"project":62,"projects":30,"published":54,"seo":9988,"sitemap":9989,"stem":9990,"tagline":9983,"version":30,"x_card":30,"x_creator_handle":30,"x_description":30,"x_image":30,"x_image_alt":30,"x_title":30,"__hash__":9991},"content\u002Fprojects\u002Fjamstart\u002F7.TypographicProse.md","Tailwind Typographic Prose",{"type":9,"value":9249,"toc":9972},[9250,9263,9274,9277,9291,9356,9359,9383,9493,9496,9605,9608,9736,9746,9749,9757,9760,9768,9771,9780,9923,9927,9932,9969],[12,9251,9252,9253,9256,9257,9262],{},"When using the ",[16,9254,7732],{"href":7730,"rel":9255},[88]," module with the ",[16,9258,9261],{"href":9259,"rel":9260},"https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Ftailwindcss-typography",[88],"Tailwind Typography"," module I encountered some issues in my usage and implemented methods for my taste.",[970,9264,9265,9268,9271],{},[175,9266,9267],{},"Headers No Underline",[175,9269,9270],{},"Pre Code Syntax",[175,9272,9273],{},"Code Inline Syntax",[272,9275,9267],{"id":9276},"headers-no-underline",[12,9278,9279,9280,9283,9284,9288,9289,4659],{},"The default styling of headers (each is given an ",[284,9281,9282],{},"id="," for a hash link) was ",[9285,9286,9287],"ins",{},"underline"," which was distracting.  So to disable underlining you add the following to your ",[284,9290,3340],{},[320,9292,9294],{"className":3358,"code":9293,"language":3360,"meta":25,"style":25},"export default defineNuxtConfig({\n  \u002F\u002F ...\n  content: {\n    markdown: {\n      anchorLinks: false\n    }\n  }\n  \u002F\u002F ...\n})\n",[284,9295,9296,9306,9311,9320,9329,9339,9344,9348,9352],{"__ignoreMap":25},[328,9297,9298,9300,9302,9304],{"class":330,"line":155},[328,9299,5433],{"class":2703},[328,9301,5436],{"class":2703},[328,9303,5439],{"class":340},[328,9305,1031],{"class":333},[328,9307,9308],{"class":330,"line":26},[328,9309,9310],{"class":3950},"  \u002F\u002F ...\n",[328,9312,9313,9316,9318],{"class":330,"line":239},[328,9314,9315],{"class":333},"  content",[328,9317,374],{"class":373},[328,9319,352],{"class":333},[328,9321,9322,9325,9327],{"class":330,"line":381},[328,9323,9324],{"class":333},"    markdown",[328,9326,374],{"class":373},[328,9328,352],{"class":333},[328,9330,9331,9334,9336],{"class":330,"line":387},[328,9332,9333],{"class":333},"      anchorLinks",[328,9335,374],{"class":373},[328,9337,9338],{"class":7080}," false\n",[328,9340,9341],{"class":330,"line":558},[328,9342,9343],{"class":333},"    }\n",[328,9345,9346],{"class":330,"line":584},[328,9347,3431],{"class":333},[328,9349,9350],{"class":330,"line":596},[328,9351,9310],{"class":3950},[328,9353,9354],{"class":330,"line":601},[328,9355,1046],{"class":333},[272,9357,9270],{"id":9358},"pre-code-syntax",[12,9360,9361,9362,9367,9368,5421,9371,9374,9375,9378,9379,1447],{},"To enable syntax highlighting for code blocks NuxtContent uses ",[16,9363,9366],{"href":9364,"rel":9365},"https:\u002F\u002Fshiki.style\u002F",[88],"Shiki"," themes, which are installed by default. You enable a theme by updating ",[284,9369,9370],{},"content.highlight.theme",[284,9372,9373],{},"nuxt.config.ts or .js"," file. You can choose a single theme with a string for all light modes or assign to an object with a different theme for each light mode.   A list of ",[328,9376,9377],{},"Theme strings"," (",[16,9380,9381],{"href":9381,"rel":9382},"https:\u002F\u002Fgithub.com\u002Fshikijs\u002Ftextmate-grammars-themes\u002Ftree\u002Fmain\u002Fpackages\u002Ftm-themes",[88],[320,9384,9386],{"className":1019,"code":9385,"language":1021,"meta":25,"style":25},"export default defineNuxtConfig({\n  content: {\n    \u002F\u002F ...\n    highlight: {\n      theme: {\n        \u002F\u002F Default theme (same as single string)\n        default: 'min-light',\n        \u002F\u002F Theme used if `html.dark`\n        dark: 'min-dark',\n        \u002F\u002F Theme used if `html.sepia`\n        \u002F\u002F sepia: 'monokai'\n      }\n    }\n    \u002F\u002F ....\n  }\n})\n",[284,9387,9388,9398,9406,9410,9419,9428,9433,9445,9450,9462,9467,9472,9476,9480,9485,9489],{"__ignoreMap":25},[328,9389,9390,9392,9394,9396],{"class":330,"line":155},[328,9391,5433],{"class":2703},[328,9393,5436],{"class":2703},[328,9395,5439],{"class":340},[328,9397,1031],{"class":333},[328,9399,9400,9402,9404],{"class":330,"line":26},[328,9401,9315],{"class":333},[328,9403,374],{"class":373},[328,9405,352],{"class":333},[328,9407,9408],{"class":330,"line":239},[328,9409,4809],{"class":3950},[328,9411,9412,9415,9417],{"class":330,"line":381},[328,9413,9414],{"class":333},"    highlight",[328,9416,374],{"class":373},[328,9418,352],{"class":333},[328,9420,9421,9424,9426],{"class":330,"line":387},[328,9422,9423],{"class":333},"      theme",[328,9425,374],{"class":373},[328,9427,352],{"class":333},[328,9429,9430],{"class":330,"line":558},[328,9431,9432],{"class":3950},"        \u002F\u002F Default theme (same as single string)\n",[328,9434,9435,9438,9440,9443],{"class":330,"line":584},[328,9436,9437],{"class":333},"        default",[328,9439,374],{"class":373},[328,9441,9442],{"class":435}," 'min-light'",[328,9444,3386],{"class":3370},[328,9446,9447],{"class":330,"line":596},[328,9448,9449],{"class":3950},"        \u002F\u002F Theme used if `html.dark`\n",[328,9451,9452,9455,9457,9460],{"class":330,"line":601},[328,9453,9454],{"class":333},"        dark",[328,9456,374],{"class":373},[328,9458,9459],{"class":435}," 'min-dark'",[328,9461,3386],{"class":3370},[328,9463,9464],{"class":330,"line":843},[328,9465,9466],{"class":3950},"        \u002F\u002F Theme used if `html.sepia`\n",[328,9468,9469],{"class":330,"line":849},[328,9470,9471],{"class":3950},"        \u002F\u002F sepia: 'monokai'\n",[328,9473,9474],{"class":330,"line":859},[328,9475,7021],{"class":333},[328,9477,9478],{"class":330,"line":869},[328,9479,9343],{"class":333},[328,9481,9482],{"class":330,"line":878},[328,9483,9484],{"class":3950},"    \u002F\u002F ....\n",[328,9486,9487],{"class":330,"line":888},[328,9488,3431],{"class":333},[328,9490,9491],{"class":330,"line":905},[328,9492,1046],{"class":333},[12,9494,9495],{},"Once the theme is enabled, the html code block generated has the basic structure",[320,9497,9499],{"className":657,"code":9498,"language":659,"meta":25,"style":25},"\u003Cpre class=\"language-ts shiki shiki-themes min-light min-dark\">\n  \u003Ccode>\n    \u003Cspan class=\"line\" line=\"1\">\u003Cspan style=\"--shiki-default:#D32F2F;--shiki-dark:#F97583\">export\u003C\u002Fspan>\n    \u003Cspan style=\"--shiki-default:#D32F2F;--shiki-dark:#F97583\"> default\u003C\u002Fspan>\n        \u003C!-- each additional word has a \u003Cspan>\u003C\u002Fspan> -->\n  \u003C\u002Fcode>\n\u003C\u002Fpre>\n",[284,9500,9501,9516,9524,9565,9584,9589,9597],{"__ignoreMap":25},[328,9502,9503,9505,9507,9509,9511,9514],{"class":330,"line":155},[328,9504,334],{"class":333},[328,9506,320],{"class":337},[328,9508,429],{"class":340},[328,9510,432],{"class":373},[328,9512,9513],{"class":435},"\"language-ts shiki shiki-themes min-light min-dark\"",[328,9515,344],{"class":333},[328,9517,9518,9520,9522],{"class":330,"line":26},[328,9519,424],{"class":333},[328,9521,284],{"class":337},[328,9523,344],{"class":333},[328,9525,9526,9528,9530,9532,9534,9537,9540,9542,9545,9548,9550,9553,9555,9558,9561,9563],{"class":330,"line":239},[328,9527,675],{"class":333},[328,9529,328],{"class":337},[328,9531,429],{"class":340},[328,9533,432],{"class":373},[328,9535,9536],{"class":435},"\"line\"",[328,9538,9539],{"class":340}," line",[328,9541,432],{"class":373},[328,9543,9544],{"class":435},"\"1\"",[328,9546,9547],{"class":333},">\u003C",[328,9549,328],{"class":337},[328,9551,9552],{"class":340}," style",[328,9554,432],{"class":373},[328,9556,9557],{"class":435},"\"--shiki-default:#D32F2F;--shiki-dark:#F97583\"",[328,9559,9560],{"class":333},">export\u003C\u002F",[328,9562,328],{"class":337},[328,9564,344],{"class":333},[328,9566,9567,9569,9571,9573,9575,9577,9580,9582],{"class":330,"line":381},[328,9568,675],{"class":333},[328,9570,328],{"class":337},[328,9572,9552],{"class":340},[328,9574,432],{"class":373},[328,9576,9557],{"class":435},[328,9578,9579],{"class":333},"> default\u003C\u002F",[328,9581,328],{"class":337},[328,9583,344],{"class":333},[328,9585,9586],{"class":330,"line":387},[328,9587,9588],{"class":3950},"        \u003C!-- each additional word has a \u003Cspan>\u003C\u002Fspan> -->\n",[328,9590,9591,9593,9595],{"class":330,"line":558},[328,9592,686],{"class":333},[328,9594,284],{"class":337},[328,9596,344],{"class":333},[328,9598,9599,9601,9603],{"class":330,"line":584},[328,9600,390],{"class":333},[328,9602,320],{"class":337},[328,9604,344],{"class":333},[12,9606,9607],{},"Stripping out the styles it looks like:",[320,9609,9611],{"className":657,"code":9610,"language":659,"meta":25,"style":25},"\u003Cpre class=\"language-ts\">\n  \u003Ccode>\n    \u003Cspan class=\"line\" line=\"1\">\u003C\u002Fspan>\n    \u003Cspan>\u003C\u002Fspan> \n    \u003C!-- each additional word has a \u003Cspan>\u003C\u002Fspan> -->\n    \u003Cspan class=\"line\" line=\"2\">\u003C\u002Fspan>\n    \u003Cspan>\u003C\u002Fspan>\n    \u003C!-- each additional word has a \u003Cspan>\u003C\u002Fspan> -->\n  \u003C\u002Fcode>\n\u003C\u002Fpre>\n",[284,9612,9613,9628,9636,9661,9674,9679,9704,9716,9720,9728],{"__ignoreMap":25},[328,9614,9615,9617,9619,9621,9623,9626],{"class":330,"line":155},[328,9616,334],{"class":333},[328,9618,320],{"class":337},[328,9620,429],{"class":340},[328,9622,432],{"class":373},[328,9624,9625],{"class":435},"\"language-ts\"",[328,9627,344],{"class":333},[328,9629,9630,9632,9634],{"class":330,"line":26},[328,9631,424],{"class":333},[328,9633,284],{"class":337},[328,9635,344],{"class":333},[328,9637,9638,9640,9642,9644,9646,9648,9650,9652,9654,9657,9659],{"class":330,"line":239},[328,9639,675],{"class":333},[328,9641,328],{"class":337},[328,9643,429],{"class":340},[328,9645,432],{"class":373},[328,9647,9536],{"class":435},[328,9649,9539],{"class":340},[328,9651,432],{"class":373},[328,9653,9544],{"class":435},[328,9655,9656],{"class":333},">\u003C\u002F",[328,9658,328],{"class":337},[328,9660,344],{"class":333},[328,9662,9663,9665,9667,9669,9671],{"class":330,"line":381},[328,9664,675],{"class":333},[328,9666,328],{"class":337},[328,9668,9656],{"class":333},[328,9670,328],{"class":337},[328,9672,9673],{"class":333},"> \n",[328,9675,9676],{"class":330,"line":387},[328,9677,9678],{"class":3950},"    \u003C!-- each additional word has a \u003Cspan>\u003C\u002Fspan> -->\n",[328,9680,9681,9683,9685,9687,9689,9691,9693,9695,9698,9700,9702],{"class":330,"line":558},[328,9682,675],{"class":333},[328,9684,328],{"class":337},[328,9686,429],{"class":340},[328,9688,432],{"class":373},[328,9690,9536],{"class":435},[328,9692,9539],{"class":340},[328,9694,432],{"class":373},[328,9696,9697],{"class":435},"\"2\"",[328,9699,9656],{"class":333},[328,9701,328],{"class":337},[328,9703,344],{"class":333},[328,9705,9706,9708,9710,9712,9714],{"class":330,"line":584},[328,9707,675],{"class":333},[328,9709,328],{"class":337},[328,9711,9656],{"class":333},[328,9713,328],{"class":337},[328,9715,344],{"class":333},[328,9717,9718],{"class":330,"line":596},[328,9719,9678],{"class":3950},[328,9721,9722,9724,9726],{"class":330,"line":601},[328,9723,686],{"class":333},[328,9725,284],{"class":337},[328,9727,344],{"class":333},[328,9729,9730,9732,9734],{"class":330,"line":843},[328,9731,390],{"class":333},[328,9733,320],{"class":337},[328,9735,344],{"class":333},[12,9737,9738,9739,9742,9743,9745],{},"To get the proper background for blocks I added these two classes ",[284,9740,9741],{},"prose-pre:bg-gray-100 dark:prose-pre:bg-black"," for backgrounds of ",[284,9744,320],{}," elements.",[272,9747,9273],{"id":9748},"code-inline-syntax",[12,9750,9751,9752,9742,9755,9745],{},"To get the proper background for inline I added these two classes ",[284,9753,9754],{},"prose-code:bg-gray-100 dark:prose-code:bg-black",[284,9756,284],{},[12,9758,9759],{},"There were an additional issue for inline code",[970,9761,9762,9765],{},[175,9763,9764],{},"There was no padding",[175,9766,9767],{},"The back ticks ` from markdown were being reinserted.",[12,9769,9770],{},"Finally there was an issue for non syntax specified code block with ``` only.",[12,9772,9773,9774,9776,9777,9779],{},"To address three issues I added the following global styles in my ",[284,9775,3451],{}," file ",[284,9778,294],{}," section for that specifically.",[320,9781,9783],{"className":4062,"code":9782,"language":4064,"meta":25,"style":25},"\u003Cstyle>\n.prose code::before, .prose code::after {\n  content: \"\";\n}\n\n.prose code:not(pre *) {\n  @apply px-1.5 py-1 m-0 rounded\n}\n\n.prose code {\n  @apply text-black dark:text-white\n}\n\u003C\u002Fstyle>\n",[284,9784,9785,9793,9816,9827,9831,9835,9852,9878,9882,9886,9894,9911,9915],{"__ignoreMap":25},[328,9786,9787,9789,9791],{"class":330,"line":155},[328,9788,334],{"class":333},[328,9790,317],{"class":337},[328,9792,344],{"class":2703},[328,9794,9795,9798,9801,9804,9806,9809,9811,9814],{"class":330,"line":26},[328,9796,9797],{"class":340},".prose",[328,9799,9800],{"class":337}," code",[328,9802,9803],{"class":340},"::before",[328,9805,3964],{"class":3370},[328,9807,9808],{"class":340}," .prose",[328,9810,9800],{"class":337},[328,9812,9813],{"class":340},"::after",[328,9815,352],{"class":333},[328,9817,9818,9820,9822,9825],{"class":330,"line":239},[328,9819,9315],{"class":516},[328,9821,374],{"class":373},[328,9823,9824],{"class":435}," \"\"",[328,9826,581],{"class":333},[328,9828,9829],{"class":330,"line":381},[328,9830,384],{"class":333},[328,9832,9833],{"class":330,"line":387},[328,9834,2233],{"emptyLinePlaceholder":51},[328,9836,9837,9839,9841,9844,9846,9848,9850],{"class":330,"line":558},[328,9838,9797],{"class":340},[328,9840,9800],{"class":337},[328,9842,9843],{"class":340},":not",[328,9845,1089],{"class":333},[328,9847,320],{"class":337},[328,9849,3061],{"class":337},[328,9851,511],{"class":333},[328,9853,9854,9856,9858,9861,9864,9867,9869,9872,9875],{"class":330,"line":584},[328,9855,357],{"class":333},[328,9857,361],{"class":360},[328,9859,9860],{"class":360}," px-",[328,9862,9863],{"class":333},"1.5 ",[328,9865,9866],{"class":360},"py-",[328,9868,367],{"class":333},[328,9870,9871],{"class":360},"m-",[328,9873,9874],{"class":333},"0 ",[328,9876,9877],{"class":360},"rounded\n",[328,9879,9880],{"class":330,"line":596},[328,9881,384],{"class":333},[328,9883,9884],{"class":330,"line":601},[328,9885,2233],{"emptyLinePlaceholder":51},[328,9887,9888,9890,9892],{"class":330,"line":843},[328,9889,9797],{"class":340},[328,9891,9800],{"class":337},[328,9893,352],{"class":333},[328,9895,9896,9898,9900,9903,9906,9908],{"class":330,"line":849},[328,9897,357],{"class":333},[328,9899,361],{"class":360},[328,9901,9902],{"class":360}," text-black",[328,9904,9905],{"class":360}," dark",[328,9907,374],{"class":373},[328,9909,9910],{"class":377},"text-white\n",[328,9912,9913],{"class":330,"line":859},[328,9914,384],{"class":333},[328,9916,9917,9919,9921],{"class":330,"line":869},[328,9918,390],{"class":333},[328,9920,317],{"class":337},[328,9922,344],{"class":2703},[272,9924,9926],{"id":9925},"article-prose-classes","Article Prose Classes",[12,9928,9929,9930,9745],{},"Here are all the classes I included on ",[284,9931,7122],{},[320,9933,9935],{"className":657,"code":9934,"language":659,"meta":25,"style":25},"  \u003Carticle class=\"prose dark:prose-invert lg:prose-xl prose-code:bg-gray-100 dark:prose-code:bg-black prose-pre:bg-gray-100 dark:prose-pre:bg-black\">\n    \u003CContentDoc \u002F>\n  \u003C\u002Farticle>\n",[284,9936,9937,9952,9961],{"__ignoreMap":25},[328,9938,9939,9941,9943,9945,9947,9950],{"class":330,"line":155},[328,9940,424],{"class":333},[328,9942,7157],{"class":337},[328,9944,429],{"class":340},[328,9946,432],{"class":373},[328,9948,9949],{"class":435},"\"prose dark:prose-invert lg:prose-xl prose-code:bg-gray-100 dark:prose-code:bg-black prose-pre:bg-gray-100 dark:prose-pre:bg-black\"",[328,9951,344],{"class":333},[328,9953,9954,9956,9959],{"class":330,"line":26},[328,9955,675],{"class":333},[328,9957,9958],{"class":668},"ContentDoc",[328,9960,681],{"class":333},[328,9962,9963,9965,9967],{"class":330,"line":239},[328,9964,686],{"class":333},[328,9966,7157],{"class":337},[328,9968,344],{"class":333},[317,9970,9971],{},"html pre.shiki code .s-2sM, html code.shiki .s-2sM{--shiki-default:#D32F2F;--shiki-dark:#F97583;--shiki-sepia:#F92672}html pre.shiki code .srTi1, html code.shiki .srTi1{--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-sepia:#A6E22E}html pre.shiki code .sxUMQ, html code.shiki .sxUMQ{--shiki-default:#24292EFF;--shiki-dark:#B392F0;--shiki-sepia:#F8F8F2}html pre.shiki code .sNgeA, html code.shiki .sNgeA{--shiki-default:#C2C3C5;--shiki-dark:#6B737C;--shiki-sepia:#88846F}html pre.shiki code .skixG, html code.shiki .skixG{--shiki-default:#D32F2F;--shiki-dark:#F97583;--shiki-sepia:#F8F8F2}html pre.shiki code .snb_r, html code.shiki .snb_r{--shiki-default:#1976D2;--shiki-dark:#79B8FF;--shiki-sepia:#AE81FF}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);}html .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html pre.shiki code .shHn5, html code.shiki .shHn5{--shiki-default:#22863A;--shiki-dark:#FFAB70;--shiki-sepia:#E6DB74}html pre.shiki code .sizxJ, html code.shiki .sizxJ{--shiki-default:#212121;--shiki-dark:#BBBBBB;--shiki-sepia:#F8F8F2}html pre.shiki code .szMGX, html code.shiki .szMGX{--shiki-default:#22863A;--shiki-dark:#FFAB70;--shiki-sepia:#F92672}html pre.shiki code .sibI6, html code.shiki .sibI6{--shiki-default:#1976D2;--shiki-default-font-style:inherit;--shiki-dark:#79B8FF;--shiki-dark-font-style:inherit;--shiki-sepia:#66D9EF;--shiki-sepia-font-style:italic}html pre.shiki code .sraLd, html code.shiki .sraLd{--shiki-default:#1976D2;--shiki-dark:#79B8FF;--shiki-sepia:#F8F8F2}html pre.shiki code .sF6MT, html code.shiki .sF6MT{--shiki-default:#1976D2;--shiki-dark:#F8F8F8;--shiki-sepia:#F8F8F2}html pre.shiki code .sPLuR, html code.shiki .sPLuR{--shiki-default:#22863A;--shiki-dark:#FFAB70;--shiki-sepia:#F44747}",{"title":25,"searchDepth":26,"depth":26,"links":9973},[9974,9975,9976,9977],{"id":9276,"depth":26,"text":9267},{"id":9358,"depth":26,"text":9270},{"id":9748,"depth":26,"text":9273},{"id":9925,"depth":26,"text":9926},"2024-05-17","Tips and tricks in working with markdown generated HTML by Nuxt Content, NuxtContent, and Tailwind Typographic prose.","\u002Fimages\u002Fprojects\u002FTypographyStart.jpg","Tailwind Typography Logo with JAMStart Logo",[37,38,1189,9983,9984,146,9985],"Typography","Tailwind_css","Prose",{},"\u002Fprojects\u002Fjamstart\u002Ftypographicprose",{"title":9247,"description":9979},{"loc":9987},"projects\u002Fjamstart\u002F7.TypographicProse","XW04e170yd7uSl8D5j-zvuiUsu_SdfGsK-ZQYk4umt8",{"id":9993,"title":9994,"author":7,"body":9995,"content_type":1111,"date_created":13628,"date_modified":30,"description":13629,"editor":30,"extension":32,"guide":1114,"image":13630,"image_alt":13631,"is_list_exclude":35,"is_manual_image":35,"is_manual_title":35,"is_toc":51,"keywords":13632,"meta":13638,"navigation":51,"og_description":13641,"og_image":13642,"og_image_alt":13643,"og_title":13644,"path":13645,"peer_order":596,"project":62,"projects":30,"published":54,"seo":13646,"sitemap":13647,"stem":13648,"tagline":13649,"version":30,"x_card":30,"x_creator_handle":30,"x_description":30,"x_image":13650,"x_image_alt":13651,"x_title":30,"__hash__":13652},"content\u002Fprojects\u002Fjamstart\u002F8.SEOMetadata.md","SEO Metadata Social System",{"type":9,"value":9996,"toc":13603},[9997,10000,10015,10023,10026,10073,10109,10117,10121,10124,10153,10413,10417,10440,10448,10617,10624,10628,10646,10764,10768,10779,10795,11814,11820,11822,11827,11907,11913,11917,11923,12007,12011,12079,12083,12165,12169,12175,12337,12347,12355,12359,12384,12388,12642,12646,12660,12927,12931,12947,12951,12988,12992,13011,13015,13600],[272,9998,1279],{"id":9999},"intro",[12,10001,10002,10003,10005,10006,10009,10010,10014],{},"The goal of the custom metadata for NuxtContent SEO and Social sharing is to enable content authors to write a new blog post or article in a single Markdown ",[284,10004,5315],{}," file that contained all the appropriate metadata images and data for SEO and social sharing. Each blog or article created would automatically get common and article specific metadata so that it will look inviting in search results and on social media. The method applies to ",[16,10007,1183],{"href":1181,"rel":10008,":target":191},[88]," ",[16,10011,7719],{"href":10012,"rel":10013,":target":191},"https:\u002F\u002Fcontent.nuxt.com\u002F",[88]," Markdown authored pages.",[12,10016,10017,10018,10022],{},"Further, ",[16,10019,10021],{"href":7455,"rel":10020,":target":191},[88],"social share buttons"," would automatically be generated for each blog or article.  A reader could copy\u002Fpaste the url by hand or using the social share buttons to include in their social media post.",[12,10024,10025],{},"The essential pattern",[970,10027,10028,10061],{},[175,10029,10030,10031,10033],{},"In ",[284,10032,3451],{},[172,10034,10035,10041,10046,10052],{},[175,10036,10037,10038,10040],{},"create a ",[284,10039,3455],{}," data structure",[175,10042,10043,10045],{},[284,10044,4357],{}," to set SEO icons",[175,10047,10048,10051],{},[284,10049,10050],{},"useSeoMeta()"," to set global SEO Metadata values",[175,10053,10054,10055,10058,10059],{},"use ",[284,10056,10057],{},"provide()"," to allow children components access to the ",[284,10060,3455],{},[175,10062,10063,10064,10066,10067,10069,10070,406],{},"In the page ",[284,10065,286],{}," file (I used the convenient catchall ",[284,10068,5584],{},") in the ",[284,10071,10072],{},"\u003Cscript setup>",[172,10074,10075,10086,10096,10104],{},[175,10076,10054,10077,10080,10081,10083,10084],{},[284,10078,10079],{},"inject()"," to get ",[284,10082,3455],{}," from ",[284,10085,3451],{},[175,10087,10088,10089,10092,10093],{},"use NuxtContent ",[284,10090,10091],{},"queryContent()"," to get the current page ",[284,10094,10095],{},"front-matter variables",[175,10097,10098,10099,10101,10102],{},"Combine the ",[284,10100,3455],{}," with the page ",[284,10103,10095],{},[175,10105,10106,10108],{},[284,10107,10050],{}," to create custom meta tags for that page",[970,10110,10111],{"start":239},[175,10112,10113,10114,10116],{},"Each article or post ",[284,10115,5315],{}," file uses front-matter variables naming convention to get automatic SEO and Social metadata tagging",[272,10118,10120],{"id":10119},"global-setup","Global Setup",[167,10122,3455],{"id":10123},"metadefaults",[12,10125,10126,10127,10129,10130,10132,10133,10136,10137,10139,10140,10143,10144,10152],{},"The first item in ",[284,10128,3451],{}," of the ",[284,10131,10072],{}," is to establish a constant Plain Old JavaScript Object (",[284,10134,10135],{},"POJO",") called ",[284,10138,3455],{}," which contains default values when not overridden by the ",[284,10141,10142],{},"Front-matter vars"," of the NuxtContent markdown page.  And then use the ",[16,10145,10148,10151],{"href":10146,"rel":10147},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fcomponents\u002Fprovide-inject",[88],[284,10149,10150],{},"provide"," vue method"," so that children components can use them.",[320,10154,10156],{"className":1019,"code":10155,"language":1021,"meta":25,"style":25},"const metaDefaults = {\n  siteName: 'Pennock Projects',\n  title: 'Pennock Projects',\n  description: 'Pennock Projects is a software engineering blog about website and mobile applications, front end frameworks, backend API services, databases, and AI architecture by John Pennock',\n  keywords: ['blog'],\n  author: 'John Pennock',\n  rootUrl: \"https:\u002F\u002Fpennockprojects.com\",\n  robots: 'index, follow',\n  copyright: '© 2024 by John Pennock',\n  ogType: 'article',\n  imageRoot: '\u002Fimages',\n  image2x1: '\u002Fimages\u002FPennockProjectsFB.jpg',\n  image2x1Width: 1200,\n  image2x1Height: 600,\n  image1x1: '\u002Fimages\u002FPennockProjectsLogo.png',\n  image1x1Width: 800,\n  image1x1Height: 800,\n  image_alt: 'Pennock Projects Logo',\n  twitterCard: 'summary_large_image',\n  twitterSiteHandle: '@PennockProjects',\n  twitterCreatorHandle: '@JohnPennock'\n}\n\n\u002F\u002F allow children components readonly access to metadata defaults.\nprovide(\"metaDefaults\", metaDefaults);\n",[284,10157,10158,10168,10179,10189,10200,10217,10228,10239,10249,10260,10270,10280,10291,10301,10311,10322,10333,10343,10354,10364,10375,10384,10388,10392,10398],{"__ignoreMap":25},[328,10159,10160,10162,10164,10166],{"class":330,"line":155},[328,10161,3470],{"class":1074},[328,10163,3473],{"class":360},[328,10165,3476],{"class":2703},[328,10167,352],{"class":333},[328,10169,10170,10172,10174,10177],{"class":330,"line":26},[328,10171,3511],{"class":333},[328,10173,374],{"class":373},[328,10175,10176],{"class":435}," 'Pennock Projects'",[328,10178,3386],{"class":3370},[328,10180,10181,10183,10185,10187],{"class":330,"line":239},[328,10182,3523],{"class":333},[328,10184,374],{"class":373},[328,10186,10176],{"class":435},[328,10188,3386],{"class":3370},[328,10190,10191,10193,10195,10198],{"class":330,"line":381},[328,10192,3535],{"class":333},[328,10194,374],{"class":373},[328,10196,10197],{"class":435}," 'Pennock Projects is a software engineering blog about website and mobile applications, front end frameworks, backend API services, databases, and AI architecture by John Pennock'",[328,10199,3386],{"class":3370},[328,10201,10202,10205,10207,10209,10212,10215],{"class":330,"line":387},[328,10203,10204],{"class":333},"  keywords",[328,10206,374],{"class":373},[328,10208,6718],{"class":333},[328,10210,10211],{"class":435},"'blog'",[328,10213,10214],{"class":333},"]",[328,10216,3386],{"class":3370},[328,10218,10219,10221,10223,10226],{"class":330,"line":558},[328,10220,3547],{"class":333},[328,10222,374],{"class":373},[328,10224,10225],{"class":435}," 'John Pennock'",[328,10227,3386],{"class":3370},[328,10229,10230,10232,10234,10237],{"class":330,"line":584},[328,10231,3571],{"class":333},[328,10233,374],{"class":373},[328,10235,10236],{"class":435}," \"https:\u002F\u002Fpennockprojects.com\"",[328,10238,3386],{"class":3370},[328,10240,10241,10243,10245,10247],{"class":330,"line":596},[328,10242,3583],{"class":333},[328,10244,374],{"class":373},[328,10246,3588],{"class":435},[328,10248,3386],{"class":3370},[328,10250,10251,10253,10255,10258],{"class":330,"line":601},[328,10252,3595],{"class":333},[328,10254,374],{"class":373},[328,10256,10257],{"class":435}," '© 2024 by John Pennock'",[328,10259,3386],{"class":3370},[328,10261,10262,10264,10266,10268],{"class":330,"line":843},[328,10263,3607],{"class":333},[328,10265,374],{"class":373},[328,10267,3612],{"class":435},[328,10269,3386],{"class":3370},[328,10271,10272,10274,10276,10278],{"class":330,"line":849},[328,10273,3619],{"class":333},[328,10275,374],{"class":373},[328,10277,3624],{"class":435},[328,10279,3386],{"class":3370},[328,10281,10282,10284,10286,10289],{"class":330,"line":859},[328,10283,3631],{"class":333},[328,10285,374],{"class":373},[328,10287,10288],{"class":435}," '\u002Fimages\u002FPennockProjectsFB.jpg'",[328,10290,3386],{"class":3370},[328,10292,10293,10295,10297,10299],{"class":330,"line":869},[328,10294,3643],{"class":333},[328,10296,374],{"class":373},[328,10298,3648],{"class":566},[328,10300,3386],{"class":3370},[328,10302,10303,10305,10307,10309],{"class":330,"line":878},[328,10304,3655],{"class":333},[328,10306,374],{"class":373},[328,10308,3660],{"class":566},[328,10310,3386],{"class":3370},[328,10312,10313,10315,10317,10320],{"class":330,"line":888},[328,10314,3667],{"class":333},[328,10316,374],{"class":373},[328,10318,10319],{"class":435}," '\u002Fimages\u002FPennockProjectsLogo.png'",[328,10321,3386],{"class":3370},[328,10323,10324,10326,10328,10331],{"class":330,"line":905},[328,10325,3679],{"class":333},[328,10327,374],{"class":373},[328,10329,10330],{"class":566}," 800",[328,10332,3386],{"class":3370},[328,10334,10335,10337,10339,10341],{"class":330,"line":919},[328,10336,3691],{"class":333},[328,10338,374],{"class":373},[328,10340,10330],{"class":566},[328,10342,3386],{"class":3370},[328,10344,10345,10347,10349,10352],{"class":330,"line":928},[328,10346,3702],{"class":333},[328,10348,374],{"class":373},[328,10350,10351],{"class":435}," 'Pennock Projects Logo'",[328,10353,3386],{"class":3370},[328,10355,10356,10358,10360,10362],{"class":330,"line":938},[328,10357,3714],{"class":333},[328,10359,374],{"class":373},[328,10361,3719],{"class":435},[328,10363,3386],{"class":3370},[328,10365,10366,10368,10370,10373],{"class":330,"line":947},[328,10367,3726],{"class":333},[328,10369,374],{"class":373},[328,10371,10372],{"class":435}," '@PennockProjects'",[328,10374,3386],{"class":3370},[328,10376,10377,10379,10381],{"class":330,"line":3080},[328,10378,3739],{"class":333},[328,10380,374],{"class":373},[328,10382,10383],{"class":435}," '@JohnPennock'\n",[328,10385,10386],{"class":330,"line":3736},[328,10387,384],{"class":333},[328,10389,10390],{"class":330,"line":3747},[328,10391,2233],{"emptyLinePlaceholder":51},[328,10393,10395],{"class":330,"line":10394},24,[328,10396,10397],{"class":3950},"\u002F\u002F allow children components readonly access to metadata defaults.\n",[328,10399,10401,10403,10405,10408,10410],{"class":330,"line":10400},25,[328,10402,10150],{"class":340},[328,10404,1089],{"class":333},[328,10406,10407],{"class":435},"\"metaDefaults\"",[328,10409,3964],{"class":3370},[328,10411,10412],{"class":333}," metaDefaults);\n",[167,10414,10416],{"id":10415},"global-metadata","Global Metadata",[12,10418,10419,10420,10422,10423,181,10429,10435,10436,10439],{},"A second item in ",[284,10421,3451],{}," setup was to use ",[16,10424,10427,5645],{"href":10425,"rel":10426},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-head",[88],[284,10428,4357],{},[16,10430,10433,5645],{"href":10431,"rel":10432},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-seo-meta",[88],[284,10434,10050],{}," to set common metadata for all pages.  For example, I set the page title, ",[284,10437,10438],{},"htmlAttrs",", robots and copyright metadata here.",[12,10441,10442,10443,10447],{},"Use a site like ",[16,10444,10446],{"href":4125,"rel":10445},[88],"favicon.io"," to create favicons and web manifest files.",[320,10449,10451],{"className":1019,"code":10450,"language":1021,"meta":25,"style":25},"useHead({\n  titleTemplate: (titleChunk) => {\n    return (titleChunk && (titleChunk != metaDefaults.title)) ? `${titleChunk} - ${metaDefaults.title}` : metaDefaults.title;\n  },\n  htmlAttrs: {\n    lang: 'en'\n  }\n  \u002F\u002F ...\n})\n\n\u002F\u002F Setting Global SEO on each page\nuseSeoMeta({\n  robots: metaDefaults.robots,\n  copyright: metaDefaults.copyright\n})\n",[284,10452,10453,10459,10480,10536,10542,10551,10561,10565,10569,10573,10577,10582,10589,10602,10613],{"__ignoreMap":25},[328,10454,10455,10457],{"class":330,"line":155},[328,10456,3829],{"class":340},[328,10458,1031],{"class":333},[328,10460,10461,10464,10466,10468,10472,10475,10478],{"class":330,"line":26},[328,10462,10463],{"class":340},"  titleTemplate",[328,10465,374],{"class":373},[328,10467,9378],{"class":333},[328,10469,10471],{"class":10470},"sA0kQ","titleChunk",[328,10473,10474],{"class":333},") ",[328,10476,10477],{"class":1074},"=>",[328,10479,352],{"class":333},[328,10481,10482,10485,10488,10491,10493,10496,10498,10501,10504,10507,10510,10512,10514,10516,10518,10520,10523,10525,10528,10531,10533],{"class":330,"line":239},[328,10483,10484],{"class":2703},"    return",[328,10486,10487],{"class":333}," (titleChunk ",[328,10489,10490],{"class":2703},"&&",[328,10492,10487],{"class":333},[328,10494,10495],{"class":2703},"!=",[328,10497,3473],{"class":360},[328,10499,10500],{"class":333},".title)) ",[328,10502,10503],{"class":2703},"?",[328,10505,10506],{"class":435}," `",[328,10508,10509],{"class":2703},"${",[328,10511,10471],{"class":333},[328,10513,6735],{"class":2703},[328,10515,8052],{"class":435},[328,10517,10509],{"class":2703},[328,10519,3455],{"class":360},[328,10521,10522],{"class":333},".title",[328,10524,6735],{"class":2703},[328,10526,10527],{"class":435},"`",[328,10529,10530],{"class":2703}," :",[328,10532,3473],{"class":360},[328,10534,10535],{"class":333},".title;\n",[328,10537,10538,10540],{"class":330,"line":381},[328,10539,3401],{"class":333},[328,10541,3386],{"class":3370},[328,10543,10544,10547,10549],{"class":330,"line":387},[328,10545,10546],{"class":333},"  htmlAttrs",[328,10548,374],{"class":373},[328,10550,352],{"class":333},[328,10552,10553,10556,10558],{"class":330,"line":558},[328,10554,10555],{"class":333},"    lang",[328,10557,374],{"class":373},[328,10559,10560],{"class":435}," 'en'\n",[328,10562,10563],{"class":330,"line":584},[328,10564,3431],{"class":333},[328,10566,10567],{"class":330,"line":596},[328,10568,9310],{"class":3950},[328,10570,10571],{"class":330,"line":601},[328,10572,1046],{"class":333},[328,10574,10575],{"class":330,"line":843},[328,10576,2233],{"emptyLinePlaceholder":51},[328,10578,10579],{"class":330,"line":849},[328,10580,10581],{"class":3950},"\u002F\u002F Setting Global SEO on each page\n",[328,10583,10584,10587],{"class":330,"line":859},[328,10585,10586],{"class":340},"useSeoMeta",[328,10588,1031],{"class":333},[328,10590,10591,10593,10595,10597,10600],{"class":330,"line":869},[328,10592,3583],{"class":333},[328,10594,374],{"class":373},[328,10596,3473],{"class":360},[328,10598,10599],{"class":333},".robots",[328,10601,3386],{"class":3370},[328,10603,10604,10606,10608,10610],{"class":330,"line":878},[328,10605,3595],{"class":333},[328,10607,374],{"class":373},[328,10609,3473],{"class":360},[328,10611,10612],{"class":333},".copyright\n",[328,10614,10615],{"class":330,"line":888},[328,10616,1046],{"class":333},[272,10618,10620,10621,10623],{"id":10619},"page-vue-system","Page ",[284,10622,286],{}," System",[167,10625,10627],{"id":10626},"metadata-defaults-and-page","Metadata Defaults and Page",[12,10629,10630,10631,10635,10636,10083,10638,181,10640,10645],{},"On each page you would use the ",[16,10632,10634],{"href":10146,"rel":10633},[88],"vue inject method"," to get the ",[284,10637,3455],{},[284,10639,3451],{},[16,10641,10644],{"href":10642,"rel":10643},"https:\u002F\u002Fcontent.nuxt.com\u002Fcomposables\u002Fquery-content",[88],"NuxtContent queryContent method"," to obtain the page's markdown front-matter variables",[320,10647,10649],{"className":1019,"code":10648,"language":1021,"meta":25,"style":25},"const route = useRoute()\nconst metaDefaults = inject(\"metaDefaults\");\n\nconst { data } = await useAsyncData(route.path, () => queryContent(route.path).findOne())\nlet doc = data.value || {}\n",[284,10650,10651,10666,10683,10687,10742],{"__ignoreMap":25},[328,10652,10653,10655,10658,10660,10663],{"class":330,"line":155},[328,10654,3470],{"class":1074},[328,10656,10657],{"class":360}," route",[328,10659,3476],{"class":2703},[328,10661,10662],{"class":340}," useRoute",[328,10664,10665],{"class":333},"()\n",[328,10667,10668,10670,10672,10674,10677,10679,10681],{"class":330,"line":26},[328,10669,3470],{"class":1074},[328,10671,3473],{"class":360},[328,10673,3476],{"class":2703},[328,10675,10676],{"class":340}," inject",[328,10678,1089],{"class":333},[328,10680,10407],{"class":435},[328,10682,528],{"class":333},[328,10684,10685],{"class":330,"line":239},[328,10686,2233],{"emptyLinePlaceholder":51},[328,10688,10689,10691,10694,10697,10700,10702,10705,10708,10710,10713,10716,10718,10721,10723,10726,10728,10730,10733,10736,10739],{"class":330,"line":381},[328,10690,3470],{"class":1074},[328,10692,10693],{"class":333}," { ",[328,10695,10696],{"class":360},"data",[328,10698,10699],{"class":333}," } ",[328,10701,432],{"class":2703},[328,10703,10704],{"class":2703}," await",[328,10706,10707],{"class":340}," useAsyncData",[328,10709,1089],{"class":333},[328,10711,10712],{"class":360},"route",[328,10714,10715],{"class":333},".path",[328,10717,3964],{"class":3370},[328,10719,10720],{"class":333}," () ",[328,10722,10477],{"class":1074},[328,10724,10725],{"class":340}," queryContent",[328,10727,1089],{"class":333},[328,10729,10712],{"class":360},[328,10731,10732],{"class":333},".path)",[328,10734,997],{"class":10735},"s_OQ2",[328,10737,10738],{"class":340},"findOne",[328,10740,10741],{"class":333},"())\n",[328,10743,10744,10747,10750,10752,10755,10758,10761],{"class":330,"line":387},[328,10745,10746],{"class":1074},"let",[328,10748,10749],{"class":333}," doc ",[328,10751,432],{"class":2703},[328,10753,10754],{"class":360}," data",[328,10756,10757],{"class":333},".value ",[328,10759,10760],{"class":2703},"||",[328,10762,10763],{"class":333}," {}\n",[167,10765,10767],{"id":10766},"page-specific-metadata","Page Specific Metadata",[12,10769,10770,10771,10775,10776,10778],{},"Next I combine the defaults with the page-specific front-matter variables and use the ",[16,10772,10774],{"href":10431,"rel":10773},[88],"useSeoMeta() composable"," a second time (the first time in ",[284,10777,3451],{}," setup).",[12,10780,10781,10782,10785,10786,10788,10789,10785,10791,10794],{},"In the utility function, I check if the page front-matter variables exist, and if not, I use the defaults.  For example, if the page doesn't have an ",[284,10783,10784],{},"og_title"," variable, I will use the ",[284,10787,7995],{}," variable for the Open Graph title.  If the page doesn't have a ",[284,10790,7995],{},[284,10792,10793],{},"metaDefaults.title"," for the title.  This allows each page to have custom metadata, but if the page doesn't specify it, it will fall back to the defaults.",[320,10796,10798],{"className":1019,"code":10797,"language":1021,"meta":25,"style":25},"export const setSEO = (metaPage, metaDefaults, routePath) => {\n\n  let doc = metaPage || {}\n  let oTitle = (doc.og_title || doc.title)\n  let x_title = (doc.x_title || doc.title)\n  let x_image = doc.x_image || doc.image || metaDefaults.image2x1\n  let seoData = {}\n\n  let keywords = doc && doc.keywords && Array.isArray(doc.keywords) ? metaDefaults.keywords.concat(doc.keywords) : metaDefaults.keywords.concat([]);\n  \n  seoData.author = doc.author || metaDefaults.author\n  seoData.creator = metaDefaults.creator\n  seoData.keywords = keywords.toString()\n  seoData.og_title = (oTitle && oTitle != metaDefaults.title) ? `${metaDefaults.title} ${oTitle}` : metaDefaults.title\n  seoData.x_title = (x_title && x_title != metaDefaults.title) ? `${metaDefaults.title} ${x_title}` : metaDefaults.title\n  seoData.description = doc.description || metaDefaults.description;\n  seoData.og_description = doc.og_description || doc.description || metaDefaults.description\n  seoData.x_description = doc.x_description || doc.description || metaDefaults.description\n  seoData.og_image = doc.og_image || doc.image || metaDefaults.image2x1\n  seoData.og_image_alt = doc.og_image_alt || doc.image_alt || metaDefaults.image_alt\n  \u002F\u002F Note: X\u002FTwitter will not show the static image unless the static non-js version has a full url.\n  seoData.x_image = metaDefaults.rootUrl + x_image\n  seoData.x_image_alt  = doc.x_image_alt || doc.image_alt || metaDefaults.image_alt\n  seoData.ogUrl = metaDefaults.rootUrl + doc._path \n  seoData.x_card = doc.x_card || metaDefaults.twitterCard\n  seoData.x_creator_handle = doc.x_creator_handle || metaDefaults.twitterCreatorHandle\n\n  let headInput = {\n    link: [\n      {\n        rel: 'canonical',\n        href: metaDefaults.rootUrl + routePath,\n      },\n    ],\n  }\n\n  let seoInput = {\n    description: seoData.description,\n    author: seoData.author,\n    keywords: seoData.keywords,\n    creator: seoData.creator,\n    ogType: metaDefaults.ogType,\n    og_title: seoData.og_title,\n    og_description: seoData.og_description,\n    og_image: seoData.og_image,\n    og_image_alt: seoData.og_image_alt,\n    ogSiteName: metaDefaults.siteName,\n    ogUrl: seoData.ogUrl,\n    twitterTitle: seoData.x_title,\n    twitterDescription: seoData.x_description,\n    twitterImage: seoData.x_image,\n    twitterimage_alt: seoData.x_image_alt,\n    twitterCard: seoData.x_card,\n    twitterSite: metaDefaults.twitterSiteHandle,\n    twitterCreator: seoData.x_creator_handle\n  }\n  \n  return {\n    headInput,\n    seoInput\n  }\n}\n",[284,10799,10800,10832,10836,10852,10877,10899,10927,10938,10942,11011,11016,11037,11051,11069,11120,11168,11188,11214,11239,11264,11291,11296,11315,11341,11361,11381,11402,11407,11419,11428,11434,11447,11465,11473,11481,11486,11491,11503,11519,11534,11549,11564,11579,11594,11609,11624,11639,11654,11669,11684,11699,11714,11729,11744,11759,11772,11777,11782,11790,11798,11804,11809],{"__ignoreMap":25},[328,10801,10802,10804,10807,10810,10812,10814,10817,10819,10821,10823,10826,10828,10830],{"class":330,"line":155},[328,10803,5433],{"class":2703},[328,10805,10806],{"class":1074}," const",[328,10808,10809],{"class":340}," setSEO",[328,10811,3476],{"class":2703},[328,10813,9378],{"class":333},[328,10815,10816],{"class":10470},"metaPage",[328,10818,3964],{"class":3370},[328,10820,3473],{"class":10470},[328,10822,3964],{"class":3370},[328,10824,10825],{"class":10470}," routePath",[328,10827,10474],{"class":333},[328,10829,10477],{"class":1074},[328,10831,352],{"class":333},[328,10833,10834],{"class":330,"line":26},[328,10835,2233],{"emptyLinePlaceholder":51},[328,10837,10838,10841,10843,10845,10848,10850],{"class":330,"line":239},[328,10839,10840],{"class":1074},"  let",[328,10842,10749],{"class":333},[328,10844,432],{"class":2703},[328,10846,10847],{"class":333}," metaPage ",[328,10849,10760],{"class":2703},[328,10851,10763],{"class":333},[328,10853,10854,10856,10859,10861,10863,10866,10869,10871,10874],{"class":330,"line":381},[328,10855,10840],{"class":1074},[328,10857,10858],{"class":333}," oTitle ",[328,10860,432],{"class":2703},[328,10862,9378],{"class":333},[328,10864,10865],{"class":360},"doc",[328,10867,10868],{"class":333},".og_title ",[328,10870,10760],{"class":2703},[328,10872,10873],{"class":360}," doc",[328,10875,10876],{"class":333},".title)\n",[328,10878,10879,10881,10884,10886,10888,10890,10893,10895,10897],{"class":330,"line":387},[328,10880,10840],{"class":1074},[328,10882,10883],{"class":333}," x_title ",[328,10885,432],{"class":2703},[328,10887,9378],{"class":333},[328,10889,10865],{"class":360},[328,10891,10892],{"class":333},".x_title ",[328,10894,10760],{"class":2703},[328,10896,10873],{"class":360},[328,10898,10876],{"class":333},[328,10900,10901,10903,10906,10908,10910,10913,10915,10917,10920,10922,10924],{"class":330,"line":558},[328,10902,10840],{"class":1074},[328,10904,10905],{"class":333}," x_image ",[328,10907,432],{"class":2703},[328,10909,10873],{"class":360},[328,10911,10912],{"class":333},".x_image ",[328,10914,10760],{"class":2703},[328,10916,10873],{"class":360},[328,10918,10919],{"class":333},".image ",[328,10921,10760],{"class":2703},[328,10923,3473],{"class":360},[328,10925,10926],{"class":333},".image2x1\n",[328,10928,10929,10931,10934,10936],{"class":330,"line":584},[328,10930,10840],{"class":1074},[328,10932,10933],{"class":333}," seoData ",[328,10935,432],{"class":2703},[328,10937,10763],{"class":333},[328,10939,10940],{"class":330,"line":596},[328,10941,2233],{"emptyLinePlaceholder":51},[328,10943,10944,10946,10949,10951,10953,10955,10957,10960,10962,10965,10967,10970,10972,10974,10977,10979,10981,10983,10985,10987,10990,10992,10994,10996,10998,11000,11002,11004,11006,11008],{"class":330,"line":601},[328,10945,10840],{"class":1074},[328,10947,10948],{"class":333}," keywords ",[328,10950,432],{"class":2703},[328,10952,10749],{"class":333},[328,10954,10490],{"class":2703},[328,10956,10873],{"class":360},[328,10958,10959],{"class":333},".keywords ",[328,10961,10490],{"class":2703},[328,10963,10964],{"class":360}," Array",[328,10966,997],{"class":10735},[328,10968,10969],{"class":340},"isArray",[328,10971,1089],{"class":333},[328,10973,10865],{"class":360},[328,10975,10976],{"class":333},".keywords) ",[328,10978,10503],{"class":2703},[328,10980,3473],{"class":360},[328,10982,997],{"class":10735},[328,10984,3254],{"class":360},[328,10986,997],{"class":10735},[328,10988,10989],{"class":340},"concat",[328,10991,1089],{"class":333},[328,10993,10865],{"class":360},[328,10995,10976],{"class":333},[328,10997,374],{"class":2703},[328,10999,3473],{"class":360},[328,11001,997],{"class":10735},[328,11003,3254],{"class":360},[328,11005,997],{"class":10735},[328,11007,10989],{"class":340},[328,11009,11010],{"class":333},"([]);\n",[328,11012,11013],{"class":330,"line":843},[328,11014,11015],{"class":333},"  \n",[328,11017,11018,11021,11024,11026,11028,11030,11032,11034],{"class":330,"line":849},[328,11019,11020],{"class":360},"  seoData",[328,11022,11023],{"class":333},".author ",[328,11025,432],{"class":2703},[328,11027,10873],{"class":360},[328,11029,11023],{"class":333},[328,11031,10760],{"class":2703},[328,11033,3473],{"class":360},[328,11035,11036],{"class":333},".author\n",[328,11038,11039,11041,11044,11046,11048],{"class":330,"line":859},[328,11040,11020],{"class":360},[328,11042,11043],{"class":333},".creator ",[328,11045,432],{"class":2703},[328,11047,3473],{"class":360},[328,11049,11050],{"class":333},".creator\n",[328,11052,11053,11055,11057,11059,11062,11064,11067],{"class":330,"line":869},[328,11054,11020],{"class":360},[328,11056,10959],{"class":333},[328,11058,432],{"class":2703},[328,11060,11061],{"class":360}," keywords",[328,11063,997],{"class":10735},[328,11065,11066],{"class":340},"toString",[328,11068,10665],{"class":333},[328,11070,11071,11073,11075,11077,11080,11082,11084,11086,11088,11091,11093,11095,11097,11099,11101,11103,11106,11109,11111,11113,11115,11117],{"class":330,"line":878},[328,11072,11020],{"class":360},[328,11074,10868],{"class":333},[328,11076,432],{"class":2703},[328,11078,11079],{"class":333}," (oTitle ",[328,11081,10490],{"class":2703},[328,11083,10858],{"class":333},[328,11085,10495],{"class":2703},[328,11087,3473],{"class":360},[328,11089,11090],{"class":333},".title) ",[328,11092,10503],{"class":2703},[328,11094,10506],{"class":435},[328,11096,10509],{"class":2703},[328,11098,3455],{"class":360},[328,11100,10522],{"class":333},[328,11102,6735],{"class":2703},[328,11104,11105],{"class":2703}," ${",[328,11107,11108],{"class":333},"oTitle",[328,11110,6735],{"class":2703},[328,11112,10527],{"class":435},[328,11114,10530],{"class":2703},[328,11116,3473],{"class":360},[328,11118,11119],{"class":333},".title\n",[328,11121,11122,11124,11126,11128,11131,11133,11135,11137,11139,11141,11143,11145,11147,11149,11151,11153,11155,11158,11160,11162,11164,11166],{"class":330,"line":888},[328,11123,11020],{"class":360},[328,11125,10892],{"class":333},[328,11127,432],{"class":2703},[328,11129,11130],{"class":333}," (x_title ",[328,11132,10490],{"class":2703},[328,11134,10883],{"class":333},[328,11136,10495],{"class":2703},[328,11138,3473],{"class":360},[328,11140,11090],{"class":333},[328,11142,10503],{"class":2703},[328,11144,10506],{"class":435},[328,11146,10509],{"class":2703},[328,11148,3455],{"class":360},[328,11150,10522],{"class":333},[328,11152,6735],{"class":2703},[328,11154,11105],{"class":2703},[328,11156,11157],{"class":333},"x_title",[328,11159,6735],{"class":2703},[328,11161,10527],{"class":435},[328,11163,10530],{"class":2703},[328,11165,3473],{"class":360},[328,11167,11119],{"class":333},[328,11169,11170,11172,11175,11177,11179,11181,11183,11185],{"class":330,"line":905},[328,11171,11020],{"class":360},[328,11173,11174],{"class":333},".description ",[328,11176,432],{"class":2703},[328,11178,10873],{"class":360},[328,11180,11174],{"class":333},[328,11182,10760],{"class":2703},[328,11184,3473],{"class":360},[328,11186,11187],{"class":333},".description;\n",[328,11189,11190,11192,11195,11197,11199,11201,11203,11205,11207,11209,11211],{"class":330,"line":919},[328,11191,11020],{"class":360},[328,11193,11194],{"class":333},".og_description ",[328,11196,432],{"class":2703},[328,11198,10873],{"class":360},[328,11200,11194],{"class":333},[328,11202,10760],{"class":2703},[328,11204,10873],{"class":360},[328,11206,11174],{"class":333},[328,11208,10760],{"class":2703},[328,11210,3473],{"class":360},[328,11212,11213],{"class":333},".description\n",[328,11215,11216,11218,11221,11223,11225,11227,11229,11231,11233,11235,11237],{"class":330,"line":928},[328,11217,11020],{"class":360},[328,11219,11220],{"class":333},".x_description ",[328,11222,432],{"class":2703},[328,11224,10873],{"class":360},[328,11226,11220],{"class":333},[328,11228,10760],{"class":2703},[328,11230,10873],{"class":360},[328,11232,11174],{"class":333},[328,11234,10760],{"class":2703},[328,11236,3473],{"class":360},[328,11238,11213],{"class":333},[328,11240,11241,11243,11246,11248,11250,11252,11254,11256,11258,11260,11262],{"class":330,"line":938},[328,11242,11020],{"class":360},[328,11244,11245],{"class":333},".og_image ",[328,11247,432],{"class":2703},[328,11249,10873],{"class":360},[328,11251,11245],{"class":333},[328,11253,10760],{"class":2703},[328,11255,10873],{"class":360},[328,11257,10919],{"class":333},[328,11259,10760],{"class":2703},[328,11261,3473],{"class":360},[328,11263,10926],{"class":333},[328,11265,11266,11268,11271,11273,11275,11277,11279,11281,11284,11286,11288],{"class":330,"line":947},[328,11267,11020],{"class":360},[328,11269,11270],{"class":333},".og_image_alt ",[328,11272,432],{"class":2703},[328,11274,10873],{"class":360},[328,11276,11270],{"class":333},[328,11278,10760],{"class":2703},[328,11280,10873],{"class":360},[328,11282,11283],{"class":333},".image_alt ",[328,11285,10760],{"class":2703},[328,11287,3473],{"class":360},[328,11289,11290],{"class":333},".image_alt\n",[328,11292,11293],{"class":330,"line":3080},[328,11294,11295],{"class":3950},"  \u002F\u002F Note: X\u002FTwitter will not show the static image unless the static non-js version has a full url.\n",[328,11297,11298,11300,11302,11304,11306,11309,11312],{"class":330,"line":3736},[328,11299,11020],{"class":360},[328,11301,10912],{"class":333},[328,11303,432],{"class":2703},[328,11305,3473],{"class":360},[328,11307,11308],{"class":333},".rootUrl ",[328,11310,11311],{"class":2703},"+",[328,11313,11314],{"class":333}," x_image\n",[328,11316,11317,11319,11322,11324,11326,11329,11331,11333,11335,11337,11339],{"class":330,"line":3747},[328,11318,11020],{"class":360},[328,11320,11321],{"class":333},".x_image_alt  ",[328,11323,432],{"class":2703},[328,11325,10873],{"class":360},[328,11327,11328],{"class":333},".x_image_alt ",[328,11330,10760],{"class":2703},[328,11332,10873],{"class":360},[328,11334,11283],{"class":333},[328,11336,10760],{"class":2703},[328,11338,3473],{"class":360},[328,11340,11290],{"class":333},[328,11342,11343,11345,11348,11350,11352,11354,11356,11358],{"class":330,"line":10394},[328,11344,11020],{"class":360},[328,11346,11347],{"class":333},".ogUrl ",[328,11349,432],{"class":2703},[328,11351,3473],{"class":360},[328,11353,11308],{"class":333},[328,11355,11311],{"class":2703},[328,11357,10873],{"class":360},[328,11359,11360],{"class":333},"._path \n",[328,11362,11363,11365,11368,11370,11372,11374,11376,11378],{"class":330,"line":10400},[328,11364,11020],{"class":360},[328,11366,11367],{"class":333},".x_card ",[328,11369,432],{"class":2703},[328,11371,10873],{"class":360},[328,11373,11367],{"class":333},[328,11375,10760],{"class":2703},[328,11377,3473],{"class":360},[328,11379,11380],{"class":333},".twitterCard\n",[328,11382,11384,11386,11389,11391,11393,11395,11397,11399],{"class":330,"line":11383},26,[328,11385,11020],{"class":360},[328,11387,11388],{"class":333},".x_creator_handle ",[328,11390,432],{"class":2703},[328,11392,10873],{"class":360},[328,11394,11388],{"class":333},[328,11396,10760],{"class":2703},[328,11398,3473],{"class":360},[328,11400,11401],{"class":333},".twitterCreatorHandle\n",[328,11403,11405],{"class":330,"line":11404},27,[328,11406,2233],{"emptyLinePlaceholder":51},[328,11408,11410,11412,11415,11417],{"class":330,"line":11409},28,[328,11411,10840],{"class":1074},[328,11413,11414],{"class":333}," headInput ",[328,11416,432],{"class":2703},[328,11418,352],{"class":333},[328,11420,11422,11424,11426],{"class":330,"line":11421},29,[328,11423,3940],{"class":333},[328,11425,374],{"class":373},[328,11427,3945],{"class":333},[328,11429,11431],{"class":330,"line":11430},30,[328,11432,11433],{"class":333},"      {\n",[328,11435,11437,11440,11442,11445],{"class":330,"line":11436},31,[328,11438,11439],{"class":333},"        rel",[328,11441,374],{"class":373},[328,11443,11444],{"class":435}," 'canonical'",[328,11446,3386],{"class":3370},[328,11448,11450,11453,11455,11457,11459,11461,11463],{"class":330,"line":11449},32,[328,11451,11452],{"class":333},"        href",[328,11454,374],{"class":373},[328,11456,3473],{"class":360},[328,11458,11308],{"class":333},[328,11460,11311],{"class":2703},[328,11462,10825],{"class":333},[328,11464,3386],{"class":3370},[328,11466,11468,11471],{"class":330,"line":11467},33,[328,11469,11470],{"class":333},"      }",[328,11472,3386],{"class":3370},[328,11474,11476,11479],{"class":330,"line":11475},34,[328,11477,11478],{"class":333},"    ]",[328,11480,3386],{"class":3370},[328,11482,11484],{"class":330,"line":11483},35,[328,11485,3431],{"class":333},[328,11487,11489],{"class":330,"line":11488},36,[328,11490,2233],{"emptyLinePlaceholder":51},[328,11492,11494,11496,11499,11501],{"class":330,"line":11493},37,[328,11495,10840],{"class":1074},[328,11497,11498],{"class":333}," seoInput ",[328,11500,432],{"class":2703},[328,11502,352],{"class":333},[328,11504,11506,11509,11511,11514,11517],{"class":330,"line":11505},38,[328,11507,11508],{"class":333},"    description",[328,11510,374],{"class":373},[328,11512,11513],{"class":360}," seoData",[328,11515,11516],{"class":333},".description",[328,11518,3386],{"class":3370},[328,11520,11522,11525,11527,11529,11532],{"class":330,"line":11521},39,[328,11523,11524],{"class":333},"    author",[328,11526,374],{"class":373},[328,11528,11513],{"class":360},[328,11530,11531],{"class":333},".author",[328,11533,3386],{"class":3370},[328,11535,11537,11540,11542,11544,11547],{"class":330,"line":11536},40,[328,11538,11539],{"class":333},"    keywords",[328,11541,374],{"class":373},[328,11543,11513],{"class":360},[328,11545,11546],{"class":333},".keywords",[328,11548,3386],{"class":3370},[328,11550,11552,11555,11557,11559,11562],{"class":330,"line":11551},41,[328,11553,11554],{"class":333},"    creator",[328,11556,374],{"class":373},[328,11558,11513],{"class":360},[328,11560,11561],{"class":333},".creator",[328,11563,3386],{"class":3370},[328,11565,11567,11570,11572,11574,11577],{"class":330,"line":11566},42,[328,11568,11569],{"class":333},"    ogType",[328,11571,374],{"class":373},[328,11573,3473],{"class":360},[328,11575,11576],{"class":333},".ogType",[328,11578,3386],{"class":3370},[328,11580,11582,11585,11587,11589,11592],{"class":330,"line":11581},43,[328,11583,11584],{"class":333},"    og_title",[328,11586,374],{"class":373},[328,11588,11513],{"class":360},[328,11590,11591],{"class":333},".og_title",[328,11593,3386],{"class":3370},[328,11595,11597,11600,11602,11604,11607],{"class":330,"line":11596},44,[328,11598,11599],{"class":333},"    og_description",[328,11601,374],{"class":373},[328,11603,11513],{"class":360},[328,11605,11606],{"class":333},".og_description",[328,11608,3386],{"class":3370},[328,11610,11612,11615,11617,11619,11622],{"class":330,"line":11611},45,[328,11613,11614],{"class":333},"    og_image",[328,11616,374],{"class":373},[328,11618,11513],{"class":360},[328,11620,11621],{"class":333},".og_image",[328,11623,3386],{"class":3370},[328,11625,11627,11630,11632,11634,11637],{"class":330,"line":11626},46,[328,11628,11629],{"class":333},"    og_image_alt",[328,11631,374],{"class":373},[328,11633,11513],{"class":360},[328,11635,11636],{"class":333},".og_image_alt",[328,11638,3386],{"class":3370},[328,11640,11642,11645,11647,11649,11652],{"class":330,"line":11641},47,[328,11643,11644],{"class":333},"    ogSiteName",[328,11646,374],{"class":373},[328,11648,3473],{"class":360},[328,11650,11651],{"class":333},".siteName",[328,11653,3386],{"class":3370},[328,11655,11657,11660,11662,11664,11667],{"class":330,"line":11656},48,[328,11658,11659],{"class":333},"    ogUrl",[328,11661,374],{"class":373},[328,11663,11513],{"class":360},[328,11665,11666],{"class":333},".ogUrl",[328,11668,3386],{"class":3370},[328,11670,11672,11675,11677,11679,11682],{"class":330,"line":11671},49,[328,11673,11674],{"class":333},"    twitterTitle",[328,11676,374],{"class":373},[328,11678,11513],{"class":360},[328,11680,11681],{"class":333},".x_title",[328,11683,3386],{"class":3370},[328,11685,11687,11690,11692,11694,11697],{"class":330,"line":11686},50,[328,11688,11689],{"class":333},"    twitterDescription",[328,11691,374],{"class":373},[328,11693,11513],{"class":360},[328,11695,11696],{"class":333},".x_description",[328,11698,3386],{"class":3370},[328,11700,11702,11705,11707,11709,11712],{"class":330,"line":11701},51,[328,11703,11704],{"class":333},"    twitterImage",[328,11706,374],{"class":373},[328,11708,11513],{"class":360},[328,11710,11711],{"class":333},".x_image",[328,11713,3386],{"class":3370},[328,11715,11717,11720,11722,11724,11727],{"class":330,"line":11716},52,[328,11718,11719],{"class":333},"    twitterimage_alt",[328,11721,374],{"class":373},[328,11723,11513],{"class":360},[328,11725,11726],{"class":333},".x_image_alt",[328,11728,3386],{"class":3370},[328,11730,11732,11735,11737,11739,11742],{"class":330,"line":11731},53,[328,11733,11734],{"class":333},"    twitterCard",[328,11736,374],{"class":373},[328,11738,11513],{"class":360},[328,11740,11741],{"class":333},".x_card",[328,11743,3386],{"class":3370},[328,11745,11747,11750,11752,11754,11757],{"class":330,"line":11746},54,[328,11748,11749],{"class":333},"    twitterSite",[328,11751,374],{"class":373},[328,11753,3473],{"class":360},[328,11755,11756],{"class":333},".twitterSiteHandle",[328,11758,3386],{"class":3370},[328,11760,11762,11765,11767,11769],{"class":330,"line":11761},55,[328,11763,11764],{"class":333},"    twitterCreator",[328,11766,374],{"class":373},[328,11768,11513],{"class":360},[328,11770,11771],{"class":333},".x_creator_handle\n",[328,11773,11775],{"class":330,"line":11774},56,[328,11776,3431],{"class":333},[328,11778,11780],{"class":330,"line":11779},57,[328,11781,11015],{"class":333},[328,11783,11785,11788],{"class":330,"line":11784},58,[328,11786,11787],{"class":2703},"  return",[328,11789,352],{"class":333},[328,11791,11793,11796],{"class":330,"line":11792},59,[328,11794,11795],{"class":333},"    headInput",[328,11797,3386],{"class":3370},[328,11799,11801],{"class":330,"line":11800},60,[328,11802,11803],{"class":333},"    seoInput\n",[328,11805,11807],{"class":330,"line":11806},61,[328,11808,3431],{"class":333},[328,11810,11812],{"class":330,"line":11811},62,[328,11813,384],{"class":333},[12,11815,11816,11817,11819],{},"Typically, you might want to extract this snippet into a utility function, but for my purposes since I used ",[284,11818,5584],{}," catchall file, which handles 99% of my pages, I didn't need to.",[167,11821,7449],{"id":7448},[12,11823,7452,11824,7458],{},[16,11825,7457],{"href":7455,"rel":11826},[88],[320,11828,11829],{"className":322,"code":7539,"language":324,"meta":25,"style":25},[284,11830,11831,11839,11845,11851,11859,11867,11875,11883,11891,11895,11899],{"__ignoreMap":25},[328,11832,11833,11835,11837],{"class":330,"line":155},[328,11834,334],{"class":333},[328,11836,101],{"class":337},[328,11838,344],{"class":333},[328,11840,11841,11843],{"class":330,"line":26},[328,11842,5714],{"class":333},[328,11844,7556],{"class":3950},[328,11846,11847,11849],{"class":330,"line":239},[328,11848,424],{"class":333},[328,11850,7563],{"class":337},[328,11852,11853,11855,11857],{"class":330,"line":381},[328,11854,7568],{"class":340},[328,11856,432],{"class":373},[328,11858,7573],{"class":435},[328,11860,11861,11863,11865],{"class":330,"line":387},[328,11862,7578],{"class":340},[328,11864,432],{"class":373},[328,11866,7583],{"class":435},[328,11868,11869,11871,11873],{"class":330,"line":558},[328,11870,7588],{"class":340},[328,11872,432],{"class":373},[328,11874,7593],{"class":435},[328,11876,11877,11879,11881],{"class":330,"line":584},[328,11878,7598],{"class":340},[328,11880,432],{"class":373},[328,11882,7583],{"class":435},[328,11884,11885,11887,11889],{"class":330,"line":596},[328,11886,7607],{"class":340},[328,11888,432],{"class":373},[328,11890,7612],{"class":435},[328,11892,11893],{"class":330,"line":601},[328,11894,7617],{"class":333},[328,11896,11897],{"class":330,"line":843},[328,11898,7556],{"class":3950},[328,11900,11901,11903,11905],{"class":330,"line":849},[328,11902,390],{"class":333},[328,11904,101],{"class":337},[328,11906,344],{"class":333},[272,11908,10620,11910,11912],{"id":11909},"page-md-usage",[284,11911,5315],{}," Usage",[167,11914,11916],{"id":11915},"base-metadata-variables","Base Metadata Variables",[12,11918,11919,11920,11922],{},"The basic set of front-matter variables that each ",[284,11921,5315],{}," page should contain.",[1405,11924,11925,11939],{},[1408,11926,11927],{},[1411,11928,11929,11933,11936],{},[1414,11930,11932],{"align":11931},"center","Variable key",[1414,11934,11935],{"align":11931},"HTML element",[1414,11937,11938],{"align":11931},"Purpose",[1424,11940,11941,11953,11964,11976,11992],{},[1411,11942,11943,11945,11950],{},[1429,11944,7995],{"align":11931},[1429,11946,11947],{"align":11931},[284,11948,11949],{},"\u003Ctitle>\u003C\u002Ftitle>",[1429,11951,11952],{"align":11931},"NuxtContent metadata",[1411,11954,11955,11957,11962],{},[1429,11956,1291],{"align":11931},[1429,11958,11959],{"align":11931},[284,11960,11961],{},"name=\"description\"",[1429,11963,11952],{"align":11931},[1411,11965,11966,11968,11973],{},[1429,11967,3246],{"align":11931},[1429,11969,11970],{"align":11931},[284,11971,11972],{},"name=\"author\"",[1429,11974,11975],{"align":11931},"SEO metadata",[1411,11977,11978,11981,11989],{},[1429,11979,11980],{"align":11931},"image",[1429,11982,11983,10009,11986],{"align":11931},[284,11984,11985],{},"property=\"og:image\"",[284,11987,11988],{},"name=\"twitter:image\"",[1429,11990,11991],{"align":11931},"Social metadata",[1411,11993,11994,11997,12005],{},[1429,11995,11996],{"align":11931},"image_alt",[1429,11998,11999,10009,12002],{"align":11931},[284,12000,12001],{},"property=\"og:image:alt\"",[284,12003,12004],{},"name=\"twitter:image:alt\"",[1429,12006,11991],{"align":11931},[167,12008,12010],{"id":12009},"base-app-variables","Base App Variables",[1405,12012,12013,12024],{},[1408,12014,12015],{},[1411,12016,12017,12019,12022],{},[1414,12018,11932],{"align":11931},[1414,12020,12021],{"align":11931},"Key Values",[1414,12023,1291],{"align":11931},[1424,12025,12026,12037,12054,12068],{},[1411,12027,12028,12031,12034],{},[1429,12029,12030],{"align":11931},"date_created",[1429,12032,12033],{"align":11931},"YYYY-MM-DD",[1429,12035,12036],{"align":11931},"used in blog and articles",[1411,12038,12039,12042,12051],{},[1429,12040,12041],{"align":11931},"is_toc",[1429,12043,12044,2615,12047,12050],{"align":11931},[284,12045,12046],{},"true",[284,12048,12049],{},"false","(default)",[1429,12052,12053],{"align":11931},"whether page will have a table of contents",[1411,12055,12056,12059,12065],{},[1429,12057,12058],{"align":11931},"is_manual_image",[1429,12060,12061,2615,12063,12050],{"align":11931},[284,12062,12046],{},[284,12064,12049],{},[1429,12066,12067],{"align":11931},"whether page will manually insert article image",[1411,12069,12070,12073,12076],{},[1429,12071,12072],{"align":11931},"format",[1429,12074,12075],{"align":11931},"\"List\u002FCode\u002FCheat Sheet\u002FHow-to\u002Fetc.\"",[1429,12077,12078],{"align":11931},"explains the organization and tone",[167,12080,12082],{"id":12081},"base-template","Base Template",[320,12084,12088],{"className":12085,"code":12086,"language":12087,"meta":25,"style":25},"language-yaml shiki shiki-themes min-light min-dark monokai","---\ntitle: Template Title\ndescription: \"The Templates's description\"\nis_toc: true\ndate_created: 2024-05-03\nauthor: Template Article Author in text, i.e. John Pennock\nimage: \"\" # \"Social Image relative or absolute link - ideally 1200 x 600 or 1200 x 630\"\nimage_alt: \"\" #Template Image Alt Text description\"\n--- \n","yaml",[284,12089,12090,12094,12103,12112,12121,12130,12139,12150,12161],{"__ignoreMap":25},[328,12091,12092],{"class":330,"line":155},[328,12093,8011],{"class":333},[328,12095,12096,12098,12100],{"class":330,"line":26},[328,12097,7995],{"class":570},[328,12099,374],{"class":373},[328,12101,12102],{"class":435}," Template Title\n",[328,12104,12105,12107,12109],{"class":330,"line":239},[328,12106,1291],{"class":570},[328,12108,374],{"class":373},[328,12110,12111],{"class":435}," \"The Templates's description\"\n",[328,12113,12114,12116,12118],{"class":330,"line":381},[328,12115,12041],{"class":570},[328,12117,374],{"class":373},[328,12119,12120],{"class":7080}," true\n",[328,12122,12123,12125,12127],{"class":330,"line":387},[328,12124,12030],{"class":570},[328,12126,374],{"class":373},[328,12128,12129],{"class":2693}," 2024-05-03\n",[328,12131,12132,12134,12136],{"class":330,"line":558},[328,12133,3246],{"class":570},[328,12135,374],{"class":373},[328,12137,12138],{"class":435}," Template Article Author in text, i.e. John Pennock\n",[328,12140,12141,12143,12145,12147],{"class":330,"line":584},[328,12142,11980],{"class":570},[328,12144,374],{"class":373},[328,12146,9824],{"class":435},[328,12148,12149],{"class":3950}," # \"Social Image relative or absolute link - ideally 1200 x 600 or 1200 x 630\"\n",[328,12151,12152,12154,12156,12158],{"class":330,"line":596},[328,12153,11996],{"class":570},[328,12155,374],{"class":373},[328,12157,9824],{"class":435},[328,12159,12160],{"class":3950}," #Template Image Alt Text description\"\n",[328,12162,12163],{"class":330,"line":601},[328,12164,8011],{"class":333},[167,12166,12168],{"id":12167},"extended-metadata-variables","Extended Metadata Variables",[12,12170,12171,12172,12174],{},"The extended set of front-matter variables that each ",[284,12173,5315],{}," page could contain.",[1405,12176,12177,12187],{},[1408,12178,12179],{},[1411,12180,12181,12183,12185],{},[1414,12182,11932],{"align":11931},[1414,12184,11935],{"align":11931},[1414,12186,11938],{"align":11931},[1424,12188,12189,12200,12210,12221,12233,12245,12256,12267,12279,12291,12302,12313,12325],{},[1411,12190,12191,12194,12197],{},[1429,12192,12193],{"align":11931},"date_modified",[1429,12195,12196],{"align":11931},"N\u002FA",[1429,12198,12199],{"align":11931},"a date for article updated",[1411,12201,12202,12205,12207],{},[1429,12203,12204],{"align":11931},"editor",[1429,12206,12196],{"align":11931},[1429,12208,12209],{"align":11931},"editor who updated article",[1411,12211,12212,12214,12219],{},[1429,12213,3254],{"align":11931},[1429,12215,12216],{"align":11931},[284,12217,12218],{},"name=\"keywords\"",[1429,12220,11975],{"align":11931},[1411,12222,12223,12225,12230],{},[1429,12224,10784],{"align":11931},[1429,12226,12227],{"align":11931},[284,12228,12229],{},"property=\"og:title\"",[1429,12231,12232],{"align":11931},"FB\u002FOpen Graph metadata",[1411,12234,12235,12238,12243],{},[1429,12236,12237],{"align":11931},"og_description",[1429,12239,12240],{"align":11931},[284,12241,12242],{},"property=\"og:description\"",[1429,12244,12232],{"align":11931},[1411,12246,12247,12250,12254],{},[1429,12248,12249],{"align":11931},"og_image",[1429,12251,12252],{"align":11931},[284,12253,11985],{},[1429,12255,12232],{"align":11931},[1411,12257,12258,12261,12265],{},[1429,12259,12260],{"align":11931},"og_image_alt",[1429,12262,12263],{"align":11931},[284,12264,12001],{},[1429,12266,12232],{"align":11931},[1411,12268,12269,12271,12276],{},[1429,12270,11157],{"align":11931},[1429,12272,12273],{"align":11931},[284,12274,12275],{},"name=\"twitter:title\"",[1429,12277,12278],{"align":11931},"X\u002FTwitter metadata",[1411,12280,12281,12284,12289],{},[1429,12282,12283],{"align":11931},"x_description",[1429,12285,12286],{"align":11931},[284,12287,12288],{},"name=\"twitter:description\"",[1429,12290,12278],{"align":11931},[1411,12292,12293,12296,12300],{},[1429,12294,12295],{"align":11931},"x_image",[1429,12297,12298],{"align":11931},[284,12299,11988],{},[1429,12301,12278],{"align":11931},[1411,12303,12304,12307,12311],{},[1429,12305,12306],{"align":11931},"x_image_alt",[1429,12308,12309],{"align":11931},[284,12310,12004],{},[1429,12312,12278],{"align":11931},[1411,12314,12315,12318,12323],{},[1429,12316,12317],{"align":11931},"x_card",[1429,12319,12320],{"align":11931},[284,12321,12322],{},"name=\"twitter:card\"",[1429,12324,12278],{"align":11931},[1411,12326,12327,12330,12335],{},[1429,12328,12329],{"align":11931},"x_creator_handle",[1429,12331,12332],{"align":11931},[284,12333,12334],{},"name=\"twitter:creator\"",[1429,12336,12278],{"align":11931},[12,12338,12339,12340,2615,12343,12346],{},"The variables that start with ",[284,12341,12342],{},"og",[284,12344,12345],{},"x"," that are for 'title', 'description', 'image', and 'image_alt' are for overriding the base variable when you what something specific for either Open Graph\u002FFacebook or X\u002FTwitter metadata. For example, you could create a custom title, description, and image for X\u002FTwitter if you set these.  Normally all of the metadata are set to the same value from the base variables.",[12,12348,12349,12350,12354],{},"There are a lot more variables available for ",[16,12351,10050],{"href":12352,"rel":12353},"https:\u002F\u002Fgithub.com\u002Fharlan-zw\u002Fzhead\u002Fblob\u002Fmain\u002Fpackages\u002Fzhead\u002Fsrc\u002FmetaFlat.ts#L1035",[88],", but these are the ones illustrated here.",[167,12356,12358],{"id":12357},"extended-app-variables","Extended App Variables",[1405,12360,12361,12372],{},[1408,12362,12363],{},[1411,12364,12365,12367,12370],{},[1414,12366,11932],{"align":11931},[1414,12368,12369],{"align":11931},"Format",[1414,12371,1291],{"align":11931},[1424,12373,12374],{},[1411,12375,12376,12378,12381],{},[1429,12377,2223],{"align":11931},[1429,12379,12380],{"align":11931},"Major.Minor (X.X)",[1429,12382,12383],{"align":11931},"for version tracking",[167,12385,12387],{"id":12386},"extended-template","Extended Template",[320,12389,12391],{"className":12085,"code":12390,"language":12087,"meta":25,"style":25},"---\ntitle: Template Title\ndescription: \"The Templates's description\"\ncontent_type: \"'guide', 'hub', 'index', 'article', 'post', 'cheat sheet', 'how-to'\"\nkeywords: [NuxtContent, Vue_js, nuxt, Metadata, SEO, SocialShare, OpenGraph]\nis_toc: true\nversion: 1.0  #optional for tracking\ndate_created: 2024-05-03 10:00:00\nauthor: Template Article Author\ndate_modified: 2024-05-03 10:00:00  # optional for when updated, date_created is required\neditor: Template Article Editor # optional, for second author\nimage: Template Image Link, ideally 2x1\nimage_alt: Template Image Alt Text description\nog_title: Template Open Graph Title\nog_description: Template Open Graph Description\nog_image: Template Open Graph Image Link - ideally 1200 x 630\nog_image_alt: Template Open Graph Image Alt - use only if 'image_alt' not sufficient\nx_title: Template Twitter Title\nx_description: Template Twitter Description\nx_image: Template Twitter Image Link - ideally 1200 x 600 for large card, or 800 x 800 square for summary\nx_image_alt: Template Twitter Image Alt - use only if 'image_alt' not sufficient\nx_card: Template Twitter Card - 'summary' (default) or 'summary_large_image' \nx_creator_handle: Template Twitter Creator handle, default @JohnPennock\n---\n",[284,12392,12393,12397,12405,12413,12423,12465,12473,12485,12494,12503,12515,12527,12536,12545,12554,12563,12572,12581,12590,12599,12608,12617,12629,12638],{"__ignoreMap":25},[328,12394,12395],{"class":330,"line":155},[328,12396,8011],{"class":333},[328,12398,12399,12401,12403],{"class":330,"line":26},[328,12400,7995],{"class":570},[328,12402,374],{"class":373},[328,12404,12102],{"class":435},[328,12406,12407,12409,12411],{"class":330,"line":239},[328,12408,1291],{"class":570},[328,12410,374],{"class":373},[328,12412,12111],{"class":435},[328,12414,12415,12418,12420],{"class":330,"line":381},[328,12416,12417],{"class":570},"content_type",[328,12419,374],{"class":373},[328,12421,12422],{"class":435}," \"'guide', 'hub', 'index', 'article', 'post', 'cheat sheet', 'how-to'\"\n",[328,12424,12425,12427,12429,12431,12433,12435,12438,12440,12443,12445,12448,12450,12453,12455,12458,12460,12463],{"class":330,"line":387},[328,12426,3254],{"class":570},[328,12428,374],{"class":373},[328,12430,6718],{"class":333},[328,12432,1189],{"class":2689},[328,12434,3964],{"class":3370},[328,12436,12437],{"class":2689}," Vue_js",[328,12439,3964],{"class":3370},[328,12441,12442],{"class":2689}," nuxt",[328,12444,3964],{"class":3370},[328,12446,12447],{"class":2689}," Metadata",[328,12449,3964],{"class":3370},[328,12451,12452],{"class":2689}," SEO",[328,12454,3964],{"class":3370},[328,12456,12457],{"class":2689}," SocialShare",[328,12459,3964],{"class":3370},[328,12461,12462],{"class":2689}," OpenGraph",[328,12464,6724],{"class":333},[328,12466,12467,12469,12471],{"class":330,"line":558},[328,12468,12041],{"class":570},[328,12470,374],{"class":373},[328,12472,12120],{"class":7080},[328,12474,12475,12477,12479,12482],{"class":330,"line":584},[328,12476,2223],{"class":570},[328,12478,374],{"class":373},[328,12480,12481],{"class":566}," 1.0",[328,12483,12484],{"class":3950},"  #optional for tracking\n",[328,12486,12487,12489,12491],{"class":330,"line":596},[328,12488,12030],{"class":570},[328,12490,374],{"class":373},[328,12492,12493],{"class":2693}," 2024-05-03 10:00:00\n",[328,12495,12496,12498,12500],{"class":330,"line":601},[328,12497,3246],{"class":570},[328,12499,374],{"class":373},[328,12501,12502],{"class":435}," Template Article Author\n",[328,12504,12505,12507,12509,12512],{"class":330,"line":843},[328,12506,12193],{"class":570},[328,12508,374],{"class":373},[328,12510,12511],{"class":2693}," 2024-05-03 10:00:00",[328,12513,12514],{"class":3950},"  # optional for when updated, date_created is required\n",[328,12516,12517,12519,12521,12524],{"class":330,"line":849},[328,12518,12204],{"class":570},[328,12520,374],{"class":373},[328,12522,12523],{"class":435}," Template Article Editor",[328,12525,12526],{"class":3950}," # optional, for second author\n",[328,12528,12529,12531,12533],{"class":330,"line":859},[328,12530,11980],{"class":570},[328,12532,374],{"class":373},[328,12534,12535],{"class":435}," Template Image Link, ideally 2x1\n",[328,12537,12538,12540,12542],{"class":330,"line":869},[328,12539,11996],{"class":570},[328,12541,374],{"class":373},[328,12543,12544],{"class":435}," Template Image Alt Text description\n",[328,12546,12547,12549,12551],{"class":330,"line":878},[328,12548,10784],{"class":570},[328,12550,374],{"class":373},[328,12552,12553],{"class":435}," Template Open Graph Title\n",[328,12555,12556,12558,12560],{"class":330,"line":888},[328,12557,12237],{"class":570},[328,12559,374],{"class":373},[328,12561,12562],{"class":435}," Template Open Graph Description\n",[328,12564,12565,12567,12569],{"class":330,"line":905},[328,12566,12249],{"class":570},[328,12568,374],{"class":373},[328,12570,12571],{"class":435}," Template Open Graph Image Link - ideally 1200 x 630\n",[328,12573,12574,12576,12578],{"class":330,"line":919},[328,12575,12260],{"class":570},[328,12577,374],{"class":373},[328,12579,12580],{"class":435}," Template Open Graph Image Alt - use only if 'image_alt' not sufficient\n",[328,12582,12583,12585,12587],{"class":330,"line":928},[328,12584,11157],{"class":570},[328,12586,374],{"class":373},[328,12588,12589],{"class":435}," Template Twitter Title\n",[328,12591,12592,12594,12596],{"class":330,"line":938},[328,12593,12283],{"class":570},[328,12595,374],{"class":373},[328,12597,12598],{"class":435}," Template Twitter Description\n",[328,12600,12601,12603,12605],{"class":330,"line":947},[328,12602,12295],{"class":570},[328,12604,374],{"class":373},[328,12606,12607],{"class":435}," Template Twitter Image Link - ideally 1200 x 600 for large card, or 800 x 800 square for summary\n",[328,12609,12610,12612,12614],{"class":330,"line":3080},[328,12611,12306],{"class":570},[328,12613,374],{"class":373},[328,12615,12616],{"class":435}," Template Twitter Image Alt - use only if 'image_alt' not sufficient\n",[328,12618,12619,12621,12623,12626],{"class":330,"line":3736},[328,12620,12317],{"class":570},[328,12622,374],{"class":373},[328,12624,12625],{"class":435}," Template Twitter Card - 'summary' (default) or 'summary_large_image'",[328,12627,12628],{"class":333}," \n",[328,12630,12631,12633,12635],{"class":330,"line":3747},[328,12632,12329],{"class":570},[328,12634,374],{"class":373},[328,12636,12637],{"class":435}," Template Twitter Creator handle, default @JohnPennock\n",[328,12639,12640],{"class":330,"line":10394},[328,12641,8011],{"class":333},[167,12643,12645],{"id":12644},"direct-method","Direct Method",[12,12647,12648,12649,12652,12653,12655,12656],{},"Using the method in this article, I intentionally defined a programmatic way to set the variables using custom variables names, but it is important to note that these values can be generated directly through the ",[284,12650,12651],{},"head:"," key in the front-matter variables directly without resort to using ",[284,12654,10050],{}," overtly.  see ",[16,12657,12659],{"href":12658},"\u002Fcheats\u002Fmetadatacheatsheet","SEO Metadata Cheat Sheet",[320,12661,12663],{"className":12085,"code":12662,"language":12087,"meta":25,"style":25},"---\nhead:\n  meta:\n    - name: 'keywords'\n      content: 'blog, John Pennock'\n    - name: 'robots'\n      content: 'index, follow'\n    - name: 'author'\n      content: 'John Pennock'\n    - name: 'copyright'\n      content: '© 2024 John Pennock'\n    - name: 'og:title'\n      content: 'Pennock Projects Blog'\n    - name: 'og:description'\n      content: 'Pennock Projects is a blog about software engineering by John Pennock'\n    - name: 'og:image'\n      content: '\u002Fimages\u002FPennockProjectsLogo.png'\n    - name: 'og:url'\n      content: 'https:\u002F\u002Fblog-git-master-john-pennocks-projects.vercel.app\u002F'\n    - name: 'twitter:title'\n      content: 'Pennock Projects Blog'\n    - name: 'twitter:description'\n      content: 'Pennock Projects is a blog about software engineering by John Pennock'\n    - name: 'twitter:image'\n      content: '\u002Fimages\u002FPennockProjectsLogo.png'\n    - name: 'twitter:card'  \n      content: 'summary'\n--- \n",[284,12664,12665,12669,12676,12683,12694,12704,12715,12724,12735,12744,12755,12764,12775,12784,12795,12804,12815,12824,12835,12844,12855,12863,12874,12882,12893,12901,12914,12923],{"__ignoreMap":25},[328,12666,12667],{"class":330,"line":155},[328,12668,8011],{"class":333},[328,12670,12671,12674],{"class":330,"line":26},[328,12672,12673],{"class":570},"head",[328,12675,2241],{"class":373},[328,12677,12678,12681],{"class":330,"line":239},[328,12679,12680],{"class":570},"  meta",[328,12682,2241],{"class":373},[328,12684,12685,12687,12689,12691],{"class":330,"line":381},[328,12686,2302],{"class":333},[328,12688,3191],{"class":570},[328,12690,374],{"class":373},[328,12692,12693],{"class":435}," 'keywords'\n",[328,12695,12696,12699,12701],{"class":330,"line":387},[328,12697,12698],{"class":570},"      content",[328,12700,374],{"class":373},[328,12702,12703],{"class":435}," 'blog, John Pennock'\n",[328,12705,12706,12708,12710,12712],{"class":330,"line":558},[328,12707,2302],{"class":333},[328,12709,3191],{"class":570},[328,12711,374],{"class":373},[328,12713,12714],{"class":435}," 'robots'\n",[328,12716,12717,12719,12721],{"class":330,"line":584},[328,12718,12698],{"class":570},[328,12720,374],{"class":373},[328,12722,12723],{"class":435}," 'index, follow'\n",[328,12725,12726,12728,12730,12732],{"class":330,"line":596},[328,12727,2302],{"class":333},[328,12729,3191],{"class":570},[328,12731,374],{"class":373},[328,12733,12734],{"class":435}," 'author'\n",[328,12736,12737,12739,12741],{"class":330,"line":601},[328,12738,12698],{"class":570},[328,12740,374],{"class":373},[328,12742,12743],{"class":435}," 'John Pennock'\n",[328,12745,12746,12748,12750,12752],{"class":330,"line":843},[328,12747,2302],{"class":333},[328,12749,3191],{"class":570},[328,12751,374],{"class":373},[328,12753,12754],{"class":435}," 'copyright'\n",[328,12756,12757,12759,12761],{"class":330,"line":849},[328,12758,12698],{"class":570},[328,12760,374],{"class":373},[328,12762,12763],{"class":435}," '© 2024 John Pennock'\n",[328,12765,12766,12768,12770,12772],{"class":330,"line":859},[328,12767,2302],{"class":333},[328,12769,3191],{"class":570},[328,12771,374],{"class":373},[328,12773,12774],{"class":435}," 'og:title'\n",[328,12776,12777,12779,12781],{"class":330,"line":869},[328,12778,12698],{"class":570},[328,12780,374],{"class":373},[328,12782,12783],{"class":435}," 'Pennock Projects Blog'\n",[328,12785,12786,12788,12790,12792],{"class":330,"line":878},[328,12787,2302],{"class":333},[328,12789,3191],{"class":570},[328,12791,374],{"class":373},[328,12793,12794],{"class":435}," 'og:description'\n",[328,12796,12797,12799,12801],{"class":330,"line":888},[328,12798,12698],{"class":570},[328,12800,374],{"class":373},[328,12802,12803],{"class":435}," 'Pennock Projects is a blog about software engineering by John Pennock'\n",[328,12805,12806,12808,12810,12812],{"class":330,"line":905},[328,12807,2302],{"class":333},[328,12809,3191],{"class":570},[328,12811,374],{"class":373},[328,12813,12814],{"class":435}," 'og:image'\n",[328,12816,12817,12819,12821],{"class":330,"line":919},[328,12818,12698],{"class":570},[328,12820,374],{"class":373},[328,12822,12823],{"class":435}," '\u002Fimages\u002FPennockProjectsLogo.png'\n",[328,12825,12826,12828,12830,12832],{"class":330,"line":928},[328,12827,2302],{"class":333},[328,12829,3191],{"class":570},[328,12831,374],{"class":373},[328,12833,12834],{"class":435}," 'og:url'\n",[328,12836,12837,12839,12841],{"class":330,"line":938},[328,12838,12698],{"class":570},[328,12840,374],{"class":373},[328,12842,12843],{"class":435}," 'https:\u002F\u002Fblog-git-master-john-pennocks-projects.vercel.app\u002F'\n",[328,12845,12846,12848,12850,12852],{"class":330,"line":947},[328,12847,2302],{"class":333},[328,12849,3191],{"class":570},[328,12851,374],{"class":373},[328,12853,12854],{"class":435}," 'twitter:title'\n",[328,12856,12857,12859,12861],{"class":330,"line":3080},[328,12858,12698],{"class":570},[328,12860,374],{"class":373},[328,12862,12783],{"class":435},[328,12864,12865,12867,12869,12871],{"class":330,"line":3736},[328,12866,2302],{"class":333},[328,12868,3191],{"class":570},[328,12870,374],{"class":373},[328,12872,12873],{"class":435}," 'twitter:description'\n",[328,12875,12876,12878,12880],{"class":330,"line":3747},[328,12877,12698],{"class":570},[328,12879,374],{"class":373},[328,12881,12803],{"class":435},[328,12883,12884,12886,12888,12890],{"class":330,"line":10394},[328,12885,2302],{"class":333},[328,12887,3191],{"class":570},[328,12889,374],{"class":373},[328,12891,12892],{"class":435}," 'twitter:image'\n",[328,12894,12895,12897,12899],{"class":330,"line":10400},[328,12896,12698],{"class":570},[328,12898,374],{"class":373},[328,12900,12823],{"class":435},[328,12902,12903,12905,12907,12909,12912],{"class":330,"line":11383},[328,12904,2302],{"class":333},[328,12906,3191],{"class":570},[328,12908,374],{"class":373},[328,12910,12911],{"class":435}," 'twitter:card'",[328,12913,11015],{"class":333},[328,12915,12916,12918,12920],{"class":330,"line":11404},[328,12917,12698],{"class":570},[328,12919,374],{"class":373},[328,12921,12922],{"class":435}," 'summary'\n",[328,12924,12925],{"class":330,"line":11409},[328,12926,8011],{"class":333},[167,12928,12930],{"id":12929},"front-matter-variables","Front-matter Variables",[172,12932,12933,12940],{},[175,12934,12935],{},[16,12936,12939],{"href":12937,"rel":12938,"target":191},"https:\u002F\u002Fcontent.nuxt.com\u002Fusage\u002Fmarkdown#front-matter",[88],"Docs for front-matter variables",[175,12941,12942],{},[16,12943,12946],{"href":12944,"rel":12945,"target":191},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FYAML",[88],"YAML syntax",[312,12948,12950],{"id":12949},"seo-title-and-description","SEO Title and Description",[172,12952,12953,12964,12978],{},[175,12954,12955,12960,12961,12963],{},[16,12956,12959],{"href":12957,"rel":12958},"https:\u002F\u002Fcontent.nuxt.com\u002Fusage\u002Fmarkdown#native-parameters",[88],"special front-matter variable 'title'"," the ",[284,12962,11949],{}," element will be set automagically.",[175,12965,12966,12967,12974,12975,12977],{},"You can also use the ",[16,12968,12971],{"href":12969,"rel":12970},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fgetting-started\u002Fseo-meta#title-template",[88],[284,12972,12973],{},"titleTemplate"," member of the ",[284,12976,4357],{}," composable. This title will also be used in the tab title.",[175,12979,12980,12960,12984,12987],{},[16,12981,12983],{"href":12957,"rel":12982},[88],"special front-matter variable 'description'",[284,12985,12986],{},"\u003Cmeta>"," SEO element will be set automagically.",[312,12989,12991],{"id":12990},"front-matter-injection","Front-matter Injection",[12,12993,12994,12995,12998,12999,13002,13003,13006,13007,13010],{},"Front-matter variables declared at the top can be symbolically inserted into the Markdown content by using ",[284,12996,12997],{},"{{ \u003Cvariable key> }}",".  For example, if you have a front-matter variable defined as ",[284,13000,13001],{},"name: \"Mohonri Moriancumur\""," you could inject it in the body with ",[284,13004,13005],{},"{{ name }}",".  This would insert the full name ",[284,13008,13009],{},"Mohonri Moriancumur"," everywhere you did this.",[272,13012,13014],{"id":13013},"html-output-example","HTML Output Example",[320,13016,13018],{"className":657,"code":13017,"language":659,"meta":25,"style":25},"\u003Clink rel=\"icon\" type=\"image\u002Fx-icon\" href=\"\u002Ffavicon.ico\">\n\u003Clink rel=\"apple-touch-icon\" sizes=\"180x180\" type=\"image\u002Fpng\" href=\"\u002Fapple-touch-icon.png\">\n\u003Clink rel=\"icon\" sizes=\"32x32\" type=\"image\u002Fpng\" href=\"\u002Ffavicon-32x32.png\">\n\u003Clink rel=\"icon\" sizes=\"16x16\" type=\"image\u002Fpng\" href=\"\u002Ffavicon-16x16.png\">\n\u003Clink rel=\"manifest\" href=\"\u002Fsite.webmanifest\">\n\u003Cmeta name=\"robots\" content=\"index, follow\">\n\u003Cmeta name=\"copyright\" content=\"© 2024 by John Pennock\">\n\u003Clink rel=\"canonical\" href=\"https:\u002F\u002Fpennockprojects.com\u002F\">\n\u003Cmeta name=\"author\" content=\"John Pennock\">\n\u003Ctitle>Pennock Projects\u003C\u002Ftitle>\n\u003Cmeta name=\"description\" content=\"John Pennock's software development blog and portfolio\">\n\u003Cmeta property=\"og:title\" content=\"Pennock Projects\">\n\u003Cmeta property=\"og:description\" content=\"John Pennock's software development blog and portfolio\">\n\u003Cmeta property=\"og:image\" content=\"\u002Fimages\u002FPennockProjectsFB.jpg\">\n\u003Cmeta property=\"og:image:alt\" content=\"Pennock Projects Logo\">\n\u003Cmeta property=\"og:site_name\" content=\"Pennock Projects\">\n\u003Cmeta property=\"og:url\" content=\"https:\u002F\u002Fpennockprojects.com\u002F\">\n\u003Cmeta property=\"og:type\" content=\"article\">\n\u003Cmeta name=\"twitter:title\" content=\"Pennock Projects\">\n\u003Cmeta name=\"twitter:description\" content=\"John Pennock's software development blog and portfolio\">\n\u003Cmeta name=\"twitter:image\" content=\"https:\u002F\u002Fpennockprojects.com\u002Fimages\u002FPennockProjectsFB.jpg\">\n\u003Cmeta name=\"twitter:image:alt\" content=\"Pennock Projects Logo\">\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\">\n\u003Cmeta name=\"twitter:site\" content=\"@PennockProjects\">\n\u003Cmeta name=\"twitter:creator\" content=\"@JohnPennock\">\u003C\u002Fhead>\n",[284,13019,13020,13047,13079,13113,13147,13167,13192,13214,13236,13258,13271,13293,13316,13337,13359,13381,13402,13423,13445,13466,13487,13509,13530,13552,13574],{"__ignoreMap":25},[328,13021,13022,13024,13026,13028,13030,13032,13034,13036,13039,13041,13043,13045],{"class":330,"line":155},[328,13023,334],{"class":333},[328,13025,302],{"class":337},[328,13027,3854],{"class":340},[328,13029,432],{"class":373},[328,13031,4221],{"class":435},[328,13033,4224],{"class":340},[328,13035,432],{"class":373},[328,13037,13038],{"class":435},"\"image\u002Fx-icon\"",[328,13040,3862],{"class":340},[328,13042,432],{"class":373},[328,13044,4294],{"class":435},[328,13046,344],{"class":333},[328,13048,13049,13051,13053,13055,13057,13059,13061,13063,13065,13067,13069,13071,13073,13075,13077],{"class":330,"line":26},[328,13050,334],{"class":333},[328,13052,302],{"class":337},[328,13054,3854],{"class":340},[328,13056,432],{"class":373},[328,13058,4309],{"class":435},[328,13060,4239],{"class":340},[328,13062,432],{"class":373},[328,13064,4316],{"class":435},[328,13066,4224],{"class":340},[328,13068,432],{"class":373},[328,13070,4229],{"class":435},[328,13072,3862],{"class":340},[328,13074,432],{"class":373},[328,13076,4323],{"class":435},[328,13078,344],{"class":333},[328,13080,13081,13083,13085,13087,13089,13091,13093,13095,13098,13100,13102,13104,13106,13108,13111],{"class":330,"line":239},[328,13082,334],{"class":333},[328,13084,302],{"class":337},[328,13086,3854],{"class":340},[328,13088,432],{"class":373},[328,13090,4221],{"class":435},[328,13092,4239],{"class":340},[328,13094,432],{"class":373},[328,13096,13097],{"class":435},"\"32x32\"",[328,13099,4224],{"class":340},[328,13101,432],{"class":373},[328,13103,4229],{"class":435},[328,13105,3862],{"class":340},[328,13107,432],{"class":373},[328,13109,13110],{"class":435},"\"\u002Ffavicon-32x32.png\"",[328,13112,344],{"class":333},[328,13114,13115,13117,13119,13121,13123,13125,13127,13129,13132,13134,13136,13138,13140,13142,13145],{"class":330,"line":381},[328,13116,334],{"class":333},[328,13118,302],{"class":337},[328,13120,3854],{"class":340},[328,13122,432],{"class":373},[328,13124,4221],{"class":435},[328,13126,4239],{"class":340},[328,13128,432],{"class":373},[328,13130,13131],{"class":435},"\"16x16\"",[328,13133,4224],{"class":340},[328,13135,432],{"class":373},[328,13137,4229],{"class":435},[328,13139,3862],{"class":340},[328,13141,432],{"class":373},[328,13143,13144],{"class":435},"\"\u002Ffavicon-16x16.png\"",[328,13146,344],{"class":333},[328,13148,13149,13151,13153,13155,13157,13159,13161,13163,13165],{"class":330,"line":387},[328,13150,334],{"class":333},[328,13152,302],{"class":337},[328,13154,3854],{"class":340},[328,13156,432],{"class":373},[328,13158,4338],{"class":435},[328,13160,3862],{"class":340},[328,13162,432],{"class":373},[328,13164,4345],{"class":435},[328,13166,344],{"class":333},[328,13168,13169,13171,13174,13177,13179,13182,13185,13187,13190],{"class":330,"line":558},[328,13170,334],{"class":333},[328,13172,13173],{"class":337},"meta",[328,13175,13176],{"class":340}," name",[328,13178,432],{"class":373},[328,13180,13181],{"class":435},"\"robots\"",[328,13183,13184],{"class":340}," content",[328,13186,432],{"class":373},[328,13188,13189],{"class":435},"\"index, follow\"",[328,13191,344],{"class":333},[328,13193,13194,13196,13198,13200,13202,13205,13207,13209,13212],{"class":330,"line":584},[328,13195,334],{"class":333},[328,13197,13173],{"class":337},[328,13199,13176],{"class":340},[328,13201,432],{"class":373},[328,13203,13204],{"class":435},"\"copyright\"",[328,13206,13184],{"class":340},[328,13208,432],{"class":373},[328,13210,13211],{"class":435},"\"© 2024 by John Pennock\"",[328,13213,344],{"class":333},[328,13215,13216,13218,13220,13222,13224,13227,13229,13231,13234],{"class":330,"line":596},[328,13217,334],{"class":333},[328,13219,302],{"class":337},[328,13221,3854],{"class":340},[328,13223,432],{"class":373},[328,13225,13226],{"class":435},"\"canonical\"",[328,13228,3862],{"class":340},[328,13230,432],{"class":373},[328,13232,13233],{"class":435},"\"https:\u002F\u002Fpennockprojects.com\u002F\"",[328,13235,344],{"class":333},[328,13237,13238,13240,13242,13244,13246,13249,13251,13253,13256],{"class":330,"line":601},[328,13239,334],{"class":333},[328,13241,13173],{"class":337},[328,13243,13176],{"class":340},[328,13245,432],{"class":373},[328,13247,13248],{"class":435},"\"author\"",[328,13250,13184],{"class":340},[328,13252,432],{"class":373},[328,13254,13255],{"class":435},"\"John Pennock\"",[328,13257,344],{"class":333},[328,13259,13260,13262,13264,13267,13269],{"class":330,"line":843},[328,13261,334],{"class":333},[328,13263,7995],{"class":337},[328,13265,13266],{"class":333},">Pennock Projects\u003C\u002F",[328,13268,7995],{"class":337},[328,13270,344],{"class":333},[328,13272,13273,13275,13277,13279,13281,13284,13286,13288,13291],{"class":330,"line":849},[328,13274,334],{"class":333},[328,13276,13173],{"class":337},[328,13278,13176],{"class":340},[328,13280,432],{"class":373},[328,13282,13283],{"class":435},"\"description\"",[328,13285,13184],{"class":340},[328,13287,432],{"class":373},[328,13289,13290],{"class":435},"\"John Pennock's software development blog and portfolio\"",[328,13292,344],{"class":333},[328,13294,13295,13297,13299,13302,13304,13307,13309,13311,13314],{"class":330,"line":859},[328,13296,334],{"class":333},[328,13298,13173],{"class":337},[328,13300,13301],{"class":340}," property",[328,13303,432],{"class":373},[328,13305,13306],{"class":435},"\"og:title\"",[328,13308,13184],{"class":340},[328,13310,432],{"class":373},[328,13312,13313],{"class":435},"\"Pennock Projects\"",[328,13315,344],{"class":333},[328,13317,13318,13320,13322,13324,13326,13329,13331,13333,13335],{"class":330,"line":869},[328,13319,334],{"class":333},[328,13321,13173],{"class":337},[328,13323,13301],{"class":340},[328,13325,432],{"class":373},[328,13327,13328],{"class":435},"\"og:description\"",[328,13330,13184],{"class":340},[328,13332,432],{"class":373},[328,13334,13290],{"class":435},[328,13336,344],{"class":333},[328,13338,13339,13341,13343,13345,13347,13350,13352,13354,13357],{"class":330,"line":878},[328,13340,334],{"class":333},[328,13342,13173],{"class":337},[328,13344,13301],{"class":340},[328,13346,432],{"class":373},[328,13348,13349],{"class":435},"\"og:image\"",[328,13351,13184],{"class":340},[328,13353,432],{"class":373},[328,13355,13356],{"class":435},"\"\u002Fimages\u002FPennockProjectsFB.jpg\"",[328,13358,344],{"class":333},[328,13360,13361,13363,13365,13367,13369,13372,13374,13376,13379],{"class":330,"line":888},[328,13362,334],{"class":333},[328,13364,13173],{"class":337},[328,13366,13301],{"class":340},[328,13368,432],{"class":373},[328,13370,13371],{"class":435},"\"og:image:alt\"",[328,13373,13184],{"class":340},[328,13375,432],{"class":373},[328,13377,13378],{"class":435},"\"Pennock Projects Logo\"",[328,13380,344],{"class":333},[328,13382,13383,13385,13387,13389,13391,13394,13396,13398,13400],{"class":330,"line":905},[328,13384,334],{"class":333},[328,13386,13173],{"class":337},[328,13388,13301],{"class":340},[328,13390,432],{"class":373},[328,13392,13393],{"class":435},"\"og:site_name\"",[328,13395,13184],{"class":340},[328,13397,432],{"class":373},[328,13399,13313],{"class":435},[328,13401,344],{"class":333},[328,13403,13404,13406,13408,13410,13412,13415,13417,13419,13421],{"class":330,"line":919},[328,13405,334],{"class":333},[328,13407,13173],{"class":337},[328,13409,13301],{"class":340},[328,13411,432],{"class":373},[328,13413,13414],{"class":435},"\"og:url\"",[328,13416,13184],{"class":340},[328,13418,432],{"class":373},[328,13420,13233],{"class":435},[328,13422,344],{"class":333},[328,13424,13425,13427,13429,13431,13433,13436,13438,13440,13443],{"class":330,"line":928},[328,13426,334],{"class":333},[328,13428,13173],{"class":337},[328,13430,13301],{"class":340},[328,13432,432],{"class":373},[328,13434,13435],{"class":435},"\"og:type\"",[328,13437,13184],{"class":340},[328,13439,432],{"class":373},[328,13441,13442],{"class":435},"\"article\"",[328,13444,344],{"class":333},[328,13446,13447,13449,13451,13453,13455,13458,13460,13462,13464],{"class":330,"line":938},[328,13448,334],{"class":333},[328,13450,13173],{"class":337},[328,13452,13176],{"class":340},[328,13454,432],{"class":373},[328,13456,13457],{"class":435},"\"twitter:title\"",[328,13459,13184],{"class":340},[328,13461,432],{"class":373},[328,13463,13313],{"class":435},[328,13465,344],{"class":333},[328,13467,13468,13470,13472,13474,13476,13479,13481,13483,13485],{"class":330,"line":947},[328,13469,334],{"class":333},[328,13471,13173],{"class":337},[328,13473,13176],{"class":340},[328,13475,432],{"class":373},[328,13477,13478],{"class":435},"\"twitter:description\"",[328,13480,13184],{"class":340},[328,13482,432],{"class":373},[328,13484,13290],{"class":435},[328,13486,344],{"class":333},[328,13488,13489,13491,13493,13495,13497,13500,13502,13504,13507],{"class":330,"line":3080},[328,13490,334],{"class":333},[328,13492,13173],{"class":337},[328,13494,13176],{"class":340},[328,13496,432],{"class":373},[328,13498,13499],{"class":435},"\"twitter:image\"",[328,13501,13184],{"class":340},[328,13503,432],{"class":373},[328,13505,13506],{"class":435},"\"https:\u002F\u002Fpennockprojects.com\u002Fimages\u002FPennockProjectsFB.jpg\"",[328,13508,344],{"class":333},[328,13510,13511,13513,13515,13517,13519,13522,13524,13526,13528],{"class":330,"line":3736},[328,13512,334],{"class":333},[328,13514,13173],{"class":337},[328,13516,13176],{"class":340},[328,13518,432],{"class":373},[328,13520,13521],{"class":435},"\"twitter:image:alt\"",[328,13523,13184],{"class":340},[328,13525,432],{"class":373},[328,13527,13378],{"class":435},[328,13529,344],{"class":333},[328,13531,13532,13534,13536,13538,13540,13543,13545,13547,13550],{"class":330,"line":3747},[328,13533,334],{"class":333},[328,13535,13173],{"class":337},[328,13537,13176],{"class":340},[328,13539,432],{"class":373},[328,13541,13542],{"class":435},"\"twitter:card\"",[328,13544,13184],{"class":340},[328,13546,432],{"class":373},[328,13548,13549],{"class":435},"\"summary_large_image\"",[328,13551,344],{"class":333},[328,13553,13554,13556,13558,13560,13562,13565,13567,13569,13572],{"class":330,"line":10394},[328,13555,334],{"class":333},[328,13557,13173],{"class":337},[328,13559,13176],{"class":340},[328,13561,432],{"class":373},[328,13563,13564],{"class":435},"\"twitter:site\"",[328,13566,13184],{"class":340},[328,13568,432],{"class":373},[328,13570,13571],{"class":435},"\"@PennockProjects\"",[328,13573,344],{"class":333},[328,13575,13576,13578,13580,13582,13584,13587,13589,13591,13594,13596,13598],{"class":330,"line":10400},[328,13577,334],{"class":333},[328,13579,13173],{"class":337},[328,13581,13176],{"class":340},[328,13583,432],{"class":373},[328,13585,13586],{"class":435},"\"twitter:creator\"",[328,13588,13184],{"class":340},[328,13590,432],{"class":373},[328,13592,13593],{"class":435},"\"@JohnPennock\"",[328,13595,9656],{"class":333},[328,13597,12673],{"class":337},[328,13599,344],{"class":333},[317,13601,13602],{},"html pre.shiki code .s-Tb5, html code.shiki .s-Tb5{--shiki-default:#D32F2F;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit;--shiki-sepia:#66D9EF;--shiki-sepia-font-style:italic}html pre.shiki code .sraLd, html code.shiki .sraLd{--shiki-default:#1976D2;--shiki-dark:#79B8FF;--shiki-sepia:#F8F8F2}html pre.shiki code .s-2sM, html code.shiki .s-2sM{--shiki-default:#D32F2F;--shiki-dark:#F97583;--shiki-sepia:#F92672}html pre.shiki code .sxUMQ, html code.shiki .sxUMQ{--shiki-default:#24292EFF;--shiki-dark:#B392F0;--shiki-sepia:#F8F8F2}html pre.shiki code .skixG, html code.shiki .skixG{--shiki-default:#D32F2F;--shiki-dark:#F97583;--shiki-sepia:#F8F8F2}html pre.shiki code .shHn5, html code.shiki .shHn5{--shiki-default:#22863A;--shiki-dark:#FFAB70;--shiki-sepia:#E6DB74}html pre.shiki code .sizxJ, html code.shiki .sizxJ{--shiki-default:#212121;--shiki-dark:#BBBBBB;--shiki-sepia:#F8F8F2}html pre.shiki code .s0Ixy, html code.shiki .s0Ixy{--shiki-default:#1976D2;--shiki-dark:#F8F8F8;--shiki-sepia:#AE81FF}html pre.shiki code .sNgeA, html code.shiki .sNgeA{--shiki-default:#C2C3C5;--shiki-dark:#6B737C;--shiki-sepia:#88846F}html pre.shiki code .srTi1, html code.shiki .srTi1{--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-sepia:#A6E22E}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);}html .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html pre.shiki code .sA0kQ, html code.shiki .sA0kQ{--shiki-default:#24292EFF;--shiki-default-font-style:inherit;--shiki-dark:#B392F0;--shiki-dark-font-style:inherit;--shiki-sepia:#FD971F;--shiki-sepia-font-style:italic}html pre.shiki code .s_OQ2, html code.shiki .s_OQ2{--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-sepia:#F8F8F2}html pre.shiki code .szMGX, html code.shiki .szMGX{--shiki-default:#22863A;--shiki-dark:#FFAB70;--shiki-sepia:#F92672}html pre.shiki code .sPL9d, html code.shiki .sPL9d{--shiki-default:#D32F2F;--shiki-dark:#F8F8F8;--shiki-sepia:#F92672}html pre.shiki code .snb_r, html code.shiki .snb_r{--shiki-default:#1976D2;--shiki-dark:#79B8FF;--shiki-sepia:#AE81FF}html pre.shiki code .sPj-R, html code.shiki .sPj-R{--shiki-default:#24292EFF;--shiki-dark:#B392F0;--shiki-sepia:#AE81FF}html pre.shiki code .sCqw6, html code.shiki .sCqw6{--shiki-default:#2B5581;--shiki-dark:#9DB1C5;--shiki-sepia:#E6DB74}",{"title":25,"searchDepth":26,"depth":26,"links":13604},[13605,13606,13610,13616,13627],{"id":9999,"depth":26,"text":1279},{"id":10119,"depth":26,"text":10120,"children":13607},[13608,13609],{"id":10123,"depth":239,"text":3455},{"id":10415,"depth":239,"text":10416},{"id":10619,"depth":26,"text":13611,"children":13612},"Page .vue System",[13613,13614,13615],{"id":10626,"depth":239,"text":10627},{"id":10766,"depth":239,"text":10767},{"id":7448,"depth":239,"text":7449},{"id":11909,"depth":26,"text":13617,"children":13618},"Page .md Usage",[13619,13620,13621,13622,13623,13624,13625,13626],{"id":11915,"depth":239,"text":11916},{"id":12009,"depth":239,"text":12010},{"id":12081,"depth":239,"text":12082},{"id":12167,"depth":239,"text":12168},{"id":12357,"depth":239,"text":12358},{"id":12386,"depth":239,"text":12387},{"id":12644,"depth":239,"text":12645},{"id":12929,"depth":239,"text":12930},{"id":13013,"depth":26,"text":13014},"2024-10-29","How to implement a method for specifying NuxtContent front-matter variables in each Markdown document and generating static-site custom and specific SEO, Open Graph, and X\u002FTwitter social metadata.","\u002Fimages\u002Fprojects\u002FMetadataCircuit.jpg","A circuit that contains a large chip labeled 'metadata'",[1189,38,37,13633,40,13634,13635,13636,13637],"Metadata","Front_Matter","SEO","SocialShare","OpenGraph",{"twitterTitle":13639,"twitterDescription":13640},"SEO Metadata X\u002FTwitter System","How to implement a method for specifying NuxtContent front-matter variables in each Markdown document and generating static-site custom and specific SEO and X\u002FTwitter (and Open Graph) social metadata.","How to implement a method for specifying NuxtContent front-matter variables in each Markdown document and generating static-site custom and specific SEO and Open Graph (and X\u002FTwitter) social metadata.","\u002Fimages\u002Fprojects\u002FMetadataOG.jpg","A blue billboard with 'Social Metadata for FaceBook'","SEO Metadata Open Graph System","\u002Fprojects\u002Fjamstart\u002Fseometadata",{"title":9994,"description":13629},{"loc":13645},"projects\u002Fjamstart\u002F8.SEOMetadata","SEO Social","\u002Fimages\u002Fprojects\u002FMetadataX.jpg","A black billboard with `Social Metadata for X  LargeCard`","NUTKph_tQG4dH_Tj4_f7CafuottrIc9CKuCKjSxK9Kc",{"id":13654,"title":13655,"author":7,"body":13656,"content_type":1111,"date_created":15075,"date_modified":15076,"description":15077,"editor":30,"extension":32,"guide":1114,"image":15078,"image_alt":15079,"is_list_exclude":35,"is_manual_image":35,"is_manual_title":35,"is_toc":51,"keywords":15080,"meta":15085,"navigation":51,"og_description":30,"og_image":30,"og_image_alt":30,"og_title":30,"path":15086,"peer_order":601,"project":62,"projects":30,"published":54,"seo":15087,"sitemap":15088,"stem":15089,"tagline":15090,"version":30,"x_card":30,"x_creator_handle":30,"x_description":30,"x_image":30,"x_image_alt":30,"x_title":30,"__hash__":15091},"content\u002Fprojects\u002Fjamstart\u002F9.CookieFreeAnalytics.md","Cookie-Free Analytics",{"type":9,"value":13657,"toc":15060},[13658,13662,13673,13677,13685,13688,13697,13700,13719,13764,13773,13780,13786,13801,13806,13815,13829,13842,13907,13911,13914,13918,13924,14047,14052,14067,14089,14093,14096,14100,14104,14108,14111,14122,14133,14137,14157,14160,14171,14176,14181,14185,14188,14204,14208,14225,15045,15049,15052,15054,15057],[272,13659,13661],{"id":13660},"update-mar-18th-2026","Update Mar 18th, 2026",[12,13663,10030,13664,13668,13669,13672],{},[16,13665,13667],{"href":13666},"\u002Fblog\u002F2026\u002Fnuxtupgradev4","upgrading JAMStart to Nuxt v4",", the previous dedicated Nuxt CloudFlare Analytics module was no longer compatible. However, the new ",[284,13670,13671],{},"Nuxt Scripts"," module provided a great way to add the CloudFlare Analytics script (and many other third party scripts) I have updated the instructions to reflect using Nuxt Scripts for adding CloudFlare Analytics to JAMStart v0.0.4 and later.  I've left the previous instructions for using the dedicated Nuxt CloudFlare Analytics module in place for users with JAMSTart v0.0.3 and earlier, but I recommend using the Nuxt Scripts method for new implementations as it is more flexible and future proof.",[272,13674,13676],{"id":13675},"goal","Goal",[12,13678,13679,13680,997],{},"The JAMStart goal is to have an inexpensive telemetry solution to send site usage information, page views, and call to action clicks without using Personally Identifiable Information (PII). I want the data to help me understand what my readers\u002Fusers were engaging with on my site and help me develop more useful content and software for them. I also didn't want to bother them with a cookie banner, complex privacy statement, or sharing my site user usage to a third party.  In the end I decided to use the admirable ",[16,13681,13684],{"href":13682,"rel":13683,"target":191},"https:\u002F\u002Fdevelopers.cloudflare.com\u002Fweb-analytics\u002F",[88],"CloudFlare Web Analytics",[272,13686,13655],{"id":13687},"cookie-free-analytics",[12,13689,13690,13691,13696],{},"The video ",[16,13692,13695],{"href":13693,"rel":13694,"target":191},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=b7bT1QXhWFg&ab_channel=NetSec",[88],"Checking Out Free Web Analytics Service from CloudFlare Video by NetSec",", while a bit old (3 years when I viewed it), helps understand the tradeoffs with CloudFlare.",[272,13698,147],{"id":13699},"cloudflare-analytics",[970,13701,13702,13710,13716],{},[175,13703,13704,13705],{},"First Create an account at ",[16,13706,13709],{"href":13707,"rel":13708,"target":191},"https:\u002F\u002Fcloudflare.com",[88],"CloudFlare",[175,13711,13712,13713],{},"Add your site at ",[16,13714,13684],{"href":13682,"rel":13715,"target":191},[88],[175,13717,13718],{},"Get the HTML snippet for your site from the CloudFlare Web Analytics dashboard. It will look something like this:",[320,13720,13722],{"className":657,"code":13721,"language":659,"meta":25,"style":25},"\u003C!-- Cloudflare Web Analytics -->\n \u003Cscript defer src='https:\u002F\u002Fstatic.cloudflareinsights.com\u002Fbeacon.min.js' data-cf-beacon='{\"token\": \"XXXXXXXXXXXXXXXXXXXXXXXXXXXXX\"}'>\u003C\u002Fscript>\u003C!-- End Cloudflare Web Analytics -->\n",[284,13723,13724,13729],{"__ignoreMap":25},[328,13725,13726],{"class":330,"line":155},[328,13727,13728],{"class":3950},"\u003C!-- Cloudflare Web Analytics -->\n",[328,13730,13731,13734,13737,13740,13742,13744,13747,13750,13752,13755,13757,13759,13761],{"class":330,"line":26},[328,13732,13733],{"class":333}," \u003C",[328,13735,13736],{"class":337},"script",[328,13738,13739],{"class":340}," defer",[328,13741,439],{"class":340},[328,13743,432],{"class":373},[328,13745,13746],{"class":435},"'https:\u002F\u002Fstatic.cloudflareinsights.com\u002Fbeacon.min.js'",[328,13748,13749],{"class":340}," data-cf-beacon",[328,13751,432],{"class":373},[328,13753,13754],{"class":435},"'{\"token\": \"XXXXXXXXXXXXXXXXXXXXXXXXXXXXX\"}'",[328,13756,9656],{"class":333},[328,13758,13736],{"class":337},[328,13760,2704],{"class":333},[328,13762,13763],{"class":3950},"\u003C!-- End Cloudflare Web Analytics -->\n",[970,13765,13766],{"start":381},[175,13767,13768,13769,13772],{},"Obtain the token from the script signified by the ",[284,13770,13771],{},"XXXXXXXXXXXXXX"," in the html snippet.",[167,13774,13776,13777,13779],{"id":13775},"configuring-for-nuxt-scripts-module","Configuring for ",[284,13778,13671],{}," Module",[12,13781,13782,13783,13785],{},"JAMStart v0.0.4 and later has already included the ",[284,13784,13671],{}," module, but you can add it with the following command if you don't have it installed:",[320,13787,13789],{"className":6539,"code":13788,"language":6541,"meta":25,"style":25},"npm i @nuxtjs\u002Fscripts\n",[284,13790,13791],{"__ignoreMap":25},[328,13792,13793,13795,13798],{"class":330,"line":155},[328,13794,43],{"class":340},[328,13796,13797],{"class":2689}," i",[328,13799,13800],{"class":2689}," @nuxtjs\u002Fscripts\n",[167,13802,13776,13804],{"id":13803},"configuring-for-nuxt-cloudflare-analytics",[284,13805,5119],{},[12,13807,13808,13809,13814],{},"JAMStart v0.0.3 and earlier already has installed the ",[16,13810,13813],{"href":13811,"rel":13812},"https:\u002F\u002Fnuxt.com\u002Fmodules\u002Fcloudflare-analytics",[88],"CloudFlare Analytics Nuxt Module"," with a general command",[320,13816,13818],{"className":6539,"code":13817,"language":6541,"meta":25,"style":25},"npm i nuxt-cloudflare-analytics\n",[284,13819,13820],{"__ignoreMap":25},[328,13821,13822,13824,13826],{"class":330,"line":155},[328,13823,43],{"class":340},[328,13825,13797],{"class":2689},[328,13827,13828],{"class":2689}," nuxt-cloudflare-analytics\n",[12,13830,13831,13832,13835,13836,13839,13840,3160],{},"Replace the ",[284,13833,13834],{},"XXXXXXXXXXXXXXXXXXXXXXXXXXXXX"," value next to the ",[284,13837,13838],{},"token"," key with your CloudFlare account token in your ",[284,13841,3340],{},[320,13843,13845],{"className":3358,"code":13844,"language":3360,"meta":25,"style":25},"export default defineNuxtConfig({\n  modules: [\n    'nuxt-cloudflare-analytics'\n  ],\n\n  cloudflareAnalytics: {\n    token: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX'\n  }\n})\n",[284,13846,13847,13857,13865,13870,13876,13880,13889,13899,13903],{"__ignoreMap":25},[328,13848,13849,13851,13853,13855],{"class":330,"line":155},[328,13850,5433],{"class":2703},[328,13852,5436],{"class":2703},[328,13854,5439],{"class":340},[328,13856,1031],{"class":333},[328,13858,13859,13861,13863],{"class":330,"line":26},[328,13860,6792],{"class":333},[328,13862,374],{"class":373},[328,13864,3945],{"class":333},[328,13866,13867],{"class":330,"line":239},[328,13868,13869],{"class":435},"    'nuxt-cloudflare-analytics'\n",[328,13871,13872,13874],{"class":330,"line":381},[328,13873,6944],{"class":333},[328,13875,3386],{"class":3370},[328,13877,13878],{"class":330,"line":387},[328,13879,2233],{"emptyLinePlaceholder":51},[328,13881,13882,13885,13887],{"class":330,"line":558},[328,13883,13884],{"class":333},"  cloudflareAnalytics",[328,13886,374],{"class":373},[328,13888,352],{"class":333},[328,13890,13891,13894,13896],{"class":330,"line":584},[328,13892,13893],{"class":333},"    token",[328,13895,374],{"class":373},[328,13897,13898],{"class":435}," 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX'\n",[328,13900,13901],{"class":330,"line":596},[328,13902,3431],{"class":333},[328,13904,13905],{"class":330,"line":601},[328,13906,1046],{"class":333},[167,13908,13910],{"id":13909},"configuring-using-global-scripts","Configuring using global scripts",[12,13912,13913],{},"JAMStart has already included the better performant CloudFlare Nuxt module and that is the recommended path, but I wanted to note that you can use the html snippet from CloudFlare by directly in the nuxt.config.ts file.",[312,13915,13917],{"id":13916},"where-to-put-external-scripts","Where to Put External Scripts",[12,13919,13920,13921,13923],{},"Global Scripts (Site-wide): Add to ",[284,13922,3340],{}," under app.head.script. This ensures they load on every page.",[320,13925,13927],{"className":3358,"code":13926,"language":3360,"meta":25,"style":25},"\n\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  app: {\n    head: {\n      script: [{ src: 'https:\u002F\u002Fstatic.cloudflareinsights.com\u002Fbeacon.min.js', defer: true, 'data-cf-beacon': '{\"token\": \"XXXXXXXXXXXXXXXXXXXXXXXXXXXXX\"}' }]\n    }\n  }\n})\n```  If you do that you can remove the CloudFlare Nuxt module.\n\n```shell\nnpm uninstall nuxt-cloudflare-analytics\n",[284,13928,13929,13933,13938,13948,13957,13966,14002,14006,14010,14014,14019,14023,14031],{"__ignoreMap":25},[328,13930,13931],{"class":330,"line":155},[328,13932,2233],{"emptyLinePlaceholder":51},[328,13934,13935],{"class":330,"line":26},[328,13936,13937],{"class":3950},"\u002F\u002F nuxt.config.ts\n",[328,13939,13940,13942,13944,13946],{"class":330,"line":239},[328,13941,5433],{"class":2703},[328,13943,5436],{"class":2703},[328,13945,5439],{"class":340},[328,13947,1031],{"class":333},[328,13949,13950,13953,13955],{"class":330,"line":381},[328,13951,13952],{"class":333},"  app",[328,13954,374],{"class":373},[328,13956,352],{"class":333},[328,13958,13959,13962,13964],{"class":330,"line":387},[328,13960,13961],{"class":333},"    head",[328,13963,374],{"class":373},[328,13965,352],{"class":333},[328,13967,13968,13971,13973,13976,13978,13981,13983,13985,13987,13989,13991,13994,13996,13999],{"class":330,"line":558},[328,13969,13970],{"class":333},"      script",[328,13972,374],{"class":373},[328,13974,13975],{"class":333}," [{ src",[328,13977,374],{"class":373},[328,13979,13980],{"class":435}," 'https:\u002F\u002Fstatic.cloudflareinsights.com\u002Fbeacon.min.js'",[328,13982,3964],{"class":3370},[328,13984,13739],{"class":333},[328,13986,374],{"class":373},[328,13988,7081],{"class":7080},[328,13990,3964],{"class":3370},[328,13992,13993],{"class":435}," 'data-cf-beacon'",[328,13995,374],{"class":373},[328,13997,13998],{"class":435}," '{\"token\": \"XXXXXXXXXXXXXXXXXXXXXXXXXXXXX\"}'",[328,14000,14001],{"class":333}," }]\n",[328,14003,14004],{"class":330,"line":584},[328,14005,9343],{"class":333},[328,14007,14008],{"class":330,"line":596},[328,14009,3431],{"class":333},[328,14011,14012],{"class":330,"line":601},[328,14013,1046],{"class":333},[328,14015,14016],{"class":330,"line":843},[328,14017,14018],{"class":435},"```  If you do that you can remove the CloudFlare Nuxt module.\n",[328,14020,14021],{"class":330,"line":849},[328,14022,2233],{"emptyLinePlaceholder":51},[328,14024,14025,14028],{"class":330,"line":859},[328,14026,14027],{"class":435},"```",[328,14029,14030],{"class":333},"shell\n",[328,14032,14033,14036,14039,14042,14044],{"class":330,"line":869},[328,14034,14035],{"class":333},"npm uninstall nuxt",[328,14037,14038],{"class":2703},"-",[328,14040,14041],{"class":333},"cloudflare",[328,14043,14038],{"class":2703},[328,14045,14046],{"class":333},"analytics\n",[12,14048,14049,14050,3160],{},"Remove the CloudFlare module from ",[284,14051,3340],{},[970,14053,14054,14060],{},[175,14055,14056,14057,14059],{},"Remove ",[284,14058,5119],{}," from the modules list",[175,14061,14062,14063,14066],{},"Remove the ",[284,14064,14065],{},"cloudflareAnalytics"," key and value.",[320,14068,14070],{"className":2677,"code":14069,"language":2679,"meta":25,"style":25},"npm uninstall nuxt-cloudflare-analytics\nnpm uninstall @nuxtjs\u002Fscripts\n",[284,14071,14072,14081],{"__ignoreMap":25},[328,14073,14074,14076,14079],{"class":330,"line":155},[328,14075,43],{"class":340},[328,14077,14078],{"class":2689}," uninstall",[328,14080,13828],{"class":2689},[328,14082,14083,14085,14087],{"class":330,"line":26},[328,14084,43],{"class":340},[328,14086,14078],{"class":2689},[328,14088,13800],{"class":2689},[312,14090,14092],{"id":14091},"cloudflare-analytics-testing","CloudFlare Analytics testing",[12,14094,14095],{},"I was unable to get it to test from local host, so testing from a web host was the only option for testing if web analytic events were flowing.",[167,14097,14099],{"id":14098},"cloudflare-dashboard","CloudFlare Dashboard",[14101,14102],"article-link",{":article":14103},"{\"path\":\"https:\u002F\u002Fdash.cloudflare.com\u002F\",\"title\":\"View your CloudFlare Dashboard\",\"image\":\"\u002Fimages\u002Fquickrefs\u002FCloudFlareAnalyticsLogo.jpg\",\"image_alt\":\"CloudFlare Dash\",\"isTarget\":true}",[312,14105,14107],{"id":14106},"sample-data","Sample Data",[12,14109,14110],{},"With the Nuxt CloudFlare module installed and the proper token registered, you site will get both Web Vitals and Page Views automatically.",[260,14112,14113,14117],{},[70,14114],{"alt":14115,"src":14116},"Dashboard Page Views","\u002Fimages\u002Fprojects\u002FCloudFlarePageViews.jpg",[101,14118,14119],{"v-slot:caption":25},[12,14120,14121],{},"CloudFlare Analytics Dashboard - Page View Graphs",[260,14123,14124,14128],{},[70,14125],{"alt":14126,"src":14127},"Dashboard Vitals","\u002Fimages\u002Fprojects\u002FCloudFlareVitals.jpg",[101,14129,14130],{"v-slot:caption":25},[12,14131,14132],{},"CloudFlare Analytics Dashboard - Web Vitals",[272,14134,14136],{"id":14135},"why-not-google-analytics","Why Not Google Analytics?",[12,14138,14139,14140,14145,14146,181,14151,14156],{},"I initially started with Google Analytics (GA) as I had used their web analytics in the past. I was hopeful after watching the ",[16,14141,14144],{"href":14142,"rel":14143,":target":191},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=DV5mLxbrTi8",[88],"Tim Benniks removing google analytics video"," that I could skip the whole cookie thing.  Unfortunately, with the ",[16,14147,14150],{"href":14148,"rel":14149},"https:\u002F\u002Fgdpr.eu\u002Fwhat-is-gdpr\u002F",[88],"GDPR",[16,14152,14155],{"href":14153,"rel":14154},"https:\u002F\u002Fcppa.ca.gov\u002F",[88],"CPPA"," regulations and GA with its V4 reimplementation, I could not avoid cookies. Below are notes on how I implemented GA as I got fairly complete, but I'm only providing for historical information for developers who might want to implement GA in JAMStart...",[12,14158,14159],{},"My GA approach was:",[970,14161,14162,14165,14168],{},[175,14163,14164],{},"Register a Google Analytics Custom Measurement Protocol API Secret",[175,14166,14167],{},"Create a custom Nuxt Client-only Plugin for analytics (since I would use this on a static generated site)",[175,14169,14170],{},"Use the plugin to allow sending data to google analytics Custom Measurement Protocol",[172,14172,14173],{},[175,14174,14175],{},"On plugin startup (setup) generate or use local storage to generate a unique User ID but not Identifiable.",[970,14177,14178],{"start":239},[175,14179,14180],{},"Add a router.afterEach hook to send analytics for each page opened.",[312,14182,14184],{"id":14183},"google-analytics-api-secret","Google Analytics API Secret",[12,14186,14187],{},"The creation of the Google Analytics stream, Measurement ID and Protocol API Secret was pretty straightforward and free.",[172,14189,14190,14197],{},[175,14191,14192],{},[16,14193,14196],{"href":14194,"rel":14195,":target":191},"https:\u002F\u002Fsupport.google.com\u002Fanalytics\u002Fanswer\u002F9304153?hl=en",[88],"Google Analytics Account Help",[175,14198,14199],{},[16,14200,14203],{"href":14201,"rel":14202,":target":191},"https:\u002F\u002Fanalytics.google.com\u002Fanalytics",[88],"Google Analytics login",[312,14205,14207],{"id":14206},"client-only-nuxt-plugin","Client only Nuxt Plugin",[12,14209,14210,14211,14216,14217,14220,14221,14224],{},"Next I learned on how to create client-only Nuxt Plugin using the. ",[16,14212,14215],{"href":14213,"rel":14214},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fplugins",[88],"Nuxt plugin guide",". Using ",[284,14218,14219],{},".client"," suffix name fragment was what was needed to create a client only Nuxt Plugin ",[284,14222,14223],{},".\u002Fplugins\u002Fanalytics.client.js",".  Here is the analytics plugin that I created.",[320,14226,14228],{"className":1019,"code":14227,"language":1021,"meta":25,"style":25},"\u002F\u002F Create a session variable for the userId\nlet userId = 'devUser';\n\n\u002F\u002F Create a send function \nfunction send(data) {\n\n  let metric = new URLSearchParams({\n    ... {\n      v: '1',\n      tid: 'G-XXXXXXXXXX',\n      cid: userId,\n      dl: location.href,\n      ua: navigator.userAgent,\n      dr: document.referrer || '',\n      sr: `${screen.width}x${screen.height}`,\n      vp: `${document.documentElement.clientWidth}x${document.documentElement.clientHeight}`,\n      sd: `${screen.pixelDepth}-bits`,\n      ul: navigator.language,\n    },\n    ...data\n  }).toString();\n\n  \u002F\u002F This didn't work to use sendBeacon\n    \u002F\u002F navigator.sendBeacon(\n  \u002F\u002F   'https:\u002F\u002Fgoogle-analytics.com\u002Fcollect',\n  \u002F\u002F   metric\n  \u002F\u002F )\n\n  \u002F\u002F https:\u002F\u002Fdevelopers.google.com\u002Fanalytics\u002Fdevguides\u002Fcollection\u002Fprotocol\u002Fga4\u002Fsending-events?client_type=gtag\n  const measurement_id = `G-XXXXXXXXXX`;\n  const api_secret = `XXXXXXXXXXXXXXXXX`;\n\n  \u002F\u002F This didn't work either (received 204 responses)\n  \u002F\u002F You have to run the ga.js first and introduce all the PII tracking and cookies for this to work.\n  fetch(`https:\u002F\u002Fwww.google-analytics.com\u002Fmp\u002Fcollect?measurement_id=${measurement_id}&api_secret=${api_secret}`, {\n    method: \"POST\",\n    body: JSON.stringify({\n      client_id: userId,\n      events: [{\n        name: 'tutorial_begin',\n        params: metric,\n      }]\n    })\n  });\n}\n\n\u002F\u002F This is the function randomly generate a userID and store it in local session.\nfunction generateUserId() {\n\n  if(process.env.NODE_ENV === \"production\") {\n    if (!localStorage.getItem('ppAutoUserId')) {\n      \u002F\u002F Generate a random unique ID if it doesn't exist\n      const uniqueId = Date.now().toString(36) + Math.random().toString(36).substr(2);\n      localStorage.setItem('ppAutoUserId', uniqueId);\n    }\n    return localStorage.getItem('ppAutoUserId');\n  } else {\n    return 'devUser'\n  }\n}\n\n\u002F\u002F This is the magic of the plugin.  I set up the userId and an afterEach page view in the router to send a 'pageview' event.\nexport default defineNuxtPlugin(() => {\n  \n  userId = generateUserId()\n\n  const router = useRouter();\n  router.afterEach(() => {\n    send({ t: 'pageview' })\n  })\n})\n\n",[284,14229,14230,14235,14249,14253,14258,14271,14275,14292,14299,14311,14323,14335,14350,14365,14384,14418,14461,14484,14498,14504,14511,14523,14527,14532,14537,14542,14547,14552,14556,14561,14575,14589,14593,14598,14603,14636,14648,14665,14676,14686,14698,14710,14715,14720,14725,14729,14733,14738,14748,14752,14776,14802,14807,14873,14892,14896,14913,14923,14930,14934,14938,14942,14947,14964,14969,14981,14986,15001,15018,15035,15040],{"__ignoreMap":25},[328,14231,14232],{"class":330,"line":155},[328,14233,14234],{"class":3950},"\u002F\u002F Create a session variable for the userId\n",[328,14236,14237,14239,14242,14244,14247],{"class":330,"line":26},[328,14238,10746],{"class":1074},[328,14240,14241],{"class":333}," userId ",[328,14243,432],{"class":2703},[328,14245,14246],{"class":435}," 'devUser'",[328,14248,581],{"class":333},[328,14250,14251],{"class":330,"line":239},[328,14252,2233],{"emptyLinePlaceholder":51},[328,14254,14255],{"class":330,"line":381},[328,14256,14257],{"class":3950},"\u002F\u002F Create a send function \n",[328,14259,14260,14262,14265,14267,14269],{"class":330,"line":387},[328,14261,1075],{"class":1074},[328,14263,14264],{"class":340}," send",[328,14266,1089],{"class":333},[328,14268,10696],{"class":10470},[328,14270,511],{"class":333},[328,14272,14273],{"class":330,"line":558},[328,14274,2233],{"emptyLinePlaceholder":51},[328,14276,14277,14279,14282,14284,14287,14290],{"class":330,"line":584},[328,14278,10840],{"class":1074},[328,14280,14281],{"class":333}," metric ",[328,14283,432],{"class":2703},[328,14285,14286],{"class":2703}," new",[328,14288,14289],{"class":340}," URLSearchParams",[328,14291,1031],{"class":333},[328,14293,14294,14297],{"class":330,"line":596},[328,14295,14296],{"class":2703},"    ...",[328,14298,352],{"class":333},[328,14300,14301,14304,14306,14309],{"class":330,"line":601},[328,14302,14303],{"class":333},"      v",[328,14305,374],{"class":373},[328,14307,14308],{"class":435}," '1'",[328,14310,3386],{"class":3370},[328,14312,14313,14316,14318,14321],{"class":330,"line":843},[328,14314,14315],{"class":333},"      tid",[328,14317,374],{"class":373},[328,14319,14320],{"class":435}," 'G-XXXXXXXXXX'",[328,14322,3386],{"class":3370},[328,14324,14325,14328,14330,14333],{"class":330,"line":849},[328,14326,14327],{"class":333},"      cid",[328,14329,374],{"class":373},[328,14331,14332],{"class":333}," userId",[328,14334,3386],{"class":3370},[328,14336,14337,14340,14342,14345,14348],{"class":330,"line":859},[328,14338,14339],{"class":333},"      dl",[328,14341,374],{"class":373},[328,14343,14344],{"class":360}," location",[328,14346,14347],{"class":333},".href",[328,14349,3386],{"class":3370},[328,14351,14352,14355,14357,14360,14363],{"class":330,"line":869},[328,14353,14354],{"class":333},"      ua",[328,14356,374],{"class":373},[328,14358,14359],{"class":360}," navigator",[328,14361,14362],{"class":333},".userAgent",[328,14364,3386],{"class":3370},[328,14366,14367,14370,14372,14375,14378,14380,14382],{"class":330,"line":878},[328,14368,14369],{"class":333},"      dr",[328,14371,374],{"class":373},[328,14373,14374],{"class":360}," document",[328,14376,14377],{"class":333},".referrer ",[328,14379,10760],{"class":2703},[328,14381,4002],{"class":435},[328,14383,3386],{"class":3370},[328,14385,14386,14389,14391,14393,14395,14398,14401,14403,14405,14407,14409,14412,14414,14416],{"class":330,"line":888},[328,14387,14388],{"class":333},"      sr",[328,14390,374],{"class":373},[328,14392,10506],{"class":435},[328,14394,10509],{"class":2703},[328,14396,14397],{"class":360},"screen",[328,14399,14400],{"class":333},".width",[328,14402,6735],{"class":2703},[328,14404,12345],{"class":435},[328,14406,10509],{"class":2703},[328,14408,14397],{"class":360},[328,14410,14411],{"class":333},".height",[328,14413,6735],{"class":2703},[328,14415,10527],{"class":435},[328,14417,3386],{"class":3370},[328,14419,14420,14423,14425,14427,14429,14432,14434,14437,14440,14442,14444,14446,14448,14450,14452,14455,14457,14459],{"class":330,"line":905},[328,14421,14422],{"class":333},"      vp",[328,14424,374],{"class":373},[328,14426,10506],{"class":435},[328,14428,10509],{"class":2703},[328,14430,14431],{"class":360},"document",[328,14433,997],{"class":333},[328,14435,14436],{"class":360},"documentElement",[328,14438,14439],{"class":333},".clientWidth",[328,14441,6735],{"class":2703},[328,14443,12345],{"class":435},[328,14445,10509],{"class":2703},[328,14447,14431],{"class":360},[328,14449,997],{"class":333},[328,14451,14436],{"class":360},[328,14453,14454],{"class":333},".clientHeight",[328,14456,6735],{"class":2703},[328,14458,10527],{"class":435},[328,14460,3386],{"class":3370},[328,14462,14463,14466,14468,14470,14472,14474,14477,14479,14482],{"class":330,"line":919},[328,14464,14465],{"class":333},"      sd",[328,14467,374],{"class":373},[328,14469,10506],{"class":435},[328,14471,10509],{"class":2703},[328,14473,14397],{"class":360},[328,14475,14476],{"class":333},".pixelDepth",[328,14478,6735],{"class":2703},[328,14480,14481],{"class":435},"-bits`",[328,14483,3386],{"class":3370},[328,14485,14486,14489,14491,14493,14496],{"class":330,"line":928},[328,14487,14488],{"class":333},"      ul",[328,14490,374],{"class":373},[328,14492,14359],{"class":360},[328,14494,14495],{"class":333},".language",[328,14497,3386],{"class":3370},[328,14499,14500,14502],{"class":330,"line":938},[328,14501,7026],{"class":333},[328,14503,3386],{"class":3370},[328,14505,14506,14508],{"class":330,"line":947},[328,14507,14296],{"class":2703},[328,14509,14510],{"class":333},"data\n",[328,14512,14513,14516,14518,14520],{"class":330,"line":3080},[328,14514,14515],{"class":333},"  })",[328,14517,997],{"class":10735},[328,14519,11066],{"class":340},[328,14521,14522],{"class":333},"();\n",[328,14524,14525],{"class":330,"line":3736},[328,14526,2233],{"emptyLinePlaceholder":51},[328,14528,14529],{"class":330,"line":3747},[328,14530,14531],{"class":3950},"  \u002F\u002F This didn't work to use sendBeacon\n",[328,14533,14534],{"class":330,"line":10394},[328,14535,14536],{"class":3950},"    \u002F\u002F navigator.sendBeacon(\n",[328,14538,14539],{"class":330,"line":10400},[328,14540,14541],{"class":3950},"  \u002F\u002F   'https:\u002F\u002Fgoogle-analytics.com\u002Fcollect',\n",[328,14543,14544],{"class":330,"line":11383},[328,14545,14546],{"class":3950},"  \u002F\u002F   metric\n",[328,14548,14549],{"class":330,"line":11404},[328,14550,14551],{"class":3950},"  \u002F\u002F )\n",[328,14553,14554],{"class":330,"line":11409},[328,14555,2233],{"emptyLinePlaceholder":51},[328,14557,14558],{"class":330,"line":11421},[328,14559,14560],{"class":3950},"  \u002F\u002F https:\u002F\u002Fdevelopers.google.com\u002Fanalytics\u002Fdevguides\u002Fcollection\u002Fprotocol\u002Fga4\u002Fsending-events?client_type=gtag\n",[328,14562,14563,14565,14568,14570,14573],{"class":330,"line":11430},[328,14564,4798],{"class":1074},[328,14566,14567],{"class":360}," measurement_id",[328,14569,3476],{"class":2703},[328,14571,14572],{"class":435}," `G-XXXXXXXXXX`",[328,14574,581],{"class":333},[328,14576,14577,14579,14582,14584,14587],{"class":330,"line":11436},[328,14578,4798],{"class":1074},[328,14580,14581],{"class":360}," api_secret",[328,14583,3476],{"class":2703},[328,14585,14586],{"class":435}," `XXXXXXXXXXXXXXXXX`",[328,14588,581],{"class":333},[328,14590,14591],{"class":330,"line":11449},[328,14592,2233],{"emptyLinePlaceholder":51},[328,14594,14595],{"class":330,"line":11467},[328,14596,14597],{"class":3950},"  \u002F\u002F This didn't work either (received 204 responses)\n",[328,14599,14600],{"class":330,"line":11475},[328,14601,14602],{"class":3950},"  \u002F\u002F You have to run the ga.js first and introduce all the PII tracking and cookies for this to work.\n",[328,14604,14605,14608,14610,14613,14615,14618,14620,14623,14625,14628,14630,14632,14634],{"class":330,"line":11483},[328,14606,14607],{"class":340},"  fetch",[328,14609,1089],{"class":333},[328,14611,14612],{"class":435},"`https:\u002F\u002Fwww.google-analytics.com\u002Fmp\u002Fcollect?measurement_id=",[328,14614,10509],{"class":2703},[328,14616,14617],{"class":333},"measurement_id",[328,14619,6735],{"class":2703},[328,14621,14622],{"class":435},"&api_secret=",[328,14624,10509],{"class":2703},[328,14626,14627],{"class":333},"api_secret",[328,14629,6735],{"class":2703},[328,14631,10527],{"class":435},[328,14633,3964],{"class":3370},[328,14635,352],{"class":333},[328,14637,14638,14641,14643,14646],{"class":330,"line":11488},[328,14639,14640],{"class":333},"    method",[328,14642,374],{"class":373},[328,14644,14645],{"class":435}," \"POST\"",[328,14647,3386],{"class":3370},[328,14649,14650,14653,14655,14658,14660,14663],{"class":330,"line":11493},[328,14651,14652],{"class":333},"    body",[328,14654,374],{"class":373},[328,14656,14657],{"class":360}," JSON",[328,14659,997],{"class":10735},[328,14661,14662],{"class":340},"stringify",[328,14664,1031],{"class":333},[328,14666,14667,14670,14672,14674],{"class":330,"line":11505},[328,14668,14669],{"class":333},"      client_id",[328,14671,374],{"class":373},[328,14673,14332],{"class":333},[328,14675,3386],{"class":3370},[328,14677,14678,14681,14683],{"class":330,"line":11521},[328,14679,14680],{"class":333},"      events",[328,14682,374],{"class":373},[328,14684,14685],{"class":333}," [{\n",[328,14687,14688,14691,14693,14696],{"class":330,"line":11536},[328,14689,14690],{"class":333},"        name",[328,14692,374],{"class":373},[328,14694,14695],{"class":435}," 'tutorial_begin'",[328,14697,3386],{"class":3370},[328,14699,14700,14703,14705,14708],{"class":330,"line":11551},[328,14701,14702],{"class":333},"        params",[328,14704,374],{"class":373},[328,14706,14707],{"class":333}," metric",[328,14709,3386],{"class":3370},[328,14711,14712],{"class":330,"line":11566},[328,14713,14714],{"class":333},"      }]\n",[328,14716,14717],{"class":330,"line":11581},[328,14718,14719],{"class":333},"    })\n",[328,14721,14722],{"class":330,"line":11596},[328,14723,14724],{"class":333},"  });\n",[328,14726,14727],{"class":330,"line":11611},[328,14728,384],{"class":333},[328,14730,14731],{"class":330,"line":11626},[328,14732,2233],{"emptyLinePlaceholder":51},[328,14734,14735],{"class":330,"line":11641},[328,14736,14737],{"class":3950},"\u002F\u002F This is the function randomly generate a userID and store it in local session.\n",[328,14739,14740,14742,14745],{"class":330,"line":11656},[328,14741,1075],{"class":1074},[328,14743,14744],{"class":340}," generateUserId",[328,14746,14747],{"class":333},"() {\n",[328,14749,14750],{"class":330,"line":11671},[328,14751,2233],{"emptyLinePlaceholder":51},[328,14753,14754,14757,14759,14762,14764,14766,14768,14770,14772,14774],{"class":330,"line":11686},[328,14755,14756],{"class":2703},"  if",[328,14758,1089],{"class":333},[328,14760,14761],{"class":360},"process",[328,14763,997],{"class":333},[328,14765,3493],{"class":360},[328,14767,997],{"class":333},[328,14769,3498],{"class":360},[328,14771,3501],{"class":2703},[328,14773,3504],{"class":435},[328,14775,511],{"class":333},[328,14777,14778,14781,14783,14786,14789,14791,14794,14796,14799],{"class":330,"line":11701},[328,14779,14780],{"class":2703},"    if",[328,14782,9378],{"class":333},[328,14784,14785],{"class":2703},"!",[328,14787,14788],{"class":360},"localStorage",[328,14790,997],{"class":10735},[328,14792,14793],{"class":340},"getItem",[328,14795,1089],{"class":333},[328,14797,14798],{"class":435},"'ppAutoUserId'",[328,14800,14801],{"class":333},")) {\n",[328,14803,14804],{"class":330,"line":11716},[328,14805,14806],{"class":3950},"      \u002F\u002F Generate a random unique ID if it doesn't exist\n",[328,14808,14809,14812,14815,14817,14820,14822,14825,14828,14830,14832,14834,14837,14839,14841,14844,14846,14849,14851,14853,14855,14857,14859,14861,14863,14866,14868,14871],{"class":330,"line":11731},[328,14810,14811],{"class":1074},"      const",[328,14813,14814],{"class":360}," uniqueId",[328,14816,3476],{"class":2703},[328,14818,14819],{"class":360}," Date",[328,14821,997],{"class":10735},[328,14823,14824],{"class":340},"now",[328,14826,14827],{"class":333},"()",[328,14829,997],{"class":10735},[328,14831,11066],{"class":340},[328,14833,1089],{"class":333},[328,14835,14836],{"class":566},"36",[328,14838,10474],{"class":333},[328,14840,11311],{"class":2703},[328,14842,14843],{"class":360}," Math",[328,14845,997],{"class":10735},[328,14847,14848],{"class":340},"random",[328,14850,14827],{"class":333},[328,14852,997],{"class":10735},[328,14854,11066],{"class":340},[328,14856,1089],{"class":333},[328,14858,14836],{"class":566},[328,14860,1447],{"class":333},[328,14862,997],{"class":10735},[328,14864,14865],{"class":340},"substr",[328,14867,1089],{"class":333},[328,14869,14870],{"class":566},"2",[328,14872,528],{"class":333},[328,14874,14875,14878,14880,14883,14885,14887,14889],{"class":330,"line":11746},[328,14876,14877],{"class":360},"      localStorage",[328,14879,997],{"class":10735},[328,14881,14882],{"class":340},"setItem",[328,14884,1089],{"class":333},[328,14886,14798],{"class":435},[328,14888,3964],{"class":3370},[328,14890,14891],{"class":333}," uniqueId);\n",[328,14893,14894],{"class":330,"line":11761},[328,14895,9343],{"class":333},[328,14897,14898,14900,14903,14905,14907,14909,14911],{"class":330,"line":11774},[328,14899,10484],{"class":2703},[328,14901,14902],{"class":360}," localStorage",[328,14904,997],{"class":10735},[328,14906,14793],{"class":340},[328,14908,1089],{"class":333},[328,14910,14798],{"class":435},[328,14912,528],{"class":333},[328,14914,14915,14918,14921],{"class":330,"line":11779},[328,14916,14917],{"class":333},"  } ",[328,14919,14920],{"class":2703},"else",[328,14922,352],{"class":333},[328,14924,14925,14927],{"class":330,"line":11784},[328,14926,10484],{"class":2703},[328,14928,14929],{"class":435}," 'devUser'\n",[328,14931,14932],{"class":330,"line":11792},[328,14933,3431],{"class":333},[328,14935,14936],{"class":330,"line":11800},[328,14937,384],{"class":333},[328,14939,14940],{"class":330,"line":11806},[328,14941,2233],{"emptyLinePlaceholder":51},[328,14943,14944],{"class":330,"line":11811},[328,14945,14946],{"class":3950},"\u002F\u002F This is the magic of the plugin.  I set up the userId and an afterEach page view in the router to send a 'pageview' event.\n",[328,14948,14950,14952,14954,14957,14960,14962],{"class":330,"line":14949},63,[328,14951,5433],{"class":2703},[328,14953,5436],{"class":2703},[328,14955,14956],{"class":340}," defineNuxtPlugin",[328,14958,14959],{"class":333},"(() ",[328,14961,10477],{"class":1074},[328,14963,352],{"class":333},[328,14965,14967],{"class":330,"line":14966},64,[328,14968,11015],{"class":333},[328,14970,14972,14975,14977,14979],{"class":330,"line":14971},65,[328,14973,14974],{"class":333},"  userId ",[328,14976,432],{"class":2703},[328,14978,14744],{"class":340},[328,14980,10665],{"class":333},[328,14982,14984],{"class":330,"line":14983},66,[328,14985,2233],{"emptyLinePlaceholder":51},[328,14987,14989,14991,14994,14996,14999],{"class":330,"line":14988},67,[328,14990,4798],{"class":1074},[328,14992,14993],{"class":360}," router",[328,14995,3476],{"class":2703},[328,14997,14998],{"class":340}," useRouter",[328,15000,14522],{"class":333},[328,15002,15004,15007,15009,15012,15014,15016],{"class":330,"line":15003},68,[328,15005,15006],{"class":360},"  router",[328,15008,997],{"class":10735},[328,15010,15011],{"class":340},"afterEach",[328,15013,14959],{"class":333},[328,15015,10477],{"class":1074},[328,15017,352],{"class":333},[328,15019,15021,15024,15027,15029,15032],{"class":330,"line":15020},69,[328,15022,15023],{"class":340},"    send",[328,15025,15026],{"class":333},"({ t",[328,15028,374],{"class":373},[328,15030,15031],{"class":435}," 'pageview'",[328,15033,15034],{"class":333}," })\n",[328,15036,15038],{"class":330,"line":15037},70,[328,15039,4042],{"class":333},[328,15041,15043],{"class":330,"line":15042},71,[328,15044,1046],{"class":333},[312,15046,15048],{"id":15047},"google-analytics-not-used","Google Analytics - Not Used",[12,15050,15051],{},"In order for that code to work, you have to run the GA Tag Manager js script which creates the cookie which requires the cookie banner and privacy policy and turning user data over to Google.  This also can get blocked by ad blockers.  I decided against using Google Analytics until they can provide a better solution for my scenario.",[272,15053,5176],{"id":5175},[12,15055,15056],{},"When your goal is free, simplicity, and without cookies, one can use CloudFlare Web Analytics. If you have other goals (like ads, etc.) other solution stacks, like Google Analytics, need to be implemented.",[317,15058,15059],{},"html pre.shiki code .sNgeA, html code.shiki .sNgeA{--shiki-default:#C2C3C5;--shiki-dark:#6B737C;--shiki-sepia:#88846F}html pre.shiki code .sxUMQ, html code.shiki .sxUMQ{--shiki-default:#24292EFF;--shiki-dark:#B392F0;--shiki-sepia:#F8F8F2}html pre.shiki code .szMGX, html code.shiki .szMGX{--shiki-default:#22863A;--shiki-dark:#FFAB70;--shiki-sepia:#F92672}html pre.shiki code .srTi1, html code.shiki .srTi1{--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-sepia:#A6E22E}html pre.shiki code .skixG, html code.shiki .skixG{--shiki-default:#D32F2F;--shiki-dark:#F97583;--shiki-sepia:#F8F8F2}html pre.shiki code .shHn5, html code.shiki .shHn5{--shiki-default:#22863A;--shiki-dark:#FFAB70;--shiki-sepia:#E6DB74}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);}html .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html pre.shiki code .sCqw6, html code.shiki .sCqw6{--shiki-default:#2B5581;--shiki-dark:#9DB1C5;--shiki-sepia:#E6DB74}html pre.shiki code .s-2sM, html code.shiki .s-2sM{--shiki-default:#D32F2F;--shiki-dark:#F97583;--shiki-sepia:#F92672}html pre.shiki code .sizxJ, html code.shiki .sizxJ{--shiki-default:#212121;--shiki-dark:#BBBBBB;--shiki-sepia:#F8F8F2}html pre.shiki code .snb_r, html code.shiki .snb_r{--shiki-default:#1976D2;--shiki-dark:#79B8FF;--shiki-sepia:#AE81FF}html pre.shiki code .s-Tb5, html code.shiki .s-Tb5{--shiki-default:#D32F2F;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit;--shiki-sepia:#66D9EF;--shiki-sepia-font-style:italic}html pre.shiki code .sA0kQ, html code.shiki .sA0kQ{--shiki-default:#24292EFF;--shiki-default-font-style:inherit;--shiki-dark:#B392F0;--shiki-dark-font-style:inherit;--shiki-sepia:#FD971F;--shiki-sepia-font-style:italic}html pre.shiki code .sraLd, html code.shiki .sraLd{--shiki-default:#1976D2;--shiki-dark:#79B8FF;--shiki-sepia:#F8F8F2}html pre.shiki code .s_OQ2, html code.shiki .s_OQ2{--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-sepia:#F8F8F2}html pre.shiki code .s0Ixy, html code.shiki .s0Ixy{--shiki-default:#1976D2;--shiki-dark:#F8F8F8;--shiki-sepia:#AE81FF}",{"title":25,"searchDepth":26,"depth":26,"links":15061},[15062,15063,15064,15065,15073,15074],{"id":13660,"depth":26,"text":13661},{"id":13675,"depth":26,"text":13676},{"id":13687,"depth":26,"text":13655},{"id":13699,"depth":26,"text":147,"children":15066},[15067,15069,15071,15072],{"id":13775,"depth":239,"text":15068},"Configuring for Nuxt Scripts Module",{"id":13803,"depth":239,"text":15070},"Configuring for nuxt-cloudflare-analytics",{"id":13909,"depth":239,"text":13910},{"id":14098,"depth":239,"text":14099},{"id":14135,"depth":26,"text":14136},{"id":5175,"depth":26,"text":5176},"2024-12-19","2026-03-18","Adding CloudFlare web analytics to a static site that is zero cost, performant, and cookie-free.","\u002Fimages\u002Fprojects\u002Ff1cartelemetrycutaway.png","A F1 formula racecar model in cutaway",[15081,147,15082,37,15083,15084],"Web Analytics","Google Analytics","Nuxt_Scripts","Static Site",{},"\u002Fprojects\u002Fjamstart\u002Fcookiefreeanalytics",{"title":13655,"description":15077},{"loc":15086},"projects\u002Fjamstart\u002F9.CookieFreeAnalytics","Analytics","90ikMZtm5LY689YfAw_GojofkXQJucxs2K3oWocdpcA",{"id":15093,"title":15094,"author":7,"body":15095,"content_type":15106,"date_created":15107,"date_modified":30,"description":15108,"editor":30,"extension":32,"guide":1114,"image":15103,"image_alt":15102,"is_list_exclude":35,"is_manual_image":51,"is_manual_title":35,"is_toc":35,"keywords":30,"meta":15109,"navigation":51,"og_description":30,"og_image":30,"og_image_alt":30,"og_title":30,"path":15110,"peer_order":15111,"project":62,"projects":30,"published":54,"seo":15112,"sitemap":15113,"stem":15116,"tagline":15117,"version":30,"x_card":30,"x_creator_handle":30,"x_description":30,"x_image":30,"x_image_alt":30,"x_title":30,"__hash__":15118,"chapters":15119},"content\u002Fprojects\u002Fjamstart\u002FSetupGuide.md","Setup Guide",{"type":9,"value":15096,"toc":15104},[15097,15100],[15098,15099],"guide-dashboard",{"search-guide":1114,"search-path":154},[70,15101],{"alt":15102,"src":15103},"JAMStart logo with \"Setup Guide\" text","\u002Fimages\u002Fprojects\u002FJAMStartLogoStart.jpg",{"title":25,"searchDepth":26,"depth":26,"links":15105},[],"guide","2026-05-07","A step-by-step guide to starting up and owning your own static content site using JAMStart.",{},"\u002Fprojects\u002Fjamstart\u002Fsetupguide",0,{"title":15094,"description":15108},{"loc":15110,"images":15114},[15115],{"loc":15103},"projects\u002Fjamstart\u002FSetupGuide","Start Here!","3noe6nXw5kya-YRkCnX3tCt_ZkbaWUi2RhqNMRRBpBk",[1123,2479,5296,6484,7661,8611,9245,9992,13653,1281],{"data":15121,"body":15122},{},{"type":15123,"children":15124},"root",[15125],{"type":15126,"tag":12,"props":15127,"children":15128},"element",{},[15129],{"type":4674,"value":15130},"⏮️",{"data":15132,"body":15133},{},{"type":15123,"children":15134},[15135],{"type":15126,"tag":12,"props":15136,"children":15137},{},[15138],{"type":4674,"value":15139},"🔼",{"data":15141,"body":15142},{},{"type":15123,"children":15143},[15144],{"type":15126,"tag":12,"props":15145,"children":15146},{},[15147],{"type":4674,"value":15148},"⏭️",1780617138287]