Found a mistake? Please contact me.

  • Link: Dark Mode for Typewriter Theme

    If you’re using the Typewriter design on Micro.blog, there’s a new plug-in on the Find Plug-ins page that adds Dark Mode support. Thanks @TheDimPause for sharing it!

  • How to quote someone's words

    Anyone can do this. Recommended.

    Sometimes you want to use another person's words in your blog post. For example, I might want to mention a post Manton made where he mentioned: the recent launch of Quotebacks.

    Inline quotes

    I was using only a few words there, so kept them inside my sentence. That's called an inline quote. To mark it out I used the HTML tag q (for quote):

    where he mentioned: the recent launch of Quotebacks. 

    The q tag should automatically add speechmarks, and in my Custom CSS I added a rule to make it italics as well:

    q { font-style: italic; } 

    Block quotes

    If you want to quote a whole chunk of text, such as a paragraph, then it's better to set it off in a separate blockquote, using the blockquote tag:

    For a long time I’ve wanted to add quoting tools to Micro.blog, so that it’s even easier to embed text from other blog posts and add your own thoughts.

    Note: I've artificially broken up the lines here.

    Here is the same quote just using a real blockquote:

    For a long time I’ve wanted to add quoting tools to Micro.blog, so that it’s even easier to embed text from other blog posts and add your own thoughts.

    Again, you can style that blockquote in various ways in the CSS.

    You can also create blockquotes within Markdown, if that's how you prefer to write your Micro.Blog posts. See the Daring Fireball Markdown: Syntax guide for details on how to do that.

    Embedded Quotebacks

    If you’re taking the quote from a Micro.Blog then you have an additional, attractive option. On 15 June 2020 Manton wrote Embedding microblog posts with Quotebacks that explains it. He then posted on 14 July 2020:

    I’ve rolled the Quotebacks experiment out to more places in Micro.blog on the web. The “Embed” link makes it easy to copy a microblog post and then paste it into a full-length blog post. More improvements will follow later to the apps and editing.

    What you see above is the much more attractive blockquote that uses the Quoteback facility.

    At the moment, to use Quoteback you first need to Favorite a post. Then log in to your Micro.Blog account with a web browser and visit the Favorites page. Find the relevant post and click the Embed link below it. Next paste the copied text into your own post.

    The Embed link.
    The Embed link.

    Here’s the Quoteback embed text from above:

    Quoteback embed text example.
    Quoteback embed text example.


    Item contributed by Miraz Jordan](https://custom.micro.blog/about-the-team/).

  • How to use Micro.Blog plug-ins

    Background information.

    In July 2020 Manton added the ability for Micro.Blogs to use plug-ins.

    Note: if you have modified your theme it is possible that a specific plugin might not work.

    Find the plug-ins

    1. Click on the Posts link at the top of the behind-the-scenes area of your blog. You're taken to the page of your recent posts, and a set of navigation buttons is shown above your posts.
    2. Click on the Plug-ins button above the list of your posts. You're taken to the Plug-ins area of your blog.

    If you have already installed any plug-ins they show up in a list here, together with an Uninstall button.

    An installed plugin.
    An installed plugin.

    If you haven't yet installed any or want to install more then click the Find plug-ins button.

    After a brief wait all available plug-ins are listed. Each plugin shows who created it, its purpose, a link to find more information and the original files, and an Install button.

    It's a good idea to check the link for more information: you may find the plug-in is not designed to work with your theme or has other limitations. There may also be information about other ways you can modify its effect.

    Some of the available plugins as at 22 July 2020.
    Some of the available plugins as at 22 July 2020.

    Available plug-ins as at 22 July 2020

    1. Archie extras by @manton ; Customize the Archie theme to always enable Dark Mode. ; [github.com/microdotb...](https://github.com/microdotblog/plugin-archie-extras)
    2. Bigfoot by @jsonbecker ; Adds Bigfoot.js to your Micro.blog theme. ; [github.com/jsonbecke...](https://github.com/jsonbecker/plugin-bigfoot)
    3. Bookshop by @jsonbecker ; Adds the ability to get affiliate links and widgets from Bookshop ; [github.com/jsonbecke...](https://github.com/jsonbecker/plugin-bookshop)
    4. Category Cloud by @chaitanya ; Adds a category cloud on your micro.blog's /categories/ page. ; [github.com/chaitanya...](https://github.com/chaitanya3po/plugin-category-cloud)
    5. GLightbox by @jsonbecker ; Adds the ability to have simple ; attractive lightbox and gallery for photos using a shortcode. ; [github.com/jsonbecke...](https://github.com/jsonbecker/plugin-glightbox)
    6. Marfa dark mode by @manton ; Adds support for Dark Mode in the Marfa design. ; [github.com/microdotb...](https://github.com/microdotblog/plugin-marfa-dark)
    7. Navigation List by @thedimpause ; Creates a page with a list of the blog's static pages and other navigation links. A basic site map. ; [github.com/TheDimPau...](https://github.com/TheDimPause/micro.blog-navlist-plug-in)
    8. Open Graph Cards by @thatguygriff ; This plugin adds Open Graph meta tags to create social media and iMessage previews for posts. ; [github.com/thatguygr...](https://github.com/thatguygriff/plugin-open-graph)
    9. Photos category by @manton ; New options for the Photos page on your blog: excluding longer posts or using a category. ; [github.com/microdotb...](https://github.com/microdotblog/plugin-photos-category)
    10. Podcast title by @manton ; This plug-in for Micro.blog adds a "Podcast title" setting ; overriding the default podcast.xml file. ; [github.com/microdotb...](https://github.com/microdotblog/plugin-podcast-title)
    11. Search page by @manton ; Adds a Search page to the navigation of your blog ; with fast search by loading all your posts from the archive. ; [github.com/microdotb...](https://github.com/microdotblog/plugin-search-page)
    12. Twitter cards by @manton ; This plug-in adds HTML meta tags to allow Twitter card previews of your blog posts ; [github.com/microdotb...](https://github.com/microdotblog/plugin-twitter-cards)

    Note that some plug-ins are designed to work with only specific themes.

    Install a plug-in

    Click the Install button for the plug-in you want then try reloading your blog to check that it's working as expected. You may need to wait a few moments for the changes to take effect.

    It's probably a good idea to just install one plug-in at a time and test that it's working as you expect before adding any other. If there is a problem it'll be easier to sort out.

    More info on the Category cloud plug-in.
    More info on the Category cloud plug-in.

    The Search plug-in example

    On this site I installed the Search plug-in.

    A link was added at the right-hand end of the navigation menu. On clicking that link the Search page opens. I searched this site for plug-ins, with 4 results returned.

    After a Search on Custom. The first result.
    After a Search on Custom. The first result.

    Item contributed by Miraz Jordan.

  • Building Micro.blog Custom Themes That Work with Plug-ins

    Assumed audience: Micro.blog users who have written or are interested in writing their own custom theme and are familiar with Hugo/Go Templates or other, similar static site generators.

    With the introduction of plug-ins, it has become much easier to share ways to expand the functionality of a Micro.blog. Users with custom designs should keep these tips in mind to ensure their themes are compatible with all community plug-ins.

    Anatomy of a Plug-in

    Plug-ins provide four components that are common in most Hugo themes.

    1. Static files, such as CSS for styling elements specific to that theme or custom Javascript to add interactivity and interact with external APIs to embed data. See GLightbox.
    2. Partial templates, which for plug-ins are meant to embed content in a page’s <head>. See Twitter Cards.
    3. Custom page templates to add new pages to your Micro.blog site. See Category Cloud.
    4. Shortcodes, which are special partial templates that can be invoked in the content of posts or pages. See Bookshop.

    Plug-ins that use the first three of these components may require some modification to your custom theme to work.

    Static Files and Partials

    In order to include the static files and partial templates in your design, you’ll want to add the following snippet to where you define <head> in your theme:

    &#123;&#123; range .Site.Params.plugins_css }}
     	    <link rel="stylesheet" href="&#123;&#123; . }}" />
    &#123;&#123; end }}
    &#123;&#123; range $filename := .Site.Params.plugins_html }}
         	&#123;&#123; partial $filename $ }}
    &#123;&#123; end }}
    

    You’ll always want

    &#123;&#123; range .Site.Params.plugins_js }}
        <script src="&#123;&#123; . }}"></script>
    &#123;&#123; end }}
    

    probably in the <footer>.

    This code iterates over all the listed parameters in the includes parameter in the plugin.json configuration that each plug-in sets up and ensures the CSS, JS, and partials are all included and rendered in your templates.

    Custom Pages

    Plug-ins that add a new page to your site, like say a page with a wordcloud for blog categories, have to make some assumptions about your Hugo theme. It’s not unusual, especially with older themes, to use something like this in layouts/post/single.html (which is what pages render as in Micro.blog):

    &#123;&#123; partial "header.html" . }}
      <article class = "h-entry">
        &#123;&#123; if .Title }}
          <h2 class = "p-name  post-title">
            <a class = "u-url" href = "&#123;&#123; .Permalink }}">&#123;&#123; .Title }}</a>
          </h2>
        &#123;&#123; end }}
        <time class = "date dt-published" 
              datetime = "&#123;&#123; .Date.Format "January 02, 2006 15:04:05  -0700" }}">
          <a href = "&#123;&#123; .Permalink }}" class = "u-url">
            &#123;&#123; .Date.Format "January 02, 2006 3:04PM" }}
          </a>
        </time>
        <div class = "post-content e-content">
          &#123;&#123; .Content }}
        </div>
       </article>
      &#123;&#123; partial "footer.html" . }}
    

    When creating a new page template as a plug-in author, however, there is no way to know how someone has structured the “frame” of their site and where to put the page content. What if you have a partial for your header, then a partial for navigation, then a partial for featured posts, then a partial for content, then a partial for pagination, then a partial for the page footer? This is not only quite common, but a plug-in author would need to know the names of each of these partials to render a page that fits with your theme.

    New pages assume that you are using a relatively new feature of Hugo– base templates and blocks. I highly recommend reading the documentation, but in essence, Hugo allows you to define the framing of all of your templates in a new layouts/*/baseof.html special template. In that template (which I recommend defining in _default), you can put all the content for your page header, navigation, and footer. What used to be several partials to avoid code duplication can now live in one template.

    In baseof.html, you can define a named block and then your other templates, such as layouts/post/single.html can define the contents of that block. How does this help plug-ins with pages? Micro.blog has largely standardized themes around taking everything that is contained within the <article> element in the example above and replacing it with:

    &#123;&#123; block "main" . }}
    &#123;&#123; end }}
    

    inside the baseof.html template. So your _default/baseof.html might look like this:

    ```html
    &#123;&#123; partial "header.html" . }}
    &#123;&#123; block "main" . }}
    &#123;&#123; end }}
    &#123;&#123; partial "footer.html" . }}
    

    Then your page templates, like post/single.html might look like this:

    &#123;&#123; define "main" }}
      <article class = "h-entry">
        &#123;&#123; if .Title }}
          <h2 class = "p-name  post-title">
            <a class = "u-url" href = "&#123;&#123; .Permalink }}">&#123;&#123; .Title }}</a>
          </h2>
        &#123;&#123; end }}
        <time class = "date dt-published" 
              datetime = "&#123;&#123; .Date.Format "January 02, 2006 15:04:05  -0700" }}">
          <a href = "&#123;&#123; .Permalink }}" class = "u-url">
            &#123;&#123; .Date.Format "January 02, 2006 3:04PM" }}
          </a>
        </time>
        <div class = "post-content e-content">
          &#123;&#123; .Content }}
        </div>
       </article>
    &#123;&#123; end }}
    

    By standardizing on the page contents being in the block named main, plug-in authors can redefine the main block safely for their custom pages, and you can be rest assured that the page will still look like it’s on your blog.

    Hopefully these tips are helpful to custom theme authors who want compatibility with the community contributed plug-ins on Micro.blog.


    Item contributed by Jason Becker.

  • Plugin images

    There’s a couple of things I’ve learnt (feedback from @manton) when making the swarm plugin, is that only svg images are supported. So, make any icons you use an svg, place them in the static folder and also, reference them locally so they don’t use external urls 👍


    Item contributed by David Hall.

  • Link: Developing plug-ins for Micro.blog

    The official word from Manton: Developing plug-ins for Micro.blog:

    Plug-ins are like lightweight Hugo themes. They can provide all the templates needed for a custom theme, or they can provide just a couple templates, overriding any templates in a built-in design on Micro.blog. Micro.blog applies the plug-in templates after the blog’s theme has been set up.

  • Link: The Kiko Micro.blog Theme Refined: "Kiko: System"

    Kahlil Lechelt modified the Kiko theme to use the system font depending on the OS the page is being viewed on. The mod also refined the home page layout.

    Thanks to @Gabz whose post Kiko in the dark? linked to this.

List of Tutorials.

⌘ This site and tutorials before July 2020 were created by Miraz Jordan. ⌘