From e647ab33b8e17b0f7ad57951df23cc498c35d83d Mon Sep 17 00:00:00 2001 From: ceee Date: Tue, 9 Jul 2013 22:17:55 +0200 Subject: [PATCH] add main layout; --- PocketSharp.Website/Assets/Images/stripe.png | Bin 0 -> 2866 bytes .../Assets/Javascripts/prism.js | 503 ++++++++++++++++++ .../Assets/Stylesheets/Base/_typography.scss | 7 +- .../Assets/Stylesheets/Config/_colors.scss | 4 +- .../Assets/Stylesheets/Interface/_all.scss | 4 +- .../Assets/Stylesheets/Interface/_main.scss | 34 +- .../Assets/Stylesheets/Interface/_side.scss | 14 + .../Assets/Stylesheets/Vendor/_all.scss | 4 +- .../Assets/Stylesheets/Vendor/_entypo.scss | 6 +- .../Assets/Stylesheets/Vendor/_prism.scss | 107 ++++ PocketSharp.Website/index.html | 289 +++++++++- 11 files changed, 959 insertions(+), 13 deletions(-) create mode 100644 PocketSharp.Website/Assets/Images/stripe.png create mode 100644 PocketSharp.Website/Assets/Javascripts/prism.js create mode 100644 PocketSharp.Website/Assets/Stylesheets/Interface/_side.scss create mode 100644 PocketSharp.Website/Assets/Stylesheets/Vendor/_prism.scss diff --git a/PocketSharp.Website/Assets/Images/stripe.png b/PocketSharp.Website/Assets/Images/stripe.png new file mode 100644 index 0000000000000000000000000000000000000000..343d5047302c4440de3d77cac463c486e663a268 GIT binary patch literal 2866 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 QF#rGn07*qoM6N<$f~R6nssI20 literal 0 HcmV?d00001 diff --git a/PocketSharp.Website/Assets/Javascripts/prism.js b/PocketSharp.Website/Assets/Javascripts/prism.js new file mode 100644 index 0000000..8929ba1 --- /dev/null +++ b/PocketSharp.Website/Assets/Javascripts/prism.js @@ -0,0 +1,503 @@ + + +/* ********************************************** + Begin prism-core.js +********************************************** */ + +/** + * Prism: Lightweight, robust, elegant syntax highlighting + * MIT license http://www.opensource.org/licenses/mit-license.php/ + * @author Lea Verou http://lea.verou.me + */ + +(function(){ + +// Private helper vars +var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i; + +var _ = self.Prism = { + util: { + type: function (o) { + return Object.prototype.toString.call(o).match(/\[object (\w+)\]/)[1]; + }, + + // Deep clone a language definition (e.g. to extend it) + clone: function (o) { + var type = _.util.type(o); + + switch (type) { + case 'Object': + var clone = {}; + + for (var key in o) { + if (o.hasOwnProperty(key)) { + clone[key] = _.util.clone(o[key]); + } + } + + return clone; + + case 'Array': + return o.slice(); + } + + return o; + } + }, + + languages: { + extend: function (id, redef) { + var lang = _.util.clone(_.languages[id]); + + for (var key in redef) { + lang[key] = redef[key]; + } + + return lang; + }, + + // Insert a token before another token in a language literal + insertBefore: function (inside, before, insert, root) { + root = root || _.languages; + var grammar = root[inside]; + var ret = {}; + + for (var token in grammar) { + + if (grammar.hasOwnProperty(token)) { + + if (token == before) { + + for (var newToken in insert) { + + if (insert.hasOwnProperty(newToken)) { + ret[newToken] = insert[newToken]; + } + } + } + + ret[token] = grammar[token]; + } + } + + return root[inside] = ret; + }, + + // Traverse a language definition with Depth First Search + DFS: function(o, callback) { + for (var i in o) { + callback.call(o, i, o[i]); + + if (_.util.type(o) === 'Object') { + _.languages.DFS(o[i], callback); + } + } + } + }, + + highlightAll: function(async, callback) { + var elements = document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'); + + for (var i=0, element; element = elements[i++];) { + _.highlightElement(element, async === true, callback); + } + }, + + highlightElement: function(element, async, callback) { + // Find language + var language, grammar, parent = element; + + while (parent && !lang.test(parent.className)) { + parent = parent.parentNode; + } + + if (parent) { + language = (parent.className.match(lang) || [,''])[1]; + grammar = _.languages[language]; + } + + if (!grammar) { + return; + } + + // Set language on the element, if not present + element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language; + + // Set language on the parent, for styling + parent = element.parentNode; + + if (/pre/i.test(parent.nodeName)) { + parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language; + } + + var code = element.textContent; + + if(!code) { + return; + } + + code = code.replace(/&/g, '&').replace(//g, '>').replace(/\u00a0/g, ' '); + //console.time(code.slice(0,50)); + + var env = { + element: element, + language: language, + grammar: grammar, + code: code + }; + + _.hooks.run('before-highlight', env); + + if (async && self.Worker) { + var worker = new Worker(_.filename); + + worker.onmessage = function(evt) { + env.highlightedCode = Token.stringify(JSON.parse(evt.data)); + env.element.innerHTML = env.highlightedCode; + + callback && callback.call(env.element); + //console.timeEnd(code.slice(0,50)); + _.hooks.run('after-highlight', env); + }; + + worker.postMessage(JSON.stringify({ + language: env.language, + code: env.code + })); + } + else { + env.highlightedCode = _.highlight(env.code, env.grammar) + env.element.innerHTML = env.highlightedCode; + + callback && callback.call(element); + + _.hooks.run('after-highlight', env); + //console.timeEnd(code.slice(0,50)); + } + }, + + highlight: function (text, grammar) { + return Token.stringify(_.tokenize(text, grammar)); + }, + + tokenize: function(text, grammar) { + var Token = _.Token; + + var strarr = [text]; + + var rest = grammar.rest; + + if (rest) { + for (var token in rest) { + grammar[token] = rest[token]; + } + + delete grammar.rest; + } + + tokenloop: for (var token in grammar) { + if(!grammar.hasOwnProperty(token) || !grammar[token]) { + continue; + } + + var pattern = grammar[token], + inside = pattern.inside, + lookbehind = !!pattern.lookbehind || 0; + + pattern = pattern.pattern || pattern; + + for (var i=0; i text.length) { + // Something went terribly wrong, ABORT, ABORT! + break tokenloop; + } + + if (str instanceof Token) { + continue; + } + + pattern.lastIndex = 0; + + var match = pattern.exec(str); + if (match) { + if(lookbehind) { + lookbehind = match[1].length; + } + + var from = match.index - 1 + lookbehind, + match = match[0].slice(lookbehind), + len = match.length, + to = from + len, + before = str.slice(0, from + 1), + after = str.slice(to + 1); + + var args = [i, 1]; + + if (before) { + args.push(before); + } + + var wrapped = new Token(token, inside? _.tokenize(match, inside) : match); + + args.push(wrapped); + + if (after) { + args.push(after); + } + + Array.prototype.splice.apply(strarr, args); + } + } + } + + return strarr; + }, + + hooks: { + all: {}, + + add: function (name, callback) { + var hooks = _.hooks.all; + + hooks[name] = hooks[name] || []; + + hooks[name].push(callback); + }, + + run: function (name, env) { + var callbacks = _.hooks.all[name]; + + if (!callbacks || !callbacks.length) { + return; + } + + for (var i=0, callback; callback = callbacks[i++];) { + callback(env); + } + } + } +}; + +var Token = _.Token = function(type, content) { + this.type = type; + this.content = content; +}; + +Token.stringify = function(o) { + if (typeof o == 'string') { + return o; + } + + if (Object.prototype.toString.call(o) == '[object Array]') { + return o.map(Token.stringify).join(''); + } + + var env = { + type: o.type, + content: Token.stringify(o.content), + tag: 'span', + classes: ['token', o.type], + attributes: {} + }; + + if (env.type == 'comment') { + env.attributes['spellcheck'] = 'true'; + } + + _.hooks.run('wrap', env); + + var attributes = ''; + + for (var name in env.attributes) { + attributes += name + '="' + (env.attributes[name] || '') + '"'; + } + + return '<' + env.tag + ' class="' + env.classes.join(' ') + '" ' + attributes + '>' + env.content + ''; + +}; + +if (!self.document) { + // In worker + self.addEventListener('message', function(evt) { + var message = JSON.parse(evt.data), + lang = message.language, + code = message.code; + + self.postMessage(JSON.stringify(_.tokenize(code, _.languages[lang]))); + self.close(); + }, false); + + return; +} + +// Get current script and highlight +var script = document.getElementsByTagName('script'); + +script = script[script.length - 1]; + +if (script) { + _.filename = script.src; + + if (document.addEventListener && !script.hasAttribute('data-manual')) { + document.addEventListener('DOMContentLoaded', _.highlightAll); + } +} + +})(); + +/* ********************************************** + Begin prism-markup.js +********************************************** */ + +Prism.languages.markup = { + 'comment': /<!--[\w\W]*?--(>|>)/g, + 'prolog': /<\?.+?\?>/, + 'doctype': /<!DOCTYPE.+?>/, + 'cdata': /<!\[CDATA\[[\w\W]*?]]>/i, + 'tag': { + pattern: /<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi, + inside: { + 'tag': { + pattern: /^<\/?[\w:-]+/i, + inside: { + 'punctuation': /^<\/?/, + 'namespace': /^[\w-]+?:/ + } + }, + 'attr-value': { + pattern: /=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi, + inside: { + 'punctuation': /=|>|"/g + } + }, + 'punctuation': /\/?>/g, + 'attr-name': { + pattern: /[\w:-]+/g, + inside: { + 'namespace': /^[\w-]+?:/ + } + } + + } + }, + 'entity': /&#?[\da-z]{1,8};/gi +}; + +// Plugin to make entity title show the real entity, idea by Roman Komarov +Prism.hooks.add('wrap', function(env) { + + if (env.type === 'entity') { + env.attributes['title'] = env.content.replace(/&/, '&'); + } +}); + +/* ********************************************** + Begin prism-css.js +********************************************** */ + +Prism.languages.css = { + 'comment': /\/\*[\w\W]*?\*\//g, + 'atrule': /@[\w-]+?(\s+[^;{]+)?(?=\s*{|\s*;)/gi, + 'url': /url\((["']?).*?\1\)/gi, + 'selector': /[^\{\}\s][^\{\}]*(?=\s*\{)/g, + 'property': /(\b|\B)[a-z-]+(?=\s*:)/ig, + 'string': /("|')(\\?.)*?\1/g, + 'important': /\B!important\b/gi, + 'ignore': /&(lt|gt|amp);/gi, + 'punctuation': /[\{\};:]/g +}; + +if (Prism.languages.markup) { + Prism.languages.insertBefore('markup', 'tag', { + 'style': { + pattern: /(<|<)style[\w\W]*?(>|>)[\w\W]*?(<|<)\/style(>|>)/ig, + inside: { + 'tag': { + pattern: /(<|<)style[\w\W]*?(>|>)|(<|<)\/style(>|>)/ig, + inside: Prism.languages.markup.tag.inside + }, + rest: Prism.languages.css + } + } + }); +} + +/* ********************************************** + Begin prism-clike.js +********************************************** */ + +Prism.languages.clike = { + 'comment': { + pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g, + lookbehind: true + }, + 'string': /("|')(\\?.)*?\1/g, + 'keyword': /\b(if|else|while|do|for|return|in|instanceof|function|new|try|catch|finally|null|break|continue)\b/g, + 'boolean': /\b(true|false)\b/g, + 'number': /\b-?(0x)?\d*\.?[\da-f]+\b/g, + 'operator': /[-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}|\|?\||\?|\*|\//g, + 'ignore': /&(lt|gt|amp);/gi, + 'punctuation': /[{}[\];(),.:]/g +}; + +/* ********************************************** + Begin prism-javascript.js +********************************************** */ + +Prism.languages.javascript = Prism.languages.extend('clike', { + 'keyword': /\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)\b/g, + 'number': /\b(-?(0x)?\d*\.?[\da-f]+|NaN|-?Infinity)\b/g, +}); + +Prism.languages.insertBefore('javascript', 'keyword', { + 'regex': { + pattern: /(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g, + lookbehind: true + } +}); + +if (Prism.languages.markup) { + Prism.languages.insertBefore('markup', 'tag', { + 'script': { + pattern: /(<|<)script[\w\W]*?(>|>)[\w\W]*?(<|<)\/script(>|>)/ig, + inside: { + 'tag': { + pattern: /(<|<)script[\w\W]*?(>|>)|(<|<)\/script(>|>)/ig, + inside: Prism.languages.markup.tag.inside + }, + rest: Prism.languages.javascript + } + } + }); +} + +/* ********************************************** + Begin prism-coffeescript.js +********************************************** */ + +Prism.languages.coffeescript = Prism.languages.extend('javascript', { + 'block-comment': /([#]{3}\s*\r?\n(.*\s*\r*\n*)\s*?\r?\n[#]{3})/g, + 'comment': /(\s|^)([#]{1}[^#^\r^\n]{2,}?(\r?\n|$))/g, + 'keyword': /\b(this|window|delete|class|extends|namespace|extend|ar|let|if|else|while|do|for|each|of|return|in|instanceof|new|with|typeof|try|catch|finally|null|undefined|break|continue)\b/g, +}); + +Prism.languages.insertBefore('coffeescript', 'keyword', { + 'function': { + pattern: /[a-z|A-z]+\s*[:|=]\s*(\([.|a-z\s|,|:|{|}|\"|\'|=]*\))?\s*->/gi, + inside: { + 'function-name': /[_?a-z-|A-Z-]+(\s*[:|=])| @[_?$?a-z-|A-Z-]+(\s*)| /g, + 'operator': /[-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}|\|?\||\?|\*|\//g + } + }, + + 'class-name': { + pattern: /(class\s+)[a-z-]+[\.a-z]*\s/gi, + lookbehind: true + }, + + 'attr-name': /[_?a-z-|A-Z-]+(\s*:)| @[_?$?a-z-|A-Z-]+(\s*)| /g +}); diff --git a/PocketSharp.Website/Assets/Stylesheets/Base/_typography.scss b/PocketSharp.Website/Assets/Stylesheets/Base/_typography.scss index 60e2a6d..5f8d87d 100644 --- a/PocketSharp.Website/Assets/Stylesheets/Base/_typography.scss +++ b/PocketSharp.Website/Assets/Stylesheets/Base/_typography.scss @@ -46,9 +46,14 @@ a { color: $primaryColor; + text-decoration: none; + @extend %shortTransition; +} + +.article a +{ text-decoration: underline; outline: 1px dotted transparent; - @extend %shortTransition; &:link, &:hover, &:visited { diff --git a/PocketSharp.Website/Assets/Stylesheets/Config/_colors.scss b/PocketSharp.Website/Assets/Stylesheets/Config/_colors.scss index 8795178..2427b50 100644 --- a/PocketSharp.Website/Assets/Stylesheets/Config/_colors.scss +++ b/PocketSharp.Website/Assets/Stylesheets/Config/_colors.scss @@ -5,4 +5,6 @@ $darkColor: #1f2424; $lightColor: #f4f8f8; -$textColor: #5e6161; \ No newline at end of file +$midColor: #5e6161; + +$textColor: white; \ No newline at end of file diff --git a/PocketSharp.Website/Assets/Stylesheets/Interface/_all.scss b/PocketSharp.Website/Assets/Stylesheets/Interface/_all.scss index 8696433..ab042bf 100644 --- a/PocketSharp.Website/Assets/Stylesheets/Interface/_all.scss +++ b/PocketSharp.Website/Assets/Stylesheets/Interface/_all.scss @@ -1,6 +1,4 @@ @import "main"; -@import "header"; - -@import "footer"; \ No newline at end of file +@import "side"; \ No newline at end of file diff --git a/PocketSharp.Website/Assets/Stylesheets/Interface/_main.scss b/PocketSharp.Website/Assets/Stylesheets/Interface/_main.scss index 4c935e4..bb368cb 100644 --- a/PocketSharp.Website/Assets/Stylesheets/Interface/_main.scss +++ b/PocketSharp.Website/Assets/Stylesheets/Interface/_main.scss @@ -3,19 +3,29 @@ @include box-sizing(border-box); } +$screen: "only screen"; +$small: "only screen and (max-width: 480px)"; + html { height: 100%; } +html, body +{ + font-size: 100%; +} + body { - line-height: 1; + line-height: 1.2; color: $textColor; height: 100%; width: 100%; position: relative; font-family: 'Segoe UI', Arial, sans-serif; + font-size: 14px; + background: $darkColor image-url('stripe.png') repeat-x top; -webkit-text-size-adjust: none; @@ -23,9 +33,27 @@ body -ms-touch-action: double-tap-zoom; } -html, body +// app area +.app { - font-size: 100%; + width: 760px; + max-width: 100%; + margin: 0 auto; + padding: 100px 20px 0; + position: relative; + + @extend %clearfix; + + @media #{$small} + { + padding-top: 40px; + } +} + +.app-main +{ + width: 460px; + float: right; } // Get rid of gap under images by making them display: inline-block; by default diff --git a/PocketSharp.Website/Assets/Stylesheets/Interface/_side.scss b/PocketSharp.Website/Assets/Stylesheets/Interface/_side.scss new file mode 100644 index 0000000..e0c0c87 --- /dev/null +++ b/PocketSharp.Website/Assets/Stylesheets/Interface/_side.scss @@ -0,0 +1,14 @@ + + +.app-side +{ + width: 240px; + float: left; +} + +.app-description +{ + background: darken($darkColor, 2%); + border-radius: 4px; + padding: 20px; +} \ No newline at end of file diff --git a/PocketSharp.Website/Assets/Stylesheets/Vendor/_all.scss b/PocketSharp.Website/Assets/Stylesheets/Vendor/_all.scss index 91ea196..6a4238b 100644 --- a/PocketSharp.Website/Assets/Stylesheets/Vendor/_all.scss +++ b/PocketSharp.Website/Assets/Stylesheets/Vendor/_all.scss @@ -1,3 +1,5 @@ @import "normalize"; -@import "entypo"; \ No newline at end of file +@import "entypo"; + +@import "prism"; \ No newline at end of file diff --git a/PocketSharp.Website/Assets/Stylesheets/Vendor/_entypo.scss b/PocketSharp.Website/Assets/Stylesheets/Vendor/_entypo.scss index 7b9d371..79a72d3 100644 --- a/PocketSharp.Website/Assets/Stylesheets/Vendor/_entypo.scss +++ b/PocketSharp.Website/Assets/Stylesheets/Vendor/_entypo.scss @@ -154,9 +154,9 @@ //.entypo-quote:before { // content:"\275e" //} -//.entypo-code:before { -// content:"\e714" -//} +.entypo-code:before { + content:"\e714" +} //.entypo-export:before { // content:"\e715" //} diff --git a/PocketSharp.Website/Assets/Stylesheets/Vendor/_prism.scss b/PocketSharp.Website/Assets/Stylesheets/Vendor/_prism.scss new file mode 100644 index 0000000..2d34d29 --- /dev/null +++ b/PocketSharp.Website/Assets/Stylesheets/Vendor/_prism.scss @@ -0,0 +1,107 @@ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ + +code[class*="language-"], +pre[class*="language-"] { + color: black; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +@media print { + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #a67f59; + background: hsla(0,0%,100%,.5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + + +.token.regex, +.token.important { + color: #e90; +} + +.token.important { + font-weight: bold; +} + +.token.entity { + cursor: help; +} \ No newline at end of file diff --git a/PocketSharp.Website/index.html b/PocketSharp.Website/index.html index 6e6b5a9..03873a6 100644 --- a/PocketSharp.Website/index.html +++ b/PocketSharp.Website/index.html @@ -25,7 +25,294 @@ -

