26 |
--------------------------------------------------------------------------------
/web/bootstrap/css/prettify.css:
--------------------------------------------------------------------------------
1 | .com { color: #93a1a1; }
2 | .lit { color: #195f91; }
3 | .pun, .opn, .clo { color: #93a1a1; }
4 | .fun { color: #dc322f; }
5 | .str, .atv { color: #D14; }
6 | .kwd, .prettyprint .tag { color: #1e347b; }
7 | .typ, .atn, .dec, .var { color: teal; }
8 | .pln { color: #48484c; }
9 |
10 | .prettyprint {
11 | padding: 8px;
12 | background-color: #f7f7f9;
13 | border: 1px solid #e1e1e8;
14 | }
15 | .prettyprint.linenums {
16 | -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
17 | -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
18 | box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
19 | }
20 |
21 | /* Specify class=linenums on a pre to get line numbering */
22 | ol.linenums {
23 | margin: 0 0 0 33px; /* IE indents via margin-left */
24 | }
25 | ol.linenums li {
26 | padding-left: 12px;
27 | color: #bebec5;
28 | line-height: 20px;
29 | text-shadow: 0 1px 0 #fff;
30 | }
--------------------------------------------------------------------------------
/web/css/indiewebify.css:
--------------------------------------------------------------------------------
1 | .empty-property-block {
2 | background: #555;
3 | color: #efefef;
4 | text-shadow: none;
5 | border: #334 1px solid;
6 | box-shadow: #333 0 0 1em inset;
7 | padding: 0.5em;
8 | }
9 |
10 | .property-block-name {
11 | margin-bottom: 0.1em;
12 | margin-top: 1em;
13 | font-variant: small-caps;
14 | color: #555;
15 | font-size: 0.8em;
16 | clear: both;
17 | }
18 |
19 | .preview-block {
20 | background: #efefef;
21 | padding: 1em;
22 | max-width: 30em;
23 | border: 2px solid #DDD;
24 | }
25 |
26 | /* h-card validation */
27 | .preview-h-card .photo-block {
28 | max-width: 13em;
29 | max-height: 7em;
30 | float: left;
31 | margin: 0 0.5em 0.5em 0;
32 | }
33 |
34 | .preview-h-card .p-name {
35 | float: left;
36 | font-size: 2em;
37 | }
38 |
39 | /* h-entry validation */
40 | .preview-h-entry .p-author .u-photo {
41 | max-height: 2em;
42 | }
43 |
44 | .preview-h-entry .e-content {
45 | border-left: 0.5em #ddd solid;
46 | padding: 0.1em 0.5em;
47 | font-size: 0.9em;
48 | color: #333;
49 | background: #fff;
50 | }
51 |
52 | li {
53 | line-height: 1.6;
54 | }
--------------------------------------------------------------------------------
/web/less/modules/type.less:
--------------------------------------------------------------------------------
1 | // Typography
2 | // --------------------------------------------------
3 |
4 | body {
5 | color: @base;
6 | font-family: @base-font-family;
7 | font-size: @base-font-size;
8 | line-height: @base-line-height;
9 | }
10 |
11 | input,
12 | button,
13 | select,
14 | textarea {
15 | font-family: @base-font-family;
16 | font-size: @base-font-size;
17 | }
18 |
19 | a {
20 | color: @link-color;
21 | text-decoration: underline;
22 | .transition(0.25s);
23 |
24 | &:hover {
25 | color: @link-hover-color;
26 | text-decoration: none;
27 | }
28 | }
29 |
30 | // H1—H6 specific styling
31 | h1 {
32 | font-size: 32px;
33 | font-weight: 900;
34 | }
35 | h2 {
36 | font-size: 26px;
37 | font-weight: 700;
38 | margin-bottom: 2px;
39 | }
40 | h3 {
41 | font-size: 24px;
42 | font-weight: 700;
43 | margin-bottom: 4px;
44 | margin-top: 2px;
45 | }
46 | h4 {
47 | font-size: 18px;
48 | font-weight: 500;
49 | margin-top: 4px;
50 | }
51 | h5 {
52 | font-size: 16px;
53 | font-weight: 500;
54 | text-transform: uppercase;
55 | }
56 | h6 {
57 | font-size: 13px;
58 | font-weight: 500;
59 | text-transform: uppercase;
60 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # IndieWebify.me
2 |
3 | This tool offers a fast and easy way to get you & your website on the Indieweb, to use go to [indiewebify.me](http://indiewebify.me).
4 |
5 | To learn more about the IndieWeb go to [indieweb.org](https://indieweb.org).
6 |
7 | Made by Brennan Novak, Barnaby Walters, and others at the 2013 IndieWebCamps in [Reykjavik](http://indieweb.org/2013/#Remote_Indiewebcamp_Parties) and [Brighton](http://indieweb.org/2013/UK).
8 |
9 | ## Installation
10 |
11 | Requirements:
12 | * PHP 7.2
13 |
14 | How to run your own instance of indiewebify.me for development:
15 |
16 | 1. `git clone https://github.com/indieweb/indiewebify-me.git && cd indiewebify-me`
17 | 1. If you don’t have [Composer](https://getcomposer.org) installed, do so:
18 | * `curl -s https://getcomposer.org/installer | php`
19 | 1. Install dependencies: `./composer.phar install`
20 | 1. Point your web server at `indiewebify-me/web/`.
21 | * The included .htaccess should route apache requests correctly. For other servers file an issue or send us a pull request
22 |
23 | All of the interesting stuff is in `/web/index.php` — or at least is until that gets too big and needs moving.
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/web/less/flat-ui.less:
--------------------------------------------------------------------------------
1 | // Flat UI main stylesheet that aggregates all modules
2 |
3 | // Loading custom fonts
4 | @import url("https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,400italic,300");
5 | @import "icon-font";
6 |
7 | // Loading config with variables (changing them leads to changing a color scheme)
8 | @import "config";
9 |
10 | // Utility mixins for greater good
11 | @import "mixins";
12 |
13 | // Modules
14 | @import "modules/demo";
15 | @import "modules/type";
16 | @import "modules/buttons";
17 | @import "modules/caret";
18 | @import "modules/navbar";
19 | @import "modules/select";
20 | @import "modules/input";
21 | @import "modules/checkbox-and-radio";
22 | @import "modules/tagsinput";
23 | @import "modules/progress";
24 | @import "modules/ui-slider";
25 | @import "modules/pager";
26 | @import "modules/pagination";
27 | @import "modules/tooltip";
28 | @import "modules/dropdown";
29 | @import "modules/switch";
30 | @import "modules/share";
31 | @import "modules/palette";
32 | @import "modules/tile";
33 | @import "modules/todo";
34 | @import "modules/footer";
35 | @import "modules/video";
36 | @import "modules/login";
37 |
38 | // Spaces
39 | @import "spaces";
40 |
--------------------------------------------------------------------------------
/web/js/jquery.ui.touch-punch.min.js:
--------------------------------------------------------------------------------
1 | /*
2 | * jQuery UI Touch Punch 0.2.2
3 | *
4 | * Copyright 2011, Dave Furfero
5 | * Dual licensed under the MIT or GPL Version 2 licenses.
6 | *
7 | * Depends:
8 | * jquery.ui.widget.js
9 | * jquery.ui.mouse.js
10 | */
11 | (function(b){b.support.touch="ontouchend" in document;if(!b.support.touch){return;}var c=b.ui.mouse.prototype,e=c._mouseInit,a;function d(g,h){if(g.originalEvent.touches.length>1){return;}g.preventDefault();var i=g.originalEvent.changedTouches[0],f=document.createEvent("MouseEvents");f.initMouseEvent(h,true,true,window,1,i.screenX,i.screenY,i.clientX,i.clientY,false,false,false,false,0,null);g.target.dispatchEvent(f);}c._touchStart=function(g){var f=this;if(a||!f._mouseCapture(g.originalEvent.changedTouches[0])){return;}a=true;f._touchMoved=false;d(g,"mouseover");d(g,"mousemove");d(g,"mousedown");};c._touchMove=function(f){if(!a){return;}this._touchMoved=true;d(f,"mousemove");};c._touchEnd=function(f){if(!a){return;}d(f,"mouseup");d(f,"mouseout");if(!this._touchMoved){d(f,"click");}a=false;};c._mouseInit=function(){var f=this;f.element.bind("touchstart",b.proxy(f,"_touchStart")).bind("touchmove",b.proxy(f,"_touchMove")).bind("touchend",b.proxy(f,"_touchEnd"));e.call(f);};})(jQuery);
--------------------------------------------------------------------------------
/web/less/modules/tooltip.less:
--------------------------------------------------------------------------------
1 | // Tooltip
2 | // --------------------------------------------------
3 |
4 | .tooltip {
5 | font-size: @base-font-size;
6 |
7 | &.in {
8 | opacity: 1;
9 | }
10 | &.top {
11 | padding-bottom: 9px;
12 |
13 | .tooltip-arrow {
14 | border-top-color: @base;
15 | border-width: 9px 9px 0;
16 | bottom: 0;
17 | margin-left: -9px;
18 | }
19 | }
20 | &.right {
21 | .tooltip-arrow {
22 | border-right-color: @base;
23 | border-width: 9px 9px 9px 0;
24 | margin-top: -9px;
25 | left: -3px;
26 | }
27 | }
28 | &.bottom {
29 | padding-top: 8px;
30 |
31 | .tooltip-arrow {
32 | border-bottom-color: @base;
33 | border-width: 0 9px 9px;
34 | margin-left: -9px;
35 | top: -1px;
36 | }
37 | }
38 | &.left {
39 | .tooltip-arrow {
40 | border-left-color: @base;
41 | border-width: 9px 0 9px 9px;
42 | margin-top: -9px;
43 | right: -3px;
44 | }
45 | }
46 | }
47 |
48 | .tooltip-inner {
49 | background-color: @base;
50 | line-height: @base-font-size * 1.285;
51 | padding: 12px 12px;
52 | text-align: center;
53 | width: 183px;
54 | .border-radius(6px);
55 | }
56 |
--------------------------------------------------------------------------------
/web/less/modules/palette.less:
--------------------------------------------------------------------------------
1 | //
2 | // Palette
3 | // --------------------------------------------------
4 |
5 | .palette {
6 | color: @inverse;
7 | margin: 0;
8 | padding: 15px;
9 | text-transform: uppercase;
10 |
11 | dt {
12 | display: block;
13 | font-weight: 500;
14 | .opacity(80);
15 | }
16 | dd {
17 | font-weight: 200;
18 | margin-left: 0;
19 | .opacity(80);
20 | }
21 | }
22 |
23 | //
24 | // Pallet grid
25 | // --------------------------------------------------
26 | .calc-color(~"turquoise", ~"green-sea");
27 | .calc-color(~"emerald", ~"nephritis");
28 | .calc-color(~"peter-river", ~"belize-hole");
29 | .calc-color(~"amethyst", ~"wisteria");
30 | .calc-color(~"wet-asphalt", ~"midnight-blue");
31 |
32 | .calc-color(~"sun-flower", ~"orange");
33 | .calc-color(~"carrot", ~"pumpkin");
34 | .calc-color(~"alizarin", ~"pomegranate");
35 | .calc-color(~"clouds", ~"silver");
36 | .calc-color(~"concrete", ~"asbestos");
37 |
38 | .palette-clouds {
39 | color: #bdc3c7;
40 | }
41 |
42 | // Palette paragraph
43 | .palette-paragraph {
44 | color: #7f8c8d;
45 | font-size: 12px;
46 | line-height: 17px;
47 |
48 | span {
49 | color: #bdc3c7;
50 | }
51 | }
52 |
53 | // Headline
54 | .palette-headline {
55 | color: #7f8c8d;
56 | font-weight: 700;
57 | margin-top: -5px;
58 | }
59 |
--------------------------------------------------------------------------------
/web/less/modules/pager.less:
--------------------------------------------------------------------------------
1 | //
2 | // Pager
3 | // --------------------------------------------------
4 |
5 | .pager {
6 | background-color: @base;
7 | border-radius: 6px;
8 | color: @inverse;
9 | font-size: 16px;
10 | font-weight: 700;
11 | .inline-block();
12 |
13 | li {
14 | &:first-child {
15 | > a,
16 | > span {
17 | border-left: none;
18 | .border-radius(6px 0 0 6px);
19 | }
20 | }
21 | &.pager-center {
22 | padding: @pager-padding;
23 | padding-left: 0;
24 | padding-right: 0;
25 | .inline-block();
26 | }
27 | > a,
28 | > span {
29 | background: none;
30 | border: none;
31 | border-left: 2px solid mix(@base, black, 85%);
32 | color: @inverse;
33 | padding: @pager-padding;
34 | text-decoration: none;
35 | white-space: nowrap;
36 | .border-radius(0 6px 6px 0);
37 |
38 | &:hover, &:focus {
39 | background-color: mix(@base, black, 85%);
40 | }
41 | &:active {
42 | background-color: mix(@base, black, 85%);
43 | }
44 |
45 | // Add some spacing between the icon and text
46 | [class*="fui-"] + span {
47 | margin-left: 8px;
48 | }
49 | span + [class*="fui-"] {
50 | margin-left: 8px;
51 | }
52 | }
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/web/less/modules/ui-slider.less:
--------------------------------------------------------------------------------
1 | // Slider
2 | // --------------------------------------------------
3 |
4 | .ui-slider {
5 | .progress();
6 | margin-bottom: 20px;
7 | position: relative;
8 | }
9 |
10 | .ui-slider-handle {
11 | background-color: mix(@firm, black, 85%);
12 | border-radius: 50%;
13 | cursor: pointer;
14 | height: 18px;
15 | margin-left: -9px;
16 | position: absolute;
17 | top: -3px;
18 | width: 18px;
19 | z-index: 2;
20 | .transition(background 0.25s);
21 |
22 | &[style*='100'] {
23 | margin-left: -15px;
24 | }
25 | &:hover,
26 | &:focus {
27 | background-color: mix(@firm, white, 80%);
28 | outline: none;
29 | }
30 | &:active {
31 | background-color: mix(@firm, black, 85%);
32 | }
33 | }
34 |
35 | .ui-slider-range {
36 | background-color: @firm;
37 | border-radius: 30px 0 0 30px;
38 | display: block;
39 | height: 100%;
40 | position: absolute;
41 | z-index: 1;
42 | }
43 |
44 | .ui-slider-segment {
45 | background-color: mix(desaturate(@base, 15%), white, 20%);
46 | border-radius: 50%;
47 | float: left;
48 | height: 6px;
49 | margin: 3px -6px 0 0;
50 | width: 6px;
51 | }
52 |
53 | .ui-slider-value {
54 | float: right;
55 | font-weight: 500;
56 | margin-top: @progress-height;
57 |
58 | &.first {
59 | clear: left;
60 | float: left;
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/web/less/modules/footer.less:
--------------------------------------------------------------------------------
1 | //
2 | // Footer
3 | // --------------------------------------------------
4 |
5 | footer {
6 | background-color: mix(@base, @inverse, 9%);
7 | color: mix(@base, @inverse, 34%);
8 | font-size: 15px;
9 | padding: 0;
10 |
11 | a {
12 | color: mix(@base, @inverse, 50%);
13 | font-weight: 700;
14 | }
15 | p {
16 | font-size: 15px;
17 | line-height: 20px;
18 | }
19 | }
20 |
21 | .footer-title {
22 | margin: 0 0 22px;
23 | padding-top: 21px;
24 | }
25 |
26 | .footer-brand {
27 | display: block;
28 | margin-bottom: 26px;
29 | width: 220px;
30 |
31 | img {
32 | width: 216px;
33 | }
34 | }
35 |
36 | // FOOTER BANNER
37 | // ----------------------
38 | .footer-banner {
39 | background-color: @firm;
40 | color: mix(@firm, @inverse, 20%);
41 | margin-left: 42px;
42 | min-height: 286px;
43 | padding: 0 30px 30px;
44 |
45 | .footer-title {
46 | color: @inverse;
47 | }
48 | a {
49 | color: lighten(@firm, 42%);
50 | text-decoration: underline;
51 |
52 | &:hover {
53 | text-decoration: none;
54 | }
55 | }
56 | ul {
57 | list-style-type: none;
58 | margin: 0 0 26px;
59 |
60 | li {
61 | border-top: 1px solid lighten(@firm, 2%);
62 | line-height: 19px;
63 | padding: 6px 0;
64 |
65 | &:first-child {
66 | border-top: none;
67 | padding-top: 1px;
68 | }
69 | }
70 | }
71 | }
72 |
73 |
--------------------------------------------------------------------------------
/web/less/modules/tile.less:
--------------------------------------------------------------------------------
1 | //
2 | // Tile
3 | // -------------------------------------------------
4 |
5 | .tile {
6 | background-color: mix(@base, @inverse, 8%);
7 | border-radius: 6px;
8 | padding: 14px;
9 | position: relative;
10 | text-align: center;
11 |
12 | &.tile-hot {
13 | &:before {
14 | background: url(../images/tile/ribbon.png) 0 0 no-repeat;
15 | background-size: 82px 82px;
16 | content: '';
17 | height: 82px;
18 | position: absolute;
19 | right: -4px;
20 | top: -4px;
21 | width: 82px;
22 | }
23 | }
24 | p {
25 | font-size: 15px;
26 | margin-bottom: 33px;
27 | }
28 | }
29 | .tile-image {
30 | height: 100px;
31 | margin: 31px 0 27px;
32 | vertical-align: bottom;
33 |
34 | &.big-illustration {
35 | height: 111px;
36 | margin-top: 20px;
37 | width: 112px;
38 | }
39 | }
40 | .tile-title {
41 | font-size: 20px;
42 | margin: 0;
43 | }
44 |
45 | // Retina Support
46 | @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
47 | .tile {
48 | &.tile-hot {
49 | &:before {
50 | background-image: url(../images/tile/ribbon-2x.png);
51 | }
52 | }
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/tests/html-test-runner.php:
--------------------------------------------------------------------------------
1 | parse();
16 |
17 | $testSuites = Mf2\findMicroformatsByType($mf, 'h-x-test-suite');
18 |
19 | if (count($testSuites) === 0)
20 | die("Found no test suites in rel-me-test.html");
21 |
22 | $testSuite = $testSuites[0];
23 |
24 | echo "\n" . Mf2\getProp($testSuite, 'name') . "\n";
25 | echo "============================\n";
26 |
27 | foreach ($testSuite['properties']['x-test-case'] as $testCase) {
28 | echo "\n";
29 | $params = $testCase['properties']['x-parameter'];
30 | $meUrl = array_shift($params);
31 | if (count($params) === 0)
32 | $redirects = mockFollowOneRedirect(array(null));
33 | else
34 | $redirects = mockFollowOneRedirect($params);
35 |
36 | list($expectedUrl, $expectedSecure) = $testCase['properties']['x-expected-result'];
37 | $expectedSecure = $expectedSecure === 'true';
38 |
39 | // Begin testing
40 | $meUrl = normaliseUrl($meUrl);
41 | list($url, $secure, $previous) = relMeDocumentUrl($meUrl, $redirects);
42 | // end testing
43 |
44 | if ($url === $expectedUrl and $secure === $expectedSecure):
45 | echo "(pass) " . Mf2\getProp($testCase, 'name') . "\n";
46 | else:
47 | echo "(fail) " . Mf2\getProp($testCase, 'name') . "\n";
48 | if ($url != $expectedUrl)
49 | echo "- {$url} should match {$expectedUrl}\n";
50 | if ($secure != $expectedSecure)
51 | echo "- {$secure} didn’t match {$expectedSecure}\n";
52 | endif;
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/web/js/icon-font-ie7.js:
--------------------------------------------------------------------------------
1 | /* Load this script using conditional IE comments if you need to support IE 7 and IE 6. */
2 |
3 | window.onload = function() {
4 | function addIcon(el, entity) {
5 | var html = el.innerHTML;
6 | el.innerHTML = '
' + entity + '' + html;
7 | }
8 | var icons = {
9 | 'fui-arrow-right' : '',
10 | 'fui-arrow-left' : '',
11 | 'fui-cmd' : '',
12 | 'fui-check-inverted' : '',
13 | 'fui-heart' : '',
14 | 'fui-location' : '',
15 | 'fui-plus' : '',
16 | 'fui-check' : '',
17 | 'fui-cross' : '',
18 | 'fui-list' : '',
19 | 'fui-new' : '',
20 | 'fui-video' : '',
21 | 'fui-photo' : '',
22 | 'fui-volume' : '',
23 | 'fui-time' : '',
24 | 'fui-eye' : '',
25 | 'fui-chat' : '',
26 | 'fui-search' : '',
27 | 'fui-user' : '',
28 | 'fui-mail' : '',
29 | 'fui-lock' : '',
30 | 'fui-gear' : '',
31 | 'fui-radio-unchecked' : '',
32 | 'fui-radio-checked' : '',
33 | 'fui-checkbox-unchecked' : '',
34 | 'fui-checkbox-checked' : '',
35 | 'fui-calendar-solid' : '',
36 | 'fui-pause' : '',
37 | 'fui-play' : '',
38 | 'fui-check-inverted-2' : ''
39 | },
40 | els = document.getElementsByTagName('*'),
41 | i, attr, html, c, el;
42 | for (i = 0; ; i += 1) {
43 | el = els[i];
44 | if(!el) {
45 | break;
46 | }
47 | attr = el.getAttribute('data-icon');
48 | if (attr) {
49 | addIcon(el, attr);
50 | }
51 | c = el.className;
52 | c = c.match(/fui-[^\s'"]+/);
53 | if (c && icons[c[0]]) {
54 | addIcon(el, icons[c[0]]);
55 | }
56 | }
57 | };
--------------------------------------------------------------------------------
/web/js/jquery.stacktable.js:
--------------------------------------------------------------------------------
1 | /**
2 | * MODIFIED CAUSE WE NEEDED OUR OWN MARKUP
3 | * stacktable.js
4 | * Author & copyright (c) 2012: John Polacek
5 | * Dual MIT & GPL license
6 | *
7 | * Page: http://johnpolacek.github.com/stacktable.js
8 | * Repo: https://github.com/johnpolacek/stacktable.js/
9 | *
10 | * jQuery plugin for stacking tables on small screens
11 | *
12 | */
13 | ;(function($) {
14 |
15 | $.fn.stacktable = function(options) {
16 | var $tables = this,
17 | defaults = {id:'stacktable',hideOriginal:false},
18 | settings = $.extend({}, defaults, options),
19 | stacktable;
20 |
21 | return $tables.each(function() {
22 | var $stacktable = $('
');
23 | if (typeof settings.myClass !== undefined) $stacktable.addClass(settings.myClass);
24 | var markup = '';
25 | $table = $(this);
26 | $topRow = $table.find('tr').eq(0);
27 | $table.find('tr').each(function(index,value) {
28 | var zebra = "";
29 | if (index % 2 === 0) {
30 | zebra = "even";
31 | } else {
32 | zebra = "odd";
33 | }
34 | markup += '
';
35 | $(this).find('td').each(function(index,value) {
36 | if ($(this).html() !== ''){
37 | markup += '
';
38 | if ($topRow.find('td,th').eq(index).html()){
39 | markup += '| '+$topRow.find('td,th').eq(index).html()+' | ';
40 | } else {
41 | markup += ' | ';
42 | }
43 | markup += ''+$(this).html()+' | ';
44 | markup += '
';
45 | }
46 | });
47 | });
48 | $stacktable.append($(markup));
49 | $table.before($stacktable);
50 | if (settings.hideOriginal) $table.hide();
51 | });
52 | };
53 |
54 | }(jQuery));
55 |
--------------------------------------------------------------------------------
/web/less/modules/checkbox-and-radio.less:
--------------------------------------------------------------------------------
1 | //
2 | // Checkbox & Radio
3 | // --------------------------------------------------
4 |
5 | .checkbox,
6 | .radio {
7 | margin-bottom: 12px;
8 | padding-left: 32px;
9 | position: relative;
10 | .transition(color .25s linear);
11 |
12 | input {
13 | outline: none !important;
14 | display: none;
15 | }
16 |
17 | // Replace icons
18 | // --------------------------------------------------
19 | .icons {
20 | color: @lightgray;
21 | display: block;
22 | height: 20px;
23 | left: 0;
24 | position: absolute;
25 | top: 0;
26 | width: 20px;
27 | text-align: center;
28 | line-height: 20px;
29 | font-size: 20px;
30 | .transition(color .25s linear);
31 |
32 | .first-icon-icon,
33 | .second-icon {
34 | position: absolute;
35 | left: 0;
36 | top: 0;
37 | .opacity(100);
38 | }
39 | .second-icon {
40 | .opacity(0);
41 | }
42 | }
43 |
44 | // Alternate States
45 | // --------------------------------------------------
46 |
47 | // Hover State
48 | &:hover {
49 | .first-icon {
50 | .opacity(0);
51 | }
52 | .second-icon {
53 | .opacity(100);
54 | }
55 | }
56 |
57 | // Checked State
58 | &.checked {
59 | color: @link-color;
60 |
61 | .icons {
62 | color: @firm;
63 | }
64 | .first-icon {
65 | .opacity(0);
66 | }
67 | .second-icon {
68 | .opacity(100);
69 | }
70 | }
71 |
72 | // Disabled state
73 | &.disabled {
74 | cursor: default;
75 | color: mix(@lightgray, white, 38%);
76 |
77 | .icons {
78 | color: mix(@lightgray, white, 38%);
79 | }
80 | .first-icon {
81 | .opacity(100);
82 | }
83 | .second-icon {
84 | .opacity(0);
85 | }
86 | &.checked {
87 | .icons {
88 | color: mix(@lightgray, white, 38%);
89 | }
90 | .first-icon {
91 | .opacity(0);
92 | }
93 | .second-icon {
94 | .opacity(100);
95 | }
96 | }
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/web/js/application.js:
--------------------------------------------------------------------------------
1 | // Some general UI pack related JS
2 | // Extend JS String with repeat method
3 | String.prototype.repeat = function(num) {
4 | return new Array(num + 1).join(this);
5 | };
6 |
7 | (function($) {
8 |
9 | // Add segments to a slider
10 | $.fn.addSliderSegments = function (amount) {
11 | return this.each(function () {
12 | var segmentGap = 100 / (amount - 1) + "%"
13 | , segment = "
";
14 | $(this).prepend(segment.repeat(amount - 2));
15 | });
16 | };
17 |
18 | $(function() {
19 |
20 | // Todo list
21 | $(".todo li").click(function() {
22 | $(this).toggleClass("todo-done");
23 | });
24 |
25 | // Custom Select
26 | $("select[name='herolist']").selectpicker({style: 'btn-primary', menuStyle: 'dropdown-inverse'});
27 |
28 | // Tooltips
29 | $("[data-toggle=tooltip]").tooltip("show");
30 |
31 | // Tags Input
32 | $(".tagsinput").tagsInput();
33 |
34 | // jQuery UI Sliders
35 | var $slider = $("#slider");
36 | if ($slider.length) {
37 | $slider.slider({
38 | min: 1,
39 | max: 5,
40 | value: 2,
41 | orientation: "horizontal",
42 | range: "min"
43 | }).addSliderSegments($slider.slider("option").max);
44 | }
45 |
46 | // Placeholders for input/textarea
47 | $("input, textarea").placeholder();
48 |
49 | // Make pagination demo work
50 | $(".pagination a").on('click', function() {
51 | $(this).parent().siblings("li").removeClass("active").end().addClass("active");
52 | });
53 |
54 | $(".btn-group a").on('click', function() {
55 | $(this).siblings().removeClass("active").end().addClass("active");
56 | });
57 |
58 | // Disable link clicks to prevent page scrolling
59 | $('a[href="#fakelink"]').on('click', function (e) {
60 | e.preventDefault();
61 | });
62 |
63 | // Switch
64 | $("[data-toggle='switch']").wrap('
').parent().bootstrapSwitch();
65 |
66 | });
67 |
68 | })(jQuery);
--------------------------------------------------------------------------------
/web/js/html5shiv.js:
--------------------------------------------------------------------------------
1 | /*
2 | HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
3 | */
4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x";
6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="
";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment();
8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/templates/validate-rel-me.html.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Become a citizen of the IndieWeb Level 1
5 |
6 |
1. Get your own domain name
7 |
8 |
A personal domain name is an inexpensive, internationally universal identifier which gives you more control over your space than other IDs (e.g. email address or phone number.)
9 |
10 |
On the wiki: Personal Domains.
11 |
12 |
2. Set up Web Sign In
13 |
14 |
In order to be able to sign in using your domain name, connect it to your existing identities.
15 |
16 |
You probably already have many disconnected profiles on the web. Linking between them and your domain name with the rel=me microformat ensures that it’s easy to see that you on Google/Twitter/Github/Flickr/Facebook/email are all the same person as your domain name.
17 |
18 |
On the wiki: How to set up Web Sign In.
19 |
20 |
21 |
22 |
23 |
Something Went Wrong!
24 |
When fetching
25 |
26 |
27 |
28 |
We found the following rel=me URLs on your site:
29 |
30 |
35 |
36 |
37 | $url)) ?>
38 |
39 |
40 |
41 |
49 |
50 |
Want to be able to use rel-me data in your code? Check out the open source implementations.
51 |
52 |
53 |
54 |
Home | Next Step
55 |
56 |
57 |
58 |
2 |
3 |
4 |
2. Add the ability to send Webmentions to other IndieWeb sites
5 |
6 |
When you reply to something on another indieweb site, or mention someone with an indieweb site, sending a webmention lets them know they’ve been linked to.
7 |
8 |
Sending webmentions allows you to write replies to other content and participate in cross-site conversations. You can send webmentions by:
9 |
10 |
17 |
18 |
On the wiki: webmention
19 |
20 |
21 |
22 |
23 |
Something Went Wrong!
24 |
When sending webmentions and pingbacks for
25 |
26 |
27 |
Successfully sent webmentions/pingbacks from
28 |
29 |
30 |
31 |
32 |
No h-entries were found on !
33 |
34 |
When you send webmentions from a page, the pages you’ve mentioned will usually fetch it and parse it for h-entry markup, to display as comments or notifications. You should mark up your posts with h-entry so the people you mention can do something useful with the information.
35 |
36 |
37 |
38 |
39 |
40 |
48 |
49 |
50 |
51 |
Previous Step | Home
52 |
53 |
54 |
55 |
15 |
It looks like your site is hosted on Tumblr.com Silo without a custom domain name. In order to really own your content you need to own your URLs, but don’t worry — Tumblr has an article demonstrating how to give your web presence your own domain.
16 |
Once you’ve got your own domain, check out the IndieWeb Tumblr wiki page for tips on adding indieweb functionality to your site, or exporting your data elsewhere.
17 |
21 |
It looks like your site is hosted on Github.io Silo without a custom domain name. In order to really own your content you need to own your URLs, but don’t worry — Github has an article demonstrating how to give your web presence your own domain.
22 |
Once you’ve got your own domain, check out the IndieWeb Github wiki page for tips on adding indieweb functionality to your site.
23 |
It looks like you’re using WordPress to power your site — check out the IndieWeb WordPress wiki page for tips on how to indiewebify your WordPress site!
27 |
28 |
29 | It looks like you’re using MediaWiki to power your site — check out the IndieWeb MediaWiki wiki page for tips on how to indiewebify your MediaWiki site!
30 |
31 |
32 | It looks like you’re using idno to power your site — check out the IndieWeb idno wiki page for tips on how to indiewebify your idno site!
33 |
34 |
--------------------------------------------------------------------------------
/tests/rel-me-test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | rel-me test suite
5 |
6 |
7 |
8 | rel-me Document URL Tests
9 |
10 | Given the raw “me” URL the use is trying to authenticate as, fetch it and follow redirects until either the end of the chain is reached, a redirect loop is encountered or the scheme changes.
11 |
12 |
13 |
No Redirect
14 |
15 |
The simplest case, where fetching the given “me” URL results in no redirect.
16 |
17 |
Given a “me” URL of http://waterpigs.co.uk, which redirects nowhere, the result should be http://waterpigs.co.uk/ (secure) — note the trailing slash, a product of normalising the URL.
18 |
21 |
Single Secure HTTP Redirect
22 |
23 |
Just like the previous case except with one, non-scheme-altering redirect between the me URL and the final rel-me document URL.
24 |
25 |
Given a “me” URL of http://example.org, which redirects to http://foo.com/, the result should be http://foo.com/ (secure).
26 |
29 |
Multiple Secure HTTP Redirects
30 |
31 |
Just like the previous case but with multiple non-scheme-altering redirects.
32 |
33 |
Given a “me” URL of http://example.org, which redirects to http://example.com, which in turn redirects to http://foo.com/, the result should be http://foo.com/ (secure).
34 |
37 |
Single Secure HTTPS Redirect
38 |
39 |
Just like the first case but with https.
40 |
41 |
Given a “me” URL of https://example.org, which doesn’t redirect anywhere, the result should be https://example.org/ (secure).
42 |
45 |
Single Insecure Redirect
46 |
47 |
Given a “me” URL of http://example.org, which redirects to https://example.com/ (note change from HTTP to HTTPS), the result should be https://example.com/ (insecure).
48 |
3 |
4 |
5 |
6 | IndieWebify.Me
7 | A guide to getting you on the IndieWeb
8 |
9 |
10 |
11 |
14 |
15 |
What is the IndieWeb?
16 |
17 |
18 | We should all own the content we're creating, rather than just posting to third-party content silos.Publish on your own domain, and syndicate out to silos. This is the basis of the "Indie Web" movement. – IndieWeb.org
19 |
20 |
21 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
Federating IndieWeb Conversations Level 3
38 |
39 |
1. Add Reply Contexts to your site
40 |
41 |
Posting replies to other people’s posts is the next step after just being able to mention them with webmention.
42 |
43 |
Usually a reply is a note just like any other, but linking in a special way to the post it’s in reply to. When marked up with h-entry and rel=in-reply-to and/or class=u-in-reply-to, your reply can show up as a comment on the original post.
44 |
45 |
To test if your webmention sending is working, try replying to a post by someone who’s implemented comment receiving. There’s a list on the wiki.
46 |
47 |
If you wish you can also go the extra mile and display a copy of the post you’re replying to. This is called a reply context, and is an excellent way to practise parsing posts on other people’s sites.
48 |
49 |
2. Receive webmentions on your site
50 |
Now you can post replies which show up as comments on other people’s sites, the next step is to be able to receive comments yourself. There are several ways to do this.
51 |
52 |
53 | - If you’re using a project like Known, it may already support indieweb comments — you don’t have to do anything!
54 | - If you’re using a project like WordPress, there may already be a plugin enabling receiving of indieweb comments. See if the software you’re using is on the project list on the wiki
55 | - If you’re rolling your own project and want to implement webmention yourself, have a read through the spec and the wiki page for tips
56 | - If you want to get started quickly without implementing receiving of webmentions yourself, take a look at a hosted service like webmention.io
57 |
58 |
59 |
Once you’ve got webmention receiving set up, there are a few different ways of making sure it’s working correctly:
60 |
61 |
62 | - Link to one of your own posts and send yourself a mention. This works best if you know you can send webmentions successfully
63 | - Ask a friend (or a new friend in the online #indieweb chat to reply or mention one of your posts
64 | - If you’re POSSEing your content, setting up backfeed so that silo replies, likes, reshares, and event RSVPs show up on your own site. You can use a service like Bridgy, a server plugin, or roll your own
65 |
66 |
67 |
68 |