During my Micro Camp presentation, I stated that the first publication is the first iteration…

Then I stopped.

Just a lot of little things got in the way, and I started to sit on changes that I have made. I’m hoping that this post will be me getting back into publishing changes and why I am making them.

Here’s a list.

• Floating Images
• Handling Transcripts
• No Longer Published
• Center Navigation Menu
• Changing the descriptions
• Removing Comments off the main page
• What’s next?

Floating Images

Right before Micro Camp, I used MarsEdit to write a post and I used one of the built in alignments to float the image to the left. I was hoping that it would look the way I remember old newspaper articles being.

Although it did have the text wrapped properly, the image “escaped” out of the article and onto the following article.

This was at the same time that there was a discussion about floating images in the help. With this information, I created a little demo post to help me evaluate the preconfigured defaults in MarsEdit.

The way, I got to it was dragging an image onto a post to get to the Upload Utility, but you can also access it from the Window menu.

From there, you can select the options in “Format” or click customize.

Afterwards, you can add more styling to the markup of the image so that future post can use what you’ve been working on.

This works for smaller images, but fell apart when I used a long image with small text. I went on a very long online journey look at grid and flex box until I ultimately, came to the following code that expanded the <div> that I use for the content of the post.

.post-body {
    display: inline-block;
}

Three lines and it only took me hours.

Handling Transcripts

I had some code that would check if the post has a transcript for a podcast associated with it. That’s been removed as micro.blog automatically adds this for you. Thank you, @manton.

No Longer Published

When I first started working with the theme, I thought I would show the modified date and published date so that my users could quickly tell when something had been updated.

Looking at other themes, I don’t see many that have this information and it’s assumed that any date on the post is when it was published. I’m still keeping mine on the bottom for now. Although, I sometimes thinking about how a post might be more comparable to a journal entry or letter to the world.

Center Navigation Menu

Most of the other items on the page are centered. For example, the articles and footer. I centered this and gave it some margin.

Describe me

I’ve been using .Site.Params.description incorrectly. I’ll be using .Site.Params.itunes_description for the description used in the main page meta data.

No Comment

I moved comments from the posts off of the main page and out of the article block that they would normally be in. This meant moving the following code from the partials/article-footer.html to _default/single.html.

{{ if .Site.Params.include_conversation }}
<script type="text/javascript" 
src="https://micro.blog/conversation.js?url={{ .Permalink }}">
</script>
{{ end }}

What’s next?

I’m thinking about changes in two different areas.

Styles

The next step is to reevaluate the styles that I’m using for the site. I’ve been adding things as I’ve come across different use cases and I want to make sure that the css file while stands at 496 lines currently is easy to read and understand for Future Mandaris 3 months from now. My friend, Michael, told me about Cube CSS so I’ll be looking into using that as a way to organize it.

I’m not happy with the way that comments look. I’ve decided that I’ll only change the style after I’ve implemented Cube CSS otherwise I’ll only have spaghetti code for the rest of this project.

I’d also like to change the margin between images on the site. For example, this post that I made with the sunlit app. That might be a simple fix that I’d slip into a point release.

After that, I’m planning on making the <code> and code blocks look more seamless in posts and change the font such that they stick out more when reading in a paragraph.

Features

On my site, I don’t use any of the plugins. They should work, but I’d like to make sure that the most popular (AKA the ones that people I follow have mentioned) are working properly.

I don’t see there being a problem because of the nature of the theme, but if you know of an issue, please let me know.

This is just a little test to see if this will float correctly.

Chase carouser Blimey port six pounders black jack gally spike barque Chain Shot. Spike booty ahoy Arr cutlass prow furl case shot rutters gabion. Heave to take a caulk Arr schooner pillage long boat transom landlubber or just lubber starboard jib.

Table of Contents

• The First thing
• The Second thing
• The Third thing
• Figures
• Tasklists
• Tables

The first thing

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted¹ his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready² to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. “What’s happened to me? " he thought. It wasn’t a dream.

His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there³ hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.

