diff --git a/README.md b/README.md index 0681958..e346ec8 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,65 @@ # ngx-picture -Not quite ready yet. Should be in beta by 20th October 2019. +Easy properly sized images in next generation formats for Angular. Take the pain out of creating **picture** elements with multiple sources for images sizes and format. + +```html +sample picture ouput here +``` + +## Install + +```bash +npm i --save ngx-picture +``` + +This library currently has a dependency on tje angular=cdk so if you haven't got that installed you can add it to your project with: + +```bash +ng add @angular/cdk +``` + +### Configure + +Import **NgxPictureModule** into **app.module.ts** and call **forRoot** suppyling your config. + +```typescript +import { + DEFAULT_BREAKPOINTS, + DEFAULT_WIDTHS, + NgxPictureModule +} from 'ngx-picture'; +import { AppComponent } from './app.component'; + +// this function will be called to create the +export function srcInterpolator(url, imageFormat, breakpoint, width) { + return `${url.split('.')[0]}-${width}.${ + imageFormat === 'jpeg' ? 'jpg' : 'webp' + }`; +} + +@NgModule({ + declarations: [AppComponent], + imports: [ + BrowserModule, + BrowserAnimationsModule, + MatButtonModule, + MatCardModule, + MatListModule, + NgxPictureModule.forRoot({ + breakpoints: DEFAULT_BREAKPOINTS, + widths: DEFAULT_WIDTHS, + imageFormats: ['webp', 'jpeg'], + srcInterpolator + }) + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule {} +``` + +## usage + +## demo + +## storybook diff --git a/package.json b/package.json index b6c28c2..89c9a4b 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "build": "ng build ngx-picture && ng build demo --prod", "copy-files": "copy README.md dist\\ngx-picture && copy LICENSE.md dist\\ngx-picture", "coverage": "ng test --no-watch --code-coverage", - "pack": "cd dist/ngx-responsive-image && npm pack", + "pack": "cd dist/ngx-picture && npm pack", "prep-lib": "npm run build && npm run copy-files && npm run pack", "storybook": "start-storybook -s ./projects/demo/src/assets/images -p 61610", "test": "ng test --project=ngx-picture", diff --git a/tsconfig.json b/tsconfig.json index c2e4785..6c8044e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,25 +10,16 @@ "module": "esnext", "moduleResolution": "node", "importHelpers": true, - "target": "es2015", - "typeRoots": [ - "node_modules/@types" - ], - "lib": [ - "es2018", - "dom" - ], + "target": "es5", + "typeRoots": ["node_modules/@types"], + "lib": ["es2018", "dom"], "paths": { - "ngx-picture": [ - "dist/ngx-picture" - ], - "ngx-picture/*": [ - "dist/ngx-picture/*" - ] + "ngx-picture": ["dist/ngx-picture"], + "ngx-picture/*": ["dist/ngx-picture/*"] } }, "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true } -} \ No newline at end of file +}