Beefy Boxes and Bandwidth Generously Provided by pair Networks
Pathologically Eclectic Rubbish Lister
 
PerlMonks  

PerlMonks meets Twitter Bootstrap

by tobyink (Abbot)
on Sep 02, 2014 at 19:56 UTC ( #1099304=monkdiscuss: print w/replies, xml ) Need Help??

Here's what it looks like: screenshot.

And, here's how to do it. Paste the following into your Free Nodelet:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.mi +n.js"></script> <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstra +p/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/h +ighlight.js/8.2/highlight.min.js"></script> <script type="text/javascript" src="//buzzword.org.uk/2014/pm/pm2.js"> +</script>

Then in Nodelet Settings make sure your Free Nodelet isn't hidden.

If you want to play around with the idea, adjust the buzzword.org.uk URL to point to a script file on your own server; grab a copy of the Javascript and CSS files and have fun!

Replies are listed 'Best First'.
Re: PerlMonks meets Twitter Bootstrap
by marto (Bishop) on Sep 03, 2014 at 08:40 UTC
Re: PerlMonks meets Twitter Bootstrap
by Anonymous Monk on Sep 03, 2014 at 01:07 UTC

    Neat :)

    Here it is as an addition to themes for Anonymous Monk or try out themes without changing display settings

    javascript:(function () { $('link[rel~=stylesheet]').remove(); $('head').append('<script type="text/javascript" src="//code.jquery.co +m/jquery-1.11.1.min.js"></script>'); $('head').append('<script type="text/javascript" src="//maxcdn.bootstr +apcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>'); $('head').append('<script type="text/javascript" src="//cdnjs.cloudfla +re.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>'); $('head').append('<script type="text/javascript" src="//buzzword.org.u +k/2014/pm/pm2.js"></script>'); }());

    I see downloading some fonts fails for me, and the "sections" and "you" dropdown menus don't drop down

    While this thing is loading I saw briefly a button flash "Toggle navigation" but I can't get to that (or if I disable stylesheets I can't get it to do anything)

    Like I already said, its still neat :)

    Also (probably my css) if I unwrap code sometimes it goes too wide and the nodelets float over the content

Re: PerlMonks meets Twitter Bootstrap
by davido (Archbishop) on Sep 03, 2014 at 22:14 UTC

    I like the look and feel, but find it difficult to see links in nodelets, which appear as light green against taupe. I tried to get used to it, but for me (and my monitor, and perhaps my eyes), it's illegible enough that I have to disable the CSS.


    Dave

      I agree that the contrast between them could be improved.

      Update: improved slightly.

        A slight improvement made for much better legibility. Thanks. :)


        Dave

Re: PerlMonks meets Twitter Bootstrap
by frozenwithjoy (Priest) on Sep 04, 2014 at 04:41 UTC

      Thanks - I made all kinds of changes to the navigation last night and must have broken this. Fixed now.

Re: PerlMonks meets Twitter Bootstrap
by Ovid (Cardinal) on Sep 21, 2014 at 11:54 UTC
Re: PerlMonks meets Twitter Bootstrap
by thargas (Deacon) on Sep 04, 2014 at 17:48 UTC

    Very nice! Thank-you.

    The only issue I've noticed so far is that the "Recently Active Threads" page takes way too much vertical space., but I haven't figured out how this works to fix it.

      That should be improved now. (I've copied a few bits from PerlMonks' common.css.)

        Thanks again. Much better.