I ought to just try that with my boss; I’d get kicked out on the spot. But who knows, maybe that would be the best thing for me. If I didn’t have my parents to think about I’d have given in my notice a long time ago, I’d have gone up to the boss and told him just what I think, tell him everything I would, let him know just what I feel. He’d fall right off his desk!⁴ And it’s a funny sort of business to be sitting up there at your desk, talking down at your subordinates from up there, especially when you have to go right up close because the boss is hard of hearing. Well, there’s still some hope; once I’ve got the money together to pay off my parents’ debt to him - another five or six years I suppose - that’s definitely what I’ll do. That’s when I’ll make the big change. First of all though, I’ve got to get up, my train leaves at five. " And he looked over at the alarm clock, ticking on the chest of drawers. “God in Heaven! " he thought. It was half past six and the hands were quietly moving forwards, it was even later than half past, more like quarter to seven. Had the alarm clock not rung? He could see from the bed that it had been set for four o’clock as it should have been; it certainly must have rung. Yes, but was it possible to quietly sleep through that furniture-rattling noise?

The Second Thing

Pack my box with five dozen liquor jugs. Several fabulous dixieland jazz groups played with quick tempo. Back in my quaint garden, jaunty zinnias vie with flaunting phlox⁵. Five or six big jet planes zoomed quickly by the new tower. Exploring the zoo, we saw every kangaroo jump and quite a few carried babies. I quickly explained that many big jobs involve few hazards. Jay Wolf is quite an expert on the bass violin, guitar, dulcimer, ukulele and zither. Expect skilled signwriters to use many jazzy, quaint old alphabets effectively. The wizard quickly jinxed the gnomes before they vaporized. THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG’S BACK 1234567890⁶.

The Third Thing

Lorem ipsum dolor sit amet, eu detracto senserit vis, ei natum ridens detracto sit. Id iriure prompta vix. Sit ea feugiat invenire similique, etiam solet eleifend cu per. Ea falli nullam elaboraret vis, modo percipitur omittantur at ius, in quo nullam timeam ocurreret. Est ad deleniti corrumpit scripserit, te usu apeirian recusabo oportere, nemore laboramus vulputate te vim. Ea eum mazim iudicabit, harum utroque pri ne.

Per no putant iriure intellegebat. Tamquam maiorum ei eum, ea iuvaret maluisset liberavisse eam, adhuc falli tamquam ius te? Eu amet virtute scaevola est, simul nusquam invidunt duo id, at usu sanctus abhorreant definiebas! Vide ullum quo cu? Ius in forensibus sadipscing, dicant aperiri volutpat et sit.

Veri dicat pro te, an aliquam reprimique cum, et pro commune maiestatis. Nec ex amet eleifend definitiones! An adipisci consequuntur est. In quot oratio vis. Vide nobis aperiam pri ad, et sit dictas adolescens inciderint, pertinacia referrentur consequuntur pri id?

Some more examples

bold and italics

strikethrough and bold

strikethrough and italics

bold, italics and strikethrough

I am going to use the example from the footnote documentation⁷.

Remember, you have within you the strength, the patience, and the passion to reach for the stars to change the world.

• Harriet Tubman

Figures and Images

Using Short codes

Here’s another.

Raw HTML

Lillie on the Couch

Images with titles example

Tasklists

• an unchecked task list item
• checked item

A little bit more

• Write the press release
• Update the website
• Contact the media
• foo
  • bar
  • baz
• bim

Tables

A couple examples of a markdown table.

This is a bigger table

The following is from multimarkdown.

I hope the following work as well. It was found on a page showing github markdown.

This is a table with more content. These were taken from https://markdown-it.github.io/ and https://michelf.ca/projects/php-markdown/extra/#table.

Right aligned columns

Centered values

Something else

Hello

Goal for this document

I wanted to make a page that contained most if not all of the different things that you would find in a blog post written in Markdown. For simplicity, I’ll stick to what is found in Python-Markdown as it is the one that I use most.

Basic Syntax

This sentence as emphasied and bold text.

This sentence has emphasis and bold text combined.

This sentence has code written in it.

This sentence has strikethrough written in it.

This is a sentence with a link.

Multiple Paragraphs of text

