Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix: speedup docs development
- Fix werf compose up.
- Use jekyll_base image (as in werf/website).
- Remove assets.precompile - lead to errors with updated Jekyll and sprockets.
- Use include-cached plugin to render sidebar.
- Change js to activate sidebar item.

Signed-off-by: Ivan Mikheykin <ivan.mikheykin@flant.com>
  • Loading branch information
diafour authored and alexey-igrychev committed Apr 28, 2023
1 parent 9e49fe9 commit 2dc150a
Show file tree
Hide file tree
Showing 9 changed files with 95 additions and 60 deletions.
10 changes: 7 additions & 3 deletions docs/DEVELOPMENT.md
Expand Up @@ -9,16 +9,20 @@ ___

#### Variant 1

- Install [werf](http://werf.io/installation.html).
Run `jekyll serve` with --watch option to test changes in "real time".

- Install [werf](http://werf.io/installation.html).
- Run:
```shell
werf compose up
werf compose up jekyll_base --dev
```
- Wait (approximately 60 seconds) for the message "Server running..." from the `en_1` and `ru_1` containers.
- Wait (approximately 60 seconds) for the message "done in X.XXX seconds" from the `docs-en-1` and `docs-ru-1` containers.
- Check the English version is available on [https://localhost](http://localhost), and the Russian version on [http://ru.localhost](https://ru.localhost) (add `ru.localhost` record in your `/etc/hosts` to access the Russian version of the site).

#### Variant 2 (slower)

Run fully built 'web' image.

- Install [werf](http://werf.io/installation.html).
- Run (add `--follow --docker-compose-command-options="-d"` if necessary):
```shell
Expand Down
2 changes: 1 addition & 1 deletion docs/Gemfile.lock
Expand Up @@ -49,7 +49,7 @@ GEM
typhoeus (~> 1.3)
yell (~> 2.0)
http_parser.rb (0.8.0)
i18n (1.12.0)
i18n (1.13.0)
concurrent-ruby (~> 1.0)
jekyll (4.3.2)
addressable (~> 2.4)
Expand Down
1 change: 1 addition & 0 deletions docs/_config.yml
Expand Up @@ -45,6 +45,7 @@ highlighter: rouge

plugins:
- jekyll-assets
- jekyll-include-cache

markdown: kramdown
kramdown:
Expand Down
7 changes: 3 additions & 4 deletions docs/_includes/sidebar.html
@@ -1,13 +1,12 @@
{%- assign sidebar = site.data.sidebars[page.sidebar].entries[page.lang] %}
{%- assign sidebar = site.data.sidebars[include.sidebar].entries[include.lang] %}

<div class="sidebar__wrapper-inner">
<nav class="sidebar__container">
<ul class="sidebar" id="mysidebar">
{%- for entry in sidebar.f %}
{% include sidebar_entry.html entry=entry folder_entry_class="sidebar__item sidebar__item_parent" item_entry_class="sidebar__item" data_attr="data-parent" %}
{% include sidebar_entry.html entry=entry folder_entry_class="sidebar__item sidebar__item_parent" item_entry_class="sidebar__item" data_attr="data-parent" is_404=include.is_404 %}
{%- endfor %}
</ul>
</nav>
</div>

<!-- this highlights the active parent class in the navgoco sidebar. this is critical so that the parent expands when you're viewing a page. This must appear below the sidebar code above. Otherwise, if placed inside customscripts.js, the script runs before the sidebar code runs and the class never gets inserted.-->
<script>$("li.active").parents('li').toggleClass("active");</script>
13 changes: 4 additions & 9 deletions docs/_includes/sidebar_entry.html
@@ -1,14 +1,13 @@
{%- assign entry = include.entry %}
{%- assign folder_entry_class = include.folder_entry_class %}
{%- assign item_entry_class = include.item_entry_class %}
{%- assign data_attr = include.data_attr %}

{%- if entry.hot == true %}
{%- assign item_entry_class = item_entry_class | append: ' sidebar__item_hot' %}
{%- endif %}

{%- if entry.f %}
<li class="{{ folder_entry_class }}" {{ data_attr }}>
<li class="{{ folder_entry_class }}">
<a href="#">{{ entry.title }}{{ entry.url }}</a>
<ul class="sidebar__submenu">
{%- for entry in entry.f %}
Expand All @@ -18,12 +17,8 @@
</li>
{%- elsif entry.external_url %}
<li class="{{ item_entry_class }}"><a href="{{ entry.external_url }}" target="_blank">{{entry.title}}</a></li>
{%- elsif page.url == entry.url %}
<li class="{{ item_entry_class }} active"><a href="{{ entry.url | true_relative_url }}">{{entry.title}}</a></li>
{%- elsif include.is_404 %}
<li class="{{ item_entry_class }}"><a data-proofer-ignore href="{{ site.canonical_url_prefix }}{{ entry.url | relative_url }}">{{entry.title}}</a></li>
{%- else %}
{%- if page.name == '404.md' %}
<li class="{{ item_entry_class }}"><a data-proofer-ignore href="{{ site.canonical_url_prefix }}{{ entry.url | relative_url }}">{{entry.title}}</a></li>
{% else %}
<li class="{{ item_entry_class }}"><a href="{{ entry.url | true_relative_url }}">{{entry.title}}</a></li>
{%- endif %}
<li class="{{ item_entry_class }}" data-page-url="{{ entry.url }}"><a href="{{ entry.url | true_relative_url }}">{{entry.title}}</a></li>
{%- endif %}
15 changes: 10 additions & 5 deletions docs/_layouts/default.html
Expand Up @@ -31,11 +31,15 @@
$("#mysidebar").navgoco('toggle', true);
});

const parents = $('[data-parent]');

parents.each((_, parent) => {
$("#mysidebar").navgoco('toggle', true, $($(parent).children('[data-index]')).attr('data-index'));
})
// Activate page item in sidebar and expands its ancestors.
let page_url='{{ page.url }}';
let active_item = $(`#mysidebar li[data-page-url="${page_url}"]`);
active_item.addClass('active');
active_item.parents('li')
.addClass('active')
.each((_, parent) => {
$("#mysidebar").navgoco('toggle', true, $($(parent).children('[data-index]')).attr('data-index'));
});
});

</script>
Expand All @@ -44,6 +48,7 @@
$('[data-toggle="tooltip"]').tooltip()
})
</script>

