wbrawner/snapdrop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rename 'Polymer Starter Kit' to 'Share With Me'

Browse source
This commit is contained in:
Robin Linus 2015-12-18 17:09:04 +01:00
parent f5b2b47136
commit 370003835e
10 changed files with 38 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
README.md
View file

@ -1,5 +1,5 @@
![](https://cloud.githubusercontent.com/assets/110953/7877439/6a69d03e-0590-11e5-9fac-c614246606de.png) ![](https://cloud.githubusercontent.com/assets/110953/7877439/6a69d03e-0590-11e5-9fac-c614246606de.png)
## Polymer Starter Kit ## Share With Me
> A starting point for building web applications with Polymer 1.0 > A starting point for building web applications with Polymer 1.0
@ -14,11 +14,11 @@
* [Recipes](/docs/README.md/) for ES2015 support, Polymer performance, using Chrome Dev Editor, Deploying to GitHub Pages, Deploying to Firebase, and Mobile Chrome Apps * [Recipes](/docs/README.md/) for ES2015 support, Polymer performance, using Chrome Dev Editor, Deploying to GitHub Pages, Deploying to Firebase, and Mobile Chrome Apps
### Demo ### Demo
See latest Polymer Starter Kit Demo (from master) at http://polymerelements.github.io/polymer-starter-kit See latest Share With Me Demo (from master) at http://polymerelements.github.io/polymer-starter-kit
### Tutorials ### Tutorials
Check out the Polymer Starter Kit tutorials on [polymer-project.org](https://polymer-project.org): Check out the Share With Me tutorials on [polymer-project.org](https://polymer-project.org):
* [Set up the PSK](https://www.polymer-project.org/1.0/docs/start/psk/set-up.html) * [Set up the PSK](https://www.polymer-project.org/1.0/docs/start/psk/set-up.html)
* [Create a page](https://www.polymer-project.org/1.0/docs/start/psk/create-a-page.html) * [Create a page](https://www.polymer-project.org/1.0/docs/start/psk/create-a-page.html)
@ -26,7 +26,7 @@ Check out the Polymer Starter Kit tutorials on [polymer-project.org](https://pol
## Getting Started ## Getting Started
To take advantage of Polymer Starter Kit you need to: To take advantage of Share With Me you need to:
1. Get a copy of the code. 1. Get a copy of the code.
2. Install the dependencies if you don't already have them. 2. Install the dependencies if you don't already have them.
@ -35,21 +35,21 @@ To take advantage of Polymer Starter Kit you need to:
### Get the code ### Get the code
[Download](https://github.com/polymerelements/polymer-starter-kit/releases/latest) and extract Polymer Starter Kit to where you want to work. The project comes in two flavours - Light and Full. [Download](https://github.com/polymerelements/polymer-starter-kit/releases/latest) and extract Share With Me to where you want to work. The project comes in two flavours - Light and Full.
**Beginners**: Try Polymer Starter Kit Light. This doesn't require any extra dependencies nor knowledge of modern front-end tooling. This option is good for prototyping if you haven't build a Polymer app before. **Beginners**: Try Share With Me Light. This doesn't require any extra dependencies nor knowledge of modern front-end tooling. This option is good for prototyping if you haven't build a Polymer app before.
**Intermediate - Advanced**: Use the full version of Polymer Starter Kit. This comes with all the build tools you'll need for testing and productionising your app so it's nice and lean. You'll need to run a few extra commands to install the tools we recommend but it's worth it to make sure your final app is super optimised. **Intermediate - Advanced**: Use the full version of Share With Me. This comes with all the build tools you'll need for testing and productionising your app so it's nice and lean. You'll need to run a few extra commands to install the tools we recommend but it's worth it to make sure your final app is super optimised.
:warning: **Important**: Polymer Starter Kit, and Polymer Starter Kit Light, both contain dotfiles (files starting with a `.`). If you're copying the contents of the Starter Kit to a new location make sure you bring along these dotfiles as well! On Mac, [enable showing hidden files](http://ianlunn.co.uk/articles/quickly-showhide-hidden-files-mac-os-x-mavericks/), then try extracting/copying Polymer Starter Kit again. This time the dotfiles needed should be visible so you can copy them over without issues. :warning: **Important**: Share With Me, and Share With Me Light, both contain dotfiles (files starting with a `.`). If you're copying the contents of the Starter Kit to a new location make sure you bring along these dotfiles as well! On Mac, [enable showing hidden files](http://ianlunn.co.uk/articles/quickly-showhide-hidden-files-mac-os-x-mavericks/), then try extracting/copying Share With Me again. This time the dotfiles needed should be visible so you can copy them over without issues.
Rob Dodson has a fantastic [PolyCast video](https://www.youtube.com/watch?v=xz-yixRxZN8) available that walks through using Polymer Starter Kit. An [end-to-end with Polymer](https://www.youtube.com/watch?v=1f_Tj_JnStA) and Polymer Starter Kit talk is also available. Rob Dodson has a fantastic [PolyCast video](https://www.youtube.com/watch?v=xz-yixRxZN8) available that walks through using Share With Me. An [end-to-end with Polymer](https://www.youtube.com/watch?v=1f_Tj_JnStA) and Share With Me talk is also available.
### Install dependencies ### Install dependencies
#### Quick-start (for experienced users) #### Quick-start (for experienced users)
With Node.js installed, run the following one liner from the root of your Polymer Starter Kit download: With Node.js installed, run the following one liner from the root of your Share With Me download:
```sh ```sh
npm install -g gulp bower && npm install && bower install npm install -g gulp bower && npm install && bower install
@ -154,7 +154,7 @@ These style files are located in the [styles folder](app/styles/).
## Unit Testing ## Unit Testing
Web apps built with Polymer Starter Kit come configured with support for [Web Component Tester](https://github.com/Polymer/web-component-tester) - Polymer's preferred tool for authoring and running unit tests. This makes testing your element based applications a pleasant experience. Web apps built with Share With Me come configured with support for [Web Component Tester](https://github.com/Polymer/web-component-tester) - Polymer's preferred tool for authoring and running unit tests. This makes testing your element based applications a pleasant experience.
[Read more](https://github.com/Polymer/web-component-tester#html-suites) about using Web Component tester. [Read more](https://github.com/Polymer/web-component-tester#html-suites) about using Web Component tester.
@ -181,13 +181,13 @@ Components installed by Bower live in the `app/bower_components` directory. This
## Service Worker ## Service Worker
Polymer Starter Kit offers an optional offline experience thanks to Service Worker and the [Platinum Service Worker elements](https://github.com/PolymerElements/platinum-sw). New to Service Worker? Read the following [introduction](http://www.html5rocks.com/en/tutorials/service-worker/introduction/) to understand how it works. Share With Me offers an optional offline experience thanks to Service Worker and the [Platinum Service Worker elements](https://github.com/PolymerElements/platinum-sw). New to Service Worker? Read the following [introduction](http://www.html5rocks.com/en/tutorials/service-worker/introduction/) to understand how it works.
Our optional offline setup should work well for relatively simple applications. For more complex apps, we recommend learning how Service Worker works so that you can make the most of the Platinum Service Worker element abstractions. Our optional offline setup should work well for relatively simple applications. For more complex apps, we recommend learning how Service Worker works so that you can make the most of the Platinum Service Worker element abstractions.
### Enable Service Worker support? ### Enable Service Worker support?
To enable Service Worker support for Polymer Starter Kit project use these 3 steps: To enable Service Worker support for Share With Me project use these 3 steps:
1. Uncomment Service Worker code in index.html 1. Uncomment Service Worker code in index.html
```HTML ```HTML
@ -272,16 +272,16 @@ If you find anything to still be stale, you can also try navigating to `chrome:s
#### Disable Service Worker support after you enabled it #### Disable Service Worker support after you enabled it
If for any reason you need to disable Service Worker support after previously enabling it, you can remove it from your Polymer Starter Kit project using these 4 steps: If for any reason you need to disable Service Worker support after previously enabling it, you can remove it from your Share With Me project using these 4 steps:
1. Remove references to the platinum-sw elements from your application [index](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html). 1. Remove references to the platinum-sw elements from your application [index](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html).
2. Remove the two Platinum Service Worker elements (platinum-sw/..) in [app/elements/elements.html](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/elements/elements.html) 2. Remove the two Platinum Service Worker elements (platinum-sw/..) in [app/elements/elements.html](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/elements/elements.html)
3. Remove 'precache' from the list in the 'default' gulp task ([gulpfile.js](https://github.com/PolymerElements/polymer-starter-kit/blob/master/gulpfile.js)) 3. Remove 'precache' from the list in the 'default' gulp task ([gulpfile.js](https://github.com/PolymerElements/polymer-starter-kit/blob/master/gulpfile.js))
4. Navigate to `chrome://serviceworker-internals` and unregister any Service Workers registered by Polymer Starter Kit for your app just in case there's a copy of it cached. 4. Navigate to `chrome://serviceworker-internals` and unregister any Service Workers registered by Share With Me for your app just in case there's a copy of it cached.
## Yeoman support ## Yeoman support
[generator-polymer](https://github.com/yeoman/generator-polymer/releases) now includes support for Polymer Starter Kit out of the box. [generator-polymer](https://github.com/yeoman/generator-polymer/releases) now includes support for Share With Me out of the box.
## Frequently Asked Questions ## Frequently Asked Questions
@ -308,7 +308,7 @@ own local setup.
### Where can I find the application layouts from your Google I/O 2015 talk? ### Where can I find the application layouts from your Google I/O 2015 talk?
App layouts live in a separate repository called [app-layout-templates](https://github.com/PolymerElements/app-layout-templates). App layouts live in a separate repository called [app-layout-templates](https://github.com/PolymerElements/app-layout-templates).
You can select a template and copy over the relevant parts you would like to reuse to Polymer Starter Kit. You can select a template and copy over the relevant parts you would like to reuse to Share With Me.
You will probably need to change paths to where your Iron and Paper dependencies can be found to get everything working. You will probably need to change paths to where your Iron and Paper dependencies can be found to get everything working.
This can be done by adding them to the [`elements.html`](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/elements/elements.html) import. This can be done by adding them to the [`elements.html`](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/elements/elements.html) import.
@ -366,14 +366,14 @@ If you are not using the build-blocks, but still wish for additional files (e.g
### I'm finding the installation/tooling here overwhelming. What should I do? ### I'm finding the installation/tooling here overwhelming. What should I do?
Don't worry! We've got your covered. Polymer Starter Kit tries to offer everything you need to build and optimize your apps for production, which is why we include the tooling we do. We realise however that our tooling setup may not be for everyone. Don't worry! We've got your covered. Share With Me tries to offer everything you need to build and optimize your apps for production, which is why we include the tooling we do. We realise however that our tooling setup may not be for everyone.
If you find that you just want the simplest setup possible, we recommend using Polymer Starter Kit light, which is available from the [Releases](https://github.com/PolymerElements/polymer-starter-kit/releases) page. This takes next to no time to setup. If you find that you just want the simplest setup possible, we recommend using Share With Me light, which is available from the [Releases](https://github.com/PolymerElements/polymer-starter-kit/releases) page. This takes next to no time to setup.
## Licensing ## Licensing
Like other Google projects, Polymer Starter Kit includes Google license headers at the top of several of our source files. Google's open-source licensing requires that this header be kept in place (sorry!), however we acknowledge that you may need to add your own licensing to files you modify. This can be done by appending your own extensions to these headers. Like other Google projects, Share With Me includes Google license headers at the top of several of our source files. Google's open-source licensing requires that this header be kept in place (sorry!), however we acknowledge that you may need to add your own licensing to files you modify. This can be done by appending your own extensions to these headers.
## Contributing ## Contributing
Polymer Starter Kit is a new project and is an ongoing effort by the Web Component community. We welcome your bug reports, PRs for improvements, docs and anything you think would improve the experience for other Polymer developers. Share With Me is a new project and is an ongoing effort by the Web Component community. We welcome your bug reports, PRs for improvements, docs and anything you think would improve the experience for other Polymer developers.

44
app/elements/my-greeting/my-greeting.html
View file

@ -1,44 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="my-greeting">
<template>
<style include="shared-styles"></style>
<style>
:host {
display: block;
}
</style>
<h2 class="page-title">{{greeting}}</h2>
<span class="paper-font-body2">Update text to change the greeting.</span>
<!-- Listens for "input" event and sets greeting to <input>.value -->
<input class="paper-font-body2" value="{{greeting::input}}">
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'my-greeting',
properties: {
greeting: {
type: String,
value: 'Welcome!',
notify: true
}
}
});
})();
</script>
</dom-module>

51
app/elements/my-list/my-list.html
View file

@ -1,51 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="my-list">
<template>
<style>
:host {
display: block;
}
</style>
<ul>
<template is="dom-repeat" items="{{items}}">
<li><span class="paper-font-body1">{{item}}</span></li>
</template>
</ul>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'my-list',
properties: {
items: {
type: Array,
notify: true,
}
},
ready: function() {
this.items = [
'Responsive Web App boilerplate',
'Iron Elements and Paper Elements',
'End-to-end Build Tooling (including Vulcanize)',
'Unit testing with Web Component Tester',
'Routing with Page.js',
'Offline support with the Platinum Service Worker Elements'
];
}
});
})();
</script>
</dom-module>

4
app/manifest.json
View file

@ -1,6 +1,6 @@
{ {
"name": "Polymer Starter Kit", "name": "Share With Me",
"short_name": "Polymer Starter Kit", "short_name": "Share With Me",
"icons": [{ "icons": [{
"src": "images/touch/icon-128x128.png", "src": "images/touch/icon-128x128.png",
"sizes": "128x128", "sizes": "128x128",

2
app/styles/app-theme.html
View file

@ -14,7 +14,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/* /*
Polymer includes a shim for CSS Custom Properties that we can use for application theming. Polymer includes a shim for CSS Custom Properties that we can use for application theming.
Below, you'll find the default palette for the Polymer Starter Kit layout. Feel free to play Below, you'll find the default palette for the Share With Me layout. Feel free to play
with changing the colors used or generate your own palette of colours at MaterialPalette.com. with changing the colors used or generate your own palette of colours at MaterialPalette.com.
See https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details See https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details

2
docs/add-es2015-support-babel.md
View file

@ -2,7 +2,7 @@
Although support for ES2015 (formerly ES6) is improving in modern browsers, the majority do not yet support the full set of features. To benefit from the awesomeness of the new ES2015 syntax while keeping backwards compatibility with Polymer's supported browsers, you'll need to transpile your JS code from ES2015 to ES5 Although support for ES2015 (formerly ES6) is improving in modern browsers, the majority do not yet support the full set of features. To benefit from the awesomeness of the new ES2015 syntax while keeping backwards compatibility with Polymer's supported browsers, you'll need to transpile your JS code from ES2015 to ES5
This recipe focuses on adding an ES2015 to ES5 transpile step to Polymer Starter Kit's build pipeline using [BabelJS](https://babeljs.io/). This recipe focuses on adding an ES2015 to ES5 transpile step to Share With Me's build pipeline using [BabelJS](https://babeljs.io/).
## Create a transpile gulp task ## Create a transpile gulp task

4
docs/chrome-dev-editor.md
View file

@ -1,8 +1,8 @@
# Use Polymer Starter Kit on Chrome Dev Editor # Use Share With Me on Chrome Dev Editor
If you are using a Chromebook, one of the few IDE you can use is [Chrome Dev Editor](https://github.com/GoogleChrome/chromedeveditor). If you are using a Chromebook, one of the few IDE you can use is [Chrome Dev Editor](https://github.com/GoogleChrome/chromedeveditor).
To use the Polymer Starter Kit you have to download the [latest release](https://github.com/PolymerElements/polymer-starter-kit/releases) in the `light` flavor (the additional tools can't be used from CDE). To use the Share With Me you have to download the [latest release](https://github.com/PolymerElements/polymer-starter-kit/releases) in the `light` flavor (the additional tools can't be used from CDE).
After downloading the `polymer-starter-kit-light-*.zip` file unpack it in a new folder (for Example `psk-light`) you should have a directory structure like After downloading the `polymer-starter-kit-light-*.zip` file unpack it in a new folder (for Example `psk-light`) you should have a directory structure like

4
docs/deploy-to-firebase-pretty-urls.md
View file

@ -1,6 +1,6 @@
# Deploy to Firebase using Pretty URLs # Deploy to Firebase using Pretty URLs
Firebase is a very simple and secure way to deploy a Polymer Starter Kit site. You can sign up for a free account and deploy your application in less than 5 minutes. Firebase is a very simple and secure way to deploy a Share With Me site. You can sign up for a free account and deploy your application in less than 5 minutes.
The instructions below are based on the [Firebase hosting quick start The instructions below are based on the [Firebase hosting quick start
guide](https://www.firebase.com/docs/hosting/quickstart.html). guide](https://www.firebase.com/docs/hosting/quickstart.html).
@ -64,4 +64,4 @@ guide](https://www.firebase.com/docs/hosting/quickstart.html).
The URL to your live site is listed in the output. The URL to your live site is listed in the output.
You can see a demo of Polymer Starter Kit hosted on Firebase using pretty URLs at https://polymer-starter-kit.firebaseapp.com. You can see a demo of Share With Me hosted on Firebase using pretty URLs at https://polymer-starter-kit.firebaseapp.com.

4
docs/deploy-to-github-pages.md
View file

@ -1,6 +1,6 @@
# Deploy to Github Pages # Deploy to Github Pages
You can deploy to github pages with a couple minor changes to Polymer Starter Kit: You can deploy to github pages with a couple minor changes to Share With Me:
1. Uncomment this line `// app.baseUrl = '/polymer-starter-kit/';` in app.js near the top 1. Uncomment this line `// app.baseUrl = '/polymer-starter-kit/';` in app.js near the top
@ -19,5 +19,5 @@ You can deploy to github pages with a couple minor changes to Polymer Starter Ki
### Notes ### Notes
* When deploying to Github Pages we recommend using hashbangs which is Polymer Starter Kit default. * When deploying to Github Pages we recommend using hashbangs which is Share With Me default.
* This method should work for most hosting providers when using a subfolder. * This method should work for most hosting providers when using a subfolder.

14
docs/mobile-chrome-apps.md
View file

@ -1,21 +1,21 @@
# Use Polymer Starter Kit for [Mobile Chrome Apps](https://github.com/MobileChromeApps/mobile-chrome-apps) # Use Share With Me for [Mobile Chrome Apps](https://github.com/MobileChromeApps/mobile-chrome-apps)
## Getting started ## Getting started
Polymer Starter Kit could be fully adapted to Mobile Chrome Apps through mobile-friendly features. Mobile Chrome Apps, is based on Apache Cordova, and requires mobile application SDKs such as Android and iOS. so please make sure that installation development tool by following [installation guide](https://github.com/MobileChromeApps/mobile-chrome-apps/blob/master/docs/Installation.md) of Mobile Chrome Apps. And then, You do some further steps to resolve some of restrictions and configurations to use Polymer Starter Kit on Cordova. Looking for a [guide video](https://www.youtube.com/watch?v=-ifgyobPLVg) below to better understand. Share With Me could be fully adapted to Mobile Chrome Apps through mobile-friendly features. Mobile Chrome Apps, is based on Apache Cordova, and requires mobile application SDKs such as Android and iOS. so please make sure that installation development tool by following [installation guide](https://github.com/MobileChromeApps/mobile-chrome-apps/blob/master/docs/Installation.md) of Mobile Chrome Apps. And then, You do some further steps to resolve some of restrictions and configurations to use Share With Me on Cordova. Looking for a [guide video](https://www.youtube.com/watch?v=-ifgyobPLVg) below to better understand.
[![](https://camo.githubusercontent.com/7c498c4d60113dd1ea072576df897283100428b6/687474703a2f2f696d672e796f75747562652e636f6d2f76692f2d696667796f62504c56672f302e6a7067)](https://www.youtube.com/watch?v=-ifgyobPLVg) [![](https://camo.githubusercontent.com/7c498c4d60113dd1ea072576df897283100428b6/687474703a2f2f696d672e796f75747562652e636f6d2f76692f2d696667796f62504c56672f302e6a7067)](https://www.youtube.com/watch?v=-ifgyobPLVg)
## Download Polymer Starter Kit into your workspace ## Download Share With Me into your workspace
To download and preparation, follow this [guide of Polymer Starter Kit](https://github.com/PolymerElements/polymer-starter-kit#getting-started). Make sure that install all of dependencies of npm and Bower. To download and preparation, follow this [guide of Share With Me](https://github.com/PolymerElements/polymer-starter-kit#getting-started). Make sure that install all of dependencies of npm and Bower.
## Create a Cordova project ## Create a Cordova project
Create a Cordova project in path `polymer-starter-kit` by following command. `platform` is the path for Cordova project files, `com.your.app` is the project name/id and next following string is the description for your app. Create a Cordova project in path `polymer-starter-kit` by following command. `platform` is the path for Cordova project files, `com.your.app` is the project name/id and next following string is the description for your app.
```sh ```sh
cca create platform com.your.app "Your Polymer Starter Kit App" cca create platform com.your.app "Your Share With Me App"
``` ```
If you have no problems while creating a project you will seeing the message of installing successful coming from Cordova and have the tree of the project below. If you have no problems while creating a project you will seeing the message of installing successful coming from Cordova and have the tree of the project below.
@ -52,7 +52,7 @@ You need to have some changes of configuration to fit for Mobile Chrome Apps as
### Configure path for app built by gulp ### Configure path for app built by gulp
- Change the path `dist` in `gulpfile.js` from `dist` to `platform/www/app`, then the app built with Polymer Starter Kit will be placed under `platform/www` will be used by Cordova. - Change the path `dist` in `gulpfile.js` from `dist` to `platform/www/app`, then the app built with Share With Me will be placed under `platform/www` will be used by Cordova.
```js ```js
var DIST = 'platform/www/app'; var DIST = 'platform/www/app';
``` ```
@ -118,7 +118,7 @@ You need to have some changes of configuration to fit for Mobile Chrome Apps as
## Build and run app ## Build and run app
After done of above steps. run this command on root path that let you see Chrome Apps built with Polymer Starter Kit. After done of above steps. run this command on root path that let you see Chrome Apps built with Share With Me.
```sh ```sh
gulp && cd platform && cca run chrome gulp && cd platform && cca run chrome