[TASK] Recreate integration baseline

Author: garvinhicking

packages/typo3-docs-theme/assets/js/link-reference-modal.js

@@ -3,6 +3,7 @@
   const SELECTOR_MODAL = '#linkReferenceModal';
   const SELECTOR_ALERT_RST_NO_ANCHOR = '.alert-permalink-rst';
   const SELECTOR_PERMALINK_URI = '#permalink-uri';
+  const SELECTOR_SHORTLINK_URI = '#shortlink-uri';
   const SELECTOR_PERMALINK_RST = '#permalink-rst';
   const SELECTOR_PERMALINK_HTML = '#permalink-html';
   const SELECTOR_ALERT_SUCCESS = '#permalink-alert-success';
@@ -16,6 +17,19 @@
     return rstAnchor ? `${window.location.origin}${window.location.pathname}#${rstAnchor}` : `${window.location.origin}${window.location.pathname}#${section?.id || ''}`;
   }
 
+  function generateShortUri(linkReferenceModal, section, headerText, rstAnchor, filename) {
+    const urlPrefix = 'https://docs.typo3.org/permalink/';
+    const interlinkTarget = linkReferenceModal.dataset.interlinkShortcode || 'somemanual';
+    if (rstAnchor) {
+      return urlPrefix + `${interlinkTarget}:${rstAnchor}`;
+    }
+    if (filename === '') {
+      return '';
+    }
+    // @todo - check how anchor hashes + filenames work with redirects?
+    return urlPrefix + `${interlinkTarget}:${filename}#${section?.id || ''}`;
+  }
+
   function generateRstLink(linkReferenceModal, section, headerText, rstAnchor, filename) {
     const interlinkTarget = linkReferenceModal.dataset.interlinkShortcode || 'somemanual';
     if (rstAnchor) {
@@ -36,16 +50,18 @@
     }
   }
 
-  function updateInputsAndTextareas(linkReferenceModal, header, headerText, uri, rstLink) {
+  function updateInputsAndTextareas(linkReferenceModal, header, headerText, uri, rstLink, shortUri) {
     if (header) {
       linkReferenceModal.querySelector('h5').innerHTML = header;
     }
     if (uri === null) {
       // this can happen when opening a local file
       linkReferenceModal.querySelector(SELECTOR_PERMALINK_URI).value = '';
       linkReferenceModal.querySelector(SELECTOR_PERMALINK_HTML).value = '';
+      linkReferenceModal.querySelector(SELECTOR_SHORTLINK_URI).value = '';
     } else {
       linkReferenceModal.querySelector(SELECTOR_PERMALINK_URI).value = uri;
+      linkReferenceModal.querySelector(SELECTOR_SHORTLINK_URI).value = shortUri;
       linkReferenceModal.querySelector(SELECTOR_PERMALINK_HTML).value = `<a href="${uri}">${headerText}</a>`;
     }
     const rstInput = linkReferenceModal.querySelector(SELECTOR_PERMALINK_RST);
@@ -103,8 +119,9 @@
     const uri = generateUri(section, rstAnchor);
     const filename = linkReferenceModal.dataset.currentFilename;
     const rstLink = rstLinkData?rstLinkData:generateRstLink(linkReferenceModal, section, headerText, rstAnchor, filename);
+    const shortUri = generateShortUri(linkReferenceModal, section, headerText, rstAnchor, filename);
 
-    updateInputsAndTextareas(linkReferenceModal, header, headerText, uri, rstLink);
+    updateInputsAndTextareas(linkReferenceModal, header, headerText, uri, rstLink, shortUri);
 
 
     handleCopyButtons(linkReferenceModal);

packages/typo3-docs-theme/resources/public/js/theme.min.js

@@ -17,7 +17,12 @@
                         <input class="form-control code" id="permalink-uri" readonly>
                         <button type="button" class="btn btn-outline-secondary copy-button" data-target="permalink-uri"><i class="far fa-clone"></i></button>
                     </div>
-                    <p>Copy and freely share the link</p>
+                    <label for="shortlink-uri" class="col-form-label">Shortlink</label>
+                    <div class="input-group">
+                        <input class="form-control code" id="shortlink-uri" readonly>
+                        <button type="button" class="btn btn-outline-secondary copy-button" data-target="shortlink-uri"><i class="far fa-clone"></i></button>
+                    </div>
+                    <p><em>Copy and freely share the link</em></p>
                 </div>
                 <div class="mb-3">
                     <div class="alert alert-warning alert-permalink-rst" role="alert">

packages/typo3-docs-theme/resources/template/structure/layoutParts/linkReferenceModal.html.twig

@@ -165,7 +165,12 @@ <h5 class="modal-title" id="linkReferenceModalLabel">Reference to the headline</
                         <input class="form-control code" id="permalink-uri" readonly>
                         <button type="button" class="btn btn-outline-secondary copy-button" data-target="permalink-uri"><i class="far fa-clone"></i></button>
                     </div>
-                    <p>Copy and freely share the link</p>
+                    <label for="shortlink-uri" class="col-form-label">Shortlink</label>
+                    <div class="input-group">
+                        <input class="form-control code" id="shortlink-uri" readonly>
+                        <button type="button" class="btn btn-outline-secondary copy-button" data-target="shortlink-uri"><i class="far fa-clone"></i></button>
+                    </div>
+                    <p><em>Copy and freely share the link</em></p>
                 </div>
                 <div class="mb-3">
                     <div class="alert alert-warning alert-permalink-rst" role="alert">This link target has no permanent anchor assigned.The link below can be used, but is prone to change if the page gets moved.

tests/Integration/tests-full/breadcrumb/expected/index.html

@@ -171,7 +171,12 @@ <h5 class="modal-title" id="linkReferenceModalLabel">Reference to the headline</
                         <input class="form-control code" id="permalink-uri" readonly>
                         <button type="button" class="btn btn-outline-secondary copy-button" data-target="permalink-uri"><i class="far fa-clone"></i></button>
                     </div>
-                    <p>Copy and freely share the link</p>
+                    <label for="shortlink-uri" class="col-form-label">Shortlink</label>
+                    <div class="input-group">
+                        <input class="form-control code" id="shortlink-uri" readonly>
+                        <button type="button" class="btn btn-outline-secondary copy-button" data-target="shortlink-uri"><i class="far fa-clone"></i></button>
+                    </div>
+                    <p><em>Copy and freely share the link</em></p>
                 </div>
                 <div class="mb-3">
                     <div class="alert alert-warning alert-permalink-rst" role="alert">This link target has no permanent anchor assigned.The link below can be used, but is prone to change if the page gets moved.

tests/Integration/tests-full/breadcrumb/expected/page.html

@@ -164,7 +164,12 @@ <h5 class="modal-title" id="linkReferenceModalLabel">Reference to the headline</
                         <input class="form-control code" id="permalink-uri" readonly>
                         <button type="button" class="btn btn-outline-secondary copy-button" data-target="permalink-uri"><i class="far fa-clone"></i></button>
                     </div>
-                    <p>Copy and freely share the link</p>
+                    <label for="shortlink-uri" class="col-form-label">Shortlink</label>
+                    <div class="input-group">
+                        <input class="form-control code" id="shortlink-uri" readonly>
+                        <button type="button" class="btn btn-outline-secondary copy-button" data-target="shortlink-uri"><i class="far fa-clone"></i></button>
+                    </div>
+                    <p><em>Copy and freely share the link</em></p>
                 </div>
                 <div class="mb-3">
                     <div class="alert alert-warning alert-permalink-rst" role="alert">This link target has no permanent anchor assigned.The link below can be used, but is prone to change if the page gets moved.