mozilla
/
kitsune
зеркало из https://github.com/mozilla/kitsune.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

update styleguide to work with webpack 

https://github.com/mozilla/sumo-project/issues/894
This commit is contained in:
Leo McArdle 2021-10-18 16:51:17 +01:00 коммит произвёл Leo McArdle
Родитель 824483024a
Коммит a582a1a9cd
13 изменённых файлов: 43 добавлений и 104 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

4
kitsune/sumo/static/sumo/scss/layout/_document.scss
Просмотреть файл

@ -43,7 +43,7 @@
//
// Weight: 21
//
// Style guide: footer
// Style guide: document-vote
.document-vote {
border-radius: 36px;
@ -292,7 +292,7 @@
margin-left: p.$spacing-lg;
}
}
.youtube-embed {
height: 0;
padding-bottom: 56.25%;

21
package.json
Просмотреть файл

@ -13,23 +13,14 @@
"install-prod": "npm ci",
"development": "npm run install-dev",
"stylelint": "onchange 'kitsune/sumo/static/sumo/scss/**/*' -- npm run stylelint",
"copy:protocol": "mkdir -p assets/protocol assets/sumo/css && cp -r node_modules/@mozilla-protocol/core/protocol/* assets/protocol",
"build:docs:copyfonts": "cp -r node_modules/@mozilla-protocol/core/protocol/fonts styleguide/build/static",
"build:docs:copyprotocol": "cp -r node_modules/@mozilla-protocol/core/protocol styleguide/build/static",
"build:docs:copyprotocolimgs": "mkdir -p styleguide/build/static && cp -r node_modules/@mozilla-protocol/core/protocol/img styleguide/build/static",
"build:docs:copysumoimgs": "mkdir -p styleguide/build/static/sumo && cp -r kitsune/sumo/static/sumo/img styleguide/build/static/sumo",
"build:docs:copyproductimgs": "mkdir -p styleguide/build/static/products/img && cp -r kitsune/products/static/products/img styleguide/build/static/products",
"build:docs:copyjs": "cp -r kitsune/sumo/static/sumo/js styleguide/build/static/sumo",
"build:docs:copystyles": "mkdir -p styleguide/build/static/css && cp assets/sumo/css/screen.css styleguide/build/static/css/screen.css && cp assets/sumo/css/screen.css.map styleguide/build/static/css/screen.css.map",
"build:docs:styles": "sass styleguide/kss-template/kss-assets/scss/kss.scss styleguide/build/css/kss.css",
"build:docs:kss": "kss --config styleguide/kss-config.json --custom full",
"build": "concurrently --raw npm:build:*",
"watch:docs": "onchange 'styleguide/styleguide-examples/*.njk' 'styleguide/kss-template/**/*' -- npm run build:docs:kss",
"watch:docstyles": "onchange 'assets/sumo/css/screen.css' -- npm run build:docs:copystyles",
"watch:docjs": "onchange 'kitsune/sumo/static/sumo/js/**/*.js' -- npm run build:docs:copyjs",
"build:styleguide:copy": "mkdir -p styleguide/build/static && cp -r dist/. styleguide/build/static/",
"build:styleguide:styles": "sass styleguide/kss-template/kss-assets/scss/kss.scss styleguide/build/css/kss.css",
"build:styleguide:kss": "kss --config styleguide/kss-config.json --custom full",
"build:styleguide": "npm run webpack:build && concurrently --raw npm:build:styleguide:*",
"watch:styleguide": "onchange 'styleguide/styleguide-examples/*.njk' 'styleguide/kss-template/**/*' -- npm run build:styleguide:kss",
"watch": "npm run build && concurrently --raw npm:watch:*",
"browser-sync": "browser-sync start --no-open --files \"kitsune/**/*.html\" \"dist\" --proxy 127.0.0.1:8000",
"browser-sync:docs": "browser-sync start --no-open --serveStatic \"styleguide/build\" --files \"styleguide/build/**/*\" --port 4000 --reload-delay=300",
"browser-sync:styleguide": "browser-sync start --no-open --serveStatic \"styleguide/build\" --files \"styleguide/build/**/*\" --port 4000 --reload-delay=300",
"start": "concurrently --raw --kill-others \"npm run webpack:watch\" \"npm run browser-sync\"",
"lint:webpack": "npx eslint --no-eslintrc -c webpack/eslintrc.js kitsune",
"webpack:build": "npx webpack build --config webpack.dev.js",

42
styleguide/kss-config.json
Просмотреть файл

@ -5,48 +5,10 @@
"destination": "build",
"//": "The css and js paths are URLs relative to the style guide destination.",
"css": [
"static/css/screen.css"
],
"//": [
"TODO: Fix this mess and remove this note when JS is compiled with the frontend."
"static/screen.css"
],
"js": [
"static/sumo/js/i18n.js",
"static/underscore/underscore.js",
"static/jquery/dist/jquery.min.js",
"static/sumo/js/libs/jquery.cookie.js",
"static/sumo/js/libs/jquery.placeholder.js",
"static/nunjucks/browser/nunjucks-slim.js",
"static/sumo/js/nunjucks.js",
"static/sumo/js/cached_xhr.js",
"static/sumo/js/search_utils.js",
"static/sumo/js/browserdetect.js",
"static/sumo/js/kbox.js",
"static/sumo/js/main.js",
"static/sumo/js/format.js",
"static/sumo/js/geoip-locale.js",
"static/mailcheck/src/mailcheck.js",
"static/sumo/js/ui.js",
"static/sumo/js/analytics.js",
"static/sumo/js/surveygizmo.js",
"static/sumo/js/instant_search.js",
"static/sumo/js/responsive-nav-toggle.js",
"static/sumo/js/profile-avatars.js",
"static/protocol/js/protocol-base.js",
"static/protocol/js/protocol-utils.js",
"static/protocol/js/protocol-supports.js",
"static/protocol/js/protocol-details.js",
"static/protocol/js/protocol-footer.js",
"static/protocol/js/protocol-menu.js",
"static/protocol/js/protocol-modal.js",
"static/protocol/js/protocol-navigation.js",
"static/protocol/js/protocol-newsletter.js",
"static/protocol/js/protocol-notification-bar.js",
"static/sumo/js/protocol-nav.js",
"static/sumo/js/protocol-details-init.js",
"static/sumo/js/show-fx-download.js",
"static/sumo/js/sumo-tabs.js"
"static/common.js"
],
"homepage": "../../../../../styleguide/styleguide-examples/styleguide-index.md",
"builder": "kss-template"

3
styleguide/kss-template/builder.js
Просмотреть файл

@ -17,6 +17,7 @@
*/
const path = require('path');
const sourceToAsset = require('../build/static/source-to-asset.json');
// We want to extend kss-node's Nunjucks builder so we can add options that
// are used in our templates.
@ -64,6 +65,8 @@ class KssBuilderNunjucks extends KssBuilderBaseNunjucks {
prepareExtend(templateEngine) {
this.options.extend.push(path.resolve(__dirname, 'extend'));
templateEngine.addGlobal("webpack_static", (path) => "static/" + sourceToAsset[path]);
return super.prepareExtend(templateEngine);
}
}

8
styleguide/styleguide-examples/banner.njk
Просмотреть файл

@ -1,6 +1,6 @@
<div class="sumo-banner {{ modifier_class }}">
<div class="content">
<img class="icon" src="static/sumo/img/FF_Master__icon.svg" alt="" role="presentation" />
<img class="icon" src="{{ webpack_static('sumo/img/FF_Master__icon.svg') }}" alt="" role="presentation" />
<p class="heading">
Get the account that protects you rather that profits off you.
</p>
@ -8,7 +8,11 @@
Sign Up
</a>
<button class="sumo-close-button close-button">
<img src="static/protocol/img/icons/close{% if modifier_class !== "sumo-banner-warning" %}-white{% endif %}.svg" />
{% if modifier_class == "sumo-banner-warning" %}
<img src="{{ webpack_static('protocol/img/icons/close.svg') }}" />
{% else %}
<img src="{{ webpack_static('protocol/img/icons/close-white.svg') }}" />
{% endif %}
</button>
</div>
</div>

4
styleguide/styleguide-examples/base.njk
Просмотреть файл

@ -1,7 +1,3 @@
<script src="static/protocol/js/protocol-base.js"></script>
<script src="static/protocol/js/protocol-utils.js"></script>
<script src="static/protocol/js/protocol-supports.js"></script>
{% block nav %}
{% import 'styleguide/styleguide-examples/nav.njk' as nav %}
{{ nav.nav(is_logged_in=true) }}

2
styleguide/styleguide-examples/card-callout.njk
Просмотреть файл

@ -1,6 +1,6 @@
<section class="mzp-l-content sumo-page-section">
<div class="card card--callout">
<img class="card--feature-img" src="static/sumo/img/Mozilla_illustration_placholder2x.png" alt="Illustration of hands">
<img class="card--feature-img" src="{{ webpack_static('sumo/img/Mozilla_illustration_placholder2x.png') }}" alt="Illustration of hands">
<div class="card--details">
<h3 class="card--title">Join Our Community</h3>
<p class="card--desc">Grow and share your expertise with others. Answer questions and improve our knowledge base.</p>

8
styleguide/styleguide-examples/card-grid-articles.njk
Просмотреть файл

@ -6,7 +6,7 @@
<div class="sumo-card-grid is-four-wide" style="--cg-count: 4;">
<div class="scroll-wrap">
<div class="card card--article">
<img class="card--icon-sm" src="static/protocol/img/icons/blog.svg" alt="todo: title">
<img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/blog.svg') }}" alt="todo: title">
<div class="card--details">
<h3 class="card--title">
<a class="expand-this-link" href="#TODO" data-event-category="link click" data-event-action="product" data-event-label="#TODO-title">
@ -22,7 +22,7 @@
</div>
</div>
<div class="card card--article">
<img class="card--icon-sm" src="static/protocol/img/icons/reader-mode.svg" alt="todo: title">
<img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/reader-mode.svg') }}" alt="todo: title">
<div class="card--details">
<h3 class="card--title">
<a class="expand-this-link" href="#TODO" data-event-category="link click" data-event-action="product" data-event-label="#TODO-title">
@ -38,7 +38,7 @@
</div>
</div>
<div class="card card--article">
<img class="card--icon-sm" src="static/protocol/img/icons/reader-mode.svg" alt="todo: title">
<img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/reader-mode.svg') }}" alt="todo: title">
<div class="card--details">
<h3 class="card--title">
<a class="expand-this-link" href="#TODO" data-event-category="link click" data-event-action="product" data-event-label="#TODO-title">
@ -54,7 +54,7 @@
</div>
</div>
<div class="card card--article">
<img class="card--icon-sm" src="static/protocol/img/icons/blog.svg" alt="todo: title">
<img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/blog.svg') }}" alt="todo: title">
<div class="card--details">
<h3 class="card--title">
<a class="expand-this-link" href="#TODO" data-event-category="link click" data-event-action="product" data-event-label="#TODO-title">

4
styleguide/styleguide-examples/card-grid-products.njk
Просмотреть файл

@ -11,7 +11,7 @@
<img class="card--icon" src="static/products/img/product_placeholder.png" alt="Firefox">
<img class="card--icon" src="{{ webpack_static('products/img/product_placeholder.png') }}" alt="Firefox">
<div class="card--details">
<h3 class="card--title">
<a class="expand-this-link" href="/en-US/products/firefox" data-event-category="link click" data-event-action="product" data-event-label="Firefox">
@ -27,7 +27,7 @@
<img class="card--icon" src="static/products/img/product_placeholder.png" alt="Firefox for Android">
<img class="card--icon" src="{{ webpack_static('products/img/product_placeholder.png') }}" alt="Firefox for Android">
<div class="card--details">
<h3 class="card--title">
<a class="expand-this-link" href="/en-US/products/mobile" data-event-category="link click" data-event-action="product" data-event-label="Firefox for Android">

16
styleguide/styleguide-examples/card-grid.njk
Просмотреть файл

@ -2,7 +2,7 @@
<div class="sumo-card-grid {{ modifier_class }}" style="--cg-count: 8;">
<div class="scroll-wrap">
<div class="card card--article">
<img class="card--icon-sm" src="static/protocol/img/icons/blog.svg" alt="todo: title" />
<img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/blog.svg') }}" alt="todo: title" />
<div class="card--details">
<h3 class="card--title">
<a
@ -24,7 +24,7 @@
</div>
</div>
<div class="card card--article">
<img class="card--icon-sm" src="static/protocol/img/icons/reader-mode.svg" alt="todo: title" />
<img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/reader-mode.svg') }}" alt="todo: title" />
<div class="card--details">
<h3 class="card--title">
<a
@ -46,7 +46,7 @@
</div>
</div>
<div class="card card--article">
<img class="card--icon-sm" src="static/protocol/img/icons/reader-mode.svg" alt="todo: title" />
<img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/reader-mode.svg') }}" alt="todo: title" />
<div class="card--details">
<h3 class="card--title">
<a
@ -68,7 +68,7 @@
</div>
</div>
<div class="card card--article">
<img class="card--icon-sm" src="static/protocol/img/icons/blog.svg" alt="todo: title" />
<img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/blog.svg') }}" alt="todo: title" />
<div class="card--details">
<h3 class="card--title">
<a
@ -90,7 +90,7 @@
</div>
</div>
<div class="card card--article">
<img class="card--icon-sm" src="static/protocol/img/icons/blog.svg" alt="todo: title" />
<img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/blog.svg') }}" alt="todo: title" />
<div class="card--details">
<h3 class="card--title">
<a
@ -112,7 +112,7 @@
</div>
</div>
<div class="card card--article">
<img class="card--icon-sm" src="static/protocol/img/icons/reader-mode.svg" alt="todo: title" />
<img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/reader-mode.svg') }}" alt="todo: title" />
<div class="card--details">
<h3 class="card--title">
<a
@ -134,7 +134,7 @@
</div>
</div>
<div class="card card--article">
<img class="card--icon-sm" src="static/protocol/img/icons/reader-mode.svg" alt="todo: title" />
<img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/reader-mode.svg') }}" alt="todo: title" />
<div class="card--details">
<h3 class="card--title">
<a
@ -156,7 +156,7 @@
</div>
</div>
<div class="card card--article">
<img class="card--icon-sm" src="static/protocol/img/icons/blog.svg" alt="todo: title" />
<img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/blog.svg') }}" alt="todo: title" />
<div class="card--details">
<h3 class="card--title">
<a

17
styleguide/styleguide-examples/footer.njk
Просмотреть файл

@ -60,21 +60,7 @@
<!-- form submit button is shown when JavaScript is not enabled -->
<button type="submit">Go</button>
</form>
<script src="../../../assets/protocol/protocol/js/protocol-lang-switcher.js"></script>
<script>
(function() {
'use strict';
// a custom callback can be passed to the lang switcher for analytics purposes.
Mzp.LangSwitcher.init(function(
previousLanguage, newLanguage) {
console.log('Previous language: ',
previousLanguage);
console.log('New language: ',
newLanguage);
})
})();
</script>
<ul class="mzp-c-footer-links-social">
<li><a class="twitter" href="https://twitter.com/firefox">Twitter<span> (@firefox)</span></a></li>
<li><a class="youtube" href="https://www.youtube.com/firefoxchannel">YouTube<span> (firefoxchannel)</span></a></li>
@ -111,6 +97,3 @@
</nav>
</div>
</footer>
<script src="../../../assets/protocol/protocol/js/protocol-details.js"></script>
<script src="../../../assets/protocol/protocol/js/protocol-footer.js"></script>

16
styleguide/styleguide-examples/form.njk
Просмотреть файл

@ -1,11 +1,11 @@
<form>
{% include 'kitsune/sumo/static/styleguide-examples/field.njk' %}
{% include 'kitsune/sumo/static/styleguide-examples/field_select.njk' %}
{% include 'kitsune/sumo/static/styleguide-examples/field_textarea.njk' %}
{% include 'kitsune/sumo/static/styleguide-examples/field_checkbox.njk' %}
{% include 'kitsune/sumo/static/styleguide-examples/field_radio.njk' %}
{% include 'kitsune/sumo/static/styleguide-examples/field_toggle.njk' %}
{% include 'kitsune/sumo/static/styleguide-examples/field_range.njk' %}
{% include 'styleguide-examples/field.njk' %}
{% include 'styleguide-examples/field_select.njk' %}
{% include 'styleguide-examples/field_textarea.njk' %}
{% include 'styleguide-examples/field_checkbox.njk' %}
{% include 'styleguide-examples/field_radio.njk' %}
{% include 'styleguide-examples/field_toggle.njk' %}
{% include 'styleguide-examples/field_range.njk' %}
{% include 'kitsune/sumo/static/styleguide-examples/button-wrap.njk' %}
{% include 'styleguide-examples/button-wrap.njk' %}
</form>

2
styleguide/styleguide-examples/nav.njk
Просмотреть файл

@ -3,7 +3,7 @@
<div class="mzp-c-navigation-l-content">
<div class="sumo-nav--container">
<div class="sumo-nav--logo">
<a href="/"><img src="static/sumo/img/mozilla-support.svg" alt="Mozilla Support Logo"/></a>
<a href="/"><img src="{{ webpack_static('sumo/img/mozilla-support.svg') }}" alt="Mozilla Support Logo"/></a>
</div>
<button data-sumo-toggle-nav="#search-navigation" class="sumo-nav--search-button" type="button" aria-controls="search-navigation">Search</button>