Deploying to gh-pages from @ 4babb65 🚀

en/docs/getting-started/index.html

@@ -9,4 +9,4 @@
         height: 100vh;
       }</style><aside id="content-toc" class="w-48 sticky docs-toc order-3 flex-shrink-0"><span class="block uppercase text-gray-600 font-bold text-xs tracking-wider pt-0">Contents</span><nav class="toc"><ol><li><a href="#setup-with-docker">Setup with Docker</a><ol><li><a href="#configure-compose-file">Configure compose file</a></li></ol></li><li><a href="#starting-the-server">Starting the server</a></li><li><a href="#setup-wizard">Setup Wizard</a></li></ol></nav></aside><main id="primary-content" class="mb-40 w-full px-14 py-14"><header class="flex justify-between items-center"><h1>Getting Started</h1><div class="flex items-center"><a title="Edit on GitHub" class="text-gray-500 hover:text-primaryDark no-underline" href="https://github.com/photoview/photoview.github.io/edit/master/./src/en/docs/getting-started/getting-started.md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-3"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg> </a><select class="ml-5" id="lg-switcher" onchange="changeLanguage()"><option class="lg-switcher-item" selected="selected" value="/en/docs/getting-started/">English</option><option class="lg-switcher-item" value="/fr/docs/getting-started/">Français</option></select><script>function changeLanguage() {
       document.location.href=document.getElementById("lg-switcher").value;
-    }</script></div></header><p><em>Get Photoview up and running as quickly as possible</em></p><h2 id="setup-with-docker" tabindex="-1"><a class="header-anchor" href="#setup-with-docker" aria-label="Anchor"></a> Setup with Docker</h2><p>The easiest way to setup Photoview is using Docker with docker-compose.</p><h3 id="configure-compose-file" tabindex="-1"><a class="header-anchor" href="#configure-compose-file" aria-label="Anchor"></a> Configure compose file</h3><p>Make a new <code>docker-compose.yml</code> file, and copy the content of <a href="https://github.com/photoview/photoview/blob/master/docker-compose.example.yml">docker-compose.example.yml</a> to it.</p><p>Edit <code>docker-compose.yml</code>, find the comments starting with <code>Change This:</code>, and change the values, to properly match your setup. If you are just testing locally, you don't have to change anything.</p><p>For more details see <a href="/en/docs/installation-docker/">Setup with Docker</a></p><h2 id="starting-the-server" tabindex="-1"><a class="header-anchor" href="#starting-the-server" aria-label="Anchor"></a> Starting the server</h2><p>Run the following command to start the server.</p><pre class="language-bash"><code class="language-bash">docker-compose up -d</code></pre><p>If the endpoint or the port hasn't been changed in the <code>docker-compose.yml</code> file, Photoview can now be accessed at <a href="http://localhost:8000">http://localhost:8000</a></p><h2 id="setup-wizard" tabindex="-1"><a class="header-anchor" href="#setup-wizard" aria-label="Anchor"></a> Setup Wizard</h2><p>When you first visit the site, you should be presented with an initial setup wizard.</p><picture class="block w-100 my-8"><source type="image/webp" srcset="/images/ZsEb170UwY-512.webp 512w" sizes="100vw"><source type="image/jpeg" srcset="/images/ZsEb170UwY-512.jpeg 512w" sizes="100vw"><img src="/images/ZsEb170UwY-512.jpeg" alt="initial setup screen"></picture><p>Enter a new <strong>username</strong> and <strong>password</strong>.</p><p>For the <strong>photo path</strong>, enter the path in the docker container where your photos are located. This can be set from the <code>docker-compose.yml</code> file under <code>api</code> -&gt; <code>volumes</code>. The default location is <code>/photos</code></p><p>A new admin user will be created, with access to the photos located at the path provided under the initial setup.</p><p>The photos will have to be scanned before they show up, you can start a scan manually, by navigating to <code>Settings</code> and clicking on <code>Scan All</code></p></main></div></div><div id="search-overlay" class="hidden"><div id="search-dimmer" class="fixed top-0 left-0 w-full h-full bg-black opacity-10"></div><div class="fixed top-20 left-1/2 transform -translate-x-1/2 bg-white shadow-lg border border-gray-200 rounded-md p-4 w-40rem overflow-y-auto h-3/4" role="dialog"><input id="search-field" type="search" class="mb-4 w-full py-2 px-3 text-sm border border-gray-200 rounded-md" placeholder="Search" aria-autocomplete="list" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" enterkeyhint="search" aria-controls="search-results-box"><div role="listbox" aria-label="Search" id="search-results-box" class="">Loading results...</div></div></div><script defer="defer" src="/docs/docs-scripts.js"></script></body></html>
+    }</script></div></header><p><em>Get Photoview up and running as quickly as possible</em></p><h2 id="setup-with-docker" tabindex="-1"><a class="header-anchor" href="#setup-with-docker" aria-label="Anchor"></a> Setup with Docker</h2><p>The easiest way to setup Photoview is using Docker with docker-compose.</p><h3 id="configure-compose-file" tabindex="-1"><a class="header-anchor" href="#configure-compose-file" aria-label="Anchor"></a> Configure compose file</h3><p>Make a new <code>docker-compose.yml</code> file, and copy the content of <a href="https://github.com/photoview/photoview/blob/master/docker-compose.example.yml">docker-compose.example.yml</a> to it.</p><p>Edit <code>docker-compose.yml</code>, find the comments starting with <code>Change This:</code>, and change the values, to properly match your setup. If you are just testing locally, you don't have to change anything.</p><p>For more details see <a href="/en/docs/installation-docker/">Setup with Docker</a></p><h2 id="starting-the-server" tabindex="-1"><a class="header-anchor" href="#starting-the-server" aria-label="Anchor"></a> Starting the server</h2><p>Run the following command to start the server.</p><pre class="language-bash"><code class="language-bash"><span class="token function">docker-compose</span> up <span class="token parameter variable">-d</span></code></pre><p>If the endpoint or the port hasn't been changed in the <code>docker-compose.yml</code> file, Photoview can now be accessed at <a href="http://localhost:8000">http://localhost:8000</a></p><h2 id="setup-wizard" tabindex="-1"><a class="header-anchor" href="#setup-wizard" aria-label="Anchor"></a> Setup Wizard</h2><p>When you first visit the site, you should be presented with an initial setup wizard.</p><picture class="block w-100 my-8"><source type="image/webp" srcset="/images/ZsEb170UwY-512.webp 512w" sizes="100vw"><source type="image/jpeg" srcset="/images/ZsEb170UwY-512.jpeg 512w" sizes="100vw"><img src="/images/ZsEb170UwY-512.jpeg" alt="initial setup screen"></picture><p>Enter a new <strong>username</strong> and <strong>password</strong>.</p><p>For the <strong>photo path</strong>, enter the path in the docker container where your photos are located. This can be set from the <code>docker-compose.yml</code> file under <code>api</code> -&gt; <code>volumes</code>. The default location is <code>/photos</code></p><p>A new admin user will be created, with access to the photos located at the path provided under the initial setup.</p><p>The photos will have to be scanned before they show up, you can start a scan manually, by navigating to <code>Settings</code> and clicking on <code>Scan All</code></p></main></div></div><div id="search-overlay" class="hidden"><div id="search-dimmer" class="fixed top-0 left-0 w-full h-full bg-black opacity-10"></div><div class="fixed top-20 left-1/2 transform -translate-x-1/2 bg-white shadow-lg border border-gray-200 rounded-md p-4 w-40rem overflow-y-auto h-3/4" role="dialog"><input id="search-field" type="search" class="mb-4 w-full py-2 px-3 text-sm border border-gray-200 rounded-md" placeholder="Search" aria-autocomplete="list" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" enterkeyhint="search" aria-controls="search-results-box"><div role="listbox" aria-label="Search" id="search-results-box" class="">Loading results...</div></div></div><script defer="defer" src="/docs/docs-scripts.js"></script></body></html>

