Pull to refresh

Онлайн-компиляция на статическом сайте, рецепт для начинающих

Reading time 6 min
Views 28K

Вы несколько лет писали свой проект и теперь хотите привлечь пользователей? У меня есть простой, как холостяцкая яичница с беконом, рецепт специально для вас.

Для приготовления простого сайта вам понадобится:
  • репозиторий на GitHub — 1 штука
  • готовый html шаблон, для придания приятного вида — 1 штука
  • кусочек свежего компилирущегося C++ кода — минимум 1 строка кода
  • готовые javascript соусы из магазина — ~500Kb
  • картинки и анимашки по вкусу

Меняйте любые компоненты, экспериментируйте и готовьте свои сайты для любимого языка!

Готовим хостинг


В данном примере для хостинга я буду использовать GitHub. Да-да, он позволяет не только работать с репозиториями, но и предоставляет возможность публиковать сайты для проекта. Всё что нужно сделать, это создать ветку gh-pages и закоммитить туда файл index.html с сайтом:
# Прим: здесь и далее не забывайте заменять user на ваше имя в GitHub,
# а repository на имя вашего репозитория.

# Клонируем наш репозиторий в локальную папку:
git clone github.com/user/repository.git

# Создаем ветку gh-pages
cd repository
git checkout --orphan gh-pages

# Удаляем всё лишнее
git rm -rf .

# Создаём и коммитим index.html
echo "Test" > index.html
git add index.html
git commit -a -m "Testing gh-pages"

# Закидываем изменения обратно на GitHub
git push origin gh-pages

Теперь ваша страница доступна по адресу http(s)://user.github.io/repository/. Разумеется, при желании, вы можете выбрать другой хостинг.

Украшаем блюдо html статикой



Самое время наполнить сайт чем-либо полезным. Находим в интернете приятный для глаза html шаблон и закидываем его на наш хостинг.
# Закидываем наш html шаблон в репозиторий:
cp -rf ../folder_with_template/* ./

Поварские хитрости
Выбирая шаблон стоит сразу обращать внимание на то, отображается ли он корректно на мобильных устройствах. Делается это очень просто: меняете масштаб страницы (Ctrl + +). Шаблон на большом масштабе должен хорошо выглядеть и горизонтальная полоса прокрутки не должна появляться.

Сейчас самая сложная и творческая часть блюда. Необходимо готовый шаблон наполнить содержимым, добавить описание проекта, документацию и прочие полезные вещи.

По завершении, не забываем все закоммитить и отправить на GitHub:
git add *
git commit -m "Added some content"
git push


Подготавливаем мясо код


Для маринада нам понадобится jQuery и редактор Ace написанный на javascript. Можно обойтись и без этих компонентов, или заменить их на что-то иное. Лично я попробовал несколько редакторов и Ace.js показался мне самым удобным и функциональным. Из недостатков у него большой вес ~500Kb.

Выбираем местечко на странице, куда мы поместим онлайн компиляцию. Добавляем в нужное место:
<div id="code">
    ... your code goes here ...
</div>

Не забываем добавить CSS и загрузку javascript:
<style type="text/css" media="screen">
    #code { 
         width: 100%;
         float:left;
         min-height:100px;
         overflow: hidden;
     }
</style>

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/ace/ace.js"></script>

Теперь нужно настроить наш редактор:
<script>
    var code;
    
    $(function() {
        code = ace.edit("code");                      // создаем редактор из элемента с id="code"
        code.setTheme("ace/theme/textmate");          // выбираем тему оформления для подсветки синтаксиса
        code.getSession().setMode("ace/mode/c_cpp");  // говорим что код надо подсвечивать как C++ код
        code.setShowPrintMargin(false);               // опционально: убираем вертикальную границу в 80 сиволов
        code.setOptions({
            maxLines: Infinity,                       // опционально: масштабировать редактор вертикально по размеру кода
            fontSize: "12pt",                         // опционально: размер шрифта ставим побольше
        });
        code.$blockScrolling = Infinity;              // отключаем устаревшие, не поддерживаемые фишки редактора
    });
</script>

Поварские хитрости
Всегда хочется избегать ситуаций копирования кода из репозитария на страницу документации. Если этого не делать, то велик шанс того что код в репозитарии и на странице рассинхронизируется. Тогда на вашей чудесной страничке окажется просроченный продукт, и пользователи начнут жаловаться.

С GitHub избежать этого достаточно просто, благо он позволяет cross-origin resource sharing. То есть вы можете запрашивать со своей статической страницы на http(s)://user.github.io/repository/ ресурсы, например с raw.githubusercontent.com. Просто допишите следующее после code.$blockScrolling = Infinity;
$.get("https://raw.githubusercontent.com/user/repository/master/" + "path_to_source_file_in_repo.cpp", function(data) {
    code.setValue(data);    // обновляем содержимое редактора полученными данными
    code.clearSelection();  // опционально: снимаем выделение строк в редакторе
});

Продвинутые кулинары могут самостоятельно добавить проверку ошибок и вывод соответствующего сообщения пользователю.

В результате вы должны увидеть ваш код в редакторе с красивой подсветкой синтаксиса:


Жарим бекон код


Итак, теперь нам надо добавить кнопку для компиляции кода и место для вывода результата на нашу страницу:
<button id="run" onclick='run();'>Run</button> 

<p>Output:</p><pre id="output">Waiting...</pre>

С онлайн компиляцией нам будет помогать сервис Coliru:
function run() {
    // Команда для компиляции на удаленном сервере
    var cmd = "g++ -Wall main.cpp -o main_prog && echo 'Compilation: SUCCESS."
        + " Program output is:\n' && ./main_prog && echo \"\nExit code: $?\"";

    var output = $("#output");
    output.text('');
    var to_compile = {
        "src": code.getValue(),
        "cmd": cmd,
    };

    output.text("Executing... Please wait.");

    $.ajax({
        url: "http://coliru.stacked-crooked.com/compile",
        type: "POST",
        data: JSON.stringify(to_compile),
        contentType:"text/plain; charset=utf-8",
        dataType: "text"
    }).done(function(data) {
        output.text(data);
    }).fail(function(data) {
        output.text("Server error: " + data);
    });
};

Почему был выбран именно Coliru?
Сервисов для онлайн-компиляции развелось достаточно много, но у большинства из них нет никакого внешнего API, либо этот API незадокументирован. Coliru был первым сервисом онлайн компиляции С++ кода который у меня заработал.


Даём попробовать блюдо друзьям


Остались последние штрихи, вишенка на нашу яичницу наш торт! Если мы затевали все это для привлечения пользователей, то разумным шагом будет добавить социальные кнопки.

Можно воспользоваться плагином SocialLikes
<link rel="stylesheet" href="social-likes_flat.css">
<meta property="og:title" content="Your Title"/>
<meta property="og:image" content="Your logo"/>
<link rel="canonical" href="https://user.github.io/repository/">
<meta property="og:url" content="https://user.github.io/repository/"/>
<meta property="og:site_name" content="Your repository name"/>
<meta property="og:type" content="website"/>
<meta property="og:description" content="Your short description"/>
...
<script src="social-likes.min.js"></script>
...

<div class="social-likes right" data-counters="no">
    <div class="facebook" title="Share on Facebook">Facebook</div>
    <div class="twitter" title="Share on Twitter">Twitter</div>
    <div class="plusone" title="Share on Google+">Google+</div>
    <div class="vkontakte" title="Share on VK">VK</div>
    <div class="odnoklassniki" title="Share on Odnoklassniki">Odnoklassniki</div>
    <div class="mailru" title="Share on MyWorld">MyWorld</div>
</div>


Готово! Осталось хитростью и обманом заставить людей вас полайкать. Например написать им: «Привет, Вася. Проверь, пожалуйста, работают ли у меня социальные кнопки!».

Вместо итога


Получившееся блюдо можно модифицировать на ваш вкус. Вместо GitHub можно использовать любые понравившиеся вам сервисы, Coliru умеет компилировать и С код (возможно что другие языки так же поддерживаются). Сервисов для онлайн-компиляции имеется достаточно много, если поискать, то можно найти аналогичные сервисы и для вашего любимого языка.

Надеюсь этот мини-рецепт будет кому-то полезен и добавит интерактивности вашим проектам.

Результат в моем случае выглядит вот так: apolukhin.github.io/Boost-Cookbook-4880OS

P.S.: Если не сложно, проверьте пожалуйста, работают ли социальные кнопки.
Tags:
Hubs:
+19
Comments 16
Comments Comments 16

Articles