Skip to content

Commit 4c6173a

Browse files
reakaleekreakaleek
authored
Add layout system and NotFound layout (#676)
* Add layout system and NotFound layout * Assign location * Rename * Use kebab-case for enum values * Update docs/index.md
1 parent edce8c1 commit 4c6173a

File tree

15 files changed

+121
-52
lines changed

15 files changed

+121
-52
lines changed

‎docs/404.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
layout: not-found
3+
---
4+
# 404 - Page not found

‎docs/_docset.yml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ subs:
1111
eck: "Elastic Cloud on Kubernetes"
1212

1313
features:
14-
primary-nav: false
15-
landing-page: false
16-
14+
primary-nav: true
15+
1716
toc:
1817
- file: index.md
18+
- hidden: 404.md
1919
- hidden: developer-notes.md
2020
- folder: contribute
2121
children:

‎src/Elastic.Markdown/Assets/main.ts

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import {initHighlight} from "./hljs";
55
import {initTabs} from "./tabs";
66
import {initCopyButton} from "./copybutton";
77
import {initNav} from "./pages-nav";
8-
import {$$} from "select-dom"
8+
import {$, $$} from "select-dom"
9+
import htmx from "htmx.org";
910

1011
document.addEventListener('htmx:load', function() {
1112
initTocNav();
@@ -32,3 +33,16 @@ document.body.addEventListener('htmx:pushedIntoHistory', function(event) {
3233
navItem.classList.add('current');
3334
});
3435
});
36+
37+
document.body.addEventListener('htmx:responseError', function(event) {
38+
// event.preventDefault();
39+
40+
if (event.detail.xhr.status === 404) {
41+
window.location.assign(event.detail.pathInfo.requestPath);
42+
}
43+
44+
// const rootPath = $('body').dataset.rootPath;
45+
// window.history.pushState({ path: event.detail.pathInfo.requestPath }, '', event.detail.pathInfo.requestPath);
46+
// htmx.ajax('get', rootPath + 'not-found', { select: '#main-container', target: '#main-container' }).then(() => {
47+
// });
48+
});

‎src/Elastic.Markdown/Elastic.Markdown.csproj

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
<PackageReference Include="Slugify.Core" Version="4.0.1" />
6161
<PackageReference Include="Utf8StreamReader" Version="1.3.2"/>
6262
<PackageReference Include="Vecc.YamlDotNet.Analyzers.StaticGenerator" Version="16.1.3" />
63-
<PackageReference Include="YamlDotNet" Version="16.1.3" />
63+
<PackageReference Include="YamlDotNet" Version="16.3.0" />
6464
<PackageReference Include="System.IO.Abstractions" Version="21.0.29" />
6565
</ItemGroup>
6666

‎src/Elastic.Markdown/Helpers/Htmx.cs

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,9 @@ public static class Htmx
1111
{
1212
public static string GetHxSelectOob(FeatureFlags features, string? pathPrefix, string currentUrl, string targetUrl)
1313
{
14-
if (features.IsLandingPageEnabled)
15-
{
16-
var startIndex = pathPrefix?.Length ?? 0;
17-
if (currentUrl.Length < startIndex)
18-
throw new InvalidUrlException("Unexpected current URL", currentUrl, startIndex);
19-
if (currentUrl[startIndex..] == "/")
20-
return "#main-container,#primary-nav,#secondary-nav";
21-
}
14+
if (features.IsPrimaryNavEnabled && currentUrl == pathPrefix + "/")
15+
return "#main-container,#primary-nav,#secondary-nav";
16+
2217
var selectTargets = "#primary-nav,#secondary-nav,#content-container";
2318
if (!HasSameTopLevelGroup(pathPrefix, currentUrl, targetUrl) && features.IsPrimaryNavEnabled)
2419
selectTargets += ",#pages-nav";

‎src/Elastic.Markdown/Myst/FrontMatter/FrontMatterParser.cs

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,21 @@
22
// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
33
// See the LICENSE file in the project root for more information
44

5+
using System.Runtime.Serialization;
56
using YamlDotNet.Serialization;
67

78
namespace Elastic.Markdown.Myst.FrontMatter;
89

10+
public enum LayoutName
11+
{
12+
[EnumMember(Value = "landing-page")] LandingPage,
13+
[EnumMember(Value = "not-found")] NotFound
14+
}
15+
916
[YamlSerializable]
1017
public class YamlFrontMatter
1118
{
19+
1220
[YamlMember(Alias = "title")]
1321
public string? Title { get; set; }
1422

@@ -18,6 +26,9 @@ public class YamlFrontMatter
1826
[YamlMember(Alias = "sub")]
1927
public Dictionary<string, string>? Properties { get; set; }
2028

29+
[YamlMember(Alias = "layout")]
30+
public LayoutName? Layout { get; set; }
31+
2132
[YamlMember(Alias = "applies_to")]
2233
public ApplicableTo? AppliesTo { get; set; }
2334
}

‎src/Elastic.Markdown/Myst/YamlSerialization.cs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
using Elastic.Markdown.Myst.FrontMatter;
66
using Elastic.Markdown.Myst.Settings;
77
using YamlDotNet.Serialization;
8+
using YamlDotNet.Serialization.NamingConventions;
89

910
namespace Elastic.Markdown.Myst;
1011

@@ -16,6 +17,7 @@ public static T Deserialize<T>(string yaml)
1617

1718
var deserializer = new StaticDeserializerBuilder(new DocsBuilderYamlStaticContext())
1819
.IgnoreUnmatchedProperties()
20+
.WithEnumNamingConvention(HyphenatedNamingConvention.Instance)
1921
.WithTypeConverter(new SemVersionConverter())
2022
#pragma warning disable CS0618 // Type or member is obsolete
2123
.WithTypeConverter(new DeploymentConverter())
@@ -39,4 +41,3 @@ public static T Deserialize<T>(string yaml)
3941
[YamlSerializable(typeof(SettingMutability))]
4042

4143
public partial class DocsBuilderYamlStaticContext;
42-

‎src/Elastic.Markdown/Slices/HtmlWriter.cs

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,6 @@ public async Task<string> RenderLayout(MarkdownFile markdown, MarkdownDocument d
8484
var branch = DocumentationSet.Build.Git.Branch;
8585
var path = Path.Combine(DocumentationSet.RelativeSourcePath, markdown.RelativePath);
8686
var editUrl = $"https://github.com/elastic/{remote}/edit/{branch}/{path}";
87-
88-
8987
var slice = Index.Create(new IndexViewModel
9088
{
9189
Title = markdown.Title ?? "[TITLE NOT SET]",

‎src/Elastic.Markdown/Slices/Layout/_Head.cshtml

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<meta name="robots" content="@(Model.AllowIndexing ? "index, follow" : "noindex, nofollow")">
88
<meta name="htmx-config" content='{"scrollIntoViewOnBoost": false, "selfRequestsOnly": true}'>
9-
109
<meta property="og:type" content="website"/>
1110
<meta property="og:title" content="Elastic Docs v3"/>
1211
<meta name="twitter:card" content="summary"/>

‎src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
@inherits RazorSlice<LayoutViewModel>
2-
<div class="font-body text-ink">
2+
<div class="font-body text-ink relative">
3+
<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
4+
<div class="h-[2px] w-full overflow-hidden">
5+
<div class="progress w-full h-full bg-pink-70 left-right"></div>
6+
</div>
7+
<div class="sr-only">Loading</div>
8+
</div>
39
<section class="w-screen px-6 bg-grey-10 ">
410
<div class="container mx-auto py-16 grid lg:grid-cols-2 items-center gap-6">
511
<div class="lg:basis-[50%]">
@@ -71,7 +77,7 @@
7177
<div class="grid md:grid-cols-2 xl:grid-cols-3 gap-6 mt-6">
7278
<div class="grow rounded-xl border-1 border-grey-20 p-6">
7379
<div class="flex gap-6 h-full">
74-
<img alt="Search logo" src="@Model.Static("elasticsearch-logo-color-64px.svg")" class="size-9"/>
80+
<img loading="lazy" alt="Search logo" src="@Model.Static("elasticsearch-logo-color-64px.svg")" class="size-9"/>
7581
<div class="flex flex-col h-full">
7682
<p class="font-sans font-bold text-xl">Search</p>
7783
<p class="mt-2 grow">Build powerful search and RAG applications using Elasticsearch's vector database, AI toolkit, and advanced retrieval capabilities.</p>
@@ -84,7 +90,7 @@
8490
</div>
8591
<div class="grow rounded-xl border-1 border-grey-20 p-6">
8692
<div class="flex gap-6 h-full">
87-
<img alt="Observability logo" src="@Model.Static("observability-logo-color-64px.svg")" class="size-9"/>
93+
<img loading="lazy" alt="Observability logo" src="@Model.Static("observability-logo-color-64px.svg")" class="size-9"/>
8894
<div class="flex flex-col h-full">
8995
<p class="font-sans font-bold text-xl">Observability</p>
9096
<p class="mt-2 grow">Resolve problems with open, flexible, and unified observability powered by advanced machine learning and analytics.</p>
@@ -98,7 +104,7 @@
98104

99105
<div class="grow rounded-xl border-1 border-grey-20 p-6">
100106
<div class="flex gap-6 h-full">
101-
<img alt="Security logo" src="@Model.Static("security-logo-color-64px.svg")" class="size-9"/>
107+
<img loading="lazy" alt="Security logo" src="@Model.Static("security-logo-color-64px.svg")" class="size-9"/>
102108
<div class="flex flex-col h-full">
103109
<p class="font-sans font-bold text-xl">Security</p>
104110
<p class="mt-2 grow">Detect, investigate, and respond to threats with AI-driven security analytics to protect your organization at scale.</p>

0 commit comments

Comments
 (0)