From 954e7e5a670db6087d8cb3f7f29d2e478718bc1d Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Mon, 14 Nov 2016 15:45:47 -0600 Subject: [PATCH 1/9] add subnav template --- Gemfile.lock | 4 +- _config.yml | 10 + _data/navbar.yml | 32 ---- _data/navigation.yml | 178 ++++++++++++++++++ pages/hire.md => _hire/index.md | 1 - _hire/partnership-playbook/getting-started.md | 16 ++ _hire/partnership-playbook/how-we-work.md | 25 +++ _hire/partnership-playbook/index.md | 17 ++ .../we-build-in-the-open.md | 29 +++ _hire/partnership-playbook/what-to-expect.md | 16 ++ .../partnership-playbook/who-we-work-with.md | 16 ++ _includes/header.html | 2 +- _includes/nav-mobile.html | 8 - _includes/navigation.html | 66 ++++--- _includes/navigation/drawer.html | 60 ++++++ .../footer-desktop.html} | 24 +-- .../footer-mobile.html} | 20 +- _includes/navigation/navbar.html | 16 ++ _includes/navigation/subnav.html | 60 ++++++ _layouts/default-image.html | 22 ++- _layouts/default-intro.html | 3 +- _layouts/default.html | 6 +- _plugins/README.md | 76 ++++++++ _plugins/utility.rb | 73 +++++++ _sass/_components/layout.scss | 4 + _sass/_components/nav-accordion.scss | 105 +++++++++++ _sass/_components/nav-mobile.scss | 60 +----- _sass/_components/nav-subnav.scss | 3 + _sass/_core/typography.scss | 15 ++ _sass/_core/variables.scss | 6 +- _sass/_templates/what-we-deliver.scss | 4 - assets/css/main.scss | 2 + circle.yml | 2 +- package.json | 4 +- pages/what-we-deliver.md | 1 + 35 files changed, 819 insertions(+), 167 deletions(-) delete mode 100644 _data/navbar.yml create mode 100644 _data/navigation.yml rename pages/hire.md => _hire/index.md (98%) create mode 100644 _hire/partnership-playbook/getting-started.md create mode 100644 _hire/partnership-playbook/how-we-work.md create mode 100644 _hire/partnership-playbook/index.md create mode 100644 _hire/partnership-playbook/we-build-in-the-open.md create mode 100644 _hire/partnership-playbook/what-to-expect.md create mode 100644 _hire/partnership-playbook/who-we-work-with.md delete mode 100644 _includes/nav-mobile.html create mode 100644 _includes/navigation/drawer.html rename _includes/{footer/desktop.html => navigation/footer-desktop.html} (79%) rename _includes/{footer/mobile.html => navigation/footer-mobile.html} (79%) create mode 100644 _includes/navigation/navbar.html create mode 100644 _includes/navigation/subnav.html create mode 100644 _plugins/utility.rb create mode 100644 _sass/_components/nav-accordion.scss create mode 100644 _sass/_components/nav-subnav.scss diff --git a/Gemfile.lock b/Gemfile.lock index c548d64d4..4ba66425f 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,6 +1,6 @@ GIT remote: https://github.com/18F/jekyll-archives.git - revision: 53cef8a1a1c515d23ef9499d6affb77d13e70f54 + revision: 9ad78a4aa38de0af570a53f3c12558408e9537f7 specs: jekyll-archives (2.1.0) jekyll (>= 2.4) @@ -133,4 +133,4 @@ RUBY VERSION ruby 2.3.1p112 BUNDLED WITH - 1.13.5 + 1.13.6 diff --git a/_config.yml b/_config.yml index 58b1d1473..600a3bec9 100644 --- a/_config.yml +++ b/_config.yml @@ -42,6 +42,9 @@ collections: projects: output: true permalink: /project/:path/ + hire: + output: true + permalink: /hire/:path/ defaults: - @@ -64,6 +67,13 @@ defaults: path: "_cards" values: layout: default + - + scope: + path: "_hire" + values: + layout: default-image + include_subnav: true + subnav_anchor: /hire/ frontmatter_tests: path: "tests/schema" diff --git a/_data/navbar.yml b/_data/navbar.yml deleted file mode 100644 index e54edec41..000000000 --- a/_data/navbar.yml +++ /dev/null @@ -1,32 +0,0 @@ -assigned: - - - text: Home - href: pages/home.md - permalink: / - show_in_menu: false - show_in_footer: false - - - text: About - href: pages/about.md - permalink: /about/ - show_in_menu: false - show_in_footer: false - children: - - - text: Work - href: pages/projects.md - permalink: /projects/ - show_in_menu: true - show_in_footer: false - children: - - - text: 'Dashboard' - href: /dashboard/ - show_in_menu: false - show_in_footer: false - - - text: 'Project data' - href: _data/projects.yml - show_in_menu: false - show_in_footer: false -unassigned: [] diff --git a/_data/navigation.yml b/_data/navigation.yml new file mode 100644 index 000000000..5560f5179 --- /dev/null +++ b/_data/navigation.yml @@ -0,0 +1,178 @@ +assigned: + - + text: Home + href: pages/home.md + permalink: / + in_menu: false + in_drawer: false + in_footer: false + - + text: What we deliver + href: pages/what-we-deliver.md + permalink: /what-we-deliver/ + in_menu: true + in_drawer: true + in_footer: true + children: + - + text: How we work + href: pages/how-we-work.md + permalink: /how-we-work/ + in_menu: true + in_drawer: true + in_footer: false + children: + - + text: Hire 18F + href: pages/hire.md + permalink: /hire/ + in_menu: true + in_drawer: true + in_footer: true + children: + - + text: 'Partnership playbook' + permalink: /hire/partnership-playbook/ + in_menu: false + in_drawer: true + in_footer: false + in_subnav: true + children: + - + text: '1. We build in the open' + permalink: /hire/partnership-playbook/we-build-in-the-open/ + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + - + text: '2. How we work' + permalink: /hire/partnership-playbook/how-we-work/ + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + - + text: '3. Who we work with' + permalink: /hire/partnership-playbook/who-we-work-with/ + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + - + text: '4. Getting started' + permalink: /hire/partnership-playbook/getting-started/ + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + - + text: '5. What to expect' + permalink: /hire/partnership-playbook/what-to-expect/ + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + - + text: Join 18F + href: pages/join.md + permalink: /join/ + in_menu: true + in_drawer: true + in_footer: true + children: + - + text: 'So you want to join 18F?' + permalink: /join/so-you-want-to-join-18f/ + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: 'Who we are hiring' + permalink: /join/hiring/ + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: 'Who we are hiring' + permalink: /join/hiring/ + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: 'How to apply' + permalink: /join/how-to-apply/ + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: 'Interview process' + permalink: /join/interview-process/ + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + children: + - + text: 'Child 1' + permalink: /join/interview-process/child-1/ + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: 'Child 2' + permalink: /join/interview-process/child-2/ + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: 'Child 2' + permalink: /join/interview-process/child-2/ + in_menu: false + in_drawer: false + in_footer: false + in_subnav: false + - + text: Benefits + permalink: /join/benefits/ + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + - + text: 'Government pay grades explained' + permalink: /join/government-pay-grades-explained/ + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + - + text: 'Leave policies' + permalink: /join/leave-policies/ + in_menu: false + in_drawer: false + in_footer: false + in_subnav: true + - + text: Blog + href: blog/index.html + permalink: /blog/ + in_menu: true + in_drawer: true + in_footer: true + children: + - + text: Projects + href: _data/projects.yml + permalink: /project/ + in_menu: false + in_drawer: false + in_footer: false + children: +unassigned: [] diff --git a/pages/hire.md b/_hire/index.md similarity index 98% rename from pages/hire.md rename to _hire/index.md index d6b4cbf63..d7c0f4aca 100644 --- a/pages/hire.md +++ b/_hire/index.md @@ -1,7 +1,6 @@ --- title: Hire 18F permalink: /hire/ -layout: default-image image: /assets/img/page-feature/hire-us.jpg lead: Let’s work together to design services that empower your team, better serve the public, and tackle the big problems facing your agency. --- diff --git a/_hire/partnership-playbook/getting-started.md b/_hire/partnership-playbook/getting-started.md new file mode 100644 index 000000000..c95d6bedf --- /dev/null +++ b/_hire/partnership-playbook/getting-started.md @@ -0,0 +1,16 @@ +--- +permalink: /hire/partnership-playbook/getting-started/ +title: 4. Getting started +--- + +18F ipsum dolor amet user-centered design agency partners test driven development. Agency within government TTS best practices API lean startup model procurement cost-recoverable. Government TTS user-centered design distributed model slack GIF. Cupim GIF government user-centered open transparency 18F. + +Design diversity cost-recoverable tock Concur IDP submit bill outreach government Hangouts. Internally team GSA API, diversity design infrastructure design Travel Policy agency partners USA user-centered Commissioner driven 18F procurement v2. Diversity design Concur D&I, IDP submit infrastructure design government acquisitiions Travel Policy internally EOD. Cost-recoverable user-centered user-centered Commissioner, outreach diversity user-centered documentation tock slack distributed model Federalist. Travel Policy agency API service engagement cost-recoverable GSA API. Agency partners user-centered design slack IDP submit cloud.gov 18F GIF, outreach deprecate engagement GOC All Hands PIF Concur. Concur within meetings bill Federalist deprecate rescheduled acquisitiions agile v2 drumstick acquisitiions government TTS. + +Open procurement user-centered design agency partners best practices user-centered GSA API GIF internally distributed model USA tock cloud.gov government TTS. Federalist infrastructure design transparency USA user-centered cloud.gov analytics agency All Hands PIF outreach. Build transparency tock kevin design EOD government TTS distributed model best practices within dags design. Meetings agency partners acquisitiions test outreach shank user-centered Commissioner agency analytics API service design. Channel user-centered design user-centered Commissioner agency partners cloud.gov lean startup model GSA API. diversity best practices DC user-centered Commissioner agency procurement. + +Team agile slack diversity Travel Policy. Doner agency partners acquisitiions design API service. Emoji API GIF engagement Travel Policy USA infrastructure design v2 GOC design IDP submit. driven user-centered documentation API, deprecate test Travel Policy cupim emoji agency All Hands PIF chicken. Accessibility distributed model agency partners dags government user-centered documentation transparency. + +Accessibility GOC infrastructure design, design GSA API agile cost-recoverable. Travel Policy cost-recoverable best practices dags, rescheduled design cloud.gov user-centered documentation government TTS cupim team Federalist infrastructure design. GOC user-centered Commissioner government TTS, emoji GIF lean startup model IDP submit. Chicken tock diversity acquisitiions rescheduled, https Federalist. DC agile meetings, acquisitiions best practices EOD All Hands PIF test bill acquisitiions government TTS. + +Does your lorem ipsum text long for something a little more open? Give our generator a try… it’s accessible! diff --git a/_hire/partnership-playbook/how-we-work.md b/_hire/partnership-playbook/how-we-work.md new file mode 100644 index 000000000..2495ca43e --- /dev/null +++ b/_hire/partnership-playbook/how-we-work.md @@ -0,0 +1,25 @@ +--- +permalink: /hire/partnership-playbook/how-we-work/ +title: 2. How we work +--- + +It’s important for us to build digital services that solve the needs of users and are enjoyable to use. By the time you’re designing a solution, you should have a solid understanding of the users you’re building for and the problems you’re trying to solve. Though the needs of agency stakeholders are important, the satisfaction of citizens or other end-users are the primary way we measure success. + +You can see more information about the methods our design team uses at [this site](https://methods.18f.gov/) and read more on our blog about [user interview best practices](https://18f.gsa.gov/2016/02/09/tips-for-capturing-the-best-data-from-user-interviews/). + +*Tip: In user-centered design, we conduct interviews with users to understand their needs and how they experience the status quo. Your agency can start by speaking with call center or customer service representatives to sketch out personas — or composite representative descriptions — of types of customers and what their needs and behaviors are.* + +###What does this mean for you? +Together, we will prioritize your users and their problems. Most agencies serve several different user groups. Who are your most important users, and what problems are you solving for them? + +[User stories](https://en.wikipedia.org/wiki/User_story) are the primary way of expressing software functionality without specifying how it's technically implemented. As the agency representative, your product owner will write and prioritize user stories with input and research from the team. Each sprint, the team chooses the top priority user stories, then builds functionality and tests it with actual users to measure whether the feature meets its intended outcome. + +Our joint product team will understand if we’re building the right thing by continuously getting our work in front of users (ideally, every few weeks or sprint). We will rely on your agency to recruit users for us to speak with. For a medium-sized project, we will likely want about six new users every two to four weeks. + +###How do you know if you’re ready to work in a user-driven way? + +>- Do you have a first draft of who you think the main users are? Have you created [personas](https://en.wikipedia.org/wiki/Persona_%28user_experience%29)? +- When is the last time you spoke to your users? Family and friends don’t count. +- Which users are the priority? (They all can’t be the priority.) +- Can you recruit three users for us to speak with before our first workshop? +- Will you allow the project solution to change as you learn from users? diff --git a/_hire/partnership-playbook/index.md b/_hire/partnership-playbook/index.md new file mode 100644 index 000000000..cfc95c373 --- /dev/null +++ b/_hire/partnership-playbook/index.md @@ -0,0 +1,17 @@ +--- +title: Partnership Playbook +permalink: /hire/partnership-playbook/ +lead: Let’s work together to design services that empower your team, better serve the public, and tackle the big problems facing your agency. +--- + +This guide will help you, as an agency, understand what it’s like to work with the 18F team. You'll learn what to expect and get a sense of the challenges you may face when working with a digital service team, which will likely be a significantly different experience than working with a contractor. Many of the principles below build on specific plays in the [U.S. Digital Services Playbook](https://playbook.cio.gov), which some 18F staffers assisted in authoring. + +The principles we use in working together are: + +>1. [We build in the open.]({{ site.baseurl }}/hire/partnership-playbook/we-build-in-the-open/) +2. [How we work.]({{ site.baseurl }}/hire/partnership-playbook/how-we-work/) +3. [Who we work with.]({{ site.baseurl }}/hire/partnership-playbook/who-we-work-with/) +4. [Getting started.]({{ site.baseurl }}/hire/partnership-playbook/getting-started/) +5. [What to expect.]({{ site.baseurl }}/hire/partnership-playbook/what-to-expect/) + +We’ll explain what each principle will mean to you as our partner. We also provide a set of prompting questions in the “How do you know if you’re ready” sections, which you can use with stakeholders to assess potential conflict points that may need to be resolved before we partner. diff --git a/_hire/partnership-playbook/we-build-in-the-open.md b/_hire/partnership-playbook/we-build-in-the-open.md new file mode 100644 index 000000000..af422b437 --- /dev/null +++ b/_hire/partnership-playbook/we-build-in-the-open.md @@ -0,0 +1,29 @@ +--- +permalink: /hire/partnership-playbook/we-build-in-the-open/ +title: 1. We build in the open +--- + +18F works in the open [from day one]({{ site.baseurl }}/2014/07/31/working-in-public-from-day-1/) of a project, and our resulting code is dedicated fully to the public domain. In addition, any contracts 18F enters into where others will develop software on 18F's behalf ensure that all results are dedicated to the public domain. For our international colleagues, 18F also permanently waives all copyright and related rights worldwide to code created by 18F or its contractors. + +We operate in this way for three reasons: + +1. **Operating in the open streamlines communication.** GitHub issues can be used without concern about access permissions and account creation. Access to the project is available regardless of VPN or location, without additional verification requirements. [Open source](https://github.com/18F/open-source-policy/blob/master/policy.md) repositories are an easy and accessible location to find source code when pulling in additional experts to check out a problem. +2. **Transparency builds trust with the public**, since everyone’s work is accessible to others. Transparency also builds trust within the government, since we can freely pull and cite methods and ideas from existing projects without worrying about possibly revealing something inappropriate. +3. **Working in the open helps to encourage good documentation and coding practices.** Everyone is aware of and following processes for open information from day one. There is no just-before-launch, last-minute review of everything. All code and documentation is reviewed as it’s developed. + +###What does this mean for you? +Your tools will be developed in public view. While our open source policy explicitly covers software, 18F also publishes much of its designs, product discussions, and other artifacts in the open as a matter of policy, principle, and working preference. This fosters a working environment that is more conducive to outside feedback and contributions, and increases operational awareness of the work across our project teams and those of our partners. In one example, we and a partner office at EPA successfully opened a project's [internal task management tool to public view]({{ site.baseurl }}/2015/12/07/what-exactly-do-we-even-do-all-day/). + +The public will be able to examine the code, point out issues, and suggest edits (all edits must be accepted by authorized personnel on the 18F or partner agency team). While they aren’t guaranteed, we celebrate public contributions to our code. Interest groups may take note of the developing project once it is publicized. + +Additionally, we will write about the work (or the process used to create the work) in public blog posts, case studies, or other means (social media, etc). Communicating openly is a critical process that we've put in place to stop the government from repeating the same mistakes. Not sharing solutions and best practices — both between different teams inside the government and between the government and private sector — has led to financial waste and damage to the public. We need the ability to communicate solutions as fast as we find them, and the most effective way to do that is to work in the open. + + +###How do you know if you’re ready to work in the open? +As you consider working with 18F, reflect on the following questions with your stakeholders. You may not be able to answer "yes" to each one, but they can help serve as indicators of potential conflict points that may need to be resolved before we partner. If any of these look like red flags to you, please raise them right away with your 18F point of contact and we'll work together to address them. + +>- Are you already working in the open or using open source products? +- Have you and your IT department discussed developing your project with open source? +- Has your agency developed other projects using open source code? +- Have you taken a look at 18F’s GitHub repositories to become familiar with how open source projects look? ([Example 1](https://github.com/18F/openFEC), [Example 2](https://github.com/18F/federalist), [Example 3](https://github.com/18F/calc)) +- Have you talked to your communications team about how you plan to announce and promote the project? diff --git a/_hire/partnership-playbook/what-to-expect.md b/_hire/partnership-playbook/what-to-expect.md new file mode 100644 index 000000000..1a9ef8543 --- /dev/null +++ b/_hire/partnership-playbook/what-to-expect.md @@ -0,0 +1,16 @@ +--- +permalink: /hire/partnership-playbook/what-to-expect/ +title: 5. What to expect +--- + +18F ipsum dolor amet user-centered design agency partners test driven development. Agency within government TTS best practices API lean startup model procurement cost-recoverable. Government TTS user-centered design distributed model slack GIF. Cupim GIF government user-centered open transparency 18F. + +Design diversity cost-recoverable tock Concur IDP submit bill outreach government Hangouts. Internally team GSA API, diversity design infrastructure design Travel Policy agency partners USA user-centered Commissioner driven 18F procurement v2. Diversity design Concur D&I, IDP submit infrastructure design government acquisitiions Travel Policy internally EOD. Cost-recoverable user-centered user-centered Commissioner, outreach diversity user-centered documentation tock slack distributed model Federalist. Travel Policy agency API service engagement cost-recoverable GSA API. Agency partners user-centered design slack IDP submit cloud.gov 18F GIF, outreach deprecate engagement GOC All Hands PIF Concur. Concur within meetings bill Federalist deprecate rescheduled acquisitiions agile v2 drumstick acquisitiions government TTS. + +Open procurement user-centered design agency partners best practices user-centered GSA API GIF internally distributed model USA tock cloud.gov government TTS. Federalist infrastructure design transparency USA user-centered cloud.gov analytics agency All Hands PIF outreach. Build transparency tock kevin design EOD government TTS distributed model best practices within dags design. Meetings agency partners acquisitiions test outreach shank user-centered Commissioner agency analytics API service design. Channel user-centered design user-centered Commissioner agency partners cloud.gov lean startup model GSA API. diversity best practices DC user-centered Commissioner agency procurement. + +Team agile slack diversity Travel Policy. Doner agency partners acquisitiions design API service. Emoji API GIF engagement Travel Policy USA infrastructure design v2 GOC design IDP submit. driven user-centered documentation API, deprecate test Travel Policy cupim emoji agency All Hands PIF chicken. Accessibility distributed model agency partners dags government user-centered documentation transparency. + +Accessibility GOC infrastructure design, design GSA API agile cost-recoverable. Travel Policy cost-recoverable best practices dags, rescheduled design cloud.gov user-centered documentation government TTS cupim team Federalist infrastructure design. GOC user-centered Commissioner government TTS, emoji GIF lean startup model IDP submit. Chicken tock diversity acquisitiions rescheduled, https Federalist. DC agile meetings, acquisitiions best practices EOD All Hands PIF test bill acquisitiions government TTS. + +Does your lorem ipsum text long for something a little more open? Give our generator a try… it’s accessible! diff --git a/_hire/partnership-playbook/who-we-work-with.md b/_hire/partnership-playbook/who-we-work-with.md new file mode 100644 index 000000000..b600014b0 --- /dev/null +++ b/_hire/partnership-playbook/who-we-work-with.md @@ -0,0 +1,16 @@ +--- +permalink: /hire/partnership-playbook/who-we-work-with/ +title: 3. Who we work with +--- + +18F ipsum dolor amet user-centered design agency partners test driven development. Agency within government TTS best practices API lean startup model procurement cost-recoverable. Government TTS user-centered design distributed model slack GIF. Cupim GIF government user-centered open transparency 18F. + +Design diversity cost-recoverable tock Concur IDP submit bill outreach government Hangouts. Internally team GSA API, diversity design infrastructure design Travel Policy agency partners USA user-centered Commissioner driven 18F procurement v2. Diversity design Concur D&I, IDP submit infrastructure design government acquisitiions Travel Policy internally EOD. Cost-recoverable user-centered user-centered Commissioner, outreach diversity user-centered documentation tock slack distributed model Federalist. Travel Policy agency API service engagement cost-recoverable GSA API. Agency partners user-centered design slack IDP submit cloud.gov 18F GIF, outreach deprecate engagement GOC All Hands PIF Concur. Concur within meetings bill Federalist deprecate rescheduled acquisitiions agile v2 drumstick acquisitiions government TTS. + +Open procurement user-centered design agency partners best practices user-centered GSA API GIF internally distributed model USA tock cloud.gov government TTS. Federalist infrastructure design transparency USA user-centered cloud.gov analytics agency All Hands PIF outreach. Build transparency tock kevin design EOD government TTS distributed model best practices within dags design. Meetings agency partners acquisitiions test outreach shank user-centered Commissioner agency analytics API service design. Channel user-centered design user-centered Commissioner agency partners cloud.gov lean startup model GSA API. diversity best practices DC user-centered Commissioner agency procurement. + +Team agile slack diversity Travel Policy. Doner agency partners acquisitiions design API service. Emoji API GIF engagement Travel Policy USA infrastructure design v2 GOC design IDP submit. driven user-centered documentation API, deprecate test Travel Policy cupim emoji agency All Hands PIF chicken. Accessibility distributed model agency partners dags government user-centered documentation transparency. + +Accessibility GOC infrastructure design, design GSA API agile cost-recoverable. Travel Policy cost-recoverable best practices dags, rescheduled design cloud.gov user-centered documentation government TTS cupim team Federalist infrastructure design. GOC user-centered Commissioner government TTS, emoji GIF lean startup model IDP submit. Chicken tock diversity acquisitiions rescheduled, https Federalist. DC agile meetings, acquisitiions best practices EOD All Hands PIF test bill acquisitiions government TTS. + +Does your lorem ipsum text long for something a little more open? Give our generator a try… it’s accessible! diff --git a/_includes/header.html b/_includes/header.html index aeef29567..b9d96ce2c 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -18,7 +18,7 @@

