Skip to content

Commit

Permalink
Improve blog posts
Browse files Browse the repository at this point in the history
  • Loading branch information
@mythz
mythz committed Oct 28, 2023
1 parent 4f954a9 commit f073837
Show file tree
Hide file tree
Showing 5 changed files with 31 additions and 8 deletions.
9 changes: 5 additions & 4 deletions MyApp/Components/Posts/Post.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
<div class="max-w-3xl mx-auto">
<div class="mb-6 text-lg text-gray-500">
<time datetime="@Blog.GetDateTimestamp(doc.Date)">@Blog.GetDateLabel(doc.Date)</time>
<span aria-hidden="true">&middot;</span>
<span class="px-1" aria-hidden="true">&middot;</span>
<span>@Blog.MinutesToRead(doc.WordCount) min read</span>
</div>
</div>
Expand Down Expand Up @@ -123,9 +123,10 @@
@foreach (var post in authorPosts)
{
<div>
@* links to other posts requires force load otherwise post Vue App doesn't load *@
<div class="flex flex-col overflow-hidden">
<div class="flex-shrink-0">
<a href="@Blog.GetPostLink(post)">
<a href="@Blog.GetPostLink(post)" data-enhance-nav="false">
<img class="h-48 w-full object-cover" src="@Blog.GetSplashImage(post)" alt="">
</a>
</div>
Expand All @@ -134,7 +135,7 @@
<p class="text-sm font-medium text-indigo-600 dark:text-indigo-300">
Article
</p>
<a href="@Blog.GetPostLink(post)" class="mt-2 block">
<a href="@Blog.GetPostLink(post)" class="mt-2 block" data-enhance-nav="false">
<p class="text-xl font-semibold text-gray-900 dark:text-gray-50 whitespace-nowrap overflow-hidden text-ellipsis" title="@post.Title">
@post.Title
</p>
Expand All @@ -161,7 +162,7 @@
</p>
<div class="flex space-x-1 text-sm text-gray-500">
<time datetime="@Blog.GetDateTimestamp(post.Date)">@Blog.GetDateLabel(post.Date)</time>
<span aria-hidden="true">&middot;</span>
<span class="px-1" aria-hidden="true">&middot;</span>
<span>@Blog.MinutesToRead(post.WordCount) min read</span>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion MyApp/Components/Posts/Year.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
<BlogPosts Posts=@Blog.GetPosts(year: ForYear) />

<div class="mt-8 text-center">
<a class="text-sm font-semibold hover:underline" href="@Blog.GetPosts(year:ForYear)">view all posts</a>
<a class="text-sm font-semibold hover:underline" href="@Blog.GetAllPostsLink()">view all posts</a>
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion MyApp/Components/Shared/BlogPosts.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
</p>
<div class="flex space-x-1 text-sm text-gray-500">
<time datetime="@Blog.GetDateTimestamp(post.Date)">@Blog.GetDateLabel(post.Date)</time>
<span aria-hidden="true">&middot;</span>
<span class="px-1" aria-hidden="true">&middot;</span>
<span>@Blog.MinutesToRead(post.WordCount) min read</span>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions MyApp/Pages/Blog.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@
</p>
<div class="flex space-x-1 text-sm text-gray-500">
<time datetime="@Posts.GetDateTimestamp(post.Date)">@Posts.GetDateLabel(post.Date)</time>
<span aria-hidden="true">&middot;</span>
<span class="px-1" aria-hidden="true">&middot;</span>
<span>@Posts.MinutesToRead(post.WordCount) min read</span>
</div>
</div>
Expand Down Expand Up @@ -136,7 +136,7 @@
</p>
<div class="flex space-x-1 text-sm text-gray-500">
<time datetime="@Posts.GetDateTimestamp(post.Date)">@Posts.GetDateLabel(post.Date)</time>
<span aria-hidden="true">&middot;</span>
<span class="px-1" aria-hidden="true">&middot;</span>
<span>@Posts.MinutesToRead(post.WordCount) min read</span>
</div>
</div>
Expand Down
22 changes: 22 additions & 0 deletions MyApp/wwwroot/mjs/app.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,12 @@ const CustomElements = [

const alreadyMounted = el => el.__vue_app__

function hasTemplate(el,component) {
return !!(el.firstElementChild
|| component.template
|| (component.setup && typeof component.setup({}, {}) == 'function'))
}

/** Mount Vue3 Component
* @param sel {string|Element} - Element or Selector where component should be mounted
* @param component
Expand All @@ -29,6 +35,15 @@ export function mount(sel, component, props) {
}
const el = $1(sel)
if (alreadyMounted(el)) return

if (!hasTemplate(el, component)) {
// Fallback for enhanced navigation clearing HTML DOM template of Vue App, requiring a force reload
// Avoid by disabling enhanced navigation to page, e.g. by adding data-enhance-nav="false" to element
console.warn('Vue Compontent template is missing, force reloading...', el, component)
blazorRefresh()
return
}

const app = createApp(component, props)
app.provide('client', client)
Object.keys(Components).forEach(name => {
Expand Down Expand Up @@ -85,6 +100,13 @@ const DefaultApp = {
}
}

function blazorRefresh() {
if (globalThis.Blazor)
globalThis.Blazor.navigateTo(location.pathname.substring(1), true)
else
globalThis.location.reload()
}

export function mountAll(opt) {
$$('[data-component]').forEach(el => {

Expand Down

0 comments on commit f073837

Please sign in to comment.