pass alt and title text

jasonthorsness · Dec 27, 2024 · 0abe4fd · 0abe4fd
1 parent 9f5cc8b
commit 0abe4fd
Show file tree

Hide file tree

Showing 10 changed files with 1,901 additions and 1,953 deletions.
diff --git a/apps/tractor-loader-examples/app/example.mdx b/apps/tractor-loader-examples/app/example.mdx
@@ -1,3 +1,3 @@
 This is an MDX example:
 
-![img](./cat.jpg?myrotate=145&crop=o-300,o-300,o300,o300&width=200&tractor)
+![alt text](./cat.jpg?myrotate=145&crop=o-300,o-300,o300,o300&width=200&tractor "title text")
diff --git a/apps/tractor-loader-examples/app/nav.tsx b/apps/tractor-loader-examples/app/nav.tsx
@@ -1,16 +1,9 @@
 "use client";
-import { Disclosure } from "@headlessui/react";
+import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/react";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
-import { usePathname } from "next/navigation";
 import GitHub from "./github";
 
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(" ");
-}
-
 export default function Component() {
-  const currentRoute = usePathname();
-
   const navigation: { name: string; href: string; level: number; current?: boolean }[] = [
     { name: "Overview", href: "#section-overview", level: 0 },
     { name: "Why", href: "#section-overview-why", level: 1 },
@@ -26,10 +19,6 @@ export default function Component() {
     { name: "Image Credits", href: "#section-image-credits", level: 0 },
   ];
 
-  for (let i = 0; i < navigation.length; i++) {
-    navigation[i].current = currentRoute === navigation[i].href;
-  }
-
   return (
     <Disclosure as="nav">
       {({ open }) => (
@@ -43,22 +32,22 @@ export default function Component() {
               </div>
               <div className="absolute inset-y-0 right-0 flex items-center">
                 <GitHub href="https://github.com/jasonthorsness/tractor-loader" />
-                <Disclosure.Button className="relative inline-flex items-center justify-center rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-600 hover:bg-gray-200 dark:hover:bg-gray-900">
+                <DisclosureButton className="relative inline-flex items-center justify-center rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-600 hover:bg-gray-200 dark:hover:bg-gray-900">
                   <span className="absolute -inset-0.5" />
                   <span className="sr-only">Open main menu</span>
                   {open ? (
                     <XMarkIcon className="block h-8 w-8" aria-hidden="true" />
                   ) : (
                     <Bars3Icon className="block h-8 w-8" aria-hidden="true" />
                   )}
-                </Disclosure.Button>
+                </DisclosureButton>
               </div>
             </div>
           </div>
-          <Disclosure.Panel>
+          <DisclosurePanel>
             <div className="space-y-1 pb-1 pt-1">
               {navigation.map((item) => (
-                <Disclosure.Button
+                <DisclosureButton
                   key={item.name}
                   as="a"
                   href={item.href}
@@ -71,10 +60,10 @@ export default function Component() {
                   >
                     {item.name}
                   </span>
-                </Disclosure.Button>
+                </DisclosureButton>
               ))}
             </div>
-          </Disclosure.Panel>
+          </DisclosurePanel>
         </>
       )}
     </Disclosure>

diff --git a/apps/tractor-loader-examples/app/page.tsx b/apps/tractor-loader-examples/app/page.tsx
@@ -333,7 +333,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
           <Text
             t={`This is an MDX example:
 
-![img](./cat.jpg?myrotate=145&crop=o-300,o-300,o300,o300&width=200&tractor)
+![alt text](./cat.jpg?myrotate=145&crop=o-300,o-300,o300,o300&width=200&tractor "title text")
             `}
           />
           <ExampleMDX />

diff --git a/apps/tractor-loader-examples/next.config.mjs b/apps/tractor-loader-examples/next.config.mjs
@@ -3,6 +3,7 @@ import tractorLoaderMDX from "tractor-loader-mdx";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
   webpack: (config, options) => {
     config.module.rules.forEach((rule) => {
       if (rule.loader === "next-image-loader") {

diff --git a/apps/tractor-loader-examples/package.json b/apps/tractor-loader-examples/package.json
@@ -8,29 +8,29 @@
     "start": "next start"
   },
   "dependencies": {
-    "@headlessui/react": "^2.1.8",
-    "@heroicons/react": "^2.1.5",
-    "@mdx-js/loader": "^3.0.1",
-    "@mdx-js/react": "^3.0.1",
-    "@next/mdx": "^14.2.13",
+    "@headlessui/react": "^2.2.0",
+    "@heroicons/react": "^2.2.0",
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
+    "@next/mdx": "^15.1.3",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
     "@types/mdx": "^2.0.13",
-    "@types/node": "22.7.4",
-    "@types/prismjs": "^1.26.4",
-    "@types/react": "18.3.10",
-    "@types/react-dom": "18.3.0",
-    "@vercel/analytics": "^1.3.1",
+    "@types/node": "22.10.2",
+    "@types/prismjs": "^1.26.5",
+    "@types/react": "19.0.2",
+    "@types/react-dom": "19.0.2",
+    "@vercel/analytics": "^1.4.1",
     "autoprefixer": "10.4.20",
-    "eslint": "8.57.1",
-    "eslint-config-next": "14.2.13",
-    "next": "14.2.13",
-    "postcss": "8.4.47",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "tailwindcss": "3.4.13",
+    "eslint": "9.17.0",
+    "eslint-config-next": "15.1.3",
+    "next": "15.1.3",
+    "postcss": "8.4.49",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "tailwindcss": "3.4.17",
     "tractor-loader": "workspace:^",
     "tractor-loader-mdx": "workspace:^",
-    "typescript": "^5.6.2"
+    "typescript": "^5.7.2"
   }
 }
diff --git a/package.json b/package.json
@@ -8,6 +8,6 @@
     "lint": "pnpm -r run lint"
   },
   "devDependencies": {
-    "typescript": "^5.6.2"
+    "typescript": "^5.7.2"
   }
 }
diff --git a/packages/tractor-loader-mdx/package.json b/packages/tractor-loader-mdx/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tractor-loader-mdx",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "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",
@@ -20,12 +20,12 @@
   },
   "devDependencies": {
     "@types/mdast": "^4.0.4",
-    "prettier": "^3.3.3",
-    "typescript": "^5.6.2"
+    "prettier": "^3.4.2",
+    "typescript": "^5.7.2"
   },
   "dependencies": {
     "remark": "^15.0.1",
-    "remark-mdx": "^3.0.1",
+    "remark-mdx": "^3.1.0",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0"
   }

diff --git a/packages/tractor-loader-mdx/src/index.ts b/packages/tractor-loader-mdx/src/index.ts
@@ -18,10 +18,13 @@ export const plugin: unified.Plugin<[], mdast.Root> = () => {
 
       const sanitizedURL = JSON.stringify(node.url);
 
+      const title = (node.title ?? "").replace('"', '\\"');
+      const alt = (node.alt ?? "").replace('"', '\\"');
+
       const parsedRoot = remark()
         .use(remarkMDX)
         .parse(
-          `import img${counter} from ${sanitizedURL};\n\n<TractorLoaderImage src={img${counter}} />`,
+          `import img${counter} from ${sanitizedURL};\n\n<TractorLoaderImage src={img${counter}} title={"${title}"} alt={"${alt}"} />`,
         );
 
       if (parsedRoot.children.length !== 2) {

diff --git a/packages/tractor-loader/package.json b/packages/tractor-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tractor-loader",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "A webpack loader to help you with your crops and other image adjustments.",
   "repository": "https://github.com/jasonthorsness/tractor-loader",
   "license": "MIT",
@@ -25,8 +25,8 @@
     "@jest/globals": "^29.7.0",
     "@types/webpack": "^5.28.5",
     "jest": "^29.7.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.6.2"
+    "typescript": "^5.7.2"
   }
 }