Eighteen F: Digital services delivery

{% endif %} diff --git a/_includes/nav-mobile.html b/_includes/nav-mobile.html deleted file mode 100644 index 73b8d07ab..000000000 --- a/_includes/nav-mobile.html +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/_includes/navigation.html b/_includes/navigation.html index 07673a3f9..026541bf3 100644 --- a/_includes/navigation.html +++ b/_includes/navigation.html @@ -1,29 +1,41 @@ {% assign current = page.url | downcase | split: '/' %} - +{% assign nav_items = site.data.navigation %} +{% assign nav_items = nav_items['assigned'] %} + +{% if include.navbar %} + {% include navigation/navbar.html nav_items=nav_items %} +{% endif %} + +{% if include.drawer %} + {% + include navigation/drawer.html + children=true + nav_items=nav_items + %} +{% endif %} + + +{% if include.subnav %} + {% assign subnav_page_url = include.subnav_anchor | default: page.url %} + {% assign page_data = subnav_page_url | find_page: nav_items %} + + {% include navigation/subnav.html + page_data=page_data + children=true + %} +{% endif %} + +{% if include.footer %} + {% + include navigation/footer-mobile.html + children=false + nav_items=nav_items + %} + + {% + include navigation/footer-desktop.html + children=false + nav_items=nav_items + %} +{% endif %} diff --git a/_includes/navigation/drawer.html b/_includes/navigation/drawer.html new file mode 100644 index 000000000..3195fc8d3 --- /dev/null +++ b/_includes/navigation/drawer.html @@ -0,0 +1,60 @@ + diff --git a/_includes/footer/desktop.html b/_includes/navigation/footer-desktop.html similarity index 79% rename from _includes/footer/desktop.html rename to _includes/navigation/footer-desktop.html index 549b0e2ff..b6421f49e 100644 --- a/_includes/footer/desktop.html +++ b/_includes/navigation/footer-desktop.html @@ -9,18 +9,18 @@
diff --git a/_includes/footer/mobile.html b/_includes/navigation/footer-mobile.html similarity index 79% rename from _includes/footer/mobile.html rename to _includes/navigation/footer-mobile.html index d53bdae56..93994e3c2 100644 --- a/_includes/footer/mobile.html +++ b/_includes/navigation/footer-mobile.html @@ -5,18 +5,18 @@ Site menu
  • diff --git a/_includes/navigation/navbar.html b/_includes/navigation/navbar.html new file mode 100644 index 000000000..459cdf7e8 --- /dev/null +++ b/_includes/navigation/navbar.html @@ -0,0 +1,16 @@ +
      +{% for item in include.nav_items %} + {% if item.in_menu %} +
    • + {% if item.permalink %} + {% assign item_link = item.permalink | prepend: site.baseurl %} + {% else %} + {% assign item_link = item.text | dasherize | hash_link | prepend: site.baseurl %} + {% endif %} + {% assign is_matching = page.url | matches_url_parent: item.permalink %} + + {{ item.text }} +
      • + {% endif %} +{% endfor %} +
    diff --git a/_includes/navigation/subnav.html b/_includes/navigation/subnav.html new file mode 100644 index 000000000..7b683a56e --- /dev/null +++ b/_includes/navigation/subnav.html @@ -0,0 +1,60 @@ +{% assign nav_items = include.page_data.children %} + + diff --git a/_layouts/default-image.html b/_layouts/default-image.html index 7ef5479c5..5d80bcaf6 100644 --- a/_layouts/default-image.html +++ b/_layouts/default-image.html @@ -3,11 +3,23 @@ --- {% include feature-image.html %} - -
    +

    {{ page.title }}

    - {% if page.lead %} -

    {{ page.lead }}

    + + {% if page.include_subnav %} + +
    + {% if page.lead %} +

    {{ page.lead }}

    + {% endif %} + {{ content }} +
    + {% else %} + {% if page.lead %} +

    {{ page.lead }}

    + {% endif %} + {{ content }} {% endif %} - {{ content }}
    diff --git a/_layouts/default-intro.html b/_layouts/default-intro.html index 7ab96d5b2..475814155 100644 --- a/_layouts/default-intro.html +++ b/_layouts/default-intro.html @@ -1,7 +1,6 @@ --- layout: default --- -
    @@ -14,6 +13,6 @@

    {{ page.title }}

    -
    +
    {{ content }}
    diff --git a/_layouts/default.html b/_layouts/default.html index 03a752658..63b854a7c 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -13,12 +13,12 @@ {{ content }}
    • - {% include nav-mobile.html %} + {% include navigation.html drawer=true %} diff --git a/_plugins/README.md b/_plugins/README.md index 8ec82f5b4..da348d5ab 100644 --- a/_plugins/README.md +++ b/_plugins/README.md @@ -86,6 +86,82 @@ Example: Will look for all the posts on the entire site and return a list of posts that have any tag that matches the list of `tags` defined in a given project's frontmatter +#### hash_link: returns a hashed version of a given link. Lives in [utility.md](utility.md). + +Example: +```bash +{{ 'how-we-work' | has_link }} +> #how-we-work +``` + +#### dasherize: returns a dash-delimited version of the same string. Lives in [utility.md](utility.md). + +Example: +```bash +{{ 'how we work' | dasherize }} +> how we work + +{{ 'how we work' | dasherize | hash_link }} +> #how we work +``` + +#### matches_url: determines if the current page url (`page_url`) exactly matches a given `url`. Lives in [utility.md](utility.md). + +Example: +```bash +{{ '/hire/partnership-playbook/' | matches_url: '/hire/' }} +> nil + +{{ '/hire/partnership-playbook/' | matches_url: '/hire/partnership-playbook/' }} +> true +``` + +#### matches_url_parent: determines if the current page url (`page_url`) is a path decendent of a given `url`. Lives in [utility.md](utility.md). + +Example: +```bash +{{ '/hire/' | matches_url_parent: '/hire/partnership-playbook/' }} +> true + +{{ '/hire/partnership-playbook/' | matches_url_parent: '/hire/partnership-playbook/' }} +> true + +{{ '/hire/partnership-playbook/' | matches_url: '/hire/' }} +> nil + +{{ '/join/' | matches_url_parent: '/hire/partnership-playbook/' }} +> nil +``` + +#### find_page: looks at the list of navigation fields in [navigation.yml](navigation.yml) and find the object that corresponds with a given url. Lives in [utility.md](utility.md). + +It takes two arguments, `page_url` and `nav_items`, where `nav_items` is either the entire navigation.yml data file, or a subset of it. + +Returns a nested set of navigation originating at the object corresponding to the defined `page_url` + +Example: +```bash +{{ '/how-we-work/' | find_page: nav_items }} +> { + text: How we work + href: pages/how-we-work.md + permalink: /how-we-work/ + in_menu: true + in_drawer: true + in_footer: false + children: nil +} +``` + + +#### check_type: debugging tool to pull up a erb shell at a given point in the liquid markup + +Example: +```bash +{{ variable | check_type }} + +``` + ### Markdown rendering #### [markdown.rb](markdown.rb) diff --git a/_plugins/utility.rb b/_plugins/utility.rb new file mode 100644 index 000000000..d0c309d0a --- /dev/null +++ b/_plugins/utility.rb @@ -0,0 +1,73 @@ +require 'pry' +require 'rb-readline' + +module Jekyll + module Utility + def clip_char(str, char = '-') + str = str.to_s + str = if str[0] == char + str[1...str.length] + else + str + end + if str[-1] == char + str[0...-1] + else + str + end + end + + def hash_link(text) + "##{text}" + end + + def dasherize(text) + text = text.to_s + text = text.downcase.gsub(/[^a-z\0-9\s]/, '').gsub(/\W+/, '-') + clip_char(text) + end + + def matches_url(page_url, url) + page_url = clip_char(page_url.to_s.downcase, '/') + url = clip_char(url.to_s.downcase, '/') + page_url == url || nil + end + + def matches_url_parent(page_url, url) + page_url = clip_char(page_url.to_s.downcase, '/') + url = clip_char(url.to_s.downcase, '/') + page_url[0...url.length] == url || nil + end + + def crawl_pages(item, page_url, _debug) + if matches_url(page_url, item['permalink']) + # puts "found #{item['text'].inspect}" + @match = item + # puts "setting @match to #{@match['text'].inspect} for #{_debug.inspect}" + elsif item['children'] + # puts "skipping #{item['text'].inspect}" + item['children'].each do |child| + # puts "recurse for #{child['text'].inspect}" + crawl_pages(child, page_url, child['text']) + end + end + end + + def find_page(page_url, nav_items) + nav_items.each do |item| + break if @match + crawl_pages(item, page_url, item['text']) + end + @match + end + + def check_type(value) + type = value.class + # puts '---------------------' + # puts "#{value} is a #{type}" + # puts '---------------------' + # binding.pry + end + end +end +Liquid::Template.register_filter(Jekyll::Utility) diff --git a/_sass/_components/layout.scss b/_sass/_components/layout.scss index 0771a52c8..e2af73583 100644 --- a/_sass/_components/layout.scss +++ b/_sass/_components/layout.scss @@ -162,6 +162,10 @@ } } +.content-focus.content-wide { + max-width: $site-max-width; +} + .usa-content { ol, ul { diff --git a/_sass/_components/nav-accordion.scss b/_sass/_components/nav-accordion.scss new file mode 100644 index 000000000..6d578cbe0 --- /dev/null +++ b/_sass/_components/nav-accordion.scss @@ -0,0 +1,105 @@ +// Nav accordion +.nav-accordion { + .usa-sidenav-list { + + ul { + list-style-type: none; + margin: 0; + padding: 0; + } + + li { + border-top-color: $color-gray-lighter; + } + + button { + background-color: transparent; + background-position: right 0 center; + border-radius: 0; + text-align: left; + + &[aria-expanded=true], + &[aria-expanded=false] { + background-repeat: no-repeat; + background-position: right 0 center; + background-size: 1rem; + } + + &[aria-expanded=true] { + background-image: url('../img/global/minus-alt.png'); + background-image: url('../img/global/minus-alt.svg'); + } + + &[aria-expanded=false] { + background-image: url('../img/global/plus-alt.png'); + background-image: url('../img/global/plus-alt.svg'); + } + + &:hover, + &:focus { + background-color: $color-gray-lightest; + } + } + + a, + li > button { + @include padding(1rem null 1rem 3rem); + color: $color-gray; + font-weight: $font-bold; + font-size: $h5-font-size; + + &:hover { + color: $color-dark; + } + + &.usa-current { + border-left: $border-accent; + color: $color-dark; + padding-left: 2rem; + } + } + } + + .usa-sidenav-sub_list { + a { + padding-left: 3.8rem; + + &.usa-current { + border-left: 0; + color: $color-primary; + font-weight: $font-bold; + padding-left: 3.8rem; + } + } + } +} + +.sliding-panel-close { + @include button-unstyled; + float: right; + height: $hit-area; + margin-left: -1.2rem; + margin-top: -1.5rem; + margin-right: 2.4rem; + margin-bottom: auto; + text-align: center; + width: $hit-area; + + img { + width: 1.3rem; + } +} + +.overlay { + @include position(fixed, 0); + background: $color-black; + opacity: 0; + transition: all 0.2s ease-in-out; + visibility: hidden; + z-index: 9999; + + &.is-visible { + opacity: 0.1; + visibility: visible; + } +} diff --git a/_sass/_components/nav-mobile.scss b/_sass/_components/nav-mobile.scss index 11ce908e5..73780b452 100644 --- a/_sass/_components/nav-mobile.scss +++ b/_sass/_components/nav-mobile.scss @@ -15,68 +15,16 @@ -webkit-overflow-scrolling: touch; z-index: 999999; - @include media($medium-screen + $nav-width-extra) { - display: none; - } - - &.is-visible { - @include transform(translateX(0)); - @include transition(all 0.3s ease-in-out); - } - .usa-sidenav-list { margin-top: 6rem; - - ul { - @include unstyled-list; - } - - li { - border-top-color: $color-gray-lighter; - } - - a { - @include padding(1rem null 1rem 3rem); - color: $color-gray; - font-weight: $font-bold; - font-size: $h5-font-size; - - &:hover { - color: $color-dark; - } - - &.usa-current { - border-left: $border-accent; - color: $color-dark; - padding-left: 2rem; - } - } } -} - -.sliding-panel-close { - @include button-unstyled; - float: right; - height: $hit-area; - margin: -1.2rem -1.5rem 2.4rem auto; - text-align: center; - width: $hit-area; - img { - width: 1.3rem; + @include media($medium-screen + $nav-width-extra) { + display: none; } -} - -.overlay { - @include position(fixed, 0); - background: $color-black; - opacity: 0; - transition: all 0.2s ease-in-out; - visibility: hidden; - z-index: 9999; &.is-visible { - opacity: 0.1; - visibility: visible; + @include transform(translateX(0)); + @include transition(all 0.3s ease-in-out); } } diff --git a/_sass/_components/nav-subnav.scss b/_sass/_components/nav-subnav.scss new file mode 100644 index 000000000..42155b036 --- /dev/null +++ b/_sass/_components/nav-subnav.scss @@ -0,0 +1,3 @@ +.nav-subnav { + margin-bottom: $site-margins; +} diff --git a/_sass/_core/typography.scss b/_sass/_core/typography.scss index 260134cd8..36dd1bf27 100644 --- a/_sass/_core/typography.scss +++ b/_sass/_core/typography.scss @@ -6,6 +6,21 @@ body { font-size: $base-font-size; } +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, section { + -webkit-font-smoothing: antialiased; +} + + h1, h2, h3, diff --git a/_sass/_core/variables.scss b/_sass/_core/variables.scss index 85f2e6aad..778872a88 100644 --- a/_sass/_core/variables.scss +++ b/_sass/_core/variables.scss @@ -5,10 +5,12 @@ $h3-font-size: 2.4rem; $h5-font-size: 1.4rem; $h6-font-size: 1.2rem; -$base-font-size: 1.8rem; +$base-font-size: 1.8rem; $tiny-font-size: 1.2rem; +$icon-small: 1rem; + $font-sans: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; $font-monospace: Consolas, Monaco, "Andale Mono", monospace; @@ -27,7 +29,7 @@ $color-gray-lightest: #f1f1f1; // Adding bc used in our $border-light in this fi // Spacing $section-margins: 5rem; -$paragraph-margins: 1.5rem; +$paragraph-margins: 1.5rem; $nav-width-extra: 88px; // width needed to add so nav doesn't break on medium-screen size $text-max-width: 60.6rem; diff --git a/_sass/_templates/what-we-deliver.scss b/_sass/_templates/what-we-deliver.scss index 00a232a99..9d6e29a67 100644 --- a/_sass/_templates/what-we-deliver.scss +++ b/_sass/_templates/what-we-deliver.scss @@ -25,10 +25,6 @@ } } - .content-focus { - max-width: $site-max-width; - } - .section-list { &:first-child { padding-top: 0; diff --git a/assets/css/main.scss b/assets/css/main.scss index 7168d08a1..984455cac 100755 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -30,6 +30,8 @@ @import "_components/layout"; @import "_components/post-feature"; @import "_components/nav-mobile"; +@import "_components/nav-accordion"; +@import "_components/nav-subnav"; @import "_components/tag-index"; @import "_components/blog-post"; @import "_components/blog-index"; diff --git a/circle.yml b/circle.yml index c96857563..56355e87f 100644 --- a/circle.yml +++ b/circle.yml @@ -18,6 +18,6 @@ dependencies: test: pre: - bundle exec jekyll test - - bundle exec htmlproofer _site --disable-external --allow-hash-href --empty-alt-ignore --url-ignore 18f@gsa.gov + - npm run htmlproofer # uncomment to restore pa11y-ci # - npm run --harmony lint-508 diff --git a/package.json b/package.json index 7c451c0a8..9dd845830 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,9 @@ }, "scripts": { "test": "bundle exec jekyll test", - "lint-508": "bash ./accessibility-scan" + "lint-508": "bash ./accessibility-scan", + "htmlproofer-local": "bundle exec htmlproofer _site --disable-external --allow-hash-href --empty-alt-ignore --url-ignore localhost:4000", + "htmlproofer": "bundle exec htmlproofer _site --disable-external --allow-hash-href --empty-alt-ignore --url-ignore 18f@gsa.gov" }, "repository": { "type": "git", diff --git a/pages/what-we-deliver.md b/pages/what-we-deliver.md index 42fa8e5ad..d7cef322c 100644 --- a/pages/what-we-deliver.md +++ b/pages/what-we-deliver.md @@ -3,6 +3,7 @@ title: What we deliver permalink: /what-we-deliver/ layout: default-intro lead: We help federal agencies build, buy, and share modern digital services to improve the user experience of government. +content_wide: true ---
    From 24968b47f47fc078c16e7df1944c6c1343e77a84 Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Wed, 23 Nov 2016 11:38:08 -0600 Subject: [PATCH 2/9] add baseurl --- _includes/navigation/subnav.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/navigation/subnav.html b/_includes/navigation/subnav.html index 7b683a56e..d1ce97299 100644 --- a/_includes/navigation/subnav.html +++ b/_includes/navigation/subnav.html @@ -5,7 +5,7 @@

    {{ include.page_data.text }}

      {% assign is_matching = page.url | matches_url: page_data.permalink %}
    • - Overview + Overview
      • {% for item in nav_items %} {% if item.in_subnav %} From 54518fef3b4b6894db80c879f6fc64fb3f372479 Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Wed, 23 Nov 2016 11:49:30 -0600 Subject: [PATCH 3/9] remove / --- _includes/navigation/subnav.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/navigation/subnav.html b/_includes/navigation/subnav.html index d1ce97299..ec6fcdead 100644 --- a/_includes/navigation/subnav.html +++ b/_includes/navigation/subnav.html @@ -5,7 +5,7 @@

      {{ include.page_data.text }}

        {% assign is_matching = page.url | matches_url: page_data.permalink %}
      • - Overview + Overview
        • {% for item in nav_items %} {% if item.in_subnav %} From 1a507c44a45a3930ffb34a8c61a3181ab15474f2 Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Fri, 25 Nov 2016 12:57:12 -0600 Subject: [PATCH 4/9] inconsistent spacing --- _layouts/project-tag-results.html | 4 ++-- _sass/_core/layout.scss | 4 ---- pages/home.html | 2 +- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/_layouts/project-tag-results.html b/_layouts/project-tag-results.html index 08a7629cb..ad5bdcafe 100644 --- a/_layouts/project-tag-results.html +++ b/_layouts/project-tag-results.html @@ -17,13 +17,13 @@

        Project:

    -
    +

    {{ page.subtitle }}

    {{ content }}
    -
    +

    Our blog posts about this project

    {% diff --git a/_sass/_core/layout.scss b/_sass/_core/layout.scss index 0234759ae..7903c496a 100644 --- a/_sass/_core/layout.scss +++ b/_sass/_core/layout.scss @@ -5,10 +5,6 @@ h4 + p { margin-top: $paragraph-margins; } -section + section { - margin-top: $section-margins; -} - .break-bottom { border-bottom: $border-light; padding-bottom: $section-margins; diff --git a/pages/home.html b/pages/home.html index 2731aefec..af20298af 100644 --- a/pages/home.html +++ b/pages/home.html @@ -4,7 +4,7 @@ title: Home --- -
    +

    We’re helping the Federal Election Commission make campaign finance data easier to use.

    From 93be539b499b471fd15edc952796b28cc483834c Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Fri, 25 Nov 2016 13:02:01 -0600 Subject: [PATCH 5/9] incorrect cardinals on sliding x --- _includes/head.html | 44 ++++++++++++++++++++++++++-- _layouts/project-tag-results.html | 2 +- _projects/fec-gov.md | 8 ++--- _sass/_components/nav-accordion.scss | 8 ++--- tests/schema/_projects.yml | 18 ++++++++++++ 5 files changed, 68 insertions(+), 12 deletions(-) create mode 100644 tests/schema/_projects.yml diff --git a/_includes/head.html b/_includes/head.html index b76a108d6..125256992 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -1,3 +1,12 @@ +{% if site.baseurl | blank %} + {% assign siteurl = site.url %} +{% else %} + {% assign siteurl = site.federalist_url %} +{% endif %} + + + + @@ -10,37 +19,66 @@ - + + + + + + + {% if page.title %} {{ site.title }} | {{ page.title }} + {% else %} {{ site.title }} | {{ site.description }} + {% endif %} + + + + {% if page.excerpt %} + {% else %} + +{% endif %} + + +{% if page.image %} + + + + + {% if page.image_accessibility %} + + {% endif %} {% endif %} + {% if page.author %} {% endif %} + {% if page.date %} - + {% endif %} + {% if page.tags %} {% endif %} - + {% if page.image %} - + From 0e3f55da55a95aa1366758f07feea358ecf29b1e Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Tue, 29 Nov 2016 08:51:23 -0600 Subject: [PATCH 8/9] add version to config --- _config.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/_config.yml b/_config.yml index 14a82e82f..260910fe7 100644 --- a/_config.yml +++ b/_config.yml @@ -11,6 +11,9 @@ logo: /assets/img/logos/18F-Logo-Bright-S.png feature_image: /assets/img/feature-background.jpg tag_dir: tags +# app version number +version: v1.1.0 + analytics: google: code: 'UA-48605964-1' # Change this to your GSA analytics code From 40942b57531275b954182819e62f41f60e3113f5 Mon Sep 17 00:00:00 2001 From: Brian Hedberg Date: Tue, 29 Nov 2016 12:02:28 -0600 Subject: [PATCH 9/9] exclude pages --- _config.yml | 2 +- pages/hire.md | 24 ++++++++++++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 pages/hire.md diff --git a/_config.yml b/_config.yml index 14a82e82f..4f7b4321f 100644 --- a/_config.yml +++ b/_config.yml @@ -43,7 +43,7 @@ collections: output: true permalink: /project/:path/ hire: - output: true + output: false permalink: /hire/:path/ defaults: diff --git a/pages/hire.md b/pages/hire.md new file mode 100644 index 000000000..d7c0f4aca --- /dev/null +++ b/pages/hire.md @@ -0,0 +1,24 @@ +--- +title: Hire 18F +permalink: /hire/ +image: /assets/img/page-feature/hire-us.jpg +lead: Let’s work together to design services that empower your team, better serve the public, and tackle the big problems facing your agency. +--- + +We can work with you to explore and define a variety of problems, and then we can help you build or buy a solution. + +Because of our limited resources, 18F is not able to take on every +project that agencies propose. We select our projects through a +qualification and evaluation process led by our Agency Partnerships +Team. If you and 18F decide that we’re the right fit for a project and +we have the necessary time and resources, we’ll work with you to draft +the necessary documents to begin our partnership. You can read more +about how we work with other agencies in our [Partnership +Playbook](https://pages.18f.gov/partnership-playbook/). + +18F is a cost-recoverable office, which means that we do not receive +appropriated funds from Congress and must charge our partner agencies to +cover our costs. Funding is set up through [Interagency +Agreements](https://pages.18f.gov/iaa-forms/). + +Do you have a project in mind? Let us know: [inquiries18F@gsa.gov](mailto:inquiries18F@gsa.gov)