Merge pull request #1 from google/master

sync my fork
google · Oct 27, 2016 · 136fe72 · 136fe72
2 parents 08be788 + 01b94ff
commit 136fe72
Show file tree

Hide file tree

Showing 81 changed files with 2,083 additions and 235 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,8 @@
 # Web Fundamentals on DevSite 
 
 Welcome to the new Web**Fundamentals**! <master> [![Build Status](https://ci.cloudware.io/api/badges/google/WebFundamentals/status.svg)](https://ci.cloudware.io/google/WebFundamentals)
+An effort to showcase best practices and tools for modern Web Development. 
+
 
 ### What's changed?
 

diff --git a/devsitePage.py b/devsitePage.py
@@ -18,6 +18,7 @@ def getPage(requestPath, lang):
   leftNav = '- No Left Nav Found - '
   toc = '- No TOC Found - '
   banner = devsiteHelper.getAnnouncementBanner(lang)
+  template = 'gae/article.tpl'
   fileLocations = [
     os.path.join(SOURCE_PATH, lang, requestPath) + '.md',
     os.path.join(SOURCE_PATH, 'en', requestPath) + '.md',
@@ -94,6 +95,12 @@ def getPage(requestPath, lang):
           bookPath = md.Meta['book_path'][0]
           leftNav = devsiteHelper.getLeftNav(requestPath, bookPath, lang)
 
+        # Checks if the page should be displayed in full width mode
+        if 'full_width' in md.Meta and len(md.Meta['full_width']) == 1:
+          fullWidth = md.Meta['full_width'][0]
+          if fullWidth.lower().strip() == 'true':
+            template = 'gae/home.tpl'
+
         # Build the table of contents & transform so it fits within DevSite
         toc = md.toc
         toc = toc.strip()
@@ -113,10 +120,22 @@ def getPage(requestPath, lang):
       if titleRO:
         title = titleRO.group(1)
 
+      gitHubEditUrl = 'https://github.com/google/WebFundamentals/blob/'
+      gitHubEditUrl += 'master/src/content/'
+      gitHubEditUrl += fileLocation.replace(SOURCE_PATH, '')
+
+      gitHubIssueUrl = 'https://github.com/google/WebFundamentals/issues/'
+      gitHubIssueUrl += 'new?title=Feedback for: ' + title + ' ['
+      gitHubIssueUrl += lang + ']&body='
+      gitHubIssueUrl += gitHubEditUrl
+
+
       # Renders the content into the template
-      response = render('gae/article.tpl', {
+      response = render(template, {
         'title': title,
         'announcementBanner': banner,
+        'gitHubIssueUrl': gitHubIssueUrl,
+        'gitHubEditUrl': gitHubEditUrl,
         'requestPath': requestPath.replace('index', ''),
         'leftNav': leftNav,
         'content': content,

diff --git a/gae/article.tpl b/gae/article.tpl
@@ -12,6 +12,16 @@
         font-weight: bold !important;
       }
       .wf-stage-warning .material-icons { vertical-align: middle; }
+      .wf-edit-button {
+        border-radius: 50%;
+        height: 40px;
+        width: 40px;
+        color: white;
+        background-color: #3367d6;
+        padding: 8px;
+        box-shadow: 0 1px 4px rgba(0,0,0,.37);
+      }
+      .devsite-rating-stars { text-align:right; }
     </style>
     <title>{{ title }}</title>
   </head>
@@ -100,12 +110,12 @@
             <article class="devsite-article-inner">
               <div class="devsite-rating-container">
                 <div class="devsite-rating-stars">
-                  <div class="devsite-rating-star devsite-rating-star-outline gc-analytics-event material-icons">
-                  </div><div class="devsite-rating-star devsite-rating-star-outline gc-analytics-event material-icons">
-                  </div><div class="devsite-rating-star devsite-rating-star-outline gc-analytics-event material-icons">
-                  </div><div class="devsite-rating-star devsite-rating-star-outline gc-analytics-event material-icons">
-                  </div><div class="devsite-rating-star devsite-rating-star-outline gc-analytics-event material-icons">
-                  </div>
+                  <a href="{{gitHubIssueUrl}}" class="material-icons wf-edit-button" title="Report Issue" target="_blank">
+                    bug_report
+                  </a>
+                  <a href="{{gitHubEditUrl}}" class="material-icons wf-edit-button" title="Fix It" target="_blank">
+                    mode_edit
+                  </a>
                 </div>
                 <div class="devsite-rating-description">
                 </div>

diff --git a/gulp-tasks/test.js b/gulp-tasks/test.js
@@ -222,6 +222,32 @@ function validateYamlFiles(fileName) {
   return {file: fileName, ok: true};
 }
 
+function getAndValidateContributors() {
+  var msg;
+  var result;
+  try {
+    gutil.log('Validating _contributors.yaml...');
+    var contribYaml = fs.readFileSync(CONTRIBUTORS_FILE, 'utf8');
+    result = jsYaml.safeLoad(contribYaml);
+    result.hasErrors = [];
+  } catch (ex) {
+    msg = 'Unable to read or parse _contributors.yaml';
+    gutil.log(' ', gutil.colors.red('ERROR'), msg, gutil.colors.cyan(ex.message));
+    return {
+      hasErrors: [msg + ' -- ' + ex.message]
+    };
+  }
+  Object.keys(result).forEach(function(key) {
+    var c = result[key];
+    if (c.google && typeof c.google !== 'string') {
+      msg = 'Google+ ID for ' + key + ' must be a string';
+    gutil.log(' ', gutil.colors.red('ERROR'), msg, c.google);
+    result.hasErrors.push(msg);
+    }
+  });
+  return result;
+}
+
 gulp.task('test', function(callback) {
   var warnings = 0;
   var errors = 0;
@@ -241,18 +267,23 @@ gulp.task('test', function(callback) {
   gutil.log('Base directory:', gutil.colors.cyan(opts.srcBase));
   gutil.log('');
 
-  var contribJson;
-  try {
-    gutil.log('Validating _contributors.yaml...');
-    var contribYaml = fs.readFileSync(CONTRIBUTORS_FILE, 'utf8');
-    contribJson = jsYaml.safeLoad(contribYaml);
-  } catch (ex) {
-    contribJson = {};
-    errors++;
-    var msg = 'Unable to read or parse _contributors.yaml';
-    gutil.log(' ', gutil.colors.red('ERROR'), msg, gutil.colors.cyan(ex.message));
-    errorList.push(CONTRIBUTORS_FILE + ': ' + msg + ' -- ' + ex.message);
+  var contribJson = getAndValidateContributors();
+  if (contribJson.hasErrors) {
+    contribJson.hasErrors.forEach(function(err) {
+      errorList.push(CONTRIBUTORS_FILE + ': ' + err);
+    });
   }
+  // try {
+  //   gutil.log('Validating _contributors.yaml...');
+  //   var contribYaml = fs.readFileSync(CONTRIBUTORS_FILE, 'utf8');
+  //   contribJson = jsYaml.safeLoad(contribYaml);
+  // } catch (ex) {
+  //   contribJson = {};
+  //   errors++;
+  //   var msg = 'Unable to read or parse _contributors.yaml';
+  //   gutil.log(' ', gutil.colors.red('ERROR'), msg, gutil.colors.cyan(ex.message));
+  //   errorList.push(CONTRIBUTORS_FILE + ': ' + msg + ' -- ' + ex.message);
+  // }
 
   gutil.log('Validating yaml files...');
   var files = glob.find(['**/*.yaml'], STD_EXCLUDES, opts);

diff --git a/gulp-tasks/wfCodeLabHelper.js b/gulp-tasks/wfCodeLabHelper.js
@@ -57,6 +57,7 @@ function updateCodeLab(fileName) {
   }
   markdown = markdown.replace(/^\*Duration is \d+ min\*\n/gm, '');
   markdown = markdown.replace(/\(https:\/\/developers.google.com\//g, '(\/');
+  markdown = markdown.replace(/^\[\]\(/gm, '[Link](');
   result.push(markdown);
   if (metadata.feedback) {
     result.push('');

diff --git a/gulpfile.js b/gulpfile.js
@@ -102,13 +102,16 @@ gulp.task('presubmit', function(cb) {
   runSequence('clean', 'test', cb);
 });
 
-gulp.task('default', function() {
-  gutil.log('Options:');
-  gutil.log(' ', gutil.colors.cyan('build'), 'Builds all auto-generated files...');
-  gutil.log(' ', gutil.colors.cyan('clean'), 'Removes all auto-generated files from src/content/...');
-  gutil.log(' ', gutil.colors.cyan('codelabs'), 'Updates the Code Labs to the latest from Docs');
-  gutil.log(' ', gutil.colors.cyan('deploy'), '[clean, build, test]');
-  gutil.log(' ', gutil.colors.cyan('presubmit'), 'See test');
-  gutil.log(' ', gutil.colors.cyan('test'), 'Checks the files for any issues');
-  gutil.log('');
+gulp.task('default', function(cb) {
+  console.log(chalk.red('ERROR:'), 'no command specified.');
+  console.log('Usage: gulp <command> [arguments]');
+  console.log(' ', 'Commands');
+  console.log('  ', gutil.colors.cyan('build'), 'Builds all auto-generated files...');
+  console.log('  ', gutil.colors.cyan('clean'), 'Removes all auto-generated files from src/content/...');
+  console.log('  ', gutil.colors.cyan('presubmit'), 'Clean & test');
+  console.log('  ', gutil.colors.cyan('test'), 'Checks the files for any issues');
+  console.log(' ', 'Optional Arguments');
+  console.log('  ', chalk.cyan('--lang'), 'Comma separated list of languages to use', chalk.gray('eg: --lang=en,fr'));
+  console.log('  ', chalk.cyan('--verbose'), 'Log with verbose output');
+  console.log('');
 });
diff --git a/src/content/ar/fundamentals/design-and-ui/media/images.md b/src/content/ar/fundamentals/design-and-ui/media/images.md
@@ -174,7 +174,7 @@ Note: يبدأ العنصر  <code>picture</code> الوصول إلى المتص
 
 ### تعيين صور المنتج على إمكانية التوسيع
 
-يريد العملاء دائمًا الاطلاع على الأشياء التي يرغبون في شرائها.  وفي مواقع البيع بالتجزئة على الويب، يتوقع المستخدمون تمكينهم من الاطلاع على صور مقربة بدقة عالية للمنتجات لمعرفة تفاصيل أكثر عن المنتج، ويتضح من [المشاركين في هذه الدراسة](/web/fundamentals/principles/research-study.html) أنه يحدث انزعاج عند عدم تمكن العملاء من ذلك.
+يريد العملاء دائمًا الاطلاع على الأشياء التي يرغبون في شرائها.  وفي مواقع البيع بالتجزئة على الويب، يتوقع المستخدمون تمكينهم من الاطلاع على صور مقربة بدقة عالية للمنتجات لمعرفة تفاصيل أكثر عن المنتج، ويتضح من [المشاركين في هذه الدراسة](/web/fundamentals/principles/research-study) أنه يحدث انزعاج عند عدم تمكن العملاء من ذلك.
 
 <figure>
   <img src="img/sw-make-images-expandable-good.png" srcset="img/sw-make-images-expandable-good.png 1x, img/sw-make-images-expandable-good-2x.png 2x" alt="موقع J. Crews على الويب مع صورة منتج يمكن توسيعها">
@@ -191,7 +191,7 @@ Note: يبدأ العنصر  <code>picture</code> الوصول إلى المتص
 يوفر [أسلوب الصور
 المضغوطة](http://www.html5rocks.com/en/mobile/high-dpi/#toc-tech-overview) صورة 2x مضغوطة بنسبة كبيرة على جميع الأجهزة، بغض النظر عن إمكانيات الجهاز الفعلية.  وبناءً على نوع الصورة ومستوى الضغط، قد لا يظهر تغير على جودة الصورة، إلا أن حجم الملف يقل بشكل ملحوظ.
 
-<a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/images/compressive.html">      انظر المثال</a>
+<a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/compressive.html">      انظر المثال</a>
 
 Note: توخ الحذر بشأن الأسلوب المضغوط نظرًا للتكاليف الزائدة التي يتسبب فيها بسبب الذاكرة وإلغاء الترميز.  يعد تغيير حجم الصور الكبيرة لتناسب الشاشات الصغيرة أمرًا مكلفًا وقد يتسبب في إزعاج خاصة على الأجهزة محدودة التكلفة حيث يكون كل من الذاكرة والمعالج محدودين.
 
@@ -378,7 +378,7 @@ You're a super &#9733;
 
 يمكن من خلال أسلوب النقوش المتحركة في CSS الجمع بين عدة صور في صورة تُعرف باسم `ورقة نقوش متحركة`. وبعد ذلك يمكن استخدام الصور الفردية من خلال تحديد صورة الخلفية للعنصر (ورقة النقوش المتحركة) بالإضافة إلى تعويض لعرض الجزء المناسب.
 
-<a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/images/image-sprite.html"><img src="img/sprite-sheet.png" class="center" alt="استخدام ورقة النقوش المتحركة في المثال"></a>
+<a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/image-sprite.html"><img src="img/sprite-sheet.png" class="center" alt="استخدام ورقة النقوش المتحركة في المثال"></a>
 <pre class="prettyprint">
 {% includecode content_path="web/fundamentals/design-and-ui/media/_code/image-sprite.html" region_tag="sprite" adjust_indentation="auto" %}
 </pre>

diff --git a/src/content/ar/fundamentals/design-and-ui/media/video.md b/src/content/ar/fundamentals/design-and-ui/media/video.md
@@ -74,7 +74,7 @@ description: تعرف على أسهل طرق إضافة الفيديو إلى م
 تعد جميع هذه النقاط ذات أهمية خاصة في سياقات الجوّال؛ حيث يعد معدل نقل البيانات ووقت الاستجابة العنصر الأهم، وغالبًا ما تكون قدرة المستخدم على الانتظار محدودة. 
 ويمكن أن يؤدي عدم تضمين سمة النوع إلى التأثير في مستوى الأداء عندما تكون هناك عدة مصادر بأنواع غير متوافقة.
 
-باستخدام أدوات مطوِّري متصفح الجوّال، يمكنك مقارنة نشاط الشبكة <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/video/video-main.html">مع سمات النوع</a> و<a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/video/notype.html">without type attributes</a>.
+باستخدام أدوات مطوِّري متصفح الجوّال، يمكنك مقارنة نشاط الشبكة <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/video-main.html">مع سمات النوع</a> و<a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/notype.html">without type attributes</a>.
 راجع كذلك رؤوس الاستجابة في أدوات مطوِّري المتصفح [للتأكد من أن الخادم يعرض نوع MIME المناسب](//developer.mozilla.org/en/docs/Properly_Configuring_Server_MIME_Types)، وإلا فلن تعمل فحوصات نوع مصدر الفيديو.
 
 ### تحديد وقت بدء ووقت انتهاء
@@ -215,7 +215,7 @@ Note: - تتوافق واجهة برمجة تطبيقات Media Fragments مع
 
 في جافا سكريبت، يمكنك استخدام الخاصية `currentSrc` في الفيديو لعرض المصدر المستخدم.
 
-للاطلاع على ذلك عمليًا، يمكنك الرجوع إلى <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/video/video-main.html">هذا العرض التجريبي</a>: يختار كل من Chrome وFirefox ما يلي `chrome.webm` (نظرًا لأنه الخيار الأول في قائمة المصادر الممكنة التي يتوافق معها هذان المتصفحان) بينما يختار Safari ما يلي `chrome.mp4`.
+للاطلاع على ذلك عمليًا، يمكنك الرجوع إلى <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/video-main.html">هذا العرض التجريبي</a>: يختار كل من Chrome وFirefox ما يلي `chrome.webm` (نظرًا لأنه الخيار الأول في قائمة المصادر الممكنة التي يتوافق معها هذان المتصفحان) بينما يختار Safari ما يلي `chrome.mp4`.
 
 
 ## استخدام حجم الفيديو المناسب 
@@ -270,7 +270,7 @@ Note: لا تفرض حجمًا للعنصر قد يؤدي إلى نسبة عرض
 {% includecode content_path="web/fundamentals/design-and-ui/media/_code/responsive_embed.html" region_tag="markup" adjust_indentation="auto" %}
 </pre>
 
-قارن <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/video/responsive_embed.html">النموذج سريع الاستجابة</a> بـ <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/video/unyt.html">النسخة بطيئة الاستجابة</a>.
+قارن <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/responsive_embed.html">النموذج سريع الاستجابة</a> بـ <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/unyt.html">النسخة بطيئة الاستجابة</a>.
 
 
 ## تخصيص مشغِّل الفيديو 
@@ -350,7 +350,7 @@ src="img/iPad-Retina-landscape-video-playing.png">
      <p>هذا المتصفح ليس متوافقًا مع عنصر الفيديو.</p>
 </video>
 
-للاطلاع على ذلك عمليًا، راجع <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/video/fullscreen.html">demo</a>.
+للاطلاع على ذلك عمليًا، راجع <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/fullscreen.html">demo</a>.
 
 Note: `requestFullScreen()` is currently vendor prefixed and may require extra code for full cross browser compatibility.
 
@@ -541,7 +541,7 @@ Note: يتوافق عنصر المسار الصوتي على Chrome لنظام A
   </tbody>
 </table>
 
-لا يتوافق كل من playbackRate (<a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/video/scripted.html">راجع العرض التجريبي</a>) ومستوى الصوت على الجوّال.
+لا يتوافق كل من playbackRate (<a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/scripted.html">راجع العرض التجريبي</a>) ومستوى الصوت على الجوّال.
 
 #### الطرق
 
@@ -571,7 +571,7 @@ Note: يتوافق عنصر المسار الصوتي على Chrome لنظام A
 </table>
 
 على الجوّال (باستثناء Opera وAndroid) لا يعمل كل من play() وpause() ما لم
-يتم طلب استجابة لإجراء المستخدم، مثل النقر على زر ما: راجع: see the <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/video/scripted.html">العرض التجريبي</a>. (وهكذا، لا يمكن بدء التشغيل للمحتوى مثل مقاطع فيديو YouTube المضمَّنة).
+يتم طلب استجابة لإجراء المستخدم، مثل النقر على زر ما: راجع: see the <a href="https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/media/scripted.html">العرض التجريبي</a>. (وهكذا، لا يمكن بدء التشغيل للمحتوى مثل مقاطع فيديو YouTube المضمَّنة).
 
 #### الأحداث