tractor-loader-mdx

.github/workflows/publish.yaml

@@ -21,3 +21,7 @@ jobs:
         with:
           token: ${{ secrets.NPM_TOKEN }}
           package: packages/tractor-loader/package.json
+      - uses: JS-DevTools/npm-publish@v2
+        with:
+          token: ${{ secrets.NPM_TOKEN }}
+          package: packages/tractor-loader-mdx/package.json

apps/tractor-loader-examples/app/example.mdx

@@ -0,0 +1,3 @@
+This is an MDX example:
+
+![img](./cat.jpg?myrotate=145&crop=o-300,o-300,o300,o300&width=200&tractor)

apps/tractor-loader-examples/app/layout.tsx

@@ -8,6 +8,7 @@ import { Inter } from "next/font/google";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
+  metadataBase: new URL("https://tractor-loader.vercel.app"),
   title: "Tractor Loader",
   description: "A webpack loader to help you with your crops and other image adjustments.",
   icons: [

apps/tractor-loader-examples/app/page.tsx

@@ -12,6 +12,8 @@ import img_7 from "./cat.jpg?crop=o-110,o-55,o110,o55,r56%,44%&tractor";
 import img_8 from "./cat.jpg?height=100&tractor";
 import img_9 from "./cat.jpg?width=120;kernel:nearest&tractor";
 
+import ExampleMDX from "./example.mdx";
+
 import Nav from "./nav";
 
 // peer/example0
@@ -278,6 +280,63 @@ module.exports = nextConfig;`}
   export = contents;
 }`}
           />
+          <h4>MDX</h4>
+          <p>
+            Tractor loader can be used with{" "}
+            <a href="https://nextjs.org/docs/app/building-your-application/configuring/mdx">
+              @next/mdx
+            </a>{" "}
+            using the tractor-loader-mdx remark plugin.
+          </p>
+          <Text t={`npm install tractor-loader-mdx`} />
+          <p>
+            Edit the next.config.mjs to include the plugin. The source for this site is an{" "}
+            <a href="https://github.com/jasonthorsness/tractor-loader/blob/main/apps/tractor-loader-examples/next.config.mjs">
+              example.
+            </a>
+          </p>
+          <JavaScript
+            t={`import tractorLoaderMDX from "tractor-loader-mdx";
+// ...
+const withMDX = createMDX({
+  extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [tractorLoaderMDX],
+  },
+});
+            `}
+          />
+          <p>
+            Then in your components handler, such as mdx-components.tsx, handle TractorLoaderImage.
+          </p>
+          <JavaScript
+            t={`import type { MDXComponents } from "mdx/types";
+import Image from "next/image";
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    TractorLoaderImage: (props) => {
+      return (
+        <Image
+          {...props}
+          alt={props.alt || ""}
+          className="my-0"
+          sizes="(max-width: 56rem) 50vw, 28rem"
+        />
+      );
+    },
+    ...components,
+  };
+}`}
+          />
+          <p>Any Tractor Loader syntax in your MDX will be processed. For example:</p>
+          <Text
+            t={`This is an MDX example:
+
+![img](./cat.jpg?myrotate=145&crop=o-300,o-300,o300,o300&width=200&tractor)
+            `}
+          />
+          <ExampleMDX />
           <h3 id="section-overview-application">Application</h3>
           <p>
             Tractor loader can be applied to any static image import by adding a query string ending

apps/tractor-loader-examples/mdx-components.tsx

@@ -0,0 +1,18 @@
+import type { MDXComponents } from "mdx/types";
+import Image from "next/image";
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    TractorLoaderImage: (props) => {
+      return (
+        <Image
+          {...props}
+          alt={props.alt || ""}
+          className="my-0"
+          sizes="(max-width: 56rem) 50vw, 28rem"
+        />
+      );
+    },
+    ...components,
+  };
+}

apps/tractor-loader-examples/next.config.js → apps/tractor-loader-examples/next.config.mjs

@@ -1,3 +1,6 @@
+import createMDX from "@next/mdx";
+import tractorLoaderMDX from "tractor-loader-mdx";
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   webpack: (config, options) => {
@@ -31,4 +34,11 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+const withMDX = createMDX({
+  extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [tractorLoaderMDX],
+  },
+});
+
+export default withMDX(nextConfig);