Pack my box with five dozen liquor jugs. Several fabulous dixieland jazz groups played with quick tempo. Back in my quaint garden, jaunty zinnias vie with flaunting phlox¹. Five or six big jet planes zoomed quickly by the new tower. Exploring the zoo, we saw every kangaroo jump and quite a few carried babies. I quickly explained that many big jobs involve few hazards. Jay Wolf is quite an expert on the bass violin, guitar, dulcimer, ukulele and zither. Expect skilled signwriters to use many jazzy, quaint old alphabets effectively. The wizard quickly jinxed the gnomes before they vaporized. THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG’S BACK 1234567890².

Lorem ipsum dolor sit amet, eu detracto senserit vis, ei natum ridens detracto sit. Id iriure prompta vix. Sit ea feugiat invenire similique, etiam solet eleifend cu per. Ea falli nullam elaboraret vis, modo percipitur omittantur at ius, in quo nullam timeam ocurreret. Est ad deleniti corrumpit scripserit, te usu apeirian recusabo oportere, nemore laboramus vulputate te vim. Ea eum mazim iudicabit, harum utroque pri ne.

Per no putant iriure intellegebat. Tamquam maiorum ei eum, ea iuvaret maluisset liberavisse eam, adhuc falli tamquam ius te? Eu amet virtute scaevola est, simul nusquam invidunt duo id, at usu sanctus abhorreant definiebas! Vide ullum quo cu? Ius in forensibus sadipscing, dicant aperiri volutpat et sit.

Veri dicat pro te, an aliquam reprimique cum, et pro commune maiestatis. Nec ex amet eleifend definitiones! An adipisci consequuntur est. In quot oratio vis. Vide nobis aperiam pri ad, et sit dictas adolescens inciderint, pertinacia referrentur consequuntur pri id?

Images

Large image

Images in a paragraph

Yar Pirate Ipsum. Rutters log red ensign bring a spring upon her cable Pirate Round prow fathom. Snow broadside Arr poop deck hardtack lad barkadeer. Cat o’nine tails handsomely fire ship reef bring a spring upon her cable yardarm jury mast. Hang the jib mutiny execution dock cutlass Sail ho furl ye. Barque crimp aye fore nipper yo-ho-ho grog. Crack Jennys tea cup Brethren of the Coast weigh anchor spanker port rutters jack.

Man-of-war tender lanyard piracy yard prow case shot. Bilge brig six pounders loot landlubber or just lubber me salmagundi. Chantey keelhaul Pieces of Eight hail-shot mutiny brigantine barque. Dead men tell no tales American Main parrel code of conduct haul wind hornswaggle Admiral of the Black. Cable no prey, no pay bilge rat swab wherry boom run a shot across the bow. Run a shot across the bow skysail strike colors Sail ho lateen sail wench Barbary Coast.

List

There are two kinds of lists with

Ordered lists

1. First item

2. Second item

   Second paragraph of Second item

3. Third item

A small paragraph before the second list.

4. Forth item - If this doesn’t start with 4 than smart list are not on.

   • Nested unordered list item 1

   • Nested unordered list item 2

   • Nested unordered list item 3

5. Fifth item

6. Six item

Unordered lists

• First item.

• Second item. This second item has two paragraphs in it.

  This is the second paragraph of the second item. (Not confusing at all.)

  Block quote in the unordered list

  Followed by a code block:

  {
    "firstName": "John",
    "lastName": "Smith",
    "age": 25
  }
  

• Third item.

  1. Nested ordered list item 1

  2. Nested ordered list item 2

  3. Nested ordered list item 3

• Forth item.

Footnotes

I am going to use the example from the footnote documentation³.

Block quote

Something simple should go here.

Remember, you have within you the strength, the patience, and the passion to reach for the stars to change the world.

• Harriet Tubman

Sometimes you might have nested block quotes.

You miss 100% of the shots you don’t take.

• Wayne Gretzky

• Michael Scott

Tables

This is my tables section. These were taken from https://markdown-it.github.io/ and https://michelf.ca/projects/php-markdown/extra/#table.

Right aligned columns

Centered values

Misc

These are the things that most people don’t really use.

