website/docs/plugins/plugin/io.github.jackgruber.noteli.../index.html

470 lines
15 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Common page configuration that goes in the <head></head> tag -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,viewport-fit=cover"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src * data: ; style-src 'self' 'unsafe-inline' ; child-src 'none' ; connect-src 'self' raw.githubusercontent.com ;"/>
<link rel="icon" type="image/x-icon" href="&#x2F;plugins/favicon.png" />
<link rel="stylesheet" href="&#x2F;plugins/fontawesome-6.4.2/css/all.min.css" type="text/css"/>
<!-- Allow included JavaScipt files to determine the root directory of this site. -->
<script id="site-root" type="text/plain">/plugins</script>
<!-- Scripts used by all pages -->
<script src="&#x2F;plugins/bundle-main.js"></script>
<script src="&#x2F;plugins/bundle-components.js"></script>
<title>Joplin Plugins - Note list (Preview)</title>
<meta property="og:title" content="Joplin Plugin: Note list (Preview)"/>
<meta property="og:description" content="Displays a note preview in the note list"/>
<meta property="og:image" content="https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;JackGruber&#x2F;joplin-plugin-notelistpreview&#x2F;HEAD&#x2F;img&#x2F;icon_256.png"/>
<script src="&#x2F;plugins/bundle-pluginPage.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
<div class="container">
<a class="navbar-brand" href="https://joplinapp.org/">
<img src="/plugins/joplin-logo.png" alt="Home"/>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto me-2 mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/plugins">Plugins</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://joplinapp.org/news/">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://joplinapp.org/help/">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://discourse.joplinapp.org/">Forum</a>
</li>
</ul>
<div class="search-field col-12 col-lg-3 mb-3 mb-lg-0 me-lg-3">
<i class="fa-solid fa-magnifying-glass search-icon" alt=""></i>
<input
type="search"
class="form-control search-input"
placeholder="Search..."
id="search-input"/>
<div class="search-results" id="search-results-container" aria-live="polite"></div>
</div>
</div>
</div>
</nav>
<main class="plugin-details">
<nav aria-label="breadcrumb" class="container breadcrumb-container">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="&#x2F;plugins"><i class="fas fa-home"></i> Home</a>
</li>
<li class="breadcrumb-item"><a id="current-category-nav-link" href="&#x2F;plugins/">All</a></li>
<li class="breadcrumb-item active" aria-current="page">Note list (Preview)</li>
</ol>
</nav>
<div class="plugin-overview">
<div class="spacer">
</div>
<div class="plugin-page-header">
<div class="title plugin-page-title">
<img
class="icon plugin-icon -dark-mode-shadow"
src="https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;JackGruber&#x2F;joplin-plugin-notelistpreview&#x2F;HEAD&#x2F;img&#x2F;icon_256.png"
alt="Plugin icon"
/>
<div>
<h1 class="card-title">Note list (Preview)</h1>
<div class="card-title pb-2">
by
<a
href="./?search=author%3D%22JackGruber%22%20max-results%3D20"
style="display: inline;"
>
JackGruber
</a>
</div>
</div>
</div>
<div class="categories">
<a class="plugin-category me-2 badge" href="&#x2F;plugins/#tab-themes">
<i class="fas fa-tag"></i> themes
</a>
<a class="plugin-category me-2 badge" href="&#x2F;plugins/#tab-viewer">
<i class="fas fa-tag"></i> viewer
</a>
<a class="plugin-category me-2 badge" href="&#x2F;plugins/#tab-appearance">
<i class="fas fa-tag"></i> appearance
</a>
</div>
</div>
<div class="download-link-container">
<a
href="/plugins/downloadPlugin.html?plugin=io.github.jackgruber.notelistpreview"
class="btn btn-primary process--append-parent-tab-to-href"
>
Install Plugin
</a>
</div>
</div>
<div class="plugin-content">
<div class="secondary-section">
<div class="content" id="screenshots-container">
<div id="raw-screenshots">
<img src="https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;JackGruber&#x2F;joplin-plugin-notelistpreview&#x2F;HEAD&#x2F;img&#x2F;main.png" alt="Screenshot: Showing the Note liste preview with thumbnail"/>
<img src="https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;JackGruber&#x2F;joplin-plugin-notelistpreview&#x2F;HEAD&#x2F;img&#x2F;showcase1.png" alt="Screenshot: Showing the Note liste preview"/>
<img src="https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;JackGruber&#x2F;joplin-plugin-notelistpreview&#x2F;HEAD&#x2F;img&#x2F;showcase2.png" alt="Screenshot: Showing the Note liste preview with thumbnail and tags"/>
<img src="https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;JackGruber&#x2F;joplin-plugin-notelistpreview&#x2F;HEAD&#x2F;img&#x2F;showcase3.png" alt="Screenshot: Showing the Note liste preview with thumbnail and tags (Dark theme)"/>
<img src="https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;JackGruber&#x2F;joplin-plugin-notelistpreview&#x2F;HEAD&#x2F;img&#x2F;showcase4.png" alt="Screenshot: Showing the Note liste preview with square thumbnail and full size"/>
</div>
<!-- See https://getbootstrap.com/docs/5.3/components/carousel/ -->
<div id="screenshots-carousel" class="carousel slide">
<button
class="carousel-control-prev"
type="button"
data-bs-target="#screenshots-carousel"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#screenshots-carousel"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<div class="container section">
<h3>Description</h3>
<p class="card-text pb-4">Displays a note preview in the note list</p>
</div>
<div class="container section">
<h3>Additional Information</h3>
<table class="additional-information-table">
<tbody>
<tr>
<th>Links:</th>
<td>
<ul class="list-group list-group-flush text-break">
<li><a href=https:&#x2F;&#x2F;github.com&#x2F;JackGruber&#x2F;joplin-plugin-notelistpreview style="display: block;"><i class="fa-solid fa-link"></i> Repository</a></li>
<li><a href=https:&#x2F;&#x2F;github.com&#x2F;JackGruber&#x2F;joplin-plugin-notelistpreview&#x2F;blob&#x2F;master&#x2F;README.md style="display: block;"><i class="fa-solid fa-link"></i> Homepage</a></li>
<li>
<a
id="view-plugin-source-link"
href="&#x2F;plugins/view-source.html?plugin=io.github.jackgruber.notelistpreview"
class="process--append-parent-tab-to-href"
>
<i class="fa-solid fa-code"></i> View source
</a>
</li>
</ul>
</td>
</tr>
<tr>
<th>Maintainers:</th>
<td>
<a href="./?search=maintainer%3D%22jackgruber%22%20max-results%3D20" class="maintainer-link">
jackgruber
</a>
</td>
</tr>
<tr><th>Version:</th><td>1.1.0</td></tr>
<tr><th>Minimum app version:</th><td>3.0.3</td></tr>
<tr><th>Downloads: This version:</th><td>1021</td></tr>
<tr><th>Last updated:</th><td class="process--format-as-local-time">2024-06-09T09:38:45Z</td></tr>
</tbody>
</table>
</div>
<div class="container section" id="readme" data--is-rendered-markdown>
<h1>Joplin Plugin: Note list (Preview) <img src="https://raw.githubusercontent.com/JackGruber/joplin-plugin-notelistpreview/HEAD/img/icon_32.png" /></h1>
<p>A plugin to add a preview to the Joplin note list.</p>
<img src="https://raw.githubusercontent.com/JackGruber/joplin-plugin-notelistpreview/HEAD/img/main.png" />
<ul>
<li><a href="#installation">Installation</a>
<ul>
<li><a href="#automatic">Automatic</a></li>
<li><a href="#manual">Manual</a>
<ul>
<li><a href="#manual-via-file-system">Manual via file system</a></li>
<li><a href="#manual-via-file-via-gui">Manual via file via GUI</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#usage">Usage</a></li>
<li><a href="#plugin-options">Plugin options</a></li>
<li><a href="#layouts">Layouts</a>
<ul>
<li><a href="#layout-1">Layout 1</a></li>
<li><a href="#layout-2">Layout 2</a></li>
</ul>
</li>
<li><a href="#examples-with-settings">Examples with settings</a>
<ul>
<li><a href="#date-and-tags">Date and Tags</a></li>
<li><a href="#thumbnail-right">Thumbnail right</a></li>
<li><a href="#square-thumbnail">Square Thumbnail</a></li>
</ul>
</li>
<li><a href="#faq">FAQ</a>
<ul>
<li><a href="#confidential-notes">Confidential notes</a></li>
</ul>
</li>
<li><a href="#changelog">Changelog</a></li>
</ul>
<h2>Installation</h2>
<h3>Automatic</h3>
<ul>
<li>Go to <code>Tools &gt; Options &gt; Plugins</code></li>
<li>Search for <code>Note list (Preview)</code></li>
<li>Click Install plugin</li>
<li>Restart Joplin to enable the plugin</li>
</ul>
<h3>Manual</h3>
<h4>Manual via file system</h4>
<ul>
<li>Download the latest released JPL package (<code>io.github.jackgruber.notelistpreview.jpl</code>) from <a href="https://github.com/JackGruber/joplin-plugin-notelistpreview/releases/latest">here</a></li>
<li>Close Joplin</li>
<li>Copy the downloaded JPL package in your profile <code>plugins</code> folder</li>
<li>Start Joplin</li>
</ul>
<h4>Manual via file via GUI</h4>
<ul>
<li>Download the latest released JPL package (<code>io.github.jackgruber.notelistpreview.jpl</code>) from <a href="https://github.com/JackGruber/joplin-plugin-notelistpreview/releases/latest">here</a></li>
<li>Go to <code>Tools &gt; Options &gt; Plugins</code></li>
<li>Click on the gear wheel and select <code>Install from file</code></li>
<li>Select the downloaded JPL file</li>
<li>Restart Joplin</li>
</ul>
<h2>Usage</h2>
<p>The new note list view can be activated under <code>View &gt; Note list style &gt; Preview</code>.
<img src="https://raw.githubusercontent.com/JackGruber/joplin-plugin-notelistpreview/HEAD/img/enable.png" /></p>
<h2>Plugin options</h2>
<p>Settings for the plugin, accessible at <code>Tools &gt; Options &gt; Note list (Preview)</code>.
Joplin must be restarted after changing settings!</p>
<h2>Layouts</h2>
<h3>Layout 1</h3>
<table class="table table-hover undefined">
<thead>
<tr>
<th>Thumbnail</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<tr>
<td>Right</td>
<td><img width="300px" src="https://raw.githubusercontent.com/JackGruber/joplin-plugin-notelistpreview/HEAD/img/layout1_img_r.svg" /></td>
</tr>
<tr>
<td>Left</td>
<td><img width="300px" src="https://raw.githubusercontent.com/JackGruber/joplin-plugin-notelistpreview/HEAD/img/layout1_img_l.svg" /></td>
</tr>
<tr>
<td>No</td>
<td><img width="300px" src="https://raw.githubusercontent.com/JackGruber/joplin-plugin-notelistpreview/HEAD/img/layout1.svg" /></td>
</tr>
</tbody>
</table>
<h3>Layout 2</h3>
<table class="table table-hover undefined">
<thead>
<tr>
<th>Thumbnail</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<tr>
<td>Right</td>
<td><img width="300px" src="https://raw.githubusercontent.com/JackGruber/joplin-plugin-notelistpreview/HEAD/img/layout2_img_r.svg" /></td>
</tr>
<tr>
<td>Left</td>
<td><img width="300px" src="https://raw.githubusercontent.com/JackGruber/joplin-plugin-notelistpreview/HEAD/img/layout2_img_l.svg" /></td>
</tr>
<tr>
<td>No</td>
<td><img width="300px" src="https://raw.githubusercontent.com/JackGruber/joplin-plugin-notelistpreview/HEAD/img/layout2.svg" /></td>
</tr>
</tbody>
</table>
<h2>Examples with settings</h2>
<h3>Date and Tags</h3>
<img src="https://raw.githubusercontent.com/JackGruber/joplin-plugin-notelistpreview/HEAD/img/example_tag.png" />
<table class="table table-hover undefined">
<thead>
<tr>
<th>Setting</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Note excerpt</td>
<td>115</td>
</tr>
<tr>
<td>Last line</td>
<td>{{tags}}</td>
</tr>
</tbody>
</table>
<h3>Thumbnail right</h3>
<img src="https://raw.githubusercontent.com/JackGruber/joplin-plugin-notelistpreview/HEAD/img/example_thumbnail_right.png" />
<table class="table table-hover undefined">
<thead>
<tr>
<th>Setting</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thumbnail</td>
<td>Right</td>
</tr>
<tr>
<td>Note excerpt</td>
<td>100</td>
</tr>
</tbody>
</table>
<h3>Square Thumbnail</h3>
<img src="https://raw.githubusercontent.com/JackGruber/joplin-plugin-notelistpreview/HEAD/img/example_layout2_square_right.png" />
<table class="table table-hover undefined">
<thead>
<tr>
<th>Setting</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Layout</td>
<td>Layout 2</td>
</tr>
<tr>
<td>Thumbnail</td>
<td>Right</td>
</tr>
<tr>
<td>Item height</td>
<td>95</td>
</tr>
<tr>
<td>Thumbnail size</td>
<td>85</td>
</tr>
</tbody>
</table>
<h2>FAQ</h2>
<h3>Confidential notes</h3>
<p>Notes can be marked as confidential using tags or the context menu.
The tags witch mark the note confidentiality must be configured in the plugin settings.</p>
<h2>Changelog</h2>
<p>See <a href="https://raw.githubusercontent.com/JackGruber/joplin-plugin-notelistpreview/HEAD/CHANGELOG.md">Changelog</a></p>
</div>
</div>
</main>
<footer class="page-footer">
<div class="plugin-documentation-section">
<div class="heading">
Would you like to submit or develop a plugin? Consult our documentation:
</div>
<a class="btn btn-outline-primary" href="https://joplinapp.org/help/api/get_started/plugins">
See documentation
</a>
</div>
<div class="links legal-and-about-links">
<div class="copyright">© Joplin 2023 - 2024</div>
<a class="link terms-and-conditions" href="&#x2F;plugins/terms-and-conditions.html">Terms and conditions</a>
<a class="link privacy" href="&#x2F;plugins/privacy-policy.html">Privacy policy</a>
</div>
<div class="site-links">
<a
class="a-github"
href="https://github.com/joplin/website-plugin-discovery"
aria-label="GitHub"
title="GitHub"
>
<i class="fab fa-github"></i>
</a>
<a
class="a-discord"
href="https://discord.com/invite/VSj7AFHvpq"
aria-label="Discord"
title="Discord"
>
<i class="fab fa-discord"></i>
</a>
<a
class="a-linkedin"
href="https://www.linkedin.com/company/joplin"
aria-label="LinkedIn"
title="LinkedIn"
>
<i class="fab fa-linkedin"></i>
</a>
<a
class="a-twitter"
href="https://twitter.com/joplinapp"
aria-label="Twitter"
title="Twitter"
>
<i class="fab fa-twitter"></i>
</a>
<a
class="a-mastodon"
href="https://mastodon.social/@joplinapp"
aria-label="Mastodon"
title="Mastodon"
>
<i class="fab fa-mastodon"></i>
</a>
<a
class="a-patreon"
href="https://www.patreon.com/joplin"
aria-label="Patreon"
title="Patreon"
>
<i class="fab fa-patreon"></i>
</a>
</div>
</footer>
</body>
</html>