A public channel for the Angular community to come talk about Scully and JAMStack strategies in Angular.
I got somewhat scully working after last time but now I wanted to put the blog post content on another component, so I made the
:slug route match another component called BlogPostComponent
Whereas the BlogComponent will now list the blogs by title (which works)
However, after clicking on my only blog of the list, the page is redirected to BlogPostComponent but doesn't render its content inside scully-content tag
I ran
npm run build -> npm run scully -> npm run scully serve
So weird... any ideas what is happening?
What I changed: Put a styleUrls on my BlogPostComponent, which seems to be the possible cause of previous behaviour
I just found that in terms of code highlight Scully switched to prism? (https://scully.io/docs/learn/utilities/syntax-highlighting/prism-js/)
instead of internal highlight with highlightjs
I am going to include it on my personal blog, just need to look at docs when I get the time
Is there any schematic to setup PrismJS on Angular + Scully?
@SanderElias Hi, moving to prism.js from
highlight.js broke my java code highlighting, java is a supported lang , so i dont know why this code is getting fired from the markdown plugin?
highlight.js broke my java code highlighting, java is a supported lang , so i dont know why this code is getting fired from the markdown plugin?
highlight: (code, lang) => {
if (!Prism.languages[lang]) {
console.error(`Language '${lang}' is not available in Prism.js, ignoring syntax highlighting for this code block.`);
return code;
}
7 replies
I have some global data ( a menu API that is the same on all pages) that i would like to not request each time a page is visited. Is it possible to to create a plugin that makes the api requests and creates / updates each data.json with the data (via transferState) before visiting each route in the list with puppeteer.
It is possible to inject transferstate with route-plugins. So you can do what you want by wrapping all the route plugins you use in some custom router-plugin
3rth way is use the proccessRoute (or routeProccess) plugin, and add it to each and every route in there.
4rth way, use the 'preRender' function on each route to inject this data.
I'm having issues deploying to Netlify. The project runs perfectly on my local machine, and maybe takes a minute or two at most to build. But when I deploy to Netlify, the build just hangs. The Angular project successfully builds, and then Scully discovers the routes before no longer moving on. I'm setting the NODE_VERSION to 12 in the netlify.toml file as well, but that doesn't seem to have helped.
1 reply
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?
- When I load a page - a list is loaded and rendered.
- scully-routes.json starts to load and list of posts disappear
- When scully-routes.json finish loading - content is back again on a page
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>
If you have anything async in your app's boot path, you will get a visible flash. Transferstate is sync on boot.
@pjlamb12 We are looking into the netlify thing.
@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.