Definitions

Definitions are a great way to show information.

Apple

Pomaceous fruit of plants of the genus Malus in the family Rosaceae.

An American computer company.

Banana

A tropical plant of the genus Musa.

Orange

The fruit of an evergreen tree of the genus Citrus.

Pinapple

A tropical fruit from the Bromeliaceae family.

Mango

A juicy stone fruit (drupe) from numerous species of tropical trees belonging to the flowering plant genus Mangifera, cultivated mostly for their edible fruit.

Complex definitions

Term 1

This is a definition with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.

Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Second definition for term 1, also wrapped in a paragraph because of the blank line preceding it.

Term 2

This definition has a code block, a blockquote and a list.

code block.

block quote on two lines.

1. first list item
2. second list item

Code blocks

import logging
# This line is emphasized
# This line isn't
# This line is emphasized

def func():
    # function body
    someValue = "func called"
    logging.info(someValue)

if __name__ == '__main__':
    func()

Abbreviations

The HTML specification is maintained by the W3C. This example taken from https://python-markdown.github.io/extensions/abbreviations/

*[HTML]: Hyper Text Markup Language

*[W3C]: World Wide Web Consortium

Task Lists

This is fairly new to markdown.

• Write the press release
• Update the website
• Contact the media
• foo
  • bar
  • baz
• bim

Sprint Requirements

1. Have no major barrier to entry
2. Consist of very clearly defined, actionable Tasks
3. Have a fixed, relatively short time frame for completion

Goal Brainstorming Questions

1. What about this goal sparked my curiosity?
2. What motivated me to want to invest my time and energy here?
3. What am I trying to accomplish?
4. What will it require?
5. What is my definition of success with this goal?

From the bullet journal method

Ok, where are all the tests going?

This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.

Headings

The following HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.

H1

H2

H3

H4

H5

H6

Paragraph

Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.

Blockquotes

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Blockquote without attribution

Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.

Blockquote with attribution

Don’t communicate by sharing memory, share memory by communicating.

— Rob Pike¹

Tables

Tables aren’t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.

Inline Markdown within tables

Code Blocks

Code block with backticks

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Code block indented with four spaces

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Code block with Hugo’s internal highlight shortcode

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

List Types

Ordered List

1. First item
2. Second item
3. Third item

Unordered List

• List item
• Another item
• And another item

Nested list

• Item

1. First Sub-item
2. Second Sub-item

Other Elements — abbr, sub, sup, kbd, mark

GIF is a bitmap image format.

H₂O

Xⁿ + Yⁿ = Zⁿ

Press CTRL+ALT+Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

You can set dark mode as default by setting params.mode to dark in config.toml or set it to auto which will detect based on your OS and switch to dark mode. For more details refer documentation

Here is how you can switch based on your OS

• iOS
• Android
• macOS
• Windows 10

Images

Github Gist

Youtube video

Vimeo

Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.

Heading 1

Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.

Heading 2

Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.

Heading 3

Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.

Heading 4

Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.

Heading 5

Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.

Heading 6

Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit quo minus id quod amets untra dolor amet sad. Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste. Dolores sadips ipsums sits.

Typography

Lid est laborum et dolorum fuga, This is an example inline link. Et harum quidem rerum facilis, This is bold and emphasis cumque nihilse impedit quo minus id quod amets untra dolor amet sad. While this is code block() and following is a pre tag

print 'this is pre tag'

Following is the syntax highlighted code block

func getCookie(name string, r interface{}) (*http.Cookie, error) {
	rd := r.(*http.Request)
	cookie, err := rd.Cookie(name)
	if err != nil {
		return nil, err
	}
	return cookie, nil
}

func setCookie(cookie *http.Cookie, w interface{}) error {
	// Get write interface registered using `Acquire` method in handlers.
	wr := w.(http.ResponseWriter)
	http.SetCookie(wr, cookie)
	return nil
}

This is blockquote, Will make it better now

‘I want to do with you what spring does with the cherry trees.’ cited ~Pablo Neruda*

Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihilse impedit

Unordered list

• Red
• Green
• Blue

Ordered list

1. Red
2. Green
3. Blue