Add the table of contents to the frontend

hydephp · Apr 19, 2022 · f728810 · f728810
1 parent 51ac009
commit f728810
Show file tree

Hide file tree

Showing 5 changed files with 216 additions and 5 deletions.
diff --git a/resources/frontend/hyde.css b/resources/frontend/hyde.css
diff --git a/resources/frontend/hyde.scss b/resources/frontend/hyde.scss
@@ -29,20 +29,45 @@
 
 #sidebar-navigation {
 	li.list-item-active {
-		a {
+		a.link-active {
 			border-left: 4px solid #5956eb;
 			padding-left: calc(1rem - 4px);
 			margin-left: -1rem;
 			padding-top: 0.25rem;
 			padding-bottom: 0.25rem;
 			color: #5956eb;
+			font-weight: 500;
+			background: rgba(0, 0, 0, 0.1);
+			display: inline-block;
+			width: 100%;
+		}
+	}
+
+	.table-of-contents {
+		margin-top: 0.25rem;
+		font-size: 90%;
+		ul {
+			margin-top: 0.25rem;
+			margin-bottom: 0.25rem;
+		}
+		li {
+			margin-top: 0.25rem;
+			margin-bottom: 0.25rem;
+			margin-left: 1.5ch;
+			a {
+				opacity: 0.9;
+				&:hover {
+					opacity: 1;
+				}
+			}
 		}
 	}
 }
 
 .dark {
-	#sidebar-navigation li.list-item-active a {
+	#sidebar-navigation li.list-item-active a.link-active {
 		color: #fff;
+		font-weight: 400;
 	}
 }
 

diff --git a/resources/views/components/docs/sidebar.blade.php b/resources/views/components/docs/sidebar.blade.php
@@ -8,7 +8,11 @@
 					'list-item-active' => $item['active']
 				])>
 				@if($item['active'])
-					<a href="{{ $item['slug'] }}.html" aria-current="true" class="text-indigo-500">{{ $item['title'] }}</a>
+					<a href="{{ $item['slug'] }}.html" aria-current="true" class="link-active text-indigo-500">{{ $item['title'] }}</a>
+
+					@if($docs->tableOfContents)
+						{!! ($docs->tableOfContents) !!}
+					@endif
 				@else
 					<a href="{{ $item['slug'] }}.html" class="hover:text-indigo-500 dark:hover:text-indigo-400">{{ $item['title'] }}</a>
 				@endif

diff --git a/src/Models/HasTableOfContents.php b/src/Models/HasTableOfContents.php
@@ -15,6 +15,8 @@ trait HasTableOfContents
 
     public function constructTableOfContents(): void
     {
+        // @todo add feature to disable table of contents
+        // if Features::withTableOfContents
         $this->tableOfContents = (new GeneratesTableOfContents($this->body))->execute();
     }
 }
diff --git a/src/Services/MarkdownConverterService.php b/src/Services/MarkdownConverterService.php
@@ -5,6 +5,7 @@
 use Hyde\Framework\Features;
 use League\CommonMark\CommonMarkConverter;
 use League\CommonMark\Extension\GithubFlavoredMarkdownExtension;
+use League\CommonMark\Extension\HeadingPermalink\HeadingPermalinkExtension;
 use Torchlight\Commonmark\V2\TorchlightExtension;
 
 class MarkdownConverterService
@@ -22,9 +23,20 @@ public function __construct(string $markdown, ?bool $useTorchlight = null, ?bool
     {
         $this->markdown = $markdown;
 
-        $this->converter = new CommonMarkConverter();
+        $config = [
+            'heading_permalink' => [
+                'id_prefix' => '',
+                'fragment_prefix' => '',
+                'symbol' => '',
+            ],
+        ];
+
+        $this->converter = new CommonMarkConverter($config);
         $this->converter->getEnvironment()->addExtension(new GithubFlavoredMarkdownExtension());
 
+        // If TOC is enabled, add heading permalinks
+        $this->converter->getEnvironment()->addExtension(new HeadingPermalinkExtension());
+
         $this->useTorchlight = $useTorchlight ?? $this->determineIfTorchlightShouldBeEnabled();
     }