finished v1

Author: devjmetivier

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["@delicious-simplicity/eslint-config"]
+}

.github/workflows/publish.yml

@@ -0,0 +1,24 @@
+name: Publish
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  publish:
+    name: Publish to the NPM registry
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 14.x
+          registry-url: https://registry.npmjs.org/
+
+      - name: Publish
+        run: |
+          yarn install --ignore-scripts
+          yarn publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.gitignore

@@ -102,3 +102,8 @@ dist
 
 # TernJS port file
 .tern-port
+
+cjs/
+esm/
+dist/
+types/

.npmignore

@@ -0,0 +1,4 @@
+.github
+.vscode
+.eslintrc
+.prettierrc

.prettierrc

@@ -0,0 +1 @@
+{}

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "aaron-bond.better-comments",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "eslint.alwaysShowStatus": true,
+  "eslint.codeAction.showDocumentation": {
+    "enable": true
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  }
+}

README.md

@@ -1 +1,34 @@
-# next-image-contentful-loader
+# @delicious-simplicity/next-image-contentful-loader
+
+A comprehensive [Contentful](https://www.contentful.com/developers/docs/references/images-api) image loader for the [Next.js Image component](https://nextjs.org/docs/api-reference/next/image).
+
+### Features
+
+- Allows for native Contentful image params/options
+- Similar error boundaries as `next/image`
+- Additional options for managing the aspect ratio of requested images
+
+### Usage
+
+```tsx
+import Image from "next/image";
+import { contentfulLoader } from "@delicious-simplicity/next-image-contentful-loader";
+
+const Component = ({ image }) => {
+  return (
+    <>
+      <Image
+        loader={(props) => contentfulLoader(props, { fit: "crop", ar: "1:1" })}
+        src={image.url}
+        alt={image.title}
+        width={image.width}
+        height={image.height}
+      />
+    </>
+  );
+};
+```
+
+### Required packages
+
+- [`next`](https://www.npmjs.com/package/next)

lib/index.ts

@@ -0,0 +1 @@
+export * from './parseAspectRatio';

lib/parseAspectRatio.ts

@@ -0,0 +1,8 @@
+export const parseAspectRatio = (ar: string) => {
+  if (!ar.includes(':')) {
+    throw new Error('Syntax not recognized for aspect ratio argument (ex: 4:3, 16:9)');
+  }
+
+  const [w, h] = ar.split(':');
+  return Number(h) / Number(w);
+};