Table and Gist
This is a small table.
First Header | Second Header |
---|---|
Content Cell | Content Cell |
Content Cell | Content Cell |
Content Cell | Content Cell |
Content Cell | Content Cell |
Content Cell | Content Cell |
Paragraph in between.
Another paragraph in between.
|
|
Code block without a language tag
This is a simple example block that shows some code that is wrapped with ```
at the top and the bottom.
# [[title]]
<blockquote>
[[selection_html]]
<footer>
<cite>
<a class="u-in-reply-to" rel="in-reply-to" href="[[url]]">
[[title]]
</a>
</cite>
</footer>
</blockquote>
<p class="p-summary">Begin response here</p>
Code block with a language tag
This is code taken from my theme and wrapped and started with ```go-html-template
. This alerts the markdown processor that it needs to highlight the various keywords and variables for that language using pygments.
{{ if .RSSLink -}}
<link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
<link href="{{ "podcast.xml" | absURL }}" rel="alternate" type="application/rss+xml" title="Podcast" />
<link rel="alternate" type="application/json" title="{{ .Site.Title }}" href="{{ "feed.json" | absURL }}" />
<link rel="EditURI" type="application/rsd+xml" href="{{ "rsd.xml" | absURL }}" />
{{ end -}}
Labarum: Restarting Iterations (Draft)
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.
Floating image test
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.
Sending your First Webmention from Scratch • Aaron Parecki
So what do you need to walk through this tutorial? We'll use static files and simple command line tools so that you can easily adapt this to any environment or programming language later.
Second attempt.
This is an example reply to @aaronpk. Thanks to the class u-in-reply-to
, Micro.blog should send a webmention automaticly.
A tour of the theme
Table of Contents
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 lifted1 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 ready2 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 there3 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!4 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 phlox5. 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 12345678906.
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 documentation7.
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
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.
First Header | Second Header |
---|---|
Content Cell | Content Cell |
Content Cell | Content Cell |
This is a bigger table
Bigger Table | Second Header | Third Header |
---|---|---|
Content Cell | Content Cell | Content Cell |
Content Cell | Content Cell | Content Cell |
Content Cell | Content Cell | Content Cell |
Content Cell | Content Cell | Content Cell |
Content Cell | Content Cell | Content Cell |
The following is from multimarkdown.
Grouping | ||
---|---|---|
First Header | Second Header | Third Header |
Content | Long Cell | |
Content | Cell | Cell |
New section | More | Data |
And more | With an escaped ‘|’ |
I hope the following work as well. It was found on a page showing github markdown.
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |
zebra stripes | are neat | $1 |
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.
Option | Description |
---|---|
data | path to data files to supply the data that will be passed into templates. |
engine | engine to be used for processing templates. Handlebars is the default. |
ext | extension to be used for dest files. |
Right aligned columns
Option | Description |
---|---|
data | path to data files to supply the data that will be passed into templates. |
engine | engine to be used for processing templates. Handlebars is the default. |
ext | extension to be used for dest files. |
Centered values
Item | Value |
---|---|
Computer | $1600 |
Phone | $12 |
Pipe | $2 |
Something else
Function name | Description |
---|---|
help() |
Display the help window. |
destroy() |
Destroy your computer! |
Hello
Italic default | Bold default | Strikethrough default | Code default |
---|---|---|---|
italics | bold | code |
|
italics | bold | code |
|
italics | bold | code |
-
This is a random footnote for when I’m writing things ↩︎
-
Longer footnote: He must have tried it a hundred times, shut his eyes so that he wouldn’t have to look at the floundering legs, and only stopped when he began to feel a mild, dull pain there that he had never felt before. “Oh, God”, he thought, “what a strenuous career it is that I’ve chosen! Travelling day in and day out. ↩︎
-
I think that this is good enough. ↩︎
-
This is going to be a really long essay. ↩︎
-
A footnote in the middle of a larger paragraph has a footnote somewhere else. ↩︎
-
These were all alternatives to the famous pangram for testing fonts found here. ↩︎
-
The first paragraph of the footnote.
The second paragraph of the footnote.
A blockquote with multiple lines. (This should be on second line)
a code block
A final paragraph in the same foot note. ↩︎
I just got back from a college tour.
This will be the thing that I remember the most.