rework how images are displayed (#178)

MyNihongo · May 27, 2023 · 320b120 · 320b120
1 parent 9be3e2b
commit 320b120
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 9 deletions.
diff --git a/.github/workflows/ci-build.yml b/.github/workflows/ci-build.yml
@@ -48,6 +48,10 @@ jobs:
     - name: Build
       run: dotnet build -c ${{ env.Configuration }} -v m --no-restore
 
+    - name: Build samples
+      run: dotnet build -c ${{ env.Configuration }} -v m
+      working-directory: samples
+
     - name: Run tests
       run: dotnet test -c ${{ env.Configuration }} -v m --no-restore --no-build
 

diff --git a/samples/MudBlazor.Markdown.Core/sample.md b/samples/MudBlazor.Markdown.Core/sample.md
@@ -67,4 +67,7 @@ fun main(args : Array<String>) {
   <summary markdown="span">Release 1.0.1</summary>
 **New**
 -  Error fixes.
-</details>
+</details>
+
+#### Large image
+![Sample](https://wallpapers.com/images/featured/qbc6mlnwowjbszld.jpg "Sample")
diff --git a/src/MudBlazor.Markdown/MudBlazor.Markdown.csproj b/src/MudBlazor.Markdown/MudBlazor.Markdown.csproj
@@ -5,7 +5,7 @@
 		<Nullable>enable</Nullable>
 		<ImplicitUsings>enable</ImplicitUsings>
 		<RootNamespace>MudBlazor</RootNamespace>
-		<Version>0.1.0</Version>
+		<Version>0.1.1</Version>
 		<Authors>MyNihongo</Authors>
 		<Description>Markdown component for MudBlazor (https://mudblazor.com/)</Description>
 		<Copyright>Copyright © 2023 MyNihongo</Copyright>

diff --git a/src/MudBlazor.Markdown/MudMarkdown.razor.cs b/src/MudBlazor.Markdown/MudMarkdown.razor.cs
@@ -266,10 +266,12 @@ private void RenderInlines(ContainerInline inlines, RenderTreeBuilder builder)
 								.OfType<LiteralInline>()
 								.Select(static x => x.Content);
 
-							builder.OpenElement(_elementIndex++, "img");
-							builder.AddAttribute(_elementIndex++, "src", url);
-							builder.AddAttribute(_elementIndex++, "alt", string.Join(null, alt));
-							builder.CloseElement();
+							builder.OpenComponent<MudImage>(_elementIndex++);
+							builder.AddAttribute(_elementIndex++, nameof(MudImage.Class), "rounded-lg");
+							builder.AddAttribute(_elementIndex++, nameof(MudImage.Src), url);
+							builder.AddAttribute(_elementIndex++, nameof(MudImage.Alt), string.Join(null, alt));
+							builder.AddAttribute(_elementIndex++, nameof(MudImage.Elevation), 25);
+							builder.CloseComponent();
 						}
 						else if (LinkCommand == null)
 						{

diff --git a/src/MudBlazor.Markdown/Resources/MudBlazor.Markdown.css b/src/MudBlazor.Markdown/Resources/MudBlazor.Markdown.css
@@ -99,3 +99,8 @@ pre code.hljs {
 .mud-markdown-body li p, .mud-markdown-body .mud-expand-panel p {
 	margin-bottom: 0 !important;
 }
+
+/* Images */
+.mud-markdown-body img {
+	max-width: 100%;
+}
diff --git a/tests/MudBlazor.Markdown.Tests/MarkdownComponentTests/MarkdownComponentLinksShould.cs b/tests/MudBlazor.Markdown.Tests/MarkdownComponentTests/MarkdownComponentLinksShould.cs
@@ -101,7 +101,7 @@ public void OverrideImageLink()
 		const string expected =
 @"<article class='mud-markdown-body'>
 	<p class='mud-typography mud-typography-body1'>
-		<img src='overridden/tokyo/sky-tree.png' alt='img' />
+		<img src='overridden/tokyo/sky-tree.png' alt='img' class='mud-image object-fill object-center mud-elevation-25 rounded-lg'>
 	</p>
 </article>";
 

diff --git a/tests/MudBlazor.Markdown.Tests/MarkdownComponentTests/MarkdownComponentShould.cs b/tests/MudBlazor.Markdown.Tests/MarkdownComponentTests/MarkdownComponentShould.cs
@@ -172,7 +172,7 @@ public void RenderImage()
 		const string expectedResult =
 @"<article class='mud-markdown-body'>
 	<p class='mud-typography mud-typography-body1'>
-		<img src='extra/emw.png' alt='emw-banner' />
+		<img src='extra/emw.png' alt='emw-banner' class='mud-image object-fill object-center mud-elevation-25 rounded-lg'>
 	</p>
 </article>";
 
@@ -188,7 +188,7 @@ public void RenderImageLink()
 @"<article class='mud-markdown-body'>
 	<p class='mud-typography mud-typography-body1'>
 		<a rel='noopener noreferrer' href='https://www.google.co.jp/' target='_blank' class='mud-typography mud-link mud-primary-text mud-link-underline-hover mud-typography-body1'>
-			<img src='extra/emw.png' alt='emw-banner' />
+			<img src='extra/emw.png' alt='emw-banner' class='mud-image object-fill object-center mud-elevation-25 rounded-lg'>
 		</a>
 	</p>
 </article>";