Giter Site home page Giter Site logo

nfreear / nfreear-blog Goto Github PK

View Code? Open in Web Editor NEW
0.0 3.0 1.0 1.24 MB

My (re-developed) personal blog. A work-in-progress! —

Home Page: https://nick.freear.org.uk

License: MIT License

HTML 30.90% JavaScript 23.16% Makefile 1.70% PHP 7.19% Ruby 0.67% Shell 0.11% SCSS 36.25%
blog jekyll cc-by-sa accessibility

nfreear-blog's Introduction

Node.js CI

Jekyll Prose.io Blog posts Blog up Accessibility testing - blog passes Git hooks @nfreear on Twitter

nfreear.github.io

Nick Freear's blog

Experimental!

I'm re-developing my blog, using Jekyll and GitHub pages.

My legacy blog posts:

See Tom Preston-Werner's blog for another Jekyll-based example.

Install .. Test

npm install && npm test
npm start

Useful icons ~ 👄👅 💓🇫🇷.🇨🇳⌚️📅 🍺🐞 !

© 2009-2022 Nick Freear.

nfreear-blog's People

Contributors

dependabot[bot] avatar nfreear avatar

Stargazers

avatar

Watchers

avatar avatar avatar

Forkers

fossabot

nfreear-blog's Issues

Comments function, pagination, archive etc.

Comments - via, IntenseDebate?

Pagination / archiving ...

Prominent ` Jisc - Vote! ` widget; Soton's ATbar Javascript widget ...

  • Relates to: #1.
  • Jisc – Vote! widget;
  • Southampton Uni's AT bar widget – accessibility – currently disabled to declutter;

Legacy ATbar code – http://freear.org.uk/#block-block-5 :

<a href=
"javascript:(function(){d=document;lf=d.createElement('script');lf.type='text/javascript';lf.id='ToolbarStarter';lf.text='var%20StudyBarNoSandbox=true';d.getElementsByTagName('head')[0].appendChild(lf);jf=d.createElement('script');jf.src='http://access.ecs.soton.ac.uk/ToolBar/channels/toolbar-stable/JTToolbar.user.js';jf.type='text/javascript';jf.id='ToolBar';d.getElementsByTagName('head')[0].appendChild(jf);})();"
 ><img
 alt="Start JISC Techdis Toolbar Lite"
 title="Start JISC Techdis Toolbar"
 src="http://access.ecs.soton.ac.uk/ToolBar/content/toolbar/toolbarlauncher.png"
 /></a>

Document custom properties in YAML front-matter in posts/pages

Woa, what a lot ... !!

YAML front-matter for Jekyll posts/pages.

Standard

---
published: false
layout: page
title:  Sign-machine rebooted
date:   2017-05-22 17:23
tags:   accessibility
permalink: /path/to/page.html

# And, custom:
x-footer-script: https://cdn.rawgit.com/nfreear/sign-machine/2.0-alpha/src/sign-machine.js
---

Redirection

---
# CUSTOM

x-redirect-url: /2017/05/22/sign-machine.html
x-hash: '#id-sign-machine'
---

Footer Javascript

---
# ...

x-footer-script: https://cdn.rawgit.com/nfreear/sign-machine/2.0-alpha/src/sign-machine.js
---

Imported posts and content

---
# ...

x-source: http://freear.org.uk/content/moodle4-9-book
x-comments: 2
x-comment-url: http://freear.org.uk/content/moodle4-9-book#comment-295
---

Events

---
# ...

x-type: event
x-event-start: 2015-12-09 19:00 +0000
x-event-url: http://www.meetup.com/London-Accessibility-Meetup/
---

Research thesis

---
# ...

x-date-deposited: 22 Jul 2016 09:28
x-url:  http://oro.open.ac.uk/id/eprint/46802
x-pdf:  http://oro.open.ac.uk/46802/1/Yang-Guangyu-MPhil-thesis-July-2016-a11y-pdfa.pdf
---

Other

---
# ...

x-created: 11:45
x-published: about 12:30(!)
x-gdoc: https://docs.google.com/document/d/1zIh...ABC/#

x-orig-title:  Proposal
x-wiki-last-edit: 13:07, 15 July 2013‎
x-wiki-urls:
  - http://accessify.wikia.com/wiki/Proposal?veaction=edit
x-source-format: mediawiki

x-errata-data: 2 November 2015 11:44

