deploy: e0aef1da99

guide.html

@@ -5,10 +5,10 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Guide | Vue 3D Mockup</title>
     <meta name="description" content="📱 A 3D phone mockup component to showcase your apps">
-    <link rel="stylesheet" href="/vue-three-d-mockup/assets/style.986ff2fd.css">
+    <link rel="stylesheet" href="/vue-three-d-mockup/assets/style.fa589dce.css">
     <link rel="modulepreload" href="/vue-three-d-mockup/assets/chunks/screen.f0e1a01d.js">
     <link rel="modulepreload" href="/vue-three-d-mockup/assets/app.b6ea30b2.js">
-    <link rel="modulepreload" href="/vue-three-d-mockup/assets/guide.md.c2b95ef9.lean.js">
+    <link rel="modulepreload" href="/vue-three-d-mockup/assets/guide.md.eb0895a6.lean.js">
     
     <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
   </head>
@@ -88,8 +88,8 @@
 <span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> videoElement </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">null</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> vidReady </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(</span><span style="color:#FF9CAC;">false</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
 <span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre></div><h2 id="avaliable-props" tabindex="-1">Avaliable props <a class="header-anchor" href="#avaliable-props" aria-hidden="true">#</a></h2><table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>screen</code></td><td>String | Element | Array</td><td><code>true</code></td><td>none</td><td>Path to an image that will be displayed on the phones screen or the <code>&lt;video&gt;</code> element displayed on the phones screen. When using the latter there are <a href="#caveats">caveats</a>. Can also be an array of any of the options above.</td></tr><tr><td><code>lightClr</code></td><td>String</td><td><code>false</code></td><td><code>&quot;white&quot;</code></td><td>Color of the light as a CSS-style string.</td></tr><tr><td><code>phoneClr</code></td><td>String</td><td><code>false</code></td><td><code>&quot;white&quot;</code></td><td>Color of the phone as a CSS-style string.</td></tr><tr><td><code>position</code></td><td>Object | Array</td><td><code>false</code></td><td><code>{ x: 0, y: 0, z: 0 }</code></td><td>The position of the phone. Can also be an array if multiple screens specified.</td></tr><tr><td><code>rotation</code></td><td>Object | Array</td><td><code>false</code></td><td><code>{ x: -0.2, y: 0.3, z: 0.06 }</code></td><td>The orientation of the phone described in rotation values arround the 3 axes. Can also be an array if multiple screens specified.</td></tr></tbody></table><h2 id="caveats" tabindex="-1">Caveats <a class="header-anchor" href="#caveats" aria-hidden="true">#</a></h2><ul><li>The <code>screen</code> prop is unreactive, so when using it as a video it&#39;s important to only render the <code>Mockup</code> element when the video is loaded. Check out the examples above to see how to do this.</li><li>The video on the model will not be shown if the original <code>&lt;video&gt;</code> element is hidden with <code>display: none</code>, so use <code>visibility: hidden</code> instead.</li><li>The video may not be autoplaying if the original <code>&lt;video&gt;</code> element is scrolled off screen.</li><li>Even with the mentioned above workarounds, the video may not be working in Safari.</li></ul></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><!----></div><!----></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide.md\":\"c2b95ef9\",\"index.md\":\"44663209\"}")</script>
+<span class="line"></span></code></pre></div><h2 id="avaliable-props" tabindex="-1">Avaliable props <a class="header-anchor" href="#avaliable-props" aria-hidden="true">#</a></h2><table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>screen</code></td><td>String | Element | Array</td><td><code>true</code></td><td>none</td><td>Path to an image that will be displayed on the phones screen or the <code>&lt;video&gt;</code> element displayed on the phones screen. When using the latter there are <a href="#caveats">caveats</a>. Can also be an array of any of the options above.</td></tr><tr><td><code>lightClr</code></td><td>String</td><td><code>false</code></td><td><code>&quot;white&quot;</code></td><td>Color of the light as a CSS-style string.</td></tr><tr><td><code>phoneClr</code></td><td>String</td><td><code>false</code></td><td><code>&quot;white&quot;</code></td><td>Color of the phone as a CSS-style string.</td></tr><tr><td><code>position</code></td><td>Object | Array</td><td><code>false</code></td><td><code>{ x: 0, y: 0, z: 0 }</code></td><td>The position of the phone. Can also be an array if multiple screens specified.</td></tr><tr><td><code>rotation</code></td><td>Object | Array</td><td><code>false</code></td><td><code>{ x: -0.2, y: 0.3, z: 0.06 }</code></td><td>The orientation of the phone described in rotation values arround the 3 axes. Can also be an array if multiple screens specified.</td></tr></tbody></table><h2 id="caveats" tabindex="-1">Caveats <a class="header-anchor" href="#caveats" aria-hidden="true">#</a></h2><ul><li>The <code>screen</code> prop is unreactive, so when using it as a video it&#39;s important to only render the <code>Mockup</code> element when the video is loaded. Check out the examples above to see how to do this.</li><li>The video on the model will not be shown if the original <code>&lt;video&gt;</code> element is hidden with <code>display: none</code>, so use <code>visibility: hidden</code> instead.</li><li>The video may not be autoplaying if the original <code>&lt;video&gt;</code> element is scrolled off screen.</li><li>Even with the mentioned above workarounds, the video may not be working in Safari.</li></ul></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2022-07-24T12:50:04.000Z" data-v-0ce8c960></time></p></div></div><!----></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide.md\":\"eb0895a6\",\"index.md\":\"6a67d774\"}")</script>
     <script type="module" async src="/vue-three-d-mockup/assets/app.b6ea30b2.js"></script>
     
   </body>