scripts from pkgs

docs/assets/styles.css

@@ -27,4 +27,5 @@ warn {
 
 .pre {
 	padding: 12px 24px !important;
+	font-size: 0.8rem;
 }

docs/build-system/mpc.md

@@ -1,48 +1,19 @@
-<package-info :package="package" instsize showsbu2></package-info>
+<pkg :name="'mpc'" instsize showsbu2></pkg>
-
-<script>
-		new Vue({
-		el: '#main',
-		data: { package: {} },
-		mounted: function () {
-				this.getPackage('mpc');
-		},
-		methods: {
-			getPackage: function(name) {
-					getPackage(name)
-					.then(response => this.package = response);
-			},
-		}
-  })
-</script>
-
 ## Настройка
-
+<package-script :package="'mpc'" :type="'configure'"></package-script>
-
-```bash
-./configure --prefix=/usr        \
-            --disable-static     
-```
 
 ## Сборка
-
+<package-script :package="'mpc'" :type="'build'"></package-script>
-
-```bash
-make
-```
 ## Тестирование
-
+<package-script :package="'mpc'" :type="'test'"></package-script>
-```bash
-make check
-```
 
 ## Установка
-
+<package-script :package="'mpc'" :type="'install'"></package-script>
-```bash
-make install
-```
  
 ## Установленные файлы
 
 Библиотеки: libmpc.so
 
+<script>
+	new Vue({ el: '#main' })
+</script> 

docs/common.js

@@ -8,9 +8,12 @@ Vue.component('package-info', {
 	computed: {
 		priorityName: function () {
 			switch (this.package.priority) {
-				case 'important': return 'Важный';
+				case 'important':
-				case 'required': return 'Необходимый';
+					return 'Важный';
-				case 'optional': return 'Необязательный';
+				case 'required':
+					return 'Необходимый';
+				case 'optional':
+					return 'Необязательный';
 			}
 			return '';
 		},
@@ -47,8 +50,89 @@ Vue.component('package-info', {
 	</div>`,
 });
 
+Vue.component('pkg', {
+	props: {
+		name: String,
+		showsbu: Boolean,
+		showsbu2: Boolean,
+		instsize: Boolean,
+	},
+	data() {
+		return {
+			package: {},
+		};
+	},
+	computed: {
+		priorityName: function () {
+			switch (this.package.priority) {
+				case 'important':
+					return 'Важный';
+				case 'required':
+					return 'Необходимый';
+				case 'optional':
+					return 'Необязательный';
+			}
+			return '';
+		},
+	},
+	mounted() {
+		getPackage(this.name)
+			.then(res => (this.package = res));
+	},
+	template: `
+	<div v-if="package" class="pkg">
+		<p>{{ package.description }}</p>
+		<p class="pkg-desc">
+			Ссылка для скачивания: <a :href="package.url"><b>{{ package.downloadUrl }}</b></a>
+			<br />
+			Текущая версия: <b>{{ package.version }}</b>
+			<br />
+			Домашняя страница: <a :href="package.homeUrl"><b>{{ package.homeUrl }}</b></a>
+			<br />
+			Важность: <a href="#/prepare/about-priority"><b>{{ priorityName }}</b></a>
+			<br />
+			Размер архива: <b>{{ package.size }} Mb</b>
+
+			<span v-if="showsbu">
+				<br />
+				<span v-if="package.sbu">Приблизительное время сборки: <b>{{ package.sbu }} SBU</b></span>
+			</span>
+
+			<span v-if="showsbu2">
+				<br />
+				<span v-if="package.sbu2">Приблизительное время сборки: <b>{{ package.sbu2 }} SBU</b></span>
+			</span>
+			<span v-if="instsize">
+				<br />
+				<span v-if="package.installedSize">Приблизительный размер после установки: <b>{{ package.installedSize }} МБ</b></span>
+			</span>
+		</p>
+		<slot></slot>
+	</div>`,
+});
+
+Vue.component('package-script', {
+	props: {
+		package: String,
+		type: String,
+	},
+	data() {
+		return {
+			info: null
+		};
+	},
+	mounted() {
+		getPackageScript(this.package, this.type)
+			.then(res => (this.info = res));
+	},
+	template: `
+<pre class="pre">
+{{ info }}
+</pre>`,
+});
+
 Vue.component('warn', {
-		template: `
+	template: `
 			<div class="warn-description">
 				<slot></slot>
 			</div>

docs/config.js

@@ -15,6 +15,7 @@ window.$docsify = {
 	autoHeader: true,
 	executeScript: true,
 	mergeNavbar: true,
+	el: '#main',
 	notFoundPage: {
 		'/': '_404.md',
 	},
@@ -51,9 +52,9 @@ book = {
 
 // источник метаданных пакетов.
 const pkgsUrlBase = `https://raw.githubusercontent.com/Linux4Yourself/Linux4Yourself.Book.Packages/${book.revision}/src/packages/core`;
-const pkgsSrc =  `${pkgsUrlBase}/packages.json`;
+const pkgsSrc = `${pkgsUrlBase}/packages.json`;
 const wgetList = `${pkgsUrlBase}/wget-list`;
-const md5Sums =  `${pkgsUrlBase}/md5sums`;
+const md5Sums = `${pkgsUrlBase}/md5sums`;
 
 // Получить список всех пакетов из источника.
 getPackages = function () {
@@ -63,5 +64,12 @@ getPackages = function () {
 // Получить пакет по наименованию
 getPackage = function (name) {
 	return axios.get(pkgsSrc)
-		.then(response => response.data.filter(pkg => pkg.name === name)[0]);
+		.then(response => (response.data.filter(pkg => pkg.name === name))[0]);
+}
+
+getPackageScript = function (name, script) {
+	return axios.get(`${pkgsUrlBase}/${name}/${script}`, {
+			responseType: 'text'
+		})
+		.then(response => response.data);
 }

docs/index.html

@@ -45,7 +45,7 @@
 </head>
 
 <body>
-	<div id="app">Пожалуйста, подождите...</div>
+	<div id="main">Пожалуйста, подождите...</div>
 
 	<script src="config.js"></script>
 	<script src="//unpkg.com/vue/dist/vue.min.js"></script>
@@ -58,6 +58,7 @@
 	<script src="//unpkg.com/docsify-copy-code"></script>
 	<script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
 	<script src="common.js"></script>
+
 </body>
 
 </html>