Merge pull request #1074 from ApiGen/navbar-and-search

Navbar and search
ApiGen · Jul 10, 2022 · a57cf8d · a57cf8d
2 parents 20d4ab8 + d0b3ff9
commit a57cf8d
Show file tree

Hide file tree

Showing 7 changed files with 341 additions and 7 deletions.
diff --git a/src/Renderer/Latte/LatteRenderer.php b/src/Renderer/Latte/LatteRenderer.php
@@ -20,6 +20,7 @@
 use Latte;
 use Nette\Utils\FileSystem;
 use Nette\Utils\Finder;
+use Nette\Utils\Json;
 use ReflectionClass;
 use SplFileInfo;
 use Symfony\Component\Console\Helper\ProgressBar;
@@ -39,6 +40,7 @@
 use function pcntl_wifexited;
 use function pcntl_wifsignaled;
 use function pcntl_wtermsig;
+use function sprintf;
 use function substr;
 
 use const PHP_SAPI;
@@ -68,6 +70,7 @@ public function render(ProgressBar $progressBar, Index $index): void
 
 		$tasks = [
 			[$this->copyAsset(...), $assets],
+			[$this->renderElementsJs(...), [null]],
 			[$this->renderIndex(...), [null]],
 			[$this->renderTree(...), [null]],
 			[$this->renderNamespace(...), $index->namespace],
@@ -89,6 +92,42 @@ protected function copyAsset(Index $index, ConfigParameters $config, SplFileInfo
 	}
 
 
+	protected function renderElementsJs(Index $index, ConfigParameters $config): void
+	{
+		$elements = [];
+
+		foreach ($index->namespace as $namespace) {
+			$elements['namespace'][] = [$namespace->name->full, $this->urlGenerator->getNamespaceUrl($namespace)];
+		}
+
+		foreach ($index->classLike as $classLike) {
+			$members = [];
+
+			foreach ($classLike->constants as $constant) {
+				$members['constant'][] = [$constant->name, $this->urlGenerator->getMemberAnchor($constant)];
+			}
+
+			foreach ($classLike->properties as $property) {
+				$members['property'][] = [$property->name, $this->urlGenerator->getMemberAnchor($property)];
+			}
+
+			foreach ($classLike->methods as $method) {
+				$members['method'][] = [$method->name, $this->urlGenerator->getMemberAnchor($method)];
+			}
+
+			$elements['classLike'][] = [$classLike->name->full, $this->urlGenerator->getClassLikeUrl($classLike), $members];
+		}
+
+		foreach ($index->function as $function) {
+			$elements['function'][] = [$function->name->full, $this->urlGenerator->getFunctionUrl($function)];
+		}
+
+		$js = sprintf('window.ApiGen?.resolveElements(%s)', Json::encode($elements));
+		$assetPath = $this->urlGenerator->getAssetPath('elements.js');
+		FileSystem::write("$this->outputDir/$assetPath", $js);
+	}
+
+
 	protected function renderIndex(Index $index, ConfigParameters $config): void
 	{
 		$this->renderTemplate($this->urlGenerator->getIndexPath(), new IndexTemplate(

diff --git a/src/Renderer/Latte/Template/assets/main.css b/src/Renderer/Latte/Template/assets/main.css
@@ -8,6 +8,7 @@
 	--color-link: #006aeb;
 	--color-selected: #fffbdd;
 	--border-color: #cccccc;
+	--background-color: #ecede5;
 }
 
 
@@ -142,7 +143,7 @@ code a b {
 .classLikeDescription {
 	margin-top: 1em;
 	border: 1px solid var(--border-color);
-	background-color: #ecede5;
+	background-color: var(--background-color);
 	padding: 10px;
 }
 
@@ -224,8 +225,6 @@ code a b {
 .layout {
 	display: flex;
 	flex-direction: row;
-	min-width: min(1400px, 100%);
-	max-width: fit-content;
 }
 
 .layout-aside {
@@ -236,6 +235,7 @@ code a b {
 	overflow-y: auto;
 	scrollbar-width: none;
 	background-color: white;
+	border-right: 1px solid var(--border-color);
 }
 
 .layout-aside::-webkit-scrollbar {
@@ -247,19 +247,30 @@ code a b {
 	flex: 1 1 0;
 	display: flex;
 	flex-direction: column;
-	margin-left: 320px;
-	margin-right: 10px;
+	min-width: calc(min(1300px, 100%) - 300px);
+	max-width: fit-content;
+	margin-left: 300px;
+	margin-right: 0;
 }
 
 .layout-content {
 	flex: 1 1 0;
+	padding: 0 20px;
 }
 
 .layout-footer {
 	margin: 20px auto;
+	padding: 0 20px;
 	color: #929292;
 }
 
+.layout-rest {
+	flex: 1 1 0;
+}
+
+.layout-rest > .navbar {
+	height: 40px;
+}
 
 /* menu */
 .menu {
@@ -299,6 +310,54 @@ code a b {
 }
 
 
+/* navbar */
+.navbar {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 10px 20px;
+	padding: 4px 8px 4px 8px;
+	border-bottom: 1px solid var(--border-color);
+	background-color: var(--background-color);
+	font-size: 14px;
+}
+
+.navbar-links {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
+	font-family: var(--font-family-heading);
+	font-weight: bold;
+}
+
+.navbar-links li.active {
+	background-color: var(--color-heading-dark);
+	color: white;
+}
+
+.navbar-links li > * {
+	display: block;
+	padding: 6px 6px;
+	line-height: 1;
+}
+
+.navbar-links li > a {
+	color: inherit;
+}
+
+.navbar-links li > span {
+	cursor: default;
+	color: #888;
+}
+
+.navbar-right {
+	flex: 0 1 300px;
+}
+
+
 /* php */
 .php-tag {
 	color: #ff0000;
@@ -328,6 +387,56 @@ code a b {
 }
 
 
+/* search */
+.search {
+	position: relative;
+}
+
+.search-input {
+	display: flex;
+	width: 100%;
+	border: 1px solid var(--border-color);
+	border-radius: 0;
+	padding: 6px;
+	outline: none;
+	font-family: inherit;
+	font-size: inherit;
+	line-height: 1;
+}
+
+.search-input:focus {
+	border-color: var(--color-heading-dark);
+}
+
+.search-results {
+	display: none;
+	position: absolute;
+	top: 30px;
+	width: fit-content;
+	min-width: 100%;
+	max-width: calc(100vw - 16px);
+	overflow: hidden;
+	background-color: white;
+	border: 1px solid #888;
+	z-index: 1;
+}
+
+.search:focus-within .search-results:not(:empty) {
+	display: block;
+}
+
+.search-results a {
+	display: block;
+	color: inherit;
+	padding: 0 8px;
+}
+
+.search-results li:hover, .search-results li.active {
+	background-color: var(--color-link);
+	color: white;
+}
+
+
 /* source */
 .source {
 	font-family: var(--font-family-code);
@@ -371,7 +480,7 @@ code a b {
 .table-heading {
 	border: 1px solid var(--border-color);
 	padding: 3px 5px;
-	background: #ecede5;
+	background: var(--background-color);
 	color: var(--color-heading-dark);
 	font-family: var(--font-family-heading);
 	font-size: 1.2em;
@@ -434,12 +543,17 @@ code a b {
 
 	.layout-aside {
 		position: static;
+		border-right: none;
 		width: auto;
 	}
 
+	.layout-rest {
+		display: none;
+	}
+
 	.layout-main {
-		margin-left: 10px;
 		min-width: 100%;
+		margin-left: 0;
 		flex-grow: 0;
 		order: -1;
 	}