mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-30 21:57:34 +00:00
ea2bcd44f2
- Update package.json with the new dependencies. - A script storybook.sh pulls down CSS and LESS imports from external dependencies. This copies the approach taken in Popups and MobileFrontend. - Icons from external repos are maintained within the repo in SVG-only form. Using load.php modules is also possible, but will pull down other unnecessary icons and break if any of these modules are changed. Decided that we should manually maintain these for the time being given there are only 3 icons. - Several LESS files now import the variables file. I think it's useful for stories to only import the CSS they use as this encourages us to modularise our CSS. Before these imports were not necessary as they inherit imports from index.less. This will have no impact on the bundle size as the LESS compiler silently discards duplicate imports - stories/utils.js provides a useful placeholder function for generalising our hook entry points. Bug: T242674 Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
76 lines
3.8 KiB
JavaScript
76 lines
3.8 KiB
JavaScript
import mustache from 'mustache';
|
||
import { htmluserlangattributes } from './utils';
|
||
import skinTemplate from '!!raw-loader!../includes/templates/index.mustache';
|
||
import { placeholder } from './utils';
|
||
|
||
import '../resources/skins.vector.styles/screen.less';
|
||
import { navigationLoggedOutWithVariants, navigationLoggedInWithMore } from './navigation.stories';
|
||
import { footer } from './footer.stories';
|
||
|
||
export default {
|
||
title: 'Skin'
|
||
};
|
||
|
||
const HTML_INDICATORS = `<div class="mw-indicators mw-body-content">
|
||
<div id="mw-indicator-good-star" class="mw-indicator">
|
||
<a href="/wiki/Wikipedia:Good_articles"
|
||
title="This is a good article. Follow the link for more information.">
|
||
<img alt="This is a good article. Follow the link for more information."
|
||
src="//upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/19px-Symbol_support_vote.svg.png" decoding="async" width="19" height="20"
|
||
srcset="//upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/29px-Symbol_support_vote.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/39px-Symbol_support_vote.svg.png 2x" data-file-width="180" data-file-height="185" />
|
||
</a>
|
||
</div>
|
||
<div id="mw-indicator-pp-autoreview" class="mw-indicator">
|
||
<a href="/wiki/Wikipedia:Protection_policy#pending"
|
||
title="All edits by unregistered and new users are subject to review prior to becoming visible to unregistered users">
|
||
<img alt="Page protected with pending changes" src="//upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/20px-Pending-protection-shackle.svg.png"
|
||
decoding="async" width="20" height="20" srcset="//upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/30px-Pending-protection-shackle.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/40px-Pending-protection-shackle.svg.png 2x" data-file-width="512" data-file-height="512" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
export const vector2019LoggedOut = () => mustache.render( skinTemplate, {
|
||
'html-title': 'Vector 2019',
|
||
'page-isarticle': true,
|
||
'msg-tagline': 'From Wikipedia, the free encyclopedia',
|
||
'html-userlangattributes': htmluserlangattributes,
|
||
'msg-jumptonavigation': 'Jump to navigation',
|
||
'msg-jumptosearch': 'Jump to search',
|
||
'html-navigation': navigationLoggedOutWithVariants(),
|
||
|
||
// site specific
|
||
'html-footer': footer(),
|
||
'html-sitenotice': placeholder( 'a site notice or central notice banner may go here', 70 ),
|
||
|
||
// article dependent
|
||
'html-bodycontent': placeholder( 'Article content goes here' ),
|
||
'html-printfooter': `Retrieved from ‘<a dir="ltr" href="#">https://en.wikipedia.org/w/index.php?title=this&oldid=blah</a>’`,
|
||
'html-catlinks': placeholder( 'Category links component from mediawiki core', 50 ),
|
||
|
||
// extension dependent..
|
||
'html-hook-vector-before-footer': placeholder( 'VectorBeforeFooter hook output', 100 ),
|
||
'html-dataAfterContent': placeholder( 'Extensions can add here e.g. Related Articles.', 100 ),
|
||
'html-indicators': HTML_INDICATORS,
|
||
'html-subtitle': placeholder( 'Extensions can configure subtitle', 20 )
|
||
} );
|
||
|
||
export const vector2019LoggedIn = () => mustache.render( skinTemplate, {
|
||
'html-title': 'Vector 2019',
|
||
'page-isarticle': true,
|
||
'msg-tagline': 'From Wikipedia, the free encyclopedia',
|
||
'html-userlangattributes': htmluserlangattributes,
|
||
'msg-jumptonavigation': 'Jump to navigation',
|
||
'msg-jumptosearch': 'Jump to search',
|
||
'html-navigation': navigationLoggedInWithMore(),
|
||
|
||
// site specific
|
||
'html-footer': footer(),
|
||
'html-sitenotice': placeholder( 'a site notice or central notice banner may go here', 70 ),
|
||
|
||
// article dependent
|
||
'html-bodycontent': placeholder( 'Article content goes here' ),
|
||
'html-printfooter': `Retrieved from ‘<a dir="ltr" href="#">https://en.wikipedia.org/w/index.php?title=this&oldid=blah</a>’`,
|
||
'html-catlinks': placeholder( 'Category links component from mediawiki core', 50 )
|
||
} );
|