jquery/jquery-wp-content

WordPress themes and plugins for the jQuery sites

jquery-wp-content

This repository provisions the wp-content directory of a WordPress installation, with the themes, plugins, and site options for jQuery Project websites.

Getting started

Production

To learn how the sites are managed in production, refer to https://github.com/jquery/infrastructure-puppet.

Staging

Changes pushed to the main branch of this repository are automatically pulled onto the staging servers, which are publicly reachable via the stage.* subdomains of the live sites. For example, the staging site for https://api.jquery.com is served at https://stage.api.jquery.com

Local

To help preview or debug changes locally during development, you can use https://github.com/jquery/jquery-wp-docker.

jquery-wp-content's Issues

App base is an unneeded abstraction layer for jQuery website properties

No jQuery website (certainly not ALL jQuery websites) needs an abstraction layer of the sort that would allow for the seamless swapping out of jQuery for another JavaScript library that does DOM ready and Ajax.

This is only being used for DOM ready and to store a single variable that is just as well stored as a local variable. Removing will save 1K and a request. It can safely be removed.

Create an easy way to work on just web-base-template

It would facilitate the process of working on HTML and CSS greatly if people don't have to clone each site project and grunt deploy it to their local environment. We should provide a sql dump they can quickly execute to populate their local install so they can get down to pixels.

Network 'My Sites' menu shows jQuery for all sites using WordPress master

Using WordPress master, there's a regression in the Network 'My Sites' menu. The list shows every site name as 'jQuery' instead of the actual sites' names. This is caused by WordPress/WordPress@e75d8f7

Add license info

ALA is a great reference: http://www.alistapart.com/copyright/

In short: Code samples should be free for use without attribution. Content should be free for use with attribution. Site design should not be available for use.

(originally at qunitjs/qunitjs.com#6 - but affects all sites)

Document responsive breakpoints

We should document how the theme's responsive layout works so that people working on HTML and CSS can work with them in mind.

Provide general styling for blog content

Core, UI, and Mobile, each have blogs, and there needs to be generalized styling applied to the content of blogs and their archive listings, etc.

Search field breaks layout in FF13/OSX

Getting a horizontal scrollbar in Firefox 13/OSX, apparently caused by the search field. The problem goes away when removing the search field.

See also https://twitter.com/greaterweb/status/224960289358102528

Format of template, and inclusion in other projects

From Boaz:

If any changes to the base template are planned please let me know as soon as you can as we have already done a bunch of work with it for the plugins site, and I have not figured out a workflow for version controlling just the jQuery template part.

Speaking of which, maybe the base template should come self contained in the repo so that it would be easy to submodule in other version controlled projects. The plugin site is version controlled here: https://github.com/Bocoup/jquery-plugins

It would be nice if the whole jQuery template repo was a sample index.html and then a directory called jquery-template. That way it would be easy to update each project that consumes the template.

Thoughts?

Search form not accessible with CSS alone

Problem
With JavaScript off, the search form is not accessible because the label sits overtop the field, obscuring view of what is typed.

Solution
The search form/label needs an alternate style for when the .no-js class is on the html element.

Tooltip Hover Code

The tooltips should not appear for the currently selected tab (Open to discussion, but thats how I envisioned it).

Also, they are not hiding consistently.

"All Projects" subtext unreadable

Dark grey on black doesn't work. Even if it supposed to change on mouseover, that seems to be a bad interaction on its own - hover styling is fine, but it should be readable without hovering.

Enforce option values in domains.php after installation

The lists of options in domains.php are nice as they get set during installation. But it would best to also allow a change in domains.php to work "live," without needing to do a fresh install or manually update the UI.

We can do this by using a hook in the options API to override whatever value is in the database. To test this commit, go to the General Settings page and try to update the site title. You won't be successful. Now go to domains.php and change the 'blogname' for that site. You'll see things update.

Debugging on stage server turned on, causes xml-rpc message errors

Certainly it is valuable to have debugging turned on for both php and wordpress notices on the stage. server, lines 16-17

// WordPress debugging mode (enables PHP E_NOTICE and WordPress notices)
define( 'WP_DEBUG', (bool) JQUERY_STAGING );

however, this prevents sites from deploying to the server because these notices are output as part of XML-RPC messages which causes

>> Error: Invalid XML-RPC message

Is there some way we can have debugging on generally but not for the xml-rpc page(s) specifically?

Use transparent background-image gradients

Right now each theme has its own gradient background image, which is somewhat suboptimal because it re-creates the same gradient, which means more maintenance in case of change, and requires an image to be generated for each new theme.

Instead, lets use a transparent background-image gradient and fill in the solid color behind it with css:

html.qunitjs, .qunitjs #container {
    background: #00733c url(../i/bg-body-trans.png) no-repeat center -20px;
}

