feat: add Go to source links on reference pages

i18n/react-intl/en.json

@@ -133,6 +133,8 @@
   "relatedExamples": "Related Examples",
   "exampleInfo": "This example is for Processing 4+. If you have a previous version, use the examples included with your software. If you see any errors or have suggestions, please",
   "letUsKnow": " let us know",
+  "referenceSourceInfo": "If you see any errors or have suggestions, you can ",
+  "goToSource": "edit this page on GitHub",
   "syntax": "Syntax",
   "parameters": "Parameters",
   "return": "Return",

i18n/react-intl/es.json

@@ -133,6 +133,8 @@
   "relatedExamples": "Ejemplos Relacionados",
   "exampleInfo": "Este ejemplo es para Processing 3+. Si tienes una versión previa, usa los ejemplos incluidos con tu software. Si te encuentras con errores o tienes sugerencias, por favor",
   "letUsKnow": " háznoslo saber",
+  "referenceSourceInfo": "Si encuentras errores o tienes sugerencias, puedes ",
+  "goToSource": "editar esta página en GitHub",
   "syntax": "Sintaxis",
   "parameters": "Parámetros",
   "return": "Regresa",

src/components/reference/GoToSource.js

@@ -0,0 +1,25 @@
+import React, { memo } from 'react';
+import { useIntl } from 'react-intl';
+import { useLocalization } from 'gatsby-theme-i18n';
+
+import { referenceSourceUrl } from '../../utils/paths';
+
+import * as css from './GoToSource.module.css';
+
+const GoToSource = ({ name, libraryName }) => {
+  const intl = useIntl();
+  const { locale } = useLocalization();
+  const url = referenceSourceUrl(name, libraryName, locale || 'en');
+
+  return (
+    <p className={css.root}>
+      {intl.formatMessage({ id: 'referenceSourceInfo' })}
+      <a href={url} target="_blank" rel="noreferrer">
+        {intl.formatMessage({ id: 'goToSource' })}
+      </a>
+      .
+    </p>
+  );
+};
+
+export default memo(GoToSource);

src/components/reference/GoToSource.module.css

@@ -0,0 +1,5 @@
+.root {
+  padding-top: var(--gutter-double);
+  color: var(--processing-blue-dark);
+  margin: 0;
+}

src/templates/reference/class.js

@@ -13,6 +13,7 @@ import Content from '../../components/ContentWithSidebar';
 import { SidebarTree } from '../../components/Sidebar';
 import Section from '../../components/reference/Section';
 import License from '../../components/reference/License';
+import GoToSource from '../../components/reference/GoToSource';
 import { CodeList, ExampleList } from '../../components/reference/ContentList';
 import { ExampleItem } from '../../components/examples/ExamplesList';
 import Breadcrumbs from '../../components/Breadcrumbs';
@@ -133,6 +134,7 @@ const ClassRefTemplate = ({ data, pageContext }) => {
                 </ul>
               </Section>
             )}
+            <GoToSource name={name} libraryName={libraryName} />
             <License />
           </Content>
         ) : (
@@ -142,6 +144,7 @@ const ClassRefTemplate = ({ data, pageContext }) => {
               {' '}
               {intl.formatMessage({ id: 'englishPage' })}
             </Link>
+            <GoToSource name={name} libraryName={libraryName} />
           </Content>
         )}
       </div>

src/templates/reference/field.js

@@ -12,6 +12,7 @@ import Content from '../../components/ContentWithSidebar';
 import { SidebarTree } from '../../components/Sidebar';
 import Section from '../../components/reference/Section';
 import License from '../../components/reference/License';
+import GoToSource from '../../components/reference/GoToSource';
 import { CodeList, ExampleList } from '../../components/reference/ContentList';
 import { ExampleItem } from '../../components/examples/ExamplesList';
 import Breadcrumbs from '../../components/Breadcrumbs';
@@ -133,6 +134,7 @@ const FieldRefTemplate = ({ data, pageContext }) => {
                 </ul>
               </Section>
             )}
+            <GoToSource name={name} libraryName={libraryName} />
             <License />
           </Content>
         ) : (
@@ -142,6 +144,7 @@ const FieldRefTemplate = ({ data, pageContext }) => {
               {' '}
               {intl.formatMessage({ id: 'englishPage' })}
             </Link>
+            <GoToSource name={name} libraryName={libraryName} />
           </Content>
         )}
       </div>

src/templates/reference/function.js

@@ -12,6 +12,7 @@ import Content from '../../components/ContentWithSidebar';
 import { SidebarTree } from '../../components/Sidebar';
 import Section from '../../components/reference/Section';
 import License from '../../components/reference/License';
+import GoToSource from '../../components/reference/GoToSource';
 import { CodeList, ExampleList } from '../../components/reference/ContentList';
 import { ExampleItem } from '../../components/examples/ExamplesList';
 import Breadcrumbs from '../../components/Breadcrumbs';
@@ -147,6 +148,7 @@ const RefTemplate = ({ data, pageContext, ...props }) => {
                 </ul>
               </Section>
             )}
+            <GoToSource name={name} libraryName={libraryName} />
             <License />
           </Content>
         ) : (
@@ -156,6 +158,7 @@ const RefTemplate = ({ data, pageContext, ...props }) => {
               {' '}
               {intl.formatMessage({ id: 'englishPage' })}
             </Link>
+            <GoToSource name={name} libraryName={libraryName} />
           </Content>
         )}
       </div>

src/utils/paths.js

@@ -35,9 +35,15 @@ const referencePath = (name, libraryName, lang) => {
 **/
 const pathToName = (name) => name.replace(/_$/g, '()').replace(/_/g, '::');
 
+const referenceSourceUrl = (name, libraryName, lang = 'en') => {
+  const filePath = `content/references/translations/${lang}/${libraryName}/${name}.json`;
+  return `https://github.com/processing/processing-website/blob/main/${filePath}`;
+};
+
 module.exports = {
   exampleSlug,
   examplePath,
   referencePath,
+  referenceSourceUrl,
   pathToName
 };