Re: PerlMonks meets Twitter Bootstrap
by Anonymous Monk on Sep 04, 2014 at 08:23 UTC
    There is a typo in pm2.js for the syntax highlighting
    $('pre.blockcode code').each(function(i, block) { hljs.highlightBlock(block); });

    Perlmoks produces these tags

    <pre class="code"> <div class="codeblock"> <tt class="codetext">

    So I would select on tt.codetext (i've tested seems to work)

    javascript:(function () { $('tt.codetext').each(function(i, block) { hljs.highlightBlock(block); + }); }());

    There is also  tt.inlinecode for no-newlines ... see Help for Display Settings

      That selector actually matches up with a bit of Javascript just above it:

      $('p.code').each(function (i, c) { var code = $(c).find('tt.codetext').text().replace(/\u00a0/g,' '). +replace(/\s+$/,''); var dl = $(c).find('span.embed-code-dl'); var pre = $( '<pre class="blockcode"><code>' + $('<div/>').text(code).html() + '</code></pre>' ); var footer = $('<div style="text-align:right"><small></small></div +>'); if (dl.html()) footer.find('small').append(dl.html()); $(c).after(footer); $(c).replaceWith(pre); });

      The intention of that is to rewrite PerlMonks' code-block markup into a much simpler <pre class="blockcode"><code>...</code></pre>, which the syntax highlighter can then deal with.

      However PerlMonks' code-block markup does vary depending on your display settings for code listings. My settings are:

      Code Wrapping Off [ ] Code Wrap Length [ ] Auto Code Wrapping [ Yes ] Code Prefix [ ] Large Code Font [ ] Don't show embedded d/l links [ ] Show download link on code N lines long or more: [ 4 ]

      If you let me know your settings I can try to make sure pm2.js works better with them.

        If you let me know your settings I can try to make sure pm2.js works better with them.

        Logged out view, I'm Anonymous Monk :) I saw no highlighting before this tweak

Re: PerlMonks meets Twitter Bootstrap (copy?) (updated)
by LanX (Chancellor) on Dec 18, 2016 at 21:18 UTC
    I'm not really actively using it, just for future study in a test account.

    But I noticed that http://buzzword.org.uk/2014/pm/pm2.js is not reachable for me.

    Does someone have a copy and is please able to post it here within a code block?

    Just to keep it archived for the future and linkable.

    Cheers Rolf
    (addicted to the Perl Programming Language and ☆☆☆☆ :)
    Je suis Charlie!

    update

    It's back online, but here a copy.

    Please note you can also link to it directly.

    update: under construction need a real computer to fix this*

    (darn when copying from my tablet \n got lost, this plus tab indentation makes it unreadable, and probably even broken)

    Update: tried my best to reconstruct a decent formatting (god bless emacs)

      It seems the whole buzzword.org.uk site is down (tobyink?). I tried to switch to the highlighting by blogs.perl.org, to have the code highlighted at least, but my jquery-fu is weak and I wasn't able to make it work.

      *UPDATE*: It works. Here's the relevant part from my FreeNodelet:

      <!-- Syntax HL --> <style> p.code { margin-top: 2px; margin-bottom: 2px; background: #08080f; } code.prettyprint { background-color: #112 !important; } </style> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <link rel="stylesheet" href="http://blogs.perl.org/mt/mt-static/plugin +s/GCPrettify/prettify.css" type="text/css" media="all" /> <script src="http://blogs.perl.org/mt/mt-static/plugins/GCPrettify/pre +ttify.js"></script> <script> $(document).ready(function () { $('p.code').wrap('<pre><code class="prettyprint"></code></pre>'); $('p.code br').remove(); window.prettyPrint(); }); </script>

      You might need to fix some colours, e.g. like me:

      span.pln { color: #eee } span.pun { color: #ffd } span.typ { color: #e4e } span.lit { color: #2dd } span.com { color: #f11 }

      I also used

      $('p.code').not('.pmsig *').wrap('<pre><code class="prettyprint"></cod +e></pre>');

      to skip highlighting in signatures.

      ($q=q:Sq=~/;[c](.)(.)/;chr(-||-|5+lengthSq)`"S|oS2"`map{chr |+ord }map{substrSq`S_+|`|}3E|-|`7**2-3:)=~y+S|`+$1,++print+eval$q,q,a,
        Hi

        Thanks!

        > It works.

        Please for clarification, I'm not sure what you did

        This code works in conjunction with what? (no time to try out)

        I was already able to copy 3 of 4 buzzword-files, so did you combine them?

        ATM only http://buzzword.org.uk/2014/pm/bootstrap.min.css is missing °

        Or is your code supposed to be a workaround replacement for bootstrap.min.css ?

        Goal: Once we've reconstructed the code-base we can load them from one perlmonks thread like the wiki-addon.

        And then other's can easily contribute forks.

        Cheers Rolf
        (addicted to the Perl Programming Language and ☆☆☆☆ :)
        Je suis Charlie!

        °) if anyone can click on it and see code, than please copy and post before it vanishes from your browser's cache

      was able to reconstruct JS, but still some CSS missing: please copy if you can get hold of it in your caches:

      Cheers Rolf
      (addicted to the Perl Programming Language and ☆☆☆☆ :)
      Je suis Charlie!

      Update: from tablet cache

      .navbar { border-radius: 0 } body header h1 { background: #95a5a6; + color: #2C3E50; border-radius: 4px; padding: 0.67em; + margin-top: 0px; margin-bottom: 20px; } body aside section { + background: #ecf0f1; color: black; border-radius: 4px; m +argin-bottom: 1em; font-size: 80%; padding: 3px; border: +1px solid #b4bcc2; } body aside section h1 { background: #b4bcc2; + color: #ecf0f1; font-weight: bold; padding: 0.67em; +font-size: 100%; margin-top: 0; border-radius: 2px; } body as +ide section > div { padding: 0.33em; } body aside section ul { + padding-left: 1.33em; } body footer { padding: 0.67em; font +-size: 80%; background: #ecf0f1; color: black; border-rad +ius: 4px; margin-bottom: 0.67em; border: 1px solid #b4bcc2; } + .dropdown-with-active .caret { color: #3498DB } .pmsig { color: #2C3 +E50; padding: 10px 0 } #main_attribution { margin: 0 0 1.67em 0; font +-weight: bold } .img-avatar { float:right; margin: 0 0 0 0.67 +em; max-height: 48px; max-width: 48px; border: 1px solid #95a +5a6; border-radius: 4px; } #main_attribution .img-avatar { ma +x-height: 96px; max-width: 96px; padding: 4px; } /* Newest Nodes +*/ body#id-3628 article td { padding: 2px 4px 2px 0 } /* Replies to r +oot nodes */ #replies_table > tbody:first-child > tr:first-child > th + { padding: 4px 0 8px } tr.new-post-head td, td.reply-new { border: 1 +px solid #2C3E50; background: #ecf0f1; padding: 4px } tr.new-post-bod +y td, td.reply-new-body { border: 1px solid #2C3E50; padding: 10px 4p +x } tr.new-post-voterep td { border: 1px solid #2C3E50; border-bottom +: 0px; } tr.new-post-body td { border-top: 0px; padding: 10px 4px } t +r.post-head td, td.reply, tr.reply td { border: 1px solid #2C3E50; ba +ckground: #ecf0f1; padding: 4px } tr.post-body td, td.reply-body { bo +rder: 1px solid #2C3E50; padding: 10px 4px } tr.post-voterep td { bor +der: 1px solid #2C3E50; border-bottom: 0px; } tr.post-body td { borde +r-top: 0px; padding: 10px 4px } td.adjunct-links { border-left: 1px s +olid white; white-space: pre; text-align: right } /* copied from real + PerlMonks style sheet */ li.inline, .inline-list li { display: inlin +e; margin-left: 3pt; } li.inline:before, .inline-list li:before { con +tent:" |\A0" } ul.word-list, ul.inline-list { display: inline; margin +: 0; padding: 0; list-style: none; } .word-list li { display: inline; + } .word-list li:before { content:" " } ul.indent { margin-bottom: 0 +} td > ul.indent { padding: 0 18px 0 12px } p.nnt-p { display: inline +; } p.nnt-p-title { /* width: 70%; */ } p.nnt-author { /* width: 28%; + */ } tr.this-patch td { font-weight: bold; } tr.other-patch td { fon +t-style: italic; } a.nnt-Steaming, a.nnt-Hot, a.nnt-Fresh { font-weig +ht: bold; } .nnt-noderep, .nnt-nodeattribs, .time-text { font-size: s +maller; }
      .hljs{display:block;overflow-x:auto;padding:.5em;background:#f0f0f0;-w +ebkit-text-size-adjust:none}.hljs,.hljs-subst,.hljs-tag .hljs-title,. +nginx .hljs-title{color:black}.hljs-string,.hljs-title,.hljs-constant +,.hljs-parent,.hljs-tag .hljs-value,.hljs-rules .hljs-value,.hljs-pre +processor,.hljs-pragma,.haml .hljs-symbol,.ruby .hljs-symbol,.ruby .h +ljs-symbol .hljs-string,.hljs-template_tag,.django .hljs-variable,.sm +alltalk .hljs-class,.hljs-addition,.hljs-flow,.hljs-stream,.bash .hlj +s-variable,.apache .hljs-tag,.apache .hljs-cbracket,.tex .hljs-comman +d,.tex .hljs-special,.erlang_repl .hljs-function_or_atom,.asciidoc .h +ljs-header,.markdown .hljs-header,.coffeescript .hljs-attribute{color +:#800}.smartquote,.hljs-comment,.hljs-annotation,.hljs-template_comme +nt,.diff .hljs-header,.hljs-chunk,.asciidoc .hljs-blockquote,.markdow +n .hljs-blockquote{color:#888}.hljs-number,.hljs-date,.hljs-regexp,.h +ljs-literal,.hljs-hexcolor,.smalltalk .hljs-symbol,.smalltalk .hljs-c +har,.go .hljs-constant,.hljs-change,.lasso .hljs-variable,.makefile . +hljs-variable,.asciidoc .hljs-bullet,.markdown .hljs-bullet,.asciidoc + .hljs-link_url,.markdown .hljs-link_url{color:#080}.hljs-label,.hljs +-javadoc,.ruby .hljs-string,.hljs-decorator,.hljs-filter .hljs-argume +nt,.hljs-localvars,.hljs-array,.hljs-attr_selector,.hljs-important,.h +ljs-pseudo,.hljs-pi,.haml .hljs-bullet,.hljs-doctype,.hljs-deletion,. +hljs-envvar,.hljs-shebang,.apache .hljs-sqbracket,.nginx .hljs-built_ +in,.tex .hljs-formula,.erlang_repl .hljs-reserved,.hljs-prompt,.ascii +doc .hljs-link_label,.markdown .hljs-link_label,.vhdl .hljs-attribute +,.clojure .hljs-attribute,.asciidoc .hljs-attribute,.lasso .hljs-attr +ibute,.coffeescript .hljs-property,.hljs-phony{color:#88f}.hljs-keywo +rd,.hljs-id,.hljs-title,.hljs-built_in,.css .hljs-tag,.hljs-javadocta +g,.hljs-phpdoc,.hljs-dartdoc,.hljs-yardoctag,.smalltalk .hljs-class,. +hljs-winutils,.bash .hljs-variable,.apache .hljs-tag,.hljs-type,.hljs +-typename,.tex .hljs-command,.asciidoc .hljs-strong,.markdown .hljs-s +trong,.hljs-request,.hljs-status{font-weight:bold}.asciidoc .hljs-emp +hasis,.markdown .hljs-emphasis{font-style:italic}.nginx .hljs-built_i +n{font-weight:normal}.coffeescript .javascript,.javascript .xml,.lass +o .markup,.tex .hljs-formula,.xml .javascript,.xml .vbscript,.xml .cs +s,.xml .hljs-cdata{opacity:.5}

        > http://buzzword.org.uk/2014/pm/bootstrap.min.css (missing)

        retrieved 1st of January 2017, http://buzzword.org.uk seems to be back online

        I hope posting the code works here , updating the parent didn't work.(probably hit the 64k limit)

        Update

        under construction, the code below is 18,6k big (according to my FF)

        Less 64k means the issue must be somewhere else (?), most probably related to lost Carriage returns.

        I'll dig deeper into it later.

        Update

        OK emacs and OS say its far more than 110k , so I'll only keep the header here.

        It most obviously comes from a public source, so compensating the next outage shouldn't be too difficult.

        @import url("//fonts.googleapis.com/css?family=Lato:400,700,400italic" +); /*! * bootswatch v3.2.0 * Homepage: [HTTP://bootswatch.com] * Copyright 2012-2014 Thomas Park * Licensed under MIT * Based on Bootstrap */ /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
Re: PerlMonks meets Twitter Bootstrap
by mje (Curate) on Sep 03, 2014 at 08:06 UTC

    I really like this but the drop down menus don't work for me in firefox or chromium.

      I've tested in Opera 12.16 and Chromium 36.0.1985.125, both on Ubuntu 14.04.

      They don't drop down on hover - you need to click them.

      Update: tested in Firefox 32.0 too. Works OK for me.

        I am clicking on "SECTIONS" and "YOU" and nothing happens. There is also nothing in the js console when I click. This is Firefox 31.0 on Ubuntu 12.04.5 LTS.

        They don't drop down on hover - you need to click them.

        :) yes we click them in firefox, they don't drop down :)

Re: PerlMonks meets Twitter Bootstrap
by trippledubs (Hermit) on Sep 03, 2014 at 13:49 UTC
    Awesome!! That is really polished, looks great.
Re: PerlMonks meets Twitter Bootstrap
by biohisham (Priest) on Sep 23, 2014 at 04:47 UTC

    This is very nice !. I am adopting it at my browser. I guess we should explore making this the default layout to the forum. The current layout is a bit dated already and a facelift is in order.



    A 4 year old monk
      YES! keep this as default please!
Re: PerlMonks meets Twitter Bootstrap - UPDATE 19 SEPT 2014
by tobyink (Abbot) on Sep 19, 2014 at 12:07 UTC

    Fixed the "Nodes You Wrote" link (thanks mje!), and added a "last hour of cb" link to the "Sections" menu.

    Also, a couple of weeks ago I added avatars to all posts.

      Thanks tobyink

      As much as I enjoy your posts I like to be able to find my own too ;-)

Log In?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: monkdiscuss [id://1099304]
Approved by mtmcc
Front-paged by Corion
help
Chatterbox?
and all is quiet...

How do I use this? | Other CB clients
Other Users?
Others scrutinizing the Monastery: (2)
As of 2017-07-21 02:17 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?
    I came, I saw, I ...
























    Results (317 votes). Check out past polls.