feat: pluginify blog

[deer]

@iuioiua, check it out. Converting it to a plugin is pretty straightforward. There's just this module resolution issue that I need to resolve. You can see the damage here, where I had to do this:

- import Head from "@/components/Head.tsx";
- import Share from "@/components/Share.tsx";
+ import Head from "../../../components/Head.tsx";
+ import Share from "../../../components/Share.tsx";

[deer]

This is much more pleasing now that I got root imports working.

[iuioiua]

Looking good! I made a couple of simplifications. What if we had a plugins/blog folder containing as much blog code as possible? We could measure it as a success if one simply deleted that folder and made minimal code changes to remove blog functionality altogether. Can you give that a try?

[deer]

1. Why did you switch to relative paths? It seems like most (all?) other imports make use of @/.
2. Do you mean moving things like posts.ts over as well? Although that's actually the only blog related file I could find.

[iuioiua]

1. If files are reasonably close to each other and are likely to stay in the same relative locations to each other, I think it's better to use relative paths. Just a bit easier to picture where things are relative to each other. Root imports work well when files aren't tightly related.
2. Yeah, I think posts.ts might be the only file needed. I'll have a second look when I can.

[iuioiua]

LGTM! I like this. Now let's see about that upstream PR.

[iuioiua]

It's not a blocker, but I observed that Tailwind styling appeared to break when I used projectLocation: Deno.cwd(). It must have something to do with the omission of file:// at the start of the string.

[iuioiua]

I might merge this PR once the upstream Fresh PR LGTM is so as not to be blocked by further reviews.

[deer]

This doesn't actually work if someone else tries to use it outside of saaskit, which is the point of doing this 😅

I'm trying to import this mod.ts and I'm getting errors like:

Watcher File change detected! Restarting!
error: Module not found "file:///Users/reed/code/deer/testproject/components/Head.tsx".
    at file:///Users/reed/code/denoland/saaskit/plugins/blog/routes/blog/[slug].tsx:5:18
Watcher Process failed. Restarting on file change...

The specifier import Head from "@/components/Head.tsx"; from [slug].tsx is getting interpreted with my import map in my testproject.

Is there a way to stop this? Otherwise this seems to resolve it:

git diff
diff --git a/components/Head.tsx b/components/Head.tsx
index b624b09..5bb89cb 100644
--- a/components/Head.tsx
+++ b/components/Head.tsx
@@ -1,7 +1,7 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
 import { Head as _Head } from "$fresh/runtime.ts";
 import Meta, { type MetaProps } from "./Meta.tsx";
-import { SITE_DESCRIPTION, SITE_NAME } from "@/utils/constants.ts";
+import { SITE_DESCRIPTION, SITE_NAME } from "../utils/constants.ts";
 import { ComponentChildren } from "preact";

 export type HeadProps =
diff --git a/plugins/blog/mod.ts b/plugins/blog/mod.ts
index 18fdcad..17b9ff6 100644
--- a/plugins/blog/mod.ts
+++ b/plugins/blog/mod.ts
@@ -6,6 +6,8 @@ import Feed from "./routes/feed.ts";
 import { toFileUrl } from "std/path/to_file_url.ts";

 export function blog() {
   return {
     name: "blog",
     routes: [{
diff --git a/plugins/blog/routes/blog/[slug].tsx b/plugins/blog/routes/blog/[slug].tsx
index a910076..75ccf7a 100644
--- a/plugins/blog/routes/blog/[slug].tsx
+++ b/plugins/blog/routes/blog/[slug].tsx
@@ -2,8 +2,8 @@
 import { defineRoute } from "$fresh/server.ts";
 import { CSS, render } from "$gfm";
 import { getPost } from "../../utils/posts.ts";
-import Head from "@/components/Head.tsx";
-import Share from "@/components/Share.tsx";
+import Head from "../../../../components/Head.tsx";
+import Share from "../../../../components/Share.tsx";

 export default defineRoute(async (_req, ctx) => {
   const post = await getPost(ctx.params.slug);
diff --git a/plugins/blog/routes/blog/index.tsx b/plugins/blog/routes/blog/index.tsx
index 9bb1f3d..7dc7b18 100644
--- a/plugins/blog/routes/blog/index.tsx
+++ b/plugins/blog/routes/blog/index.tsx
@@ -1,7 +1,7 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
 import { defineRoute } from "$fresh/server.ts";
 import { getPosts, type Post } from "../../utils/posts.ts";
-import Head from "@/components/Head.tsx";
+import Head from "../../../../components/Head.tsx";

 function PostCard(props: Post) {
   return (
diff --git a/plugins/blog/routes/feed.ts b/plugins/blog/routes/feed.ts
index 7d19800..d7776a3 100644
--- a/plugins/blog/routes/feed.ts
+++ b/plugins/blog/routes/feed.ts
@@ -1,7 +1,7 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
 import { Feed } from "feed";
 import { getPosts } from "../utils/posts.ts";
-import { SITE_NAME } from "@/utils/constants.ts";
+import { SITE_NAME } from "../../../utils/constants.ts";
 import { defineRoute } from "$fresh/server.ts";

 const copyright = `Copyright ${new Date().getFullYear()} ${SITE_NAME}`;

Additionally I needed to add the following to my import map:

    "std/": "https://deno.land/std@0.207.0/",
    "tabler_icons_tsx/": "https://deno.land/x/tabler_icons_tsx@0.0.4/tsx/",
    "$gfm": "https://deno.land/x/gfm@0.5.0/mod.ts",
    "feed": "npm:/feed@4.2.2",

If we're serious about this, then we need to take major steps to convert saaskit from an app to a framework. No more using import maps, but rather a deps.ts file. I think this also means no more @/ imports. Otherwise we'll push the work to the users.

[deer]

Additionally the styling of the blog is horrible, because there's no _app (at least in my project). So perhaps that should be the next plugin.

Or maybe we need a SaaSKitPlugin with a SaaSKitOptions bag. And then I could use it like this:

export default defineConfig({
  plugins: [
    tailwind(),
    ga4Plugin() as Plugin,
    saaskit({
      routes: {
        blog: true,
        feed: true,
        app: true,
        400: true,
        500: true,
      },
    }),
  ],
});

I would hesitate about merging this until we have another think about how this will work going forward.

[iuioiua]

@deer, I've made a few tweaks to address your previous concerns. A couple of flaws should still be addressed, like using the <Head /> component, which exists outside of the plugin. Nevertheless, let's merge this PR as a first pass. Doing so allows us to test the upstream Fresh feature and provide better backing for adding it to Fresh itself. WDYT?

[deer]

Hey @iuioiua, I've addressed your concern about the pinned version and I've flagged this as ready.

[iuioiua]

Awesome! Just one more nit on the upstream PR. I've also pinged Marvin. Hopefully, we land this soon.

[deer]

@iuioiua, I've updated the pinned version to reference the most recent commit in the PR. This includes preact 10.19.6 and some other fixes from main.

More importantly it removes the offending upNLevels function. I've additionally updated the plugin here to match the pattern you specified in the PR. This has the benefit that the plugin is no longer dependent on cwd.

Please let me know if there's anything else to do here.

[iuioiua]

Merging now as I think it's ready for the first pass. Let's iterate from here. Thank you very much, @deer and apologies for this taking so long.