PageSourceSearch

https://empress-blog.netlify.app/the-editor/

html empress-blog.netlify.app collected 2026-10-03 10:41:57 UTC 22,184 bytes, 365 lines download raw bytes

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=060c50f5-ead1-4888-9b9f-4a950facd10f
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8    <meta name="viewport" content="width=device-width, initial-scale=1">
9
10    
11<meta name="dummy/config/environment" content="%7B%22modulePrefix%22%3A%22dummy%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22%2F%22%2C%22locationType%22%3A%22history%22%2C%22EmberENV%22%3A%7B%22EXTEND_PROTOTYPES%22%3Afalse%2C%22FEATURES%22%3A%7B%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_DEFAULT_ASYNC_OBSERVERS%22%3Atrue%2C%22_JQUERY_INTEGRATION%22%3Afalse%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22APP%22%3A%7B%7D%2C%22blog%22%3A%7B%22title%22%3A%22empress-blog%3A%20The%20simple%20JAM%20stack%20blog%22%2C%22description%22%3A%22Thoughts%2C%20stories%20and%20ideas.%22%2C%22coverImage%22%3A%22%2Fimages%2Fblog-cover.jpg%22%2C%22rssLogo%22%3A%22%2Fimages%2Flogo.png%22%2C%22navigation%22%3A%5B%7B%22label%22%3A%22Home%22%2C%22route%22%3A%22index%22%7D%2C%7B%22label%22%3A%22Built%20by%20Chris%20Manson%22%2C%22route%22%3A%22page%22%2C%22id%22%3A%22chris-manson%22%7D%5D%2C%22host%22%3A%22https%3A%2F%2Fempress-blog.netlify.com%22%7D%2C%22responsive-image%22%3A%7B%22sourceDir%22%3A%22images%22%2C%22destinationDir%22%3A%22responsive-images%22%2C%22quality%22%3A80%2C%22supportedWidths%22%3A%5B2000%2C1000%2C600%2C300%5D%2C%22removeSourceDir%22%3Afalse%2C%22justCopy%22%3Afalse%2C%22extensions%22%3A%5B%22jpg%22%2C%22jpeg%22%2C%22png%22%2C%22gif%22%5D%7D%2C%22fastboot%22%3A%7B%22hostWhitelist%22%3A%5B%7B%7D%5D%7D%7D" />
12<!-- EMBER_CLI_FASTBOOT_TITLE -->  <meta name="ember-cli-head-start" content>  <title>Editing Posts with empress-blog</title>
13
14  <meta name="description" content="empress-blog uses a language called Markdown to format text, and so does the original Ghost 🎉 The main difference between the hosted Ghost platform and empress-blog is that we just use files...">
15
16<meta name="referrer" content="unsafe-url">
17
18  <link rel="canonical" href="https://empress-blog.netlify.com/the-editor/">
19
20  <meta property="article:published_time" content="Tue Jun 12 2018 16:58:54 GMT+0000 (Coordinated Universal Time)">
21
22  <meta property="article:tag" content="Getting Started">
23  <meta property="article:tag" content="Recent posts">
24
25  <meta property="og:site_name" content="empress-blog: The simple JAM stack blog">
26
27  <meta property="og:title" content="Editing Posts with empress-blog">
28
29  <meta property="og:url" content="https://empress-blog.netlify.com/the-editor/">
30
31  <meta property="og:description" content="empress-blog uses a language called Markdown to format text, and so does the original Ghost 🎉 The main difference between the hosted Ghost platform and empress-blog is that we just use files...">
32
33  <meta property="og:type" content="article">
34
35  <meta property="og:image" content="https://empress-blog.netlify.com/images/writing.jpg">
36  <meta property="og:image:type" content="image/png">
37  <meta property="og:image:width" content="256">
38  <meta property="og:image:height" content="256">
39
40<meta name="twitter:card" content="summary">
41
42<!---->
43  <meta name="twitter:image" content="https://empress-blog.netlify.com/images/writing.jpg">
44
45  <meta name="twitter:title" content="Editing Posts with empress-blog">
46
47  <meta name="twitter:url" content="https://empress-blog.netlify.com/the-editor/">
48
49  <meta name="twitter:description" content="empress-blog uses a language called Markdown to format text, and so does the original Ghost 🎉 The main difference between the hosted Ghost platform and empress-blog is that we just use files...">
50
51  <meta name="twitter:label1" content="Written by">
52  <meta name="twitter:data1" content="Ghost">
53
54  <meta name="twitter:label2" content="Filed under">
55  <meta name="twitter:data2" content="Getting Started, Recent posts">
56
57<!----><meta name="ember-cli-head-end" content>
58
59<link rel="alternate" type="application/rss+xml" title="empress-blog: The simple JAM stack blog" href="https://empress-blog.netlify.com/rss.xml" />
60
61    <link integrity="" rel="stylesheet" href="/assets/vendor-3944c697554562f2178dd9830ff56abc.css">
62    <link integrity="" rel="stylesheet" href="/assets/dummy-d41d8cd98f00b204e9800998ecf8427e.css">
63
64    
65  </head>
66  <body class="application post-template post">
67    
67<script type="x/boundary" id="fastboot-body-start"></script>
67<!---->
68
69    <div class="site-wrapper">
70
71        
72
73<header class="site-header outer">
74    <div class="inner">
75        <div id="ember121" class="ember-view"><nav class="site-nav">
76    <div class="site-nav-left">
77                <a id="ember122" class="ember-view site-nav-logo" href="/">empress-blog: The simple JAM stack blog</a>
78            <ul class="nav" role="menu">
79    <li class="nav-Home" role="menuitem">
80        <a id="ember124" class="ember-view" href="/"> Home </a>
81    </li>
82    <li class="nav-Built by Chris Manson" role="menuitem">
83        <a id="ember125" class="ember-view" href="/page/chris-manson"> Built by Chris Manson </a>
84    </li>
85</ul>
86    </div>
87    <div class="site-nav-right">
88        <div class="social-links">
89<!----><!---->        </div>
90            <a class="rss-button" href="https://feedly.com/i/subscription/feed%2Fhttps%3A%2F%2Fempress-blog.netlify.com%2Frss.xml" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><circle cx="6.18" cy="17.82" r="2.18"></circle><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"></path></svg>
91</a>
92            </div>
93</nav></div>
94    </div>
95</header>
96
97
98<main id="site-main" class="site-main outer">
99    <div class="inner">
100
101        <article class="post-full ">
102
103            <header class="post-full-header">
104                <section class="post-full-meta">
105                    <time class="post-full-meta-date" datetime="2018-06-12">12 June 2018</time>
106                        <span class="date-divider">/</span> <a id="ember126" class="ember-view" href="/tag/getting-started">Getting Started</a>
107                </section>
108                <h1 class="post-full-title">Editing Posts with empress-blog</h1>
109            </header>
110
111            <figure class="post-full-image">
112                <picture>
113    <source srcset="/images/writing2000w.webp 2000w, /images/writing1000w.webp 1000w, /images/writing600w.webp 600w, /images/writing300w.webp 300w" type="image/webp">
114    <source srcset="/images/writing2000w.jpg 2000w, /images/writing1000w.jpg 1000w, /images/writing600w.jpg 600w, /images/writing300w.jpg 300w" type="image/jpeg">
115  <img src="/images/writing600w.jpg" width="320" height="213.33333333333334" class="eri-responsive" loading="lazy" decoding="async">
116</picture>
117            </figure>
118
119            <section class="post-full-content">
120                <div class="post-content">
121                    <p>empress-blog uses a language called <strong>Markdown</strong> to format text, and so does the original Ghost 🎉</p>
122<p>The main difference between the hosted Ghost platform and empress-blog is that we just use files on disk, so you can either edit your Markdown files directly or you can use a desktop Markdown editor. It keeps things simple but it can sometimes feel like you are writing on pro-mode 😎</p>
123<p>If you want to start a new post we recommend that you use the built in generator <code>ember generate post "The next big thing - empress-blog"</code>. This will create a file for you and setup the start of the metadata.</p>
124<p>For now, though, let's run you through some of the basics of editing Markdown. You can see this post <a href="https://github.com/empress/empress-blog/blob/master/blueprints/empress-blog/files/__base__/content/the-editor.md">directly on github</a> if you want to see all the Markdown we've used. (don't forget to click the <em>Raw</em> button to see the source).</p>
125<h2 id="formattingtext">Formatting text</h2>
126<p>The most common shortcuts are of course, <strong>bold</strong> text, <em>italic</em> text, and <a href="https://example.com">hyperlinks</a>. These generally make up the bulk of any document. You can also make headings using <code>#</code> at the start of the line (multiple <code>#</code> symbols for h2/h3/h4/etc)</p>
127<p>With just a couple of extra characters here and there, you're well on your way to creating a beautifully formatted story.</p>
128<h2 id="insertingimages">Inserting images</h2>
129<p>Images in Markdown look just the same as links, except they're prefixed with an exclamation mark, like this:</p>
130<p><code>![Image description](/path/to/image.jpg)</code></p>
131<p><img src="/images/computer.jpg" alt="Computer" /></p>
132<p>If you want to add images to your empress-blog app you can just drop them in the <code>/public</code> folder, which you should see if you are running this locally!</p>
133<p><em><strong>Important Note:</strong> empress-blog does not currently have automatic image resizing, so it's always a good idea to make sure your images aren't gigantic files <strong>before</strong> adding them to your project.</em></p>
134<h2 id="makinglists">Making lists</h2>
135<p>Lists in HTML are a formatting nightmare, but in Markdown they become an absolute breeze with just a couple of characters and a bit of smart automation. For numbered lists, just write out the numbers. For bullet lists, just use <code>*</code> or <code>-</code> or <code>+</code>. Like this:</p>
136<ol>
137<li>Crack the eggs over a bowl</li>
138<li>Whisk them together</li>
139<li>Make an omelette</li>
140</ol>
141<p>or</p>
142<ul>
143<li>Remember to buy milk</li>
144<li>Feed the cat</li>
145<li>Come up with idea for next story</li>
146</ul>
147<h2 id="addingquotes">Adding quotes</h2>
148<p>When you want to pull out a particularly good excerpt in the middle of a piece, you can use <code>&gt;</code> at the beginning of a paragraph to turn it into a Blockquote. You might've seen this formatting before in email clients.</p>
149<blockquote>
150  <p>A well placed quote guides a reader through a story, helping them to understand the most important points being made</p>
151</blockquote>
152<p>All themes handles blockquotes slightly differently. Sometimes they'll look better kept shorter, while other times you can quote fairly hefty amounts of text and get away with it. Generally, the safest option is to use blockquotes sparingly.</p>
153<h2 id="dividingthingsup">Dividing things up</h2>
154<p>If you're writing a piece in parts and you just feel like you need to divide a couple of sections distinctly from each other, a horizontal rule might be just what you need. Dropping <code>---</code> on a new line will create a sleek divider, anywhere you want it.</p>
155<hr />
156<p>This should get you going with the vast majority of what you need to do in the editor, but if you're still curious about more advanced tips then check out the <a href="/advanced-markdown/">
156Advanced Markdown Guide</a> - or if you'd rather learn about how tags work, we've got a overview of <a href="/using-tags/">how to use tags</a>.</p>
157
158                </div>
159            </section>
160
161<!---->
162            <footer class="post-full-footer">
163
164
165                    <section class="author-card">
166        <img class="author-profile-image" src="/images/ghost-icon.png" alt="Ghost">
167    <section class="author-card-content">
168        <h4 class="author-card-name"><a id="ember127" class="ember-view" href="/author/ghost">Ghost</a></h4>
169            <p>You can delete this user to remove all the welcome posts</p>
170    </section>
171</section>
172<div class="post-full-footer-right">
173    <a id="ember128" class="ember-view author-card-button" href="/author/ghost">Read More</a>
174</div>
175
176            </footer>
177
178
179        </article>
180
181    </div>
182</main>
183
184<aside class="read-next outer">
185    <div class="inner">
186        <div class="read-next-feed">
187                <article class="read-next-card" style="background-image: url(/images/blog-cover.jpg)">
188                    <header class="read-next-card-header">
189                        <small class="read-next-card-header-sitetitle">— empress-blog: The simple JAM stack blog —</small>
190
191                        <h3 class="read-next-card-header-title"><a id="ember129" class="ember-view" href="/tag/getting-started">Getting Started</a></h3>
192
193                    </header>
194                    <div class="read-next-divider"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M13 14.5s2 3 5 3 5.5-2.463 5.5-5.5S21 6.5 18 6.5c-5 0-7 11-12 11C2.962 17.5.5 15.037.5 12S3 6.5 6 6.5s4.5 3.5 4.5 3.5"></path></svg>
195</div>
196                    <div class="read-next-card-content">
197                        <ul>
198                            <li><a id="ember130" class="ember-view" href="/welcome">Welcome to empress-blog</a></li>
199                            <li><a id="ember131" class="ember-view" href="/using-tags">Organising your content with tags</a></li>
200                            <li><a id="ember132" class="ember-view" href="/managing-users">Managing Ghost users</a></li>
201                        </ul>
202                    </div>
203                    <footer class="read-next-card-footer">
204                        <a id="ember133" class="ember-view" href="/tag/getting-started">See all 5 posts →</a>
205                    </footer>
206                </article>
207
208                <article class="post-card  ">
209
210      <a id="ember134" class="ember-view post-card-image-link" href="/using-tags">
211        <picture>
212    <source srcset="/images/tags2000w.webp 2000w, /images/tags1000w.webp 1000w, /images/tags600w.webp 600w, /images/tags300w.webp 300w" type="image/webp">
213    <source srcset="/images/tags2000w.jpg 2000w, /images/tags1000w.jpg 1000w, /images/tags600w.jpg 600w, /images/tags300w.jpg 300w" type="image/jpeg">
214  <img src="/images/tags600w.jpg" width="320" height="213.33333333333334" class="eri-responsive post-card-image" loading="lazy" decoding="async">
215</picture>
216      </a>
217
218    <div class="post-card-content">
219
220        <a id="ember135" class="ember-view post-card-content-link" href="/using-tags">
221
222            <header class="post-card-header">
223                    <span class="post-card-tags">Getting Started</span>
224                <h2 class="post-card-title">Organising your content with tags</h2>
225            </header>
226
227            <section class="post-card-excerpt">
228                <p>empress-blog has a single, powerful organisational taxonomy, called tags. It doesn't matter whether you want to call them categories, tags, boxes, or anything else. You can think of tags a lot</p>
229            </section>
230
231        </a>
232
233        <footer class="post-card-meta">
234
235            <ul class="author-list">
236                <li class="author-list-item">
237
238                    <div class="author-name-tooltip">
239                        Ghost
240                    </div>
241
242                        <a id="ember136" class="ember-view static-avatar" href="/author/ghost">
243                            <img class="author-profile-image" src="/images/ghost-icon.png" alt="Ghost">
244                        </a>
245                </li>
246            </ul>
247
248            <span class="reading-time">1 min read</span>
249
250        </footer>
251
252    </div>
253
254</article>
255
256                <article class="post-card  ">
257
258      <a id="ember137" class="ember-view post-card-image-link" href="/welcome">
259        <picture>
260    <source srcset="/images/welcome2000w.webp 2000w, /images/welcome1000w.webp 1000w, /images/welcome600w.webp 600w, /images/welcome300w.webp 300w" type="image/webp">
261    <source srcset="/images/welcome2000w.jpg 2000w, /images/welcome1000w.jpg 1000w, /images/welcome600w.jpg 600w, /images/welcome300w.jpg 300w" type="image/jpeg">
262  <img src="/images/welcome600w.jpg" width="320" height="213.33333333333334" class="eri-responsive post-card-image" loading="lazy" decoding="async">
263</picture>
264      </a>
265
266    <div class="post-card-content">
267
268        <a id="ember138" class="ember-view post-card-content-link" href="/welcome">
269
270            <header class="post-card-header">
271                    <span class="post-card-tags">Getting Started</span>
272                <h2 class="post-card-title">Welcome to empress-blog</h2>
273            </header>
274
275            <section class="post-card-excerpt">
276                <p>Hey! Welcome to empress-blog, it's great to have you :) We know that first impressions are important, so we've populated your new site with some initial Getting Started posts that will</p>
277            </section>
278
279        </a>
280
281        <footer class="post-card-meta">
282
283            <ul class="author-list">
284                <li class="author-list-item">
285
286                    <div class="author-name-tooltip">
287                        Ghost
288                    </div>
289
290                        <a id="ember139" class="ember-view static-avatar" href="/author/ghost">
291                            <img class="author-profile-image" src="/images/ghost-icon.png" alt="Ghost">
292                        </a>
293                </li>
294            </ul>
295
296            <span class="reading-time">1 min read</span>
297
298        </footer>
299
300    </div>
301
302</article>
303
304        </div>
305    </div>
306</aside>
307
308<div class="floating-header ">
309    <div class="floating-header-logo">
310        <a id="ember140" class="ember-view" href="/">
311<!---->            <span>empress-blog: The simple JAM stack blog</span>
312        </a>
313    </div>
314    <span class="floating-header-divider">—</span>
315    <div class="floating-header-title">Editing Posts with empress-blog</div>
316    <div class="floating-header-share">
317        <div class="floating-header-share-label">Share this <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
318    <path d="M7.5 15.5V4a1.5 1.5 0 1 1 3 0v4.5h2a1 1 0 0 1 1 1h2a1 1 0 0 1 1 1H18a1.5 1.5 0 0 1 1.5 1.5v3.099c0 .929-.13 1.854-.385 2.748L17.5 23.5h-9c-1.5-2-5.417-8.673-5.417-8.673a1.2 1.2 0 0 1 1.76-1.605L7.5 15.5zm6-6v2m-3-3.5v3.5m6-1v2"></path>
319</svg>
320</div>
321        <a class="floating-header-share-tw" href="https://twitter.com/share?text=Editing%20Posts%20with%20empress-blog&amp;url=undefined" onclick="window.open(this.href, 'share-twitter', 'width=550,height=235');return false;">
322            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"></path></svg>
323
324        </a>
325        <a class="floating-header-share-fb" href="https://www.facebook.com/sharer/sharer.php?u=undefined" onclick="window.open(this.href, 'share-facebook','width=580,height=296');return false;">
326            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
326<path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"></path></svg>
327
328        </a>
329    </div>
330    <progress id="reading-progress" class="progress" value="0">
331        <div class="progress-container">
332            <span class="progress-bar"></span>
333        </div>
334    </progress>
335</div>
336
337
338
339        <footer class="site-footer outer">
340            <div class="site-footer-content inner">
341                <section class="copyright"><a>empress-blog: The simple JAM stack blog</a> © 2024</section>
342                <nav class="site-footer-nav">
343                    <a id="ember141" class="ember-view" href="/">Latest Posts</a>
344                    <!---->
345                    <!---->
346                    <a href="https://github.com/empress/empress-blog-casper-template" target="_blank" rel="noopener">empress-blog Casper Template</a>
347                </nav>
348            </div>
349        </footer>
350
351    </div>
352
353<!---->
354<script type="x/boundary" id="fastboot-body-end"></script>
354
355
356    
356<script src="/assets/vendor-8da49865f49e02ba5da8ba6f523a4765.js"></script>
vendor: 1 bytes, line 356
356
357<script src="/assets/chunk.965.baff1463cf7d513c05af.js"></script>
vendor: 1 bytes, line 357
357
358<script src="/assets/chunk.143.4cb670bd93002b266f06.js"></script>
358
359    
359<script src="/assets/dummy-cb6d7c3a50c46843f817662dd6f981d4.js"></script>
359
360
361    
361<script id="ember_responsive_image_meta" type="application/json">
362{"deviceWidths":[640,750,828,1080,1200,1920,2048,3840],"images":{"images/advanced.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":1.5},"images/blog-cover.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":3},"images/built-by.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":1.5},"images/chris.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":0.88},"images/computer.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":1.5},"images/design.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":1.33},"images/ember.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":1.33},"images/ghost-icon.png":{"widths":[2000,1000,600,300],"formats":["png","webp"],"aspectRatio":1},"images/logo.png":{"widths":[2000,1000,600,300],"formats":["png","webp"],"aspectRatio":1},"images/tags.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":1.5},"images/team.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":1.73},"images/welcome.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":1.5},"images/writing.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":1.5}}}
363</script>
363
364  </body>
365</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.