feat: pluginify blog (#660)

@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:
```diff
- import Head from "@/components/Head.tsx";
- import Share from "@/components/Share.tsx";
+ import Head from "../../../components/Head.tsx";
+ import Share from "../../../components/Share.tsx";
```

---------

Co-authored-by: Asher Gomez <[email protected]>

deno.json

@@ -20,8 +20,7 @@
   "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
   "imports": {
     "@/": "./",
-    "$fresh/": "https://deno.land/x/[email protected]/",
-    "$gfm": "https://deno.land/x/[email protected]/mod.ts",
+    "$fresh/": "https://raw.githubusercontent.com/denoland/fresh/60220dd33b5b0f6b5c72927c933dbc32a3c4734e/",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",
     "preact-render-to-string": "https://esm.sh/*[email protected]",
@@ -30,9 +29,8 @@
     "tailwindcss": "npm:[email protected]",
     "tailwindcss/": "npm:/[email protected]/",
     "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
-    "std/": "https://deno.land/[email protected]/",
+    "$std/": "https://deno.land/[email protected]/",
     "stripe": "npm:/[email protected]",
-    "feed": "npm:/[email protected]",
     "kv_oauth/": "https://deno.land/x/[email protected]/",
     "tabler_icons_tsx/": "https://deno.land/x/[email protected]/tsx/",
     "fresh_charts/": "https://deno.land/x/[email protected]/"

e2e_test.ts

@@ -23,9 +23,9 @@ import {
   assertNotEquals,
   assertObjectMatch,
   assertStringIncludes,
-} from "std/assert/mod.ts";
-import { isRedirectStatus, STATUS_CODE } from "std/http/status.ts";
-import { resolvesNext, returnsNext, stub } from "std/testing/mock.ts";
+} from "$std/assert/mod.ts";
+import { isRedirectStatus, STATUS_CODE } from "$std/http/status.ts";
+import { resolvesNext, returnsNext, stub } from "$std/testing/mock.ts";
 import Stripe from "stripe";
 import options from "./fresh.config.ts";
 import { _internals } from "./plugins/kv_oauth.ts";

fresh.config.ts

@@ -7,6 +7,7 @@ import securityHeaders from "./plugins/security_headers.ts";
 import welcomePlugin from "./plugins/welcome.ts";
 import type { FreshConfig } from "$fresh/server.ts";
 import { ga4Plugin } from "https://deno.land/x/[email protected]/mod.ts";
+import { blog } from "./plugins/blog/mod.ts";
 
 export default {
   plugins: [
@@ -17,5 +18,6 @@ export default {
     tailwind(),
     errorHandling,
     securityHeaders,
+    blog(),
   ],
 } satisfies FreshConfig;

fresh.gen.ts

@@ -16,12 +16,9 @@ import * as $api_users_login_index from "./routes/api/users/[login]/index.ts";
 import * as $api_users_login_items from "./routes/api/users/[login]/items.ts";
 import * as $api_users_index from "./routes/api/users/index.ts";
 import * as $api_vote from "./routes/api/vote.ts";
-import * as $blog_slug_ from "./routes/blog/[slug].tsx";
-import * as $blog_index from "./routes/blog/index.tsx";
 import * as $dashboard_index from "./routes/dashboard/index.tsx";
 import * as $dashboard_stats from "./routes/dashboard/stats.tsx";
 import * as $dashboard_users from "./routes/dashboard/users.tsx";
-import * as $feed from "./routes/feed.ts";
 import * as $index from "./routes/index.tsx";
 import * as $pricing from "./routes/pricing.tsx";
 import * as $submit from "./routes/submit.tsx";
@@ -48,12 +45,9 @@ const manifest = {
     "./routes/api/users/[login]/items.ts": $api_users_login_items,
     "./routes/api/users/index.ts": $api_users_index,
     "./routes/api/vote.ts": $api_vote,
-    "./routes/blog/[slug].tsx": $blog_slug_,
-    "./routes/blog/index.tsx": $blog_index,
     "./routes/dashboard/index.tsx": $dashboard_index,
     "./routes/dashboard/stats.tsx": $dashboard_stats,
     "./routes/dashboard/users.tsx": $dashboard_users,
-    "./routes/feed.ts": $feed,
     "./routes/index.tsx": $index,
     "./routes/pricing.tsx": $pricing,
     "./routes/submit.tsx": $submit,

islands/ItemsList.tsx

@@ -4,7 +4,7 @@ import { useEffect } from "preact/hooks";
 import { type Item } from "@/utils/db.ts";
 import IconInfo from "tabler_icons_tsx/info-circle.tsx";
 import { fetchValues } from "@/utils/http.ts";
-import { decodeTime } from "std/ulid/mod.ts";
+import { decodeTime } from "$std/ulid/mod.ts";
 import { timeAgo } from "@/utils/display.ts";
 import GitHubAvatarImg from "@/components/GitHubAvatarImg.tsx";
 

plugins/blog/mod.ts

@@ -0,0 +1,24 @@
+// Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
+import type { Plugin } from "$fresh/server.ts";
+import BlogIndex from "./routes/blog/index.tsx";
+import BlogSlug from "./routes/blog/[slug].tsx";
+import Feed from "./routes/feed.ts";
+import { normalize } from "$std/url/normalize.ts";
+
+export function blog(): Plugin {
+  return {
+    name: "blog",
+    routes: [{
+      path: "/blog",
+      component: BlogIndex,
+    }, {
+      path: "/blog/[slug]",
+      component: BlogSlug,
+    }, {
+      path: "/feed",
+      component: Feed,
+    }],
+    location: import.meta.url,
+    projectLocation: normalize(import.meta.url + "../../../").href,
+  };
+}

routes/blog/[slug].tsx → plugins/blog/routes/blog/[slug].tsx

@@ -1,9 +1,9 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
 import { defineRoute } from "$fresh/server.ts";
-import { CSS, render } from "$gfm";
-import { getPost } from "@/utils/posts.ts";
+import { CSS, render } from "https://deno.land/x/gfm@0.2.5/mod.ts";
+import { getPost } from "../../utils/posts.ts";
 import Head from "@/components/Head.tsx";
-import Share from "@/components/Share.tsx";
+import Share from "../../components/Share.tsx";
 
 export default defineRoute(async (_req, ctx) => {
   const post = await getPost(ctx.params.slug);

routes/blog/index.tsx → plugins/blog/routes/blog/index.tsx

@@ -1,6 +1,6 @@
 // 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 { getPosts, type Post } from "../../utils/posts.ts";
 import Head from "@/components/Head.tsx";
 
 function PostCard(props: Post) {

routes/feed.ts → plugins/blog/routes/feed.ts

@@ -1,6 +1,6 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
-import { Feed } from "feed";
-import { getPosts } from "@/utils/posts.ts";
+import { Feed } from "npm:feed@4.2.2";
+import { getPosts } from "../utils/posts.ts";
 import { SITE_NAME } from "@/utils/constants.ts";
 import { defineRoute } from "$fresh/server.ts";
 

utils/posts.ts → plugins/blog/utils/posts.ts

@@ -1,6 +1,6 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
-import { extract } from "std/front_matter/yaml.ts";
-import { join } from "std/path/join.ts";
+import { extract } from "$std/front_matter/yaml.ts";
+import { join } from "$std/path/join.ts";
 
 /**
  * This code is based on the

utils/posts_test.ts → plugins/blog/utils/posts_test.ts

@@ -1,7 +1,7 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
 import { getPost, getPosts } from "./posts.ts";
 
-import { assert, assertEquals } from "std/assert/mod.ts";
+import { assert, assertEquals } from "$std/assert/mod.ts";
 
 Deno.test("[blog] getPost()", async () => {
   const post = await getPost("first-post");

plugins/error_handling.ts

@@ -2,7 +2,7 @@
 import type { Plugin } from "$fresh/server.ts";
 import type { State } from "@/plugins/session.ts";
 import { BadRequestError, redirect, UnauthorizedError } from "@/utils/http.ts";
-import { STATUS_CODE, STATUS_TEXT } from "std/http/status.ts";
+import { STATUS_CODE, STATUS_TEXT } from "$std/http/status.ts";
 
 /**
  * Returns the HTTP status code corresponding to a given runtime error. By

routes/api/stripe-webhooks.ts

@@ -1,6 +1,6 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
 import { type Handlers } from "$fresh/server.ts";
-import { STATUS_CODE } from "std/http/status.ts";
+import { STATUS_CODE } from "$std/http/status.ts";
 import { isStripeEnabled, stripe } from "@/utils/stripe.ts";
 import Stripe from "stripe";
 import { getUserByStripeCustomer, updateUser } from "@/utils/db.ts";

routes/api/vote.ts

@@ -1,6 +1,6 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
 import { type Handlers } from "$fresh/server.ts";
-import { STATUS_CODE } from "std/http/status.ts";
+import { STATUS_CODE } from "$std/http/status.ts";
 import type { SignedInState } from "@/plugins/session.ts";
 import { createVote } from "@/utils/db.ts";
 import { BadRequestError } from "@/utils/http.ts";

routes/submit.tsx

@@ -10,7 +10,7 @@ import {
   type SignedInState,
   State,
 } from "@/plugins/session.ts";
-import { ulid } from "std/ulid/mod.ts";
+import { ulid } from "$std/ulid/mod.ts";
 import IconInfo from "tabler_icons_tsx/info-circle.tsx";
 
 const SUBMIT_STYLES =

tasks/check_license.ts

@@ -1,8 +1,8 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
 // Copied from std/_tools/check_license.ts
 
-import { walk } from "std/fs/walk.ts";
-import { globToRegExp } from "std/path/glob_to_regexp.ts";
+import { walk } from "$std/fs/walk.ts";
+import { globToRegExp } from "$std/path/glob_to_regexp.ts";
 
 const EXTENSIONS = [".ts", ".tsx"];
 const EXCLUDED_DIRS = [

tasks/db_seed.ts

@@ -1,7 +1,7 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
 // Description: Seeds the kv db with Hacker News stories
 import { createItem, createUser } from "@/utils/db.ts";
-import { ulid } from "std/ulid/mod.ts";
+import { ulid } from "$std/ulid/mod.ts";
 
 // Reference: https://github.com/HackerNews/API
 const API_BASE_URL = `https://hacker-news.firebaseio.com/v0`;

utils/db.ts

@@ -1,5 +1,5 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
-import { ulid } from "std/ulid/mod.ts";
+import { ulid } from "$std/ulid/mod.ts";
 
 const DENO_KV_PATH_KEY = "DENO_KV_PATH";
 let path = undefined;
@@ -59,7 +59,7 @@ export function randomItem(): Item {
  * @example
  * ```ts
  * import { createItem } from "@/utils/db.ts";
- * import { ulid } from "std/ulid/mod.ts";
+ * import { ulid } from "$std/ulid/mod.ts";
  *
  * await createItem({
  *   id: ulid(),

utils/db_test.ts

@@ -1,6 +1,6 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
-import { assertEquals, assertRejects } from "std/assert/mod.ts";
-import { ulid } from "std/ulid/mod.ts";
+import { assertEquals, assertRejects } from "$std/assert/mod.ts";
+import { ulid } from "$std/ulid/mod.ts";
 import {
   collectValues,
   createItem,

utils/display.ts

@@ -1,5 +1,5 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
-import { difference } from "std/datetime/difference.ts";
+import { difference } from "$std/datetime/difference.ts";
 
 /**
  * Returns a pluralized string for the given amount and unit.
@@ -22,7 +22,7 @@ export function pluralize(amount: number, unit: string) {
  * @example
  * ```ts
  * import { timeAgo } from "@/utils/display.ts";
- * import { SECOND, MINUTE, HOUR } from "std/datetime/constants.ts";
+ * import { SECOND, MINUTE, HOUR } from "$std/datetime/constants.ts";
  *
  * timeAgo(new Date()); // Returns "just now"
  * timeAgo(new Date(Date.now() - 3 * HOUR)); // Returns "3 hours ago"

utils/display_test.ts

@@ -1,7 +1,7 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
 import { formatCurrency, pluralize, timeAgo } from "./display.ts";
-import { DAY, HOUR, MINUTE, SECOND } from "std/datetime/constants.ts";
-import { assertEquals, assertThrows } from "std/assert/mod.ts";
+import { DAY, HOUR, MINUTE, SECOND } from "$std/datetime/constants.ts";
+import { assertEquals, assertThrows } from "$std/assert/mod.ts";
 
 Deno.test("[display] pluralize()", () => {
   assertEquals(pluralize(0, "item"), "0 items");

utils/github_test.ts

@@ -1,9 +1,9 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
-import { assertRejects } from "std/assert/assert_rejects.ts";
+import { assertRejects } from "$std/assert/assert_rejects.ts";
 import { getGitHubUser } from "./github.ts";
-import { returnsNext, stub } from "std/testing/mock.ts";
-import { assertEquals } from "std/assert/assert_equals.ts";
-import { STATUS_CODE } from "std/http/status.ts";
+import { returnsNext, stub } from "$std/testing/mock.ts";
+import { assertEquals } from "$std/assert/assert_equals.ts";
+import { STATUS_CODE } from "$std/http/status.ts";
 import { BadRequestError } from "@/utils/http.ts";
 
 Deno.test("[plugins] getGitHubUser()", async (test) => {

utils/http.ts

@@ -1,5 +1,5 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
-import { RedirectStatus, STATUS_CODE } from "std/http/status.ts";
+import { RedirectStatus, STATUS_CODE } from "$std/http/status.ts";
 
 /**
  * Returns a response that redirects the client to the given location (URL).

utils/http_test.ts

@@ -1,8 +1,8 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
-import { returnsNext, stub } from "std/testing/mock.ts";
+import { returnsNext, stub } from "$std/testing/mock.ts";
 import { fetchValues, getCursor, redirect } from "./http.ts";
-import { assert, assertEquals, assertRejects } from "std/assert/mod.ts";
-import { STATUS_CODE } from "std/http/status.ts";
+import { assert, assertEquals, assertRejects } from "$std/assert/mod.ts";
+import { STATUS_CODE } from "$std/http/status.ts";
 import { Item, randomItem } from "@/utils/db.ts";
 
 Deno.test("[http] redirect() defaults", () => {

utils/stripe.ts

@@ -1,6 +1,6 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
 import Stripe from "stripe";
-import { AssertionError } from "std/assert/assertion_error.ts";
+import { AssertionError } from "$std/assert/assertion_error.ts";
 
 const STRIPE_SECRET_KEY = Deno.env.get("STRIPE_SECRET_KEY");
 

utils/stripe_test.ts

@@ -1,5 +1,5 @@
 // Copyright 2023-2024 the Deno authors. All rights reserved. MIT license.
-import { AssertionError, assertThrows } from "std/assert/mod.ts";
+import { AssertionError, assertThrows } from "$std/assert/mod.ts";
 import { assertIsPrice } from "./stripe.ts";
 
 Deno.test("[stripe] assertIsPrice()", () => {