mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-12-23 08:56:29 +00:00
Code Issues Projects Releases Wiki Activity

Refactor badge generation page, add HTML option (#1251)

Browse source 
* Adds HTML badge generation
* Allows to generate badge for specific branch
* Remembers last used option for badge syntax for current browser
* Fixes base URL when custom port is used

Screenshot:

![attels](https://user-images.githubusercontent.com/165205/195311734-6db0e85e-f659-486f-824f-4cabb659b81a.png)

Co-authored-by: 6543 <6543@obermui.de>
This commit is contained in:
Lauris BH 2022-10-14 20:50:01 +03:00 committed by GitHub
parent fe6706adb2
commit 8d6573a5f1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 104 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
web/src/assets/locales/en.json
View file

@ -170,8 +170,11 @@
},
"badge": {
"badge": "Badge",
"url_branch": "URL for specific branch",
"markdown": "Markdown"
"type": "Syntax",
"type_url": "URL",
"type_markdown": "Markdown",
"type_html": "HTML",
"branch": "Branch"
},
"actions": {
"actions": "Actions",

120
web/src/components/repo/settings/BadgeTab.vue
View file

@ -7,55 +7,133 @@
</a>
</div>
<div class="flex flex-col space-y-4">
<div>
<h2 class="text-lg text-color ml-2">{{ $t('url') }}</h2>
<pre class="box">{{ baseUrl }}{{ badgeUrl }}</pre>
</div>
<InputField :label="$t('repo.settings.badge.type')">
<SelectField
v-model="badgeType"
:options="[
{
value: 'url',
text: $t('repo.settings.badge.type_url'),
},
{
value: 'markdown',
text: $t('repo.settings.badge.type_markdown'),
},
{
value: 'html',
text: $t('repo.settings.badge.type_html'),
},
]"
required
class="dark:bg-dark-gray-700 bg-transparent text-color border-gray-200 dark:border-dark-400"
/>
</InputField>
<InputField :label="$t('repo.settings.badge.branch')">
<SelectField
v-model="branch"
:options="branches"
required
class="dark:bg-dark-gray-700 bg-transparent text-color border-gray-200 dark:border-dark-400"
/>
</InputField>
<div v-if="badgeContent" class="flex flex-col space-y-4">
<div>
<h2 class="text-lg text-color ml-2">{{ $t('repo.settings.badge.url_branch') }}</h2>
<pre class="box">{{ baseUrl }}{{ badgeUrl }}?branch=<span class="font-bold">&lt;branch&gt;</span></pre>
</div>
<div>
<h2 class="text-lg text-color ml-2">{{ $t('repo.settings.badge.markdown') }}</h2>
<pre class="box">[![status-badge]({{ baseUrl }}{{ badgeUrl }})]({{ baseUrl }}{{ repoUrl }})</pre>
<pre class="box">{{ badgeContent }}</pre>
</div>
</div>
</Panel>
</template>
<script lang="ts">
import { computed, defineComponent, inject, Ref } from 'vue';
import { useStorage } from '@vueuse/core';
import { computed, defineComponent, inject, onMounted, Ref, ref, watch } from 'vue';
import { SelectOption } from '~/components/form/form.types';
import InputField from '~/components/form/InputField.vue';
import SelectField from '~/components/form/SelectField.vue';
import Panel from '~/components/layout/Panel.vue';
import useApiClient from '~/compositions/useApiClient';
import { Repo } from '~/lib/api/types';
export default defineComponent({
name: 'BadgeTab',
components: { Panel },
components: { Panel, InputField, SelectField },
setup() {
const apiClient = useApiClient();
const repo = inject<Ref<Repo>>('repo');
const baseUrl = `${window.location.protocol}//${window.location.hostname}`;
const badgeUrl = computed(() => {
const badgeType = useStorage('last-badge-type', 'markdown');
if (!repo) {
throw new Error('Unexpected: "repo" should be provided at this place');
}
const defaultBranch = computed(() => repo.value.default_branch);
const branches = ref<SelectOption[]>([]);
const branch = ref<string>('');
async function loadBranches() {
if (!repo) {
throw new Error('Unexpected: "repo" should be provided at this place');
}
return `/api/badges/${repo.value.owner}/${repo.value.name}/status.svg`;
});
const repoUrl = computed(() => {
branches.value = (await apiClient.getRepoBranches(repo.value.owner, repo.value.name))
.map((b) => ({
value: b,
text: b,
}))
.filter((b) => b.value !== defaultBranch.value);
branches.value.unshift({
value: '',
text: defaultBranch.value,
});
}
const baseUrl = `${window.location.protocol}//${window.location.hostname}${
window.location.port ? `:${window.location.port}` : ''
}`;
const badgeUrl = computed(
() =>
`/api/badges/${repo.value.owner}/${repo.value.name}/status.svg${
branch.value !== '' ? `?branch=${branch.value}` : ''
}`,
);
const repoUrl = computed(
() => `/${repo.value.owner}/${repo.value.name}${branch.value !== '' ? `/branches/${branch.value}` : ''}`,
);
const badgeContent = computed(() => {
if (!repo) {
throw new Error('Unexpected: "repo" should be provided at this place');
}
return `/${repo.value.owner}/${repo.value.name}`;
if (badgeType.value === 'url') {
return `${baseUrl}${badgeUrl.value}`;
}
if (badgeType.value === 'markdown') {
return `[![status-badge](${baseUrl}${badgeUrl.value})](${baseUrl}${repoUrl.value})`;
}
if (badgeType.value === 'html') {
return `<a href="${baseUrl}${repoUrl.value}" target="_blank">\n <img src="${baseUrl}${badgeUrl.value}" alt="status-badge" />\n</a>`;
}
return '';
});
return { baseUrl, badgeUrl, repoUrl };
onMounted(() => {
loadBranches();
});
watch(repo, () => {
loadBranches();
});
return { badgeType, branches, branch, badgeContent, badgeUrl };
},
});
</script>