Permalink
Browse files

Initial commit

  • Loading branch information...
Adam Geitgey
Adam Geitgey committed Mar 15, 2016
0 parents commit 67c8e6e7d0b000552ae46950ba01ffdd78067e5b
Showing with 3,678 additions and 0 deletions.
  1. +4 −0 .gitignore
  2. +3 −0 Gemfile
  3. +49 −0 Gemfile.lock
  4. +21 −0 LICENSE
  5. +159 −0 README.md
  6. +33 −0 _config.yml
  7. +7 −0 _includes/footer.html
  8. +31 −0 _includes/head.html
  9. +12 −0 _includes/header.html
  10. +1 −0 _includes/icon-github.html
  11. +1 −0 _includes/icon-github.svg
  12. +5 −0 _includes/icon-twitter.html
  13. +1 −0 _includes/icon-twitter.svg
  14. +30 −0 _includes/metadata.json
  15. +509 −0 _includes/styles.scss
  16. +9 −0 _layouts/default.html
  17. +16 −0 _layouts/page.html
  18. +60 −0 _layouts/post.html
  19. +26 −0 _posts/2016-03-08-example-post.md
  20. +18 −0 _posts/2016-03-13-my-new-post.md
  21. +70 −0 _sass/_syntax-highlighting.scss
  22. +8 −0 _sass/bourbon/_bourbon-deprecated-upcoming.scss
  23. +79 −0 _sass/bourbon/_bourbon.scss
  24. +374 −0 _sass/bourbon/addons/_button.scss
  25. +23 −0 _sass/bourbon/addons/_clearfix.scss
  26. +111 −0 _sass/bourbon/addons/_directional-values.scss
  27. +7 −0 _sass/bourbon/addons/_ellipsis.scss
  28. +5 −0 _sass/bourbon/addons/_font-family.scss
  29. +10 −0 _sass/bourbon/addons/_hide-text.scss
  30. +86 −0 _sass/bourbon/addons/_html5-input-types.scss
  31. +32 −0 _sass/bourbon/addons/_position.scss
  32. +45 −0 _sass/bourbon/addons/_prefixer.scss
  33. +31 −0 _sass/bourbon/addons/_retina-image.scss
  34. +16 −0 _sass/bourbon/addons/_size.scss
  35. +32 −0 _sass/bourbon/addons/_timing-functions.scss
  36. +83 −0 _sass/bourbon/addons/_triangle.scss
  37. +8 −0 _sass/bourbon/addons/_word-wrap.scss
  38. +52 −0 _sass/bourbon/css3/_animation.scss
  39. +3 −0 _sass/bourbon/css3/_appearance.scss
  40. +6 −0 _sass/bourbon/css3/_backface-visibility.scss
  41. +42 −0 _sass/bourbon/css3/_background-image.scss
  42. +55 −0 _sass/bourbon/css3/_background.scss
  43. +59 −0 _sass/bourbon/css3/_border-image.scss
  44. +22 −0 _sass/bourbon/css3/_border-radius.scss
  45. +4 −0 _sass/bourbon/css3/_box-sizing.scss
  46. +4 −0 _sass/bourbon/css3/_calc.scss
  47. +47 −0 _sass/bourbon/css3/_columns.scss
  48. +5 −0 _sass/bourbon/css3/_filter.scss
  49. +321 −0 _sass/bourbon/css3/_flex-box.scss
  50. +23 −0 _sass/bourbon/css3/_font-face.scss
  51. +10 −0 _sass/bourbon/css3/_font-feature-settings.scss
  52. +10 −0 _sass/bourbon/css3/_hidpi-media-query.scss
  53. +4 −0 _sass/bourbon/css3/_hyphens.scss
  54. +14 −0 _sass/bourbon/css3/_image-rendering.scss
  55. +35 −0 _sass/bourbon/css3/_keyframes.scss
  56. +38 −0 _sass/bourbon/css3/_linear-gradient.scss
  57. +8 −0 _sass/bourbon/css3/_perspective.scss
  58. +8 −0 _sass/bourbon/css3/_placeholder.scss
  59. +39 −0 _sass/bourbon/css3/_radial-gradient.scss
  60. +15 −0 _sass/bourbon/css3/_transform.scss
  61. +77 −0 _sass/bourbon/css3/_transition.scss
  62. +3 −0 _sass/bourbon/css3/_user-select.scss
  63. +11 −0 _sass/bourbon/functions/_assign.scss
  64. +13 −0 _sass/bourbon/functions/_color-lightness.scss
  65. +39 −0 _sass/bourbon/functions/_flex-grid.scss
  66. +3 −0 _sass/bourbon/functions/_golden-ratio.scss
  67. +13 −0 _sass/bourbon/functions/_grid-width.scss
  68. +66 −0 _sass/bourbon/functions/_modular-scale.scss
  69. +13 −0 _sass/bourbon/functions/_px-to-em.scss
  70. +15 −0 _sass/bourbon/functions/_px-to-rem.scss
  71. +5 −0 _sass/bourbon/functions/_strip-units.scss
  72. +9 −0 _sass/bourbon/functions/_tint-shade.scss
  73. +22 −0 _sass/bourbon/functions/_transition-property-name.scss
  74. +17 −0 _sass/bourbon/functions/_unpack.scss
  75. +15 −0 _sass/bourbon/helpers/_convert-units.scss
  76. +13 −0 _sass/bourbon/helpers/_gradient-positions-parser.scss
  77. +8 −0 _sass/bourbon/helpers/_is-num.scss
  78. +25 −0 _sass/bourbon/helpers/_linear-angle-parser.scss
  79. +41 −0 _sass/bourbon/helpers/_linear-gradient-parser.scss
  80. +61 −0 _sass/bourbon/helpers/_linear-positions-parser.scss
  81. +31 −0 _sass/bourbon/helpers/_linear-side-corner-parser.scss
  82. +69 −0 _sass/bourbon/helpers/_radial-arg-parser.scss
  83. +50 −0 _sass/bourbon/helpers/_radial-gradient-parser.scss
  84. +18 −0 _sass/bourbon/helpers/_radial-positions-parser.scss
  85. +26 −0 _sass/bourbon/helpers/_render-gradients.scss
  86. +10 −0 _sass/bourbon/helpers/_shape-size-stripper.scss
  87. +50 −0 _sass/bourbon/helpers/_str-to-num.scss
  88. +1 −0 _sass/bourbon/settings/_asset-pipeline.scss
  89. +6 −0 _sass/bourbon/settings/_prefixer.scss
  90. +1 −0 _sass/bourbon/settings/_px-to-em.scss
  91. +32 −0 about.md
  92. BIN assets/images/author.jpg
  93. BIN assets/images/logo.jpg
  94. +30 −0 feed.xml
  95. +46 −0 index.html