PocketSharp

+
+ + + +
+

+PocketSharp

+ +
+

This project is work in progress. +PocketSharp will be released as a NuGet package when ready.

+
+ +

PocketSharp is a C#.NET class library, that integrates the Pocket API v3 and consists of 4 parts:

+ +
    +
  • Authentication
    • +
  • Retrieve
    • +
  • Modify
    • +
  • Add
    • +

If you don't know Pocket, be sure to check it out. It's an awesome service that lets you save articles, videos, ... in the cloud and access it from all your devices.

+ +

+Usage Example

+ +

Request a Consumer Key on Pocket.

+ +

Include the PocketSharp namespace and it's associated models (you will need them later):

+ +
using PocketSharp;
+using PocketSharp.Models;
+
+ +

Initialize PocketClient with:

+ +
PocketClient _client = new PocketClient("[YOUR_CONSUMER_KEY]", "[YOUR_ACCESS_CODE]");
+
+ +

Do a simple request - e.g. a search for CSS:

+ +
_client.Search("css").ForEach(
+    item => Console.WriteLine(item.ID + " | " + item.Title)
+);
+
+ +

Which will output:

+ +
330361896 | CSS Front-end Frameworks with comparison : By usabli.ca
+345541438 | Editr - HTML, CSS, JavaScript playground
+251743431 | CSS Architecture
+343693149 | CSS3 Transitions - Thank God We Have A Specification!
+...
+
+ +

