Skip to content

Commit 3120bda

Browse files
JPrevostJPrevost
committed
Adds shared layouts and usage documentation
1 parent 7c1d962 commit 3120bda

12 files changed

Lines changed: 219 additions & 17 deletions

‎README.md‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
# Mitlibraries::Theme
22

3-
Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/mitlibraries/theme`. To experiment with that code, run `bin/console` for an interactive prompt.
4-
5-
TODO: Delete this and the text above, and describe your gem
3+
Provides base CSS and Images used by MIT Libraries for our websites.
64

75
## Installation
86

@@ -22,7 +20,23 @@ Or install it yourself as:
2220

2321
## Usage
2422

25-
TODO: Write usage instructions here
23+
After you bundle, delete your application local `app/views/layouts/application.rb` to use the layout the gem provides.
24+
25+
Rename your `app/assets/stylesheets/application.css` to `app/assets/stylesheets/application.scss` and remove anything like:
26+
```
27+
*= require_tree .
28+
*= require_self
29+
```
30+
Add
31+
`@import "libraries-main";`
32+
33+
If you have local overrides for styles, import them _after_ the shared styles.
34+
35+
You'll want to set `<%= content_for(:title, "SOMETHING") %>` on your views.
36+
37+
You'll want to copy `app/views/layouts/_site_nav.html.erb` into your local repo and make appropriate changes.
38+
39+
If you need to make changes to other templates, you can also copy those to your local repo but you should check with others as the main header / footer / etc are probably best left as they are in this gem.
2640

2741
## Development
2842

@@ -32,12 +46,12 @@ To install this gem onto your local machine, run `bundle exec rake install`. To
3246

3347
## Contributing
3448

35-
Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/mitlibraries-theme. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
49+
Bug reports and pull requests are welcome on GitHub at https://github.com/MITLibraries/mitlibraries-theme. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
3650

3751
## License
3852

3953
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
4054

4155
## Code of Conduct
4256

43-
Everyone interacting in the Mitlibraries::Theme project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/mitlibraries-theme/blob/master/CODE_OF_CONDUCT.md).
57+
Everyone interacting in the Mitlibraries::Theme project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/MITLibraries/mitlibraries-theme/blob/master/CODE_OF_CONDUCT.md).

‎app/helpers/link_helper.rb‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
module LinkHelper
2+
# helper wrapper around link_to that inserts visual and screen reader info
3+
# for navigation links
4+
def nav_link_to(name, url)
5+
link_to(name, url,
6+
class: link_class(url),
7+
'aria-current': aria_current?(url))
8+
end
9+
10+
private
11+
12+
# Includes css `current` class if current page
13+
def link_class(url)
14+
return 'nav-item' unless current_page?(url)
15+
'nav-item current'
16+
end
17+
18+
# Includes css `current` class if current page
19+
def aria_current?(url)
20+
return 'page' if current_page?(url)
21+
end
22+
end

‎app/views/layouts/_flash.html.erb‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<% if flash %>
2+
<% flash.each do |msg_type, message| %>
3+
<% next if msg_type == 'global' %>
4+
<div class="alert alert-banner <%= msg_type %>" role="alert">
5+
<%= sanitize(message) %>
6+
</div>
7+
<% end %>
8+
<% end %>

‎app/views/layouts/_global_alert.html.erb‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<% if ENV['GLOBAL_ALERT'] %>
2+
<div class="wrap-notices info layout-band">
3+
<div class="wrap-notice">
4+
<div class="alert alert-global">
5+
<h1 class="title"><%= sanitize(ENV['GLOBAL_ALERT']) %></h1>
6+
</div>
7+
</div>
8+
</div>
9+
<% end %>

‎app/views/layouts/_head.html.erb‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<meta charset="utf-8">
2+
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
3+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4+
<title><%= content_for?(:title) ? yield(:title) : " MIT Libraries" %></title>
5+
<%= csrf_meta_tags %>
6+
7+
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
8+
<!--[if lt IE 9]>
9+
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
10+
<![endif]-->
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
12+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic&subset=latin,latin-ext" type="text/css">
13+
<%= stylesheet_link_tag "application", :media => "all" %>
14+
15+
<!-- For all other devices -->
16+
<!-- Size should be 32 x 32 pixels -->
17+
<%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>
18+
19+
<%= render partial: "layouts/js_exception_handler" %>
20+
<%= javascript_include_tag "application" %>
21+
<% if (ENV['GOOGLE_ANALYTICS']) %>
22+
<script type="text/javascript">
23+
// Google Analytics
24+
25+
(function(i,s,o,g,r,a,m){
26+
i['GoogleAnalyticsObject']=r;
27+
i[r]=i[r]||function(){
28+
(i[r].q=i[r].q||[]).push(arguments)
29+
};
30+
i[r].l=1*new Date();
31+
a=s.createElement(o);
32+
m=s.getElementsByTagName(o)[0];
33+
a.async=1;
34+
a.src=g;
35+
m.parentNode.insertBefore(a,m);
36+
37+
}(window,document,'script','https://www.google-analytics.com/analytics.js','ga'));
38+
39+
ga('create', '<%= ENV['GOOGLE_ANALYTICS'] %>', 'auto');
40+
ga('send', 'pageview');
41+
42+
</script>
43+
<% end %>

‎app/views/layouts/_institute_footer.html.erb‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="wrap-outer-footer-institute layout-band">
2+
<div class="wrap-footer-institute">
3+
<div class="footer-info-institute">
4+
<a class="link-logo-mit" href="https://www.mit.edu" alt="Massachusetts Institute of Technology Logo">
5+
<span class="sr">MIT</span>
6+
<svg version="1.1" xmlns="https://www.w3.org/2000/svg" x="0" y="0" width="54" height="28" viewBox="0 0 54 28" enable-background="new 0 0 54 28" xml:space="preserve" class="logo-mit"><rect x="28.9" y="8.9" width="5.8" height="19.1" class="color"/><rect width="5.8" height="28"/><rect x="9.6" width="5.8" height="18.8"/><rect x="19.3" width="5.8" height="28"/><rect x="38.5" y="8.9" width="5.8" height="19.1"/><rect x="38.8" width="15.2" height="5.6"/><rect x="28.9" width="5.8" height="5.6"/></svg>
7+
</a>
8+
<div class="about-mit">
9+
<span class="item">Massachusetts Institute of Technology</span>
10+
<span class="item">77 Massachusetts Avenue</span>
11+
<span class="item">Cambridge MA 02139-4307</span>
12+
</div>
13+
<div class="license">Licensed under the <a href="https://creativecommons.org/licenses/by-nc/2.0/" class="license-cc">Creative Commons Attribution Non-Commercial License</a> unless otherwise noted. <a href="https://libraries.mit.edu/research-support/notices/copyright-notify/">Notify us about copyright concerns</a>.
14+
</div><!-- end .footer-info-institute -->
15+
</div>
16+
</div>
17+
</div>

‎app/views/layouts/_js_exception_handler.erb‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<% if ENV['JS_EXCEPTION_LOGGER_KEY'].present? %>
2+
<script src="https://cdn.ravenjs.com/3.25.2/raven.min.js" crossorigin="anonymous"></script>
3+
<script>Raven.config('<%= ENV['JS_EXCEPTION_LOGGER_KEY'] %>').install()</script>
4+
<% end %>

‎app/views/layouts/_site_footer.html.erb‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<div class="wrap-outer-footer layout-band">
2+
<div class="wrap-footer footer-slim">
3+
<div class="footer-main" aria-label="MIT Libraries footer">
4+
<div class="identity">
5+
<div class="wrap-logo-lib">
6+
<a href="https://libraries.mit.edu" class="logo-mit-lib" alt="MIT Libraries Logo">
7+
<span class="sr">MIT Libraries home</span>
8+
<%= image_tag("mitlib-wordmark.svg", :alt => "MIT Libraries logo") %>
9+
</a>
10+
</div>
11+
</div><!-- end .identity -->
12+
<div class="wrap-sitemap">
13+
<nav class="sitemap-libraries-abbrev" aria-label="MIT Libraries site menu">
14+
<h2 class="sr">MIT Libraries navigation</h2>
15+
<a class="item" href="https://libraries.mit.edu/">Home</a>
16+
<a class="item" href="https://libraries.mit.edu/search">Search</a>
17+
<a class="item" href="https://libraries.mit.edu/hours">Hours &amp; locations</a>
18+
<a class="item" href="https://libraries.mit.edu/borrow">Borrow &amp; request</a>
19+
<a class="item" href="https://libraries.mit.edu/research-support">Research support</a>
20+
<a class="item" href="https://libraries.mit.edu/about">About the Libraries</a>
21+
</nav>
22+
</div><!-- end .links-all -->
23+
</div>
24+
</div>
25+
</div>

‎app/views/layouts/_site_header.html.erb‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="wrap-outer-header layout-band <%= 'reasons' if params[:rainbows] %>">
2+
<div class="wrap-header">
3+
<header class="header-site header-slim" role="banner">
4+
<div class="wrap-header-core">
5+
<h1 class="name-site group nav-logo">
6+
<a href="https://libraries.mit.edu/" class="logo-mit-lib">
7+
<span class="sr">MIT Libraries home</span>
8+
<%= image_tag("mitlib-wordmark.svg", :alt => "MIT Libraries logo") %>
9+
</a>
10+
</h1>
11+
</div>
12+
<div class="wrap-header-supp">
13+
<a class="link-logo-mit" href="https://www.mit.edu"><span class="sr">MIT</span><svg x="0" y="0" width="54" height="28" viewBox="0 0 54 28" enable-background="new 0 0 54 28" xml:space="preserve" class="logo-mit"><rect x="28.9" y="8.9" width="5.8" height="19.1" class="color"/><rect width="5.8" height="28"/><rect x="9.6" width="5.8" height="18.8"/><rect x="19.3" width="5.8" height="28"/><rect x="38.5" y="8.9" width="5.8" height="19.1"/><rect x="38.8" width="15.2" height="5.6"/><rect x="28.9" width="5.8" height="5.6"/></svg></a>
14+
</div>
15+
</header>
16+
</div>
17+
</div>

‎app/views/layouts/_site_nav.html.erb‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div class="wrap-outer-header-local layout-band">
2+
<div class="wrap-header-local">
3+
<div class="local-identity">
4+
<h2 class="title title-site"><a href="/">Site Title</a></h2>
5+
</div>
6+
<div class="wrap-local-nav">
7+
<div class="wrap-bar">
8+
<nav class="local-nav" aria-label="Main menu">
9+
<%= nav_link_to("Home", root_path) %>
10+
11+
Psst. You may want to copy this file out of the gem and do your thing.
12+
</nav>
13+
</div>
14+
</div>
15+
</div>
16+
</div>

0 commit comments

Comments
 (0)