x-source: http://freear.org.uk/content/introducing-open-media-player
x-other:
  - http://www.open.ac.uk/blogs/LTT_IET/2015/08/introducing-open-media-player/
x-search: https://google.co.uk/search?q="Open+Media+Player"
---

Social media profiles – link list + CSS

SCSS/SASS mixin:

@mixin icon ($domain, $favicon) {

    & [ href *= "#{$domain}" ] {
        background-image: url($favicon);
    }
}

Usage -- SCSS:

.pg-profile {

    ul:nth-of-type( 1 ) {
        margin: 1.7em 10px;
        list-style: none;
    }

    ul:nth-of-type( 1 ) a[ href *= ":" ] {
        padding-left: 30px;
        background-repeat: no-repeat;
        background-position: left;
        background-size: 18px 18px;
    }

    @include icon( "open.ac.uk", "http://www3.open.ac.uk/favicon.ico" );

// ...
}

Google translate 

<div id="google_translate_element"></div>
<script>
(function (W) {

  W.NDF = {};

  W.NDF.googleTranslateElementInit = function () {
    new google.translate.TranslateElement({
      pageLanguage: 'en',
      includedLanguages: 'da,zh-CN',
      gaTrack: true,
      gaId: 'UA-8330079-6'
    }, 'google_translate_element');
  };

  // var sc = W.document.createElement('script');
  // sc.src = 'https://translate.google.com/translate_a/element.js?cb=window.NDF.googleTranslateElementInit';

})(window);
</script>
<script src="https://translate.google.com/translate_a/element.js?cb=window.NDF.googleTranslateElementInit"></script>

...
https://translate.google.com/manager/website/add?security_token=ALkJrhg84ULsSb9nAPWNBRrUOZIr9do1mg%3A1493843882460&step=2&prevStep=1&tl=zh-CN%2Cda&dm=1&ad=1&apl=0&ana=1&aid=UA-8330079-6

Blog posts!

... New and legacy ...

Legacy – prioritize via: https://google.com/analytics (pageviews 1 month: 13 Sep-13 Oct 2015)

  • 80 – /embed-scratch-applet-html5
  • 71 – /creative-commons-licenses-software-just-say-no
  • 63 – / (home)
  • 29 – /ou-annotate
  • 18 – /5-steps-being-oembed-provider
  • ...
  • 9 – /introducing-open-media-player
  • 6 – /open-media-player-jisc...
  • ...?
  • – oembed-isnt-dead-heres-ou-embed
  • – oers-about-accessibility

See: nfreear/nfreear.github.io _posts/_blog.md

[iet:5589527]

Investigate alternative commenting ...? Staticman

..

Site search ... 

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>Content search</ShortName>
  <Description>Content search for Nick Freear.</Description>
  <Contact>[email protected]</Contact>
  <Url type="text/html"
       template="http://freear.org.uk/search/node/{searchTerms}?page={startPage}"/>
  <Url type="application/rss+xml"
       template="http://freear.org.uk/opensearch/node/{searchTerms}?page={startPage}"/>
  <LongName>Content search for Nick Freear.</LongName>
  <SyndicationRight>open</SyndicationRight>
  <AdultContent>0</AdultContent>
  <Language></Language>
</OpenSearchDescription>

Browse post by tags, ... tag cloud?

  • – tag.html – browse posts by tags;
  • – tag.html – tag-cloud?
  • – list tags in each post;