Or even better, instead of a transparent gradient image, replace the image with css as well (css3 background-image gradient).

Consider moving CDN into a WP-template for generating project-specific links

Today, duplicate markup is spread everywhere and will be a real PITA to update when the projects releases new versions. The new template should be included in theme-specific footer.php's.

For related files (when writing this issue), see this commit: 212c2ff

Apply refreshed styling to jquery.com home page

This has already been mocked up by @darcyclarke, but still needs to be implemented.

Site drop downs not clearing

https://skitch.com/etiger13/gcshc/qunit

New sites show as 404 until the wp-admin permalinks is visited

After a fresh install, the permalinks setting isn't applied properly. Simply visiting the permalinks admin page fixes the setting.

Validation issues

• Some <img> tags are missing alt attributes
• Seach contains superfluous closing <li>:
  <input type="text" id="search" name="search"></li>

Modernizr upgrade to version 2.0.6, select minimal components

There's a much newer version of Modernizr out.

1. We should get it
2. There's an option to include respond.js in it. This will cut down on a script element and a request
3. There's a custom builder. The only parts we're using today are:
   • CSS3 - box-shadow
   • CSS3 - multiple backgrounds
   • CSS3 - CSS Gradients
   • Extra - HTML5 Shim/IEPP
   • Extra - MQ Polyfil ( respond.js )
   • Extra - Add CSS Classes

Selection of the above auto-selects also

• Extra - Media Queries
• Extensibility - Modernizr.testStyles()

The latest version today is 2.0.6 and the url for downloading with the above options is

http://www.modernizr.com/download/#-boxshadow-multiplebgs-cssgradients-iepp-respond-mq-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes

Make site-specific plugins actually site-specific

plugins.jquery.com has two mu-plugins that it's using which should be limited to that site only.

Footer links

Make footer links active once jquery/jquery.org#1 is closed

Make content area more narrow

Code and text content is too wide here: http://qunitjs.com/intro

Will likely become an issue on other sites as well.

Items in 'All Projects' menu not accessible

The items in the 'All Projects' menu were taken out of the tab order by 84cdc48 as part of the fixes for #24. Simply reverting this is not sufficient as the items were not previously in the correct position in the tab order and had/have no relation to the 'All Projects' link item/button that expands them.

Patch SyntaxHighlighter to avoid IE errors in jQuery.animate

We need to apply this patch to the SyntaxHighlighter plugin to avoid IE errors in jQuery.fn.animate when a number is passed in as the animated value.

https://bitbucket.org/alexg/syntaxhighlighter/issue/220/ie-only-conflict-with-jquery-animate

Please add skip-to link for screen readers

Because, um, yeah - that'd be cool

Links to GitHub repos

When people spot issues on our sites, they should instantly see a link to this and the respective content repo to report issues.

Error uploading .eot file via XML-RPC

Trying to grunt deploy events.jquery.org

>> Error publishing 2012/uk/font/bebasneue-webfont.eot.
>> Error: XML-RPC fault: Invalid file type

Thoughts @scottgonzalez or @nacin ?

There's no focus styling

Right now it's impossible to tell where focus is because nothing visually changes as it's focused. I can tab through the entire page and the only element that gives any visual feedback is the search field. Even anchors in page content have no visual change on focus.

Complete styling for API documentation

Core currently has an API site, and one is close to completion for jQuery UI. The styling for API documentation content has been started but is not yet complete.

Hard tabs

Can we get rid of the hard tabs in the base template and just stick to two space soft tabs?

Fix buttons :hover :focus and :active states

Need to be more apparent as @kswedberg noted in the IRC channel. And the ".blue" classed button should be ".colored" or ".color" and then the button will style to the environment (ie. jQuery, jQuery Mobile or jQuery UI sites color schemes).

Add button to copy CDN URL to clipboard

The CDN URL in the quick access section should have a button to copy the URL to the clipboard, like GitHub's button to copy the clone URLs. Right now you have to manually select with a mouse drag in order to get the full URL with nothing else. A triple click will select the URL plus the word "CDN".

