Skip to content

Commit

Permalink
chore: Add semantic-release (#22)
Browse files Browse the repository at this point in the history 
* chore: Add semantic-release

* chore: Add prettier
  • Loading branch information
@leomelzer
leomelzer authored Mar 9, 2021
1 parent 2916e52 commit 2d2fa42
Show file tree
Hide file tree
Showing 6 changed files with 72 additions and 24 deletions.
26 changes: 26 additions & 0 deletions .github/workflows/release.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
name: Release
on:
push:
branches:
- main
- next
jobs:
release:
name: Build & Release
runs-on: ubuntu-18.04
steps:
- name: Checkout
uses: actions/checkout@v1
- name: Setup Node.js
uses: actions/setup-node@v1
with:
node-version: 12
- name: Install dependencies
run: yarn
- name: Build
run: yarn build
- name: Release
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
run: npx semantic-release
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
node_modules
/*.js
/*.js.map
storybook-static
4 changes: 4 additions & 0 deletions .prettierrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"semi": false,
"singleQuote": true
}
42 changes: 21 additions & 21 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<img width="300" src="https://storage.googleapis.com/graphcms-public/GraphCMS%20Image.svg?sanitize=true">
</p>

# graphcms-image
# @graphcms/react-image

Inspired by and based on [gatsby-image](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image)

Expand All @@ -17,11 +17,11 @@ Inspired by and based on [gatsby-image](https://github.com/gatsbyjs/gatsby/tree/



This is what a component using `graphcms-image` looks like.
This is what a component using `@graphcms/react-image` looks like.

```jsx
import React, { Fragment } from "react";
import GraphImg from "graphcms-image";
import GraphImg from "@graphcms/react-image";

export default ({ data: { loading, images } }) => {
if (!loading) {
Expand Down Expand Up @@ -49,21 +49,21 @@ export const query = graphql`

## Props

| Name | Type | Description |
| ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |
| `image` | `object` | An object of shape `{ handle, width, height }`. Handle is an identifier required to display the image and both `width` and `height` are required to display a correct placeholder and aspect ratio for the image. You can get all 3 by just putting all 3 in your image-getting query. |
| `maxWidth` | `number` | Maximum width you'd like your image to take up. (ex. If your image container is resizing dynamically up to a width of 1200, put it as a `maxWidth`) |
| `fadeIn` | `bool` | Do you want your image to fade in on load? Defaults to `true` |
| `fit` | `"clip"\|"crop"\|"scale"\|"max"` | When resizing the image, how would you like it to fit the new dimensions? Defaults to `crop`. You can read more about resizing [here](https://www.filestack.com/docs/image-transformations/resize) |
| `withWebp` | `bool` | If webp is supported by the browser, the images will be served with `.webp` extension. (Recommended) |
| `transforms` | `array` | Array of `string`s, each representing a separate Filestack transform, eg. `['sharpen=amount:5', 'quality=value:75']` |
| `title` | `string` | Passed to the `img` element |
| `alt` | `string` | Passed to the `img` element |
| `className` | `string\|object` | Passed to the wrapper div. Object is needed to support Glamor's css prop |
| `outerWrapperClassName` | `string\|object` | Passed to the outer wrapper div. Object is needed to support Glamor's css prop |
| `style` | `object` | Spread into the default styles in the wrapper div |
| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |
| `blurryPlaceholder` | `bool` | Would you like to display a blurry placeholder for your loading image? Defaults to `true`. |
| `backgroundColor` | `string\|bool` | Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string. |
| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |
| `baseURI` | `string` | Set the base src from where the images are requested. Base URI Defaults to `https://media.graphcms.com` |
| Name | Type | Description |
| ----------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `image` | `object` | An object of shape `{ handle, width, height }`. Handle is an identifier required to display the image and both `width` and `height` are required to display a correct placeholder and aspect ratio for the image. You can get all 3 by just putting all 3 in your image-getting query. |
| `maxWidth` | `number` | Maximum width you'd like your image to take up. (ex. If your image container is resizing dynamically up to a width of 1200, put it as a `maxWidth`) |
| `fadeIn` | `bool` | Do you want your image to fade in on load? Defaults to `true` |
| `fit` | `"clip"\|"crop"\|"scale"\|"max"` | When resizing the image, how would you like it to fit the new dimensions? Defaults to `crop`. You can read more about resizing [here](https://www.filestack.com/docs/image-transformations/resize) |
| `withWebp` | `bool` | If webp is supported by the browser, the images will be served with `.webp` extension. (Recommended) |
| `transforms` | `array` | Array of `string`s, each representing a separate Filestack transform, eg. `['sharpen=amount:5', 'quality=value:75']` |
| `title` | `string` | Passed to the `img` element |
| `alt` | `string` | Passed to the `img` element |
| `className` | `string\|object` | Passed to the wrapper div. Object is needed to support Glamor's css prop |
| `outerWrapperClassName` | `string\|object` | Passed to the outer wrapper div. Object is needed to support Glamor's css prop |
| `style` | `object` | Spread into the default styles in the wrapper div |
| `position` | `string` | Defaults to `relative`. Pass in `absolute` to make the component `absolute` positioned |
| `blurryPlaceholder` | `bool` | Would you like to display a blurry placeholder for your loading image? Defaults to `true`. |
| `backgroundColor` | `string\|bool` | Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string. |
| `onLoad` | `func` | A callback that is called when the full-size image has loaded. |
| `baseURI` | `string` | Set the base src from where the images are requested. Base URI Defaults to `https://media.graphcms.com` |
18 changes: 15 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,26 @@
{
"name": "graphcms-image",
"version": "1.1.0-beta4",
"name": "@graphcms/react-image",
"version": "0.0.0-semantically-released",
"main": "index.js",
"license": "MIT",
"author": "Hugo Meissner <[email protected]>",
"scripts": {
"build": "babel src --out-dir .",
"build": "babel src --out-dir ./ --source-maps",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"prepare": "npm run build"
},
"release": {
"branches": [
"main"
],
"plugins": [
"@semantic-release/commit-analyzer",
"@semantic-release/release-notes-generator",
"@semantic-release/npm",
"@semantic-release/github"
]
},
"devDependencies": {
"@storybook/addon-actions": "^3.3.6",
"@storybook/addon-links": "^3.3.6",
Expand All @@ -19,6 +30,7 @@
"babel-preset-airbnb": "^2.4.0",
"eslint": "^4.14.0",
"eslint-config-blazity": "^1.0.4",
"prettier": "^2.2.1",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4942,6 +4942,11 @@ prettier@^1.9.2:
version "1.9.2"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.9.2.tgz#96bc2132f7a32338e6078aeb29727178c6335827"

prettier@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==

pretty-error@^2.0.2:
version "2.1.1"
resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
Expand Down

0 comments on commit 2d2fa42

Please sign in to comment.