[BUGFIX] Fix the asset paths in single HTMl

And add an integration test for single HTML. It was until now not possible testing it. There are still open issues with single HTMl, but I would suggest to solve them in follow-ups. - #238 - #239 Resolves #233
TYPO3-Documentation · Dec 25, 2023 · 094f524 · 094f524
1 parent 8f4755b
commit 094f524
Show file tree

Hide file tree

Showing 8 changed files with 242 additions and 13 deletions.
diff --git a/packages/typo3-docs-theme/resources/template/structure/singlepage.html.twig b/packages/typo3-docs-theme/resources/template/structure/singlepage.html.twig
@@ -3,7 +3,9 @@
 {% block body %}
     <!-- content start -->
     {% for document in documents -%}
-        {{ renderNode(document) }}
+        <article>
+            {{ renderNode(document) }}
+        </article>
     {%~ endfor -%}
     <!-- content end -->
 {% endblock %}
diff --git a/packages/typo3-docs-theme/src/Twig/TwigExtension.php b/packages/typo3-docs-theme/src/Twig/TwigExtension.php
@@ -103,6 +103,7 @@ public function getCurrentFilename(array $context): string
      */
     public function getRelativePath(array $context, string $path): string
     {
+        $renderContext = $this->getRenderContext($context);
         if ($this->typo3AzureEdgeURI !== '') {
             // CI (GitHub Actions) gets special treatment, then we use a fixed URI for assets.
             // TODO: Fixate the "_resources" string as a class/config constant, not hardcoded

diff --git a/packages/typo3-guides-extension/src/Renderer/SinglePageRenderer.php b/packages/typo3-guides-extension/src/Renderer/SinglePageRenderer.php
@@ -22,7 +22,8 @@ public function render(RenderCommand $renderCommand): void
             $renderCommand->getDestination(),
             $renderCommand->getDestinationPath(),
             'singlepage',
-        )->withIterator($renderCommand->getDocumentIterator());
+        )->withIterator($renderCommand->getDocumentIterator())
+        ->withOutputFilePath('singlehtml/Index.html');
 
         $context->getDestination()->put(
             $renderCommand->getDestinationPath() . '/singlehtml/Index.html',

diff --git a/tests/ApplicationTestCase.php b/tests/ApplicationTestCase.php
@@ -12,6 +12,7 @@
 use Symfony\Component\DependencyInjection\Container;
 use Symfony\Component\DependencyInjection\Extension\ExtensionInterface;
 use T3Docs\GuidesExtension\DependencyInjection\TestExtension;
+use T3Docs\GuidesExtension\DependencyInjection\Typo3GuidesExtension;
 use T3Docs\GuidesPhpDomain\DependencyInjection\GuidesPhpDomainExtension;
 use T3Docs\Typo3DocsTheme\DependencyInjection\Typo3DocsThemeExtension;
 
@@ -42,6 +43,7 @@ protected function prepareContainer(string|null $configurationFile = null, array
             new MarkdownExtension(),
             new BootstrapExtension(),
             new Typo3DocsThemeExtension(),
+            new Typo3GuidesExtension(),
             new GuidesPhpDomainExtension(),
             ...$extraExtensions,
         ]);

