diff --git a/CHANGELOG.md b/CHANGELOG.md index b6e5e74..2477c97 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,9 +6,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/). ## [Unreleased] ### Added -- "Why keep a changelog?" section -- "Who needs a changelog?" section -- "How do I make a changelog?" section +- "Why keep a changelog?" section. +- "Who needs a changelog?" section. +- "How do I make a changelog?" section. +- "Frequently Asked Questions" section. - New "Guiding Principles" sub-section to "How do I make a changelog?". - Simplified and Traditional Chinese translations from @tianshuo. - German translation from @mpbzh. @@ -24,9 +25,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/). - Start versioning based on the current English version at 0.3.0 to help translation authors keep things up-to-date. - Rewrite "What makes unicorns cry?" section. -- Rewrite "Ignoring Deprecations" sub-section to clarify the ideal scenario. -- Improve "Commit log diffs" sub-section to further argument against them. -- Merge "Why can’t people just use a git log diff?" with "Commit log diffs" +- Rewrite "Ignoring Deprecations" sub-section to clarify the ideal + scenario. +- Improve "Commit log diffs" sub-section to further argument against + them. +- Merge "Why can’t people just use a git log diff?" with "Commit log + diffs" - Fix typos in Simplified Chinese and Traditional Chinese translations. - Fix typos in Brazilian Portugese translation. - Fix typos in Turkish translation. @@ -46,8 +50,8 @@ translation authors keep things up-to-date. ## [0.2.0] - 2015-10-06 ### Changed -- Remove exclusionary mentions of "open source" since this project can benefit -both "open" and "closed" source projects equally. +- Remove exclusionary mentions of "open source" since this project can +benefit both "open" and "closed" source projects equally. ## [0.1.0] - 2015-10-06 ### Added @@ -113,7 +117,8 @@ notable changes. ## 0.0.1 - 2014-05-31 ### Added -- This CHANGELOG file to hopefully serve as an evolving example of a standardized open source project CHANGELOG. +- This CHANGELOG file to hopefully serve as an evolving example of a + standardized open source project CHANGELOG. - CNAME file to enable GitHub Pages custom domain - README now contains answers to common questions about CHANGELOGs - Good examples and basic guidelines, including proper date formatting. diff --git a/config.rb b/config.rb index 452b468..f204783 100644 --- a/config.rb +++ b/config.rb @@ -21,6 +21,7 @@ $languages = { und bei der Übersetzung mithelfen." }, "en" => { + default: true, name: "English", notice: "" }, @@ -120,19 +121,6 @@ class CustomMarkdownRenderer < Redcarpet::Render::HTML %Q[] end - def preprocess(full_document) - version_regex = /Version \*\*\d.\d.\d\*\*/ - top = full_document.split("").last - - @header = Redcarpet::Markdown.new( - Redcarpet::Render::HTML_TOC.new(nesting_level: 3), - { with_toc_data: true } - ).render(top + bottom).html_safe - - full_document - end - def header(text, header_level) slug = text.parameterize tag_name = "h#{header_level}" diff --git a/source/assets/images/bg-hero@2x.png b/source/assets/images/bg-hero@2x.png new file mode 100644 index 0000000..9005b62 Binary files /dev/null and b/source/assets/images/bg-hero@2x.png differ diff --git a/source/assets/images/bg-img1@2x.png b/source/assets/images/bg-img1@2x.png new file mode 100644 index 0000000..890bf4b Binary files /dev/null and b/source/assets/images/bg-img1@2x.png differ diff --git a/source/assets/images/bg-img2@2x.png b/source/assets/images/bg-img2@2x.png new file mode 100644 index 0000000..ca5b75f Binary files /dev/null and b/source/assets/images/bg-img2@2x.png differ diff --git a/source/assets/images/keep-a-changelog-mark.svg b/source/assets/images/keep-a-changelog-mark.svg new file mode 100644 index 0000000..9a1fcd6 --- /dev/null +++ b/source/assets/images/keep-a-changelog-mark.svg @@ -0,0 +1 @@ +Artboard 1 copy 3 \ No newline at end of file diff --git a/source/assets/javascripts/all.js b/source/assets/javascripts/all.js index 2c03f2d..52f13fa 100644 --- a/source/assets/javascripts/all.js +++ b/source/assets/javascripts/all.js @@ -1 +1,32 @@ -//= require_tree . +document.addEventListener("DOMContentLoaded", function(){ + var select = document.querySelector('.locales select'); + select.addEventListener('change', function(event){ + origin = window.location.origin; + languageCode = event.currentTarget.selectedOptions[0].value + window.location.replace(origin + "/" + languageCode) + }); + + var faqHeaders = document.querySelectorAll('.frequently-asked-questions h4'); + + for(header of faqHeaders){ + header.addEventListener('click', toggleVisibility); + } + + function toggleVisibility(event) { + element = event.target; + element.classList.toggle('is-visible') + + lastParagraph = element.nextElementSibling; + paragraphs = []; + paragraphs.push(lastParagraph); + + while (lastParagraph.nextElementSibling.tagName == "P") { + lastParagraph = lastParagraph.nextElementSibling; + paragraphs.push(lastParagraph) + } + + for(paragraph of paragraphs) { + paragraph.classList.toggle('is-visible'); + } + } +}); diff --git a/source/assets/stylesheets/anchors.sass b/source/assets/stylesheets/anchors.sass new file mode 100644 index 0000000..1d05765 --- /dev/null +++ b/source/assets/stylesheets/anchors.sass @@ -0,0 +1,16 @@ +.anchor + display: none + font-style: normal + font-weight: normal + position: absolute + right: 100% + top: 0 + +.anchor::before + line-height: 3.2 + content: "∞" + color: $color-ocre + padding-right: 0.1em + +.anchor:hover + text-decoration: none diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index 6fe7aba..6daa2b5 100644 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -1,71 +1,47 @@ -$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif +$base-font-family: 'Muli', "Helvetica Neue", Helvetica, Arial, sans-serif $source-code-font-family: "Source Code Pro", monospace $color-black: #342828 +$color-white: #FFFFFF $color-ocre: #E05735 -$color-gold: #EFA33C +$color-gold: #faa930 +$color-bark: #3F2B2D $color-sand: #F2DDBC $color-light-sand: lighten($color-sand, 10%) +@import "layout" +@import "anchors" +@import "sections" + html font: 16px/1.4 $base-font-family color: #342828 - background-color: #F2DDBC + background-color: $color-sand a color: $color-ocre - font-weight: bold text-decoration: none a:hover text-decoration: underline -.toc - position: fixed - z-index: 9999 - top: 10% - left: 0 - - ul - list-style-position: inside - list-style-type: decimal-leading-zero - padding: 0 0 0 1em - li - padding-left: 1em - line-height: 2 - a - padding: 0 1em - line-height: 2 - display: none - - span - display: none - - li:hover - color: $color-sand - background: $color-black - li:hover a - color: $color-sand - font-weight: bold - background-color: $color-black - display: inline-block - h1 color: $color-ocre - font-size: 4.7em + font-size: 3.2em font-weight: bold font-family: $base-font-family margin-bottom: 0 line-height: 1 text-transform: lowercase + width: 50% h2 - font-size: 1.4em + font-size: 1.2em margin-top: 0.2em margin-bottom: 2em h1, h2 - text-align: center + text-align: left h3 font-size: 1.3em @@ -77,56 +53,11 @@ h3 h3:hover .anchor, h3:focus .anchor display: block -.anchor - display: none - font-style: normal - font-weight: normal - position: absolute - right: 100% - top: 0 - -.anchor::before - content: '¶' - -.anchor:hover - text-decoration: none - h3 ~ p margin-top: 0 -article - margin: 0 auto - width: 640px - -article p - font-size: 1.3em - -article code - border-radius: 0.315em - border: 1px solid #ccc - padding: 0 0.3em 0.040em - font-size: 0.9em - -article img - margin: 0 auto - max-width: 100% - text-align: center - display: block - box-shadow: rgba(0, 0, 0, 0.37) 0px 0px 6px - border-radius: 7px - padding: 0.4em 0.9em - -article ul - font-size: 1.1em - line-height: 1.5 - list-style-type: square - padding-left: 1em - -footer - font-size: .7em - border-top: 1px solid #e9e6e1 - margin-top: 1em - margin-bottom: 2em +h1, h2, h3 + margin-top: 0 padding-top: 1em .license @@ -138,18 +69,23 @@ footer .about, .license margin-top: 0 -.changelog - border: 1px solid #aaa - margin: 0 0.5em - padding: 1em - overflow-x: auto - height: 20em - font-size: 0.9em +.locales, .mark + margin-bottom: -2em + margin-top: 2em + margin-right: 2em + +.mark + margin-left: 3em + float: left + +.locales + float: right .locales li + float: right + font-size: 0.7em display: inline list-style-type: none - padding-right: 20px white-space: nowrap pre, code diff --git a/source/assets/stylesheets/layout.sass b/source/assets/stylesheets/layout.sass new file mode 100644 index 0000000..7df30f1 --- /dev/null +++ b/source/assets/stylesheets/layout.sass @@ -0,0 +1,31 @@ +$break-small: em(480px) +$break-medium: em(800px) +$break-large: em(1024px) + +article + margin: 0 auto + width: 65em + +.main + background-color: $color-white + margin-bottom: 2em + + div + padding-left: 20% + padding-right: 20% + padding-bottom: 3em + +article p + font-size: 1.3em + +article code + border-radius: 0.315em + border: 1px solid #ccc + padding: 0 0.3em 0.040em + font-size: 0.9em + +article ul + font-size: 1.1em + line-height: 1.5 + list-style-type: square + padding-left: 1em diff --git a/source/assets/stylesheets/sections.sass b/source/assets/stylesheets/sections.sass new file mode 100644 index 0000000..1fc8ff0 --- /dev/null +++ b/source/assets/stylesheets/sections.sass @@ -0,0 +1,151 @@ +div.header + padding-top: 6em + padding-bottom: 1em + background-color: $color-ocre + background-image: image-url("bg-hero@2x.png") + background-size: 100% + + h1 + color: $color-sand + + h2 + font-weight: normal + + .title + width: 80% + margin: 0 auto + + .changelog + margin: 1em 0.5em + padding: 1em + overflow-x: auto + height: 20em + font-size: 0.8em + margin-bottom: -16em + background-color: $color-white + box-shadow: 0px 4px 12px 0px hsla(0, 0%, 0%, 0.2) + +div.answers + margin-top: 12em + padding-left: 25% + padding-right: 25% + background-color: $color-white + + h3 + font-size: 1.7em + color: $color-ocre + + a + color: $color-gold + + p + font-size: 1em + +.good-practices + background-color: $color-gold + background-image: image-url("bg-img1@2x.png") + background-position: bottom left + background-repeat: no-repeat + background-size: 100% + + h3 + font-size: 1.6em + font-weight: bold + width: 50% + + h4 + padding-left: 13em + + ul + font-size: 1em + padding-left: 14em + + a + color: $color-white + text-decoration: underline + +div.bad-practices + color: $color-white + background-color: $color-bark + background-image: image-url("bg-img2@2x.png") + background-position: bottom left + background-repeat: no-repeat + background-size: 100% + + a + color: $color-gold + text-decoration: underline + + h3 + padding-top: 3em + font-size: 1.7em + color: $color-gold + float: left + width: 35% + + h4, p + padding-left: 12em + p + clear: left + font-size: 1em + +div.effort + padding-left: 25% + padding-right: 25% + background-color: $color-white + + h3 + font-size: 1.6em + font-weight: bold + color: $color-ocre + +div.frequently-asked-questions + padding-left: 25% + padding-right: 25% + background-color: $color-white + + h2 + color: $color-ocre + + h4 + cursor: pointer + border-bottom: 1px solid black + padding: 0.4em 1.1em + + &:after + content: "⌄" + text-align: right + float: right + font-size: 2.8em + line-height: 0.4 + margin-right: -0.3em + + + &.is-visible:after + content: "-" + + h4 ~ p + display: none + font-size: 0.9em + + h4 ~ p.is-visible + display: inherit + +.footer + font-size: .6em + font-weight: normal + border-top: 1px solid #e9e6e1 + padding-top: 1em + padding-left: 2em + padding-right: 2em + + background-color: $color-ocre + color: $color-white + + a + color: $color-black + + &:after + content: "" + display: table + clear: both diff --git a/source/assets/stylesheets/table-of-contents.sass b/source/assets/stylesheets/table-of-contents.sass new file mode 100644 index 0000000..a305890 --- /dev/null +++ b/source/assets/stylesheets/table-of-contents.sass @@ -0,0 +1,29 @@ +.toc + position: fixed + z-index: 9999 + top: 10% + left: 0 + + ul + list-style-position: inside + list-style-type: decimal-leading-zero + padding: 0 0 0 1em + li + padding-left: 1em + line-height: 2 + a + padding: 0 1em + line-height: 2 + display: none + + span + display: none + + li:hover + color: $color-sand + background: $color-black + li:hover a + color: $color-sand + font-weight: bold + background-color: $color-black + display: inline-block diff --git a/source/layouts/layout.html.haml b/source/layouts/layout.html.haml index 586dd6d..075e388 100644 --- a/source/layouts/layout.html.haml +++ b/source/layouts/layout.html.haml @@ -1,41 +1,42 @@ !!! 5 %html - %head{lang: current_page.data.language} - %meta{charset: 'utf-8'} - %meta{content: 'IE=edge', 'http-equiv' => 'X-UA-Compatible'} - %meta{name: 'viewport', content: 'width=device-width, initial-scale=1.0'} - %meta{name: 'description', content: current_page.data.description} + %head{ lang: current_page.data.language } + %meta{ charset: 'utf-8' } + %meta{ content: 'IE=edge', 'http-equiv' => 'X-UA-Compatible' } + %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0' } + %meta{ name: 'description', content: current_page.data.description } -# Open Graph - %meta{property: 'og:article:publisher', content: config.publisher_url} - %meta{property: 'og:title', content: current_page.data.title} - %meta{property: 'og:type', content: 'article'} - %meta{property: 'og:url', content: path_to_url(current_page.url)} - %meta{property: 'og:description', content: current_page.data.description} + %meta{ property: 'og:article:publisher', content: config.publisher_url } + %meta{ property: 'og:title', content: current_page.data.title } + %meta{ property: 'og:type', content: 'article' } + %meta{ property: 'og:url', content: path_to_url(current_page.url) } + %meta{ property: 'og:description', content: current_page.data.description } = yield_content :og -# Icons - %link{rel: 'canonical', href: path_to_url(current_page.url)} + %link{ rel: 'canonical', href: path_to_url(current_page.url) } %title= current_page.data.title + + %link{ rel: "stylesheet", href: "https://fonts.googleapis.com/css?family=Muli:400,700" } = stylesheet_link_tag '//fonts.googleapis.com/css?family=Source+Code+Pro:400,700' = stylesheet_link_tag 'application' - - :javascript - try{Typekit.load();}catch(e){} + = javascript_include_tag 'all' %body %article - %header{role: "banner"} - %nav.locales{role: "navigation"} - %ul + %header{ role: "banner" } + = image_tag "keep-a-changelog-mark.svg", width: 100, class: "mark" + %nav.locales{ role: "navigation" } + %select - $languages.each do |language| - %li= link_to "#{language.last[:name]}", "/#{language.first}/", - { rel: "alternate", lang: "#{language}", hreflang: "#{language}" } + - selected = current_page.metadata[:page][:language] == language.first + %option{ selected: selected, label: language.last[:name], value: language.first } - .main{role: "main"} + .main{ role: "main" } - if current_page.metadata[:page][:version] != $last_version - code = current_page.metadata[:page][:language] - versions = Dir.entries("source/#{code}") - %w[. ..] @@ -55,14 +56,14 @@ = yield - %footer.clearfix{role: "banner"} - %p.license - This project is - #{link_to "MIT Licensed", "http://choosealicense.com/licenses/mit/"}. - %p.about - #{link_to "Typed", "https://github.com/olivierlacan/keep-a-changelog/"} - with trepidation by - #{link_to "Olivier Lacan", "http://olivierlacan.com/"}. + %footer.footer.clearfix{ role: "banner" } + %p.license + This project is + #{link_to "MIT Licensed", "http://choosealicense.com/licenses/mit/"}. + %p.about + #{link_to "Typed", "https://github.com/olivierlacan/keep-a-changelog/"} + with trepidation by + #{link_to "Olivier Lacan", "http://olivierlacan.com/"}. - unless config.gauges_id.blank? :javascript