+Create an instance

+ +

Constructor:

+ +
PocketClient(string consumerKey, string accessCode = null, Uri callbackUri = null)
+
+ +

consumerKey: The API key +
accessCode: Provide an access code if the user is already authenticated +
callbackUri: The callback URL is called by Pocket after authentication

+ +

Example:

+ +
PocketClient _client = new PocketClient(
+    consumerKey: "123498237423498723498723",
+    callbackUri: new Uri("http://ceecore.com"),
+    accessCode: "097809-oi987-izi8-jk98-oiuu89"
+);
+
+ +

You can change the Access Code after initialization:

+ +
_client.AccessCode = "[YOU_ACCESS_CODE]";
+
+ +

Before authentication you will need to provide the callbackUri for authentication requests. +
After authentication you will need to provide the accessCode.

+ +

+Authentication

+ +

In order to communicate with a Pocket User, you will need a consumer key (which is generated by creating a new application on Pocket) and an Access Code.

+ +

The authentication is a 3-step process:

+ +

+1) Generate authentication URI

+ +

Receive the request code and authentication URI from the library by calling string GetRequestCode():

+ +
string requestCode = _client.GetRequestCode();
+// 0f453f2d-1605-8584-28fd-39af8e
+Uri authenticationUri = _client.GenerateAuthenticationUri();
+// https://getpocket.com/auth/authorize?request_token=0f453f2d-1605-8584-28fd-39af8e&redirect_uri=http%253a%252f%252fceecore.com
+
+ +

