diff --git a/assets/images/help/codespaces/codespaces-badge-on-readme.png b/assets/images/help/codespaces/codespaces-badge-on-readme.png new file mode 100644 index 0000000000..9a81b001ea Binary files /dev/null and b/assets/images/help/codespaces/codespaces-badge-on-readme.png differ diff --git a/assets/images/help/codespaces/configure-and-create-option.png b/assets/images/help/codespaces/configure-and-create-option.png new file mode 100644 index 0000000000..7a0f4e3407 Binary files /dev/null and b/assets/images/help/codespaces/configure-and-create-option.png differ diff --git a/content/codespaces/developing-in-codespaces/creating-a-codespace.md b/content/codespaces/developing-in-codespaces/creating-a-codespace.md index f626933523..bf1dbeb2b7 100644 --- a/content/codespaces/developing-in-codespaces/creating-a-codespace.md +++ b/content/codespaces/developing-in-codespaces/creating-a-codespace.md @@ -149,3 +149,6 @@ Replace `machine-type` with a valid identifier for an available machine type. Id For full details of the options for this command, see [the {% data variables.product.prodname_cli %} manual](https://cli.github.com/manual/gh_codespace_create). {% endcli %} + +## Further reading +- "[Adding an 'Open in GitHub Codespaces' badge](/codespaces/setting-up-your-project-for-codespaces/adding-a-codespaces-badge)" \ No newline at end of file diff --git a/content/codespaces/developing-in-codespaces/deleting-a-codespace.md b/content/codespaces/developing-in-codespaces/deleting-a-codespace.md index 8ca09b2a8b..0772b59ec4 100644 --- a/content/codespaces/developing-in-codespaces/deleting-a-codespace.md +++ b/content/codespaces/developing-in-codespaces/deleting-a-codespace.md @@ -99,4 +99,4 @@ gh cs delete --repo octo-org/octo-repo --days 7 {% endcli %} ## Further reading -- [Codespaces lifecycle](/codespaces/developing-in-codespaces/codespaces-lifecycle) +- "[Codespaces lifecycle](/codespaces/developing-in-codespaces/codespaces-lifecycle)" diff --git a/content/codespaces/getting-started/deep-dive.md b/content/codespaces/getting-started/deep-dive.md index b4afca5e51..16f5e6ca74 100644 --- a/content/codespaces/getting-started/deep-dive.md +++ b/content/codespaces/getting-started/deep-dive.md @@ -114,7 +114,7 @@ If you already use {% data variables.product.prodname_vscode_shortname %}, you c ## Further reading -- [Enabling {% data variables.product.prodname_codespaces %} for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-codespaces-for-your-organization) -- [Managing billing for {% data variables.product.prodname_codespaces %} in your organization](/codespaces/managing-codespaces-for-your-organization/managing-billing-for-codespaces-in-your-organization) -- [Setting up your project for Codespaces](/codespaces/setting-up-your-project-for-codespaces) -- [Codespaces lifecycle](/codespaces/developing-in-codespaces/codespaces-lifecycle) +- "[Enabling {% data variables.product.prodname_codespaces %} for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-codespaces-for-your-organization)" +- "[Managing billing for {% data variables.product.prodname_codespaces %} in your organization](/codespaces/managing-codespaces-for-your-organization/managing-billing-for-codespaces-in-your-organization)" +- "[Setting up your project for Codespaces](/codespaces/setting-up-your-project-for-codespaces)" +- "[Codespaces lifecycle](/codespaces/developing-in-codespaces/codespaces-lifecycle)" diff --git a/content/codespaces/getting-started/quickstart.md b/content/codespaces/getting-started/quickstart.md index de00a18f40..47ed966344 100644 --- a/content/codespaces/getting-started/quickstart.md +++ b/content/codespaces/getting-started/quickstart.md @@ -110,5 +110,5 @@ You've successfully created, personalized, and run your first application within ## Further reading -- [Enabling {% data variables.product.prodname_codespaces %} for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-codespaces-for-your-organization) -- [Managing billing for {% data variables.product.prodname_codespaces %} in your organization](/codespaces/managing-codespaces-for-your-organization/managing-billing-for-codespaces-in-your-organization) +- "[Enabling {% data variables.product.prodname_codespaces %} for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-codespaces-for-your-organization)" +- "[Managing billing for {% data variables.product.prodname_codespaces %} in your organization](/codespaces/managing-codespaces-for-your-organization/managing-billing-for-codespaces-in-your-organization)" diff --git a/content/codespaces/guides.md b/content/codespaces/guides.md index 2b53d516b3..38e69a0064 100644 --- a/content/codespaces/guides.md +++ b/content/codespaces/guides.md @@ -15,6 +15,7 @@ includeGuides: - /codespaces/setting-up-your-project-for-codespaces/setting-up-your-python-project-for-codespaces - /codespaces/setting-up-your-project-for-codespaces/setting-up-your-dotnet-project-for-codespaces - /codespaces/setting-up-your-project-for-codespaces/setting-up-your-java-project-for-codespaces + - /codespaces/setting-up-your-project-for-codespaces/adding-a-codespaces-badge - /codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project - /codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account - /codespaces/developing-in-codespaces/creating-a-codespace diff --git a/content/codespaces/setting-up-your-project-for-codespaces/adding-a-codespaces-badge.md b/content/codespaces/setting-up-your-project-for-codespaces/adding-a-codespaces-badge.md new file mode 100644 index 0000000000..b1301c8f7f --- /dev/null +++ b/content/codespaces/setting-up-your-project-for-codespaces/adding-a-codespaces-badge.md @@ -0,0 +1,66 @@ +--- +title: Adding an "Open in GitHub Codespaces" badge +shortTitle: Add a Codespaces badge +intro: 'You can add a badge to a Markdown file in your repository which people can click to create a codespace.' +allowTitleToDifferFromFilename: true +versions: + fpt: '*' + ghec: '*' +type: how_to +topics: + - Codespaces + - Set up +product: '{% data reusables.gated-features.codespaces %}' +--- + +## Overview + +Adding an "Open in {% data variables.product.prodname_github_codespaces %}" badge to a Markdown file gives people an easy way to create a codespace for your repository. + +![Screenshot of a Codespaces badge on a README page](/assets/images/help/codespaces/codespaces-badge-on-readme.png) + +When you create a badge you can choose specific configuration options for the codespace that the badge will create. + +When people click the badge they'll be taken to the advanced options page for codespace creation, with the options you chose preselected. For more information about the advanced options page, see "[Creating a codespace](https://docs-internal-30445-bfc9ce.preview.ghdocs.com/en/codespaces/developing-in-codespaces/creating-a-codespace#creating-a-codespace)." + +From the advanced options page, users can change the preselected settings if required, then click **Create codespace**. + +{% note %} + +**Note**: Be aware that people who don't yet have access to {% data variables.product.prodname_github_codespaces %} will see a 404 message if they click this badge. + +{% endnote %} + +## Creating an "Open in {% data variables.product.prodname_github_codespaces %}" badge + +{% data reusables.repositories.navigate-to-repo %} +1. Under the repository name, use the "Branch" drop-down menu, and select the branch you want to create the badge for. + + ![Screenshot of the Branch drop-down menu](/assets/images/help/codespaces/branch-drop-down.png) + +1. Click the **{% octicon "code" aria-label="The code icon" %} Code** button, then click the **Codespaces** tab. + + ![Screenshot of the New codespace button](/assets/images/help/codespaces/new-codespace-button.png) + +1. Click the down arrow at the side of the **Create codespace on BRANCH** button, click **Configure and create codespace**, then click the **Configure and create codespace** button. + + ![Screenshot of the "Configure and create codespace" option](/assets/images/help/codespaces/configure-and-create-option.png) + +1. On the advanced options page for codespace creation, select the values you want to be preselected in each field. + + ![Screenshot of the advanced options page](/assets/images/help/codespaces/advanced-options.png) + +1. Copy the URL from the browser's address bar. +1. Add the following Markdown to, for example, the `README.md` file of your repository: + + ```Markdown{:copy} + [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](COPIED-URL) + ``` + + For example: + + ```Markdown + [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=0000000&machine=premiumLinux&devcontainer_path=.devcontainer%2Fdevcontainer.json&location=WestUs2) + ``` + + In the above example, `0000000` will be the reference number of your repository. The other details in the URL are determined by the values you selected in the fields on the advanced options page. diff --git a/content/codespaces/setting-up-your-project-for-codespaces/index.md b/content/codespaces/setting-up-your-project-for-codespaces/index.md index 36bf641151..dd269bee1a 100644 --- a/content/codespaces/setting-up-your-project-for-codespaces/index.md +++ b/content/codespaces/setting-up-your-project-for-codespaces/index.md @@ -17,5 +17,6 @@ children: - /setting-up-your-java-project-for-codespaces - /setting-up-your-python-project-for-codespaces - /setting-a-minimum-specification-for-codespace-machines + - /adding-a-codespaces-badge --- diff --git a/content/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes.md b/content/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes.md index 6dcf30403e..3bc2ff7e3d 100644 --- a/content/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes.md +++ b/content/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes.md @@ -64,3 +64,6 @@ A README should contain only the necessary information for developers to get sta - "[Adding a file to a repository](/articles/adding-a-file-to-a-repository)" - 18F's "[Making READMEs readable](https://github.com/18F/open-source-guide/blob/18f-pages/pages/making-readmes-readable.md)" +{%- ifversion fpt or ghec %} +- "[Adding an 'Open in GitHub Codespaces' badge](/codespaces/setting-up-your-project-for-codespaces/adding-a-codespaces-badge)" +{%- endif %} \ No newline at end of file