{"id":18817243,"url":"https://github.com/autplayed/ldf","last_synced_at":"2025-04-13T22:55:39.312Z","repository":{"id":54441332,"uuid":"137415630","full_name":"AUTplayed/ldf","owner":"AUTplayed","description":"LDF - Lightweight Dynamic Framework for making Single Page Applications","archived":false,"fork":false,"pushed_at":"2022-12-08T15:16:25.000Z","size":63,"stargazers_count":28,"open_issues_count":2,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-27T13:11:55.153Z","etag":null,"topics":["framework","frontend","javascript","simple"],"latest_commit_sha":null,"homepage":"https://ldf.js.org/demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AUTplayed.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}},"created_at":"2018-06-14T22:30:38.000Z","updated_at":"2022-11-01T05:30:37.000Z","dependencies_parsed_at":"2023-01-25T05:30:26.151Z","dependency_job_id":null,"html_url":"https://github.com/AUTplayed/ldf","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AUTplayed%2Fldf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AUTplayed%2Fldf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AUTplayed%2Fldf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AUTplayed%2Fldf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AUTplayed","download_url":"https://codeload.github.com/AUTplayed/ldf/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248794568,"owners_count":21162614,"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":["framework","frontend","javascript","simple"],"created_at":"2024-11-08T00:09:56.816Z","updated_at":"2025-04-13T22:55:39.291Z","avatar_url":"https://github.com/AUTplayed.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LDF - Little Dynamic Framework for making Single-Page Applications\n\nTired of giant frameworks like Angular? \n\nTrying to avoid complicated stuff like MVC, Typescript or JSX and just want to create a website in good old plain JS HTML CSS?\n\nWant to make a small website feel 100x better because it's a Single-Page Application?\n\nThen this is the framework for you!\n\n## Table of Contents\n\n- [Features](#features)\n- [Getting started](#getting-started)\n- [Configuration](#configuration)\n- [Component Swapping](#component-swapping)\n- [Non-Hash url](#non-hash-url)\n- [Quickstart with java server](#quickstart-with-java-server)\n- [Final Notes](#final-notes)\n\n## Features\n\nNavigating your website with `a` tags like this\n\n```html\n\u003ca href=\"login\"\u003eLogin\u003c/a\u003e\n```\n\nwill, instead of fully refreshing the page, dynamically load the requested content (in this case`login.html`), and switch out the old content with the new one.\n\nAdditionally, LDF will wait for external resources (like stylesheets or images) to load before displaying the page. Demonstration with a throttled connection and cpu:\n\n![demo](https://i.imgur.com/G9FTMYu.gif)\n\nThe script will also change the browser's navigation bar via the History-API, so that the page can be refreshed and browser-features like back and forward will work.\n\nIf you want to navigate your page via Javascript, all you have to do is call the `nav` function of the global `ldf` object like this, with the parameter being the page you want to navigate to:\n\n```javascript\nldf.nav(\"login\");\n```\n\nYou can include css and js in your html files just like normal, they will also be dynamically loaded.\n\nFor a small demonstration, check out the `demo` directory, [or check it out live.](https://ldf.js.org/demo/)\n\n**Notes:**\n\nIf you dynamically add `a` tags via Javascript (not by changing the page with `ldf` but with for example `document.createElement`), you'll have to invoke `ldf.updatePageLinks()` in order for `a` tags to not reload the page.\n\n## Getting started\n\nJust include the script in your index page like this:\n\n```\n\u003cscript src=\"ldf.js\"\u003e\u003c/script\u003e\n```\n\nYou also have to add a div element with the id \"ldf\"(configurable) in your `index.html` where you want your content to be like this:\n\n```\n\u003cdiv id=\"ldf\"\u003e\u003c/div\u003e\n```\n\nLDF expects a folder structure like this (directory name can be configured):\n\n```\nindex.html                                    required\npages/                                        required\n├── index/                                    required\n│   ├── index.html                            required\n│   ├── index.css\n│   └── index.js\n└── examplepage/\n    ├── examplepage.html\n    └── styles.css\n```\n\nEach folder in the `pages` directory represents a page (duh) and will be loaded if a user navigates to the route named after the folder. So, for example if a user clicks on an `a` tag with `href=\"examplepage\"`, LDF will attempt to load `pages/examplepage/examplepage.html`.\nThe page `index` is required, and is the default content you'll see without any navigation.\n\n## Configuration\n\nLDF currently allows for some configuration.\n\n```javascript\n// The selector for which content should be switched out on page change\nldf.mainselector = \"#ldf\";\n// The content displayed when LDF receives a 404 from the server while requesting a page\n// Set this to undefined if you want LDF to display the error page it received from your server\nldf.notfound = \"\u003cdiv\u003ePage not Found\u003c/div\u003e\";\n// The directory your pages are stored on the server, default is /pages\nldf.pagedir = \"/pages\";\n// A base url that is prepended for every navigation\n// Used in my case for github pages since that has a required base url\nldf.baseurl = \"\";\n// The css selector string LDF will wait on before displaying the page.\n// By default it waits for all stylesheets and all elements with a src attribute (like images), but not scripts.\nldf.waitselector = \"link[rel='stylesheet'],:not(script)[src]\";\n// Use hash urls, by default it's true. Hash urls look like this: domain.com/#login\n// The advantage of these is that you don't need a web server to handle refresh events, but the url doesn't look that good.\nldf.hash = true;\n```\n\n## Component swapping\n\nYou can also use the functions provided by ldf to load pages into other elements like demonstrated here: ![demo](https://i.imgur.com/xessGiQ.gif)\n\nMethods you can use:\n\n```javascript\nldf.load(selector, location, \\\u003coptional\\\u003equery);\nldf.load(\"#header\", \"/header\", \"?fancy=true\");\n```\n\n```javascript\n// external content will be waited on before the content is changed just like switching pages\nldf.change(selector, htmlContent);\nldf.change(\"#footer\", \"\u003cdiv\u003enew footer\u003c/div\u003e\u003cscript src='...'/\u003e\");\n```\n\nIf you want to have an example that shows the potential uses for this, you can find one [here](https://github.com/AUTplayed/ldfSampleLogin)\n\n## Non-hash url\n\nIf you don't want to use hash urls (more info a few lines above), then here's the instruction for you:\n\nIn order for the refresh function to work, you will have to include a special case in your web server.\n\nYou have to look at the request if it's not `/` but a request to a page, and send back your `index.html`. But you can't just always send back `index.html` when the requested file isn't found, unless you want your site to break if a user visits a missing page, since LDF relies on getting an error from a request to a missing page.\n\nA small implementation of this I used in the demo/example project (with nodejs and express) looks like this:\n\n```javascript\n// Static resources\napp.use(express.static(__dirname));\n// Special case, always sends back index.html if the request is only 1 level.\n// This works because requests to resources are 3 levels deep (pages/resource/resource.html)\napp.get(\"/:page\", (req, res) =\u003e {\n\tres.sendFile(require(\"path\").join(__dirname, \"index.html\"));\n});\n```\n\n## Quickstart with java server\n\nI wrote a java library to quickstart development with ldf and the templating engine mustache. It also solves the problems with non-hash url as mentioned above. [You can find information about the library here](https://github.com/AUTplayed/ldfSpark)\n\n## Final Notes\n\nThis project was just thrown together in a few hours based on a way messier implementation, which I used in my diploma thesis. If you find a bug or want to add an improvement, please open an issue/pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fautplayed%2Fldf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fautplayed%2Fldf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fautplayed%2Fldf/lists"}