diff --git a/src/LinkDotNet.Blog.Web/App.razor b/src/LinkDotNet.Blog.Web/App.razor index 66a303d6..a39c1f20 100644 --- a/src/LinkDotNet.Blog.Web/App.razor +++ b/src/LinkDotNet.Blog.Web/App.razor @@ -19,6 +19,7 @@ + @@ -27,7 +28,7 @@ - + @@ -48,7 +49,17 @@ - + + diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/AboutMePage.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/AboutMePage.razor index cc580853..df78ea37 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/AboutMePage.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/AboutMePage.razor @@ -16,11 +16,11 @@ AbsolutePreviewImageUrl="@ImageUrl" />
-
-
+
+
-
+
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor index 6325c1dc..8ea1a5b7 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor @@ -4,24 +4,24 @@ -
+
-
+
- + If set, it's used before the skill (optional). 24x24 pixel optimal size.
-
+
-
+
- @foreach (var level in ProficiencyLevel.All.Select(l => l.Key)) { @@ -29,7 +29,7 @@
- + diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor index 047a0254..ce89bf86 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor @@ -4,12 +4,12 @@
@if (ShowAdminActions) { - }
-
+
diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor index fcac75b1..4460bbc5 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor @@ -1,30 +1,30 @@ @using LinkDotNet.Blog.Web.Features.AboutMe.Components.Skill @using LinkDotNet.Blog.Web.Features.AboutMe.Components.Talk -
-
    +
    +
    -
    -
    +
    -
    diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/AddTalkEntryDialog.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/AddTalkEntryDialog.razor index 3d9fd63d..b12212d6 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/AddTalkEntryDialog.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/AddTalkEntryDialog.razor @@ -4,28 +4,28 @@ -
    +
    -
    +
    - + The place / event where you held the presentation / talk.
    -
    +
    -
    +
    - + diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/TalkEntry.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/TalkEntry.razor index fb53dd54..0e03712f 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/TalkEntry.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/TalkEntry.razor @@ -3,9 +3,9 @@
  • -

    @Talk.PublishedDate.ToShortDateString()

    - @Talk.PresentationTitle -

    @Talk.Place

    +

    @Talk.PublishedDate.ToShortDateString()

    + @Talk.PresentationTitle +

    @Talk.Place

    @MarkdownConverter.ToMarkupString(Talk.Description)
    @@ -13,7 +13,7 @@
    @if (ShowAdminActions) { - } diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/Talks.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/Talks.razor index 4090f9da..808aa8ce 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/Talks.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/Talks.razor @@ -6,7 +6,7 @@ { @if (ShowAdminActions) { - } diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/AddTemplateDialog.razor b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/AddTemplateDialog.razor index 7521a397..13075847 100644 --- a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/AddTemplateDialog.razor +++ b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/AddTemplateDialog.razor @@ -6,8 +6,8 @@ @inject IJSRuntime JSRuntime -
    -
    +
    +
    @template.Name -
    @@ -42,15 +42,15 @@ @if (IsOverwriting) { -
    +
    Warning: A template with this name already exists. Saving will overwrite it.
    }
    -
    - - +
    + +
    diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor index 0914d07a..2124e52b 100644 --- a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor +++ b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor @@ -17,18 +17,18 @@ @Title -
    +
    -
    -

    @Title

    -
    - +
    +

    @Title

    +
    + @GetStatusText() @if (model.IsDirty) { - + Unsaved Changes } @@ -40,95 +40,85 @@ -
    -
    -
    -
    -
    Content
    +
    +
    +
    +
    +
    Content
    -
    +
    - +
    - +
    -
    - +
    + - +
    -
    -
    @@ -136,23 +126,23 @@
    -
    -
    -
    -
    Quick Actions
    +
    +
    +
    +
    Quick Actions
    -
    -
    -
    -
    Tags
    +
    +
    +
    Tags
    @@ -163,120 +153,118 @@ @bind-Value="model.Tags">
    - + Add relevant tags to improve content discoverability and SEO. Use specific, searchable terms that describe your content.
    -
    -
    -
    Publishing & Visibility
    +
    +
    +
    Publishing & Visibility
    -
    - - - - @(model.IsPublished ? "Visible to everyone" : "Only visible to you") - +
    +
    + +
    + + @(model.IsPublished ? "Visible to everyone" : "Only visible to you")
    - + -
    +
    + -
    @if (IsScheduled) { -
    +
    Will be published on @model.ScheduledPublishDate?.ToString("MMMM dd, yyyy 'at' HH:mm")
    } - +
    @if (BlogPost is not null && !IsScheduled) { -
    - - - - Update the post's publication date to now - +
    +
    + +
    + + Update the post's publication date to now
    }
    -
    -
    -
    Featured Image
    +
    +
    +
    Featured Image
    -
    +
    - +
    - +
    -
    +
    - +
    - +
    - + The fallback image ensures compatibility across all platforms. Use JPG or PNG format for maximum support when your primary image is WebP or AVIF.
    -
    -
    -
    Cache Management
    +
    +
    +
    Cache Management
    -
    - - - - Make this post visible immediately on the homepage - +
    +
    + +
    + + Make this post visible immediately on the homepage
    -
    +
    Enable this to make your post immediately visible on the homepage after publishing.
    @if (!string.IsNullOrEmpty(BlogPostId) && versionHistory.Count > 0) { -
    -
    -
    Version History
    - @versionHistory.Count +
    +
    +
    Version History
    + @versionHistory.Count
    @foreach (var v in versionHistory) { -
    -
    +
    +
    v@(v.VersionNumber)
    -
    @v.CreatedAt.ToString("MMM dd, yyyy HH:mm")
    -
    @v.Title
    +
    @v.CreatedAt.ToString("MMM dd, yyyy HH:mm")
    +
    @v.Title
    - - + +
    } diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor.css b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor.css deleted file mode 100644 index 35654bcb..00000000 --- a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor.css +++ /dev/null @@ -1,353 +0,0 @@ -/* ── IDE Workspace ──────────────────────────────────────────────── */ -.ide-workspace { - overflow-x: hidden; -} - -/* ── Top Bar ────────────────────────────────────────────────────── */ -.ide-topbar { - position: sticky; - top: 0; - z-index: 10; - height: 44px; - background-color: var(--bs-secondary-bg); - border-bottom: 1px solid var(--bs-border-color); - display: flex; - align-items: center; - padding: 0 1rem; - gap: 0.5rem; -} - -.ide-breadcrumb { - display: flex; - align-items: center; - gap: 0.375rem; - font-size: 0.8125rem; - overflow: hidden; - min-width: 0; -} - -.ide-breadcrumb-sep { - font-size: 0.625rem; - opacity: 0.4; - flex-shrink: 0; -} - -.ide-breadcrumb-current { - font-weight: 500; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 250px; - color: var(--bs-body-color); -} - -/* ── Status Pills ───────────────────────────────────────────────── */ -.ide-pill { - display: inline-flex; - align-items: center; - gap: 0.25rem; - font-size: 0.6875rem; - font-weight: 500; - padding: 0.2rem 0.625rem; - border-radius: 2rem; - border: 1px solid var(--bs-border-color); - background-color: var(--bs-body-bg); - color: var(--bs-secondary-color); - white-space: nowrap; - flex-shrink: 0; -} - -.ide-pill-dirty { - color: var(--bs-warning); - border-color: var(--bs-warning); - background-color: transparent; -} - -.ide-pill-publish { - color: var(--bs-success); - border-color: var(--bs-success); -} - -.ide-pill-editing { - color: var(--bs-info); - border-color: var(--bs-info); -} - -.ide-pill-scheduled { - color: var(--bs-warning); - border-color: var(--bs-warning); -} - -/* ── Main Two-Column Layout ─────────────────────────────────────── */ -.ide-layout { - display: flex; - align-items: flex-start; -} - -/* ── Editor Panel ───────────────────────────────────────────────── */ -.ide-editor-panel { - flex: 1; - min-width: 0; - border-right: 1px solid var(--bs-border-color); -} - -/* ── Title Section ──────────────────────────────────────────────── */ -.ide-title-section { - padding: 1.5rem 1.75rem 1.25rem; - border-bottom: 1px solid var(--bs-border-color); -} - -.ide-title-input { - display: block; - width: 100%; - background: transparent; - border: none; - border-bottom: 2px solid transparent; - font-size: 1.75rem; - font-weight: 700; - color: var(--bs-body-color); - padding: 0 0 0.25rem; - line-height: 1.2; - transition: border-color 0.15s ease; -} - -.ide-title-input:focus { - outline: none; - border-bottom-color: var(--bs-primary); -} - -.ide-title-input::placeholder { - color: var(--bs-secondary-color); - opacity: 0.35; - font-weight: 400; -} - -/* ── IDE Tab Bar ────────────────────────────────────────────────── */ -.ide-tabs { - display: flex; - background-color: var(--bs-secondary-bg); - border-bottom: 1px solid var(--bs-border-color); - overflow-x: auto; - scrollbar-width: none; -} - -.ide-tabs::-webkit-scrollbar { - display: none; -} - -.ide-tab { - display: inline-flex; - align-items: center; - gap: 0.4rem; - padding: 0.5rem 1.25rem; - border: none; - border-right: 1px solid var(--bs-border-color); - border-bottom: 2px solid transparent; - background: transparent; - color: var(--bs-secondary-color); - font-size: 0.8125rem; - font-family: 'JetBrains Mono', 'Fira Code', 'Menlo', 'Courier New', monospace; - cursor: pointer; - white-space: nowrap; - transition: background-color 0.1s ease, color 0.1s ease; -} - -.ide-tab:hover { - background-color: var(--bs-tertiary-bg); - color: var(--bs-body-color); -} - -.ide-tab-active { - background-color: var(--bs-body-bg) !important; - color: var(--bs-body-color) !important; - border-bottom-color: var(--bs-primary) !important; -} - -.ide-tab-icon { - opacity: 0.65; - font-size: 0.875rem; -} - -.ide-tab-badge { - font-size: 0.6875rem; - opacity: 0.5; - font-family: var(--bs-font-sans-serif); -} - -/* ── Editor Action Toolbar ──────────────────────────────────────── */ -.ide-editor-actions { - display: flex; - align-items: center; - gap: 0.25rem; - padding: 0.375rem 0.75rem; - background-color: var(--bs-secondary-bg); - border-bottom: 1px solid var(--bs-border-color); - flex-wrap: wrap; -} - -.ide-action-btn { - display: inline-flex; - align-items: center; - gap: 0.375rem; - padding: 0.25rem 0.625rem; - border: 1px solid transparent; - border-radius: 0.25rem; - background: transparent; - color: var(--bs-secondary-color); - font-size: 0.8125rem; - cursor: pointer; - transition: all 0.1s ease; - white-space: nowrap; -} - -.ide-action-btn:hover { - background-color: var(--bs-tertiary-bg); - border-color: var(--bs-border-color); - color: var(--bs-body-color); -} - -/* ── MarkdownTextArea integration ───────────────────────────────── */ -::deep .markdown-editor-container.ide-editor { - border-radius: 0; - border-left: none; - border-right: none; - border-bottom: none; - box-shadow: none; -} - -::deep .markdown-editor-container.ide-editor:focus-within { - outline: none; -} - -/* ── Validation Errors ──────────────────────────────────────────── */ -.ide-error { - display: block; - font-size: 0.75rem; - color: var(--bs-danger); - padding-top: 0.25rem; -} - -/* ── Settings Sidebar ───────────────────────────────────────────── */ -.ide-settings-sidebar { - width: 300px; - min-width: 300px; - max-width: 300px; - background-color: var(--bs-secondary-bg); - border-left: 1px solid var(--bs-border-color); -} - -.ide-settings-section { - padding: 1rem 1.25rem; - border-bottom: 1px solid var(--bs-border-color); -} - -.ide-settings-label { - display: block; - font-size: 0.6875rem; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--bs-secondary-color); - margin-bottom: 0.875rem; -} - -/* ── Tag Chips ──────────────────────────────────────────────────── */ -.ide-tag-chip { - display: inline-flex; - align-items: center; - font-size: 0.6875rem; - padding: 0.125rem 0.5rem; - border-radius: 2rem; - background-color: var(--bs-tertiary-bg); - border: 1px solid var(--bs-border-color); - color: var(--bs-body-color); - margin: 0.125rem 0.125rem 0 0; -} - -/* ── Status Bar ─────────────────────────────────────────────────── */ -.ide-statusbar { - height: 28px; - background-color: var(--bs-primary); - color: rgba(255, 255, 255, 0.9); - font-size: 0.75rem; - display: flex; - align-items: center; -} - -.ide-statusbar-item { - display: inline-flex; - align-items: center; - height: 100%; - padding: 0 0.75rem; - opacity: 0.85; - cursor: default; - white-space: nowrap; - transition: background-color 0.1s, opacity 0.1s; -} - -.ide-statusbar-item:hover { - background-color: rgba(255, 255, 255, 0.15); - opacity: 1; -} - -.ide-statusbar-gap { - flex: 1; -} - -.ide-statusbar-save { - display: inline-flex; - align-items: center; - gap: 0.375rem; - height: calc(100% - 4px); - margin: 2px; - padding: 0 0.875rem; - border-radius: 0.25rem; - background-color: rgba(255, 255, 255, 0.2); - color: white; - border: 1px solid rgba(255, 255, 255, 0.3); - font-size: 0.75rem; - font-weight: 600; - cursor: pointer; - transition: background-color 0.1s; -} - -.ide-statusbar-save:hover:not(:disabled) { - background-color: rgba(255, 255, 255, 0.3); -} - -.ide-statusbar-save:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* ── Desktop: sticky sidebar ────────────────────────────────────── */ -@media (min-width: 992px) { - .ide-settings-sidebar { - position: sticky; - top: 44px; - max-height: calc(100svh - 44px); - overflow-y: auto; - align-self: flex-start; - } -} - -/* ── Mobile ─────────────────────────────────────────────────────── */ -@media (max-width: 991.98px) { - .ide-editor-panel { - border-right: none; - } - - .ide-title-section { - padding: 1rem 1rem 0.75rem; - } - - .ide-title-input { - font-size: 1.375rem; - } - - .ide-statusbar { - position: sticky; - bottom: 0; - z-index: 10; - } -} diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/ShortCodeDialog.razor b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/ShortCodeDialog.razor index e4b04d3b..9b029209 100644 --- a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/ShortCodeDialog.razor +++ b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/ShortCodeDialog.razor @@ -2,9 +2,9 @@ @inject IToastService ToastService @inject IJSRuntime JSRuntime -
    -
    -

    +

    +
    +

    Clicking on a shortcode, will put the shortcode into the clipboard. So you can paste it into the markdown editor. Currently it isn't possible to insert it directly into the editor at the cursor position.

    @@ -33,8 +33,8 @@
-
- +
+
diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/TagInput.razor b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/TagInput.razor index c69efb29..25561487 100644 --- a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/TagInput.razor +++ b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/TagInput.razor @@ -1,14 +1,14 @@ @using Microsoft.AspNetCore.Components.Web
-
-
+
+
@foreach (var tag in selectedTags) { - + @tag diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/VersionDiffDialog.razor b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/VersionDiffDialog.razor index 34cbdfce..29d07daa 100644 --- a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/VersionDiffDialog.razor +++ b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/VersionDiffDialog.razor @@ -6,152 +6,143 @@ @using System.Net @using System.Text -