Skip to content

D
default2
Commit 7c23e46b authored by Yuri Bondarenko's avatar Yuri Bondarenko
Browse files
Options

add xslt

parent 0858877f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 414 additions and 412 deletions
gulpfile.js
View file @ 7c23e46b
...@@ -3,9 +3,10 @@ ...@@ -3,9 +3,10 @@
const gulp = require( 'gulp' ); // Собственно gulp const gulp = require( 'gulp' ); // Собственно gulp
const pump = require( 'pump' ); // отслеживание ошибок const pump = require( 'pump' ); // отслеживание ошибок
const include = require( 'gulp-file-include' ); // включение файлов
const clean = require( 'gulp-clean' ); // удаление файлов и каталогов const clean = require( 'gulp-clean' ); // удаление файлов и каталогов
const xslt = require( 'gulp-xslt' );
const postcss = require( 'gulp-postcss' ); // Пост-обработка CSS const postcss = require( 'gulp-postcss' ); // Пост-обработка CSS
const postcssPresetEnv = require( 'postcss-preset-env' ); // CSS Next const postcssPresetEnv = require( 'postcss-preset-env' ); // CSS Next
const atImport = require('postcss-import'); // парсинг и включение импорта CSS const atImport = require('postcss-import'); // парсинг и включение импорта CSS
...@@ -153,18 +154,8 @@ gulp.task( 'dev:html', function( cb ){ ...@@ -153,18 +154,8 @@ gulp.task( 'dev:html', function( cb ){
// HTML // HTML
pump([ pump([
gulp.src( [ gulp.src( './src/**/*.xml' ),
'./src/**/*.html', xslt( './src/components/common/common.xsl' ),
'!./src/assets/*.html',
'!./src/components/**/*.html']
),
include({
prefix: '@@',
basepath: '@file',
context: {
rev: +new Date
}
}),
gulp.dest( './dev' ) gulp.dest( './dev' )
], cb ); ], cb );
...@@ -181,18 +172,8 @@ gulp.task( 'dev:html', function( cb ){ ...@@ -181,18 +172,8 @@ gulp.task( 'dev:html', function( cb ){
// HTML для prod // HTML для prod
gulp.task( 'prod:html', function( cb ){ gulp.task( 'prod:html', function( cb ){
pump([ pump([
gulp.src([ gulp.src( './src/**/*.xml' ),
'./src/**/*.html', xslt( './src/components/common/common.xsl' ),
'!./src/assets/*.html',
'!./src/components/**/*.html'
]),
include({
prefix: '@@',
basepath: '@file',
context: {
rev: +new Date
}
}),
gulp.dest( './prod' ) gulp.dest( './prod' )
], cb ); ], cb );
...@@ -224,8 +205,7 @@ gulp.task( 'DEV', [ 'dev:img', 'dev:css', 'dev:js', 'dev:html' ], function() { ...@@ -224,8 +205,7 @@ gulp.task( 'DEV', [ 'dev:img', 'dev:css', 'dev:js', 'dev:html' ], function() {
gulp.watch( './src/components/**/*.js', [ 'dev:js' ] ).on('change', browserSync.reload); gulp.watch( './src/components/**/*.js', [ 'dev:js' ] ).on('change', browserSync.reload);
gulp.watch( './dev/assets/js/**/*' ).on('change', browserSync.reload); gulp.watch( './dev/assets/js/**/*' ).on('change', browserSync.reload);
gulp.watch( './src/**/*.html', [ 'dev:html' ] ); gulp.watch( './src/**/*.xml', [ 'dev:html' ] );
gulp.watch( './src/components/**/*.html', [ 'dev:html' ] );
gulp.watch( './dev/*.html' ).on('change', browserSync.reload); gulp.watch( './dev/*.html' ).on('change', browserSync.reload);
gulp.watch( './src/assets/img/**/*', [ 'dev:img' ] ); gulp.watch( './src/assets/img/**/*', [ 'dev:img' ] );
......
package-lock.json
View file @ 7c23e46b
This diff is collapsed.
package.json
View file @ 7c23e46b
...@@ -14,11 +14,11 @@ ...@@ -14,11 +14,11 @@
"gulp": "^3.9.1", "gulp": "^3.9.1",
"gulp-cache": "^1.0.2", "gulp-cache": "^1.0.2",
"gulp-clean": "^0.4.0", "gulp-clean": "^0.4.0",
"gulp-file-include": "^2.0.1",
"gulp-image": "^4.4.1", "gulp-image": "^4.4.1",
"gulp-postcss": "^8.0.0", "gulp-postcss": "^8.0.0",
"gulp-sftp": "^0.1.5", "gulp-sftp": "^0.1.5",
"gulp-sourcemaps": "^2.6.4", "gulp-sourcemaps": "^2.6.4",
"gulp-xslt": "^5.0.0",
"htmlhint": "^0.10.1", "htmlhint": "^0.10.1",
"postcss-import": "^12.0.1", "postcss-import": "^12.0.1",
"postcss-preset-env": "^6.4.0", "postcss-preset-env": "^6.4.0",
...@@ -26,8 +26,5 @@ ...@@ -26,8 +26,5 @@
"stylelint": "^9.9.0", "stylelint": "^9.9.0",
"webpack-stream": "^5.2.1" "webpack-stream": "^5.2.1"
}, },
"dependencies": { "dependencies": {}
"swiper": "^4.4.2",
"ymaps": "^0.1.1"
}
} }
src/components/Index/Index.xsl 0 → 100644
View file @ 7c23e46b
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- Index -->
<xsl:template match="Index">
<h1>
Index
</h1>
</xsl:template>
</xsl:stylesheet>
\ No newline at end of file
src/components/common/common.xsl 0 → 100644
View file @ 7c23e46b
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- Импорты -->
<xsl:import href="../Index/Index.xsl" />
<!-- Базовый шаблон -->
<xsl:template match="/">
<html lang="ru">
<head>
<title>Default 2</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/assets/css/app.css" />
</head>
<body>
<xsl:apply-temlates />
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,fetch"></script>
<script src="/assets/js/app.js"></script>
</body>
</html>
</xsl:template>
<!--
Идентичное преобразование
-->
<xsl:template match="*" priority="0.5">
<xsl:element name="{name()}">
<xsl:apply-templates select="* | @* | text()" />
</xsl:element>
</xsl:template>
<xsl:template match="@*" priority="0.5">
<xsl:attribute name="{name()}">
<xsl:value-of select="."/>
</xsl:attribute>
</xsl:template>
</xsl:stylesheet>
\ No newline at end of file
src/components/component/index.js
View file @ 7c23e46b
...@@ -63,7 +63,7 @@ export default class Component { ...@@ -63,7 +63,7 @@ export default class Component {
if (!(y instanceof Object)) { return false; } if (!(y instanceof Object)) { return false; }
// recursive object equality check // recursive object equality check
var p = Object.keys(x); let p = Object.keys(x);
return Object.keys(y).every(function (i) { return p.indexOf(i) !== -1; }) && return Object.keys(y).every(function (i) { return p.indexOf(i) !== -1; }) &&
p.every(function (i) { return this.objectEquals(x[i], y[i]); }); p.every(function (i) { return this.objectEquals(x[i], y[i]); });
} }
......
src/components/swiper/index.html deleted 100644 → 0
View file @ 0858877f
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper"></div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
\ No newline at end of file
src/components/swiper/index.js deleted 100644 → 0
View file @ 0858877f
import Component from '../component';
import { Swiper, Navigation, Pagination } from 'swiper/dist/js/swiper.esm.js';
Swiper.use([Navigation, Pagination]);
export default class SwiperSlider extends Component {
/**
* Инициализируем свайпер
* @param {object} props параметры свайпера
*/
constructor( props = {
selector: '.swiper-container',
options: {
spaceBetween: 10,
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
}
} ){
super( props );
this.loadData();
}
/**
* загружаем данные
*/
loadData(){
fetch( 'https://moscowseasons.com/graphql', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
'operationName': 'albums',
'variables': {
'after': null,
'before': null,
'first': 10,
'last': null,
'locale': 'RU'
},
'query':
`query albums($locale: Locale, $after: String, $first: Int, $before: String, $last: Int) {
albums(locale: $locale, after: $after, first: $first, before: $before, last: $last) {
edges {
node {
id
title
photos {
id
url
resized(width: 1200, height: 800) {
url
__typename
}
__typename
}
count
__typename
}
__typename
}
pageInfo {
hasNextPage
startCursor
endCursor
__typename
}
__typename
}
}`
})
})
.then( ( response ) => {
return response.json();
})
.then( ( data ) => {
let slides = [];
data.data.albums.edges.forEach( ( album, index ) => {
const slide = `<div class="swiper-slide">
<h3>Swiper ${index}</h3>
<p>Swiper ${index} slide</p>
<img src="${album.node.photos[0].resized.url}" alt="${album.node.title}" />
</div>`;
slides[index] = slide;
});
this.setState({
slides: slides
});
});
}
/**
* рендерим свайпер
*/
render(){
if( this.swiper ){
this.swiper.destroy( true, true );
}
this.swiper = new Swiper( this.props.selector, this.props.options );
this.swiper.appendSlide( this.state.slides );
}
}
\ No newline at end of file
src/components/swiper/swiper.css deleted 100644 → 0
View file @ 0858877f
.swiper-container {
width: 600px;
height: 500px;
}
.swiper-slide {
& img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
/* NEW CSS */
@custom-media --viewport-medium (width <= 50rem);
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:root {
--fontSize: 1rem;
--mainColor: #12345678;
--secondaryColor: lab(32.5 38.5 -47.6 / 90%);
}
html {
overflow: hidden auto;
}
@media (--viewport-medium) {
body {
color: var(--mainColor);
font-family: system-ui;
font-size: var(--fontSize);
line-height: calc(var(--fontSize) * 1.5);
overflow-wrap: break-word;
padding-inline: calc(var(--fontSize) / 2 + 1px);
}
}
:--heading {
margin-block: 0;
}
.hero:matches(main, .main) {
background-image: image-set("img/background.jpg" 1x, "img/background-2x.jpg" 2x);
}
a {
color: rgb(0 0 100% / 90%);
&:hover {
color: rebeccapurple;
}
}
\ No newline at end of file
src/components/ymaps/index.html deleted 100644 → 0
View file @ 0858877f
<div class="ymaps-container">
<h2>Yandex Maps</h2>
<div id="map"></div>
</div>
\ No newline at end of file
src/components/ymaps/index.js deleted 100644 → 0
View file @ 0858877f
import ymaps from 'ymaps';
import Component from '../component';
export default class YMaps extends Component {
constructor( props = {
selector: '#map',
lat: -8.369326,
lon: 115.166023
}){
super( props );
this.loadMap();
}
/**
* Загружаем карту
*/
loadMap(){
const el = document.querySelector( this.props.selector );
this.props.mapInstance = new ymaps.Map(
el,
{
center: [55.757, 37.62233],
zoom: 11
}
);
}
/**
*
*/
render(){
return false;
}
}
\ No newline at end of file
src/components/ymaps/ymaps.css deleted 100644 → 0
View file @ 0858877f
.ymaps-container {
padding: 50px 0;
}
#map {
width: 600px;
height: 400px;
}
\ No newline at end of file
src/index.html deleted 100644 → 0
View file @ 0858877f
<!doctype html>
<html lang="ru">
<head>
<title>Default 2</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/assets/css/app.css?@@rev" />
</head>
<body>
@@include( './components/swiper/index.html' )
@@include( './components/ymaps/index.html' )
<script src="https://api-maps.yandex.ru/2.1/?apikey=fa88ed96-7c2b-4d07-8e74-1ac86a9ac3fd&lang=ru_RU" type="text/javascript"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,fetch"></script>
<script src="/assets/js/app.js?@@rev"></script>
</body>
</html>
src/index.xml 0 → 100644
View file @ 7c23e46b
<?xml version="1.0"?>
<Index>
<Topbar>
<Logo href="/" src="logo.svg" />
</Topbar>
</Index>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment