diff --git a/_config.yml b/_config.yml index 07da3c9002..483de57c92 100644 --- a/_config.yml +++ b/_config.yml @@ -18,6 +18,8 @@ collections: output: true sponsors: testimonials: + guide-pages: + output: true defaults: - scope: diff --git a/_guide-pages/github-issues.md b/_guide-pages/github-issues.md new file mode 100644 index 0000000000..642c4db212 --- /dev/null +++ b/_guide-pages/github-issues.md @@ -0,0 +1,11 @@ +--- +title: Getting the Most Out of GitHub Issues +description: Each of Hack for LA’s GitHub project repositories (repos) use [issues](https://guides.github.com/features/issues/) to track and organize ideas, enhancements, and tasks. All team members will use GitHub issues to communicate in our multifunctional teams. + +# When creating a new GitHub issue, the following tips will help you provide consistent formatting, a clear and concise overview, actionable tasks, explanatory resources, and resumé items to add value for all volunteers.

+# All GitHub Issues use markdown for formatting. View GitHub’s Mastering Markdown for a simple guide. +# in-this-guide: +# - name: Example of a Good End-to-End Issue +# link: "#example-issue" + +--- \ No newline at end of file diff --git a/_layouts/guide-pages.html b/_layouts/guide-pages.html new file mode 100644 index 0000000000..f55e8de656 --- /dev/null +++ b/_layouts/guide-pages.html @@ -0,0 +1,28 @@ +--- +layout: default +--- + + + +
+
+

{{ page.title }}

+

+ {{ page.description }} +

+
+
+
+
+

In This Guide

+ + +
+
+ +{{ content | markdownify }} \ No newline at end of file diff --git a/_sass/_main.scss b/_sass/_main.scss index cc5fcd3adc..63c45d7221 100644 --- a/_sass/_main.scss +++ b/_sass/_main.scss @@ -44,6 +44,7 @@ @import 'components/home-getting-started'; @import 'components/getting-started-page.scss'; @import 'components/project-meetings.scss'; +@import 'components/github-issue-guide.scss'; // /** // * Layouts diff --git a/_sass/components/github-issue-guide.scss b/_sass/components/github-issue-guide.scss new file mode 100644 index 0000000000..18bee3559c --- /dev/null +++ b/_sass/components/github-issue-guide.scss @@ -0,0 +1,329 @@ +//CSS FOR Pink Arrows/Pointers +// .left { +// width: 5px; +// height: 5px; +// background: $color-red; +// border-radius: 50%; +// } + +// .arrow { +// border-top: 2px solid $color-red; +// } + +// VARIABLES FOR OVERLAY LINKS +@mixin right-overlay { + position: absolute; + left: 93%; + width: 7%; +} +@mixin right-text-overlay { + position: absolute; + left: 100.5%; +} + +@mixin left-overlay { + position: absolute; + right: 93%; + width: 7%; +} +@mixin left-text-overlay { + position: absolute; + right: 92%; + width: 10%; + direction: rtl; + text-align: start; +} + +body { + background-color: $color-pink; +} + +.page-hero { + background-size: cover !important; + background-color: $color-white; + display: flex; + flex-direction: column; + justify-content: flex-end; + position: relative; + margin-top: 29px; + width: 100vw; + + &::after { + @include position(absolute, 0 0 0 0); + background: linear-gradient( + to bottom, + rgba($color-blue-dark, 0.3) 0%, + rgba($color-blue-dark, 1) 100% + ); + content: ""; + display: block; + z-index: 1; + + @media #{$bp-tablet-up} { + background: linear-gradient( + to bottom, + rgba($color-blue-dark, 0) 30%, + rgba($color-blue-dark, 1) 100% + ); + opacity: 1; + } + + // NEW MOBILE FRIENDLY RULES + @media #{$bp-below-mobile} { + background: linear-gradient(to bottom, rgba(3,13,45,0.3) 30%, #030d2d 100%); + } + } +} + +.header-content { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + width: 100%; + padding: 5%; + background-color: $color-white; + + .left-col { + width: 50%; + margin-left: 5%; + } + .right-col { + width: 30%; + } + + @media #{$bp-below-mobile} { + .left-col { + width: 100%; + margin: 5%; + } + .right-col { + margin: 5%; + width: 100%; + } + } +} + +//only show header divider if screen is bigger than mobile +@media #{$bp-mobile-up} { + .border-right { + border-right: 1px solid rgba(0,0,0, 0.3); + max-height: 330px; + height: 300px; + margin: 5%; + justify-content: center; + } +} + +h5 { + font-size: 1.2em; + font-weight: normal; +} + +h4 { + text-align: left; +} + +p { + text-align: left; +} + +img { + display: table-cell; + vertical-align: top; +} + +.subheading { + text-align: center; +} + +.black-font { + color: black; +} + +.img-and-caption { + display: inline-block; +} + +.img-caption { + font-style: italic; + font-size: 0.9em; + margin-top: -1.0%; + text-align: left; + padding-left: 5%; +} + +.inline-text-with-title { + display: flex; +} + +.section-container { + background: $color-white; + box-shadow: 0px 4px 8px rgba(51, 51, 51, 0.2); + border-radius: 10px; + margin: 5%; + padding: 5% 12.5%; + text-align: center; +} + +.issue-template-code { + border: 1px solid $color-pink; + background-color: $color-pink; + font-family: monospace; + text-align: left; +} + +// +// STYLING FOR Example of a Good End-to-End Issue OVERLAY LINKS +// +.overlay-links { + position: relative; + + h4 { + font-size: 0.85em; + } +} + +.link-section p { + text-align: center; +} + +.screenshot { + max-width: none; + width: 100%; +} + +//INDIVIDUAL PLACEMENTS OF OVERLAY LINKS +//RIGHT SIDE LINKS +.assignees { + @include right-overlay; + top: 17.5%; + + + h4 { + @include right-text-overlay; + top: 17.5%; + } +} + +.labels { + @include right-overlay; + top: 21%; + + + h4 { + @include right-text-overlay; + top: 21%; + } +} + +.project-board { + @include right-overlay; + top: 27.5%; + + + h4 { + @include right-text-overlay; + top: 27.5%; + } +} + +.milestones { + @include right-overlay; + top: 36%; + + + h4 { + @include right-text-overlay; + top: 36%; + } +} + +//LEFT SIDE LINKS +.left-pointer { + transform: rotate(180deg); +} + +.title { + @include left-overlay; + right: 99%; + top: 9%; + + + h4 { + @include left-text-overlay; + top: 9%; + right: 98%; + } +} + +.overview { + @include left-overlay; + top: 19%; + + + h4 { + @include left-text-overlay; + top: 19%; + } +} + +.dependency { + @include left-overlay; + top: 25.5%; + + + h4 { + @include left-text-overlay; + top: 25.5%; + } +} + +.action-items { + @include left-overlay; + top: 30.5%; + + + h4 { + @include left-text-overlay; + top: 30.5%; + } +} + +.resources { + @include left-overlay; + top: 54.5%; + + + h4 { + @include left-text-overlay; + top: 54.5%; + } +} + +.resume { + @include left-overlay; + top: 62.4%; + + + h4 { + @include left-text-overlay; + top: 62.4%; + } +} + + +//Scale overlay-text down on smaller screens +@media #{$bp-below-tablet} { + .overlay-links h4 { + font-size: 0.4em; + } + img { + width: 85%; + } + + #title { + @include left-overlay; + top: 9%; + + + h4 { + @include left-text-overlay; + top: 9%; + } + } +} + +.grayarrow { + //height: 20px; + width: 20px; + max-width: none; +} \ No newline at end of file diff --git a/assets/images/guides/github-issue/good-issue-example.png b/assets/images/guides/github-issue/good-issue-example.png new file mode 100644 index 0000000000..80dfe64882 Binary files /dev/null and b/assets/images/guides/github-issue/good-issue-example.png differ diff --git a/assets/images/guides/github-issue/good-issue-example.svg b/assets/images/guides/github-issue/good-issue-example.svg new file mode 100644 index 0000000000..deccf998fc --- /dev/null +++ b/assets/images/guides/github-issue/good-issue-example.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/guides/github-issue/issue-sections-1.png b/assets/images/guides/github-issue/issue-sections-1.png new file mode 100644 index 0000000000..b660e27d7d Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-1.png differ diff --git a/assets/images/guides/github-issue/issue-sections-10.png b/assets/images/guides/github-issue/issue-sections-10.png new file mode 100644 index 0000000000..0914e166f6 Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-10.png differ diff --git a/assets/images/guides/github-issue/issue-sections-11.png b/assets/images/guides/github-issue/issue-sections-11.png new file mode 100644 index 0000000000..5dcbc1b82f Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-11.png differ diff --git a/assets/images/guides/github-issue/issue-sections-12.png b/assets/images/guides/github-issue/issue-sections-12.png new file mode 100644 index 0000000000..24da1782c3 Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-12.png differ diff --git a/assets/images/guides/github-issue/issue-sections-13.png b/assets/images/guides/github-issue/issue-sections-13.png new file mode 100644 index 0000000000..e204850b7a Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-13.png differ diff --git a/assets/images/guides/github-issue/issue-sections-14.png b/assets/images/guides/github-issue/issue-sections-14.png new file mode 100644 index 0000000000..f12ce57224 Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-14.png differ diff --git a/assets/images/guides/github-issue/issue-sections-15.png b/assets/images/guides/github-issue/issue-sections-15.png new file mode 100644 index 0000000000..a7fed4d746 Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-15.png differ diff --git a/assets/images/guides/github-issue/issue-sections-16.png b/assets/images/guides/github-issue/issue-sections-16.png new file mode 100644 index 0000000000..f18424eaed Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-16.png differ diff --git a/assets/images/guides/github-issue/issue-sections-17.png b/assets/images/guides/github-issue/issue-sections-17.png new file mode 100644 index 0000000000..b7bf0ffd29 Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-17.png differ diff --git a/assets/images/guides/github-issue/issue-sections-18.png b/assets/images/guides/github-issue/issue-sections-18.png new file mode 100644 index 0000000000..59c78bc622 Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-18.png differ diff --git a/assets/images/guides/github-issue/issue-sections-19.png b/assets/images/guides/github-issue/issue-sections-19.png new file mode 100644 index 0000000000..35fee56239 Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-19.png differ diff --git a/assets/images/guides/github-issue/issue-sections-2.png b/assets/images/guides/github-issue/issue-sections-2.png new file mode 100644 index 0000000000..885c512ed0 Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-2.png differ diff --git a/assets/images/guides/github-issue/issue-sections-20.png b/assets/images/guides/github-issue/issue-sections-20.png new file mode 100644 index 0000000000..24a1adcc1f Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-20.png differ diff --git a/assets/images/guides/github-issue/issue-sections-3.png b/assets/images/guides/github-issue/issue-sections-3.png new file mode 100644 index 0000000000..a70fc5dc5b Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-3.png differ diff --git a/assets/images/guides/github-issue/issue-sections-4.png b/assets/images/guides/github-issue/issue-sections-4.png new file mode 100644 index 0000000000..8061e28f70 Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-4.png differ diff --git a/assets/images/guides/github-issue/issue-sections-5.png b/assets/images/guides/github-issue/issue-sections-5.png new file mode 100644 index 0000000000..853c7b10d2 Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-5.png differ diff --git a/assets/images/guides/github-issue/issue-sections-6.png b/assets/images/guides/github-issue/issue-sections-6.png new file mode 100644 index 0000000000..f5e56a98a7 Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-6.png differ diff --git a/assets/images/guides/github-issue/issue-sections-7.png b/assets/images/guides/github-issue/issue-sections-7.png new file mode 100644 index 0000000000..00714d4121 Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-7.png differ diff --git a/assets/images/guides/github-issue/issue-sections-8.png b/assets/images/guides/github-issue/issue-sections-8.png new file mode 100644 index 0000000000..e243076a0a Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-8.png differ diff --git a/assets/images/guides/github-issue/issue-sections-9.png b/assets/images/guides/github-issue/issue-sections-9.png new file mode 100644 index 0000000000..5a761b4c43 Binary files /dev/null and b/assets/images/guides/github-issue/issue-sections-9.png differ diff --git a/assets/images/guides/gray-arrow.svg b/assets/images/guides/gray-arrow.svg new file mode 100644 index 0000000000..45b15e1183 --- /dev/null +++ b/assets/images/guides/gray-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/guides/guide-page-hero.png b/assets/images/guides/guide-page-hero.png new file mode 100644 index 0000000000..95d809a53d Binary files /dev/null and b/assets/images/guides/guide-page-hero.png differ diff --git a/assets/images/guides/pink-pointer.svg b/assets/images/guides/pink-pointer.svg new file mode 100644 index 0000000000..1b16043864 --- /dev/null +++ b/assets/images/guides/pink-pointer.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/guides/pointer-eclipse.svg b/assets/images/guides/pointer-eclipse.svg new file mode 100644 index 0000000000..75b0492bc0 --- /dev/null +++ b/assets/images/guides/pointer-eclipse.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/guides/pointer-line.svg b/assets/images/guides/pointer-line.svg new file mode 100644 index 0000000000..5f2a64be51 --- /dev/null +++ b/assets/images/guides/pointer-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/github-issue-guide.html b/github-issue-guide.html new file mode 100644 index 0000000000..ca6c8caf2f --- /dev/null +++ b/github-issue-guide.html @@ -0,0 +1,245 @@ +--- +layout: default +title: Anatomy of a Good Github Issue +--- + + +
+
+

Getting the Most Out of GitHub Issues

+

+ Each of Hack for LA’s GitHub project repositories (repos) use issues to track and organize ideas, enhancements, and tasks. All team members will use GitHub issues to communicate in our multifunctional teams.

+ When creating a new GitHub issue, the following tips will help you provide consistent formatting, a clear and concise overview, actionable tasks, explanatory resources, and resumé items to add value for all volunteers.

+ All GitHub Issues use markdown for formatting. View GitHub’s Mastering Markdown for a simple guide. +

+
+
+
+
+

In This Guide

+ +
+
+ + + + + + + +
+

Issue Sections: Descriptions and Tips

+
Follow the recommendations below to create a useful end-to-end GitHub issue
+

You can either format with markdown text manually or using the text box toolbar


+ +

TITLE

+

+ Describe what you’re working on —

+ For a start-to-finish issue, as in this case, choose a title that is generic enough to allow for all phases (research, ideation, design, development).

+ For an issue taking on only part of the workflow, be more declarative in what it covers (e.g. a research issue might be called “Determine Best Testing Library for Code Base”). +


+
+
+



+ + +

OVERVIEW

+

Clearly state the purpose of this issue in 2 lines or less.

+
+ +

Markdown draft: ### formats header

+

+
+
+
+

Final post

+



+ + +

DEPENDENCY

+ (if applicable)
+

If your issue relies on another issue’s completion first, link to the issue it is dependent on.

+
+ +

Markdown draft: [title](url) formats links

+

+
+
+ +

Final post

+



+ + +

ACTION ITEMS

+

+ Formatted as a clickable checklist.

+ If this is the beginning of the task, this is most likely something to be researched and documented.

+ When the research is complete, what will happen next? Describe the steps in your checklist (broadly, if the research will change the details).

+ If the steps can be divided into tasks for more than one person, we recommend dividing it up into separate sections. +


+
+ +

Markdown draft: - [ ] formats checklist

+

+
+
+ +

Final post


+

+
+
+ +

Final post with checkmarks

+



+ + +

RESOURCES / INSTRUCTIONS

+

+ If there is a link with documentation that helps with this issue, provide the link(s) here. +


+
+ +

Markdown draft

+

+
+
+ +

Final post

+



+ + +

RESUME

+

+ Specify how tasks can be listed in all assignees’ resumés to provide value for project volunteers, divided by roles. +


+
+ +

Markdown draft

+

+
+
+ +

Final post

+



+ + +

ASSIGNEES

+

+ Select assignees to clarify who is working on specific issues and pull requests.

+ In the upper-right corner, click Assignees. To assign a user (including yourself), start typing their username and click their name when it appears.

+ Assign the issue to only one person at a time, by order of their tasks. +


+ +


+ + +

LABELS

+

+ Select all relevant labels. See GitHub’s About Labels guide for more details. +


+ +


+ + +

PROJECT BOARD

+

+ Make sure your issue is added to your team’s Project Board, and properly triaged. Click here to learn more.

+ If the issue has been created but is not ready to assign, it should be set in the ice box.

+ If the issue has been created and is ready but not yet assigned to someone, it should be set in prioritized backlog.

+ When someone has been assigned to the issue, this should be set to in progress. +


+


+ + +

MILESTONES

+

+ You can use milestones to track the progress of groups of issues or pull requests in a repository. Read more at GitHub’s About Milestones guide. +


+


+ +

TIP:

PREVIEW

+

+ Don’t forget to preview your new issue before posting to make sure it’s formatted correctly. +


+


+
+ + +
+

Issue Template

+

Copy/paste the following markdown template text into your new GitHub issue and fill out using the guidelines above.


+ +
+ + ### Overview
+ ### Action Items
+ - [ ]
+ - [ ]
+ - [ ]
+ ### Resources/Instructions
+ [link title](link URL)
+ ### Resume UX Writing:
+ -
+ -
+ UI Mockup:
+ -
+ -
+ Developers:
+ -
+ -
+
+
+
+ + + +