{"id":13555205,"url":"https://github.com/SolidOS/solid-panes","last_synced_at":"2025-04-03T08:30:31.371Z","repository":{"id":40562278,"uuid":"58180305","full_name":"SolidOS/solid-panes","owner":"SolidOS","description":"A set of core solid-compatible apps based on solid-ui","archived":false,"fork":false,"pushed_at":"2024-04-30T16:16:59.000Z","size":11641,"stargazers_count":100,"open_issues_count":63,"forks_count":42,"subscribers_count":31,"default_branch":"main","last_synced_at":"2024-08-17T12:01:22.228Z","etag":null,"topics":["javascript","running-code","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SolidOS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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-05-06T04:09:55.000Z","updated_at":"2024-04-30T16:17:02.000Z","dependencies_parsed_at":"2024-04-28T18:26:58.595Z","dependency_job_id":"a489a970-628a-4fc0-84ef-5dcd40f0547a","html_url":"https://github.com/SolidOS/solid-panes","commit_stats":{"total_commits":933,"total_committers":35,"mean_commits":26.65714285714286,"dds":0.6677384780278671,"last_synced_commit":"282a8fe795cb0dd7503ee1e26c59708c041236d0"},"previous_names":["linkeddata/solid-app-set","solid/solid-panes"],"tags_count":121,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolidOS%2Fsolid-panes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolidOS%2Fsolid-panes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolidOS%2Fsolid-panes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolidOS%2Fsolid-panes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SolidOS","download_url":"https://codeload.github.com/SolidOS/solid-panes/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246965374,"owners_count":20861853,"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":["javascript","running-code","typescript"],"created_at":"2024-08-01T12:03:05.148Z","updated_at":"2025-04-03T08:30:30.012Z","avatar_url":"https://github.com/SolidOS.png","language":"JavaScript","readme":"# solid-panes\n\nA set of core solid-compatible applets based on solid-ui\n\nThese are a set of interlinked applications, or parts of applications,\nwhich called 'panes' -- as in parts of a window. A pane displays a data object of certain class using part of the window.\nThey don't tile like window panes necessarily, but one pane can involve other panes to display\nobjects related to the main object, in all kinds of creative ways. You can give the sub-pane a bit of\nHTML DOM element to work in, and the data object, and it does the rest.\n\nYou can explicitly invoke a specific sub-pane, or you can just provide a DOM element to contain it,\nand ask the pane system to pick the appropriate pane. It does this by calling each potential pane in order\nwith the object, and asking whether it wants to render that object. Typically the pane chosen is the most specific pane,\nso typically a hand-written user interface will be chosen over a generic machine-generated one.\n\nThese panes are used in the Data Browser - see mashlib\n[https://github.com/linkeddata/mashlib](https://github.com/linkeddata/mashlib)\n\nCurrently the panes available include:\n\n- A default pane which lists the properties of any object\n- An internals pane which allows the URI and the HTTP fetch history to be checked\n- A pane for Address Books, Groups as well as individual Contacts\n- A pane for seeing pictures in a slideshow\n- A pane for a playlist of YouTube videos\n- A pane for a range of issue trackers, to-do-lists, agendas, etc\n- A file and directory manager for a Solid/LDP hierarchical file store\n- A Sharing pane to control the Access Control Lists for any object or folder\n- and so on\n\nThe solid-app-set panes are built using a set of widgets and utilities in\n[https://github.com/linkeddata/solid-ui](https://github.com/linkeddata/solid-ui)\n\nTo help onboarding, we're using [roles](https://github.com/solidos/userguide/#role) to limit the number of panes presented\nto new users.\n\n## Goals\n\n- Make the system module in terms of NPM modules; one for each pane\n\n- Allow (signed?) panes to be advertised in turtle data in the web, and loaded automatically\n\n- Allow a Solid user to save preferences for which panes are used for which data types.\n\n- Create new panes for playlist and photo management and sharing, fitness, etc\n\nVolunteers are always welcome!\n\n## Documentation\n- [Visual Language](https://solidos.github.io/solid-panes/Documentation/VisualLanguage.html)\n- [Conventions](./Documentation/conventions.md)\n\n## Development\nTo get started, make sure you have Node.js installed (for instance\nthrough https://github.com/nvm-sh/nvm), and:\n1. run\n```sh\ngit clone https://github.com/solidos/solid-panes\ncd solid-panes\nnpm install\nnpm run start\n```\n2. a browser window should automatically open at http://localhost:9000, if for some reason it doesn't go ahead and manually navigate there.\n3. Once you arrive at the Solid Pane Tester page, the `profile-pane` will be loaded by default. Proceed to edit `solid-panes/dev/loader.ts` and, at line 5, you should see `import Pane from 'profile-pane'`. Simply change `'profile-pane'` to your preferred pane/directory containing the pane of choice; for example, you could choose `'source-pane'` and bam, it will load that pane. For those who are new, you can go to the `solid-panes/src` directory and manually navigate through each individual folder. In most folders, you simply look for any file that has `pane` in the title. Copy and paste the `pane.js` file of your choice into the `solid-panes/dev/pane` folder, or you can import directly from the `src` directory. For example, importing from `'../src/dokieli/dokieliPane'` will work just fine. Each time you save `solid-panes/dev/loader.ts` while importing a different pane, your browser at `http://localhost:9000/` should automatically refresh. It's a good idea to keep the developer console open in your web browser to ensure panes are loading and rendering properly. \n\n4. Another tip: to ensure you arrive at the proper destination, look at lines 48–53 in `solid-panes/dev/loader.ts`. You should see an event listener that is ready for a string. `renderPane('https://solidos.solidcommunity.net/Team/SolidOs%20team%20chat/index.ttl#this')` will be the default. Depending on the `pane.js` that you chose in the earlier import statements, the `renderPane` function determines the way you will see DOMContent inside of that particular pane. If you have created an `index.html` in your provider pod storage area, you could use `'https://yoursolidname.solidcommunity.net/profile/index.html'` inside of the `renderPane()` function parameters. You can edit the string manually in `solid-panes/dev/loader.ts`, or you can go to your developer console and type `renderPane('https://yoursolidname.solidcommunity.net/profile/index.html')` — just point to a part of your account that is congruent to the pane that you wish to import! :)\n\n## Contributing panes\nWhen you created a pane, you can either add it as an npm dependency\nof this repo (for instance meeting-pane, issue-pane, chat-pane are all\nimported in src/registerPanes.js), or add it under the src/ tree of this repo.\n\n\n## Eg. some RDF CLasses\n\nHere, just to show how it works, are how some RDF Classes map onto panes. Anything to do with\ncontacts (A VCARD Address Book, Group, Individual, Organization) can be handled by the one contact\npane. Any other pane which wants to deal with contacts can just use the pane within its own user interface.\n\n![Mapping many classes on the L to panes on the R](https://solidos.github.io/solid-panes/doc/images/panes-for-classes.svg)\n","funding_links":[],"categories":["JavaScript","javascript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSolidOS%2Fsolid-panes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSolidOS%2Fsolid-panes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSolidOS%2Fsolid-panes/lists"}