The request code is stored internally, but you can also provide it as param in GenerateAuthenticationUri(string requestCode = null).

+ +

+2) Redirect to Pocket

+ +

Next you need to redirect the user to the authenticationUri, which displays a prompt to grant permissions for the application (see image). After the user granted or denied, he/she is redirected to the callbackUri.

+ +

authentication screen

+ +

+3) Get Access Code

+ +

Call string GetAccessCode(string requestCode = null)

+ +
string accessCode = _client.GetAccessCode();
+// fa8bfc16-69b3-4d22-7db7-84a58d
+
+ +

Again, the received access code is stored internally. +Note that GetAccessCode can only be called with an existing request code. If you need to re-authenticate a user, start again with Step 1).

+ +

+Important

+ +

Be sure to permanently store the Access Code for your user. +
+Without it you would always have to redo the authentication process.

+ +

+Retrieve

+ +

Get list of all items:

+ +
List<PocketItem> items = _client.Retrieve();
+// equivalent to: _client.Retrieve(RetrieveFilter.All)
+
+ +

Find items by a tag:

+ +
List<PocketItem> items = _client.SearchByTag("tutorial");
+
+ +

Find items by a search string:

+ +
List<PocketItem> items = _client.Search("css");
+
+ +

Find items by a filter:

+ +
List<PocketItem> items = _client.Retrieve(RetrieveFilter.Favorite); // only favorites
+
+ +

