{"id":13476143,"url":"https://github.com/shafayetShafee/reveal-header","last_synced_at":"2025-03-27T02:31:37.993Z","repository":{"id":65911209,"uuid":"592330343","full_name":"shafayetShafee/reveal-header","owner":"shafayetShafee","description":"A Quarto filter extension that helps to add header text and header logo in all pages of RevealJs slide ","archived":false,"fork":false,"pushed_at":"2024-05-10T10:24:16.000Z","size":9132,"stargazers_count":44,"open_issues_count":1,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-01T16:44:09.437Z","etag":null,"topics":["presentation","quarto","quarto-extension","quarto-filter","quarto-pub","quartopub","revealjs"],"latest_commit_sha":null,"homepage":"https://shafayetshafee.github.io/reveal-header/example_all.html","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/shafayetShafee.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":"2023-01-23T13:58:14.000Z","updated_at":"2024-07-26T23:29:51.000Z","dependencies_parsed_at":"2024-05-10T11:27:42.275Z","dependency_job_id":"8beb1ca2-0070-4af6-be92-d8a684a73007","html_url":"https://github.com/shafayetShafee/reveal-header","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shafayetShafee%2Freveal-header","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shafayetShafee%2Freveal-header/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shafayetShafee%2Freveal-header/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shafayetShafee%2Freveal-header/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shafayetShafee","download_url":"https://codeload.github.com/shafayetShafee/reveal-header/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245769369,"owners_count":20669168,"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":["presentation","quarto","quarto-extension","quarto-filter","quarto-pub","quartopub","revealjs"],"created_at":"2024-07-31T16:01:26.988Z","updated_at":"2025-03-27T02:31:36.852Z","avatar_url":"https://github.com/shafayetShafee.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Extensions"],"sub_categories":[],"readme":"# Reveal-header Extension For Quarto\n\nA very simple Quarto filter extension for [`revealjs`](https://quarto.org/docs/presentations/revealjs/) output format that provides\n\n- Support for adding header text like [`footer`](https://quarto.org/docs/presentations/revealjs/#footer-logo) on slides, level1 (`h1`) and level2 (`h2`) slide titles on slide header,\n\n- Another YAML option to add a logo on top-left side of each slides. So by using this filter, it is possible to use two logos for each slides (One by using the default [`logo`](https://quarto.org/docs/presentations/revealjs/#footer-logo) option which adds the logo on bottom-right corner and another one by using `header-logo` option provided by this filter.)\n\n- Provides YAML option `header-logo-link` and `footer-logo-link` to hyperlink the header logo and footer logo respectively.\n\nView the Demos of using this filter,\n\n- [`live demo 01`](https://shafayetshafee.github.io/reveal-header/example.html) \n- [`live demo 02`](https://shafayetshafee.github.io/reveal-header/example_all.html) \n\n## Installing\n\n:warning: **This extension requires Quarto version to be at least 1.2**\n\n```bash\nquarto add shafayetShafee/reveal-header\n```\n\nThis will install the extension under the `_extensions` subdirectory.\nIf you're using version control, you will want to check in this directory.\n\n## Using\n\nThis filter provides the following options,\n\n| Option | Description |\n|---|---|\n| `header` | A simple header text to appear in the top part of the each slide. `header` can be overridden by `title-as-header` or `subtitle-as-header` or slide specific header. |\n| `header-logo` | A path for logo image which will appear on the top-left corner of each slide. |\n| `header-logo-link` | A link in quotes for the header logo. |\n| `footer-logo-link` | A link in quotes for the footer logo. |\n| `sc-sb-title` | `true` or `false`. Specifies whether level1 (`h1`) and level2 (`h2`) slide titles should appear in the slide header automatically when `slide-level` is 2 or 3. |\n| `title-as-header` | `true` or `false`. Specifies whether the Slide title should appear as the slide header automatically. Will override the `header` text. |\n| `subtitle-as-header` | `true` or `false`. Specifies whether the Slide subtitle should appear in the slide header automatically. Will override the `title-as-header`. |\n| `hide-from-titleSlide` | Use `\"text\"` to remove the header text from title Slide, `\"logo\"` to remove the logo from top-left corner of header on the title Slide, `\"all\"` to remove both text and logo from the header on title Slide. |\n\nTherefore an example could be,\n\n```\n---\ntitle: \"Quarto Presentations\"\nformat:\n  revealjs:\n    slide-number: true\n    logo: images/quarto.png\n    footer: \u003chttps://quarto.org\u003e\n    header: Quarto Presentations with beautiful slide decks made by RevealJs\n    header-logo: images/reveal_logo.svg\nfilters:\n  - reveal-header\n---\n\n\n## Slides\n\n```\n\nThen the text `Quarto Presentations with beautiful slide decks made by RevealJs` will appear on the top margin of each slides (unless you use slide specific custom header) and similarly, the added logo will appear on top-left corner of each slide.\n\nSo the Title slide for the above example looks like,\n\n\u003chr\u003e\n\n![Title Slide](images/revealjs_minimal_example_ss.png)\n\nYou can also include a custom header per-slide by adding a `header` div at the bottom of the the slide, as following,\n\n```\n## Slide\n\n::: header\n\nCustom Header\n\n:::\n\n```\n\n\nAnother example that uses all of the options,\n\n```\n---\nformat: \n  revealjs:\n    slide-number: true\n    logo: images/quarto.png\n    sc-sb-title: true\n    header: Quarto Presentations with beautiful slide decks made by RevealJs\n    header-logo: images/reveal_logo.svg\n    subtitle-as-header: true\n    footer: \u003chttps://quarto.org\u003e\nfilters: \n  - reveal-header\nslide-level: 3\nnumber-sections: true\n---\n```\n\nFor a complete example with the live demo of the rendered output, see below.\n\n\n## Styling\n\nNow to change the style of header components (i.e. logo, section and subsection title, header text), you can use the following css selectors,\n\n- `.reveal-header .header-logo`: to change css properties of header image.\n- `.reveal-header .header-text`: to change the styles of header text.\n- `.reveal-header .sc-title`: to change the styles of section title on left side.\n- `.reveal-header .sb-title`: to change the styles of sub-section title on right side.\n\nAlso, to change the header text style for slides with simple [`background`](https://quarto.org/docs/presentations/revealjs/#slide-backgrounds) attributes, use the css selector`.reveal-header .inverse-header`.\n\n\n## Example\n\n- The source code for a minimal example: [example.qmd](example.qmd) and the live demo of the rendered revealjs slides, [`example.html`](https://shafayetshafee.github.io/reveal-header/example.html)\n\n- The source code for another example that uses all the options: [example_all.qmd](example_all.qmd) and the live demo of the rendered revealjs slides, [`example_all.html`](https://shafayetshafee.github.io/reveal-header/example_all.html)\n\n- The source code for another example that uses only `sc-sb-title`: [example_section-title.qmd](example_section-title.qmd) and the live demo of the rendered revealjs slides, [`example_section_title.html`](https://shafayetshafee.github.io/reveal-header/example_section_title.html)\n\n- The source code for example where header text is hidden on the title slide: [example_hide_header_text.qmd](example_hide_header_text.qmd) and the [`rendered output`](https://shafayetshafee.github.io/reveal-header/example_hide_header_text.html)\n\n\n## Similar Extension\n\nIf you find this extension useful, you may also like [`metropolis-beamer`](https://github.com/shafayetShafee/metropolis-beamer/tree/main) extension that provides a custom quarto revealjs format which aims to provide a lookalike [`metropolis beamer theme`](https://www.overleaf.com/latex/templates/metropolis-beamer-theme/qzyvdhrntfmr) for quarto revealjs.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FshafayetShafee%2Freveal-header","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FshafayetShafee%2Freveal-header","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FshafayetShafee%2Freveal-header/lists"}