(Also: http://charliepark.org/tags-in-jekyll; http://stackoverflow.com/questions/15976495/how-to-url-encode-in-jekyll-liquid)

  {% for site_tag in site.tags %}
    {% assign tag = site_tag | first %}
    {% assign posts = site_tag | last %}

  <h2 id={{ tag | downcase | replace: "+"," " | cgi_escape }} >{{ tag }}</h2>
  <ul>
  {% for post in posts %}
    {% if post.tags contains tag %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
      <span class="date">{{ post.date | date: "%B %-d, %Y"  }}</span>
    </li>
    {% endif %}
  {% endfor %}
  </ul>
  {% endfor %}

Facebook "like" button; Twitter tweet button etc.

..

  • OpenGraph meta-data;
  • Twitter card meta-data;
  • Social buttons;
{{seo}}

  <title>Your Website Title</title>
    <!-- You can use open graph tags to customize link previews. -->
  <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />

...

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

..

  <!-- Your like button code -->
  <div class="fb-like" 
    data-href="http://www.your-domain.com/your-page.html" 
    data-layout="standard" 
    data-action="like" 
    data-show-faces="true">
  </div>

</html>

Review commenting: options, usability, accessibility.

At least three options:

<script src="http://intensedebate.com/widgets/acctComment/398956/5" defer="defer"></script>

Accessibility fixes [a11y]

  • Relative font-size for main text;
  • Relative font-size for headings, etc.
  • Add WAI-ARIA landmark roles;
  • Control menu-toggle via keyboard (WAI-ARIA/ Javascript) – narrow screens;
  • ... ?

Sitemap / (RSS) feed.xml – raised the `limit` from 10

Sitemap / feed.xml – raise limit from 10:

Extend RSS feeds:

...

    <lastBuildDate>Fri, 02 Oct 2015 20:49:34 +0000</lastBuildDate>
    <language>en</language>
    <sy:updatePeriod>hourly</sy:updatePeriod>
    <sy:updateFrequency>1</sy:updateFrequency>
    <generator>http://wordpress.com/</generator>
    <cloud domain='andy.wordpress.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
    <image>
        <url>https://secure.gravatar.com/blavatar/e6cf065746f46ab81c9bfb04d3358079?s=96&#038;d=https%3A%2F%2Fs2.wp.com%2Fi%2Fbuttonw-com.png</url>
        <title>Andy Skelton</title>
        <link>https://andy.wordpress.com</link>
    </image>
    <atom:link rel="search" type="application/opensearchdescription+xml" href="https://andy.wordpress.com/osd.xml" title="Andy Skelton" />
    <atom:link rel='hub' href='https://andy.wordpress.com/?pushpress=hub'/>

...

Javascript: `#!_FRAME_ME`, move JS config to `data-*` attributes etc.

  • #!__FRAME_ME__ Javascript;
  • #!__BIG_ME__ Javascript;
  • move JS config to data-* attributes;
  • ...?

Markdown:

  [Example](http://example.org/embed/page#!_FRAME_ME_)

Javascript:

  jQuery("a[ href *= _FRAME_ME_ ]").each(function () {

    var $link = $(this)
      , url = $link.attr("href").replace(/\#\!.+/, "");

    $link.replaceWith('<iframe src="' + url + '"></iframe>');
  });

Redirection via Javascript ...

YAML front matter in page:

---
# ...

x-redirect-url: /2017/05/22/sign-machine.html
x-hash: '#id-sign-machine'
x-nav-class: sr-only
---

Top of the page -- includes/head.html:

{% if page.x-redirect-url %}

  <script>
  setTimeout(function () {
    var x_redirect_url = '{{ page.x-redirect-url }}' + ( location.search || '?' ) + '&utm_source=redirect' + '{{ page.x-hash }}';
    window.location = x_redirect_url;
  }, 2000 );
  </script>

  <p role="alert" class="big_me redirect"> Redirecting ... </p>

{% endif %}

Bottom of page -- _layout/default.html:

{% unless page.x-redirect-url %}

    {% include footer.html %}
    {% include footer-javascript.html %}

{% endunless %}

To make it accessible:

  • Put the re-direction Javascript in a setTimeout( ... ) - 2 or 3 seconds - ?
  • Add some text Redirecting ... with role=alert - ?

Add comment meta-data to post frontmatter

Typical example -- 2009-07-16-improving-the-accessibility-of-uservoice.md - blog:


---
layout: post
title:  Improving the accessibility of UserVoice
date:   2009-07-16 12:01:00
categories:
tags:   accessibility  feedback  javascript  uservoice
x-source:  http://freear.org.uk/content/improving-accessibility-uservoice
x-comment-count: 4
x-comments:
  - id: 3
    by: Scott Rutherford <http://www.uservoice.com> (not verified) | Sat, 18/07/2009 - 17:25
    subject: This is now fixed!
    text: >
      Hi Nick,

      I believe we have now fixed this issue, thanks for bringing it to our attention. Are you still having issues with the main site in Firefox? If so, do you think you could send more information on it to support?

      Thanks, Scott Rutherford, CTO Uservoice

---

Outdated ... updates 

Mxxx:nfreear.github.io nXX$ npm outdated

  Package             Current  Wanted  Latest  Location
  grunt                 1.0.4   1.3.0   1.3.0  nfreear.github.io
  grunt-contrib-sass    1.0.0   1.0.0   2.0.0  nfreear.github.io
  grunt-exec            1.0.1   1.0.1   3.0.0  nfreear.github.io
  husky                 1.3.1   1.3.1   4.3.0  nfreear.github.io
  pa11y-ci              1.3.1   1.3.1   2.4.0  nfreear.github.io
  semistandard         13.0.1  13.0.1  14.2.3  nfreear.github.io
Mxxx:nfreear.github.io ndf42$ 
Mxx:nfreear.github.io ndf42$ bundle outdated

Fetching gem metadata from https://rubygems.org/............
Fetching gem metadata from https://rubygems.org/..
Resolving dependencies...

Outdated gems included in the bundle:

  • activesupport (newest 6.0.3.3, installed 5.2.4.1)
  • coffee-script-source (newest 1.12.2, installed 1.11.1)
  • commonmarker (newest 0.21.0, installed 0.17.13)
  • concurrent-ruby (newest 1.1.7, installed 1.1.5)
  • dnsruby (newest 1.61.4, installed 1.61.3)
  • em-websocket (newest 0.5.2, installed 0.5.1)
  • faraday (newest 1.0.1, installed 1.0.0)
  • ffi (newest 1.13.1, installed 1.12.2)
  • github-pages (newest 208, installed 204) in groups "jekyll_plugins"
  • html-pipeline (newest 2.14.0, installed 2.12.3)
  • i18n (newest 1.8.5, installed 0.9.5)
  • jekyll (newest 4.1.1, installed 3.8.5)
  • jekyll-coffeescript (newest 2.0.0, installed 1.1.1)
  • jekyll-feed (newest 0.15.0, installed 0.13.0)
  • jekyll-mentions (newest 1.6.0, installed 1.5.1)
  • jekyll-redirect-from (newest 0.16.0, installed 0.15.0)
  • jekyll-remote-theme (newest 0.4.2, installed 0.4.1)
  • jekyll-sass-converter (newest 2.1.0, installed 1.5.2)
  • jekyll-theme-hacker (newest 0.1.2, installed 0.1.1)
  • jemoji (newest 0.12.0, installed 0.11.1)
  • kramdown (newest 2.3.0, installed 1.17.0)
  • mercenary (newest 0.4.0, installed 0.3.6)
  • mini_portile2 (newest 2.5.0, installed 2.4.0)
  • minitest (newest 5.14.2, installed 5.14.0)
  • nokogiri (newest 1.10.10, installed 1.10.8)
  • octokit (newest 4.18.0, installed 4.16.0)
  • public_suffix (newest 4.0.6, installed 3.1.1)
  • rb-fsevent (newest 0.10.4, installed 0.10.3)
  • rouge (newest 3.23.0, installed 3.13.0)
  • ruby-enum (newest 0.8.0, installed 0.7.2)
  • rubyzip (newest 2.3.0, installed 1.3.0)
  • typhoeus (newest 1.4.0, installed 1.3.1)
  • tzinfo (newest 2.0.2, installed 1.2.6)
  • unicode-display_width (newest 1.7.0, installed 1.6.1)
Mxx:nfreear.github.io ndf42$

Javascript fixes / "performance" 

Nick@~/workspace/nfreear.github.io (master>)$ git diff
diff --git a/_includes/footer-javascript.html b/_includes/footer-javascript.html
index 04a191f..092b2e9 100644
--- a/_includes/footer-javascript.html
+++ b/_includes/footer-javascript.html
@@ -3,15 +3,19 @@
  id="js-config"
 {% for cfg in site.js_config %} data-{{ cfg[0] }}={{ cfg[1] | jsonify }}{% endfor %}
  data-post_title={{ page.title | jsonify }}
- data-post_id={{ page.id | jsonify }}
+ data-post_id="{{ page.id | slugify }}"
  data-post_count="{{ site.posts | size | jsonify }}"
  data-site_time={{ site.time | jsonify }}
 ></div>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
-{% if page.url != '/index.html' %}
+{% case page.url %}
+{% when '/index.html' or '/tag/' or '/search/' %}
+<!--no-embed-->
+{% else %}
 <script src="http://embed.open.ac.uk/scripts/jquery.oembed.js"></script>
-{% endif %}
+{% endcase %}
+<!--page.url: {{ page.url }} -->
 <script src="/js/main.js"></script>

 {% if site.ex_comments and page.excerpt %}
diff

Blog migration -- per-post redirects...?

*** At the same time as backing up the legacy blog, I intend upgrading it:

  • Upgrade legacy blog.

Melody CLI:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.