///start typing below this text
- Changed algolia index name to
saucelabs_cralwer_new_sauce - Modified
instantsearchcomponent inapp.js. IncludedattributesToSnippetin order to render specific algolia record attributes.
##June 30 - Rich's Changes
- Modified default string for
gulpfile.js's defaultBASE_URLvalue to removeexample.comartifact on certain pages. (gulpfile.js, 61)
- Added missing Typekit script in all views/*/index.html head (lines 32 or 33)
- Modified
.codelab-cardstyles to match front page, corrected font weight and line height (_codelab-card.scss, 125-128)
- Updated favicon in
site/app/images/favicons/browserconfig.xml
- Added h2 anchor styles in
site/app/styles - Added h2 anchor functionality to
site/app/scripts/app.js- ln 334-376, 380-349
- not sure why ln 325 Segment.io was removed
- Added algolia search markup and styles in
site/app/views/default/index.html- styles on ln 173-174
- ln 352-353 importing script tag
- import
algoliasearch-lite.umd.js,instantsearch.js@4,/docsearch.min.cssandalgolia-min.css
- Added algolia secrch interactions in
site/app/scripts/app.js- functionality starts ln 404
- Added training as a menu item
- Added carats to menu items
- Added in an override to make quiz iframe larger in /app/scripts/app.js on linke 307,
forloop to override height. Attempt on line 313 to enable expanded view of videos.
- Added a min height to quiz iframes in /site/app/styles/overrides.scss
- Made views/default/index.html cards linkable
Text on Module Cards
Adding functionality to add text to module cards within a lesson e.g. Module 1 Selenium Java. Go into site/app/views/ within each folde ryou should find an index.html e.g. site/app/views/SeleniumJava/index.html. Next, find the <div class="card_summary"> in the <p> tags below. The code should look like this:
<div class="card__summary">
{%- if codelab.summary -%}{{codelab.summary}}{%- endif -%}
{%- if codelab.id == 'early_access_issues' -%}
<p>This exists for a particular id.</p>
<p>Third paragraph.</p>
{%- endif -%}
{%- if codelab.id == 'basic_information' -%}
<p>This exists for a basic information id.</p>
<p>Third paragraph.</p>
{%- endif -%}
</div>
Look in the file in site/codelabs/basic_information/codelab.json. The content in the summary: field will be displayed on every single codelab
in each of the folder in site/app/views before the closing </div for the div id=searchbar add in <navigation-element></navigation-element> to make the Sauce-style navigation show up on each course page.
All of these styles were created in a new css file in app/elements/navigation.html, then injected with Polymer framework into the Codelab course and landing pages.
To override styles, used gulp to build a css directory/ file in each module folder that is generated with the build
- updated dependencies in package.json
gulp-inline-css - created site/app/styles/_override.scss
- ln 43 `require ('gulp-dom')``
- ln 147-161
created a gulp.task to override modules with CSS - ln 259 added
override:modulesto the gulp build task.
- In site/app/elements/navigation.html you'll find the navigation that mimics the corporate site
- Commented out code in site/app/views/default/index.html and replaced with index cards to page Categories
- Added site/app/styles/overrides.scss to eventually inject into site/build/codelabes course modules to alter css. Built the gulp task. Make sure to create a styles folder when you generate a new codelabs module otherwise the overrides.css doesn't get injected
- In tools/site/app/images added in some small images to use as icons as codelab card.
- in tools/site/app/styles/_categories.scss Added in to the very bottom;
@include codelab-card(['beginner'], $pantoneRed, 'magGlass.png');
@include codelab-card(['intermediate'], $pantoneRed, 'seleniumSml.png');
@include codelab-card(['advanced'], $pantoneRed, 'checkSml.png');
- Finally, went into tools/site/images/icons and added in the small icons I used in the above code e.g.
seleniuumSml.png
In each of the markdown files in the codelabs directory, I made the tag and categories lowercase. Example from Module1_SeleniumJS
author:Lindsay
summary: Module 1 of the Selenium Java Test Automation. Learn to write Selenium tests in Java language using the JUnit framework, IntelliJ, and Jenkins.
id: Module1-SeleniumJava
categories: beginner
tags: java
updated the views as well. for app/views/default/view.json:
"title": "Sauce School Training",
"description": "Sauce School is the training portal for Sauce Labs. The courses here provide how-to tutorials with best practices for both beginners and experienced automation test developers. Courses cover topics including Selenium, JavaScript and Java, with how-tos and instructions on using different tools and test runners such as Mocha, JUnit, Jenkins, Sauce Labs, SauceConnect, SauceOnDemand, npm, Maven, and more.",
"tags": ["java, javascript"],
"categories": ["beginner, intermediate, advanced"],
an as an example, for app/views/seleniumjs/view.json:
"title": "Selenium JavaScript",
"description": "In this course, you will learn to use JavaScript with the Mocha test runner to develop an automated testing suite. Both beginners and advanced testers will create autonomous, easy to maintain test code, and use npm, Jenkins, SauceConnect, and SauceOnDemand along with Selenium, JavaScript, and Mocha to write a test suite and to gain the skills using tools you need as a test automation engineer.",
"logoUrl": "/SeleniumJS/logo.png",
"tags": ["javascript"],
Note that none of the modules are showing on the main page, and that the dropdown seems to be picking up the "title" from view.json and not the tag. The URL for each landing page (JS, or Java) seems to contain the name of the folder in /app/views e.g. URL/seleniumjs
within the Javascript landing page, the categories are being picked up (all were changed to lowercase). also,
Updated files in tools/site/app/styles _materials.scss and _typography.scss to include Museo Sans and sans-serif. May need to further change the _materials.scss to modify font weight, width, spacing etc for h1, h2 etc defined in _typography
Views are added in each markdown file at the top located in tools/site/codelabs. If you add (only one) item to 'categories:' it will populate in list, though I also added something in the "categories" in tools/site/app/views/default/view.json. Note that these categories will all show up lowercase
Views Define the separate landing pages that groups of modules (i.e. a course) can have. First, in any markdown files in the tools/site/codelabs add something in the 'tags:' in the header. (i.e. tags:Java). Next, go into the view you want it to appear in tools/site/app/views/SeleniumJava/view.json and add the "tags":[Java]. Now the "title": from that json file will show up Selenium Java and it will appear in the menu that says 'choose your language', and show all .md modules with the Java "tags:"
in tools/site/app/views/default I updated view.json with new title and course description, as well as the same info in index.HTML
To add links in, in index.html lines 245-257 added in the links to pop up in a new window with href="" target="_blank"
in tools/site/styles/variables.scss created the following variables:
- $coolGrey10C25 #EDEDEF
- $coolGrey10C10 #C1C3C7
- $pureWhite #FFFFFF
- $pantoneRed #E2231A
- $pantoneGrey #474C55
- $pantoneLightBlue #57C1E8
- $pantoneDarkBlue #003A70
the following variables were also changed:
- $backgroundColor : $coolGrey10C10
- $mainColor: $pantoneRed
- $accentColor: $pantoneDarkBlue
in tools/site/app/images/ replaced logo.png with sauce's logo.png, then in tools/site/style/_toolbar.scss added in .logo-devs{width: 15em; height:auto;}, #mainToolbar{background-color: $coolGrey10C5}, #searchbar{background-color:$coolGrey10C10 &hover{background-color:$pantoneGrey}}
In app/styles/footer.scss changed #footer {background-color:$pantoneGrey}, .footerbar{background-color: $coolGrey10C10}