Skip to content

Commit

Permalink
Update docs vue components
Browse files Browse the repository at this point in the history
  • Loading branch information
crazywhalecc committed Oct 5, 2024
1 parent 3c80211 commit ca8ec70
Show file tree
Hide file tree
Showing 6 changed files with 215 additions and 18 deletions.
133 changes: 117 additions & 16 deletions docs/.vitepress/components/CliGenerator.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,37 @@
<div>
<h2>{{ I18N[lang].selectedSystem }}</h2>
<div class="option-line">
<span v-for="(item, index) in osList" :key="index" style="margin-right: 4px">
<span v-for="(item, index) in osList" :key="index" style="margin-right: 8px">
<input type="radio" :id="'os-' + item.os" :value="item.os" :disabled="item.disabled === true" v-model="selectedSystem" />
<label :for="'os-' + item.os">{{ item.label }}</label>
</span>
</div>
<div class="option-line">
<select v-model="selectedArch">
<option value="x86_64">x86_64</option>
<option value="aarch64" :disabled="selectedSystem === 'windows'">aarch64</option>
</select>
</div>
<h2>{{ I18N[lang].selectExt }}{{ checkedExts.length > 0 ? (' (' + checkedExts.length + ')') : '' }}</h2>
<div class="box">
<div v-for="(item, index) in ext" class="ext-item">
<span v-if="isSupported(index, selectedSystem)">
<input type="checkbox" :id="index" :value="index" v-model="checkedExts" :disabled="extDisableList.indexOf(index) !== -1">
<label :for="index">{{ index }}</label>
<input class="input" v-model="filterText" placeholder="Highlight search..." />
<br>
<div v-for="item in extFilter" class="ext-item">
<span>
<input type="checkbox" :id="item" :value="item" v-model="checkedExts" :disabled="extDisableList.indexOf(item) !== -1">
<label :for="item">
<span>{{ highlightItem(item, 0) }}</span>
<span style="color: orangered; font-weight: bolder">{{ highlightItem(item, 1) }}</span>
<span>{{ highlightItem(item, 2) }}</span>
</label>
</span>

</div>
</div>
<div class="my-btn" v-if="selectedSystem !== 'windows'" @click="selectCommon">{{ I18N[lang].selectCommon }}</div>
<div class="my-btn" @click="checkedExts = []">{{ I18N[lang].selectNone }}</div>

