{"id":16802531,"url":"https://github.com/hawkeye64/example-viewer","last_synced_at":"2025-08-19T08:12:57.811Z","repository":{"id":57332326,"uuid":"229129931","full_name":"hawkeye64/example-viewer","owner":"hawkeye64","description":"Display examples with sources and Github and Codepen links","archived":false,"fork":false,"pushed_at":"2021-10-04T14:27:29.000Z","size":611,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-07T11:57:36.333Z","etag":null,"topics":["code","codepen","example","quasar","template","viewer","vue-sfc"],"latest_commit_sha":null,"homepage":"","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/hawkeye64.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":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["hawkeye64","rstoenescu"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-12-19T20:03:41.000Z","updated_at":"2022-02-09T21:33:14.000Z","dependencies_parsed_at":"2022-09-26T16:31:26.878Z","dependency_job_id":null,"html_url":"https://github.com/hawkeye64/example-viewer","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/hawkeye64/example-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawkeye64%2Fexample-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawkeye64%2Fexample-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawkeye64%2Fexample-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawkeye64%2Fexample-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hawkeye64","download_url":"https://codeload.github.com/hawkeye64/example-viewer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawkeye64%2Fexample-viewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271121168,"owners_count":24702723,"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","status":"online","status_checked_at":"2025-08-19T02:00:09.176Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["code","codepen","example","quasar","template","viewer","vue-sfc"],"created_at":"2024-10-13T09:39:54.073Z","updated_at":"2025-08-19T08:12:57.784Z","avatar_url":"https://github.com/hawkeye64.png","language":"JavaScript","readme":"![quasar-ui-example-viewer](https://img.shields.io/npm/v/quasar-ui-example-viewer.svg?label=quasar-ui-example-viewer)\n![quasar-app-extension-example-viewer](https://img.shields.io/npm/v/quasar-app-extension-example-viewer.svg?label=quasar-app-extension-example-viewer)\n[![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/hawkeye64/example-viewer.svg)]()\n[![GitHub repo size in bytes](https://img.shields.io/github/repo-size/hawkeye64/example-viewer.svg)]()\n\n# Example Viewer\nThe Example Viewer component will show output of a Vue SFC (single file component). On the component's top toolbar, it has links to the Github repo, Codepen and View Sources.\n\n![example-viewer showing QCalendar (week view)](https://raw.githubusercontent.com/hawkeye64/example-viewer/master/images/example-viewer--QCalendar-week-view.png)\n\nWhen View Sources is clicked, you will get tabs for each section of a Vue SFC (single file component) file. This also includes a \"copy to clipboard\" icon.\n\n![example-viewer showing QCalendar (week view)](https://raw.githubusercontent.com/hawkeye64/example-viewer/master/images/example-viewer--QCalendar-week-view--template.png)\n\n![example-viewer showing QCalendar (week view)](https://raw.githubusercontent.com/hawkeye64/example-viewer/master/images/example-viewer--QCalendar-week-view--script.png)\n\n# Necessary\nIn order for this to work with a TOC, you need to make sure you have a couple of things in place:\n\n1. Your app must be using `vueRouterMode: 'history'` (quasar.conf.js)\n2. In `/router/index.js` change:\n```js\n    scrollBehavior: () =\u003e ({ x: 0, y: 0 }),`\n```\nto this:\n```js\n    scrollBehavior: function(to, from, savedPosition) {\n      if (to.hash) {\n          return {selector: to.hash}\n      } else {\n          return { x: 0, y: 0 }\n      }\n    },\n```\nor better, to this:\n```js\n    scrollBehavior (to, _, savedPosition) {\n      return new Promise(resolve =\u003e {\n        setTimeout(() =\u003e {\n          if (to.hash !== void 0 \u0026\u0026 to.hash !== '') {\n            const el = document.getElementById(to.hash.substring(1))\n\n            if (el !== null) {\n              resolve({ x: 0, y: el.offsetTop - el.scrollHeight })\n              return\n            }\n          }\n\n          resolve(savedPosition || { x: 0, y: 0 })\n        }, 100)\n      })\n    },\n```\n# Dependencies\n\nExampleViewer has dependencies on `@quasar/qmarkdown` and `@quasar/qribbon`. Please install them into your Quasar project with the following:\n\n```bash\nquasar ext add @quasar/qmarkdown\nquasar ext add @quasar/qribbon\n```\n\nIf you use something other than the @quasar/cli, then install as appropriate for your system. You will need to install the UI compnent of these dependendies. They are `@quasar/quasar-ui-qmarkdown` and `@quasar/quasar-ui-qribbon`.\n\n# Structure\n\n* [/ui](ui) - standalone npm package (read this one for more info)\n* [/app-extension](app-extension) - Quasar app extension\n\n# Donate\nIf you appreciate the work that went into this, please consider donating to [Quasar](https://donate.quasar.dev) or [Jeff](https://github.com/sponsors/hawkeye64).\n\n# License\nMIT (c) Jeff Galbraith \u003cjeff@quasar.dev\u003e\n","funding_links":["https://github.com/sponsors/hawkeye64","https://github.com/sponsors/rstoenescu"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhawkeye64%2Fexample-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhawkeye64%2Fexample-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhawkeye64%2Fexample-viewer/lists"}