feat: add Twig documentation links to template editors

Add clickable links to Twig documentation (https://twig.symfony.com/)
in both Signature Stamp and Footer Template editor sections using
the v-linkify directive from @nextcloud/vue.

This improves user experience by providing direct access to Twig
syntax documentation when configuring custom templates.

Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>

Author: vitormattos

src/components/FooterTemplateEditor.vue

@@ -4,6 +4,7 @@
 -->
 <template>
 	<div class="footer-template-section">
+		<p v-linkify="{ linkify: true, text: footerDescription }" class="footer-template-description" />
 		<div class="footer-template-header">
 			<NcButton type="tertiary"
 				:aria-label="t('libresign', 'Show available variables')"
@@ -142,6 +143,7 @@ import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcFormBoxButton from '@nextcloud/vue/components/NcFormBoxButton'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
+import Linkify from '@nextcloud/vue/directives/Linkify'
 // eslint-disable-next-line import/default
 import VuePdfEditor from '@libresign/vue-pdf-editor'
 
@@ -156,6 +158,9 @@ import Undo from 'vue-material-design-icons/UndoVariant.vue'
 
 export default {
 	name: 'FooterTemplateEditor',
+	directives: {
+		Linkify,
+	},
 	components: {
 		Check,
 		CodeEditor,
@@ -177,6 +182,7 @@ export default {
 		return {
 			DEFAULT_PREVIEW_WIDTH,
 			DEFAULT_PREVIEW_HEIGHT,
+			footerDescription: t('libresign', 'Configure the content displayed at the footer of the PDF. The text template uses Twig syntax: https://twig.symfony.com/'),
 			footerTemplate: '',
 			pdfPreviewFile: null,
 			loadingPreview: false,
@@ -314,6 +320,10 @@ export default {
 	flex-direction: column;
 	gap: 16px;
 
+	.footer-template-description {
+		color: var(--color-text-lighter);
+	}
+
 	.footer-template-header {
 		display: flex;
 		gap: 8px;

src/views/Settings/SignatureStamp.vue

@@ -3,7 +3,8 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcSettingsSection :name="name" :description="description">
+	<NcSettingsSection :name="name">
+		<p v-linkify="{ linkify: true, text: description }" class="settings-section__description" />
 		<fieldset class="settings-section__row">
 			<legend>{{ t('libresign', 'Display signature mode') }}</legend>
 			<NcCheckboxRadioSwitch v-model="renderMode"
@@ -349,11 +350,15 @@ import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import { useIsDarkTheme } from '@nextcloud/vue/composables/useIsDarkTheme'
+import Linkify from '@nextcloud/vue/directives/Linkify'
 
 import CodeEditor from '../../components/CodeEditor.vue'
 
 export default {
 	name: 'SignatureStamp',
+	directives: {
+		Linkify,
+	},
 	components: {
 		Check,
 		CodeEditor,
@@ -384,7 +389,7 @@ export default {
 		const backgroundType = loadState('libresign', 'signature_background_type')
 		return {
 			name: t('libresign', 'Signature stamp'),
-			description: t('libresign', 'Configure the content displayed with the signature. The text template uses Twig syntax.'),
+			description: t('libresign', 'Configure the content displayed with the signature. The text template uses Twig syntax: https://twig.symfony.com/'),
 			showLoadingBackground: false,
 			backgroundType,
 			acceptMime: ['image/png'],
@@ -696,6 +701,10 @@ export default {
 .settings-section{
 	display: flex;
 	flex-direction: column;
+	&__description {
+		color: var(--color-text-lighter);
+		margin-bottom: 8px;
+	}
 	&:deep(.settings-section__name) {
 		justify-content: unset;
 	}