{"id":21031085,"url":"https://github.com/glatek/nattramn","last_synced_at":"2026-01-21T08:33:02.553Z","repository":{"id":62421579,"uuid":"268277965","full_name":"Glatek/nattramn","owner":"Glatek","description":"Universal web applications with Deno.","archived":false,"fork":false,"pushed_at":"2024-05-08T10:28:36.000Z","size":91,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-30T09:41:20.519Z","etag":null,"topics":["deno","prpl-pattern","prpl-server","web-components"],"latest_commit_sha":null,"homepage":"https://deno.land/x/nattramn","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Glatek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-31T12:43:58.000Z","updated_at":"2025-02-03T23:30:17.000Z","dependencies_parsed_at":"2024-05-08T11:44:31.809Z","dependency_job_id":null,"html_url":"https://github.com/Glatek/nattramn","commit_stats":null,"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Glatek%2Fnattramn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Glatek%2Fnattramn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Glatek%2Fnattramn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Glatek%2Fnattramn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Glatek","download_url":"https://codeload.github.com/Glatek/nattramn/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251315917,"owners_count":21569879,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["deno","prpl-pattern","prpl-server","web-components"],"created_at":"2024-11-19T12:23:57.018Z","updated_at":"2026-01-21T08:33:02.514Z","avatar_url":"https://github.com/Glatek.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nattramn\n\n![](https://svgshare.com/i/Leh.svg)\n\nA continuation of [Wext.js](https://github.com/Vufuzi/wext.js) for [Deno](https://deno.land/).\n\nAllows for a simple way of creating universal web applications - partly following the [PRPL pattern](https://web.dev/apply-instant-loading-with-prpl/). Using web components for the client side logic.\n\n## Usage\n\nImport the Nattramn class and provide a config. Run with `--allow-read` and `--allow-net` flags in your server side code.\n\nInclude `\u003cscript type=\"module\" src=\"nattramn-client.js\"\u003e\u003c/script\u003e` in your HTML template to be able to use the web component for the router and link.\n\nFor each page handler in the router config, a template is used as a stencil and will stamp the output of the handler method into  `\u003cnattramn-router\u003e\u003c/nattramn-router\u003e`.\n\nUse the `\u003cnattramn-link\u003e` web component for routes you wish to use soft navigation for. The route will be prefetched on hover similar to [instant.page](https://instant.page/).\n\n### Example\n\n```typescript\nimport Nattramn from 'https://deno.land/x/nattramn/index.ts';\n\nconst template = `\n  \u003c!DOCTYPE html\u003e\n  \u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cnattramn-router\u003e\u003c/nattramn-router\u003e\n    \u003cscript type=\"module\" src=\"/nattramn-client.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n  \u003c/html\u003e\n`;\n\nconst config = {\n  server: {\n    compression: true,\n    serveStatic: 'public',\n    minifyHTML: true\n  },\n  router: {\n    pages: [\n      {\n        route: '/',\n        template,\n        handler: async () =\u003e ({\n          body: `\n            \u003ch1\u003eNattramn\u003c/h1\u003e\n            \u003ch2\u003eHome\u003c/h2\u003e\n            \u003cp\u003e\n              Click link to go further!\n              Read \u003cnattramn-link href=\"/about\"\u003eabout me.\u003c/nattramn-link\u003e\n            \u003c/p\u003e\n            `,\n          head: '\u003ctitle\u003eHome - Nattramn\u003c/title\u003e'\n        })\n      },\n      {\n        route: '/about',\n        template,\n        handler: async () =\u003e ({\n          body: `\n            \u003ch1\u003eNattramn\u003c/h1\u003e\n            \u003ch2\u003eAbout\u003c/h2\u003e\n            \u003cp\u003eThe Nattramn only occationally shows himself[1] and is said to be ghost of a suicide[2].\u003c/p\u003e\n            \u003csmall\u003e1) This library sends partial content on some requests.\u003c/small\u003e\n            \u003csmall\u003e2) Node.js 🤡.\u003c/small\u003e\n          `,\n          head: '\u003ctitle\u003eAbout - Nattramn\u003c/title\u003e'\n        })\n      }\n    ]\n  }\n};\n\nconst nattramn = new Nattramn(config);\n\nawait nattramn.startServer(5000);\n```\n\n## What does Nattramn do\n\nExpress-like functionally with handlers for route, with the big difference that when partial content is requested only the `\u003cbody\u003e` content of the next page is fetched and replaces the inner content of `\u003cnattramn-router\u003e`. There is also support for  `\u003ctitle\u003e` in `\u003chead\u003e`, but not any other tags in head - as they usually do not matter for client side changes.\n\n## Other\n\nNattramn in currently in production at [podd.app](https://podd.app).\n\nLogo attribution: https://commons.wikimedia.org/wiki/File:Year_Walk_(Nattravnen).PNG\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglatek%2Fnattramn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglatek%2Fnattramn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglatek%2Fnattramn/lists"}