tech meta image

[alttp.git] / resources / js / components / pages / Technique.js

diff --git a/resources/js/components/pages/Technique.js b/resources/js/components/pages/Technique.js
index 32acd284f56fcd5f4250432ed7c4368e4ced245c..a24b8797ae560ae8d845ecf46dc279d435d6db37 100644 (file)
--- a/resources/js/components/pages/Technique.js
+++ b/resources/js/components/pages/Technique.js
@@ -20,7 +20,7 @@ import { getLanguages, getMatchedLocale, getTranslation } from '../../helpers/Te
 import { useUser } from '../../helpers/UserContext';
 import i18n from '../../i18n';
 
-const Technique = ({ type }) => {
+const Technique = ({ basepath, type }) => {
        const params = useParams();
        const { name } = params;
        const user = useUser();
@@ -90,8 +90,16 @@ const Technique = ({ type }) => {
                        <title>{getTranslation(technique, 'title', i18n.language)}</title>
                        <meta name="description" content={getTranslation(technique, 'short', i18n.language)} />
                </Helmet>
+               {technique.image ? <Helmet>
+                       <meta property="og:image" content={technique.image} />
+                       <meta property="twitter:image" content={technique.image} />
+               </Helmet> : null}
+               {!technique.image && technique.gif ? <Helmet>
+                       <meta property="og:image" content={technique.gif} />
+                       <meta property="twitter:image" content={technique.gif} />
+               </Helmet> : null}
                <CanonicalLinks
-                       base={`/tech/${technique.name}`}
+                       base={`/${basepath}/${technique.name}`}
                        lang={getMatchedLocale(technique, i18n.language)}
                        langs={getLanguages(technique)}
                />
@@ -107,6 +115,7 @@ const Technique = ({ type }) => {
 };
 
 Technique.propTypes = {
+       basepath: PropTypes.string,
        type: PropTypes.string,
 };