The RetrieveFilter Enum is specified as follows:

+ +
enum RetrieveFilter { All, Unread, Archive, Favorite, Article, Video, Image }
+
+ +

+Custom Parameters

+ +

You can create a completely custom parameter list for retrieval with the POCO RetrieveParameters:

+ +
var parameters = new RetrieveParameters()
+{
+    Count = 50,
+    Offset = 100,
+    Sort = SortEnum.oldest
+    ...
+};
+
+List<PocketItem> items = _client.Retrieve(parameters);
+
+ +

+Add

+ +

Adds a new item to your pocket list. +Accepts four parameters, with uri being required.

+ +
PocketItem Add(Uri uri, string[] tags = null, string title = null, string tweetID = null)
+
+ +

Example:

+ +
PocketItem newItem = _client.Add(
+    new Uri("http://www.neowin.net/news/full-build-2013-conference-sessions-listing-revealed"),
+    new string[] { "microsoft", "neowin", "build" }
+);
+
+ +

The title can be included for cases where an item does not have a title, which is typical for image or PDF URLs. If Pocket detects a title from the content of the page, this parameter will be ignored.

+ +

If you are adding Pocket support to a Twitter client, please send along a reference to the tweet status id (with the tweetID). This allows Pocket to show the original tweet alongside the article.

