GithubLink and ExampleGithubLink

website/docs/tutorials/basic/your_first_app/1_simple_cli.md

@@ -3,13 +3,15 @@ id: simple_cli
 title: A simple command-line application
 ---
 
-[![Example](https://img.shields.io/badge/-Example-informational)](https://github.com/facebookresearch/hydra/blob/master/examples/tutorials/basic/your_first_hydra_app/1_simple_cli/my_app.py)
+import GithubLink,{ExampleGithubLink} from "@site/src/components/GithubLink"
+
+<ExampleGithubLink to="examples/tutorials/basic/your_first_hydra_app/1_simple_cli/my_app.py"/>
 
 This is a simple Hydra application that prints your configuration.
 The `my_app` function is a place holder for your code.
 We will slowly evolve this example to showcase more Hydra features.
 
-The examples in this tutorial are available [here](https://github.com/facebookresearch/hydra/tree/master/examples/tutorials/basic).
+The examples in this tutorial are available <GithubLink to="examples/tutorials/basic">here</GithubLink>.
 
 ```python title="my_app.py"
 from omegaconf import DictConfig, OmegaConf

website/docusaurus.config.js

@@ -13,6 +13,12 @@ module.exports = {
     favicon: 'img/Hydra-head.svg',
     organizationName: 'facebookresearch', // Usually your GitHub org/user name.
     projectName: 'hydra', // Usually your repo name.
+    customFields: {
+        githubLinkVersionToBaseUrl: {
+            "1.0": "https://github.com/facebookresearch/hydra/blob/1.0_branch/",
+            current: "https://github.com/facebookresearch/hydra/blob/master/",
+        },
+    },    
     plugins: [require.resolve('docusaurus-plugin-internaldocs-fb')],
     themeConfig: {
         googleAnalytics: {

website/src/components/GithubLink.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+
+import {useActiveVersion} from "@theme/hooks/useDocs";
+
+function createGitHubUrl(to) {
+    const activeVersion = useActiveVersion();
+    const versionToBaseUrl = useDocusaurusContext().siteConfig.customFields.githubLinkVersionToBaseUrl
+
+    const version = activeVersion?.name ?? "current";
+    const baseUrl = versionToBaseUrl[version];
+    return baseUrl + to;
+}
+
+export default function GithubLink(props) {
+    return (
+        <Link
+            {...props}
+            to={createGitHubUrl(
+                props.to,
+            )}
+            target="_blank"
+        />
+    );
+}
+
+export function ExampleGithubLink(props) {
+    const text = props.text ?? "Example" 
+    return (
+        <GithubLink {...props}>
+            <img
+                src={"https://img.shields.io/badge/-" + text + "-informational"}
+                alt="Example"
+            />
+        </GithubLink>
+    );
+}

website/versioned_docs/version-1.0/tutorials/basic/your_first_app/1_simple_cli.md

@@ -3,13 +3,15 @@ id: simple_cli
 title: A simple command-line application
 ---
 
-[![Example](https://img.shields.io/badge/-Example-informational)](https://github.com/facebookresearch/hydra/blob/master/examples/tutorials/basic/your_first_hydra_app/1_simple_cli/my_app.py)
+import GithubLink,{ExampleGithubLink} from "@site/src/components/GithubLink"
+
+<ExampleGithubLink to="examples/tutorials/basic/your_first_hydra_app/1_simple_cli/my_app.py"/>
 
 This is a simple Hydra application that prints your configuration.
 The `my_app` function is a place holder for your code.
 We will slowly evolve this example to showcase more Hydra features.
 
-The examples in this tutorial are available [here](https://github.com/facebookresearch/hydra/tree/1.0_branch/examples/tutorials/basic).
+The examples in this tutorial are available <GithubLink to="examples/tutorials/basic">here</GithubLink>.
 
 ```python title="my_app.py"
 from omegaconf import DictConfig, OmegaConf