Skip to content

Commit

Permalink
Deploying to gh-pages from @ 70eeedd 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
nd0ut committed Nov 30, 2023
1 parent 8ae0a13 commit 55cf1fa
Show file tree
Hide file tree
Showing 14 changed files with 31 additions and 25 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
## [0.30.1](https://github.com/uploadcare/blocks/compare/v0.30.0...v0.30.1) (2023-11-30)

### Bug Fixes

- improve event types ([#563](https://github.com/uploadcare/blocks/issues/563)) ([7d4097d](https://github.com/uploadcare/blocks/commit/7d4097db83f2cd4afef6375406e92afb0eba4c09))

# [0.30.0](https://github.com/uploadcare/blocks/compare/v0.29.1...v0.30.0) (2023-11-14)

- **drop-area:** show pointer on clickable drop areas ([6990cd4](https://github.com/uploadcare/blocks/commit/6990cd495ac535fcb9586e3148dcf5a4705035ae))
Expand Down
2 changes: 1 addition & 1 deletion env.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
/** Do not edit this file manually. It's generated during build process. */
export const PACKAGE_NAME = 'blocks';
export const PACKAGE_VERSION = '0.30.0';
export const PACKAGE_VERSION = '0.30.1';
2 changes: 1 addition & 1 deletion get-started/configuration/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ <h2 id="customization">Customization</h2>
</ul>
<p>You can redefine styling or any other setting using custom CSS file. It&#39;s easy to discover proper elements and their selectors using developer tools in your browser.</p>
<p>Custom CSS-file example:</p>
<pre><code class="language-css"><span class="hljs-keyword">@import</span> url(<span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/[email protected].0/web/file-uploader-regular.min.css&#x27;</span>);
<pre><code class="language-css"><span class="hljs-keyword">@import</span> url(<span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/[email protected].1/web/file-uploader-regular.min.css&#x27;</span>);

lr-modal {
<span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid <span class="hljs-number">#f00</span>;
Expand Down
12 changes: 6 additions & 6 deletions get-started/installation/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -82,12 +82,12 @@ <h2 id="script-tag-approach">Script tag approach</h2>
</ul>
</blockquote>
<p>Connect script to your document:</p>
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].0/web/blocks-browser.min.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].1/web/blocks-browser.min.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p>Then you can use blocks in your application markup.</p>
<p>File uploader example:</p>
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">lr-file-uploader-regular</span>
<span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].0/web/file-uploader-regular.min.css&quot;</span>
<span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].1/web/file-uploader-regular.min.css&quot;</span>
&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">lr-file-uploader-regular</span>&gt;</span>
</code></pre>
Expand All @@ -98,20 +98,20 @@ <h2 id="dynamic-script-connection-types-support">Dynamic script connection (type
<p>Then use <code>connectBlocksFrom</code> function to connect blocks:</p>
<pre><code class="language-js"><span class="hljs-keyword">import</span> { connectBlocksFrom } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@uploadcare/blocks/abstract/connectBlocksFrom.js&#x27;</span>;

<span class="hljs-title function_">connectBlocksFrom</span>(<span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/[email protected].0/web/blocks-browser.min.js&#x27;</span>);
<span class="hljs-title function_">connectBlocksFrom</span>(<span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/[email protected].1/web/blocks-browser.min.js&#x27;</span>);
</code></pre>
<p>That&#39;s it! Now you can use components for placing into html, like this:</p>
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">lr-file-uploader-inline</span>
<span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].0/web/file-uploader-inline.min.css&quot;</span>
<span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].1/web/file-uploader-inline.min.css&quot;</span>
<span class="hljs-attr">class</span>=<span class="hljs-string">&quot;my-config-class&quot;</span>
&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">lr-file-uploader-inline</span>&gt;</span>
</code></pre>
<p>You may need to implement some logic, which depends on connected blocks or get access directly to the imported components. Since <code>connectBlocksFrom</code> returns <code>Promise</code>, place all you need using <code>.then()</code></p>
<pre><code class="language-js"><span class="hljs-keyword">import</span> { connectBlocksFrom } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@uploadcare/blocks/abstract/connectBlocksFrom.js&#x27;</span>;

<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">STYLES</span> = <span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/[email protected].0/web/file-uploader-regular.min.css&#x27;</span>;
<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">STYLES</span> = <span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/[email protected].1/web/file-uploader-regular.min.css&#x27;</span>;

<span class="hljs-title function_">connectBlocksFrom</span>(<span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/[email protected].0/web/blocks-browser.min.js&#x27;</span>).<span class="hljs-title function_">then</span>(
<span class="hljs-title function_">connectBlocksFrom</span>(<span class="hljs-string">&#x27;https://unpkg.com/@uploadcare/[email protected].1/web/blocks-browser.min.js&#x27;</span>).<span class="hljs-title function_">then</span>(
<span class="hljs-function">(<span class="hljs-params">blocks</span>) =&gt;</span> {
<span class="hljs-keyword">if</span> (!blocks) {
<span class="hljs-keyword">return</span>; <span class="hljs-comment">// To avoid errors in SSR case</span>
Expand Down
12 changes: 6 additions & 6 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -108,19 +108,19 @@ <h3 id="typescript-support">Typescript support</h3>
<h2 id="🚀-getting-started">🚀 Getting started</h2>
<h3 id="from-cdn">From CDN</h3>
<ol>
<li>Connect Uploadcare Blocks directly from your document replacing <code>0.30.0</code> with the <a target='_blank' href="https://github.com/uploadcare/blocks/releases">latest version</a> of the package:</li>
<li>Connect Uploadcare Blocks directly from your document replacing <code>0.30.1</code> with the <a target='_blank' href="https://github.com/uploadcare/blocks/releases">latest version</a> of the package:</li>
</ol>
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="language-javascript">
<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> <span class="hljs-variable constant_">LR</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;https://cdn.jsdelivr.net/npm/@uploadcare/[email protected].0/web/blocks.min.js&#x27;</span>;
<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> <span class="hljs-variable constant_">LR</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;https://cdn.jsdelivr.net/npm/@uploadcare/[email protected].1/web/blocks.min.js&#x27;</span>;

<span class="hljs-variable constant_">LR</span>.<span class="hljs-title function_">registerBlocks</span>(<span class="hljs-variable constant_">LR</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<ol start="2">
<li>Start using Uploadcare Blocks in your application markup (don&#39;t forget to specify <code>0.30.0</code> with the <a target='_blank' href="https://github.com/uploadcare/blocks/releases">latest one</a>):</li>
<li>Start using Uploadcare Blocks in your application markup (don&#39;t forget to specify <code>0.30.1</code> with the <a target='_blank' href="https://github.com/uploadcare/blocks/releases">latest one</a>):</li>
</ol>
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">lr-file-uploader-regular</span>
<span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/@uploadcare/[email protected].0/web/lr-file-uploader-regular.min.css&quot;</span>
<span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/@uploadcare/[email protected].1/web/lr-file-uploader-regular.min.css&quot;</span>
<span class="hljs-attr">ctx-name</span>=<span class="hljs-string">&quot;my-uploader&quot;</span>
&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">lr-file-uploader-regular</span>&gt;</span>
Expand All @@ -138,10 +138,10 @@ <h3 id="from-npm">From NPM</h3>
<span class="hljs-variable constant_">LR</span>.<span class="hljs-title function_">registerBlocks</span>(<span class="hljs-variable constant_">LR</span>);
</code></pre>
<ol start="3">
<li>Start using Uploadcare Blocks in your application markup and replace <code>0.30.0</code> with the <a target='_blank' href="https://github.com/uploadcare/blocks/releases">latest version</a> of the package:</li>
<li>Start using Uploadcare Blocks in your application markup and replace <code>0.30.1</code> with the <a target='_blank' href="https://github.com/uploadcare/blocks/releases">latest version</a> of the package:</li>
</ol>
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">lr-file-uploader-inline</span>
<span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/@uploadcare/[email protected].0/web/lr-file-uploader-inline.min.css&quot;</span>
<span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://cdn.jsdelivr.net/npm/@uploadcare/[email protected].1/web/lr-file-uploader-inline.min.css&quot;</span>
<span class="hljs-attr">ctx-name</span>=<span class="hljs-string">&quot;my-uploader&quot;</span>
&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">lr-file-uploader-inline</span>&gt;</span>
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@uploadcare/blocks",
"version": "0.30.0",
"version": "0.30.1",
"description": "Building blocks for Uploadcare products integration",
"keywords": [
"web components",
Expand Down
2 changes: 1 addition & 1 deletion solutions/adaptive-image/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ <h2 id="💎-solution-benefits">💎 Solution benefits</h2>
<p><re-htm src="./demo.htm"></re-htm></p>
<h2 id="quick-start">Quick start</h2>
<p>Connect script:</p>
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].0/web/lr-img.min.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].1/web/lr-img.min.js&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p>Add basic settings:</p>
<pre><code class="language-css">lr-<span class="hljs-selector-tag">img</span> {
Expand Down
4 changes: 2 additions & 2 deletions solutions/file-uploader/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ <h1 id="🛠-configuration"><a name="configuration"></a>🛠 Configuration</h1>
<h2 id="general">General</h2>
<p>All configurations, localization texts, icons, and styling are placed into CSS file (if you aren&#39;t familiar with this concept, read about <a href="../../get-started/configuration/">blocks configuration</a>), so you should connect the default one (or create your own):</p>
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css">
<span class="hljs-keyword">@import</span> url(<span class="hljs-attribute">https</span>://unpkg.com/@uploadcare/[email protected].0/web/file-uploader-regular<span class="hljs-selector-class">.min</span><span class="hljs-selector-class">.css</span>);
<span class="hljs-keyword">@import</span> url(<span class="hljs-attribute">https</span>://unpkg.com/@uploadcare/[email protected].1/web/file-uploader-regular<span class="hljs-selector-class">.min</span><span class="hljs-selector-class">.css</span>);
<span class="hljs-selector-class">.my-settings</span> {
<span class="hljs-attr">--ctx-name</span>: <span class="hljs-string">&#x27;my-uploader&#x27;</span>;
<span class="hljs-attr">--cfg-pubkey</span>: <span class="hljs-string">&#x27;demopublickey&#x27;</span>;
Expand Down Expand Up @@ -431,7 +431,7 @@ <h2 id="component-styles">Component styles</h2>
<h2 id="shadow-dom">Shadow DOM</h2>
<p>If you need additional isolation and styling security levels, you can get it with Shadow DOM.
To enable it and encapsulate all styles into separated scope, use the <code>css-src</code> attribute:</p>
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">lr-uploader</span> <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].0/web/file-uploader-regular.min.css&quot;</span>&gt;</span>
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">lr-uploader</span> <span class="hljs-attr">css-src</span>=<span class="hljs-string">&quot;https://unpkg.com/@uploadcare/[email protected].1/web/file-uploader-regular.min.css&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">lr-uploader</span>&gt;</span>
</code></pre>
<p><br/><br/><br/></p>
Expand Down
Loading

0 comments on commit 55cf1fa

Please sign in to comment.