{
"path": "/home/krm/dev/mimer-academia/server/web/Tutorial/web-map-for-static-content.sv.json",
"s": "Ignor",
"invert": true,
"level": 1,
"title": [
"Skapa webbmapp för statiskt innehåll"
],
"author": [
"krm"
],
"created": {
"year": 2022,
"month": 3,
"day": 30
},
"status": "alpha",
"description": [],
"statments": [],
"comment": [],
"cards": [
{
"level": 1,
"title": [
"# 👁️🗨️ Om detta avsnitt"
],
"description": [
"Förklarar hur vi skapar en webbmapp som vi kan använda i webbservern för att visa olika webbresurser såsom html-, css- och bild-filer."
],
"statments": [],
"comment": []
},
{
"level": 1,
"title": [
"❓ Vad är webbmapp?"
],
"description": [
"En mapp på din dator vars innehåll går att komma åt från webben."
],
"statments": [],
"comment": []
},
{
"level": 1,
"index": 1,
"title": [
"Skapa en mapp"
],
"description": [
"Skapa en mapp där du vill ha dina webb resurser i. Denna mapp kallas vanligtviss ",
[
{
"form": "important"
},
"public"
],
"."
],
"lang": "sh",
"code": "mkdir public",
"statments": [],
"comment": []
},
{
"level": 1,
"index": 2,
"title": [
"Installera statiska server"
],
"description": [
"Bland import raderna lägg till följande :"
],
"lang": "js",
"code": "import { serveStatic } from \"jsr:@hono/hono/deno\";",
"statments": [],
"comment": []
},
{
"level": 1,
"index": 3,
"title": [
"Lägg till middelware för den statisak servern."
],
"description": [
"Efter alla andra hanterare för androp och middelware, lägg till följande kod:"
],
"lang": "ts",
"code": "app.use(\n\"/*\",\nserveStatic({\nroot: \"./public/\",\nonNotFound: (path, c) => {\nconsole.error(\n`${path} is not found on filesystem, using url ${c.req.path}`,\n);\nthrow new HTTPException(404, { message: \"No path\" });\n},\n}),\n);",
"statments": [],
"comment": []
},
{
"level": 1,
"index": 4,
"title": [
"✔️ Lägg till en html fil"
],
"description": [
"I publik mappen skapa en trivial html fil med namnet \"test.html\""
],
"lang": "html",
"code": "\n\n\n\tVälkommen!\n\t\n\t\n\n\n
Hej!!!
\n \n",
"statments": [],
"comment": []
},
{
"level": 1,
"index": 5,
"title": [
"✔️ Lägg till en css fil"
],
"description": [
"Skapa en mapp med namnet \"css\" i den publika mappen. Skpa där en css fil med namnet \"styles.css\" som har innehållet:"
],
"lang": "css",
"code": "h1 {\ncolor: \"green\";\n}",
"statments": [],
"comment": []
},
{
"level": 1,
"index": 6,
"title": [
"✔️ Starta om servern"
],
"description": [
"Starta om server och gå in på sidan:"
],
"statments": [],
"comment": []
}
]
}