A public channel for the Angular community to come talk about Scully and JAMStack strategies in Angular.
const extractState = (content: string): string | undefined => {
if (!content.includes(SCULLY_STATE_START)) {
return undefined;
}
try {
return JSON.parse(content.split(SCULLY_STATE_START)[1].split(SCULLY_STATE_END)[0]);
} catch {
return undefined;
}
};
const replaceState = (
html: string,
newSate: { [key: string]: any }
): string | undefined => {
if (!content.includes(SCULLY_STATE_START)) {
return undefined;
}
try {
const org = content.split(SCULLY_STATE_START)[1].split(SCULLY_STATE_END)[0];
const newString = JSON.stringify(newState);
return html.replace(org, newString);
} catch {
return html;
}
};
is perhaps even easier ;)
Hi all, I've started exploring scully and I was wondering how is possible to exclude a component from prerendering? Looking through the documentation the only reference that I can see its the following: https://scully.io/docs/Reference/plugins/community-plugins/regex/ is there something else that I could use?
in your App that is.
we have our own setup working on github Actions.
f you try to start the serve there (
npx run scully serve) there might be a more helpful error available
For instance, I'd like to load information for my about page from a markdown file. How can I do this without the :slug parameter?
To add to this, my goal would be to have a folder that contains different markdown files, each markdown file containing front-matter used for displaying data on the page. I would like to pull all markdown files using scully.available$ on a route without a slug. So if I have a /features route, I want to dynamically display however many features are listed in the /features content folder all on the same page, but I don't individual routes for them using the blog example of /features/:slug.
Here is the config file:
'/blog/:slug': {
type: 'contentFolder',
slug: {
folder: "./libs/shared/blog/blog"
}
},
'/features': {
type: 'contentFolder',
slug: {
folder: "./libs/shared/product-feature/features"
}
}
the function receives the handledRoute as a param, you you can even go as gradual as you like.
Oh, you need the
/:slug still in there tho!
ah, gotchha
that worked perfectly, thanks!
What would the strategy be for loading a single markdown file? For example, if I have an /about page that has front-matter that I need access to, should I do the same thing?.
Hi guys, I have been playing around with Scully for the past few weeks and I managed to get the whole website generated into static files. Everything works fine when I serve it using any HTTP server and disable JS in the browser. However, when I keep JS enabled, the website behaves like a normal SPA, does standard API requests on the fly, and so on. Is this intentional or am I missing something? Other SSGs use JS to enable instant content changes, nice transitions, etc. But the core functionality is still pre-generated. So I want to have that possibility with Scully too, but maybe this is not possible?
Hi @SanderElias, sorry to bug you again. However, this plugin is not performing as I would expect. I am attempting to use the plugin you built for #829 (mentioned above), and I am only seeing the scully-content, not any front-matter available in the scully route. Can you please let me know if I am doing something wrong?
registerPlugin('router', 'singleFilePlugin', async (route, config) => {
return [
{
route,
templateFile: join(scullyConfig.homeFolder, config.file),
postRenderers: ['contentFolder'],
},
];
});
export const config: ScullyConfig = {
projectRoot: "./apps/wsg-ext/src",
projectName: "wsg-ext",
outDir: './dist/wsg-ext',
defaultPostRenderers: postRenderers,
routes: {
'/': {
type: 'singleFilePlugin',
file: './libs/shared/wsg-external-home/content/content.md'
}
}
};export class SomeComponent {
content$ = this.scully.available$.pipe(
tap(console.log),
map(routes => routes.find(r => r.route === '/'))
);
constructor(private scully: ScullyRoutesService) { }
}
When I check the console to see the available routes, the route "/" has no front matter.
I will update it so it does what you need., or (if needed) create the PR that adds the eventually missing piece
Hi. Scully has been a god-send for SEO performance so far, but we're about to launch with it and I'm running into a key issue I can't seem to overcome in a clean way. We have a blog portion of our site where Scully works as expected.
We have an app portion of the site that we want Scully to ignore. So we use the "ignored" plugin for those routes. However, because it's ignored and doesn't appear in dist/static, you get a 404 when you try to access one of those routes directly. Is there a way to instruct Scully to ignore certain routes, and display a static page with fixed content while Angular is loading, then fallback to Angular routing when it's ready?
This is likely just a logical misunderstanding on my part. Thanks for the help!