diff --git a/tests/Integration/tests-full/page-with-subpages/expected/singlehtml/Index.html b/tests/Integration/tests-full/page-with-subpages/expected/singlehtml/Index.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <meta content="phpdocumentor/guides" name="generator">
+    <meta content="" name="docsearch:name">
+    <meta content="" name="docsearch:package_type">
+    <meta content="" name="docsearch:release">
+    <meta content="" name="docsearch:version">
+    <meta content="2023-01-01T12:00:00+00:00" name="docsearch:modified">
+    <link href="http://purl.org/dc/elements/1.1/" rel="schema.dc">
+    <meta content="2023-01-01T12:00:00+00:00" name="dc.modified">
+    <meta content="2023-01-01T12:00:00+00:00" property="article:modified_time">
+    <title> documentation</title>
+
+    <link href="../_resources/css/theme.css" rel="stylesheet">
+    <link href="https://docs.typo3.org/search/" rel="search" title="Search">
+                    <!-- extrahead --><!-- /extrahead -->
+    <!-- UNIVERSE BAR START -->
+    <script src="https://typo3.azureedge.net/typo3infrastructure/universe/dist/webcomponents-loader.js"></script>
+    <script src="https://typo3.azureedge.net/typo3infrastructure/universe/dist/typo3-universe.js" type="module"></script>
+    <!-- UNIVERSE BAR END -->
+</head>
+<body cz-shortcut-listen="true">
+<div class="page">
+    <header>
+        <div class="page-topbar">
+            <div class="page-topbar-inner">
+                <!-- UNIVERSE BAR START -->
+                <typo3-universe active="documentation">
+                    <div style="display: block; height: 44px; background-color: #313131;"></div>
+                </typo3-universe>
+                <!-- UNIVERSE BAR END -->
+            </div>
+        </div>
+        <div class="page-header">
+            <div class="page-header-inner">
+                <!-- pageheader -->
+                <a class="logo" href="https://docs.typo3.org/" title="TYPO3 Documentation">
+                    <img alt="TYPO3 Logo" class="logo-image" src="../_resources/img/typo3-logo.svg" width="484" height="130">
+                </a>
+                <!-- /pageheader -->
+            </div>
+        </div>
+    </header>
+
+    <main class="page-main">
+        <div class="page-main-inner">
+            <div class="page-main-navigation">
+                <nav>
+                    <input class="toc-checkbox" id="toggleToc" type="checkbox">
+                    <div class="toc-header">
+                        <div class="toc-title">
+                            <a class="toc-title-project" href="/"></a>
+                            </div>
+                        <div class="toc-actions">
+                            <label class="toc-toggle" for="toggleToc">
+                                Menu
+                            </label>
+                        </div>
+                    </div>
+                    <div class="toc-collapse">
+                                                <div aria-label="main navigation" class="toc" role="navigation">
+                            <!-- menu -->
+                                                                                    <!-- /menu -->
+                        </div>
+                    </div>
+                </nav>
+            </div>
+            <div class="page-main-content">
+                <div class="rst-content">                                                                        <!-- content start -->
+    <article>
+            <section class="section" id="root-index">
+            <h1>Root index<a class="headerlink" href="#root-index" data-bs-toggle="modal" data-bs-target="#linkReferenceModal"  title="Reference this headline">¶</a></h1>
+
+            <p>Lorem Ipsum Dolor. See <a href="sub/index.singlepage#sub-index">Sub index</a>.</p>
+            <div class="toctree-wrapper compound">
+    <ul class="menu-level">
+    <li class="toc-item"><a href="sub/index.singlepage#sub-index">Sub index</a></li>
+
+    </ul>
+</div>
+
+    </section>
+
+
+        </article>
+<article>
+            <section class="section" id="sub-index">
+            <h1>Sub index<a class="headerlink" href="#sub-index" data-bs-toggle="modal" data-bs-target="#linkReferenceModal"  title="Reference this headline">¶</a></h1>
+
+            <p>Lorem Ipsum Dolor.  See <a href="../index.singlepage#root-index">Root index</a>.</p>
+    </section>
+
+
+        </article>
+<!-- content end -->
+                                                        </div>
+            </div>
+        </div>
+    </main>
+
+    <div class="modal fade" id="linkReferenceModal" tabindex="-1" aria-labelledby="linkReferenceModalLabel"
+    aria-hidden="true" data-current-filename="">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="linkReferenceModalLabel">Reference to the headline</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="alert alert-success d-none" id="permalink-alert-success" role="alert"></div>
+                <div class="mb-3">
+                    <label for="permalink-uri" class="col-form-label">Permalink</label>
+                    <div class="input-group">
+                        <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>
+                </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.
+                    </div>
+                    <label for="permalink-rst" class="col-form-label">reStructuredText (reST):</label>
+                    <div class="input-group">
+                        <textarea class="form-control code" id="permalink-rst" readonly></textarea>
+                        <button type="button" class="btn btn-outline-secondary copy-button" data-target="permalink-rst"><i class="far fa-clone"></i></button>
+                    </div>
+                    <p>Copy this link into your TYPO3 manual. </p>
+                </div>
+                <div class="mb-3">
+                    <label for="permalink-html" class="col-form-label">HTML:</label>
+                    <div class="input-group">
+                        <textarea class="form-control code" id="permalink-html" readonly></textarea>
+                        <button type="button" class="btn btn-outline-secondary copy-button" data-target="permalink-html"><i class="far fa-clone"></i></button>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+    <!-- Google Tag Manager -->
+    <script type="text/plain" data-usercentrics="Google Tag Manager">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','GTM-MKNXD8Q');</script>
+    <!-- End Google Tag Manager -->
+
+    <footer class="page-footer">
+        <!-- footer.html -->
+        <div class="frame frame-ruler-before frame-background-dark">
+            <div class="frame-container">
+                <div class="frame-inner">
+                    <ul class="footer-simplemenu"><li><a href="https://typo3.org/community/teams/documentation/#c9886" title="Contact"><span>Contact</span></a></li>
+                        <li><a href="https://github.com/TYPO3-Documentation/DocsTypo3Org-Homepage/issues" rel="nofollow noopener" title="Issues"><span>Issues</span></a></li>
+                        <li><a href="https://github.com/TYPO3-Documentation/DocsTypo3Org-Homepage" rel="nofollow noopener" title="Repository"><span>Repository</span></a></li>
+                    </ul>
+                    <div class="footer-additional">
+                        <p class="text-center">Last rendered: Jan 01, 2023 12:00</p>
+                    </div>
+                    <div class="footer-meta">
+                        <div class="footer-meta-copyright">
+                                                                                </div>
+                        <ul class="footer-meta-navigation">
+                            <li><a href="https://typo3.org/legal-notice" rel="nofollow" target="_blank" title="Legal Notice">Legal Notice</a></li>
+                            <li><a href="https://typo3.org/privacy-policy" rel="nofollow" target="_blank" title="Privacy Policy">Privacy Policy</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- /footer.html -->
+    </footer>
+</div>
+
+<script>
+    var DOCUMENTATION_OPTIONS = {
+        URL_ROOT: './',
+        VERSION: '',
+        COLLAPSE_INDEX: false,
+        FILE_SUFFIX: '.html',
+        HAS_SOURCE: true
+    };
+</script>
+<script src="../_resources/js/jquery.min.js"></script>
+<script src="../_resources/js/popper.min.js"></script>
+<script src="../_resources/js/bootstrap.min.js"></script>
+<script src="../_resources/js/theme.min.js"></script>
+
+<script id="R9wBKTwzv" src="https://app.usercentrics.eu/latest/main.js"></script>
+<script data-usercentrics="Matomo" src="/js/piwik.js" type="text/plain"></script>
+</body>
+</html>
diff --git a/tests/Integration/tests-full/page-with-subpages/input/guides.xml b/tests/Integration/tests-full/page-with-subpages/input/guides.xml
@@ -6,4 +6,7 @@
         theme="typo3docs"
         links-are-relative="true"
     >