apps/tractor-loader-examples/package.json

@@ -10,8 +10,12 @@
   "dependencies": {
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
+    "@mdx-js/loader": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
+    "@next/mdx": "^13.4.19",
     "@tailwindcss/forms": "^0.5.4",
     "@tailwindcss/typography": "^0.5.9",
+    "@types/mdx": "^2.0.6",
     "@types/node": "20.4.8",
     "@types/prismjs": "^1.26.0",
     "@types/react": "18.2.18",
@@ -26,6 +30,7 @@
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.3",
     "tractor-loader": "workspace:^",
+    "tractor-loader-mdx": "workspace:^",
     "typescript": "^5.1.6"
   }
 }

packages/tractor-loader-mdx/.gitignore

@@ -0,0 +1,3 @@
+dist/
+coverage/
+node_modules/

packages/tractor-loader-mdx/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2023 Jason Thorsness
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/tractor-loader-mdx/README.md

@@ -0,0 +1,11 @@
+# 🚜 Tractor Loader MDX
+
+Tractor Loader is a remark plugin that enables Tractor Loader for images in MDX files loaded through
+[@next/mdx](https://nextjs.org/docs/app/building-your-application/configuring/mdx).
+
+```markdown
+![img](./cat.jpg?width=200&tractor)
+```
+
+Refer to the
+[installation instructions](https://tractor-loader.vercel.app/#section-overview-installation).

packages/tractor-loader-mdx/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "tractor-loader-mdx",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "A remark plugin that enables Tractor Loader for images in MDX files loaded through @next/mdx",
+  "repository": "https://github.com/jasonthorsness/tractor-loader-mdx",
+  "license": "MIT",
+  "author": "Jason Thorsness",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "preinstall": "npx only-allow pnpm",
+    "lint": "prettier --write --parser typescript \"{src,test}/**/*.{j,t}s\""
+  },
+  "devDependencies": {
+    "prettier": "^3.0.0",
+    "typescript": "^5.1.6",
+    "@types/mdast": "^3.0.0"
+  },
+  "dependencies": {
+    "remark": "^14.0.0",
+    "remark-mdx": "^2.0.0",
+    "unified": "^10.0.0",
+    "unist-util-visit": "^4.0.0"
+  }
+}

packages/tractor-loader-mdx/src/index.ts

@@ -0,0 +1,42 @@
+import { visit } from "unist-util-visit";
+import { remark } from "remark";
+import remarkMDX from "remark-mdx";
+
+import * as mdast from "mdast";
+import type * as unified from "unified";
+
+export const plugin: unified.Plugin<[], mdast.Root> = () => {
+  return (tree) => {
+    const imports: mdast.Content[] = [];
+    let counter = 0;
+    visit(tree, "image", (node, index, parent) => {
+      if (parent == null || index == null || !/\?.+&tractor$/.test(node.url)) {
+        return;
+      }
+
+      counter++;
+
+      const sanitizedURL = JSON.stringify(node.url);
+
+      const parsedRoot = remark()
+        .use(remarkMDX)
+        .parse(
+          `import img${counter} from ${sanitizedURL};\n\n<TractorLoaderImage src={img${counter}} />`,
+        );
+
+      if (parsedRoot.children.length !== 2) {
+        throw new Error("Internal error");
+      }
+
+      const importNode = parsedRoot.children[0];
+      const imageNode = parsedRoot.children[1];
+
+      parent.children[index] = imageNode;
+      imports.push(importNode);
+    });
+
+    tree.children.unshift(...imports);
+  };
+};
+
+export default plugin;

packages/tractor-loader-mdx/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "dist",
+    "sourceMap": true,
+    "target": "es5",
+    "module": "ES2015",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "declaration": true,
+    "allowJs": false,
+    "noUnusedLocals": true,
+    "strictNullChecks": true,
+    "noImplicitAny": true,
+    "removeComments": false,
+    "skipLibCheck": true,
+    "lib": ["esnext", "DOM"],
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "allowUnusedLabels": false,
+    "allowUnreachableCode": false,
+    "exactOptionalPropertyTypes": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}