+ +

+Modify

+ +

All Modify methods accept either the itemID (as int) or a PocketItem as parameter.

+ +

Archive the specified item:

+ +
bool isSuccess = _client.Archive(myPocketItem);
+
+ +

Un-archive the specified item:

+ +
bool isSuccess = _client.Unarchive(myPocketItem);
+
+ +

Favorites the specified item:

+ +
bool isSuccess = _client.Favorite(myPocketItem);
+
+ +

Un-favorites the specified item:

+ +
bool isSuccess = _client.Unfavorite(myPocketItem);
+
+ +

Deletes the specified item:

+ +
bool isSuccess = _client.Delete(myPocketItem);
+
+ +

+Modify tags

+ +

Add tags to the specified item:

+ +
bool isSuccess = _client.AddTags(myPocketItem, new string[] { "css", "2013" });
+
+ +

Remove tags from the specified item:

+ +
bool isSuccess = _client.RemoveTags(myPocketItem, new string[] { "css", "2013" });
+
+ +

Remove all tags from the specified item:

+ +
bool isSuccess = _client.RemoveTags(myPocketItem);
+
+ +

Replaces all existing tags with new ones for the specified item:

+ +
bool isSuccess = _client.ReplaceTags(myPocketItem, new string[] { "css", "2013" });
+
+ +

Renames a tag for the specified item:

+ +
bool isSuccess = _client.RenameTag(myPocketItem, "oldTagName", "newTagName");
+
+ +

+Release History

+ +
    +
  • 2013-07-07 v0.3.1 authentication fixes
    • +
  • 2013-07-02 v0.3.0 update authentication process
    • +
  • 2013-06-27 v0.2.0 add, modify item & modify tags
    • +
  • 2013-06-26 v0.1.0 authentication & retrieve functionality
    • +

+Used Packages

+ +

+Contributors

+ + + + + + + + +
twitter/artistandsocial
Tobias Klika @ceee
+
+ +