Skip to content

Commit

Permalink
core: Update README (#504)
Browse files Browse the repository at this point in the history 
* core: Update README

* fix: review fixies
  • Loading branch information
@tenebricosa
tenebricosa authored Aug 7, 2023
1 parent a37fc34 commit 21bf726
Showing 1 changed file with 49 additions and 54 deletions.
103 changes: 49 additions & 54 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,51 +16,50 @@
<a href="https://twitter.com/Uploadcare?ref=github-readme">Twitter</a>
</p>

# 📦 Uploadcare Blocks: Stack-Agnostic Library for Uploading, Processing, and Editing Images On-the-Fly
# 📦 Uploadcare Blocks: stack-agnostic library for uploading, processing, and editing images on-the-fly


[![npm version](https://badge.fury.io/js/@uploadcare%2Fblocks.svg)](https://www.npmjs.com/package/@uploadcare/blocks)
[![GitHub Actions](https://github.com/uploadcare/blocks/workflows/checks/badge.svg)](https://github.com/uploadcare/blocks/actions?query=workflow%3ABuild+branch%3Amaster)
[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

`Uploadcare Blocks` is a powerful JavaScript library for creating custom file-handling services. `Blocks` include various interactive and customizable UI components to enhance users' file uploading and processing experience. As a bonus, you receive all the [Uploadcare's](https://uploadcare.com/) versatile file-handling capabilities, including [smart CDN](https://uploadcare.com/docs/delivery/cdn/#content-delivery-network), [MIME-type filtering](https://uploadcare.com/docs/moderation/#file-types), [signed uploads](https://uploadcare.com/docs/security/secure-uploads/), and [even more]((https://uploadcare.com/features/)).
*Uploadcare Blocks* is a powerful JavaScript library for creating custom file-handling services. It includes various interactive and customizable UI components to enhance users' file uploading and processing experience. As a bonus, you receive all the [Uploadcare's](https://uploadcare.com/?ref=github-readme) versatile file-handling capabilities, including [smart CDN](https://uploadcare.com/docs/delivery/cdn/#content-delivery-network/?ref=github-readme), [MIME-type filtering](https://uploadcare.com/docs/moderation/#file-types/?ref=github-readme), [signed uploads](https://uploadcare.com/docs/security/secure-uploads/?ref=github-readme), and [even more]((https://uploadcare.com/features/?ref=github-readme)).

See `Blocks` [in action](https://codesandbox.io/s/file-uploader-regular-demo-mm3znl?file=/index.html)!
See Uploadcare Blocks [in action](https://codesandbox.io/s/file-uploader-regular-demo-mm3znl?file=/index.html)!

<img alt="Uploadcare Blocks examples" src="https://ucarecdn.com/8035cdc7-f0b9-4ea9-8c15-05816f315481/">

## Core Features
## Core features

* [File Uploader](/solutions/file-uploader/) — implement file managing functionality with [multifunctional or minimal interfaces](https://uploadcare.com/docs/file-uploader/) in just a few minutes.
* [File Uploader](/solutions/file-uploader/) — implement file managing functionality with [multifunctional or minimal interfaces](https://uploadcare.com/docs/file-uploader/?ref=github-readme) in just a few minutes.
* [Advanced Customization](/blocks/) — create unique file-uploading interfaces by reorganizing pre-built components and styles with custom based on your needs.
* [Adaptive Images](/solutions/adaptive-image/) — build responsive user interfaces that adapt to various screen sizes and devices, ensuring a performant experience across platforms.
* [Cloud Image Editor](/solutions/cloud-image-editor/) — edit, transform, and process images right from a browser on-the-fly.
* [Uploadcare power and features](https://uploadcare.com/features/) — upload, process, deliver, and manage images without building custom infrastructure.
- `Coming Soon!` Web Components for any media content management like audio, video, image galleries, and more.
* [Uploadcare power and features](https://uploadcare.com/features/?ref=github-readme) — upload, process, deliver, and manage images without building custom infrastructure.
- **Coming soon!** Web Components for any media content management like audio, video, image galleries, and more.

## Why Blocks?
### Rapid Integration
## Why Uploadcare Blocks?
### Rapid integration

We provide a ready-to-use set of UI components for file handling. It saves you valuable development time and effort, allowing you to focus on other core aspects of your application. You even don't need to build a stage while developing — just run the code directly from the browser.

### Cross-Platform Compatibility
### Cross-platform compatibility

`Uploadcare Blocks` are designed to work seamlessly across various platforms and frameworks. Whether you're building a web application using React, Vue.js, Angular, Svelte, or other frameworks, you get [integrations and support](https://uploadcare.com/docs/integrations/) for various development environments.
Uploadcare Blocks are designed to work seamlessly across various platforms and frameworks. Whether you're building a web application using React, Vue.js, Angular, Svelte, or other frameworks, you get [integrations and support](https://uploadcare.com/docs/integrations/?ref=github-readme) for various development environments.

### Developer-Friendly
### Developer-friendly

The library comes with modern technologies at your fingertips, like [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), [ESM-level](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) code sharing, and other cutting-edge web standards. `Uploadcare Blocks` is a native web platform with minimum external dependencies and a lightweight library providing a cheap security audit.
The library comes with modern technologies at your fingertips, like [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), [ESM-level](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) code sharing, and other cutting-edge web standards. *Uploadcare Blocks* is designed lightweight with minimum external dependencies for a cheap security audit.

### Typescript support

We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html) for TypeScript static analysis support during development. Additionally, we provide type definitions ([\*.d.ts files](https://www.typescriptlang.org/docs/handbook/declaration-files/dts-from-js.html)) for the TypeScript projects in our packages.
We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html) and type definitions ([\*.d.ts files](https://www.typescriptlang.org/docs/handbook/declaration-files/dts-from-js.html)) for TypeScript static analysis support during development.

## 🚀 Getting Started
## 🚀 Getting started

### HTML `<script>` Tag

1. Connect `Blocks` directly from your document replacing `{{PACKAGE_VERSION}}` with the [latest version](https://github.com/uploadcare/blocks/releases) of the package:
### From CDN

1. Connect Uploadcare Blocks directly from your document replacing `{{PACKAGE_VERSION}}` with the [latest version](https://github.com/uploadcare/blocks/releases) of the package:
```html
<script type="module">
import * as LR from 'https://cdn.jsdelivr.net/npm/@uploadcare/blocks@{{PACKAGE_VERSION}}/web/blocks.min.js';
Expand All @@ -69,86 +68,82 @@ We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/int
</script>
```

2. Start using `Blocks` in your application markup (don't forget to specify `{{PACKAGE_VERSION}}` with the [latest one](https://github.com/uploadcare/blocks/releases)):

2. Start using Uploadcare Blocks in your application markup (don't forget to specify `{{PACKAGE_VERSION}}` with the [latest one](https://github.com/uploadcare/blocks/releases)):
```html
<lr-file-uploader-regular
css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@{{PACKAGE_VERSION}}/web/file-uploader-regular.min.css"
class="my-uploader"
css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@{{PACKAGE_VERSION}}/web/lr-file-uploader-regular.min.css"
ctx-name="my-uploader"
>
</lr-file-uploader-regular>
```

3. All configurations and customization in `Blocks` are managed from CSS code. Create a style sheet with the following code and replace `YOUR_PUBLIC_KEY` with your personal one (discover [how to obtain public keys](#using-file-uploading-features)):
3. Configure Uploadcare Blocks and add your personal public key to the project. Discover the instructions in the [following section](#configuration).

```css
.my-uploader {
--ctx-name: 'my-uploader';
--cfg-pubkey: 'YOUR_PUBLIC_KEY';
}
```
### From NPM

### Using NPM

1. Install Blocks package: `npm i --save-exact @uploadcare/blocks`
1. Install Uploadcare Blocks package: `npm i --save-exact @uploadcare/blocks`
2. Connect `Blocks` from your script file:
```js
import * as LR from '@uploadcare/blocks';

LR.registerBlocks(LR);
```
3. Start using `Blocks` in your application markup and replace `{{PACKAGE_VERSION}}` with the [latest version](https://github.com/uploadcare/blocks/releases) of the package:

3. Start using Uploadcare Blocks in your application markup and replace `{{PACKAGE_VERSION}}` with the [latest version](https://github.com/uploadcare/blocks/releases) of the package:
```html
<lr-file-uploader-inline
css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@{{PACKAGE_VERSION}}/web/file-uploader-inline.min.css"
class="my-uploader"
css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@{{PACKAGE_VERSION}}/web/lr-file-uploader-inline.min.css"
ctx-name="my-uploader"
>
</lr-file-uploader-inline>
```

### Configuration
4. Configure Uploadcare Blocks and add your personal public key to the project. Discover the instructions in the [following section](#configuration).

All configurations in `Blocks` are managed from CSS code.
1. Sign up to [Uploadcare](https://app.uploadcare.com/accounts/signup/).
2. Get a Public API key in [Uploadcare project's dashboard](https://app.uploadcare.com/projects/-/api-keys/).
3. Add a style sheet to your project and replace `YOUR_PUBLIC_KEY` with your own public key:
### Configuration

```css
.my-uploader {
--ctx-name: 'my-uploader';
--cfg-pubkey: 'YOUR_PUBLIC_KEY';
}
All configurations in Uploadcare Blocks are managed from `lr-config` block.
1. Sign up to [Uploadcare](https://app.uploadcare.com/accounts/signup/?ref=github-readme).
2. Get a Public API key in [Uploadcare project's dashboard](https://app.uploadcare.com/projects/-/api-keys/?ref=github-readme).
3. Add a `lr-config` block to your markup and replace `YOUR_PUBLIC_KEY` with your own public key:
```html
<lr-config
ctx-name="my-uploader"
pubkey="YOUR_PUBLIC_KEY"
></lr-config>
```

Discover more about `Blocks` configuration in [our documentation](https://uploadcare.com/docs/file-uploader/configuration/).
4. Make sure that your config block uses the same `ctx-name` attribute value as your solution block.

Discover more about Uploadcare Blocks configuration in [our documentation](https://uploadcare.com/docs/file-uploader/configuration/?ref=github-readme).

### Deep Dive in Blocks 🛠
Follow our [step-by-step installation guide](https://uploadcare.com/docs/file-uploader/installation/) to launch `Uploadcare Blocks` in a few minutes and set it up based on your needs.
### Deep dive in Uploadcare Blocks 🛠
Follow our [step-by-step installation guide](https://uploadcare.com/docs/file-uploader/installation/?ref=github-readme) to launch Uploadcare Blocks in a few minutes and set it up based on your needs.

## Browser Support
## Browser support

Latest desktop and mobile stable versions of Chrome, Edge, Firefox, Opera, and Safari are supported.

Internet Explorer is outdated and [not supported anymore](https://uploadcare.com/blog/uploadcare-stops-internet-explorer-support/).
Internet Explorer is outdated and [not supported anymore](https://uploadcare.com/blog/uploadcare-stops-internet-explorer-support/?ref=github-readme).

## Framework Support
## Framework support

`Blocks` are a framework-agnostic solution, so you can use it with **any** runtime you like. Discover the integration examples:
*Uploadcare Blocks* is a framework-agnostic solution, so you can use it with **any** runtime you like. Discover the integration examples:
<br/>

- [React](https://github.com/uploadcare/uc-blocks-examples/tree/main/examples/react-uploader)
- [Vue](https://github.com/uploadcare/uc-blocks-examples/tree/main/examples/vue-uploader)
- [Angular](https://github.com/uploadcare/uc-blocks-examples/tree/main/examples/angular-uploader)
- [Svelte](https://github.com/uploadcare/uc-blocks-examples/tree/main/examples/svelte-uploader)

All the source code is accessible and works in raw mode. Use `developer tools` to dive into details.
All the source code is accessible and works in raw mode. Use *developer tools* to dive into details.

## Contribution

You’re always welcome to contribute:
* Create [issues](https://github.com/uploadcare/blocks/issues) every time you feel something is missing or goes wrong.
* Provide your feedback or drop us a support request at <a href="mailto:hello@uploadcare.com">hello@uploadcare.com</a>.
* Ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/uploadcare) with `uploadcare` tag if others can have these questions as well.
* Ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/uploadcare) with "uploadcare" tag if others can have these questions as well.
* Fork project, make changes and send it as pull request. For launching the developing mode follow these commands:
* Install dependencies: `npm install`.
* Start local dev-server: `npm run dev`.
Expand Down

0 comments on commit 21bf726

Please sign in to comment.