Онлайн компиляция на статическом сайте, рецепт для начинающих
Вы несколько лет писали свой проект и теперь хотите привлечь пользователей? У меня есть простой, как холостяцкая яичница с беконом, рецепт специально для вас.
Для приготовления простого сайта вам понадобится:
- репозитарий на 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 шаблон в репозиторий:
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);
});
};
Сервисов для онлайн компиляции развелось достаточно много, но у большинства из них нет никакого внешнего API, либо этот API незадокументирован. Coliru был первым сервисом онлайн компиляции С++ кода который у меня заработал.
Остались последние штрихи, вишенка на нашу яичницу наш торт! Если мы затевали все это для привлечения пользователей, то разумным шагом будет добавить социальные кнопки.
<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.: Если не сложно, проверьте пожалуйста, работают ли социальные кнопки.