<details class="details custom-block">
<details class="details custom-block" open>
<summary>{{ I18N[lang].buildLibs }}{{ checkedLibs.length > 0 ? (' (' + checkedLibs.length + ')') : '' }}</summary>
<div class="box">
<div v-for="(item, index) in libContain" class="ext-item">
Expand Down Expand Up @@ -135,24 +147,33 @@
<div class="warning custom-block">
<p class="custom-block-title">WARNING</p>
<p>{{ I18N[lang].windowsDownSPCWarning }}</p>
<a href="https://dl.static-php.dev/static-php-cli/spc-bin/nightly/spc-windows-x64.exe" target="_blank">https://dl.static-php.dev/static-php-cli/spc-bin/nightly/spc-windows-x64.exe</a>
</div>
</div>
</div>
<div v-if="downloadByExt" class="command-container">
<b>{{ I18N[lang].downloadExtOnlyCommand }}</b>
<div class="command-preview">{{ spcCommand }} download --with-php={{ selectedPhpVersion }} --for-extensions "{{ extList }}"{{ preBuilt ? ' --prefer-pre-built' : '' }}{{ debug ? ' --debug' : '' }}</div>
<div id="download-ext-cmd" class="command-preview">
{{ downloadExtCommand }}
</div>
</div>
<div v-else class="command-container">
<b>{{ I18N[lang].downloadAllCommand }}</b>
<div class="command-preview">{{ spcCommand }} download --all --with-php={{ selectedPhpVersion }}{{ preBuilt ? ' --prefer-pre-built' : '' }}{{ debug ? ' --debug' : '' }}</div>
<div id="download-all-cmd" class="command-preview">
{{ downloadAllCommand }}
</div>
</div>
<div class="command-container" v-if="enableUPX">
<b>{{ I18N[lang].downloadUPXCommand }}</b>
<div class="command-preview">{{ spcCommand }} install-pkg upx{{ debug ? ' --debug' : '' }}</div>
<div id="download-pkg-cmd" class="command-preview">
{{ downloadPkgCommand }}
</div>
</div>
<div class="command-container">
<b>{{ I18N[lang].compileCommand }}</b>
<div class="command-preview">{{ spcCommand }} build {{ buildCommand }} "{{ extList }}"{{ additionalLibs }}{{ debug ? ' --debug' : '' }}{{ zts ? ' --enable-zts' : '' }}{{ enableUPX ? ' --with-upx-pack' : '' }}{{ displayINI }}</div>
<div id="build-cmd" class="command-preview">
{{ buildCommandString }}
</div>
</div>
</div>
</template>
Expand All @@ -170,6 +191,15 @@ import libData from '../config/lib.json';
import { getAllExtLibsByDeps } from './DependencyUtil.js';
const ext = ref(extData);
const extFilter = computed(() => {
const ls = [];
for (const [name, item] of Object.entries(ext.value)) {
if (isSupported(name, selectedSystem.value)) {
ls.push(name);
}
}
return ls;
});
const lib = ref(libData);
const libContain = ref([]);
Expand Down Expand Up @@ -234,7 +264,7 @@ const I18N = {
microUnavailable: 'micro 不支持 PHP 7.4 及更早版本!',
windowsSAPIUnavailable: 'Windows 目前不支持 fpm、embed 构建!',
useUPX: '是否开启 UPX 压缩(减小二进制体积)',
windowsDownSPCWarning: 'Windows 下请手动下载 spc.exe 二进制文件并解压到当前目录',
windowsDownSPCWarning: 'Windows 下请手动下载 spc.exe 二进制文件,解压到当前目录并重命名为 spc.exe',
usePreBuilt: '如果可能,下载预编译的依赖库(减少编译时间)',
},
en: {
Expand Down Expand Up @@ -268,7 +298,7 @@ const I18N = {
microUnavailable: 'Micro does not support PHP 7.4 and earlier versions!',
windowsSAPIUnavailable: 'Windows does not support fpm and embed build!',
useUPX: 'Enable UPX compression (reduce binary size)',
windowsDownSPCWarning: 'Please download the spc.exe binary file manually and extract it to the current directory on Windows!',
windowsDownSPCWarning: 'Please download the binary file manually, extract it to the current directory and rename to spc.exe on Windows!',
usePreBuilt: 'Download pre-built dependencies if possible (reduce compile time)',
}
};
Expand Down Expand Up @@ -325,7 +355,7 @@ const libDisableList = ref([]);
const checkedTargets = ref(['cli']);
// chosen env
const selectedEnv = ref('native');
const selectedEnv = ref('spc');
// chosen php version
const selectedPhpVersion = ref('8.2');
Expand All @@ -348,6 +378,13 @@ const enableUPX = ref(0);
const hardcodedINIData = ref('');
const selectedSystem = ref('linux');
watch(selectedSystem, () => {
if (selectedSystem.value === 'windows') {
selectedArch.value = 'x86_64';
}
});
const selectedArch = ref('x86_64');
// spc command string, alt: spc-alpine-docker, spc
Expand Down Expand Up @@ -381,6 +418,25 @@ const displayINI = computed(() => {
return ' ' + str.map((x) => '-I "' + x + '"').join(' ');
});
const filterText = ref('');
const highlightItem = (item, step) => {
if (item.includes(filterText.value)) {
if (step === 0) {
return item.substring(0, item.indexOf(filterText.value));
} else if (step === 1) {
return filterText.value;
} else {
return item.substring(item.indexOf(filterText.value) + filterText.value.length);
}
} else {
if (step === 0) {
return item;
}
return '';
}
};
const onTargetChange = (event) => {
let id;
if (checkedTargets.value.indexOf('all') !== -1 && event.target.value === 'all') {
Expand Down Expand Up @@ -427,6 +483,22 @@ const calculateExtDepends = (input) => {
return Array.from(result);
};
const downloadAllCommand = computed(() => {
return `${spcCommand.value} download --all --with-php=${selectedPhpVersion.value}${preBuilt.value ? ' --prefer-pre-built' : ''}${debug.value ? ' --debug' : ''}`;
});
const downloadExtCommand = computed(() => {
return `${spcCommand.value} download --with-php=${selectedPhpVersion.value} --for-extensions "${extList.value}"${preBuilt.value ? ' --prefer-pre-built' : ''}${debug.value ? ' --debug' : ''}`;
});
const downloadPkgCommand = computed(() => {
return `${spcCommand.value} install-pkg upx${debug.value ? ' --debug' : ''}`;
});
const buildCommandString = computed(() => {
return `${spcCommand.value} build ${buildCommand.value} "${extList.value}"${additionalLibs.value}${debug.value ? ' --debug' : ''}${zts.value ? ' --enable-zts' : ''}${enableUPX.value ? ' --with-upx-pack' : ''}${displayINI.value}`;
});
const calculateExtLibDepends = (input) => {
const result = new Set();
Expand Down Expand Up @@ -539,9 +611,12 @@ h2 {
.command-preview {
padding: 1.2rem;
background: var(--vp-c-divider);
border-radius: 8px;
word-break: break-all;
font-family: monospace;
overflow-wrap: break-word;
}
.option-line {
padding: 4px 8px;
}
Expand Down Expand Up @@ -582,12 +657,38 @@ select {
background-color: var(--vp-button-alt-active-bg);
}
.textarea {
border: 1px solid var(--vp-button-alt-border);
padding: 0 4px;
min-width: 300px;
border: 1px solid var(--vp-c-divider);
border-radius: 4px;
width: calc(100% - 12px);
padding: 4px 8px;
}
.input {
display: block;
border: 1px solid var(--vp-c-divider);
border-radius: 4px;
width: 100%;
padding: 4px 8px;
}
.command-container {
margin-bottom: 24px;
}
.modal-button {
padding: 4px 8px;
border-radius: 4px;
border-color: var(--vp-button-alt-border);
color: var(--vp-button-alt-text);
background-color: var(--vp-button-alt-bg);
}
.modal-button:hover {
border-color: var(--vp-button-alt-hover-border);
color: var(--vp-button-alt-hover-text);
background-color: var(--vp-button-alt-hover-bg)
}
.modal-button:active {
border-color: var(--vp-button-alt-active-border);
color: var(--vp-button-alt-active-text);
background-color: var(--vp-button-alt-active-bg)
}
</style>
79 changes: 79 additions & 0 deletions docs/.vitepress/components/SearchTable.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<template>
<div>
<header class="DocSearch-SearchBar" style="padding: 0">
<form class="DocSearch-Form searchinput">
<input class="DocSearch-Input" v-model="filterText" placeholder="Filter name..." @input="doFilter" />
</form>
</header>
<table>
<thead>
<tr>
<th>Extension Name</th>
<th>Linux</th>
<th>macOS</th>
<th>FreeBSD</th>
<th>Windows</th>
</tr>
</thead>
<tbody>
<tr v-for="item in filterData">
<td v-if="!item.notes">{{ item.name }}</td>
<td v-else>
<a :href="'./extension-notes.html#' + item.name">{{ item.name }}</a>
</td>
<td>{{ item.linux }}</td>
<td>{{ item.macos }}</td>
<td>{{ item.freebsd }}</td>
<td>{{ item.windows }}</td>
</tr>
</tbody>
</table>
<div v-if="filterData.length === 0" style="margin: 0 4px 20px 4px; color: var(--vp-c-text-2); font-size: 14px">
No result, please try another keyword.
</div>
</div>
</template>

<script>
export default {
name: "SearchTable"
}
</script>

<script setup>
import {ref} from "vue";
import ext from '../../../config/ext.json';
// 将 ext 转换为列表,方便后续操作
const data = ref([]);
for (const [name, item] of Object.entries(ext)) {
data.value.push({
name,
linux: item.support?.Linux === undefined ? 'yes' : (item.support?.Linux === 'wip' ? '' : item.support?.Linux),
macos: item.support?.Darwin === undefined ? 'yes' : (item.support?.Darwin === 'wip' ? '' : item.support?.Darwin),
freebsd: item.support?.BSD === undefined ? 'yes' : (item.support?.BSD === 'wip' ? '' : item.support?.BSD),
windows: item.support?.Windows === undefined ? 'yes' : (item.support?.Windows === 'wip' ? '' : item.support?.Windows),
notes: item.notes === true,
});
}
const filterData = ref(data.value);
const filterText = ref('');
const doFilter = () => {
if (filterText.value === '') {
filterData.value = data.value;
return;
}
filterData.value = data.value.filter(item => {
return item.name.toLowerCase().includes(filterText.value.toLowerCase());
});
}
</script>
<style>
.searchinput {
border: 1px solid var(--vp-c-divider);
}
</style>
4 changes: 4 additions & 0 deletions docs/en/guide/cli-generator.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
aside: false
---

<script setup lang="ts">
import CliGenerator from "../../.vitepress/components/CliGenerator.vue";
</script>
Expand Down
6 changes: 5 additions & 1 deletion docs/en/guide/extensions.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
<script setup>
import SearchTable from "../../.vitepress/components/SearchTable.vue";
</script>

# Extensions

> - `yes`: supported
> - _blank_: not supported yet, or WIP
> - `no` with issue link: confirmed to be unavailable due to issue
> - `partial` with issue link: supported but not perfect due to issue
<!--@include: ../../extensions.md-->
<search-table />

::: tip
If an extension you need is missing, you can create a [Feature Request](https://github.com/crazywhalecc/static-php-cli/issues).
Expand Down
4 changes: 4 additions & 0 deletions docs/zh/guide/cli-generator.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
aside: false
---

<script setup lang="ts">
import CliGenerator from "../../.vitepress/components/CliGenerator.vue";
</script>
Expand Down
7 changes: 6 additions & 1 deletion docs/zh/guide/extensions.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
<script setup>
import SearchTable from "../../.vitepress/components/SearchTable.vue";
</script>

# 扩展列表

> - `yes`: 已支持
> - 空白: 目前还不支持,或正在支持中
> - `no` with issue link: 确定不支持或无法支持
> - `partial` with issue link: 已支持,但是无法完美工作
<!--@include: ../../extensions.md-->

<search-table />

::: tip
如果缺少您需要的扩展,您可以创建 [功能请求](https://github.com/crazywhalecc/static-php-cli/issues)
Expand Down

0 comments on commit ca8ec70

Please sign in to comment.