67 | ```
68 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Mozilla Public License Version 2.0
2 | ==================================
3 |
4 | 1. Definitions
5 | --------------
6 |
7 | 1.1. "Contributor"
8 | means each individual or legal entity that creates, contributes to
9 | the creation of, or owns Covered Software.
10 |
11 | 1.2. "Contributor Version"
12 | means the combination of the Contributions of others (if any) used
13 | by a Contributor and that particular Contributor's Contribution.
14 |
15 | 1.3. "Contribution"
16 | means Covered Software of a particular Contributor.
17 |
18 | 1.4. "Covered Software"
19 | means Source Code Form to which the initial Contributor has attached
20 | the notice in Exhibit A, the Executable Form of such Source Code
21 | Form, and Modifications of such Source Code Form, in each case
22 | including portions thereof.
23 |
24 | 1.5. "Incompatible With Secondary Licenses"
25 | means
26 |
27 | (a) that the initial Contributor has attached the notice described
28 | in Exhibit B to the Covered Software; or
29 |
30 | (b) that the Covered Software was made available under the terms of
31 | version 1.1 or earlier of the License, but not also under the
32 | terms of a Secondary License.
33 |
34 | 1.6. "Executable Form"
35 | means any form of the work other than Source Code Form.
36 |
37 | 1.7. "Larger Work"
38 | means a work that combines Covered Software with other material, in
39 | a separate file or files, that is not Covered Software.
40 |
41 | 1.8. "License"
42 | means this document.
43 |
44 | 1.9. "Licensable"
45 | means having the right to grant, to the maximum extent possible,
46 | whether at the time of the initial grant or subsequently, any and
47 | all of the rights conveyed by this License.
48 |
49 | 1.10. "Modifications"
50 | means any of the following:
51 |
52 | (a) any file in Source Code Form that results from an addition to,
53 | deletion from, or modification of the contents of Covered
54 | Software; or
55 |
56 | (b) any new file in Source Code Form that contains any Covered
57 | Software.
58 |
59 | 1.11. "Patent Claims" of a Contributor
60 | means any patent claim(s), including without limitation, method,
61 | process, and apparatus claims, in any patent Licensable by such
62 | Contributor that would be infringed, but for the grant of the
63 | License, by the making, using, selling, offering for sale, having
64 | made, import, or transfer of either its Contributions or its
65 | Contributor Version.
66 |
67 | 1.12. "Secondary License"
68 | means either the GNU General Public License, Version 2.0, the GNU
69 | Lesser General Public License, Version 2.1, the GNU Affero General
70 | Public License, Version 3.0, or any later versions of those
71 | licenses.
72 |
73 | 1.13. "Source Code Form"
74 | means the form of the work preferred for making modifications.
75 |
76 | 1.14. "You" (or "Your")
77 | means an individual or a legal entity exercising rights under this
78 | License. For legal entities, "You" includes any entity that
79 | controls, is controlled by, or is under common control with You. For
80 | purposes of this definition, "control" means (a) the power, direct
81 | or indirect, to cause the direction or management of such entity,
82 | whether by contract or otherwise, or (b) ownership of more than
83 | fifty percent (50%) of the outstanding shares or beneficial
84 | ownership of such entity.
85 |
86 | 2. License Grants and Conditions
87 | --------------------------------
88 |
89 | 2.1. Grants
90 |
91 | Each Contributor hereby grants You a world-wide, royalty-free,
92 | non-exclusive license:
93 |
94 | (a) under intellectual property rights (other than patent or trademark)
95 | Licensable by such Contributor to use, reproduce, make available,
96 | modify, display, perform, distribute, and otherwise exploit its
97 | Contributions, either on an unmodified basis, with Modifications, or
98 | as part of a Larger Work; and
99 |
100 | (b) under Patent Claims of such Contributor to make, use, sell, offer
101 | for sale, have made, import, and otherwise transfer either its
102 | Contributions or its Contributor Version.
103 |
104 | 2.2. Effective Date
105 |
106 | The licenses granted in Section 2.1 with respect to any Contribution
107 | become effective for each Contribution on the date the Contributor first
108 | distributes such Contribution.
109 |
110 | 2.3. Limitations on Grant Scope
111 |
112 | The licenses granted in this Section 2 are the only rights granted under
113 | this License. No additional rights or licenses will be implied from the
114 | distribution or licensing of Covered Software under this License.
115 | Notwithstanding Section 2.1(b) above, no patent license is granted by a
116 | Contributor:
117 |
118 | (a) for any code that a Contributor has removed from Covered Software;
119 | or
120 |
121 | (b) for infringements caused by: (i) Your and any other third party's
122 | modifications of Covered Software, or (ii) the combination of its
123 | Contributions with other software (except as part of its Contributor
124 | Version); or
125 |
126 | (c) under Patent Claims infringed by Covered Software in the absence of
127 | its Contributions.
128 |
129 | This License does not grant any rights in the trademarks, service marks,
130 | or logos of any Contributor (except as may be necessary to comply with
131 | the notice requirements in Section 3.4).
132 |
133 | 2.4. Subsequent Licenses
134 |
135 | No Contributor makes additional grants as a result of Your choice to
136 | distribute the Covered Software under a subsequent version of this
137 | License (see Section 10.2) or under the terms of a Secondary License (if
138 | permitted under the terms of Section 3.3).
139 |
140 | 2.5. Representation
141 |
142 | Each Contributor represents that the Contributor believes its
143 | Contributions are its original creation(s) or it has sufficient rights
144 | to grant the rights to its Contributions conveyed by this License.
145 |
146 | 2.6. Fair Use
147 |
148 | This License is not intended to limit any rights You have under
149 | applicable copyright doctrines of fair use, fair dealing, or other
150 | equivalents.
151 |
152 | 2.7. Conditions
153 |
154 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
155 | in Section 2.1.
156 |
157 | 3. Responsibilities
158 | -------------------
159 |
160 | 3.1. Distribution of Source Form
161 |
162 | All distribution of Covered Software in Source Code Form, including any
163 | Modifications that You create or to which You contribute, must be under
164 | the terms of this License. You must inform recipients that the Source
165 | Code Form of the Covered Software is governed by the terms of this
166 | License, and how they can obtain a copy of this License. You may not
167 | attempt to alter or restrict the recipients' rights in the Source Code
168 | Form.
169 |
170 | 3.2. Distribution of Executable Form
171 |
172 | If You distribute Covered Software in Executable Form then:
173 |
174 | (a) such Covered Software must also be made available in Source Code
175 | Form, as described in Section 3.1, and You must inform recipients of
176 | the Executable Form how they can obtain a copy of such Source Code
177 | Form by reasonable means in a timely manner, at a charge no more
178 | than the cost of distribution to the recipient; and
179 |
180 | (b) You may distribute such Executable Form under the terms of this
181 | License, or sublicense it under different terms, provided that the
182 | license for the Executable Form does not attempt to limit or alter
183 | the recipients' rights in the Source Code Form under this License.
184 |
185 | 3.3. Distribution of a Larger Work
186 |
187 | You may create and distribute a Larger Work under terms of Your choice,
188 | provided that You also comply with the requirements of this License for
189 | the Covered Software. If the Larger Work is a combination of Covered
190 | Software with a work governed by one or more Secondary Licenses, and the
191 | Covered Software is not Incompatible With Secondary Licenses, this
192 | License permits You to additionally distribute such Covered Software
193 | under the terms of such Secondary License(s), so that the recipient of
194 | the Larger Work may, at their option, further distribute the Covered
195 | Software under the terms of either this License or such Secondary
196 | License(s).
197 |
198 | 3.4. Notices
199 |
200 | You may not remove or alter the substance of any license notices
201 | (including copyright notices, patent notices, disclaimers of warranty,
202 | or limitations of liability) contained within the Source Code Form of
203 | the Covered Software, except that You may alter any license notices to
204 | the extent required to remedy known factual inaccuracies.
205 |
206 | 3.5. Application of Additional Terms
207 |
208 | You may choose to offer, and to charge a fee for, warranty, support,
209 | indemnity or liability obligations to one or more recipients of Covered
210 | Software. However, You may do so only on Your own behalf, and not on
211 | behalf of any Contributor. You must make it absolutely clear that any
212 | such warranty, support, indemnity, or liability obligation is offered by
213 | You alone, and You hereby agree to indemnify every Contributor for any
214 | liability incurred by such Contributor as a result of warranty, support,
215 | indemnity or liability terms You offer. You may include additional
216 | disclaimers of warranty and limitations of liability specific to any
217 | jurisdiction.
218 |
219 | 4. Inability to Comply Due to Statute or Regulation
220 | ---------------------------------------------------
221 |
222 | If it is impossible for You to comply with any of the terms of this
223 | License with respect to some or all of the Covered Software due to
224 | statute, judicial order, or regulation then You must: (a) comply with
225 | the terms of this License to the maximum extent possible; and (b)
226 | describe the limitations and the code they affect. Such description must
227 | be placed in a text file included with all distributions of the Covered
228 | Software under this License. Except to the extent prohibited by statute
229 | or regulation, such description must be sufficiently detailed for a
230 | recipient of ordinary skill to be able to understand it.
231 |
232 | 5. Termination
233 | --------------
234 |
235 | 5.1. The rights granted under this License will terminate automatically
236 | if You fail to comply with any of its terms. However, if You become
237 | compliant, then the rights granted under this License from a particular
238 | Contributor are reinstated (a) provisionally, unless and until such
239 | Contributor explicitly and finally terminates Your grants, and (b) on an
240 | ongoing basis, if such Contributor fails to notify You of the
241 | non-compliance by some reasonable means prior to 60 days after You have
242 | come back into compliance. Moreover, Your grants from a particular
243 | Contributor are reinstated on an ongoing basis if such Contributor
244 | notifies You of the non-compliance by some reasonable means, this is the
245 | first time You have received notice of non-compliance with this License
246 | from such Contributor, and You become compliant prior to 30 days after
247 | Your receipt of the notice.
248 |
249 | 5.2. If You initiate litigation against any entity by asserting a patent
250 | infringement claim (excluding declaratory judgment actions,
251 | counter-claims, and cross-claims) alleging that a Contributor Version
252 | directly or indirectly infringes any patent, then the rights granted to
253 | You by any and all Contributors for the Covered Software under Section
254 | 2.1 of this License shall terminate.
255 |
256 | 5.3. In the event of termination under Sections 5.1 or 5.2 above, all
257 | end user license agreements (excluding distributors and resellers) which
258 | have been validly granted by You or Your distributors under this License
259 | prior to termination shall survive termination.
260 |
261 | ************************************************************************
262 | * *
263 | * 6. Disclaimer of Warranty *
264 | * ------------------------- *
265 | * *
266 | * Covered Software is provided under this License on an "as is" *
267 | * basis, without warranty of any kind, either expressed, implied, or *
268 | * statutory, including, without limitation, warranties that the *
269 | * Covered Software is free of defects, merchantable, fit for a *
270 | * particular purpose or non-infringing. The entire risk as to the *
271 | * quality and performance of the Covered Software is with You. *
272 | * Should any Covered Software prove defective in any respect, You *
273 | * (not any Contributor) assume the cost of any necessary servicing, *
274 | * repair, or correction. This disclaimer of warranty constitutes an *
275 | * essential part of this License. No use of any Covered Software is *
276 | * authorized under this License except under this disclaimer. *
277 | * *
278 | ************************************************************************
279 |
280 | ************************************************************************
281 | * *
282 | * 7. Limitation of Liability *
283 | * -------------------------- *
284 | * *
285 | * Under no circumstances and under no legal theory, whether tort *
286 | * (including negligence), contract, or otherwise, shall any *
287 | * Contributor, or anyone who distributes Covered Software as *
288 | * permitted above, be liable to You for any direct, indirect, *
289 | * special, incidental, or consequential damages of any character *
290 | * including, without limitation, damages for lost profits, loss of *
291 | * goodwill, work stoppage, computer failure or malfunction, or any *
292 | * and all other commercial damages or losses, even if such party *
293 | * shall have been informed of the possibility of such damages. This *
294 | * limitation of liability shall not apply to liability for death or *
295 | * personal injury resulting from such party's negligence to the *
296 | * extent applicable law prohibits such limitation. Some *
297 | * jurisdictions do not allow the exclusion or limitation of *
298 | * incidental or consequential damages, so this exclusion and *
299 | * limitation may not apply to You. *
300 | * *
301 | ************************************************************************
302 |
303 | 8. Litigation
304 | -------------
305 |
306 | Any litigation relating to this License may be brought only in the
307 | courts of a jurisdiction where the defendant maintains its principal
308 | place of business and such litigation shall be governed by laws of that
309 | jurisdiction, without reference to its conflict-of-law provisions.
310 | Nothing in this Section shall prevent a party's ability to bring
311 | cross-claims or counter-claims.
312 |
313 | 9. Miscellaneous
314 | ----------------
315 |
316 | This License represents the complete agreement concerning the subject
317 | matter hereof. If any provision of this License is held to be
318 | unenforceable, such provision shall be reformed only to the extent
319 | necessary to make it enforceable. Any law or regulation which provides
320 | that the language of a contract shall be construed against the drafter
321 | shall not be used to construe this License against a Contributor.
322 |
323 | 10. Versions of the License
324 | ---------------------------
325 |
326 | 10.1. New Versions
327 |
328 | Mozilla Foundation is the license steward. Except as provided in Section
329 | 10.3, no one other than the license steward has the right to modify or
330 | publish new versions of this License. Each version will be given a
331 | distinguishing version number.
332 |
333 | 10.2. Effect of New Versions
334 |
335 | You may distribute the Covered Software under the terms of the version
336 | of the License under which You originally received the Covered Software,
337 | or under the terms of any subsequent version published by the license
338 | steward.
339 |
340 | 10.3. Modified Versions
341 |
342 | If you create software not governed by this License, and you want to
343 | create a new license for such software, you may create and use a
344 | modified version of this License if you rename the license and remove
345 | any references to the name of the license steward (except to note that
346 | such modified license differs from this License).
347 |
348 | 10.4. Distributing Source Code Form that is Incompatible With Secondary
349 | Licenses
350 |
351 | If You choose to distribute Source Code Form that is Incompatible With
352 | Secondary Licenses under the terms of this version of the License, the
353 | notice described in Exhibit B of this License must be attached.
354 |
355 | Exhibit A - Source Code Form License Notice
356 | -------------------------------------------
357 |
358 | This Source Code Form is subject to the terms of the Mozilla Public
359 | License, v. 2.0. If a copy of the MPL was not distributed with this
360 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
361 |
362 | If it is not possible or desirable to put the notice in a particular
363 | file, then You may include the notice in a location (such as a LICENSE
364 | file in a relevant directory) where a recipient would be likely to look
365 | for such a notice.
366 |
367 | You may add additional accurate notices of copyright ownership.
368 |
369 | Exhibit B - "Incompatible With Secondary Licenses" Notice
370 | ---------------------------------------------------------
371 |
372 | This Source Code Form is "Incompatible With Secondary Licenses", as
373 | defined by the Mozilla Public License, v. 2.0.
374 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # TurboExtensions
2 | Расширенные возможности стилизации средствами CSS.
3 |
4 | [](https://travis-ci.com/turboext/css)
5 |
6 | # Инструменты разработчика
7 | ## DevServer
8 | Пререквизиты — [node.js 8.x](https://nodejs.org/en/) или [nvm](https://github.com/creationix/nvm).
9 |
10 | ### Установка:
11 | ```
12 | git clone https://github.com/turboext/css.git
13 | cd css
14 | npm install
15 | npm start
16 | ```
17 |
18 | Локальный запуск тестов — `npm test`.
19 |
20 | ### Возможности:
21 | * автоматическое применение стилей без необходимости перезагружать страницу
22 | * возможность открыть локальную бету на мобильном телефоне
23 | * написание стилей в синтаксисе CSS или SCSS с использованием препроцессора postcss.
24 |
25 | ### Использование:
26 | Допустим, вы хотите поменя стили для сайта `https://rozhdestvenskiy.ru`. Порядок действий следующий:
27 | * создать директорию `hosts/rozhdestvenskiy.ru` (дальше все действия будут происходить внутри этой директории);
28 | * внутри этой директории создать файл `HOSTS.yaml`
29 | * указать там название домен сайта, который используется в турбо-страницах:
30 | ```yaml
31 | - https://rozhdestvenskiy.ru
32 | ```
33 | * создать файл `style.css` или `style.scss`
34 | * запустить dev-server
35 | * открыть http://localhost:3000 и выбрать адрес вашей турбо-страницы, например: `https://rozhdestvenskiy.ru/`, или `https://yandex.ru/turbo?text=https://rozhdestvenskiy.ru/`;
36 | * внести изменения в файл стилей;
37 | * изменения стилей будут применены автоматически.
38 |
39 | #### Дополнительные возможности DevServer
40 | * `TURBO_HOST=https://some-host.yandex.ru npm start` — возможность ходить за данными на отличный от `https://yandex.ru` сервер;
41 | * `&hostname=https://example.com` — форсировать применение стилей для выбранного хоста, даже если url турбо-страницы отличается от него;
42 | * `&disable=1` — отключить подмену CSS (может быть удобно для тестирования страницы в iframe).
43 |
44 | ### Livereload
45 | По-умолчанию включён livereload режим, в котором изменения применяются автоматически без обновления страницы. Если с ним возникают сложности, нужно запустить сервер с переменной окружения `LIVERELOAD=false`:
46 | * mac os x / linux — `LIVERELOAD=false npm start`
47 | * windows — `set LIVERELOAD=false && npm start`
48 |
49 | ### Отладка на мобильном телефоне
50 | Существует два варианта:
51 | * дождаться сборки автоматической беты в PR и использовать ссылки из описания PR
52 | * для доступа к локальной бете с мобильного телефона можно использовать встроенное тунеллирование на базе ngrok:
53 | * mac os x / linux — `PUBLIC=true npm start` или `npm run public`
54 | * windows — `set PUBLIC=true && npm start` или `npm run public`
55 |
56 | ### IFrame
57 | Турбо-страницы могут отображаться внутри iframe, например в Поиске, поэтому рекомендуется смотреть на результат изменения стилей в iframe. В случае изменения каркаса страницы, могут возникнуть проблемы наличием горизонтального скролла. Убрать его можно следующим образом:
58 | ```css
59 | .ua_frame_yes .page__container {
60 | overflow-x: hidden;
61 | }
62 | ```
63 |
64 | Для тестирования страницы внутри iframe — нужно использовать адрес `/frame`, `/frame-morda`, вместо `/turbo`. Ссылки на iframe будут доступны в PR.
65 |
66 | ## Прототипирование стилей в браузере
67 | 1. Установить расширенение [live editor for CSS](https://webextensions.org/) (или любое другое с похожими возможностями);
68 | 2. Зайти в браузере на турбо-страницу;
69 | 3. Написать CSS для нужных компонентов.
70 |
71 | 
72 |
73 | # Ограничения
74 | Ограничения указаны в [конфиге](stylelint.config.js) [stylelint](https://stylelint.io/):
75 | * нельзя использовать пользовательские шрифты;
76 | * нельзя использовать низкопроизводительную анимацию;
77 | * нельзя использовать селекторы по имени тэга;
78 | * нельзя использовать любые внешние ресурсы;
79 | * размер CSS в gzip ограничен 21KB.
80 |
81 | ## Deprecated
82 | * Селекторы на `.markup` и его производные в скором времени перестанут работать
83 |
84 | На code review могут быть указаны дополнительные требования к коду.
85 |
86 | **Важно:** список ограничений может меняться со временем.
87 |
88 | # Технические детали сборки
89 | * CSS код будет обработан с помощью [postcss](https://github.com/postcss/postcss). Настройки можно посмотреть в [конфигурационном файле](postcss.config.js).
90 | * Минимальные версии поддерживаемых браузеров
91 | * android 4
92 | * iOS 9
93 | * IE 11
94 | * Векторные изображения предпочтительнее растровых. Размер всех изображений должен быть оптимизирован до приемлемого уровня качества.
95 |
96 | Для оптимизации SVG рекомендуется использовать [svgo](https://www.npmjs.com/package/svgo) со следующими опциями: `svgo -p 2 --multipass --enable=removeDesc --enable=removeTitle --enable=sortAttrs --enable=removeViewBox --enable=removeStyleElement -i [PATH_TO_SVG]`.
97 |
98 | # Создание PR
99 | 1. Сделать fork репозитория;
100 | 1. Создать директорию `hosts/example.com`;
101 | 1. В директории должно быть несколько обязательных файлов — `HOSTS.yaml, OWNERS.yaml, style.css`. Возможен вариант `style.scss` для использования синтаксиса SCSS.
102 | * `HOSTS.yaml` должен быть указан домен для которых будут применяться текущие стили, например:
103 | ```yaml
104 | - https://rozhdestvenskiy.ru
105 | ```
106 | Протокол (http, https) обязателен. Фактически, это адрес сайта из https://webmaster.yandex.ru
107 | 
108 | * `OWNERS.yaml` должен содержать список логинов на https://github.com кому разрешено править стили для текущего домена, например:
109 | ```yaml
110 | - sbmaxx
111 | ```
112 | 1. Закоммитить изменения и создать PR в основной репозиторий. Желательно в тексте коммита указывать адрес сайта;
113 | 1. В описании PR добавьте несколько ссылок на ваши турбо-страницы;
114 | 1. Дождитесь создания автоматической беты. Ссылка на неё появится в описании PR через некоторое время после создания PR, проверьте на ней свои изменения;
115 | 1. Дождитесь прохождения линтеров;
116 | 1. Дождитесь прохождения ревью;
117 |
118 | # Когда я увижу это в production?
119 | Изменения будут доступны в production в течение 30 минут после вливания PR в master ветку. В случае возникновения каких-либо проблем, пишите в slack, мы сможем помочь оперативно откатить изменения или внести правки.
120 |
121 | # Внесение изменений в инфраструктурную часть
122 | 1. [Создать issue](https://github.com/turboext/css/issues/new) с описанием сути изменений;
123 | 1. Сделать branch в формате `issues/<номер_issue>`;
124 | 1. Закоммитить изменения и создать PR в основной репозиторий;
125 | 1. Связать PR и issue (например, c помощью комментария).
126 |
127 | # Поддержка разработчиков
128 | https://turbosupport.slack.com, доступ по [приглашениям](https://yandex.ru/turbo?text=turbosupport-slack-access).
129 |
--------------------------------------------------------------------------------
/cli/build.js:
--------------------------------------------------------------------------------
1 | const yaml = require('js-yaml');
2 | const fs = require('fs-extra');
3 | const { basename, join } = require('path');
4 | const postcss = require('../lib/postcss');
5 | const glob = require('glob');
6 |
7 | const pullRequestDir = process.argv[2] ? join('checkout', process.argv[2].replace('/', '-')) : '.';
8 |
9 | const css = {};
10 | const hosts = {};
11 |
12 | (async () => {
13 | try {
14 | if (!fs.existsSync(pullRequestDir)) {
15 | console.error(`Pull request directory "${pullRequestDir}" doesn't exists.`);
16 | process.exit(1);
17 | }
18 |
19 | const promises = glob.sync(`${pullRequestDir}/hosts/*/`).map(async dir => {
20 | console.log(`Processing ${basename(dir)}`);
21 | const key = basename(dir);
22 |
23 | const cssFile = join(dir, 'style.css');
24 | const scssFile = join(dir, 'style.scss');
25 | const style = fs.existsSync(scssFile) ? scssFile : fs.existsSync(cssFile) ? cssFile : '';
26 |
27 | css[key] = await postcss(style);
28 |
29 | yaml.safeLoad(fs.readFileSync(join(dir, 'HOSTS.yaml'), 'utf8'))
30 | .forEach(host => hosts[host] = key);
31 | });
32 |
33 | await Promise.all(promises);
34 |
35 | const output = join(pullRequestDir, 'build.json');
36 | fs.writeFileSync(output, JSON.stringify({ css, hosts }, null, 4));
37 |
38 | console.log(`Build was saved to ${output}`);
39 | } catch(e) {
40 | console.error(e);
41 | process.exit(1);
42 | }
43 | })();
44 |
--------------------------------------------------------------------------------
/cli/checkout.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs-extra');
2 | const { resolve } = require('path');
3 | const spawn = require('child_process').spawnSync;
4 |
5 | const [ pullRequest = 'master' ] = process.argv.slice(2);
6 | const checkoutDirectory = getCheckoutDirectory(pullRequest);
7 |
8 | const cwd = process.cwd();
9 |
10 | function getCheckoutDirectory(pull) {
11 | return resolve('checkout', pull.replace('/', '-'));
12 | }
13 |
14 | function exec(cmd, cwd = checkoutDirectory) {
15 | console.log(`${cwd} $ ${cmd}`);
16 | return spawn(cmd, { stdio: 'inherit', shell: true, cwd });
17 | }
18 |
19 | function clone() {
20 | const remotes = `
21 | [remote "origin"]
22 | fetch = +refs/heads/*:refs/remotes/origin/*
23 | fetch = +refs/pull/*/head:refs/remotes/origin/pull/*
24 | `.trim();
25 |
26 | exec(`git clone https://github.com/turboext/css.git ${checkoutDirectory}`, cwd);
27 | exec(`echo '${remotes}' >> .git/config`);
28 | exec('git fetch --all');
29 | }
30 |
31 | function checkout(pullRequest) {
32 | exec(`git checkout ${pullRequest}`);
33 | }
34 |
35 | if (fs.existsSync(checkoutDirectory)) {
36 | exec(`rm -rf ${checkoutDirectory}`);
37 | }
38 |
39 | clone();
40 | checkout(pullRequest);
41 |
--------------------------------------------------------------------------------
/cli/host-lint.js:
--------------------------------------------------------------------------------
1 | const chalk = require('chalk');
2 | const { basename } = require('path');
3 | const { list, validator } = require('../lib/hosts');
4 |
5 | const errors = list()
6 | .map(host => ({ host: basename(host), validation: validator(host) }))
7 | .filter(res => res.validation.length);
8 |
9 | errors.forEach(res => {
10 | const validation = res.validation.map(v => `— ${v.error} ${chalk.gray(`[${v.rule}]`)}`).join('\n— ');
11 | console.error(`${chalk.red.bold(res.host)} has errors:\n${validation}`);
12 | });
13 |
14 | if (errors.length) {
15 | process.exit(1);
16 | }
17 |
--------------------------------------------------------------------------------
/cli/minifier.js:
--------------------------------------------------------------------------------
1 | const postcss = require('../lib/postcss');
2 | const glob = require('glob');
3 | const fs = require('fs');
4 | const async = require('async');
5 | const path = require('path');
6 | const files = findTargets(process.argv[2]);
7 |
8 | const queue = async.queue(async ({ from, to }, callback) => {
9 | process.stdout.write(`Minify ${from}...`);
10 |
11 | try {
12 | const result = await postcss(from, to);
13 | fs.writeFileSync(to, result);
14 | process.stdout.write('ok');
15 | } catch(e) {
16 | process.stdout.write('failed');
17 | console.log(e);
18 | }
19 | console.log('');
20 |
21 | callback();
22 | }, 1);
23 |
24 | if (files.length !== 1) {
25 | queue.drain = () => console.log('All items has been minified');
26 | }
27 |
28 | queue.push(files.map(from => {
29 | const to = from.replace(/\.s?css$/, '.min.css');
30 | return { from, to };
31 | }));
32 |
33 | function findTargets(where) {
34 | if (where && where.endsWith('css')) {
35 | return where;
36 | }
37 |
38 | let search;
39 |
40 | if (where) {
41 | search = path.join(where, '*css');
42 | } else {
43 | search = path.resolve(__dirname, '../hosts/**/*css');
44 | }
45 |
46 | return glob.sync(search)
47 | .filter(file => where ? file.includes(where) : true)
48 | .filter(file => file.endsWith('css') && !file.endsWith('min.css'));
49 | }
50 |
--------------------------------------------------------------------------------
/cli/size-lint.js:
--------------------------------------------------------------------------------
1 | const size = require('../lib/size');
2 | const gzip = require('../lib/gzip');
3 | const clean = require('../lib/clean');
4 | const chalk = require('chalk');
5 |
6 | const BYTES = 21 * 1024; // 21 KB
7 |
8 | function toKB(bytes, precision = 2) {
9 | return (bytes / 1024).toFixed(precision);
10 | }
11 |
12 | function toKBStr(bytes, precision) {
13 | return toKB(bytes, precision) + ' KB';
14 | }
15 |
16 | async function run() {
17 | await gzip('hosts/**/*.min.css');
18 | const fileSizes = await size('hosts/**/*.gz');
19 |
20 | await clean('hosts/**/*.min.css');
21 | await clean('hosts/**/*.gz');
22 |
23 | const bigFiles = fileSizes.filter(file => file.size > BYTES);
24 |
25 | if (!bigFiles.length) {
26 | process.exit(0);
27 | }
28 |
29 | console.info(chalk.blue('[INFO]'), 'MaxSize:', toKBStr(BYTES));
30 |
31 | bigFiles.forEach(({ file, size }) => {
32 | console.error(
33 | chalk.red.bold('[ERROR]'),
34 | file, '—', toKBStr(size),
35 | chalk.red('(+' + toKBStr(size - BYTES) + ')')
36 | );
37 | });
38 |
39 | process.exit(1);
40 | }
41 |
42 | run();
43 |
--------------------------------------------------------------------------------
/docs/joinExperimentLocal.md:
--------------------------------------------------------------------------------
1 | ## Включить экспериментальную верстку Турбо-страниц при локальной разработке.
2 |
3 | ### Для включения эксперимента локально надо сделать несколько шагов:
4 |
5 | 1. Перейти по ссылке, включающей экспериментальную верстку, которая придет в письме. Например, она выглядит так https://yandex.ru/ecoo/safe/redirect?key=t79735.e1529793723.T42000.r2849369039.s1482BDA75603064E8FCBBC252F40A70E&to=https://yandex.ru/search/touch. Лучше делать это в режиме инкогнито, чтобы потом не пришлось чистить куки браузера.
6 | 2. После перехода по ссылке на странице Яндекса открыть средства разработчика и в консоли выполнить:
7 | ```
8 | var cookie = '';
9 | document.cookie.split('; ').forEach(function (c) {
10 | if (c.indexOf('yexp') === 0) cookie = c;
11 | });
12 | cookie.split('=')[1];
13 | ```
14 | , что выведет значение куки `yexp`. Также значение куки можно посмотреть на https://yandex.ru/internet в разделе 'Cookie вашего браузера'. Ее значение будет похоже на:
15 | ```
16 | t84403.e1532431671.s696DEA29A5EA77692C398594EE4B5686
17 | ```
18 | 3. При открытии локальной беты http://localhost:3000 открыть средства разработчика и в консоли выполнить:
19 | ```
20 | document.cookie='yexp=myCookie;'
21 | ```
22 | , где `myCookie` - строка, которую скопировали в предыдущем пункте.
23 |
24 | 4. После перезагрузки страницы будет включена экспериментальная верстка.
25 |
26 | ### Для выключения эксперимента:
27 |
28 | Если все действия выше делать не в режиме инкогнито, то после разработки экспериментальная верстка останется включенной по-умолчанию. Для того, чтобы ее выключить, надо почистить куки как на http://localhost:3000, так и на http://yandex.ru.
29 |
--------------------------------------------------------------------------------
/hosts/en.wikipedia.org/HOSTS.yaml:
--------------------------------------------------------------------------------
1 | - https://en.wikipedia.org
2 | - https://uk.wikipedia.org
3 | - https://tr.wikipedia.org
4 | - https://be.wikipedia.org
5 | - https://kk.wikipedia.org
6 | - https://tt.wikipedia.org
7 | - https://uz.wikipedia.org
8 |
--------------------------------------------------------------------------------
/hosts/en.wikipedia.org/OWNERS.yaml:
--------------------------------------------------------------------------------
1 | - sbmaxx
2 | - tenorok
3 |
--------------------------------------------------------------------------------
/hosts/en.wikipedia.org/style.scss:
--------------------------------------------------------------------------------
1 | /* stylelint-disable-next-line */
2 | @import "../wikipedia.org/style";
3 |
4 | .page .header > .link {
5 | background: transparent url('./wikipedia-wordmark-en.svg') no-repeat 0 50%;
6 | background-size: 116px 18px;
7 | width: 116px;
8 | }
9 |
--------------------------------------------------------------------------------
/hosts/en.wikipedia.org/wikipedia-wordmark-en.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/hosts/iz.ru/HOSTS.yaml:
--------------------------------------------------------------------------------
1 | - https://iz.ru
2 |
--------------------------------------------------------------------------------
/hosts/iz.ru/OWNERS.yaml:
--------------------------------------------------------------------------------
1 | - ifirsaev
2 | - i.firsaev
--------------------------------------------------------------------------------
/hosts/iz.ru/README.md:
--------------------------------------------------------------------------------
1 | Стилизация страницы поиска Yandex.Turbo сайта iz.ru
2 | ----------------------------------------------------
3 |
4 | Стилизация проводилась на основе типовой страницы результатов поиска:
5 | https://www.yandex.ru/search/touch/?text=%D0%B4%D0%B2%D0%BE%D1%80%D0%BA%D0%BE%D0%B2%D0%B8%D1%87%20%D0%B2%D1%8B%D0%B4%D0%B2%D0%B8%D0%BD%D1%83%D1%82%20%D0%B2%20%D1%81%D0%BE%D0%B2%D0%B5%D1%82%20%D0%B4%D0%B8%D1%80%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D0%BE%D0%B2%20%D1%80%D0%B6%D0%B4%20iz.ru&lr=213&mda=0
6 |
7 | ##### Верхняя панель
8 | Добавлен логотип iz.ru, лежит рядом с CSS-файлом.
9 | Добавлен градиентный фон и стилизована кнопка меню.
10 |
11 |
12 | ##### Всплывающее меню
13 | Стилизована панель всплывающего меню - изменен фон,
14 | цвет и базовое семейство шрифтов.
15 |
16 | ##### Контентная область
17 | Изменен размер заголовка, цвет и размер шрифта "автора статьи", размер шрифта,
18 | межстрочное расстояние параграфов контентной области, отступы.
19 |
20 | ##### Контентная область
21 | На примере тестовой площадки https://yandex.ru/turbo?text=custom-css-iz.ru
22 | были применены стили к блоку "Вам может быть интересно".
23 |
24 | ##### Футер
25 | Был стилизован футер, относительно тестового шаблона https://yandex.ru/turbo?text=custom-css-iz.ru
26 | Цвет, размер, межстрочное расстояние шрифтов, цвет фона и отступы.
--------------------------------------------------------------------------------
/hosts/iz.ru/iz-logo-full.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/hosts/iz.ru/style.css:
--------------------------------------------------------------------------------
1 | .page {
2 | font-family: "Fira Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
3 | }
4 | .modal .link {
5 | text-transform: uppercase;
6 | font-size: 16px;
7 | color: #fff;
8 | }
9 | .header.header {
10 | position: absolute;
11 | left: 0;
12 | width: 100%;
13 | border-width: 2px 0px;
14 | box-sizing: border-box;
15 | border-style: solid;
16 | padding: 9px 0;
17 | border-color: #9e4bbb transparent #2b143e;
18 | background: linear-gradient(180deg,#69389f,#351c58);
19 | }
20 | .header.header:before,
21 | .header.header:after {
22 | content: '';
23 | position: absolute;
24 | left: 0;
25 | height: 50%;
26 | width: 100%;
27 | }
28 | .header.header:before {
29 | background: linear-gradient(180deg,#78329d,#5c2a7f);
30 | top: 0;
31 | }
32 | .header.header:after {
33 | background: linear-gradient(180deg,#562875,#3a1955);
34 | border-top: 1px solid #5c2a7f;
35 | top: 50%;
36 | }
37 | .header_host .header-title {
38 | text-indent: -1000px;
39 | min-height: 28px;
40 | padding-top: 0;
41 | }
42 | .header .header__aside {
43 | z-index: 1;
44 | }
45 | .header.header > .link {
46 | background: transparent url('./iz-logo-full.svg') no-repeat 50%;
47 | background-size: 109px 25px;
48 | position: relative;
49 | z-index: 1;
50 | }
51 | .header__aside .sandwich-menu {
52 | width: 60px;
53 | margin-left: 0;
54 | }
55 | .header__aside .header-turbo {
56 | top: 11px;
57 | margin-right: 10px;
58 | }
59 | .header-turbo .header-turbo-icon {
60 | fill: #c0abce;
61 | }
62 | .header__aside .modal-handler {
63 | background: transparent;
64 | border-top: 0px none;
65 | position: relative;
66 | width: 60px;
67 | height: 46px;
68 | margin: 0 auto;
69 | }
70 | .sandwich-menu:before,
71 | .header__aside .modal-handler:before,
72 | .header__aside .modal-handler:after {
73 | content: '';
74 | position: absolute;
75 | background: white;
76 | width: 20px;
77 | margin: 0px 20px;
78 | height: 2px;
79 | left: 0;
80 | }
81 | .sandwich-menu:before {
82 | top: 16px;
83 | left: auto;
84 | right: 0;
85 | }
86 | .header__aside .modal-handler:before {
87 | top: 21px;
88 | }
89 | .header__aside .modal-handler:after {
90 | top: 26px;
91 | }
92 | .cover__content > .divider {
93 | padding-top: 52px;
94 | }
95 | .cover .title {
96 | font-size: 20px;
97 | line-height: normal;
98 | color: #000;
99 | }
100 | .cover .divier + .title {
101 | margin-top: 22px;
102 | margin-bottom: 22px;
103 | }
104 | .cover__content > .description {
105 | font-size: 14px;
106 | line-height: 1.1;
107 | vertical-align: top;
108 | }
109 | .cover .title+.description {
110 | margin-top: 10px;
111 | }
112 | .cover .description.description {
113 | color: #999;
114 | }
115 | .paragraph {
116 | font-size: 16px;
117 | line-height: 23px;
118 | margin-bottom: 15px;
119 | }
120 | .source .button_theme_default {
121 | background-color: #452963;
122 | color: #fff;
123 | border-radius: 0;
124 | }
125 | .table .table__cell {
126 | line-height: 1.1;
127 | }
128 | .table_style_divided .table__cell:last-child {
129 | padding-left: 0;
130 | }
131 | .modal .table__row+.table__row .table__cell { /* stylelint-disable-line */
132 | border-top: 1px solid #ababa1;
133 | }
134 | .image-simple {
135 | display: block;
136 | position: relative;
137 | background-repeat: no-repeat;
138 | background-position: 50% 50%;
139 | background-size: cover;
140 | max-width: 100%;
141 | max-height: 100%;
142 | overflow: hidden;
143 | }
144 | .image-simple img { /* stylelint-disable-line */
145 | opacity: 0;
146 | max-width: 100%;
147 | max-height: 100%;
148 | }
149 | .image-simple_preloaded .loader {
150 | opacity: 0.75;
151 | }
152 | .image-simple_loaded .loader {
153 | display: none;
154 | }
155 | .image-simple_ratio_1x1 img { /* stylelint-disable-line */
156 | position: absolute;
157 | }
158 | .image-simple_ratio_1x1:after {
159 | content: '';
160 | display: block;
161 | padding: 100% 0 0;
162 | }
163 | .modal .modal__container {
164 | background: #878679;
165 | margin-left: auto;
166 | margin-right: auto;
167 | width: auto;
168 | padding: 0 0 20px;
169 | }
170 | .modal .modal__title > .modal__title-text {
171 | text-transform: uppercase;
172 | font-size: 16px;
173 | color: #ababa1;
174 | font-weight: bold;
175 | }
176 | .modal .modal__title {
177 | border-bottom: 1px solid #ababa1;
178 | }
179 | .modal .modal__landscape-close {
180 | float: right;
181 | font-size: 16px;
182 | font-weight: normal;
183 | color: #fff;
184 | }
185 | .modal .button {
186 | background-color: #ababa1;
187 | color: #fff;
188 | border-radius: 0;
189 | border: 0px none;
190 | box-sizing: border-box;
191 | width: 100%;
192 | max-width: 100%;
193 | }
194 | .footer.footer {
195 | background: #2c2c2c;
196 | text-align: center;
197 | padding-top: 10px;
198 | padding-bottom: 10px;
199 | }
200 | .footer .footer__links.footer__links {
201 | border: 0px none;
202 | padding: 0px;
203 | margin: 0;
204 | }
205 | .footer .footer__link,
206 | .footer .footer__divider {
207 | color: #fff;
208 | }
209 | .footer .paragraph.paragraph {
210 | font-size: 16px;
211 | line-height: 24px;
212 | color: #aaa;
213 | margin-bottom: 0px;
214 | }
215 | .footer {
216 | margin: 0 -14px;
217 | }
218 |
--------------------------------------------------------------------------------
/hosts/livejournal.com/HOSTS.yaml:
--------------------------------------------------------------------------------
1 | - https://livejournal.com
2 |
--------------------------------------------------------------------------------
/hosts/livejournal.com/OWNERS.yaml:
--------------------------------------------------------------------------------
1 | - sbmaxx
2 |
--------------------------------------------------------------------------------
/hosts/livejournal.com/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/hosts/livejournal.com/menu.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/hosts/livejournal.com/style.css:
--------------------------------------------------------------------------------
1 | /* Разделитель больше не нужен */
2 | .divider {
3 | display: none;
4 | }
5 |
6 | /* Убираем текст *.livejournal */
7 | .header_host .header-title {
8 | text-indent: -1000px;
9 | min-height: 28px;
10 | padding-top: 0;
11 | }
12 |
13 | .page .header > .link {
14 | position: relative;
15 | z-index: 1;
16 | background: transparent url('./logo.svg') no-repeat 0 50%;
17 | background-size: 165px 30px;
18 | text-align: left;
19 | }
20 |
21 | /* Добавим заливку для шапки на всю ширину*/
22 | .cover:before {
23 | content: '';
24 | position: absolute;
25 | left: 0;
26 | top: 0;
27 | width: 100%;
28 | height: 52px;
29 | background-color: #004359;
30 | }
31 |
32 | /* Цвет турбо-иконки */
33 | .header-turbo .header-turbo-icon {
34 | fill: #fff;
35 | }
36 |
37 | /* Через CSS поменять цвет меню сложно, меняем иконку целиком */
38 | .sandwich-menu__handler {
39 | background-image: url('menu.svg');
40 | }
41 |
42 | .header_host {
43 | padding: 12px 0;
44 | }
45 |
46 | /* Иначе меню будет некликабельным */
47 | .header__aside {
48 | z-index: 1;
49 | }
50 |
51 | .cover .title + .description {
52 | font-size: 14px;
53 | margin-top: 0;
54 | color: #8C969B;
55 | }
56 |
57 | .cover + .unit {
58 | margin-top: 10px;
59 | }
60 |
61 | /* Уберём шапку из релеватных публикаций */
62 | .autoload__content .cover .header {
63 | display: none;
64 | }
65 |
--------------------------------------------------------------------------------
/hosts/meduza.io/HOSTS.yaml:
--------------------------------------------------------------------------------
1 | - https://meduza.io
2 |
--------------------------------------------------------------------------------
/hosts/meduza.io/OWNERS.yaml:
--------------------------------------------------------------------------------
1 | - sbmaxx
2 |
--------------------------------------------------------------------------------
/hosts/meduza.io/clock.svg:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------
/hosts/meduza.io/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/hosts/meduza.io/menu.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/hosts/meduza.io/style.scss:
--------------------------------------------------------------------------------
1 | .page {
2 | font-family: Arial,Helvetica Neue,sans-serif;
3 | }
4 |
5 | /* Разделитель больше не нужен */
6 | .divider {
7 | display: none;
8 | }
9 |
10 | /* Убираем текст *.meduza */
11 | .header .header-title {
12 | text-indent: -1000px;
13 | min-height: 28px;
14 | padding-top: 0;
15 | }
16 |
17 | /* Фирменный цвет ссылок, но не в подвале */
18 | .paragraph .link {
19 | text-decoration: none;
20 | color: inherit;
21 | box-shadow: inset 0 -1px #b88b58;
22 | }
23 |
24 | .footer .link {
25 | box-shadow: inherit;
26 | }
27 |
28 | .page .header > .link {
29 | position: relative;
30 | z-index: 1;
31 | background: transparent url('./logo.svg') no-repeat 50% 50%;
32 | background-size: 100px 21px;
33 | text-align: center;
34 | fill: #b88b58;
35 | }
36 |
37 | .header .image_type_logo {
38 | display: none;
39 | }
40 |
41 | /* Добавим заливку для шапки на всю ширину*/
42 | .cover:before {
43 | content: '';
44 | position: absolute;
45 | left: 0;
46 | top: 0;
47 | width: 100%;
48 | height: 52px;
49 | background-color: #262626;
50 | }
51 |
52 | /* Цвет турбо-иконки */
53 | .header-turbo .header-turbo-icon {
54 | fill: #fff;
55 | }
56 |
57 | /* Через CSS поменять цвет меню сложно, меняем иконку целиком */
58 | .sandwich-menu__handler {
59 | background-image: url('menu.svg');
60 | }
61 |
62 | .header_host {
63 | padding: 12px 0;
64 | }
65 |
66 | /* Иначе меню будет некликабельным */
67 | .header__aside {
68 | position: static;
69 | }
70 |
71 | .header-turbo.header__aside-item {
72 | position: absolute;
73 | left: 0;
74 | top: 14px;
75 | }
76 |
77 | .sandwich-menu.header__aside-item {
78 | position: absolute;
79 | right: 0;
80 | top: 0;
81 | z-index: 1;
82 | }
83 |
84 | .cover .title {
85 | font-family: Georgia,serif;
86 | font-size: 25px;
87 | line-height: 27px;
88 | font-weight: 400;
89 | }
90 |
91 | .cover .title + .description {
92 | font-size: 12px;
93 | line-height: 14px;
94 | margin-top: 12px;
95 | color: gray;
96 | }
97 |
98 | .cover .description .date {
99 | display: inline-block;
100 | padding-left: 16px;
101 | background: url('./clock.svg') no-repeat 0 0;
102 | background-size: 12px 14px;
103 | }
104 |
105 | .cover + .unit {
106 | margin-top: 10px;
107 | }
108 |
109 | .paragraph {
110 | font-family: Georgia,serif;
111 | }
112 |
113 | .footer .paragraph {
114 | font-family: inherit;
115 | }
116 |
117 | .footer__about {
118 | padding-top: 16px;
119 | padding-bottom: 16px;
120 | }
121 | .footer_view_default {
122 | padding-bottom: 16px;
123 | }
124 |
125 | .button_theme_default {
126 | background-color: #b88b58;
127 | text-shadow: 0 1px 1px rgba(0,0,0,.3);
128 | color: #fff;
129 | }
130 |
131 | /* Уберём шапку из релеватных публикаций */
132 | .autoload__content .cover:before,
133 | .autoload__content .cover .header {
134 | display: none;
135 | }
136 |
--------------------------------------------------------------------------------
/hosts/pikabu.ru/HOSTS.yaml:
--------------------------------------------------------------------------------
1 | - https://pikabu.ru
2 |
--------------------------------------------------------------------------------
/hosts/pikabu.ru/OWNERS.yaml:
--------------------------------------------------------------------------------
1 | - lomadurov
--------------------------------------------------------------------------------
/hosts/pikabu.ru/README.md:
--------------------------------------------------------------------------------
1 | # pikabu.ru
2 |
3 | Стилизация турбо-страниц https://pikabu.ru
4 |
5 |
7 | 
pikabu.ru
2 |
3 | Стилизация турбо-страниц https://pikabu.ru
4 |
5 |