self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-11-29 22:48:10 +02:00
Code Issues Releases Activity

Doc: Updated website template

Browse Source
This commit is contained in:
Laurent Cozic
2021-07-04 18:14:32 +01:00
parent 6c1a6b0a61
commit af15b8359b
255 changed files with 36564 additions and 41733 deletions
Download Patch File Download Diff File Expand all files Collapse all files

638
docs/api/tutorials/toc_plugin/index.html
View File

@@ -1,5 +1,5 @@
<!doctype html>
<html>
<!DOCTYPE html>
<html lang="en">
<!--
@@ -13,320 +13,98 @@ https://github.com/laurent22/joplin/blob/dev/readme/api/tutorials/toc_plugin.md
-->
<head>
<title>Creating a table of content plugin | Joplin</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://joplinapp.org/css/bootstrap.min.css">
<link rel="shortcut icon" type="image/x-icon" href="https://joplinapp.org/favicon.ico">
<!-- <link rel="stylesheet" href="https://joplinapp.org/css/fontawesome-all.min.css"> -->
<link rel="stylesheet" href="https://joplinapp.org/css/fork-awesome.min.css">
<script src="https://joplinapp.org/js/jquery-3.2.1.slim.min.js"></script>
<style>
body {
background-color: #F1F1F1;
color: #333333;
}
<head>
<meta
charset="utf-8"
http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1"
/>
<link rel="icon" href="&#x2F;images/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Joplin website" />
<link
rel="stylesheet"
href="&#x2F;css/bootstrap5.0.2.min.css"
as="style"
/>
<link rel="stylesheet" href="&#x2F;css/fontawesome-all.min.css">
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
rel="stylesheet"
as="style"
media="all"
onload="this.media='all'; this.onload = null"
/>
<link rel="stylesheet" href="&#x2F;css/site.css" as="style" />
<title>Creating a table of content plugin | Joplin</title>
</head>
<body>
<div class="container-fluid" id="main-container">
<div class="with-profile white-bg" id="nav-section">
<div class="container">
<div class="row">
<div class="col-3">
<a href="https://joplinapp.org">
<img
src="&#x2F;images/logo-text-blue.svg"
alt=""
id="top-logo"
width="180"
>
</a>
</div>
<div class="col-9 text-right d-none d-md-block">
<!-- <a href="#" class="fw500">Help</a> -->
.root {
overflow: hidden;
}
<a href="https://joplinapp.org/gsoc2021/index/" class="fw500">GSoC 2021</a>
<a href="https://discourse.joplinapp.org/" class="fw500">Forum</a>
a[href^="mailto:"] {
word-break: break-all;
}
<!--
<a href="#" class="fw500">Joplin Cloud</a>
table {
margin-bottom: 1em;
}
td, th {
padding: .8em;
border: 1px solid #ccc;
}
<a class="button-link btn-blue ml-20" href="#">
<img src="&#x2F;images/download-icon.svg" alt="" />&nbsp;
Download</a
>
-->
</div>
<div class="col-9 text-right d-block d-md-none">
<!--
<span class="pointer"
><img src="&#x2F;images/profile-black-icon.png" alt=""
/></span>
&nbsp;&nbsp;
-->
<span class="pointer"
><img
src="&#x2F;images/mobile-menu-black-open-icon.png"
id="open-menu-mobile"
alt=""
/></span>
&nbsp;&nbsp;
.page-markdown table pre,
.page-markdown table blockquote {
margin-bottom: 0;
}
<div id="menu-mobile">
.page-markdown table pre,
.page-markdown table blockquote {
margin-bottom: 0;
}
<div class="text-right">
<img
src="&#x2F;images/close-icon.png"
alt=""
class="pointer"
id="close-menu-mobile"
/>
</div>
.page-markdown table pre {
background-color: rgba(0,0,0,0);
border: none;
margin: 0;
padding: 0;
}
<!--
<div class="text-center">
<img src="&#x2F;images/logo-text-blue.svg" alt="" />
<a href="#" class="fw500 mobile-menu-link">Contacts</a>
<a href="https://discourse.joplinapp.org/" class="fw500 mobile-menu-link">Forum</a>
<a href="#" class="fw500 mobile-menu-link">Help</a>
</div>
-->
h1, h2 {
border-bottom: 1px solid #eaecef;
padding-bottom: 0.3em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 600;
font-size: 2em;
margin-bottom: 16px;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.3em;
}
code {
color: black;
background-color: #eee;
border: 1px solid #ccc;
font-size: .85em;
/* word-break: break-all; */
}
pre code {
border: none;
}
pre {
font-size: .85em;
}
blockquote {
font-size: 1em;
color: #555;
};
#toc ul {
margin-bottom: 10px;
}
#toc > ul > li {
margin-bottom: 10px;
}
#toc {
padding-bottom: 1em;
}
.title {
display: flex;
align-items: center;
}
.title-icon {
display: flex;
height: 1em;
}
.title-text {
display: flex;
font-weight: normal;
margin-bottom: .2em;
margin-left: .5em;
}
.sub-title {
font-weight: normal;
}
.container {
background-color: white;
padding: 0;
box-shadow: 0 10px 20px #888888;
}
table.screenshots {
margin-top: 2em;
margin-bottom: 2em;
}
table.screenshots th {
height: 3em;
text-align: center;
}
table.screenshots th,
table.screenshots td {
border: 1px solid #C2C2C2;
}
img[align="left"] {
margin-right: 10px;
margin-bottom: 10px;
}
.mobile-screenshot {
height: 40em;
padding: 1em;
}
.cli-screenshot-wrapper {
background-color: black;
vertical-align: top;
padding: 1em 2em 1em 1em;
}
.cli-screenshot {
font-family: "Monaco", "Inconsolata", "CONSOLAS", "Deja Vu Sans Mono", "Droid Sans Mono", "Andale Mono", monospace;
background-color: black;
color: white;
border: none;
}
.cli-screenshot .prompt {
color: #48C2F0;
}
.top-screenshot {
margin-top: 2em;
text-align: center;
}
.header {
position: relative;
padding-left: 2em;
padding-right: 2em;
padding-top: 1em;
padding-bottom: 1em;
color: white;
background-color: #2B2B3D;
}
.header a h1 {
color: white;
}
.header a:hover {
text-decoration: none;
}
.content {
padding-left: 2em;
padding-right: 2em;
padding-bottom: 2em;
padding-top: 2em;
}
.forkme {
position: absolute;
right: 0;
top:0;
}
.nav-wrapper {
position: relative;
width: inherit;
}
.nav {
background-color: black;
display: flex;
flex-direction: row;
align-items: center;
}
.nav.sticky {
position:fixed;
top: 0;
width: inherit;
box-shadow: 0 0 10px #000000;
}
.nav a {
color: white;
display: inline-block;
padding: .6em .9em .6em .9em;
}
.nav ul {
padding-left: 2em;
margin-bottom: 0;
display: table-cell;
display: flex;
width: 100%;
/* For GSoC: */
min-width: 470px;
}
.nav ul li {
display: inline-block;
padding: 0;
}
.nav li.selected {
background-color: #222;
font-weight: bold;
}
.nav-right {
display: flex;
text-align: right;
vertical-align: middle;
line-height: 0;
margin-right: 10px;
}
.nav-right .share-btn {
display: none;
}
.nav-right .small-share-btn {
display: none;
}
.footer {
padding: 2em;
border-top: 1px solid #d4d4d4;
margin-top: 2em;
color: gray;
font-size: .9em;
}
a.heading-anchor {
display: inline-block;
opacity: 0;
width: 1.3em;
font-size: 0.7em;
margin-left: 0.4em;
line-height: 1em;
text-decoration: none;
transition: opacity 0.3s;
}
a.heading-anchor:hover,
h1:hover a.heading-anchor,
h2:hover a.heading-anchor,
h3:hover a.heading-anchor,
h4:hover a.heading-anchor,
h5:hover a.heading-anchor,
h6:hover a.heading-anchor {
opacity: 1;
}
@media (min-width: 992px) {
.content{
display: flex;
}
#toc{
display: block!important;
align-self: flex-start;
width: 300px;
position: sticky; top: 20px; left: 0;
}
.main{
width: calc(100% - 300px);
}
}
.bottom-links {
display: flex;
justify-content: center;
border-top: 1px solid #d4d4d4;
margin-top: 30px;
padding-top: 25px;
}
@media all and (min-width: 400px) {
.nav-right .share-btn {
display: inline-block;
}
.nav-right .small-share-btn {
display: none;
}
}
</style>
</head>
<body>
<div class="container root page-toc_plugin">
<div class="header">
<a class="forkme" href="https://github.com/laurent22/joplin"><img src="https://joplinapp.org/images/ForkMe.png"/></a>
<a href="https://joplinapp.org"><h1 class="title"><img class="title-icon" src="https://joplinapp.org/images/Icon512.png"><span class="title-text">Joplin</span></h1></a>
<p class="sub-title">An open source note taking and to-do application with synchronisation capabilities</p>
</div>
<div class="nav-wrapper">
<div class="nav">
<ul>
<li class=""><a href="https:&#x2F;&#x2F;joplinapp.org/" title="Home"><i class="fa fa-home"></i></a></li>
<li><a href="https://discourse.joplinapp.org" title="Forum">Forum</a></li>
<li><a class="gsoc" href="https://joplinapp.org/gsoc2021/index/" title="Google Summer of Code 2021">GSoC 2021</a></li>
</ul>
<div class="nav-right">
<iframe class="share-btn share-btn-github" src="https://ghbtns.com/github-btn.html?user=laurent22&repo=joplin&type=star&count=true" frameborder="0" scrolling="0" width="115px" height="20px"></iframe>
</div>
</div>
</div>
<div class="content">
<div id="toc"><ul>
<div id="toc-mobile"><div><ul>
<li>
<p>Applications</p>
<ul>
@@ -399,10 +177,124 @@ https://github.com/laurent22/joplin/blob/dev/readme/api/tutorials/toc_plugin.md
</ul>
</li>
</ul>
</div>
</div></div>
<div class="main">
<p><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=E8JMYD2LQ8MMA&amp;lc=GB&amp;item_name=Joplin+Development&amp;currency_code=EUR&amp;bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted"><img src="https://joplinapp.org/images/badges/Donate-PayPal-green.svg" alt="Donate using PayPal"></a> <a href="https://github.com/sponsors/laurent22/"><img src="https://joplinapp.org/images/badges/GitHub-Badge.svg" alt="Sponsor on GitHub"></a> <a href="https://www.patreon.com/joplin"><img src="https://joplinapp.org/images/badges/Patreon-Badge.svg" alt="Become a patron"></a> <a href="https://joplinapp.org/donate/#donations"><img src="https://joplinapp.org/images/badges/Donate-IBAN.svg" alt="Donate using IBAN"></a></p>
<!--
<br />
<br />
<br />
<br />
<a class="button-link btn-blue" href="#">
<img src="&#x2F;images/download-icon.svg" alt="" />
Download</a
>
<br />
<p class="light-blue mobile-menu-link-bottom text-center">
Joplin© 2021, All rights reserved
<br />
<a href="#" class="fw500">Terms & Conditions</a>
<br />
<a href="#" class="fw500">Privacy Policy</a>
</p>
-->
</div>
</div>
</div>
</div>
</div>
<div class="page-container page-toc_plugin">
<div class="container">
<!--
<div class="row">
<div class="col-12">
<h1 class="text-center">
Page <span class="frame-bg frame-bg-yellow">title</span>
</h1>
<p class="text-center">Hello word</p>
</div>
</div>
-->
<br />
<div class="row content-wrapper">
<div id="toc"><div><ul>
<li>
<p>Applications</p>
<ul>
<li><a href="https://joplinapp.org/desktop/">Desktop application</a></li>
<li><a href="https://joplinapp.org/mobile/">Mobile applications</a></li>
<li><a href="https://joplinapp.org/terminal/">Terminal application</a></li>
<li><a href="https://joplinapp.org/clipper/">Web Clipper</a></li>
</ul>
</li>
<li>
<p>Support</p>
<ul>
<li><a href="https://discourse.joplinapp.org">Joplin Forum</a></li>
<li><a href="https://joplinapp.org/markdown/">Markdown Guide</a></li>
<li><a href="https://joplinapp.org/e2ee/">How to enable end-to-end encryption</a></li>
<li><a href="https://joplinapp.org/conflict/">What is a conflict?</a></li>
<li><a href="https://joplinapp.org/debugging/">How to enable debug mode</a></li>
<li><a href="https://joplinapp.org/rich_text_editor/">About the Rich Text editor limitations</a></li>
<li><a href="https://joplinapp.org/faq/">FAQ</a></li>
</ul>
</li>
<li>
<p>Joplin API - Get Started</p>
<ul>
<li><a href="https://joplinapp.org/api/overview/">Joplin API Overview</a></li>
<li><a href="https://joplinapp.org/api/get_started/plugins/">Plugin development</a></li>
<li><a href="https://joplinapp.org/api/tutorials/toc_plugin/">Plugin tutorial</a></li>
</ul>
</li>
<li>
<p>Joplin API - References</p>
<ul>
<li><a href="https://joplinapp.org/api/references/plugin_api/classes/joplin.html">Plugin API</a></li>
<li><a href="https://joplinapp.org/api/references/rest_api/">Data API</a></li>
<li><a href="https://joplinapp.org/api/references/plugin_manifest/">Plugin manifest</a></li>
<li><a href="https://joplinapp.org/api/references/plugin_loading_rules/">Plugin loading rules</a></li>
<li><a href="https://joplinapp.org/api/references/plugin_theming/">Plugin theming</a></li>
</ul>
</li>
<li>
<p>Development</p>
<ul>
<li><a href="https://github.com/laurent22/joplin/blob/dev/BUILD.md">How to build the apps</a></li>
<li><a href="https://joplinapp.org/spec/e2ee/">End-to-end encryption spec</a></li>
<li><a href="https://joplinapp.org/spec/history/">Note History spec</a></li>
<li><a href="https://joplinapp.org/spec/sync_lock/">Sync Lock spec</a></li>
<li><a href="https://joplinapp.org/spec/plugins/">Plugin Architecture spec</a></li>
<li><a href="https://joplinapp.org/spec/search_sorting/">Search Sorting spec</a></li>
<li><a href="https://joplinapp.org/spec/server_file_url_format/">Server: File URL Format</a></li>
<li><a href="https://joplinapp.org/spec/server_delta_sync/">Server: Delta Sync</a></li>
<li><a href="https://joplinapp.org/spec/server_sharing/">Server: Sharing</a></li>
</ul>
</li>
<li>
<p>Google Summer of Code 2021</p>
<ul>
<li><a href="https://joplinapp.org/gsoc2021/index/">Google Summer of Code 2021</a></li>
<li><a href="https://joplinapp.org/gsoc2021/pull_request_guidelines/">How to submit a GSoC pull request</a></li>
<li><a href="https://joplinapp.org/gsoc2021/ideas/">Project Ideas</a></li>
</ul>
</li>
<li>
<p>About</p>
<ul>
<li><a href="https://joplinapp.org/changelog/">Changelog (Desktop App)</a></li>
<li><a href="https://joplinapp.org/changelog_cli/">Changelog (CLI App)</a></li>
<li><a href="https://joplinapp.org/changelog_server/">Changelog (Server)</a></li>
<li><a href="https://joplinapp.org/stats/">Stats</a></li>
<li><a href="https://joplinapp.org/donate/">Donate</a></li>
</ul>
</li>
</ul>
</div></div>
<div class="main-content">
<p><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=E8JMYD2LQ8MMA&amp;lc=GB&amp;item_name=Joplin+Development&amp;currency_code=EUR&amp;bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted"><img src="https://joplinapp.org/images/badges/Donate-PayPal-green.svg" alt="Donate using PayPal"></a> <a href="https://github.com/sponsors/laurent22/"><img src="https://joplinapp.org/images/badges/GitHub-Badge.svg" alt="Sponsor on GitHub"></a> <a href="https://www.patreon.com/joplin"><img src="https://joplinapp.org/images/badges/Patreon-Badge.svg" alt="Become a patron"></a> <a href="https://joplinapp.org/donate/#donations"><img src="https://joplinapp.org/images/badges/Donate-IBAN.svg" alt="Donate using IBAN"></a></p>
<hr>
<h1>Creating a table of content plugin<a name="creating-a-table-of-content-plugin" href="#creating-a-table-of-content-plugin" class="heading-anchor">🔗</a></h1>
<p>This tutorial will guide you through the steps to create a table of content plugin for Joplin. It will display a view next to the current note that will contain links to the sections of a note. It will be possible to click on one of the header to jump to the relevant section.</p>
@@ -678,38 +570,104 @@ document.addEventListener('click', event =&gt; {
<p><a href="https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/toc/">https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/toc/</a></p>
<p>Various improvements can be made such as improving the styling, making the header collapsible, etc. but that tutorial should provide the basic building blocks to do so. You might also want to check the <a href="https://joplinapp.org/api/references/plugin_api/classes/joplin.html">plugin API</a> for further information or head to the <a href="https://discourse.joplinapp.org/c/development/6">development forum</a> for support.</p>
<div class="bottom-links">
<a href="https://github.com/laurent22/joplin/blob/dev/readme/api/tutorials/toc_plugin.md">
<i class="fa fa-github"></i> Improve this doc
</a>
<div class="bottom-links">
<a href="https://github.com/laurent22/joplin/blob/dev/readme/api/tutorials/toc_plugin.md">
<i class="fab fa-github"></i> Improve this doc
</a>
</div>
</div>
</div>
</div>
</div>
<footer class="darkblue-bg">
<div class="container">
<div class="row">
<div class="col-3 d-none d-md-block">
<img src="&#x2F;images/logo-text.svg" alt="" width="150" />
</div>
<!--
<div class="col-12 col-md-6">
<p class="text-center">
<a href="#">Help</a>
&nbsp;&nbsp;&nbsp;
<a href="https://discourse.joplinapp.org/">Forum</a>
&nbsp;&nbsp;&nbsp;
<a href="#">Contacts</a>
</p>
</div>
<div class="col-12 col-md-3">
<br class="d-block d-md-none" />
<div class="text-right">
<a href="#" class="button-link btn-blue"
><img src="&#x2F;images/download-icon.svg" alt="" />&nbsp;
Download</a
>
</div>
</div>
-->
</div>
<div class="row">
<div class="col-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<img
src="&#x2F;images/logo-text.svg"
width="120"
class="img-center d-block d-md-none"
alt=""
/>
<br class="d-block d-md-none" />
<p class="text-center-sm">Copyright (C) 2016-2021 Laurent Cozic, all rights reserved</p>
</div>
<div class="col-12 col-md-6 right-links">
<p class="text-right text-center-sm">
<!--
<a href="#">Terms & Conditions</a>
<span class="d-none d-md-inline">&nbsp;&nbsp;&nbsp;</span>
<br class="d-block d-md-none" />
<br class="d-block d-md-none" />
-->
<a href="https://github.com/laurent22/joplin/" class="github-link"><i class="fab fa-github"></i> GitHub Repository</a>
<a href="/privacy/">Privacy Policy</a>
</p>
</div>
</div>
</div>
</footer>
</div>
<script>
function stickyHeader() {
return; // Disabled
if ($(window).scrollTop() > 179) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
}
<script
src="&#x2F;js/jquery-3.6.0.min.js"
rel="preload"
as="script"
></script>
<script src="&#x2F;js/script.js"></script>
$(window).scroll(function() {
stickyHeader();
});
<script>
function stickyHeader() {
return; // Disabled
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-103586105-1', 'auto');
ga('send', 'pageview');
</script>
if ($(window).scrollTop() > 179) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
}
</div></div>
$(window).scroll(function() {
stickyHeader();
});
<div class="footer">
Copyright (C) 2016-2021 Laurent Cozic
</div>
</body>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-103586105-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>