Code Monkey home page Code Monkey logo

gh-weblog's Introduction

gh-weblog's People

Contributors

pomax avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

samternent

gh-weblog's Issues

Add metadata to individual articles

Some ideas to help google provide proper hashtag urls when searching for an article.

  1. Use html5 <article> tags instead of <div> tags for the entries.
    Entry.jsx line 42 would simply become <article className="entry" id={id}> and the closing tag should match.

  2. Add metadata to the entries in Entry.jsx as follows (line 39 onwards):

        var posted = (new Date(this.state.published)).toLocaleString();
        var updated = (new Date(this.state.updated)).toLocaleString();
        var postedISO = (new Date(this.state.published)).toISOString();
        var updatedISO = (new Date(this.state.updated)).toISOString();
        return (
            <div className="entry" id={id} itemscope itemtype="http://schema.org/BlogPosting">
              {deletebutton}
              <header>
                <h1 itemprop="name"><a href={idLink} itemprop="url">{this.state.title}</a></h1>
                <h2>Originally posted on <time datetime="{postedISO}" itemprop="datePublished">{posted}</time>, 
                  last updated on <time datetime="{postedISO}" itemprop="dateModified">{updated}</time>
                </h2>
              </header>
              <MarkDown ref="markdown" hidden={this.state.editing} text={this.state.postdata} onClick={this.edit} />
              <Editor ref="editor" hidden={!this.state.editing} text={text} update={this.update} view={this.view} delete={this.delete} />
              <a className="comments" href={this.props.issues}>leave a comment on github</a>
              <Tags disabled={!this.props.editable} tags={this.state.tags} onChange={this.updateTags}/>
            </div>
    

    You could also add itemprop="articleBody" to the <div> in Markdown.jsx

At a guess the first solution might be sufficient, but the second could be so much better.

Google provide a structured data tester at https://developers.google.com/structured-data/testing-tool/
I have tested one of the articles from your blog with those properties inserted at those positions in the generated html. The results are pretty nice, if I say so myself.

Property Data found
BlogPosting: http://www.example.com/gh-weblog-1426701409613
name: Mayne Island, BC
url: http://www.example.com/#gh-weblog-1426701409613
datePublished: 2015-03-18T18:56:49
dateModified: 2015-03-18T19:08:33
articleBody: We recently took a trip over to Mayne Island, one of the Canadian Gulf Islands, to visit a friend and generally enjoy being outdoorsy. Coming back to Vancouver after was actually a little depressing (and Vancouver is green), so we'll be going back again next week (hurray!) but in the mean time have some photos from the trip so far: That's a link to the Flickr album, btw, you probably want to click it for much better (and more) images =)

I don't think it matters that the url listed in the first row is wrong, since the url is correctly found later on. I could be wrong, but I don't see any means of testing it other than trying it out on a live site and seeing what happens.

Pull requests seem like so much hassle sometimes, so feel free to use the above code yourself.

add dynamic CSS changing

i.e. on-page CSS changing with live updates, and a push into github when the CSS is acceptable.

add "future publish"

Let users set a custom published time for a post, and skip over any entry with a published value indicating some point in the future, also leaving them out of the RSS feed

add in paste-from-clipboard

if text, paste text. If image data, turn into blob, ask for filename, upload to github as image, then "paste" the image link into the post.

add "draft post" functionality

Allow users to make a post as draft so that it never shows up for unauthenticated users and doesn't end up in the RSS feed

SEO

If I understand this right, the entire blog is hidden behind index.html which uses javascript to show content. Thus a robot that doesn't run javascript won't see anything.

Is that an issue? Does Google manage to reference your blog anyway? My guess would be yes, but you might get slightly downranked because of the javascript dependancy.

Could the code be altered to write html files for each post and update index.html?

"how to add in additional RSS feeds"

Probably best as <WebLog title="..." description="..." base="..." feeds="tag1, tag2, ..."> so that users can simply set this up in the HTML include and then never worry about it again.

make settings location-tied

We don't want user.github.io and user.github.io/somerepo/ to clobber each other's administrative settings.

set up the gulp task for React, browserify, etc.

probably also requires rewriting all the stuff to CommonJS format so that Browserify does the right thing:

gulp tasks

  • turn the React JSX into .js.
  • concat the mixins in
  • concat the dependencies in
  • uglify the resulting browser package.
  • make the final thing an easy to copy/paste snippet for putting on your website.

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.