{"id":18070143,"url":"https://github.com/polatengin/lisbon","last_synced_at":"2025-09-14T19:20:25.824Z","repository":{"id":144742221,"uuid":"198902007","full_name":"polatengin/lisbon","owner":"polatengin","description":"Multi Widget Azure DevOps Marketplace Extension","archived":false,"fork":false,"pushed_at":"2024-08-28T09:49:40.000Z","size":1110,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-01T09:24:03.179Z","etag":null,"topics":["azure-devops","devcontainer","extension","github-actions","scss","tfx-cli","typescript","webpack"],"latest_commit_sha":null,"homepage":"","language":"Dockerfile","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/polatengin.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":"2019-07-25T21:15:10.000Z","updated_at":"2025-02-05T02:01:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"37dd9b31-78c6-4853-a363-c7e8d5a5ca61","html_url":"https://github.com/polatengin/lisbon","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/polatengin/lisbon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polatengin%2Flisbon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polatengin%2Flisbon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polatengin%2Flisbon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polatengin%2Flisbon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/polatengin","download_url":"https://codeload.github.com/polatengin/lisbon/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/polatengin%2Flisbon/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275153409,"owners_count":25414619,"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-09-14T02:00:10.474Z","response_time":75,"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":["azure-devops","devcontainer","extension","github-actions","scss","tfx-cli","typescript","webpack"],"created_at":"2024-10-31T08:24:13.835Z","updated_at":"2025-09-14T19:20:25.745Z","avatar_url":"https://github.com/polatengin.png","language":"Dockerfile","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Multi Widget Azure DevOps Marketplace Extension\n\n[Azure DevOps](https://dev.azure.com) is a great tool, it's feature-rich, it might fits all of your needs to have a _code repository_, _project management tools_, _sharing facilities_, _pipelines_, etc.\n\n_Did I mention it's free? 😀_\n\nStill, you may need extra functionality. Luckily, [Azure DevOps Marketplace](https://marketplace.visualstudio.com/azuredevops) has tons of extensions, I'm sure you can find an extension suits for your needs.\n\nIf you need _tailored_ extension for your needs, you're not alone. [Microsoft](https://microsoft.com) has [Extension Framework](https://docs.microsoft.com/en-us/azure/devops/extend/overview?view=azure-devops) to help you handcraft your _own_ extension and push it to [Azure DevOps Marketplace](https://marketplace.visualstudio.com/azuredevops).\n\nMaybe, others will find, install, benefit and enjoy _your_ extension 😀\n\n## Extension development checklist\n\n* Extension manifest (_JSON_ file)\n* Static files (_HTML_, _Javascript_, _CSS_ files)\n* Logo (_PNG_ or _JPEG_ file)\n* Publisher Account\n* TFS Cross Platform Command Line Interface (_[tfx-cli](https://www.npmjs.com/package/tfx-cli)_) tool to package static files and produce _.vsix_ file\n\n![Azure DevOps Marketplace Extension Components](./extension-components.png \"Azure DevOps Marketplace Extension Components\")\n\n## Creating a Publisher Account\n\nSign-in to [Visual Studio Marketplace Publishing Portal](https://marketplace.visualstudio.com/manage/createpublisher)\n\nFill the form to create publisher\n\n![Creating Azure DevOps Marketplace Publisher Account](./creating-azure-devops-marketplace-publisher-account.png \"Creating Azure DevOps Marketplace Publisher Account\")\n\n\u003e Remember the ID field. It'll needed to set in the manifest file of the extension\n\nReview [Marketplace Publisher Agreement](https://aka.ms/vsmarketplace-agreement)\n\nClick _Create_ button\n\n## Installing TFS Cross Platform Command Line Interface (_tfx-cli_)\n\nSince [tfx-cli](https://www.npmjs.com/package/tfx-cli) is an _NPM_ package, you need to install [Node](http://nodejs.org/) first\n\nIt's good to install the tool globally, because probably you'll need it for many extension projects.\n\n```bash\nnpm i -g tfx-cli\n```\n\n## Creating Extension Manifest\n\nStart by creating a file named [vss-extension.json](./src/vss-extension.json)\n\nThis _json_ file will include required attributes, such as, _Extension ID_, _Name_, _Publisher_, etc.\n\n\u003e There is a very good [Extension Manifest Reference](https://docs.microsoft.com/en-us/azure/devops/extend/develop/manifest?view=azure-devops) documentation for creating a detailed _Extension Manifest_. I highly recommend to read it first\n\nMost important part of _Extension Manifest_ for this project is, *Contributions*\n\nBecause a _Contribution_ is, _basically_ a _widget_, you can drag-and-drop and resize it in an [Azure DevOps Dashboard](https://docs.microsoft.com/en-us/azure/devops/report/dashboards/dashboards?view=azure-devops).\n\n```json\n{\n  \"id\": \"SimpleWidget\",\n  \"type\": \"ms.vss-dashboards-web.widget\",\n  \"targets\": [\n    \"ms.vss-dashboards-web.widget-catalog\"\n  ],\n  \"properties\": {\n    \"name\": \"SimpleWidget\",\n    \"description\": \"Lisbon DevOps - Simple Widget\",\n    \"uri\": \"./simple-widget.html\",\n    \"catalogIconUrl\": \"./logo.png\",\n    \"previewImageUrl\": \"./logo.png\",\n    \"supportedSizes\": [\n      {\n        \"rowSpan\": 1,\n        \"columnSpan\": 2\n      }\n    ],\n    \"supportedScopes\": [\"project_team\"]\n  }\n}\n```\n\n## Creating static files\n\nIn this project, we grouped static files in [widgets](./src/widgets) folder.\n\nWe have, _Simple Widget_ ([html](./src/widgets/simple-widget.html), [typescript](./src/widget/simple-widget.ts)) and _Complex Widget_ ([html](./src/widgets/complex-widget.html), [typescript](./src/widget/complex-widget.ts), [scss](./src/widgets/complex-widget.scss))\n\nSimple Widget only has _simple_ elements on screen, but Complex Widget has a dial chart.\n\nI also add a [PowerShell](./build-serve-deploy.ps1) and [Bash](./build-serve-deploy.sh) script files, to make it easier to clean, build, serve and deploy the project.\n\nAfter cloning this repository, you can execute following commands in your favorite Terminal (_my favorite is [Microsoft Terminal](https://github.com/microsoft/terminal) 😀_)\n\n```bash\n# remove ./dist folder\n./build-serve-deploy.sh --clean\n\n# build project and produce ./dist folder\n./build-serve-deploy.sh --build\n\n# run local http server in ./dist folder to debug\n./build-serve-deploy.sh --serve\n\n# package everthing in ./dist folder and produce .vsix file\n./build-serve-deploy.sh --deploy\n```\n\n## References\n\n* [Developing extension for Azure DevOps](https://docs.microsoft.com/en-us/azure/devops/extend/overview?view=azure-devops)\n* [Extension Manifest Reference](https://docs.microsoft.com/en-us/azure/devops/extend/develop/manifest?view=azure-devops)\n* [Azure DevOps Extension SDK](https://developer.microsoft.com/en-us/azure-devops/develop/extensions)\n* [Develop a web extension for Azure DevOps Services](https://docs.microsoft.com/en-us/azure/devops/extend/get-started/node?view=azure-devops)\n* [Package, publish, unpublish, and install Azure DevOps Services extensions](https://docs.microsoft.com/en-us/azure/devops/extend/publish/overview?view=azure-devops)\n* [Sample Extensions](https://github.com/microsoft/vsts-extension-samples)\n* [Pure CSS Percentage Circle](http://circle.firchow.net/)\n\n\u003e I learned creating and publishing an extension to Azure DevOps Marketplace by doing it. I had a chance to work with brilliant people in an internal hack in Microsoft, many kudos to, _Todd Venhaus_, _Oliver Scheer_, _Ian Chen_, _Dariusz Porowski_. They helped me a lot to understand the steps and fine-tune the code.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolatengin%2Flisbon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolatengin%2Flisbon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolatengin%2Flisbon/lists"}