{"id":15664852,"url":"https://github.com/snugug/stage-fright","last_synced_at":"2025-05-06T19:29:46.175Z","repository":{"id":57369283,"uuid":"74357414","full_name":"Snugug/stage-fright","owner":"Snugug","description":"Yet another web-based presentation library","archived":false,"fork":false,"pushed_at":"2019-07-05T02:19:04.000Z","size":930,"stargazers_count":17,"open_issues_count":3,"forks_count":2,"subscribers_count":2,"default_branch":"3.x","last_synced_at":"2025-04-19T19:30:23.573Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://snugug.github.io/stage-fright","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/Snugug.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":"2016-11-21T11:35:28.000Z","updated_at":"2024-12-29T08:20:18.000Z","dependencies_parsed_at":"2022-09-09T13:10:36.056Z","dependency_job_id":null,"html_url":"https://github.com/Snugug/stage-fright","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snugug%2Fstage-fright","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snugug%2Fstage-fright/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snugug%2Fstage-fright/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snugug%2Fstage-fright/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Snugug","download_url":"https://codeload.github.com/Snugug/stage-fright/tar.gz/refs/heads/3.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252752900,"owners_count":21798872,"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-10-03T13:44:21.626Z","updated_at":"2025-05-06T19:29:46.155Z","avatar_url":"https://github.com/Snugug.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# stage-fright\nYet another web-based presentation library\n\n\n## Markup\n\nMarkup is fairly straight-forward with an eye towards semantics. First, you set up the `stage`, which is going to be where all slides are in.\n\n```html\n\u003cmain class=\"_stage\"\u003e\n  …\n\u003c/main\u003e\n```\n\nThen, each grouping of slides (even if there is a single slide) is inside a `stage group`\n\n```html\n\u003carticle class=\"_stage--group\"\u003e\n  …\n\u003c/article\u003e\n```\n\nFinally, each `slide` is a `section` inside the `stage group`. Slides are made up of the actual slide, and an inner `content` area\n\n```html\n\u003csection class=\"_stage--slide\"\u003e\n  \u003cdiv class=\"_stage--content\"\u003e\n    …\n  \u003c/div\u003e\n\u003c/section\u003e\n```\n\nInside of slides, you can have a `fragment` which is a piece of content to be progressively revealed. When a fragment has been activated, it will get a `data-active` attribute on it. By default, fragments fade in, but CSS can be used to change it to whatever is desired\n\n```html\n\u003ch3\u003eThis is a big bit of the slide\u003c/h3\u003e\n\u003cul\u003e\n  \u003cli class=\"fragment\"\u003eThis is a revealed talking point\u003c/li\u003e\n  \u003cli class=\"fragment\"\u003eAnd this is another one\u003c/li\u003e\n  \u003cli class=\"fragment\"\u003eAnd this is a third\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n### Full Sample Markup\n\nA basic example of this all in place looks something like this:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003ctitle\u003eSample Stage Fright Presentation\u003c/title\u003e\n  \u003c!-- Bring in the CSS from wherever it's been rendered --\u003e\n  \u003clink rel=\"stylesheet\" href=\"/css/stage-fright.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003c!-- Only the main section is needed for our slide deck --\u003e\n  \u003cmain class=\"_stage\"\u003e\n    \u003c!-- First slide group, an introduction slide maybe --\u003e\n    \u003carticle class=\"_stage--group\"\u003e\n      \u003csection class=\"_stage--slide\"\u003e\n        \u003cdiv class=\"_stage--content\"\u003e\n          \u003ch1\u003eHello World!\u003c/h1\u003e\n        \u003c/div\u003e\n      \u003c/section\u003e\n    \u003c/article\u003e\n\n    \u003c!-- A second slide group --\u003e\n    \u003carticle class=\"_stage--group\"\u003e\n      \u003c!-- The first slide in this group --\u003e\n      \u003csection class=\"_stage--slide\"\u003e\n        \u003cdiv class=\"_stage--content\"\u003e\n          \u003ch2\u003eThis is a Second Section\u003c/h2\u003e\n        \u003c/div\u003e\n      \u003c/section\u003e\n\n      \u003c!-- The second slide in this group --\u003e\n      \u003csection class=\"_stage--slide\"\u003e\n        \u003cdiv class=\"_stage--content\"\u003e\n          \u003cp\u003eIt has good content\u003c/p\u003e\n          \u003c!-- Fragments to be revealed as we go --\u003e\n          \u003cul\u003e\n            \u003cli class=\"fragment\"\u003eAnd some content\u003c/li\u003e\n            \u003cli class=\"fragment\"\u003eThat gets revealed\u003c/li\u003e\n            \u003cli class=\"fragment\"\u003eAs I talk\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/div\u003e\n      \u003c/section\u003e\n    \u003c/article\u003e\n  \u003c/main\u003e\n\n  \u003c!-- Bring in the Stage Fright JS, defered for better performance --\u003e\n  \u003cscript src=\"/js/stage-fright.min.js\" defer\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n---\nAttribution:\n\n* Icons from \u003ca xmlns:cc=\"http://creativecommons.org/ns#\" href=\"http://www.ibm.com/us/en/\" property=\"cc:attributionName\" rel=\"cc:attributionURL\"\u003eInternational Business Machines Corporation\u003c/a\u003e under a \u003ca rel=\"license\" href=\"http://creativecommons.org/licenses/by/4.0/\"\u003eCreative Commons Attribution 4.0 International License\u003c/a\u003e.\u003cbr /\u003eBased on a work at \u003ca xmlns:dct=\"http://purl.org/dc/terms/\" href=\"https://github.com/IBM-Design/icons\" rel=\"dct:source\"\u003ehttps://github.com/IBM-Design/icons\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnugug%2Fstage-fright","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsnugug%2Fstage-fright","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnugug%2Fstage-fright/lists"}