A public channel for the Angular community to come talk about Scully and JAMStack strategies in Angular.
Hello. I have a strange and annoying post list disappearing on my home page where I list all blog posts.
Can someone explain why I have such behavior and how to fix it?
in a component i have
$blogPosts = this.scully.available$.pipe(
map((routes) =>
routes.filter(
(route) =>
route.route.startsWith('/blog/') && route.sourceFile.endsWith('.md')
)
)
);
in a template i have
<div *ngFor="let post of $blogPosts | async">
<div class="uk-card uk-card-default uk-card-hover uk-card-small" routerLink="/blog/{{post.slug}}">
<div class="uk-card-media-top">
<img src={{post.thumbnail}} alt="">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">{{post.title}}</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
@SanderElias I fixed my issue thanks to your suggestion.
used this code instead of simple get data observable:
this.blogPosts$ = this.transferStateService.useScullyTransferState(
'allPosts',
this.scully.available$.pipe(
map((routes) =>
routes.filter(
(route) =>
route.route.startsWith('/blog/') &&
route.sourceFile.endsWith('.md')
)
)
)
);
BTW useScullyTransferState is not included and described in the official documentation,
I would suggest to add it there as well as a few examples of how to use it for async operations.
path/page#fragment
I get the correct static page displayed. However, it redirects to path/page/#fragment
so when Angular loads there seems to be an issue with displaying the page. Was this feature intentional and is there a way to stop it redirecting / modifying the path with the additional /
at the end?
enabled
. The plugin genertes the links in the list like this one: <li><a href="/blog/2020-08-my-development-setup/#graphics">Graphics</a></li>
. But when performing a click on the link, neither the URL is changed nor the screen scrolls to the anker. So it seems that the Angular router is blocking the native behaviour and ignors the click on the link. When I disable Angular completely using the scully-plugin-disable-angular, the toc ankers are working burt that's not what I want. Any Ideas / hints how to solve this problem? PS: for investigation here is my personal blog repo that can be used for fork / play / investigation: https://github.com/d-koppenhagen/d-koppenhagen.de
scully-plugin-mermaid
that catches markdown code blocks defined as language mermaid
. It will convert this into SVG graphs, charts etc. (see https://github.com/mermaid-js/mermaid). Package can be found here: https://www.npmjs.com/package/scully-plugin-mermaid