@@ -0,0 +1,4 @@
_site
.sass-cache
.jekyll-metadata
.DS_Store
@@ -0,0 +1,3 @@
gem 'jekyll'
gem 'jekyll-paginate'
gem 'jekyll-compose', group: [:jekyll_plugins]
@@ -0,0 +1,49 @@
GEM
specs:
celluloid (0.16.0)
timers (~> 4.0.0)
colorator (0.1)
ffi (1.9.10)
hitimes (1.2.2)
jekyll (3.1.2)
colorator (~> 0.1)
jekyll-sass-converter (~> 1.0)
jekyll-watch (~> 1.1)
kramdown (~> 1.3)
liquid (~> 3.0)
mercenary (~> 0.3.3)
rouge (~> 1.7)
safe_yaml (~> 1.0)
jekyll-compose (0.4.1)
jekyll (>= 2.5.0)
jekyll-paginate (1.1.0)
jekyll-sass-converter (1.3.0)
sass (~> 3.2)
jekyll-watch (1.2.1)
listen (~> 2.7)
kramdown (1.9.0)
liquid (3.0.6)
listen (2.10.1)
celluloid (~> 0.16.0)
rb-fsevent (>= 0.9.3)
rb-inotify (>= 0.9)
mercenary (0.3.5)
rb-fsevent (0.9.5)
rb-inotify (0.9.5)
ffi (>= 0.5.0)
rouge (1.10.1)
safe_yaml (1.0.4)
sass (3.4.15)
timers (4.0.1)
hitimes
PLATFORMS
ruby
DEPENDENCIES
jekyll
jekyll-compose
jekyll-paginate
BUNDLED WITH
1.10.5
21 LICENSE
@@ -0,0 +1,21 @@
The Amplify for Jekyll theme is licensed under MIT License (MIT)
Copyright (c) 2016 Adam Geitgey
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
159 README.md
@@ -0,0 +1,159 @@
# Amplify for Jekyll
*A Jekyll html theme in the vague style of Medium.com built using Google AMP*
Google's [Accelerated Mobile Pages Project](https://www.ampproject.org/)
(a.k.a. "Google AMP" or Google ⚡) is an open-source project that defines rules
for creating websites that load nearly instantly even on mobile devices with
slow connections.
## Why use Google AMP?
There are two reasons to use Google AMP:
First, it's really fast! An often sited claim (by Amazon, Yahoo, Walmart and
others) is that every extra 100ms improvement in page load time increases
incremental revenue by up to 1%. Your personal blog might not be selling
anything, but why settle for a slow page and risk losing readers?
Second, Google might feature your AMP page in Search Results! Google gives
preferential treatment to AMP pages on Mobile Search. When it displays your
page in the AMP search results widget, it will even serve your page through
it's own CDN to make the page load even faster. It's similar to how
[Facebook Instant Articles](https://instantarticles.fb.com/) works on the
Facebook platform.
## Getting Started
To use this theme, it's dead simple and just like using any other Jekyll
template:
*Step 1:* [Install Jekyll](https://jekyllrb.com/docs/installation/)
*Step 2:* Clone this repo to your computer
```bash
git clone <blah>
```
*Step 3:* Tweak `_config.yml`.
Just fill in everything in the `# Site settings` section.
You'll want to set your site's title, your name, your twitter username, etc.
*Step 4:* Run `jekyll serve` and then open
[http://localhost:4000/](http://localhost:4000/) to see your site!
*Step 5:* Publish your site
[just like any other Jekyll site](https://jekyllrb.com/docs/deployment-methods/).
## Google AMP Limitations
Google AMP sets many
[strict limits on what you can include in your web pages](https://www.ampproject.org/docs/get_started/technical_overview.html).
A few of these are worth talking about:
*Limitation: All CSS must be inline (no external css files).*
Because of this, the main css file for this site is in `_includes/styles.scss`
instead of in the normal `css/` Jekyll folder. This css file is inlined
into the header of every page via the special `scssify` filter in `_includes/head.html`.
*Limitation: Size all resources statically*
Every image you include in your page *must* have a height and width. This also
applies to other things like embedding videos or other resources. Check below
for more details.
## Writing Posts with Google AMP
Writing posts works
[just like it does normally in Jekyll](https://jekyllrb.com/docs/posts/)
except when you want to include extra resources likes pictures, videos,
embedded Twitter posts, etc.
Google AMP has it's own set of special html tags for including content. You
should use these instead of normal Markdown or HTML tags.
The two you are are most likely to need are `<amp-img>` and `<amp-youtube>`:
### Images in your posts
```
<amp-img width="600" height="300" layout="responsive" src="/assets/images/your_picture.jpg"></amp-img>
```
### Youtube Videos in your posts
```
<amp-youtube data-videoid="NpEaa2P7qZI" layout="responsive" width="480" height="270"></amp-youtube>
```
### Embedding other types of content
The AMP Project provides helpers for many other types of content like audio,
ads, Google Analytics, etc.
* Built-in AMP tags:
* https://github.com/ampproject/amphtml/blob/master/builtins/README.md
* Extended AMP tags:
* https://github.com/ampproject/amphtml/blob/master/extensions/README.md
## Validating your page with Google AMP
Google AMP adds built-in validation logic to make sure your pages follow all
the rules so they render as fast as possible.
To check your page, just add `#development=1` to any url on your site and then
check the javascript console in your browser.
http://localhost:4000/#development=1
You will either see a success message:
```
Powered by AMP ⚡ HTML – Version 1457112743399
AMP validation successful.
```
Or you will see a list of errors to fix:
```
Powered by AMP ⚡ HTML – Version 1457112743399
AMP validation had errors:
The attribute 'style' may not appear in tag 'span'
The attribute 'style' may not appear in tag 'div'
```
## Making Google serve your page
Google will cache valid AMP pages if you link to them with one of these urls:
`https://cdn.ampproject.org/c/s/<your page url here>`
Or:
`https://amp.gstatic.com/c/s/<your page url here>`
But keep in mind these two limitations:
1. The caches don't refresh that often. So don't view these urls until your page
is done!
2. Remove `/s` from both urls if your page isn't served over `https://`.
## Required Schema Data
To actually get your page featured in Google search results, it needs to include
a http://schema.org NewsArticle schema. See `_includes/metadata.json` for the
version generated by default. You might want to tweak it.
## Credits
This theme is inspired by
[Mediator by Dirk Fabisch](https://github.com/dirkfabisch/mediator). I used some
of the css and html from that theme as a starting point. Thanks!
## License
MIT. See LICENSE file in repo.
@@ -0,0 +1,33 @@
# Welcome to Amplified for Jekyll!
#
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely need to edit after that.
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'jekyll serve'. If you change this file, please restart the server process.
# Site settings
title: Awesome Site Title
email: your-email@domain.com
description: >
Awesome site description here
logo: "/assets/images/logo.jpg"
baseurl: "" # the subpath of your site, e.g. /blog
url: "http://yourdomain.com" # the base hostname & protocol for your site
paginate: 5 # The number of posts to show per page on your homepage
name: 'Your Name'
bio: >
Mea suas vituperatoribus et, virtute corpora quaestio cum ut.
Ne solet nostrum complectitur pri, vis ut inani populo.
author_image: "/assets/images/author.jpg"
twitter_username: jekyllrb
github_username: jekyll
# Build settings
markdown: kramdown
kramdown:
parse_block_html: true
gems:
- jekyll-paginate
@@ -0,0 +1,7 @@
<footer class="site-footer">
<a class="subscribe" href="{{ "/feed.xml" | prepend: site.baseurl }}"> <span class="tooltip"> <i class="fa fa-rss"></i> Subscribe!</span></a>
<div class="inner">
<section class="copyright">All content copyright <a href="mailto:{{ site.email}}">{{ site.name }}</a> &copy; {{ site.time | date: '%Y' }} &bull; All rights reserved.</section>
<section class="poweredby">Made with <a href="http://jekyllrb.com"> Jekyll</a> and <a href="https://github.com/ageitgey/amplify">Amplify</a></section>
</div>
</footer>
@@ -0,0 +1,31 @@
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
<script type="application/ld+json">
{% include metadata.json %}
</script>
<style amp-custom>
{% capture include_to_scssify %}
{% include styles.scss %}
{% endcapture %}
{{ include_to_scssify | scssify }}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
@@ -0,0 +1,12 @@
<header class="site-header">
<a href="{{ site.baseurl }}/" class="logo"><span class="logo"><amp-img src="{{ site.logo }}" width="48" height="48" /></span></a>
<div class="page-links">
<a class="page-link" href="{{ site.baseurl }}/">Home</a>
{% for my_page in site.pages %}
{% if my_page.title %}
• <a class="page-link" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a>
{% endif %}
{% endfor %}
</div>
</header>
@@ -0,0 +1 @@
<a href="https://github.com/{{ include.username }}"><span class="icon icon--github">{% include icon-github.svg %}</span><span class="username">{{ include.username }}</span></a>
@@ -0,0 +1 @@
<svg viewBox="0 0 16 16"><path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg>
@@ -0,0 +1,5 @@
{% if include.username %}
<a href="https://twitter.com/{{ include.username }}"><span class="icon icon--twitter">{% include icon-twitter.svg %}</span><span class="username">{{ include.username }}</span></a>
{% else %}
<span class="icon icon--twitter">{% include icon-twitter.svg %}</span>
{% endif %}
@@ -0,0 +1 @@
<svg viewBox="0 0 16 16"><path fill="#828282" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg>
@@ -0,0 +1,30 @@
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": "{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}",
"headline": "{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}",
"datePublished": "{% if page.date %}{{ page.date | date_to_xmlschema }}{% else %}{{ site.time | date_to_xmlschema }}{% endif %}",
"dateModified": "{% if page.date %}{{ page.date | date_to_xmlschema }}{% else %}{{ site.time | date_to_xmlschema }}{% endif %}",
"description": "{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}",
"author": {
"@type": "Person",
"name": "{{ site.name }}"
},
"publisher": {
"@type": "Organization",
"name": "{{ site.title }}",
"logo": {
"@type": "ImageObject",
"url": "{{ site.logo | prepend: site.baseurl | prepend: site.url }}",
"width": 60,
"height": 60
}
},
"image": {
"@type": "ImageObject",
"url": "{{ site.logo | prepend: site.baseurl | prepend: site.url }}",
"height": 60,
"width": 60
}
}
Oops, something went wrong.

0 comments on commit 67c8e6e

Please sign in to comment.