{"id":22160429,"url":"https://github.com/rozek/note-stickers","last_synced_at":"2025-03-24T15:22:07.006Z","repository":{"id":243978497,"uuid":"813947913","full_name":"rozek/note-stickers","owner":"rozek","description":"a (still unshared) application based on \"shareable-note-stickers\"","archived":false,"fork":false,"pushed_at":"2024-07-15T14:29:46.000Z","size":14518,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-29T20:28:37.289Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/rozek.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":"2024-06-12T03:51:44.000Z","updated_at":"2024-07-15T14:29:49.000Z","dependencies_parsed_at":"2024-06-17T14:51:55.824Z","dependency_job_id":"e4769cb1-f7e9-4209-8e9d-687ea356abd3","html_url":"https://github.com/rozek/note-stickers","commit_stats":null,"previous_names":["rozek/note-stickers"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fnote-stickers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fnote-stickers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fnote-stickers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fnote-stickers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rozek","download_url":"https://codeload.github.com/rozek/note-stickers/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245294717,"owners_count":20591909,"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":[],"created_at":"2024-12-02T04:07:48.897Z","updated_at":"2025-03-24T15:22:06.984Z","avatar_url":"https://github.com/rozek.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# note-stickers #\n\n(an unshared application based on \"[shareable-note-stickers](https://github.com/rozek/shareable-note-stickers)\")\n\n![NoteStickers Screenshot](./screenshots/NoteStickers-Screenshot.png)\n\n\"NoteStickers\" is the first step in a series of implementation and user studies towards a modern variant of Apple's famous but hopelessly underrated [HyperCard](https://en.m.wikipedia.org/wiki/HyperCard)\n\n\u003e (this is a \"work in progress\" - treat it like \"pre-alpha\" software and save often by \"export\"ing the \"whole project\" for a later re-import in case of a crash or similar problems)\n\n[live demo](https://rozek.github.io/note-stickers/dist/) (right now, for notebooks and desktops only, tablet support will come later - smartphones usually have screens which are too small for development, but you will be free to test NoteStickers on foldables as soon as mobile support has been published)\n\n## Overview ##\n\n### Projects ###\n\n\"NoteStickers\" works with \"projects\" containing one or multiple (nestable) \"boards\" with multiple \"stickers\" (which can not yet be nested). Projects, boards and stickers are special incarnations of \"visuals\" and share some of their properties.\n\nProjects are automatically saved in a browser's storage area (indexeddb) and may be managed (i.e., created, edited, renamed, deleted) there. Since projects will get lost when the browser's storage is cleared, it is recommended to \"download\" every project onto the file system from which it may then be \"uploaded\" again later.\n\n\u003e Nota bene: in the current stage of development it is recommended to \"download\" often in order to save any work done with \"NoteStickers\"\n\n### Boards ###\n\n\"Boards\" always cover the whole HTML element into which \"NoteStickers\" is rendered - this also includes the application's dialog windows. As a consequence, it is recommended to keep the containing element large enough (normally, the containing element is the document body and \"NoteStickers\" then covers the whole browser window)\n\nOnly one board may be actually shown at a given time - that board is called to be \"active\" or \"visited\".\n\n### Stickers ###\n\nBoards may contain \"stickers\", rectangular areas that may be freely sized and positioned within that board. The visual appearance of every sticker is controlled by its visual \"configuration\" and its \"rendering function\". There are many built-in \"types\" of stickers with specific rendering functions, but you are free to define your own or modify any existing ones. The  configuration of visuals is currently a bit limited: you may only specify the typography, fore- and background color and the background texture (but more properties will be added later).\n\nAll stickers of a board have a \"rendering order\", given by their index in the list of stickers belonging to a given board: stickers with lower indices are rendered earlier than stickers with higher ones. As a consequence, stickers with higher indices may cover (and, thus, perhaps hide) stickers with lower indices.\n\n### Value ###\n\nEvery visual may have a \"value\" which must be a (JSON-)serializable JavaScript value (i.e., a boolean, number, string, array or object).\n\nThe value of a sticker usually controls what the sticker renders onto the screen: the value of an \"HTML View\" contains the HTML to be shown, the value of an \"Image View\" the URL of the displayed image, that of an \"SVG View\" the shown SVG content, etc.\n\nBoards and the project itself may also have values, but these often contain (persistable) objects with values used by several other (inner boards and) stickers and have no immediate influence on the appearance of the board or project.\n\n### Scripting ###\n\nAll visuals may be scripted. A \"script\" is (the body of) a JavaScript function which runs in the context of its visual. Scripts are executed whenever the containing visuals are created or when a script is re-\"applied\" to its visual after being changed at runtime.\n\nWithin a script, you have access to the containing visual, the board it belongs to (if such a board exists) and the project itself. You may create local variables and functions, change the visual's configuration and define callbacks that will be executed whenever a visual appeared on the screen, is going to disappear or has to be rendered.\n\nThe rendering callback is usually the most important one: here you can compute the contents of a visual and then return either a text to be rendered, a single HTML element or a list of HTML elements that should be shown inside the containing sticker.\n\n\u003e Note bene: you may use the built-in ```html``` function with a template literal to define the desired HTML elements. That function uses [htm](https://github.com/developit/htm) under the hood and therefore allows you to use the \"Hyperscript Tagged Markup\" defined there\n\n#### Reactivity ####\n\n(t.b.w.) (reactively callback, visual.observed/unobserved, based on [hyperactiv](https://github.com/rozek/hyperactiv))\n\n#### Behaviors ####\n\n(t.b.w.) (built-in behaviors)\n\n### The Life of a Visual ###\n\n(t.b.w.) (continue to exist even while their board is not active)\n\n(to be continued)\n\n\n\n\u003cdetails\u003e\n \u003csummary\u003e\n  \u003ch2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"\u003eCheatsheets\u003c/h2\u003e\n\nExpand this section to see a list of \"cheatsheets\" which visually introduce NoteStickers and its UI\n \u003c/summary\u003e\n\n![NoteStickers CheatSheet I](./screenshots/NoteStickers_CheatSheet_I.png)\n\n![NoteStickers CheatSheet II](./screenshots/NoteStickers_CheatSheet_II.png)\n\n![NoteStickers CheatSheet III](./screenshots/NoteStickers_CheatSheet_III.png)\n\n![NoteStickers CheatSheet IV](./screenshots/NoteStickers_CheatSheet_IV.png)\n\n![NoteStickers CheatSheet IV](./screenshots/NoteStickers_CheatSheet_V.png)\n\n![NoteStickers CheatSheet IV](./screenshots/NoteStickers_CheatSheet_VI.png)\n\n![NoteStickers CheatSheet IV](./screenshots/NoteStickers_CheatSheet_VII.png)\n\n![NoteStickers CheatSheet IV](./screenshots/NoteStickers_CheatSheet_VIII.png)\n\n![NoteStickers CheatSheet IV](./screenshots/NoteStickers_CheatSheet_IX.png)\n\n![NoteStickers CheatSheet IV](./screenshots/NoteStickers_CheatSheet_X.png)\n\n![NoteStickers CheatSheet IV](./screenshots/NoteStickers_CheatSheet_XI.png)\n\n![NoteStickers CheatSheet IV](./screenshots/NoteStickers_CheatSheet_XII.png)\n\n![NoteStickers CheatSheet IV](./screenshots/NoteStickers_CheatSheet_XIII.png)\n\n\u003c/details\u003e\n\n\n\n## License ##\n\n[MIT License](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fnote-stickers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frozek%2Fnote-stickers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fnote-stickers/lists"}