{"id":15048548,"url":"https://github.com/jankaritech/web-app-presentation-viewer","last_synced_at":"2025-12-29T06:48:36.307Z","repository":{"id":222286262,"uuid":"754066101","full_name":"JankariTech/web-app-presentation-viewer","owner":"JankariTech","description":"ownCloud Web extension to view markdown presentation slides","archived":false,"fork":false,"pushed_at":"2025-04-03T10:17:19.000Z","size":1059,"stargazers_count":4,"open_issues_count":13,"forks_count":1,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-03T11:00:43.504Z","etag":null,"topics":["frontend","md","owncloud","owncloud-web","reveal-js","revealjs","typescript","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JankariTech.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["JankariTech"],"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,"custom":null}},"created_at":"2024-02-07T10:34:57.000Z","updated_at":"2025-04-03T10:17:21.000Z","dependencies_parsed_at":"2024-03-11T05:25:08.725Z","dependency_job_id":"6e0ae0f6-a50b-42ce-9299-3283ae8cd826","html_url":"https://github.com/JankariTech/web-app-presentation-viewer","commit_stats":null,"previous_names":["jankaritech/web-app-presentation-viewer"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JankariTech%2Fweb-app-presentation-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JankariTech%2Fweb-app-presentation-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JankariTech%2Fweb-app-presentation-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JankariTech%2Fweb-app-presentation-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JankariTech","download_url":"https://codeload.github.com/JankariTech/web-app-presentation-viewer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248138840,"owners_count":21053966,"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":["frontend","md","owncloud","owncloud-web","reveal-js","revealjs","typescript","vue","vuejs"],"created_at":"2024-09-24T21:13:56.019Z","updated_at":"2025-12-29T06:48:36.300Z","avatar_url":"https://github.com/JankariTech.png","language":"JavaScript","funding_links":["https://github.com/sponsors/JankariTech"],"categories":[],"sub_categories":[],"readme":"# Markdown Presentation Viewer for OpenCloud \u0026 ownCloud (oCIS)\n\n![cover photo](./images/cover-large.png)\n\nA markdown presentation viewer for [OpenCloud](https://github.com/opencloud-eu/opencloud/) and [oCIS](https://github.com/owncloud/ocis/) using the [reveal.js](https://revealjs.com/) library.\n\nIt allows users to:\n\n- create slide presentations directly from markdown files\n- share the slides using public links\n\n## Demonstration\n\n- [Demonstation page (OpenCloud)](https://opencloud.in-nepal.de/s/GLlKTyODNlEwmZh)\n- Click on `Open in Presentation Viewer` to view the slides \u003c/br\u003e\n  \u003cimg height=\"300\" alt=\"image\" src=\"https://github.com/user-attachments/assets/fc85aa97-963a-4f7c-9696-f2515d760496\" /\u003e\n\n## Supported oCIS and Web Versions\n\n- [oCIS](https://github.com/owncloud/ocis) (\u003e= 6.x.x) or [OpenCloud](https://github.com/opencloud-eu/opencloud/) (\u003e= 2.0.0)\n\n## App Installation\n\n1. Download the zip file from the [releases page](https://github.com/JankariTech/web-app-presentation-viewer/releases)\n\n   For example: `mdpresentation-viewer-\u003cserver\u003e-x.x.x.zip`\n\n2. Extract the zip file to the `apps` directory of the OpenCloud/oCIS server.\n\n   Apps directory is set using the `WEB_ASSET_APPS_PATH` environment variable.\n\n### App Installation With [OpenCloud](https://github.com/opencloud-eu/opencloud/tree/main/deployments/examples/opencloud_full) or [oCIS Deployment](https://github.com/owncloud/ocis/tree/master/deployments/examples/ocis_full)\n\n1. Copy the `yml` file that corresponds with your server (OpenCloud or oCIS) from [`deployments/`](./deployments/) into the `web_extensions`\nsubfolder.\n2. Add `MDPRESENTATION_VIEWER=:web_extensions/mdpresentation-viewer-\u003cyour-server\u003e.yml` to the `Web Extensions` section of the `.env` file of your installation and append it to the `COMPOSE_FILE` variable.\n    ```env\n    MDPRESENTATION_VIEWER=:web_extensions/mdpresentation-viewer-\u003cyour-server\u003e.yml\n    \n    COMPOSE_FILE=docker-compose.yml${...}${MDPRESENTATION_VIEWER:-}\n    ```\n3. Run `docker compose up` to run the server with the extensions\n\n## Creating Presentation\n\nPlease, refer to the [documentation](https://revealjs.com/markdown/) for more information about creating a presentation using markdown.\n\nThis app has the following default slide separators:\n\n- Horizontal separator: `---` (`← →`)\n- Vertical separator: `--` (`↓ ↑`)\n\n## Using Templates\n\nTo use the templates in the presentation viewer, use the front matter to provide default metadata followed by slide\ncontents.\n\nThe front matter is used to define the default values for the presentation and will be applied to every slides. The\ndefault metadata can be defined as below:\n\n```markdown\n---\nslide: \u003cdefault-slide-type\u003e\npresenter: \u003cname-of-the-presenter\u003e\nlogo: \u003cpath-to-logo\u003e\ncolor: \u003cfont-color-for-slide-title\u003e\nfooter: \u003cfooter-content\u003e\naboutUs:\n    - title: \u003cabout-us-title1\u003e\n      text: \u003ctext-for-title1\u003e\n    - title: \u003cabout-us-title2\u003e\n      text: \u003ctext-for-title2\u003e\n    - title: \u003cabout-us-title3\u003e\n      text: \u003ctext-for-title3\u003e\n---\n```\n\nThese are the supported metadata required for the presentation template.\n\n| Default Metadata | Description                                                                                                                                                |\n|------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `slide`          | Default slide for presentation. Most used slide template can be given in the default metadata.                                                             |\n| `presenter`      | Name of the presenter.                                                                                                                                     |\n| `logo`           | Logo appears on the top right corner of the slide. The logo path should be relative to the markdown file.                                                  |\n| `color`          | Font color of the slide title.                                                                                                                             |\n| `footer`         | Content to be shown in the footer of the slide.                                                                                                            |\n| `aboutUs`        | Column wise content to be shown in the about-us slide. Use this metadata only if about-us slide is used for the presentation. More [here](#slide-about-us) |\n| `aboutUs:title`  | Title for each column in about-us slide.                                                                                                                   |\n| `aboutUs:text`   | Text under each title for column in about-us slide.                                                                                                        |\n\nFollowing the front matter, create slides as described in [Creating Presentation](#creating-presentation)\n\nBesides default metadata, you can also provide inline metadata for each slide. This will be useful when you want to\noverride the default metadata for a specific slide and this will be applied to that slide only. The inline metadata can\nbe defined by adding metadata directly on the slide title as below:\n\n```markdown\n# Title of the slide ::metadata_key_1:metadata_value_1 ::metadata_key_2:metadata_value_2\n```\n\nExample:\n```markdown\n# Title of slide ::slide:title-content-image ::logo:logo.png\n```\n\nFor this slide, the `slide` template will be set to `title-content-image`, and the `logo` will be set to `logo.png`.\n\n### Slide Templates\n\nThe slide template should be provided in the default metadata. The slide type set in the default metadata will be used as the default. The mostly used slide template can be set as default. When you set a slide template in the default metadata, you don’t need to specify the slide type again in the inline metadata for slides that are already defined in the default metadata.\n\n| Slide Template        | Desctiption                                                                       | Usage                         |\n|-----------------------|-----------------------------------------------------------------------------------|-------------------------------|\n| `cover`               | This slide template can be used for cover slide                                   | `::slide:cover`               |\n| `title-content`       | A slide with a title and some content (the content can also be an image)          | `::slide:title-content`       |\n| `title-content-image` | A slide with a title, and content on the left side and an image on the right side | `::slide:title-content-image` |\n| `about-us`            | The slide with about-us info (e.g., Values, mission, Vision)                      | `::slide:about-us`            |\n\n#### Slide \"Cover\"\n\nCode:\n\n```markdown\n# TITLE ::slide:cover\n```\n\nPreview:\n\n```text\n┌────────────────────────────────────────────────────┐\n│                                                    │\n│                                                    │\n│                      LOGO                          │\n│                      TITLE                         │\n│                   PRESENTER NAME                   │\n│                                                    │\n│                                                    │\n├────────────────────────────────────────────────────┤\n│                                              LOGO  │\n└────────────────────────────────────────────────────┘\n```\n\n#### Slide \"title-content\"\n\nCode:\n\n```markdown\n# TITLE ::slide:title-content\n\nCONTENT\n```\n\nPreview:\n\n```text\n┌────────────────────────────────────────────────────┐\n│ TITLE                                        LOGO  │\n├────────────────────────────────────────────────────┤\n│                                                    │\n│                                                    │\n│ CONTENT                                            │\n│                                                    │\n│                                                    │\n├────────────────────────────────────────────────────┤\n│  FOOTER                                     PAGENR │\n└────────────────────────────────────────────────────┘\n```\n\nImage can also be included in the content of the slide.\n\nCode:\n\n```markdown\n# TITLE ::slide:title-content\n\nCONTENT\n\n![This is image description](./image.png)\n```\n\nPreview:\n\n```text\n┌────────────────────────────────────────────────────┐\n│ TITLE                                        LOGO  │\n├────────────────────────────────────────────────────┤\n│ CONTENT                                            │\n├────────────────────────────────────────────────────┤\n│                                                    │\n│                       IMAGE                        │\n│                                                    │\n├────────────────────────────────────────────────────┤\n│  FOOTER                                    PAGENR  │\n└────────────────────────────────────────────────────┘\n```\n\n#### Slide \"title-content-image\"\n\nCode:\n\n```markdown\n# TITLE ::slide:title-content-image\n\nCONTENT\n\n![This is image description](image.png)\n```\n\nPreview:\n\n```text\n┌────────────────────────────────────────────────────┐\n│ TITLE                                         LOGO │\n├──────────────────────────┬─────────────────────────┤\n│                          │                         │\n│                          │                         │\n│  CONTENT                 │          IMAGE          │\n│                          │                         │\n│                          │                         │\n├──────────────────────────┴─────────────────────────┤\n│  FOOTER                                     PAGENR │\n└────────────────────────────────────────────────────┘\n```\n\n#### Slide \"about-us\"\n\nCode:\n\n```markdown\n# TITLE ::slide:about-us\n\nCONTENT\n```\n\nThe `title` and `text` can be provided via default metadata in front matter as:\n\n```markdown\n---\naboutUs:\n  - title: Title 1\n    text: Some text under title 1\n  - title: Title 2\n    text: Some text under title 2\n  - title: Title 3\n    text: Some text under title 3\n---\n```\n\nPreview:\n\n```text\n┌────────────────────────────────────────────────────┐\n│ TITLE                                         LOGO │\n├────────────────────────────────────────────────────┤\n│                                                    │\n│   ┌────────────────────────────────────────────┐   │\n│   │                CONTENT                     │   │\n│   └────────────────────────────────────────────┘   │\n│   ┌────────┐    │    ┌────────┐   │   ┌────────┐   │\n│   │ TITLE  │    │    │ TITLE  │   │   │ TITLE  │   │\n│   │ TEXT   │    │    │ TEXT   │   │   │ TEXT   │   │\n│   └────────┘    │    └────────┘   │   └────────┘   │\n│                                                    │\n├────────────────────────────────────────────────────┤\n│  FOOTER                                    PAGENR  │\n└────────────────────────────────────────────────────┘\n```\n\n## Development\n\n\u003e [!IMPORTANT] When switching between OpenCloud and oCIS, make sure to clean the browser cache!\n\u003e [!CAUTION] Before commiting changes run `make installOcis` and `make clean`\n\n#### Prerequisites\n\n- [Node.js `v18`](https://nodejs.org/en/)\n- [pnpm `v8`](https://pnpm.io/)\n- [Docker Compose](https://docs.docker.com/compose/)\n- [jq](https://jqlang.org/)\n\n#### 1. Install dependencies:\n\nFor OpenCloud:\n```bash\nmake installOpencloud\n```\n\nFor oCIS:\n```bash\nmake installOcis\n```\n\n#### 2. Build the extension\n\nFor development, build with watch.\n\n```bash\npnpm build:w\n```\n\n#### 3. Load the extension\n\nRun the server with the extension:\n\nFor OpenCloud:\n```bash\ndocker compose -f docker-compose-opencloud.yml up\n```\n\nFor oCIS:\n```bash\ndocker compose -f docker-compose-ocis.yml up\n```\n\nserver URL: [localhost:9200](https://localhost:9200)\n\n### Running e2e tests:\nFor oCIS:\n```bash\npnpm run test:e2e \u003cpath_to_feature_file\u003e\n```\n\nFor OpenCloud:\n```bash\nTARGET_SERVER=opencloud pnpm run test:e2e \u003cpath_to_feature_file\u003e\n```\n\n## Building Docker Container\n\nFor OpenCloud:\n```bash\ndocker build --build-arg server=Opencloud -t jankaritech/mdpresentation-viewer-opencloud:\u003cversion\u003e .\n```\n\n\nFor Ocis:\n```bash\ndocker build --build-arg server=Ocis -t jankaritech/mdpresentation-viewer-ocis:\u003cversion\u003e .\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjankaritech%2Fweb-app-presentation-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjankaritech%2Fweb-app-presentation-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjankaritech%2Fweb-app-presentation-viewer/lists"}