diff --git a/docs/syntax/admonitions.md b/docs/syntax/admonitions.md index 703f43008..90438e123 100644 --- a/docs/syntax/admonitions.md +++ b/docs/syntax/admonitions.md @@ -7,82 +7,148 @@ Admonitions allow you to highlight important information with varying levels of Admonitions can span multiple lines and support inline formatting. Available admonition types include: -- Note -- Warning -- Tip -- Important -- Plain +- [Note](#note) +- [Warning](#warning) +- [Tip](#tip) +- [Important](#important) +- [Plain](#plain) ### Note A relevant piece of information with no serious repercussions if ignored. -```markdown + +:::::{tab-set} + +::::{tab-item} Output + :::{note} This is a note. It can span multiple lines and supports inline formatting. ::: -``` +:::: + +::::{tab-item} Markdown + +```markdown :::{note} This is a note. +It can span multiple lines and supports inline formatting. ::: +``` + +:::: + +::::: ### Warning You could permanently lose data or leak sensitive information. -```markdown +:::::{tab-set} + +::::{tab-item} Output + :::{warning} This is a warning. ::: -``` +:::: + +::::{tab-item} Markdown + +```markdown :::{warning} This is a warning. ::: +``` + +:::: + +::::: ### Tip Advice to help users make better choices when using a feature. -```markdown +You could permanently lose data or leak sensitive information. + +:::::{tab-set} + +::::{tab-item} Output + :::{tip} This is a tip. ::: -``` +:::: + +::::{tab-item} Markdown + +```markdown :::{tip} This is a tip. ::: +``` + +:::: + +::::: ### Important Ignoring this information could impact performance or the stability of your system. -```markdown +:::::{tab-set} + +::::{tab-item} Output + :::{important} This is an important notice. ::: -``` +:::: + +::::{tab-item} Markdown + +```markdown :::{important} This is an important notice. ::: +``` + +:::: + +::::: ### Plain A plain admonition is a callout with no further styling. Useful to create a callout that does not quite fit the mold of the stylized admonitions. -```markdown + + +:::::{tab-set} + +::::{tab-item} Output + :::{admonition} This is my callout It can *span* multiple lines and supports inline formatting. ::: -``` +:::: + +::::{tab-item} Markdown + +```markdown :::{admonition} This is my callout It can *span* multiple lines and supports inline formatting. ::: +``` + +:::: + +::::: ## Collapsible admonitions @@ -92,7 +158,10 @@ Collapsible admonitions are deprecated. Do not use them. Use [dropdowns](./dropd Use `:open: ` to make an admonition collapsible. -```markdown +:::::{tab-set} + +::::{tab-item} Output + :::{note} :open: @@ -100,8 +169,13 @@ Longer content can be collapsed to take less space. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ::: -``` + +:::: + +::::{tab-item} Markdown + +```markdown :::{note} :open: @@ -109,3 +183,8 @@ Longer content can be collapsed to take less space. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ::: +``` + +:::: + +::::: diff --git a/src/Elastic.Markdown/Assets/markdown/admonition.css b/src/Elastic.Markdown/Assets/markdown/admonition.css new file mode 100644 index 000000000..1a9bc5697 --- /dev/null +++ b/src/Elastic.Markdown/Assets/markdown/admonition.css @@ -0,0 +1,57 @@ +@layer components { + .admonition { + @apply mt-4 pb-4 rounded-sm border-1; + + .admonition-title { + @apply px-4 py-2 font-bold flex items-center gap-2 rounded-t-sm; + svg { + @apply size-6; + } + } + .admonition-content { + @apply px-4; + + & > *:first-child { + @apply mt-3!; + } + } + + &.note { + @apply border-blue-elastic-40 bg-blue-elastic-10; + .admonition-title { + @apply text-blue-elastic-90 bg-blue-elastic-20; + } + } + + &.tip { + @apply border-teal-40 bg-teal-10; + .admonition-title { + @apply text-teal-90 bg-teal-20; + } + } + + &.warning { + @apply border-yellow-40 bg-yellow-10; + + .admonition-title { + @apply text-yellow-90 bg-yellow-20; + } + } + + &.important { + @apply border-purple-40 bg-purple-10; + + .admonition-title { + @apply text-purple-90 bg-purple-20; + } + } + + &.plain { + @apply border-grey-40 bg-grey-10; + + .admonition-title { + @apply text-grey-90 bg-grey-20; + } + } + } +} diff --git a/src/Elastic.Markdown/Assets/markdown/code.css b/src/Elastic.Markdown/Assets/markdown/code.css index 14d9eed48..ce2241917 100644 --- a/src/Elastic.Markdown/Assets/markdown/code.css +++ b/src/Elastic.Markdown/Assets/markdown/code.css @@ -1,7 +1,5 @@ @layer components { .markdown-content { - - .highlight { @apply mt-4; } @@ -69,7 +67,7 @@ bg-gray-100 rounded-xs border-1 - border-gray-200 + border-gray-300 inline-block text-nowrap ; diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css index bbe7ed99c..7c237e978 100644 --- a/src/Elastic.Markdown/Assets/styles.css +++ b/src/Elastic.Markdown/Assets/styles.css @@ -7,6 +7,7 @@ @import "./markdown/tabs.css"; @import "./markdown/code.css"; @import "./copybutton.css"; +@import "./markdown/admonition.css"; #default-search::-webkit-search-cancel-button { padding-right: calc(var(--spacing) * 2); diff --git a/src/Elastic.Markdown/Assets/theme.css b/src/Elastic.Markdown/Assets/theme.css index cce351b2c..5d5c32124 100644 --- a/src/Elastic.Markdown/Assets/theme.css +++ b/src/Elastic.Markdown/Assets/theme.css @@ -16,32 +16,144 @@ --color-gray-light: #F5F7FA; --color-gray-dark: #D4DAE5; - --color-blue-elastic: #0B64DD; --color-blue-sky: #36B9FF; --color-blue-midnight: #20377D; --color-blue-developer: #101C3F; + + + --color-blue-elastic-10: #E8F1FF; + --color-blue-elastic-20: #D9E8FF; + --color-blue-elastic-30: #B8D4FF; + --color-blue-elastic-40: #A3CBFF; + --color-blue-elastic-50: #85B7FF; + --color-blue-elastic-60: #61A2FF; + --color-blue-elastic-70: #3788FF; + --color-blue-elastic-80: #2476F0; + --color-blue-elastic-90: #0B64DD; + --color-blue-elastic-100: #1750BA; + --color-blue-elastic-110: #154399; + --color-blue-elastic-120: #123778; + --color-blue-elastic-130: #0D2F5E; + --color-blue-elastic-140: #0A2342; + --color-blue-elastic: #0B64DD; /* == --color-blue-elastic-90 */ + + --color-pink-10: #FFEBF5; + --color-pink-20: #FDDDE9; + --color-pink-30: #FFC7DB; + --color-pink-40: #FBADCA; + --color-pink-50: #F58EB7; + --color-pink-60: #EE72A6; + --color-pink-70: #E54A91; + --color-pink-80: #D13680; + --color-pink-90: #BD1F70; + --color-pink-100: #A11262; + --color-pink-110: #801A54; + --color-pink-120: #5E1E47; + --color-pink-130: #481B3B; + --color-pink-140: #35172E; + --color-pink: #BD1F70; /* == --color-pink-90 */ + + --color-teal-10: #E2F9F7; + --color-teal-20: #C9F3F0; + --color-teal-30: #A6EDEA; + --color-teal-40: #77E5E0; + --color-teal-50: #51D6D2; + --color-teal-60: #16C5C0; + --color-teal-70: #00B0AA; + --color-teal-80: #009E99; + --color-teal-90: #008C88; + --color-teal-100: #047471; + --color-teal-110: #065B58; + --color-teal-120: #044949; + --color-teal-130: #023436; + --color-teal-140: #03282B; + --color-teal: #008C88; /* == --color-teal-90 */ - --color-red-light: #FB6363; - --color-red-dark: #D93333; - --color-green-light: #3CD278; - --color-green-dark: #148742; + --color-yellow-10: #FDF3D8; + --color-yellow-20: #FDE9B5; + --color-yellow-30: #FCD883; + --color-yellow-40: #FACB3D; + --color-yellow-50: #F5BC00; + --color-yellow-60: #EAAE01; + --color-yellow-70: #CA9601; + --color-yellow-80: #AD7E00; + --color-yellow-90: #966B03; + --color-yellow-100: #825803; + --color-yellow-110: #6A4906; + --color-yellow-120: #513910; + --color-yellow-130: #3D3014; + --color-yellow-140: #2C2721; + --color-yellow: #966B03; /* == --color-yellow-90 */ - --color-teal: #00BFB3; - --color-teal-light: #48EFCF; - --color-teal-dark: #00857F; - --color-poppy: #FA744E; - --color-poppy-light: #FF957D; - --color-poppy-dark: #E2543D; + --color-red-10: #FFE8E5; + --color-red-20: #FDDDD8; + --color-red-30: #FFC9C2; + --color-red-40: #FFB5AD; + --color-red-50: #FC9188; + --color-red-60: #F6726A; + --color-red-70: #EE4C48; + --color-red-80: #DA3737; + --color-red-90: #C61E25; + --color-red-100: #A71627; + --color-red-110: #7F1F27; + --color-red-120: #5E2129; + --color-red-130: #491D27; + --color-red-140: #351721; + --color-red: #C61E25; /* == --color-red-90 */ - --color-pink: #F04E98; - --color-pink-light: #F990C6; - --color-pink-dark: #DD0A73; + --color-green-10: #E2F8F0; + --color-green-20: #C9F3E3; + --color-green-30: #AEE8D2; + --color-green-40: #88E3C3; + --color-green-50: #59CFAA; + --color-green-60: #24C292; + --color-green-70: #04AE7E; + --color-green-80: #00996B; + --color-green-90: #008A5E; + --color-green-100: #09724D; + --color-green-110: #0C5A3F; + --color-green-120: #094837; + --color-green-130: #0D362B; + --color-green-140: #092A26; + --color-green: #008A5E; /* == --color-green-90 */ - --color-yellow: #FEC514; - --color-yellow-light: #FFD836; - --color-yellow-dark: #F9B110; + --color-purple-10: #F3ECFE; + --color-purple-20: #ECE2FE; + --color-purple-30: #E2D3FE; + --color-purple-40: #D1BAFC; + --color-purple-50: #C5A5FA; + --color-purple-60: #B386F9; + --color-purple-70: #A36DEF; + --color-purple-80: #925CDA; + --color-purple-90: #8144CC; + --color-purple-100: #6B3C9F; + --color-purple-110: #52357E; + --color-purple-120: #3E2C63; + --color-purple-130: #322452; + --color-purple-140: #2A1E3E; + --color-purple: #8144CC; /* == --color-purple-90 */ + + + /* TODO: Add these colors also for "gray" (a) and replace current occurrences */ + --color-grey-10: #F6F9FC; + --color-grey-20: #E5E9F0; + --color-grey-30: #D0D4DA; + --color-grey-40: #BDC2CA; + --color-grey-50: #AAB0BA; + --color-grey-60: #989FAA; + --color-grey-70: #868E9A; + --color-grey-80: #767D89; + --color-grey-90: #666D78; + --color-grey-100: #555C67; + --color-grey-110: #464C56; + --color-grey-120: #373D45; + --color-grey-130: #292E34; + --color-grey-140: #1C1F24; + --color-grey: #666D78; /* == --color-grey-90 */ + + --spacing: 4px; } diff --git a/src/Elastic.Markdown/Slices/Directives/Admonition.cshtml b/src/Elastic.Markdown/Slices/Directives/Admonition.cshtml index ed70357a2..17c1c6539 100644 --- a/src/Elastic.Markdown/Slices/Directives/Admonition.cshtml +++ b/src/Elastic.Markdown/Slices/Directives/Admonition.cshtml @@ -1,5 +1,40 @@ @inherits RazorSlice
-

@Model.Title

- [CONTENT] +
+ + @{ + switch (Model.Directive) + { + case "tip": + + + + break; + case "warning": + + + + break; + case "note": + + + + break; + case "important": + + + + break; + default: + + + + break; + } + } + @Model.Title +
+
+ [CONTENT] +
diff --git a/tests/Elastic.Markdown.Tests/Directives/AdmonitionTests.cs b/tests/Elastic.Markdown.Tests/Directives/AdmonitionTests.cs index 72a96d544..c1aeb6525 100644 --- a/tests/Elastic.Markdown.Tests/Directives/AdmonitionTests.cs +++ b/tests/Elastic.Markdown.Tests/Directives/AdmonitionTests.cs @@ -98,115 +98,3 @@ A regular paragraph. [Fact] public void SetsDropdownOpen() => Block!.DropdownOpen.Should().BeTrue(); } - - -public class NestedDirectiveWithListTests(ITestOutputHelper output) : DirectiveTest(output, - """ - # heading - - :::::{note} - - - List Item 1 - ::::{note} - Hello, World! - :::: - - ## What - - ::::: - """ -) -{ - [Fact] - public void Render() => Html.Should().Contain(""" -
  • List Item 1 -
    -

    Note

    - Hello, World! -
    -
    • - """); -} - - -public class NestedDirectiveWithListTests2(ITestOutputHelper output) : DirectiveTest(output, - """ - # heading - - :::{note} - - - List Item 1 - :::{note} - Hello, World! - ::: - - ## What - - ::: - """ -) -{ - [Fact] - public void Render() => Html.Should().Contain(""" -
  • List Item 1 -
    -

    Note

    - Hello, World! -
    -
    • - """); -} - -public class NestedDirectiveWithListTests3(ITestOutputHelper output) : DirectiveTest(output, - """ - # heading - - :::{note} - - - List Item 1 - :::::{note} - Hello, World! - ::::: - - ## What - - ::: - """ -) -{ - [Fact] - public void Render() => Html.Should().Contain(""" -
  • List Item 1 -
    -

    Note

    - Hello, World! -
    -
    • - """); -} - - -public class DirectiveInList(ITestOutputHelper output) : DirectiveTest(output, - """ - # heading - - - List Item 1 - :::::{note} - Hello, World! - ::::: - """ -) -{ - [Fact] - public void Type() => Block!.Admonition.Should().Be("note"); - - [Fact] - public void Render() => Html.Should().Contain(""" -
  • List Item 1 -
    -

    Note

    - Hello, World! -
    -
    • - """); -} diff --git a/tests/authoring/Blocks/Admonitions.fs b/tests/authoring/Blocks/Admonitions.fs new file mode 100644 index 000000000..98e752942 --- /dev/null +++ b/tests/authoring/Blocks/Admonitions.fs @@ -0,0 +1,200 @@ +// Licensed to Elasticsearch B.V under one or more agreements. +// Elasticsearch B.V licenses this file to you under the Apache 2.0 License. +// See the LICENSE file in the project root for more information +module ``block elements``.``admonition elements`` + +open Xunit +open authoring + +type ``admonition in list`` () = + static let markdown = Setup.Markdown """ +- List Item 1 + :::::{note} + Hello, World! + ::::: +""" + + [] + let ``validate HTML`` () = + markdown |> convertsToHtml """ +
      +
    • List Item 1 +
      +
      + + + + Note +
      +
      + Hello, World! +
      +
      +
      • +
    + """ + [] + let ``has no errors`` () = markdown |> hasNoErrors + +type ``nested admonition in list`` () = + static let markdown = Setup.Markdown """ +:::{note} + +- List Item 1 + :::::{note} + Hello, World! + ::::: + +## What + +::: +""" + + [] + let ``validate HTML`` () = + markdown |> convertsToHtml """ +
    +
    + + + + Note +
    +
    +
      +
    • List Item 1 +
      +
      + + + + Note +
      +
      + Hello, World! +
      +
      +
      • +
    +
    +
    +
    +

    What +

    +
    + """ + [] + let ``has no errors`` () = markdown |> hasNoErrors + + +type ``nested admonition in list 2`` () = + static let markdown = Setup.Markdown """ +# heading + +:::{note} + +- List Item 1 + :::{note} + Hello, World! + ::: + +## What + +::: +""" + + [] + let ``validate HTML`` () = + markdown |> convertsToHtml """ +
    +

    heading +

    +
    +
    +
    + + + + Note +
    +
    +
      +
    • List Item 1 +
      +
      + + + + Note +
      +
      + Hello, World! +
      +
      +
      • +
    +
    +
    +
    +

    What +

    +
    + """ + [] + let ``has no errors`` () = markdown |> hasNoErrors + +type ``nested admonition in list 3`` () = + static let markdown = Setup.Markdown """ +# heading + +:::::{note} + +- List Item 1 + ::::{note} + Hello, World! + :::: + +## What + +::::: +""" + + [] + let ``validate HTML`` () = + markdown |> convertsToHtml """ +
    +

    heading +

    +
    +
    +
    + + + + Note +
    +
    +
      +
    • List Item 1 +
      +
      + + + + Note +
      +
      + Hello, World! +
      +
      +
      • +
    +
    +

    What +

    +
    +
    +
    + """ + [] + let ``has no errors`` () = markdown |> hasNoErrors diff --git a/tests/authoring/Blocks/Lists.fs b/tests/authoring/Blocks/Lists.fs index fbb73b663..6aa560e35 100644 --- a/tests/authoring/Blocks/Lists.fs +++ b/tests/authoring/Blocks/Lists.fs @@ -27,4 +27,3 @@ type ``supports loose lists`` () = """ - diff --git a/tests/authoring/Container/DefinitionLists.fs b/tests/authoring/Container/DefinitionLists.fs index c03c06a9a..2b4116301 100644 --- a/tests/authoring/Container/DefinitionLists.fs +++ b/tests/authoring/Container/DefinitionLists.fs @@ -44,16 +44,28 @@ This is my `definition` [] let ``validate HTML 2`` () = markdown |> convertsToHtml """ -
    -
    This is my definition
    -
    -

    And this is the definition body
    - Which may contain multiple lines

    -
    -

    Note

    -

    My note

    -
    -
    +
    +
    This is my + definition +
    +
    +

    And this is the definition + body +
    + Which may contain multiple lines +

    +
    +
    + + + + Note +
    +
    +

    My note

    +
    +
    +
    """ [] diff --git a/tests/authoring/authoring.fsproj b/tests/authoring/authoring.fsproj index 6cfe75fcf..6e05e70db 100644 --- a/tests/authoring/authoring.fsproj +++ b/tests/authoring/authoring.fsproj @@ -57,6 +57,7 @@ +