en/docs/usage-basic-overview/index.html

@@ -7,6 +7,6 @@
         right: 0;
         width: 100vw;
         height: 100vh;
-      }</style><aside id="content-toc" class="w-48 sticky docs-toc order-3 flex-shrink-0"><span class="block uppercase text-gray-600 font-bold text-xs tracking-wider pt-0">Contents</span></aside><main id="primary-content" class="mb-40 w-full px-14 py-14"><header class="flex justify-between items-center"><h1>Basic Overview</h1><div class="flex items-center"><a title="Edit on GitHub" class="text-gray-500 hover:text-primaryDark no-underline" href="https://github.com/photoview/photoview.github.io/edit/master/./src/en/docs/usage-basic-overview.md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-3"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg> </a><select class="ml-5" id="lg-switcher" onchange="changeLanguage()"><option class="lg-switcher-item" selected="selected" value="/en/docs/usage-basic-overview/">English</option><option class="lg-switcher-item" value="/fr/docs/usage-basic-overview/">Français</option></select><script>function changeLanguage() {
+      }</style><aside id="content-toc" class="w-48 sticky docs-toc order-3 flex-shrink-0"><span class="block uppercase text-gray-600 font-bold text-xs tracking-wider pt-0">Contents</span><nav class="toc"><ol><li><a href="#timeline-view">Timeline view</a></li><li><a href="#left-hand-navigation-panel">Left-hand navigation panel</a></li></ol></nav></aside><main id="primary-content" class="mb-40 w-full px-14 py-14"><header class="flex justify-between items-center"><h1>Basic Overview</h1><div class="flex items-center"><a title="Edit on GitHub" class="text-gray-500 hover:text-primaryDark no-underline" href="https://github.com/photoview/photoview.github.io/edit/master/./src/en/docs/usage-basic-overview.md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-3"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg> </a><select class="ml-5" id="lg-switcher" onchange="changeLanguage()"><option class="lg-switcher-item" selected="selected" value="/en/docs/usage-basic-overview/">English</option><option class="lg-switcher-item" value="/fr/docs/usage-basic-overview/">Français</option></select><script>function changeLanguage() {
       document.location.href=document.getElementById("lg-switcher").value;
-    }</script></div></header><blockquote><p>TODO: Explain the basics of using Photoview:</p><ul><li>How the timeline works, and how to navigate to individual albums from the timeline.</li><li>How the albums section works, and how nested albums works.</li></ul></blockquote></main></div></div><div id="search-overlay" class="hidden"><div id="search-dimmer" class="fixed top-0 left-0 w-full h-full bg-black opacity-10"></div><div class="fixed top-20 left-1/2 transform -translate-x-1/2 bg-white shadow-lg border border-gray-200 rounded-md p-4 w-40rem overflow-y-auto h-3/4" role="dialog"><input id="search-field" type="search" class="mb-4 w-full py-2 px-3 text-sm border border-gray-200 rounded-md" placeholder="Search" aria-autocomplete="list" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" enterkeyhint="search" aria-controls="search-results-box"><div role="listbox" aria-label="Search" id="search-results-box" class="">Loading results...</div></div></div><script defer="defer" src="/docs/docs-scripts.js"></script></body></html>
+    }</script></div></header><picture class="block w-4/5 mx-auto my-6"><source type="image/webp" srcset="/images/H7tX1GzGl7-640.webp 640w, /images/H7tX1GzGl7-2758.webp 2758w" sizes="100vw"><source type="image/jpeg" srcset="/images/H7tX1GzGl7-640.jpeg 640w, /images/H7tX1GzGl7-2758.jpeg 2758w" sizes="100vw"><img src="/images/H7tX1GzGl7-640.jpeg" alt="Screenshot of Photoview"></picture><h2 id="timeline-view" tabindex="-1"><a class="header-anchor" href="#timeline-view" aria-label="Anchor"></a> Timeline view</h2><p>After logging in to Photoview, you will see all of your photos in reverse time order with the newest ones first and the oldest ones at the bottom. The photos are grouped by the day they were taken. This is called the <em>timeline view</em> and you can always return to this view by clicking the top-most icon on the panel at the left of the screen.</p><p>At first, it seems that there are only a few rows of photos when you scroll down, but Photoview will fill the webpage with more and more photos when you continue to scroll down.</p><p>You can choose if you want to see <em>all</em> of your timeline, or if it should start from a particular point in time. You choose the time period by selecting the appropriate starting point in the drop-down box at the top left of the photos, marked &quot;Date&quot;.</p><p>In Timeline view you can do the following:</p><ul><li><strong>Click on a photo</strong> to display a large version of that photo. From there you can display the next photo (moving <em>down</em> in the timeline) by clicking on the right arrow, or display the previous photo (moving <em>up</em> in the timeline) by clicking on the left arrow. There is an &quot;X&quot; in the top left of the photo. Clicking this takes you back to the timeline view.</li><li><strong>Click on the heart.</strong> Placing the mouse cursor over the photo, you will see two symbols: In the bottom-left of the photo is an outline of a ♥ and in the upper-right there is an ⓘ. Clicking the ♥ outline changes it to a solid ♥ to indicate that the photo is one of your favorites. On the top of the screen, there is a <code>checkbox</code> with the text <em>Show only favorites</em> next to it, and checking it will only show the photos that you have marked with the ♥.</li><li><strong>Click on the ⓘ</strong> to open up a panel on the right side of the screen where you can see some metadata for that photo, such as when the photo was taken, with which camera, its exposure settings, etc. It also shows the <em>path to the album/folder</em> where the photo is stored. Clicking on the album path allows you to see all the photos from that album. Furthermore, you can also see which faces that have been identified and the location where it was taken (if known). At the bottom of the panel, you have the option to download this photo to your computer or create a link that can be shared with others. More on that in <a href="/en/docs/usage-sharing">Share Albums and Media</a>.</li></ul><h2 id="left-hand-navigation-panel" tabindex="-1"><a class="header-anchor" href="#left-hand-navigation-panel" aria-label="Anchor"></a> Left-hand navigation panel</h2><p>On the left-hand side of the screen, you have more options for how to view your photos. These are:</p><ul><li><p><strong>Timeline</strong> - covered above.</p></li><li><p><strong>Albums</strong> - allows you to view all photos that reside in an album on your server. In Photoview, an album is the same as a folder on your server. This means that you can have as many levels of albums as you wish (only limited by the file system of the server) and they get their names from the names of the folders in your filesystem. When in album view, you can choose the sort order of the photos in the following way:</p><ul><li>By Date shot</li><li>By Date imported</li><li>By Title</li><li>By Kind (photos or videos)</li></ul><p>Any of these sort orders can be reversed by clicking the little arrow to the right of the sort-order selection box.</p><p>In album view, when you click the ⓘ on the top right of a photo, you have the option to set this photo as the <em>album cover photo</em> of that album. In album view, you will also see a ⚙️ button next right to the name of the album. Clicking this allows you to create a <em>share</em>, essentially a <em>link</em> to that album that you can share with your friends. By copying the link and including it in an e-mail or some other messaging service you can invite your friends to have a look at the photos in that album. You can also choose to download the album to the computer you are using to view the photos. You have the option to download the photos in full resolution or different scaled-down versions.</p></li><li><p><strong>Places</strong> - If this feature was enabled at installation time, this presents you with a map where your photos were taken (provided that they have geocoding information, which they normally have if they are taken with a mobile phone). You can zoom in and out of the map by using the scroll wheel of your mouse. As you scroll in, you can see that the level of information about the location is becoming more and more precise. Clicking one of the pictures allows you to see all the photos from that location, using the left and right arrows to switch between them. For more details, see <a href="/en/docs/usage-places">Places</a>.</p></li><li><p><strong>People</strong> - If enabled at installation time, this presents you with an array of faces that have been identified in your photos. When you start there are no names assigned to the faces, this is something that you have to do. For more details click <a href="/en/docs/usage-people">People</a>.</p></li><li><p><strong>Settings</strong> - The last button is for changing some settings, such as adding more paths to libraries of photos that you want Photoview to present. Note that these paths have to be accessible to Photoview, and if you installed Photoview as a Docker container, the libraries would have to be visible inside the container. This is normally done through Docker Volumes. You can read more about all settings on the <a href="/en/docs/usage-settings/usage-settings/">Settings Page</a>.</p></li></ul></main></div></div><div id="search-overlay" class="hidden"><div id="search-dimmer" class="fixed top-0 left-0 w-full h-full bg-black opacity-10"></div><div class="fixed top-20 left-1/2 transform -translate-x-1/2 bg-white shadow-lg border border-gray-200 rounded-md p-4 w-40rem overflow-y-auto h-3/4" role="dialog"><input id="search-field" type="search" class="mb-4 w-full py-2 px-3 text-sm border border-gray-200 rounded-md" placeholder="Search" aria-autocomplete="list" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" enterkeyhint="search" aria-controls="search-results-box"><div role="listbox" aria-label="Search" id="search-results-box" class="">Loading results...</div></div></div><script defer="defer" src="/docs/docs-scripts.js"></script></body></html>