{%- if page.datatable == true %}
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
Expand Down
10 changes: 9 additions & 1 deletion docs/_layouts/sidebar.html
Expand Up @@ -6,7 +6,15 @@
{%- include nav-breadcrumbs.html %}
<div class="layout-sidebar">
<div class="layout-sidebar__sidebar">
{%- include sidebar.html %}
{% comment %} Use page relative path for caching: ../.. or ../../.. {% endcomment %}
{%- assign page_rel_path = "/" %}
{%- assign is_404 = false %}
{%- if page.name == '404.md' %}
{%- assign is_404 = true %}
{%- else %}
{%- assign page_rel_path = page.url | true_relative_url | remove: page.url %}
{%- endif %}
{%- include_cached sidebar.html sidebar=page.sidebar lang=page.lang is_404=is_404 page_rel_path=page_rel_path %}
</div>
<div class="layout-sidebar__content">
{{ content }}
Expand Down
20 changes: 10 additions & 10 deletions docs/docker-compose.yml
Expand Up @@ -2,25 +2,25 @@ version: "3.9"

services:
en:
image: $WERF_ASSETS_DOCKER_IMAGE_NAME
working_dir: "/srv/jekyll-data"
image: $WERF_JEKYLL_BASE_DOCKER_IMAGE_NAME
working_dir: "/app"
environment:
JEKYLL_ENV: "dev"
command: bash -c "
chmod -R o+w /srv/jekyll-data/ &&
jekyll serve --disable-disk-cache --config _config.yml --destination /tmp/_site -P 80"
chmod -R o+w /app/ &&
jekyll serve --disable-disk-cache --config _config.yml --destination /tmp/_site -P 80 --profile --trace --watch"
volumes:
- "./:/srv/jekyll-data/"
- "./:/app/:cached"
ru:
image: $WERF_ASSETS_DOCKER_IMAGE_NAME
working_dir: "/srv/jekyll-data"
image: $WERF_JEKYLL_BASE_DOCKER_IMAGE_NAME
working_dir: "/app"
environment:
JEKYLL_ENV: "dev"
command: bash -c "
chmod -R o+w /srv/jekyll-data/ &&
jekyll serve --config _config.yml,_config_ru.yml --destination /tmp/_site -P 80"
chmod -R o+w /app/ &&
jekyll serve --disable-disk-cache --config _config.yml,_config_ru.yml --destination /tmp/_site -P 80 --profile --trace --watch"
volumes:
- "./:/srv/jekyll-data/"
- "./:/app/:cached"
depends_on:
- en