+    <output-format>html</output-format>
+    <output-format>singlepage</output-format>
+    <output-format>interlink</output-format>
 </guides>
diff --git a/tests/Integration/tests/singlepage-by-toctree/expected/singlehtml/Index.html b/tests/Integration/tests/singlepage-by-toctree/expected/singlehtml/Index.html
@@ -1,5 +1,6 @@
 <!-- content start -->
-    <section class="section" id="root-index">
+    <article>
+            <section class="section" id="root-index">
             <h1>Root index<a class="headerlink" href="#root-index" data-bs-toggle="modal" data-bs-target="#linkReferenceModal"  title="Reference this headline">¶</a></h1>
 
             <p>Lorem Ipsum Dolor.</p>
@@ -24,21 +25,27 @@ <h1>Root index<a class="headerlink" href="#root-index" data-bs-toggle="modal" da
     </section>
 
 
-<section class="section" id="one">
+        </article>
+<article>
+            <section class="section" id="one">
             <h1>One<a class="headerlink" href="#one" data-bs-toggle="modal" data-bs-target="#linkReferenceModal"  title="Reference this headline">¶</a></h1>
 
             <p>Lorem Ipsum Dolor 1</p>
     </section>
 
 
-<section class="section" id="two">
+        </article>
+<article>
+            <section class="section" id="two">
             <h1>Two<a class="headerlink" href="#two" data-bs-toggle="modal" data-bs-target="#linkReferenceModal"  title="Reference this headline">¶</a></h1>
 
             <p>Lorem Ipsum Dolor. 2</p>
     </section>
 
 
