mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-12-27 19:07:15 +08:00
Merge branch 'gh-pages' of github.com:nylas/N1 into gh-pages
This commit is contained in:
Evan Morikawa
commit
61f1e89ac4
3 changed files with 78 additions and 66 deletions
File diff suppressed because one or more lines are too long
|
|
@ -4,14 +4,17 @@ title: N1 Documentation
|
|||
edit_url: "https://github.com/nylas/N1/blob/master/docs/index.md"
|
||||
---
|
||||
<style>
|
||||
.list-heading {
|
||||
color: #000;
|
||||
.list-heading:not(.api){
|
||||
color: #555;
|
||||
}
|
||||
.list-heading h4 {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
div.description {
|
||||
border-top: 1px solid #DDD;
|
||||
padding-top: 10px;
|
||||
color: #888;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
min-height: 65px;
|
||||
}
|
||||
|
|
@ -49,31 +52,28 @@ edit_url: "https://github.com/nylas/N1/blob/master/docs/index.md"
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid wider overlay">
|
||||
{% for section in site.data.sidebar.sections %}
|
||||
<div class="unit one-third">
|
||||
<a class="list-heading"
|
||||
href="{{section.link}}"
|
||||
{% if section.external %}target="_blank"{% endif %}>
|
||||
<h4>{{section.name}}</h4>
|
||||
</a>
|
||||
<div class="description">{{section.description}}</div>
|
||||
{% if section.name != "API Reference" %}
|
||||
{% for item in section.items %}
|
||||
<div class="list-item">
|
||||
<a href="{{item.link}}" {% if item.external %}target="_blank"{% endif %}>
|
||||
{{item.name}}
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="list-item">
|
||||
<a href="APIReference.html">
|
||||
Index
|
||||
<div class="overlay">
|
||||
<div class="grid wider">
|
||||
{% for section in site.data.sidebar.sections %}
|
||||
{% if section.name == "API Reference" %}</div><div class="grid wider">{% endif %}
|
||||
<div class="unit {% if section.name == 'API Reference' %}whole{% else %}half{% endif %}">
|
||||
<a class="list-heading {% if section.name == 'API Reference' %}api{% endif %}"
|
||||
href="{{section.link}}"
|
||||
{% if section.external %}target="_blank"{% endif %}>
|
||||
<h4>{{section.name}}</h4>
|
||||
</a>
|
||||
<div class="description">{{section.description}}</div>
|
||||
{% if section.name != "API Reference" %}
|
||||
{% for item in section.items %}
|
||||
<div class="list-item">
|
||||
<a href="{{item.link}}" {% if item.external %}target="_blank"{% endif %}>
|
||||
{{item.name}}
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -56,8 +56,10 @@ title: Getting started with plugins
|
|||
color: #008800;
|
||||
}
|
||||
table.code td.code span.op{
|
||||
font-weight: bold;
|
||||
color: #DD7700
|
||||
color: #AA00AA;
|
||||
}
|
||||
table.code td.code span.fn{
|
||||
color: #880000;
|
||||
}
|
||||
|
||||
div.links-overlay {
|
||||
|
|
@ -67,6 +69,8 @@ title: Getting started with plugins
|
|||
}
|
||||
div.links-overlay p {
|
||||
margin-top: 5px;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.grid .unit:last-child {
|
||||
|
|
@ -94,9 +98,9 @@ title: Getting started with plugins
|
|||
<div class="grid wider">
|
||||
<div class="unit whole">
|
||||
<p>
|
||||
Plugins lie at the heart of N1. The thread list, composer
|
||||
and other core parts of the app are packages bundled with the
|
||||
app, and you can create your own in a matter of minutes.
|
||||
Plugins lie at the heart of N1. The thread list, message composer
|
||||
and other core parts are just packages bundled with the
|
||||
app. You can create your own packages in a matter of minutes!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -122,12 +126,12 @@ title: Getting started with plugins
|
|||
</div>
|
||||
<div class="unit two-thirds" style="padding-left: 20px;">
|
||||
<h3>2. Create a plugin</h3>
|
||||
<p>First, switch over to development mode: go to the <code class="background">Developer</code> menu
|
||||
and select <code class="background">Relaunch with debug flags...</code>. Dev mode turns on better exception
|
||||
logging and enables hot-reloading, but runs a bit slower.
|
||||
<p>First, switch over to Developer Mode. Go to the <code class="background">Developer</code> menu
|
||||
and select <code class="background">Relaunch with debug flags...</code>. Developer Mode turns on better exception
|
||||
logging and enables hot-reloading.
|
||||
</p>
|
||||
<p>Next, choose <code class="background">Create a Package...</code> from the the <code class="background">Developer</code> menu,
|
||||
and name your new plugin. This will create a directory in <code class="background">~/.nylas/dev/packages</code>
|
||||
<p>Next, choose <code class="background">Create a Package...</code> from the <code class="background">Developer</code> menu,
|
||||
and name your new plugin. This creates a directory in <code class="background">~/.nylas/dev/packages</code>
|
||||
containing your new plugin.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -139,12 +143,12 @@ title: Getting started with plugins
|
|||
<p>
|
||||
Open the file <code class="background"><your-package-name>/lib/my-message-sidebar.cjsx</code> in your
|
||||
favorite text editor. Your new plugin is pre-filled with a simple example component
|
||||
for the message sidebar (on the right when you're viewing an email), which is defined in this file. It
|
||||
just shows the name of the selected contact, but with a few quick changes we can build something interesting.
|
||||
for the message sidebar (on the right when you're viewing an email). It only shows the name of the
|
||||
selected contact, but with a few quick changes we can build something more interesting.
|
||||
</p>
|
||||
<p>
|
||||
Scroll down to line 34, the <code class="background">render</code> method. We can replace the code here
|
||||
to change what shows up in the sidebar, and see it happen live when we save.
|
||||
Scroll down to line 34, the <code class="background">render</code> method. Replace the code here
|
||||
to change what shows up in the sidebar. See your changes happen live when you save!
|
||||
</p>
|
||||
</div>
|
||||
<div class="unit two-fifths">
|
||||
|
|
@ -152,20 +156,21 @@ title: Getting started with plugins
|
|||
<tbody>
|
||||
<tr><td class="filename" colspan="2"><your-package>/lib/my-message-sidebar.cjsx</td></tr>
|
||||
<tr><td class="line-num">30</td><td class="code"></td></tr>
|
||||
<tr><td class="line-num">31</td><td class="code">componentWillUnmount: =></td></tr>
|
||||
<tr><td class="line-num">32</td><td class="code"> @unsubscribe()</td></tr>
|
||||
<tr><td class="line-num">31</td><td class="code"><span class="fn">componentWillUnmount</span>: =></td></tr>
|
||||
<tr><td class="line-num">32</td><td class="code"> @<span class="fn">unsubscribe</span>()</td></tr>
|
||||
<tr><td class="line-num">33</td><td class="code"></td></tr>
|
||||
<tr><td class="line-num">34</td><td class="code hlt">render: =></td></tr>
|
||||
<tr><td class="line-num">34</td><td class="code hlt"><span class="fn">render</span>: =></td></tr>
|
||||
<tr><td class="line-num">35</td><td class="code hlt"> <span class="op">if</span> @state.contact</td></tr>
|
||||
<tr><td class="line-num">36</td><td class="code hlt"> content = @_renderContent()</td></tr>
|
||||
<tr><td class="line-num">36</td><td class="code hlt"> content = @<span class="fn">_renderContent</span>()</td></tr>
|
||||
<tr><td class="line-num">37</td><td class="code hlt"> <span class="op">else</span></td></tr>
|
||||
<tr><td class="line-num">38</td><td class="code hlt"> content = @_renderPlaceholder()</td></tr>
|
||||
<tr><td class="line-num">38</td><td class="code hlt"> content = @<span class="fn">_renderPlaceholder</span>()</td></tr>
|
||||
<tr><td class="line-num">39</td><td class="code hlt"></td></tr>
|
||||
<tr><td class="line-num">40</td><td class="code hlt"> <div className=<span class="str">"my-message-sidebar"</span>></td></tr>
|
||||
<tr><td class="line-num">40</td><td class="code hlt">
|
||||
<<span class="fn">div</span> className=<span class="str">"my-message-sidebar"</span>></td></tr>
|
||||
<tr><td class="line-num">41</td><td class="code hlt"> {content}</td></tr>
|
||||
<tr><td class="line-num">42</td><td class="code hlt"> </div></td></tr>
|
||||
<tr><td class="line-num">42</td><td class="code hlt"> </<span class="fn">div</span>></td></tr>
|
||||
<tr><td class="line-num">43</td><td class="code"></td></tr>
|
||||
<tr><td class="line-num">44</td><td class="code">_renderContent: =></td></tr>
|
||||
<tr><td class="line-num">44</td><td class="code"><span class="fn">_renderContent</span>: =></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -179,7 +184,7 @@ title: Getting started with plugins
|
|||
<div class="unit half" style="margin-top: 50px">
|
||||
<p>
|
||||
Try opening a message in N1 - you'll see the new package's example text show up on the
|
||||
sidebar. Now delete the content of the <code class="background">render</code> method
|
||||
sidebar. Delete the content of the <code class="background">render</code> method
|
||||
and save - the text should disappear.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -199,14 +204,20 @@ title: Getting started with plugins
|
|||
<tbody>
|
||||
<tr><td class="filename" colspan="2"><your-package>/lib/my-message-sidebar.cjsx</td></tr>
|
||||
<tr><td class="line-num">33</td><td class="code"></td></tr>
|
||||
<tr><td class="line-num">34</td><td class="code">render: =></td></tr>
|
||||
<tr><td class="line-num">35</td><td class="code add"> <div className=<span class="str">"email-color"</span> style={@_getStyles()}></div></td></tr>
|
||||
<tr><td class="line-num">34</td><td class="code"><span class="fn">render</span>: =></td></tr>
|
||||
<tr><td class="line-num">35</td><td class="code add">
|
||||
<<span class="fn">div</span> className=<span class="str">"email-color"</span> style={@<span class="fn">_getStyles</span>()}></<span class="fn">div</span>></td></tr>
|
||||
<tr><td class="line-num">36</td><td class="code add"></td></tr>
|
||||
<tr><td class="line-num">37</td><td class="code add">_getStyles: =></td></tr>
|
||||
<tr><td class="line-num">38</td><td class="code add"> domain = @state.contact.email.split("@")[1]</td></tr>
|
||||
<tr><td class="line-num">39</td><td class="code add"> hue = (domain.split('').reduce(((sum, char) -> sum + char.charCodeAt(0)), 0) % 36)*10</td></tr>
|
||||
<tr><td class="line-num">40</td><td class="code add"> color = <span class="str">"hsl(#{hue}, 62%, 57%)"</span></td></tr>
|
||||
<tr><td class="line-num">41</td><td class="code add"> <span class="op">return</span> {background: color, height: 2, 'margin-top': 5}</td></tr>
|
||||
<tr><td class="line-num">37</td><td class="code add"><span class="fn">_getStyles</span>: =></td></tr>
|
||||
<tr><td class="line-num">38</td><td class="code add">
|
||||
domain = @state.contact.email.<span class="fn">split</span>("@")[1]</td></tr>
|
||||
<tr><td class="line-num">39</td><td class="code add">
|
||||
hue = (domain.<span class="fn">split</span>('').<span class="fn">reduce</span>(((sum, char) -> sum + char.
|
||||
<span class="fn">charCodeAt</span>(0)), 0) % 36)*10</td></tr>
|
||||
<tr><td class="line-num">40</td><td class="code add">
|
||||
color = <span class="str">"hsl(#{hue}, 62%, 57%)"</span></td></tr>
|
||||
<tr><td class="line-num">41</td><td class="code add">
|
||||
<span class="op">return</span> {background: color, height: 2, 'margin-top': 5}</td></tr>
|
||||
<tr><td class="line-num">42</td><td class="code"></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -220,7 +231,7 @@ title: Getting started with plugins
|
|||
</div>
|
||||
<div class="unit half" style="margin-top: 50px">
|
||||
<p>
|
||||
Now go back to N1, and open a message. You should see a horizontal bar that changes
|
||||
Go back to N1, and try opening a message. You should see a horizontal bar that changes
|
||||
color based on the domain of the contact's email address.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -231,8 +242,8 @@ title: Getting started with plugins
|
|||
<div class="unit whole">
|
||||
<h3>That's it!</h3>
|
||||
<p>
|
||||
Extending the N1 mail client is that simple. Try making more code changes and seeing
|
||||
how they affect the message sidebar. Then when you're ready, follow one of the links
|
||||
Extending the N1 mail client is really that simple. Try making more code changes and seeing
|
||||
how they affect the message sidebar. When you're ready, follow one of the links
|
||||
below to learn more.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -241,7 +252,7 @@ title: Getting started with plugins
|
|||
<div class="unit one-third">
|
||||
<h4><a href="">Keep building</a></h4>
|
||||
<p>
|
||||
Build more functionality into the message sidebar in an extended
|
||||
Build even more functionality into the message sidebar in our extended
|
||||
tutorial that picks up where this one left off.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -255,8 +266,8 @@ title: Getting started with plugins
|
|||
<div class="unit one-third">
|
||||
<h4><a href="">Read the docs</a></h4>
|
||||
<p>
|
||||
Head over to the full API documentation to learn about everything you can leverage
|
||||
to build an N1 plugin.
|
||||
Head over to our full documentation. Learn everything there is to know
|
||||
about building an N1 plugin.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue