{"id":38529611,"url":"https://github.com/mcanouil/quarto-offcanvas","last_synced_at":"2026-04-02T11:10:53.859Z","repository":{"id":327415572,"uuid":"1107165710","full_name":"mcanouil/quarto-offcanvas","owner":"mcanouil","description":"Quarto extension to create Bootstrap offcanvas components in HTML documents.","archived":false,"fork":false,"pushed_at":"2026-01-01T19:06:48.000Z","size":52,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-07T03:01:12.489Z","etag":null,"topics":["bootstrap","offcanvas","quarto","quarto-extension","stable"],"latest_commit_sha":null,"homepage":"https://m.canouil.dev/quarto-offcanvas/","language":"Lua","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/mcanouil.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":"CITATION.cff","codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"mcanouil","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":null}},"created_at":"2025-11-30T17:47:26.000Z","updated_at":"2026-01-01T19:06:51.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/mcanouil/quarto-offcanvas","commit_stats":null,"previous_names":["mcanouil/quarto-offcanvas"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/mcanouil/quarto-offcanvas","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcanouil%2Fquarto-offcanvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcanouil%2Fquarto-offcanvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcanouil%2Fquarto-offcanvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcanouil%2Fquarto-offcanvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mcanouil","download_url":"https://codeload.github.com/mcanouil/quarto-offcanvas/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcanouil%2Fquarto-offcanvas/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28502972,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T04:31:57.058Z","status":"ssl_error","status_checked_at":"2026-01-17T04:31:45.816Z","response_time":85,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["bootstrap","offcanvas","quarto","quarto-extension","stable"],"created_at":"2026-01-17T06:53:22.772Z","updated_at":"2026-04-02T11:10:53.847Z","avatar_url":"https://github.com/mcanouil.png","language":"Lua","funding_links":["https://github.com/sponsors/mcanouil"],"categories":[],"sub_categories":[],"readme":"# Offcanvas Extension For Quarto\n\nThis Quarto extension provides a simple way to create Bootstrap 5 offcanvas components in your HTML documents.\n\nOffcanvas components are sliding panels that can be triggered from buttons and appear from any edge of the viewport.\n\n## Installation\n\n```bash\nquarto add mcanouil/quarto-offcanvas@1.2.0\n```\n\nThis will install the extension under the `_extensions` subdirectory.\n\nIf you're using version control, you will want to check in this directory.\n\n## Usage\n\nTo use offcanvas in your HTML Quarto document, you need to include the `offcanvas` extension in your YAML header.\n\n```yaml\nfilters:\n  - path: offcanvas\n    at: pre-quarto\n```\n\nCreate an offcanvas component using a fenced div with the `.offcanvas` class:\n\n```markdown\n:::: {.offcanvas}\n\n# Offcanvas Title\n\nYour content goes here.\n\n:::\n```\n\n### Basic Configuration\n\nCustomise the offcanvas behaviour with attributes:\n\n```markdown\n:::: {.offcanvas placement=\"end\" width=\"450px\" trigger-text=\"Settings\"}\n\n# Settings Panel\n\nConfigure your preferences here.\n\n:::\n```\n\n### Available Attributes\n\n| Attribute          | Type           | Default             | Description                                                                                       |\n| ------------------ | -------------- | ------------------- | ------------------------------------------------------------------------------------------------- |\n| `placement`        | string         | `\"start\"`           | Position: `\"start\"`, `\"end\"`, `\"top\"`, `\"bottom\"` (also accepts `\"left\"`, `\"right\"`)[^1]          |\n| `width`            | string         | `\"400px\"`           | Width for start/end placement                                                                     |\n| `height`           | string         | `\"30vh\"`            | Height for top/bottom placement                                                                   |\n| `backdrop`         | string/boolean | `\"true\"`            | `\"true\"`, `\"false\"`, or `\"static\"`                                                                |\n| `scroll`           | boolean        | `\"false\"`           | Allow body scrolling when open                                                                    |\n| `keyboard`         | boolean        | `\"true\"`            | Close with Escape key                                                                             |\n| `trigger-text`     | string         | `\"Open\"`            | Text for trigger button                                                                           |\n| `trigger-class`    | string         | `\"btn btn-primary\"` | CSS classes for trigger button (use `\"none\"` or `\"\"` for no classes)                              |\n| `trigger-icon`     | string         | `\"\"`                | Icon class (*e.g.*, Bootstrap Icons)                                                              |\n| `trigger-position` | string         | `\"inline\"`          | `\"inline\"` or `\"none\"` (no auto trigger)                                                          |\n| `trigger-type`     | string         | `\"button\"`          | Type of trigger element: `\"button\"` or `\"text\"` (span element)                                    |\n| `title`            | string         | auto-extracted      | Override title from first heading                                                                 |\n| `show-close`       | boolean        | `\"true\"`            | Show close button in header                                                                       |\n| `responsive`       | string         | `\"\"`                | Responsive breakpoint: `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`, `\"xxl\"` (hides offcanvas below breakpoint) |\n| `overtake-margins` | boolean        | `\"false\"`           | Convert Quarto margin content to offcanvas                                                        |\n\nFor more information about Bootstrap offcanvas components, see the [official Bootstrap documentation](https://getbootstrap.com/docs/5.3/components/offcanvas/).\n\n[^1]: `\"left\"` is an alias for `\"start\"` and `\"right\"` is an alias for `\"end\"`.\n\n### Margin Overtake Feature\n\nThe extension can automatically convert Quarto margin content (elements with `.column-margin` or `.aside` classes) into offcanvas components.\n\nThis is particularly useful for making margin notes accessible on mobile devices while not cluttering the main content area.\n\nTo enable this feature:\n\n```yaml\n---\nformat: html\nextensions:\n  offcanvas:\n    overtake-margins: true\n    placement: end\n    width: 450px\n    trigger-class: btn btn-sm btn-outline-secondary\n---\n```\n\nWhen enabled, all margin content will be converted to offcanvas panels with trigger buttons placed in the margin.\n\nThe trigger button text is automatically extracted from the first 30 characters of the margin content, unless overridden with the `trigger-text` attribute.\n\nYou can customise individual margin elements using attributes:\n\n```markdown\n:::: {.column-margin trigger-text=\"View details\" title=\"Additional Info\"}\nContent here.\n:::\n```\n\nAll standard offcanvas attributes are supported on margin elements (placement, width, height, backdrop, scroll, keyboard, trigger-class, trigger-icon, title, show-close).\n\n### Document-wide Configuration\n\nSet default values for all offcanvas components in the document metadata:\n\n```yaml\n---\ntitle: \"My Document\"\nformat: html\nextensions:\n  offcanvas:\n    placement: end\n    width: 450px\n    trigger-class: btn btn-outline-secondary\n---\n```\n\n### Examples\n\n#### Navigation Menu\n\n```markdown\n:::: {.offcanvas placement=\"start\" trigger-text=\"Menu\" trigger-icon=\"bi bi-list\"}\n\n# Navigation\n\n- [Home](#home)\n- [About](#about)\n- [Contact](#contact)\n\n:::\n```\n\n#### Settings Panel\n\n```markdown\n:::: {.offcanvas placement=\"end\" width=\"350px\" trigger-text=\"Settings\"}\n\n# Preferences\n\n- [ ] Dark mode\n- [ ] Notifications\n- [ ] Auto-save\n\n:::\n```\n\n#### Top Notification Bar\n\n```markdown\n:::: {.offcanvas placement=\"top\" height=\"200px\" backdrop=\"false\" scroll=\"true\"}\n\n# Announcements\n\nImportant system notice.\n\n:::\n```\n\n#### Offcanvas with Footer\n\nUse a horizontal rule to separate body and footer:\n\n```markdown\n:::: {.offcanvas placement=\"end\" trigger-text=\"Details\"}\n\n# Details\n\nMain content here.\n\n---\n\n**Footer Section**\n\n[Save](#){.btn .btn-primary}\n[Cancel](#){.btn .btn-secondary bs-dismiss=\"offcanvas\"}\n\n:::\n```\n\n#### Custom Trigger with Manual Control\n\nSet `trigger-position=\"none\"` to manage the trigger yourself:\n\n```markdown\n:::: {#my-custom-offcanvas .offcanvas trigger-position=\"none\"}\n\n# Custom Offcanvas\n\nThis offcanvas has no automatic trigger.\n\nYou control when and how to open it.\n\n:::\n\n[Open Custom Offcanvas](#my-custom-offcanvas){bs-toggle=\"offcanvas\"}\n```\n\nThis allows you to create custom trigger elements anywhere in your document using the syntax:\n\n```markdown\n[Link Text](#offcanvas-id){bs-toggle=\"offcanvas\"}\n```\n\n#### Text Trigger (No Button Styling)\n\nUse `trigger-type=\"text\"` for a plain text trigger instead of a button:\n\n```markdown\n:::: {.offcanvas trigger-type=\"text\" trigger-text=\"Click here\" trigger-class=\"text-primary\"}\n\n# Text Trigger Example\n\nThis offcanvas is triggered by plain text instead of a button.\n\n:::\n```\n\n#### Trigger Without CSS Classes\n\nUse `trigger-class=\"none\"` or `trigger-class=\"\"` to remove all CSS classes:\n\n```markdown\n:::: {.offcanvas trigger-class=\"none\" trigger-text=\"Plain Trigger\"}\n\n# No Styling\n\nThis trigger has no CSS classes applied.\n\n:::\n```\n\n#### Placement Aliases\n\nUse `\"left\"` and `\"right\"` as convenient aliases:\n\n```markdown\n:::: {.offcanvas placement=\"left\"}\n\n# Left Panel\n\nThis is equivalent to `placement=\"start\"`.\n\n:::\n```\n\n```markdown\n:::: {.offcanvas placement=\"right\"}\n\n# Right Panel\n\nThis is equivalent to `placement=\"end\"`.\n\n:::\n```\n\n## Example\n\nHere is the source code for a comprehensive example: [example.qmd](example.qmd).\n\nOutputs of `example.qmd`:\n\n- [HTML](https://m.canouil.dev/quarto-offcanvas/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmcanouil%2Fquarto-offcanvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmcanouil%2Fquarto-offcanvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmcanouil%2Fquarto-offcanvas/lists"}