analogjs / analog

The fullstack meta-framework for Angular. Powered by Vite and Nitro
https://analogjs.org
MIT License
2.57k stars 245 forks source link

Add Ability to Set the Browser's URL for a Content Post #488

Closed pjlamb12 closed 1 year ago

pjlamb12 commented 1 year ago

Which scope/s are relevant/related to the feature request?

content

Information

The path for a blog post in src/content/blog is the filename that comes after /blog. So, src/content/blog/2023-06-27-test.md generates a path of www.mysite.com/blog/2023-06-27-test.

However, I have an attribute in the frontmatter of my blog posts called custom_slug. I need that slug to be used for the path in the browser's URL. I was able to get that working, basically, but the file could not be found because the custom slug doesn't match the file path to any file.

Describe any alternatives/workarounds you're currently using

I created a branch to demo what I was thinking could work, but I'm not sure if it's correct. Here's a link to it:

https://github.com/pjlamb12/analog/commit/80e04b47949fa3942bd8326395f81587885483e6

The other option is to allow you to pass a parameter for the slug (in my case I passed custom_slug and it found the correct attribute) and then also a filename parameter so that the default slug can be passed and the file can be found.

I would be willing to submit a PR to fix this issue

pjlamb12 commented 1 year ago

I'm running into some errors serving the blog-app, though, so I can't test this. I ran nx serve blog-app, but get the following output:

https://app.warp.dev/block/euQyOFSbLGUxHiO6NlEJww

pjlamb12 commented 1 year ago

My demo change listed above most definitely does not work. I'm trying to figure out how to do this, but the problem is that the contentFiles that are injected into the injectContent function is a record where the key is the filename.

I'm gonna keep looking into options.

pjlamb12 commented 1 year ago

I think that in the provideContent method that's put in the providers array we would want to declare what the custom slug that will be used is, so that the contentFiles record can be created properly.

pjlamb12 commented 1 year ago

I figured it out! But I've run into a tiny issue I haven't figured out yet.

In the terminal, I see all the data being found as expected. This is the console.log of the post$.pipe():

image

But in the browser, it says this:

image

I'm not sure why it's working in the server part but not the browser. So I need to figure that out. But once that piece can be figured out, I think this feature will work.

Also, after adding the injection token for the custom slug attribute, the browser has an error because it says that token isn't exported, even though it is.

pjlamb12 commented 1 year ago

Here's the branch, and you can look at the most recent commit to see the changes I've made, and the issue I'm having.

https://github.com/pjlamb12/analog/tree/content-custom-slug-demo

pjlamb12 commented 1 year ago

I also just thought about how in the injectContent method we can use the injection token instead of making the user pass in thecustomSlugAttribute. When I worked on that file at first I didn't have the injection token.

pjlamb12 commented 1 year ago

It turns out that once I cleared the .vite folder in node_modules, the browser showed the content again. I will have a PR for this soon.