-<section class="section" id="three-point-something">
+        </article>
+<article>
+            <section class="section" id="three-point-something">
             <h1>Three point something<a class="headerlink" href="#three-point-something" data-bs-toggle="modal" data-bs-target="#linkReferenceModal"  title="Reference this headline">¶</a></h1>
 
             <p>Lorem Ipsum Dolor.</p>
@@ -54,39 +61,50 @@ <h1>Three point something<a class="headerlink" href="#three-point-something" dat
     </section>
 
 
-<section class="section" id="three">
+        </article>
+<article>
+            <section class="section" id="three">
             <h1>Three<a class="headerlink" href="#three" data-bs-toggle="modal" data-bs-target="#linkReferenceModal"  title="Reference this headline">¶</a></h1>
 
             <p>Lorem Ipsum Dolor. 3.</p>
     </section>
 
 
-<section class="section" id="3-5">
+        </article>
+<article>
+            <section class="section" id="3-5">
             <h1>3.5<a class="headerlink" href="#3-5" data-bs-toggle="modal" data-bs-target="#linkReferenceModal"  title="Reference this headline">¶</a></h1>
 
             <p>Lorem Ipsum Dolor.</p>
     </section>
 
 
-<section class="section" id="four">
+        </article>
+<article>
+            <section class="section" id="four">
             <h1>Four<a class="headerlink" href="#four" data-bs-toggle="modal" data-bs-target="#linkReferenceModal"  title="Reference this headline">¶</a></h1>
 
             <p>Lorem Ipsum Dolor. <a href="https://typ03.org">index</a></p>
     </section>
 
 
-<section class="section" id="i-sqrt-1">
+        </article>
+<article>
+            <section class="section" id="i-sqrt-1">
             <h1>i (sqrt(-1))<a class="headerlink" href="#i-sqrt-1" data-bs-toggle="modal" data-bs-target="#linkReferenceModal"  title="Reference this headline">¶</a></h1>
 
             <p>Irreal: orphan</p>
     </section>
 
 
-<section class="section" id="pi">
+        </article>
+<article>
+            <section class="section" id="pi">
             <h1>Pi<a class="headerlink" href="#pi" data-bs-toggle="modal" data-bs-target="#linkReferenceModal"  title="Reference this headline">¶</a></h1>
 
             <p>Irrational: Orphan</p>
     </section>
 
 
+        </article>
 <!-- content end -->
diff --git a/tests/Integration/tests/singlepage/expected/singlehtml/Index.html b/tests/Integration/tests/singlepage/expected/singlehtml/Index.html
@@ -1,16 +1,20 @@
 <!-- content start -->
-    <section class="section" id="root-index">
+    <article>
+            <section class="section" id="root-index">
             <h1>Root index<a class="headerlink" href="#root-index" data-bs-toggle="modal" data-bs-target="#linkReferenceModal"  title="Reference this headline">¶</a></h1>
 
             <p>Lorem Ipsum Dolor. <a href="https://typ03.org">index</a></p>
     </section>
 
 
-<section class="section" id="sub-index">
+        </article>
+<article>
+            <section class="section" id="sub-index">
             <h1>Sub index<a class="headerlink" href="#sub-index" data-bs-toggle="modal" data-bs-target="#linkReferenceModal"  title="Reference this headline">¶</a></h1>
 
             <p>Lorem Ipsum Dolor. <a href="https://typ03.org">index</a></p>
     </section>
 
 
+        </article>
 <!-- content end -->