Remove dependency on typekit.com

We shouldn't be relying on a 3rd party site to host our fonts. This can kill the performance of our sites. On multiple occasions I've had extremely long page load times due to typekit.com

Project logo showing up on jquerymobile.com

Provide link to git(hub) content repo

Each site should have a link to the content repo, so that people spotting issues know where to report or even fix them. Maybe along with a link to this repo for all design/header/footer issues.

Commenting platform (i.e. built-in, Disqus, etc.)

We talked about this about two weeks ago (me, Adam and Darcy) and we somewhat agree'd on Disqus. The problem here is that, what Worth mentioned about Progressive Enhancement in the issue about search not being available to non-JavaScript users (#18), I'm not so sure about Disqus either.

As far as I know, this requires JavaScript, especially if we need # of comments printed on different places (which we are), so I'm somewhat leaning towards using the WordPress built-in platform instead.

Any thoughts on this? I'm asking because we need to style the comments and that's not something we want to do before we decide on what platform we should use.

Dropdown should extend to left when not enough space

On qunitjs.com the top right menu ("ul.links") has drodown menu's. It seems they have variable width and unconditionally start at the bottom left of the menu item.

This causes the menu to go off-page for the last one or two menu items.

See screenshot ( http://i.imgur.com/88Sro.png ), as seen on Chrome 15 (Mac).

jqueryui.com homepage needs a facelift

The jQuery UI homepage needs to be refreshed, it can likely borrow ideas from @darcyclarke's mockup for core, but will need its own content. I think @rdworth can probably help!

Make Copyright (and lack of license) explicit

The content in web-base-template is copyrighted and not licensed for use. This is really important as we don't intend for anyone to make use of any part of the design on our site themes, which is what this repository is meant to contain. We should simple state 'Copyright. All rights reserved' and explain that there is no license and ask if you have questions.

Search results pages need styling

There is search functionality on all the sites, but the results are currently in need of basic styling and layout. If possible, this should take into consideration that we'll be having multi-site search and we'll either want results to be grouped by site or to otherwise denote which subdomain the result came from.

Sites no longer user child themes using WordPress master

Using WordPress master, all sites have seemingly regressed to using the parent theme (jquery) and not the child theme (based on domain name). This regression is caused by WordPress/WordPress@295ca4d ( see also http://core.trac.wordpress.org/ticket/21434 ). Using master with this commit reverted works ok.

Duplicate and unused images

The following images are duplicates or unused and should be removed or renamed for consistency:

duplicates (remove):
base/i/bg-body-qunit.jpg
base/i/bg-body-sizzle.jpg
base/i/logo-qunit.png
base/i/logo-sizzle.png

unused (remove):
base/i/bg-footer.png
base/i/bg-title-shadow.png
base/i/footer-comp.png
base/i/logos-sponsors.png

inconsistent (rename):
base/i/logo-top-qunit.png -> base/i/logo-top-qunitjs.png
base/i/logo-top-sizzle.png -> base/i/logo-top-sizzlejs.png

Butchered category descriptions

Might we a grunt-wordpress issue, dunno. Anyway, currently the content from <desc> elements in categories.xml gets butchered.

Compare https://github.com/jquery/api.jquery.com/blob/473ea2039e0cf89ea19b15aa50c2bfafb35255f2/categories.xml#L82 to http://stage.api.jquery.com/category/events/event-object/

divs and pres are thrown away, ps converted to <br>.

Permalinks should be set to /%postname%/ by install

We should set permalinks to /%postname%/ as part of install and do we also need a way to custom override? Or will that work for all sites?

JavaScript error with SyntaxHighlighter in IE6-9

Having SyntaxHighlighter.js included on the page causes an error in all versions of IE:

'undefined' is null or not an object

If supporting IE6 during review period, consider applying pngfix

Although the design looks great in 'modern' browsers, if we're supporting IE6 during the review period, applying things like the PNG fix would be useful. Below is a screenshot of how it currently looks on my VM (sans fix):

http://addyosmani.com/gyazo/af264e.png

(Totally understand if we're not doing targeting fixes like this until the design has cleared approval, so ignore if needed) :)

Better styles for syntax highlighting

The current styles are pretty bad.

Fix styling of code blocks without line numbers

See http://bassistance.de/i/0235dd.png

Needs more padding on the left.

Script to generate new sites

We should have a script that will look at the domains array and install any new sites. This will be useful in the future whenever we decide to add another domain.