docs.selfprivacy.org/CONTRIBUTING.html

378 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE HTML>
<html lang="en" class="sidebar-visible no-js light">
<head>
<!-- Book generated using mdBook -->
<meta charset="UTF-8">
<title>Contrib - SelfPrivacy Docs</title>
<!-- Custom HTML head -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff" />
<link rel="icon" href="favicon.svg">
<link rel="shortcut icon" href="favicon.png">
<link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/chrome.css">
<link rel="stylesheet" href="css/print.css" media="print">
<!-- Fonts -->
<link rel="stylesheet" href="FontAwesome/css/font-awesome.css">
<link rel="stylesheet" href="fonts/fonts.css">
<!-- Highlight.js Stylesheets -->
<link rel="stylesheet" href="highlight.css">
<link rel="stylesheet" href="tomorrow-night.css">
<link rel="stylesheet" href="ayu-highlight.css">
<!-- Custom theme stylesheets -->
</head>
<body>
<!-- Provide site root to javascript -->
<script type="text/javascript">
var path_to_root = "";
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
</script>
<!-- Work around some values being stored in localStorage wrapped in quotes -->
<script type="text/javascript">
try {
var theme = localStorage.getItem('mdbook-theme');
var sidebar = localStorage.getItem('mdbook-sidebar');
if (theme.startsWith('"') && theme.endsWith('"')) {
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
}
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
}
} catch (e) { }
</script>
<!-- Set the theme before any content is loaded, prevents flash -->
<script type="text/javascript">
var theme;
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
if (theme === null || theme === undefined) { theme = default_theme; }
var html = document.querySelector('html');
html.classList.remove('no-js')
html.classList.remove('light')
html.classList.add(theme);
html.classList.add('js');
</script>
<!-- Hide / unhide sidebar before it is displayed -->
<script type="text/javascript">
var html = document.querySelector('html');
var sidebar = 'hidden';
if (document.body.clientWidth >= 1080) {
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
sidebar = sidebar || 'visible';
}
html.classList.remove('sidebar-visible');
html.classList.add("sidebar-" + sidebar);
</script>
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
<div class="sidebar-scrollbox">
<ol class="chapter"><li class="chapter-item expanded "><a href="intro.html"><strong aria-hidden="true">1.</strong> Введение</a></li><li class="chapter-item expanded affix "><li class="part-title">О нас</li><li class="chapter-item expanded "><a href="motivation.html"><strong aria-hidden="true">2.</strong> Мотивация</a></li><li class="chapter-item expanded "><a href="team.html"><strong aria-hidden="true">3.</strong> Команда</a></li><li class="chapter-item expanded "><a href="policy.html"><strong aria-hidden="true">4.</strong> Политика</a></li><li class="chapter-item expanded affix "><li class="part-title">О проекте</li><li class="chapter-item expanded "><a href="features.html"><strong aria-hidden="true">5.</strong> Особенности</a></li><li class="chapter-item expanded "><a href="release.html"><strong aria-hidden="true">6.</strong> Лог изменений</a></li><li class="chapter-item expanded "><a href="arch.html"><strong aria-hidden="true">7.</strong> Архитектура</a></li><li class="chapter-item expanded "><a href="roadmap.html"><strong aria-hidden="true">8.</strong> Дорожная карта</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="privacy.html"><strong aria-hidden="true">8.1.</strong> Конфиденциальность</a></li><li class="chapter-item expanded "><a href="security.html"><strong aria-hidden="true">8.2.</strong> Безопасность</a></li><li class="chapter-item expanded "><a href="autonomy.html"><strong aria-hidden="true">8.3.</strong> Автономность</a></li><li class="chapter-item expanded "><a href="accessibility.html"><strong aria-hidden="true">8.4.</strong> Доступность (UI/UX)</a></li><li class="chapter-item expanded "><a href="anon.html"><strong aria-hidden="true">8.5.</strong> Анонимность</a></li></ol></li><li class="chapter-item expanded "><li class="part-title">Пользователю</li><li class="chapter-item expanded "><a href="pre-install.html"><strong aria-hidden="true">9.</strong> Предустановка</a></li><li class="chapter-item expanded "><a href="install.html"><strong aria-hidden="true">10.</strong> Установка</a></li><li class="chapter-item expanded "><a href="services.html"><strong aria-hidden="true">11.</strong> Сервисы</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="email.html"><strong aria-hidden="true">11.1.</strong> Электронная почта</a></li><li class="chapter-item expanded "><a href="messenger.html"><strong aria-hidden="true">11.2.</strong> Мессенджер - Delta.Chat</a></li><li class="chapter-item expanded "><a href="git.html"><strong aria-hidden="true">11.3.</strong> Репозиторий кода - gitea</a></li><li class="chapter-item expanded "><a href="cloud.html"><strong aria-hidden="true">11.4.</strong> Файловое облако - Nextcloud</a></li><li class="chapter-item expanded "><a href="vpn.html"><strong aria-hidden="true">11.5.</strong> VPN - openConnect</a></li><li class="chapter-item expanded "><a href="pass.html"><strong aria-hidden="true">11.6.</strong> Менеджер паролей - bitwarden</a></li></ol></li><li class="chapter-item expanded "><li class="part-title">Поддержать проект</li><li class="chapter-item expanded "><a href="donation.html"><strong aria-hidden="true">12.</strong> Пожертвования</a></li><li class="chapter-item expanded "><a href="dev.html"><strong aria-hidden="true">13.</strong> Разработчикам</a></li><li class="chapter-item expanded "><a href="CONTRIBUTING.html" class="active"><strong aria-hidden="true">14.</strong> Contrib</a></li><li class="chapter-item expanded "><a href="test-plan.html"><strong aria-hidden="true">15.</strong> План тестирования</a></li><li class="chapter-item expanded "><a href="help.html"><strong aria-hidden="true">16.</strong> Как помочь разработке?</a></li><li class="chapter-item expanded "><a href="volunteers.html"><strong aria-hidden="true">17.</strong> Волонтерам</a></li><li class="chapter-item expanded "><a href="fonds.html"><strong aria-hidden="true">18.</strong> Фондам</a></li></ol>
</div>
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
</nav>
<div id="page-wrapper" class="page-wrapper">
<div class="page">
<div id="menu-bar-hover-placeholder"></div>
<div id="menu-bar" class="menu-bar sticky bordered">
<div class="left-buttons">
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
<i class="fa fa-bars"></i>
</button>
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
<i class="fa fa-paint-brush"></i>
</button>
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
</ul>
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
<i class="fa fa-search"></i>
</button>
</div>
<h1 class="menu-title">SelfPrivacy Docs</h1>
<div class="right-buttons">
<a href="print.html" title="Print this book" aria-label="Print this book">
<i id="print-button" class="fa fa-print"></i>
</a>
</div>
</div>
<div id="search-wrapper" class="hidden">
<form id="searchbar-outer" class="searchbar-outer">
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
</form>
<div id="searchresults-outer" class="searchresults-outer hidden">
<div id="searchresults-header" class="searchresults-header"></div>
<ul id="searchresults">
</ul>
</div>
</div>
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
<script type="text/javascript">
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
});
</script>
<div id="content" class="content">
<main>
<h1 id="selfprivacy-project-contribution-guide"><a class="header" href="#selfprivacy-project-contribution-guide">SelfPrivacy Project Contribution Guide</a></h1>
<h2 id="contents"><a class="header" href="#contents">Contents</a></h2>
<ul>
<li>Getting Started
<ul>
<li>Intended Audience</li>
<li>Requirements</li>
<li>Working with <code>git</code>
<ul>
<li>Registering on our Gitea instance</li>
<li>Forking</li>
<li>Cloning</li>
<li>Editing</li>
<li>Comitting changes</li>
<li>Reviewing</li>
<li>Making a pull request</li>
</ul>
</li>
</ul>
</li>
<li>Contributing
<ul>
<li>SelfPrivacy webpage
<ul>
<li>Getting the repository</li>
<li>Repository structure</li>
</ul>
</li>
<li>Application translations
<ul>
<li>Getting the repository</li>
<li>Repository structure</li>
</ul>
</li>
</ul>
</li>
</ul>
<h1 id="getting-started"><a class="header" href="#getting-started">Getting Started</a></h1>
<p>Welcome to the SelfPrivacy Project Contribution guide. This document is brought to you by SelfPrivacy team to help people willing to contribute into our project. This document contains quick explanation of everything you'll need to help the project growing, developing and improving.</p>
<h2 id="intended-audience"><a class="header" href="#intended-audience">Intended Audience</a></h2>
<p>This document is divided into two parts and depending on your experience of working with a technical projects, you may be interested in reading both or just one of the parts. </p>
<p>If you have a basic understanding of git version control system and had previous experience of working with Gitea git server, then you'll probably be interested in skipping the first part as it contains the most basic concepts of <code>git</code> explained and illustrated using Gitea as an example.</p>
<p>In case if all(or some) of the mentioned things is relatively new to you - feel free to look into first part. It covers the minimal amount of the things that you'll need to get started.</p>
<h2 id="requirements"><a class="header" href="#requirements">Requirements</a></h2>
<ul>
<li>Basic command shell(CLI) skills</li>
<li>Git concepts understanding</li>
</ul>
<h1 id="working-with-git"><a class="header" href="#working-with-git">Working with git</a></h1>
<h2 id="what-git-is"><a class="header" href="#what-git-is">What git is</a></h2>
<p>Git - is one of the most popular version control systems, used by millions of developers and libre/open source contributors all over the world.</p>
<p>This is very powerful tool that provides your files(mostly, your code) with change tracking, fault tolerance, versioning and work separation for teams and different environments. Such power is provided at a cost of implementing a couple of new concepts that needed to be understood before starting to work with <code>git</code>. Those concepts are not complicated so it's not a big challenge to understand them.</p>
<p>To tell long story short, <code>git</code> expects code to be stored on the remote server in the repository. You work with code by downloading(cloning) repository to your computer. When you make changes to your local copy of a repository, you give <code>git</code> a command to syncronize changes in your local copy of repository with remote one. When you syncronize your changes, git server(Gitea in our case) records each change you've done. If something goes wrong with your code, you can rollback to it previous version.</p>
<h2 id="a-few-words-about-gitea"><a class="header" href="#a-few-words-about-gitea">A few words about Gitea</a></h2>
<p>As far as I mentioned, <code>git</code> expects you to store your code in the remote repository. For this reason the remote server required to store your code. You might have already heard about a couple. The most popular include:</p>
<ul>
<li>Github</li>
<li>Gitlab</li>
<li>Bitbucket</li>
</ul>
<p>The problem of this services is that they are owned by big corporations like Microsoft or Atlassian, so it means that when they offer to hold your code for no cost, they use access to your private data as a fee for using their development in which they invest millions of dollars(it fully pays off itself, in fact).</p>
<p>As we are the project that fights to allow people to defend their privacy, we can't trust our code to those information-devouring companies. For this reason we chosen a git server that can be hosted on a self-hosted private server that server our developments for the sake of community. For us this server is Gitea. It can be accessed <a href="https://git.selfprivacy.org">here</a>.</p>
<p>Except repositories and cloning, concepts of git, you'll need to be
acknowledged with are: <code>commit</code> and <code>push</code>.</p>
<p><img src="contribImg/fullchain.png" alt="Author commits changes to this article" /></p>
<p align="center">
Author commits changes to this article :)
</p>
<p>Not to bore you completely with the theory, let's jump to the part where all of the fun begins,</p>
<h1 id="registering-on-our-gitea-instance"><a class="header" href="#registering-on-our-gitea-instance">Registering on our Gitea instance</a></h1>
<ol>
<li>
<p>First of all, go to the link, where our Gitea can be found: <a href="https://git.selfprivacy.org">https://git.selfprivacy.org</a></p>
</li>
<li>
<p>You will be presented with the following picture:</p>
</li>
</ol>
<p><img src="contribImg/landing.png" alt="Gitea landing page" /></p>
<p>You will need an upper right corner of this webpage:</p>
<p><img src="contribImg/zoomedLanding.png" alt="Zoomed Gitea landing page" /></p>
<ol start="3">
<li>
<p>Push a <code>Register</code> button</p>
</li>
<li>
<p>You will be presented with quite standard registration form:</p>
</li>
</ol>
<p><img src="contribImg/registration.png" alt="Registration form" /></p>
<ol start="5">
<li>
<p>Complete the registration. <strong>Do not forget to create a strong and memorable password</strong>.</p>
</li>
<li>
<p>After completing the registration, log into the Gitea.</p>
</li>
</ol>
<h2 align=center>
My congratulations. You have successfully registered an account on Gitea
</h2>
<br>
<h1 id="forking"><a class="header" href="#forking">Forking</a></h1>
<p>Remember, I mentioned a couple of new concepts that <code>git</code> introduces, right? Forking - is one of them. But before I explain what does it mean, let me briefly explain how to access existing repositories.</p>
<ol>
<li>After successful registration and <a href="https://git.selfprivacy.org/user/login">login</a> you'll be presented with your repositories list, commit activity heatmap and a repository search:</li>
</ol>
<p><img src="contribImg/dashboard.png" alt="Gitea Dashboard" /></p>
<ol start="2">
<li>Please use a search bar to search for repository that you want to contribute:</li>
</ol>
<p><img src="contribImg/search.png" alt="Repository Search Box" /></p>
<ol start="3">
<li>When you search for the repository, found ones will appear as a search result. Click on the one, you want to contribute to.</li>
</ol>
<p><img src="contribImg/repository.png" alt="Repository" /></p>
<p align=center>
SelfPrivacy webpage repository page
</p>
<br>
<p>Now, let's go back to forking. When you want to make some changes to the sources in the repository, you can't commit changes to the original one directly, unless you're granted permission to. Usually, the only people that have permission to directly modify the repository, are the core development team. For all the contributors there's different apprach exist.</p>
<p>Contributors can modify the original repository by creating an identical copy of it on their own account, making changes to it and requesting moderators to overwrite(or merge) files with changed ones. Moderator reviews changes before approving them, gives some comments regarding the changes and if everything is OK, then he/she accepts proposed changes.</p>
<blockquote>
<p>Forking - Creating an identical copy of a repository on your own account of a git server</p>
</blockquote>
<p>To fork a git repository, you'll have to push a <code>Fork</code> button(can be found at the upper right corner of the repository interface):</p>
<img src=contribImg/forking.png align=center>
<br>
<br>
<p>When you'll fork the repository, the identical one will appear in your account and you'll be able to make modifications to it.</p>
<h1 id="cloning"><a class="header" href="#cloning">Cloning</a></h1>
<p>Remember, I said that wheen you're working with a code inside of a git repository, to make some changes, you'll firstly have to clone it to your computer, right?</p>
<p>Now it's time for me to show you how to begin making changes to your code.</p>
<p>To clone a repository, you'll have to use a CLI <code>git</code> utility. let's begin with opening your terminal:</p>
<p><img src="contribImg/terminal.png" alt="Terminal Window" /></p>
<p>Microsoft Windows users would have to open a &quot;PowerShell&quot; application.
Mac users will be able to find a &quot;Terminal&quot; app in the &quot;Utilities&quot; folder.</p>
<p>First of all, you'll have to pick a location where you would like to store the repository with a code. It can be specially created, deticated folder, or just your home directory</p>
<p>For our example let's pick home directory as the folder to which we'll clone our repository(home folder opened by default by the most shells).</p>
<p>Let's clone a webpage repository to our computer. To do so, please run the following command:</p>
<pre><code>git clone https://git.selfprivacy.org/ilchub/selfprivacy-frontend
</code></pre>
<p><img src="contribImg/clone.png" alt="Cloning the SelfPrivacy webpage repository" /></p>
<p>If you'll now open the file manager, you'll see the newly cloned repository(which is now just a folder on our disk :)</p>
<p><img src="contribImg/clonedRepository.png" alt="Cloned repository inside your filesystem" /></p>
<h2 align=center>From this point we can start editing project files</h2>
<br>
<br>
<h1 id="editing"><a class="header" href="#editing">Editing</a></h1>
<p>Editing of a project is a subject of quite personal taste. From the point of getting the code to your computer, it's totally up to you, what code editor to choose. Author used (Neo)Vim and VS Code to write the following article.</p>
<p><img src="contribImg/editor.png" alt="Author, writing an artile in the VS Code" /></p>
<p align=center>Author, writing article in the VS Code</p>
<br>
<br>
<p>Feel free to explore the repository and edit it in a way you want.</p>
<h1 id="commiting"><a class="header" href="#commiting">Commiting</a></h1>
<p>After you've made all desired changes, time comes to push your changes to the Gitea server to store them in a safe place and keep track of them. In the world of <code>git</code>, making changes to the source code is described by pretty self-explainable word - <code>commiting</code>. To commit changes to the code, we'll again need to use some CLI skills.</p>
<p>Open your terminal and make sure that you're currently in the same directory that code resides in. Your current directory can be determined by running the following command:</p>
<pre><code>pwd
</code></pre>
<p>and it defaults to your home folder:</p>
<p><img src="contribImg/pwd.png" alt="Printing working directory" /></p>
<p>In case if you're not in the same directory with your code, you can change by running the following command:</p>
<pre><code>cd /path/to/the/directory/with/my/code
</code></pre>
<p>After that you can again rerun <code>pwd</code> to make sure that directory is correct.</p>
<p>When the requirement of being in the correct directory is met, you can start commiting your changes.</p>
<p>First of all, please run the following command:</p>
<pre><code>git add .
</code></pre>
<p>This command will result in git searching recursively through the entire directory for changes you've made in the files:</p>
<p><img src="contribImg/add.png" alt="Running git add" /></p>
<p>This command will produce no output so don't be worried by that fact.</p>
<p>After searching for changes, your next step will be to add them to the queue for syncronization with the Gitea server. To do so, please run the following:</p>
<pre><code>git commit -m &quot;Brief explanation of changes&quot;
</code></pre>
<p><img src="contribImg/commit.png" alt="Running git commit" /></p>
<p>This command will output all changes that were made to the folder(of course in case if you defined a correct search scope with <code>git add</code> command).</p>
<p>That's the point when all your changes are indexed and queued for being pushed to the remote server. To push changes to the remote server, please run:</p>
<pre><code>git push -u origin master
</code></pre>
<p><img src="contribImg/push.png" alt="Pushing changes to the repository" /></p>
<h4 id="my-congratulations-your-changes-have-been-successfully-written-ton-the-remote-repository-you-can-wisit-gitea-to-check-them-you-should-now-see-your-fresh-changes"><a class="header" href="#my-congratulations-your-changes-have-been-successfully-written-ton-the-remote-repository-you-can-wisit-gitea-to-check-them-you-should-now-see-your-fresh-changes">My congratulations. Your changes have been successfully written ton the remote repository. You can wisit Gitea to check them. You should now see your fresh changes.</a></h4>
<br>
<h1 id="reviewing"><a class="header" href="#reviewing">Reviewing</a></h1>
<p>Right after pushing your changes to the remote repository, it's rather good idea to review them. If you'll visit your repository, you'll see that the last commit on the page have changed:</p>
<p><img src="contribImg/commitHistory.png" alt="Last commit message" /></p>
<p>You can click the &quot;Commits&quot; button to see the history of all your commits:</p>
<p><img src="contribImg/commitList.png" alt="Commit history" /></p>
<p>If you'll click onto one of the commits, you will be able to see what things changed since last push:</p>
<p><img src="contribImg/changes.png" alt="Changes, introduced by the commit" /></p>
<p>Gitea will show you the detailed explanation on what have been added to your code and what have been removed.</p>
<p>That's how changes review works.</p>
<p><strong>Note: You can add comments to each line by clicking on it.</strong></p>
<h1 id="contributing"><a class="header" href="#contributing">Contributing</a></h1>
<h2 id="selfprivacy-webpage"><a class="header" href="#selfprivacy-webpage">SelfPrivacy Webpage</a></h2>
<h3 id="repository-url"><a class="header" href="#repository-url">Repository URL</a></h3>
<p><a href="https://git.selfprivacy.org/ilchub/selfprivacy-frontend">https://git.selfprivacy.org/ilchub/selfprivacy-frontend</a></p>
<h2 id="application-translations"><a class="header" href="#application-translations">Application translations</a></h2>
<h3 id="repository-url-1"><a class="header" href="#repository-url-1">Repository URL</a></h3>
<p><a href="https://git.selfprivacy.org/kherel/selfprivacy.org.app">https://git.selfprivacy.org/kherel/selfprivacy.org.app</a></p>
</main>
<nav class="nav-wrapper" aria-label="Page navigation">
<!-- Mobile navigation buttons -->
<a rel="prev" href="dev.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
<a rel="next" href="test-plan.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
<i class="fa fa-angle-right"></i>
</a>
<div style="clear: both"></div>
</nav>
</div>
</div>
<nav class="nav-wide-wrapper" aria-label="Page navigation">
<a rel="prev" href="dev.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
<a rel="next" href="test-plan.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
<i class="fa fa-angle-right"></i>
</a>
</nav>
</div>
<script type="text/javascript">
window.playground_copyable = true;
</script>
<script src="elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
<script src="mark.min.js" type="text/javascript" charset="utf-8"></script>
<script src="searcher.js" type="text/javascript" charset="utf-8"></script>
<script src="clipboard.min.js" type="text/javascript" charset="utf-8"></script>
<script src="highlight.js" type="text/javascript" charset="utf-8"></script>
<script src="book.js" type="text/javascript" charset="utf-8"></script>
<!-- Custom JS scripts -->
</body>
</html>