Expand Down
77 changes: 50 additions & 27 deletions docs/werf.yaml
Expand Up @@ -2,33 +2,56 @@ project: werfio-ng
configVersion: 1

---
image: assets
image: jekyll_base
from: jekyll/builder:4.2.0
fromCacheVersion: 20220110
ansible:
install:
- shell: |
export PATH=/usr/jekyll/bin/:$PATH
gem update bundler
- name: "Install Dependencies"
shell: bundle install
args:
executable: /bin/bash
chdir: /app/docs
fromCacheVersion: 20230421
git:
- add: /docs
to: /app/docs
owner: jekyll
group: jekyll
includePaths:
- Gemfile
- Gemfile.lock
stageDependencies:
setup: ["**/*"]
shell:
setup:
- export PATH=/usr/jekyll/bin/:$PATH
- gem update bundler
- echo "Install Dependencies ..."
- cd /app/docs && bundle install

---
image: assets
fromImage: jekyll_base
shell:
beforeSetup:
- file:
path: "{{`{{ item }}`}}"
state: directory
mode: 0777
with_items:
- /app/_site/main/
- /app/_site/ru/
- shell: |
JEKYLL_ENV=production jekyll build -s /app/docs -d /app/_site/main/ --config /app/docs/_config.yml
JEKYLL_ENV=production jekyll build -s /app/docs -d /app/_site/ru/ --config /app/docs/_config.yml,/app/docs/_config_ru.yml
args:
executable: /bin/bash
chdir: /app/docs
- mkdir -p /app/_site/main/
- chmod 777 /app/_site/main/
- mkdir -p /app/_site/ru/
- chmod 777 /app/_site/ru/
- cd /app/docs
- bundle exec jekyll --version
- export JEKYLL_ENV="production"

- bundle info bundler
- bundle info sprockets
- bundle info jekyll

- cat _config.yml

- echo "Build 'en' ..."
- bundle exec jekyll build -s /app/docs -d /app/_site/main/ --config /app/docs/_config.yml --profile --trace

- echo "Build 'ru' ..."
- bundle exec jekyll build -s /app/docs -d /app/_site/ru/ --config /app/docs/_config.yml,/app/docs/_config_ru.yml --profile --trace

- echo "Assets in 'en':"
- ls -la /app/_site/main/assets || true

- echo "Assets in 'ru':"
- ls -la /app/_site/ru/assets || true
git:
- add: /docs
to: /app/docs
Expand All @@ -50,8 +73,8 @@ git:
- Gemfile.lock
- "*.xml"
stageDependencies:
install: ['Gemfile','Gemfile.lock']
beforeSetup: '**/*'
beforeSetup:
- '**/*'
---
image: web
from: nginx:stable-alpine
Expand Down

0 comments on commit 2dc150a

Please sign in to comment.