feat: initial commit

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,40 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ""
+labels: ""
+assignees: ""
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ""
+labels: ""
+assignees: ""
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/dependabot.yml

@@ -0,0 +1,17 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  # Maintain dependencies for GitHub Actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+  # Maintain dependencies for npm
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "monthly"

.github/workflows/check.yml

@@ -0,0 +1,32 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        os:
+          - ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Read .nvmrc
+        run: echo ::set-output name=NVMRC::$(cat .nvmrc)
+        id: nvm
+
+      - name: Setup Node.js
+        uses: actions/[email protected]
+        with:
+          node-version: "${{ steps.nvm.outputs.NVMRC }}"
+      - run: yarn install --frozen-lockfile
+        env:
+          CI: true
+      - run: yarn build
+      # - run: yarn prettier . --check

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.next
+out

.nvmrc

@@ -0,0 +1 @@
+14.15.0

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Joe Bell
+
+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.

README.md

@@ -0,0 +1,119 @@
+# next-blurhash
+
+> **Create [BlurHash][blurhash] strings in Next.js getStaticProps 🖼**
+>
+> Designed to work with [Next.js 10 Image Optimization][next/image]
+>
+> [See the demo][demo]
+
+![NPM Version](https://badgen.net/npm/v/next-blurhash)
+![Types Included](https://badgen.net/npm/types/next-blurhash)
+![License](https://badgen.net/github/license/joe-bell/next-blurhash)
+![NPM Downloads](https://badgen.net/npm/dm/next-blurhash)
+
+## Table of Contents
+
+1. [Setup](#setup)
+2. [FAQs](#faqs)
+
+## Setup
+
+In this example, we're going to create a [BlurHash][blurhash] string for a single image inside a Next.js [Page](https://nextjs.org/docs/basic-features/pages).
+
+We'll then use [`react-blurhash`][react-blurhash] to render the string to a canvas, to sit underneath our [`Image`][next/image] whilst it's loading.
+
+> [**See the demo**][demo] for a live example.
+
+1. Add the package to your existing Next.js project:
+
+   ```sh
+   npm i next-blurhash react-blurhash
+   ```
+
+2. Add your chosen image to the [`public`](https://nextjs.org/docs/basic-features/static-file-serving) directory.
+
+   In this case, our image is `public/keila-joa.jpg` (to match the [demo][demo])
+
+   > In it's current state, `next-blurhash` only supports [local images](#what-about-remote-images).
+
+3. Create a new page (or add to an existing page), and add the following:
+
+   1. Call `getStaticBlurhash()` inside `getStaticProps()` with your image's path **without the `public` prefix**.
+
+      This will return the [BlurHash][blurhash] string as a static prop (which will be decoded to dimensions of **32×32**).
+
+   2. Import `BlurhashCanvas` from [`react-blurhash`][react-blurhash] and supply it with your newly generated static [BlurHash][blurhash] string.
+
+   3. Add custom styles to place the `BlurhashCanvas` underneath Next.js' `Image` whilst it loads.
+
+   ```jsx
+   // pages/index.jsx
+   import * as React from "react";
+   import Image from "next/image";
+   import { getStaticBlurhash } from "next-blurhash";
+   import { BlurhashCanvas } from "react-blurhash";
+
+   export const getStaticProps: GetStaticProps = async () => {
+     const imgSrc = "/keila-joa.jpg";
+     const imgHash = await getStaticBlurhash(imgSrc);
+
+     return {
+       props: {
+         imgHash,
+         imgSrc,
+       },
+     };
+   };
+
+   function Index({ imgHash, imgSrc }) {
+     return (
+       <main>
+         <div style={{ position: "relative" }}>
+           {/* Canvas sits underneath the `Image` and fills available space */}
+           <BlurhashCanvas
+             // Your generated Blurhash string
+             hash={imgHash}
+             // getStaticBlurhash **always** returns 32×32 dimensions
+             width={32}
+             height={32}
+             punch={1}
+             style={{
+               position: "absolute",
+               top: 0,
+               left: 0,
+               right: 0,
+               bottom: 0,
+               width: "100%",
+               height: "100%",
+             }}
+           />
+           {/* Your image, optimized by next/image */}
+           <Image src={imgSrc} width={4032} height={3024} />
+         </div>
+       </main>
+     );
+   }
+
+   export default Index;
+   ```
+
+4. [Run your Next.js app](https://nextjs.org/docs/api-reference/cli#build) to see the results in action!
+
+   You should expect to see the [BlurHash][blurhash] canvas first, then the image optimized by Next.js
+
+## FAQs
+
+- [What about remote images?](#what-about-remote-images)
+
+### What about remote images?
+
+In it's current state, `next-blurhash` only supports local images (added to `public`). PRs to add support for remote images are welcomed ❤️.
+
+[blurhash]: https://blurha.sh/
+[react-blurhash]: https://github.com/woltapp/react-blurhash
+[next/image]: https://nextjs.org/docs/basic-features/image-optimization
+[demo]: https://next-blurhash.joebell.co.uk
+
+## Acknowledgements
+
+- [BlurHash][blurhash] by **Wolt**

lerna.json

@@ -0,0 +1,11 @@
+{
+  "packages": ["packages/*"],
+  "version": "0.0.1",
+  "npmClient": "yarn",
+  "useWorkspaces": true,
+  "command": {
+    "publish": {
+      "conventionalCommits": true
+    }
+  }
+}

package.json

@@ -0,0 +1,38 @@
+{
+  "private": true,
+  "name": "root",
+  "scripts": {
+    "build": "lerna run build",
+    "clean": "lerna run clean",
+    "commit": "git-cz"
+  },
+  "workspaces": [
+    "packages/*"
+  ],
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,json,md,yml}": "prettier --write"
+  },
+  "devDependencies": {
+    "@types/node": "14.11.2",
+    "@types/react": "16.9.50",
+    "commitizen": "4.2.1",
+    "cz-conventional-changelog": "3.3.0",
+    "husky": "4.3.0",
+    "lerna": "^3.15.0",
+    "lint-staged": "10.4.0",
+    "microbundle": "0.12.4",
+    "prettier": "2.1.2",
+    "rimraf": "3.0.2",
+    "typescript": "4.0.3"
+  }
+}

packages/demo/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

packages/demo/package.json

@@ -0,0 +1,20 @@
+{
+  "private": "true",
+  "name": "demo",
+  "version": "0.0.1",
+  "author": "Joe Bell <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "clean": "rimraf .next"
+  },
+  "dependencies": {
+    "next": "10.0.0",
+    "next-blurhash": "^0.0.1",
+    "react-blurhash": "0.1.3",
+    "react": "16.13.1",
+    "react-dom": "16.13.1"
+  }
+}

packages/demo/pages/index.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { GetStaticProps } from "next";
+import { getStaticBlurhash } from "next-blurhash";
+import { BlurhashCanvas } from "react-blurhash";
+import Image from "next/image";
+
+type DemoProps = Record<"imgHash" | "imgSrc", string>;
+
+export const getStaticProps: GetStaticProps<DemoProps> = async () => {
+  const imgSrc = "/keila-joa.jpg";
+  const imgHash = await getStaticBlurhash(imgSrc);
+
+  return {
+    props: {
+      imgHash,
+      imgSrc,
+    },
+  };
+};
+
+const Index: React.FC<DemoProps> = ({ imgHash, imgSrc }) => (
+  <main>
+    <div style={{ position: "relative" }}>
+      <BlurhashCanvas
+        hash={imgHash}
+        width={32}
+        height={32}
+        punch={1}
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          width: "100%",
+          height: "100%",
+        }}
+      />
+      <Image src={imgSrc} width={4032} height={3024} />
+    </div>
+  </main>
+);
+
+export default Index;