first commit

hughsk · Sep 21, 2013 · 5b18a14 · 5b18a14
commit 5b18a14
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 0 deletions.
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,18 @@
+This software is released under the MIT license:
+
+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.
diff --git a/README.md b/README.md
@@ -0,0 +1,44 @@
+# google-fonts [![experimental](http://hughsk.github.io/stability-badges/dist/experimental.svg)](http://github.com/hughsk/stability-badges) #
+
+[![google-fonts](https://nodei.co/npm/google-fonts.png?mini=true)](https://nodei.co/npm/google-fonts)
+
+A small helper library for embedding
+[Google Fonts](http://www.google.com/fonts) onto your page.
+
+## Usage ##
+
+## `fonts(list)` ##
+
+Given a list of fonts (see below), returns a string like this one (minus the
+whitespace) that you can include in a template:
+
+``` html
+<link
+  href='http://fonts.googleapis.com/css?family=Cantora+One|Ropa+Sans:400,400italic'
+  rel='stylesheet'
+  type='text/css'
+>
+```
+
+## `fonts.add(list)` ##
+
+Given the same list of fonts, you can add them directly to your page using
+this method (assuming you're using something like
+[browserify](http://browserify.org)).
+
+Useful for quick demos/prototypes, but if you want to avoid the flash of
+unstyled text then stick with pasting their snippet in your HTML.
+
+The list should be formatted like so:
+
+``` javascript
+fonts.add({
+    'Ropa Sans': ['400', '400italic']
+  , 'Source Sans Pro': true
+  , 'Raleway': 400
+})
+```
+
+Where each key is a font name, and each value is an array of styles to include.
+You can also pass a single style, or `true` to include all of the available
+ones for that font.
diff --git a/demo.js b/demo.js
@@ -0,0 +1,6 @@
+var webfonts = require('./')
+
+webfonts.add({
+    'Ropa Sans': 400
+  , 'Source Sans Pro': true
+})
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Google Webfonts Demo</title>
+    <style type="text/css">
+      body { width: 500px; margin: 0 auto; font-size: 120%; }
+      h1 { font-family: 'Ropa Sans'; }
+      p { font-family: 'Source Sans Pro'; }
+    </style>
+  </head>
+  <body>
+    <h1>Hello World</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <script type="text/javascript" src="bundle.js"></script>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,38 @@
+module.exports = asString
+module.exports.add = append
+
+function asString(fonts) {
+  var href = getHref(fonts)
+  return '<link href="' + href + '" rel="stylesheet" type="text/css">'
+}
+
+function asElement(fonts) {
+  var href = getHref(fonts)
+  var link = document.createElement('link')
+  link.setAttribute('href', href)
+  link.setAttribute('rel', 'stylesheet')
+  link.setAttribute('type', 'text/css')
+  return link
+}
+
+function getHref(fonts) {
+  var family = Object.keys(fonts).map(function(name) {
+    var details = fonts[name]
+    name = name.replace(/\s+/, '+')
+    return typeof details === 'boolean'
+      ? name
+      : name + ':' + makeArray(details).join(',')
+  }).join('|')
+
+  return 'http://fonts.googleapis.com/css?family=' + family
+}
+
+function append(fonts) {
+  var link = asElement(fonts)
+  document.head.appendChild(link)
+  return link
+}
+
+function makeArray(arr) {
+  return Array.isArray(arr) ? arr : [arr]
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "google-fonts",
+  "version": "0.0.0",
+  "description": "A small helper library for embedding Google Fonts on your page.",
+  "main": "index.js",
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/hughsk/google-fonts.git"
+  },
+  "keywords": [
+    "google",
+    "fonts",
+    "webfonts",
+    "inline",
+    "embed",
+    "append"
+  ],
+  "author": "Hugh Kennedy <hughskennedy@gmail.com> (http://hughskennedy.com/)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/hughsk/google-fonts/issues"
+  }
+}