Merge pull request #2 from giantswarm/quasi-support-hugo-relref

Support Hugo relref Shortcode to fix broken links
giantswarm · Nov 22, 2023 · 7f08a47 · 7f08a47
2 parents b8a1b21 + e20c028
commit 7f08a47
Showing 1 changed file with 46 additions and 0 deletions.
diff --git a/app/staticcms/public/index.html b/app/staticcms/public/index.html
@@ -10,6 +10,52 @@
         <script src="cms/static-cms-app.js"></script>
         <script>
             CMS.init();
+
+            const stripQuotes = (str) => {
+                let i = 0;
+                for (; i < str.length && (str[i] === '"' || str[i] === '\''); ++i)
+                    ;
+                let j = str.length;
+                for (; j > 0 && (str[j-1] === '"' || str[j-1] === '\''); --j)
+                    ;
+                return str.slice(i, j);
+            };
+
+            CMS.registerShortcode('relref', {
+                label: 'Relref',
+                openTag: '{{< ',
+                closeTag: ' >}}',
+                separator: ' ',
+                toProps: args => {
+                    if (args.length > 0) {
+                        const path = stripQuotes(args[0]);
+                        return {path};
+                    }
+
+                    return { path: '' };
+                },
+                toArgs: ({ path }) => {
+                    return [`"${stripQuotes(path)}"`];
+                },
+                control: ({ path, onChange }) => {
+                    const theme = useTheme();
+
+                    return h('input', {
+                        key: 'control-input',
+                        value: path || undefined,
+                        onChange: event => {
+                            onChange({ path: event.target.value });
+                        },
+                        style: {
+                            width: 'fit-content',
+                            backgroundColor: theme.background.main,
+                            color: theme.text.primary,
+                            padding: '4px 8px',
+                        },
+                    });
+                },
+                preview: ({ path }) => h('span', {}, [path]),
+            });
         </script>
     </body>
 </html>