{"id":20565802,"url":"https://github.com/phenax/oxyrouter","last_synced_at":"2026-03-07T09:02:54.133Z","repository":{"id":83227631,"uuid":"48912491","full_name":"phenax/oxyrouter","owner":"phenax","description":"OxyRouter is a javascript plugin for making hash routing easy as pie.","archived":false,"fork":false,"pushed_at":"2018-04-28T14:25:16.000Z","size":304,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-16T19:52:20.713Z","etag":null,"topics":["client-side-routing","hash","js-library","router"],"latest_commit_sha":null,"homepage":"https://phenax.github.io/oxyrouter","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phenax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2016-01-02T14:35:00.000Z","updated_at":"2016-11-19T16:21:22.000Z","dependencies_parsed_at":"2023-06-29T00:30:15.992Z","dependency_job_id":null,"html_url":"https://github.com/phenax/oxyrouter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Foxyrouter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Foxyrouter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Foxyrouter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Foxyrouter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phenax","download_url":"https://codeload.github.com/phenax/oxyrouter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242179252,"owners_count":20084940,"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":["client-side-routing","hash","js-library","router"],"created_at":"2024-11-16T04:39:09.423Z","updated_at":"2026-03-07T09:02:49.096Z","avatar_url":"https://github.com/phenax.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"OxyRouter\n======\n\nOxyRouter is a simple plugin for making front-end routes super-easy to make and use. [DEMO](http://phenax.github.io/oxyrouter)\n\n\nSo, no more running to the backend just to make unnecessary routes that don't do much. And if you're making a static website, this will make the application much faster by cutting back the requests made to the server and only receiving the information you need.\n\t\tIt integrates with handlebars to render templates. You can render templates from script tags as well as partial template files.\n\t\t\n## Guide\n\n####Installing OxyRouter\nWe haven't uploaded it to any repositories or cdn's yet but you can still use it by adding the following script tags in your html\n```html\n\u003cscript src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js'\u003e\u003c/script\u003e\n\u003cscript src='https://rawgit.com/phenax/oxyrouter/master/js/oxygen.router.js'\u003e\u003c/script\u003e\n```\n\n####Initiating OxyRouter\n\n```javascript\nvar router= new OxyRouter({\n\totherwise: '/',\n\tpage: '.container',\n\tdefaultTitle: 'My Website'\n});\n```\n\n- `new OxyRouter` is where it all starts.\n- `otherwise: '/'`. This redirects requests from undefined routes to '/'.\n- `page: '.container'`. Here, '.container' is css selector for the div where you want the contents to be placed.\n- `defaultTitle: 'My Website'`. This sets the default title for all routes that a user navigates to.\n\n\n####Create a route\n\n```javascript\nrouter.route({\n\tname: 'about',\n\ttitle: 'About Us',\n\turl: '/about',\n\ttemplate: '#about',\n\tdata: {\n\t\tinfo: \"Hello\"\n\t}\n});\n```\n\n- ```router.route``` is used to create a route.\n- ```name: 'about'```. Used to identify your route(doesn't matter what it is).\n- ```title: 'About Us'```. It is the title of the page when a user navigates to that route.\n- ```url: '/about'```. Create a route at the url //oxyrouter/#/about. \n- ```template: '#about'```. CSS selector for the template. \n- ```data: { info: \"Hello\" }```. Rendering text. \n\n\n*Other stuff you can try*\n- ```text: \"Hello\"```. To be used instead of template for rendering text. \n- ```template_url: \"./part.html\"```. To be used instead of template for templating using an html file. \n- ```success: function() { alert(\"Done\"); }```. This will be executed everytime the template is done rendering. This is only used with template_url.\n- ```sub: function(r) { }```. This function is a sub-router. You can use it to create url for specific posts (Eg- /post/2 or /user/akshay) and 'r' is the id(the '2' in /post/2) (Example given below).\n\n\n\n####Subrouting example\n\n```javascript\nvar getPostFromServer= function(pid) {\n\tvar xhttp = new XMLHttpRequest();\n\txhttp.onreadystatechange = function() {\n\t\tif (xhttp.readyState == 4 \u0026\u0026 xhttp.status == 200) {\n\t\t\tfn(xhttp.responseText);\n\t\t} else {\n\t\t\tfn(new Error(\"Sorry, bruh... Something went wrong.\"));\n\t\t}\n\t};\n\txhttp.open(\"GET\", \"/post/\"+pid, true);\n\txhttp.send();\n};\n\n// This is the important part!\nrouter.route({\n\tname: 'post',\n\turl: '/post',\n\ttemplate: '#about',\n\tdata: {\n\t\tinfo: \"Hello\"\n\t},\n\tsub: function(pid) {\n\t\tvar post= getPostFromServer(pid,function(data) {\n\t\t\trouter.render_text('#post-template',{ post: data });\n\t\t});\n\t}\n});\n```\n\n- ```getPostFromServer(pid)``` is your function that interacts with the - server and returns the data required.\n- ```router.render_text(.....)``` allows you to render stuff to container yourself. NOTE: The template will still be rendered in the '.container' that was declared in the initiation.\n\n\n\n\n####Psuedo GET Requests\n\n```javascript\nrouter.route({\n  name: 'post',\n  url: '/post',\n  template: '#about',\n  data: { },\n  get: function(data) {\n    if(data.pid \u0026\u0026 data.page) {\n      var post= getPostFromServer(data.pid,data.page);\n      router.render_text('#post-template',{ post: post });\n    } else {\n      // For no request\n  }\n}\n});\n```\n\n```get: function(data) { ...```. This function can be used to perform actions on the requests made and give the user an output.\n```getPostFromServer(pid)``` is your function that interacts with the server and returns the data required.\n```router.render_text(.....)``` allows you to render stuff to container yourself. NOTE: The template will still be rendered in the '.container' that was declared in the initiation.\n\n\n\n####My work here is done\n\nThats it. You're good to go.\n\n## Contact Me\n\nFollow me on [Codepen](http://codepen.io/phenax),[Github](https://github.com/phenax),[Twitter](https://twitter.com/phenax5)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphenax%2Foxyrouter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphenax%2Foxyrouter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphenax%2Foxyrouter/lists"}