{
"path": "/home/krm/dev/mimer-academia/server/web/Tutorial/using-mimer-render.sv.json",
"s": "Ignor",
"invert": true,
"level": 1,
"title": [
"Använda \"mustasch.js\" via mimer-render"
],
"author": [
"krm"
],
"created": {
"year": 2025,
"month": 5,
"day": 7
},
"status": "alpha",
"description": [],
"statments": [],
"comment": [],
"cards": [
{
"level": 1,
"title": [
"# 👁️🗨️ Om detta avsnitt"
],
"description": [
"mimer-render är ett enkelt middelware för Hono skapat för att göra det väldigt enkelt att anävända mustasch."
],
"statments": [
{
"description": [
"🦉 ",
[
{
"link": "./create-a-project-for-webserver.sv.html"
},
"Skapa ett projekt för en webbserver"
]
]
}
],
"comment": []
},
{
"level": 1,
"title": [
"❓ Vad är \"mustasch.js\"?"
],
"description": [
"Ett bibliotek som gör att vi kan substituera in värden i mallar."
],
"statments": [],
"comment": []
},
{
"level": 1,
"index": 1,
"title": [
"Hämta koden"
],
"description": [
"Ladda ned koden som du hittar i ",
[
{
"link": "https://htsit.se/f/mimer-render.ts"
},
"https://htsit.se/f/mimer-render.ts"
],
"."
],
"lang": "sh",
"code": "curl -LOk https://htsit.se/f/mimer-render.ts",
"statments": [],
"comment": [
"Du kan också hitta senaste versionen av koden i projektet ",
[
{
"link": "git@gitlab.com:krmit/ada.git"
},
"ada"
],
"."
]
},
{
"level": 1,
"index": 2,
"title": [
"Lägg den på rätt ställe"
],
"description": [
"Och lägg det i din \"src\" map där du har all annan kod till ditt projekt."
],
"lang": "sh",
"code": "cp mimer-render.ts MITT_PROJEKT/src",
"statments": [],
"comment": []
},
{
"level": 1,
"index": 3,
"title": [
"Skapa en mapp för din mallar."
],
"description": [
"Du behöver skap en mapp för att ha din amllar. Förslagsviss på samma nivå som src."
],
"lang": "sh",
"code": "mkdir template",
"statments": [],
"comment": []
},
{
"level": 1,
"index": 4,
"title": [
"Skapa en fil som du kallar \"head.txt\""
],
"description": [
"Du behöver skap en mapp för att ha din amllar. Förslagsviss på samma nivå som src."
],
"lang": "html",
"code": "\n\n\n\n{{title}}\n\n\n\n
",
"statments": [],
"comment": [
"Innehållet i dennakommer alltid placeras över i mallarna."
]
},
{
"level": 1,
"index": 5,
"title": [
"Skapa en fil som du kallar \"foot.txt\""
],
"description": [
"Du behöver skap en mapp för att ha din amllar. Förslagsviss på samma nivå som src."
],
"lang": "html",
"code": "
\n\n",
"statments": [],
"comment": [
"Innehållet i denna fil kommer alltid placeras under i mallarna."
]
},
{
"level": 1,
"index": 6,
"title": [
"Lägg till en fil som innehåller en mall"
],
"description": [
"Lägg till en i mappen för att testa om det fungerar. Vi kallar den här \"test.html\""
],
"lang": "html",
"code": "
{{title}}
",
"statments": [],
"comment": []
},
{
"level": 1,
"index": 7,
"title": [
"Importera den i din kod"
],
"description": [
"Gå till filen där du har din Hono app."
],
"lang": "js",
"code": "import { mimerRender } from \"./mimer-render.ts\";",
"statments": [],
"comment": []
},
{
"level": 1,
"index": 8,
"title": [
"Updatera typen beskrivningen av Hono"
],
"description": [
"Hono'måste ha en intern variabel template av typen string."
],
"lang": "js",
"code": "type Variables = {\ntemplate: string;\n};\nconst app = new Hono<{ Variables: Variables }>();",
"statments": [],
"comment": []
},
{
"level": 1,
"index": 9,
"title": [
"Lägg till mimer-render som midelware"
],
"description": [
"Gör detta föra andra anrop med \"app\", men efter eventuell anrop för logging."
],
"lang": "js",
"code": "app.use(\"/*\", await mimerRender(\"template\"));",
"statments": [],
"comment": []
},
{
"level": 1,
"index": 10,
"title": [
"Gör ett anrop som ska bli renderat."
],
"description": [
"Ett vanligt HTTP get anrop."
],
"lang": "js",
"code": "app.get(\"/test\", (c) => {\n// CODE\n});",
"statments": [],
"comment": []
},
{
"level": 1,
"index": 11,
"title": [
"Välj vilken mall som ska användas"
],
"description": [
"Sätt en variabel template"
],
"lang": "js",
"code": "c.set(\"template\", \"index\");\n});",
"statments": [],
"comment": []
},
{
"level": 1,
"index": 12,
"title": [
"Avsluta anropet genom att skicka vidare json."
],
"description": [],
"lang": "js",
"code": "return c.json({ title: names.welcome });",
"statments": [],
"comment": []
},
{
"level": 1,
"index": 13,
"title": [
"✔️ Starta om servern och testa anropet"
],
"description": [
"Starta om server och gå in på sidan:"
],
"statments": [],
"comment": []
}
]
}