improvements to github repos page, added readme.md's
This commit is contained in:
booploops
parent
2d9ca47f26
commit
25ed627d6c
4 changed files with 5651 additions and 25 deletions
5531
src/renderer/js/showdown.min.js
vendored
Normal file
5531
src/renderer/js/showdown.min.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -20,6 +20,11 @@
|
||||||
|
|
||||||
// GitHub Themes
|
// GitHub Themes
|
||||||
.github-themes-page {
|
.github-themes-page {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0px;
|
||||||
|
height: calc(100% - var(--navigationBarHeight));
|
||||||
|
|
||||||
.github-avatar {
|
.github-avatar {
|
||||||
height: 42px;
|
height: 42px;
|
||||||
width: 42px;
|
width: 42px;
|
||||||
|
|
@ -31,6 +36,42 @@
|
||||||
margin:0px;
|
margin:0px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.repo-url {
|
||||||
|
color: var(--textColor);
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.repo-preview-name {
|
||||||
|
margin:0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.repos-list {
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: overlay;
|
||||||
|
width: 320px;
|
||||||
|
>.list-group {
|
||||||
|
margin:0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-preview {
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
background: var(--color2);
|
||||||
|
padding: 16px 32px;
|
||||||
|
overflow-y:overlay;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-header {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Library - Songs page
|
// Library - Songs page
|
||||||
|
|
|
||||||
|
|
@ -33,6 +33,7 @@
|
||||||
<script src="./js/bootstrap.min.js"></script>
|
<script src="./js/bootstrap.min.js"></script>
|
||||||
<script src="./js/bootbox.min.js"></script>
|
<script src="./js/bootbox.min.js"></script>
|
||||||
<script src="./js/notyf.min.js"></script>
|
<script src="./js/notyf.min.js"></script>
|
||||||
|
<script src="./js/showdown.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>">
|
<body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>">
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,53 @@
|
||||||
<script type="text/x-template" id="themes-github">
|
<script type="text/x-template" id="themes-github">
|
||||||
<div class="content-inner github-themes-page">
|
<div class="content-inner github-themes-page">
|
||||||
|
<div class="gh-header">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col nopadding">
|
<div class="col nopadding">
|
||||||
<h1 class="header-text">Themes from GitHub</h1>
|
<h1 class="header-text">Themes from GitHub</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto nopadding flex-center">
|
<div class="col-auto nopadding flex-center">
|
||||||
<button class="md-btn md-btn-small md-btn-block" @click="installThemeURL()" style="margin-top: 8px">
|
<button class="md-btn md-btn-small md-btn-block" @click="installThemeURL()">
|
||||||
{{$root.getLz('settings.option.visual.theme.github.download')}}
|
{{$root.getLz('settings.option.visual.theme.github.download')}}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul class="list-group">
|
|
||||||
<li class="list-group-item list-group-item-dark" v-for="repo in repos">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-1 flex-center">
|
|
||||||
<img class="github-avatar" :src="repo.owner.avatar_url" alt="">
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="gh-content">
|
||||||
|
<div class="repos-list">
|
||||||
|
<ul class="list-group list-group-flush">
|
||||||
|
<li @click="showRepo(repo)" class="list-group-item list-group-item-dark" :style="{'background': (repo.id == openRepo.id) ? 'var(--keyColor)' : ''}" v-for="repo in repos">
|
||||||
|
<div class="row">
|
||||||
<div class="col flex-center">
|
<div class="col flex-center">
|
||||||
<div>
|
<div>
|
||||||
<h3 class="repo-name">{{ repo.description }}</h3>
|
<h4 class="repo-name">{{ repo.description }}</h4>
|
||||||
<div>⭐ {{ repo.stargazers_count }}</div>
|
<div>⭐ {{ repo.stargazers_count }}</div>
|
||||||
<small><a :href="repo.html_url" target="_blank">{{ repo.full_name }}</a></small>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto flex-center">
|
|
||||||
<button class="md-btn md-btn-primary" @click="installThemeRepo(repo)">Install</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="github-preview" >
|
||||||
|
<div class="gh-preview-header">
|
||||||
|
<div class="row nopadding">
|
||||||
|
<div class="col nopadding flex-center">
|
||||||
|
<div>
|
||||||
|
<h3 class="repo-preview-name">{{ openRepo.description }}</h3>
|
||||||
|
<div><a class="repo-url" href="html_url">{{ openRepo.full_name }}</a></div>
|
||||||
|
<div>⭐ {{ openRepo.stargazers_count }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto nopadding flex-center">
|
||||||
|
<button class="md-btn md-btn-primary" @click="installThemeRepo(openRepo)">Install</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div v-html="openRepo.readme" class="github-content"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
Vue.component('themes-github', {
|
Vue.component('themes-github', {
|
||||||
|
|
@ -38,12 +56,48 @@
|
||||||
data: function () {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
repos: [],
|
repos: [],
|
||||||
|
openRepo: {
|
||||||
|
id: -1,
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
html_url: '',
|
||||||
|
stargazers_count: 0,
|
||||||
|
owner: {
|
||||||
|
avatar_url: ''
|
||||||
|
},
|
||||||
|
readme: ""
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getRepos();
|
this.getRepos();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
showRepo(repo) {
|
||||||
|
const self = this
|
||||||
|
const readmeUrl = `https://raw.githubusercontent.com/${repo.full_name}/master/README.md`;
|
||||||
|
var requestOptions = {
|
||||||
|
method: 'GET',
|
||||||
|
redirect: 'follow'
|
||||||
|
};
|
||||||
|
|
||||||
|
fetch(readmeUrl, requestOptions)
|
||||||
|
.then(response => response.text())
|
||||||
|
.then(result => {
|
||||||
|
self.openRepo = repo
|
||||||
|
self.openRepo.readme = self.convertReadMe(result);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
self.openRepo = repo
|
||||||
|
self.openRepo.readme = `This repository doesn't have a README.md file.`;
|
||||||
|
console.log('error', error)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
convertReadMe(text) {
|
||||||
|
var converter = new showdown.Converter(),
|
||||||
|
html = converter.makeHtml(text);
|
||||||
|
return html
|
||||||
|
},
|
||||||
installThemeRepo(repo) {
|
installThemeRepo(repo) {
|
||||||
let self = this
|
let self = this
|
||||||
let msg = app.stringTemplateParser(app.getLz('settings.option.visual.theme.github.install.confirm'), {
|
let msg = app.stringTemplateParser(app.getLz('settings.option.visual.theme.github.install.confirm'), {
|
||||||
|
|
@ -89,7 +143,6 @@
|
||||||
fetch("https://api.github.com/search/repositories?q=topic:cidermusictheme fork:true", requestOptions)
|
fetch("https://api.github.com/search/repositories?q=topic:cidermusictheme fork:true", requestOptions)
|
||||||
.then(response => response.text())
|
.then(response => response.text())
|
||||||
.then(result => {
|
.then(result => {
|
||||||
console.log(result)
|
|
||||||
self.repos = JSON.parse(result).items
|
self.repos = JSON.parse(result).items
|
||||||
})
|
})
|
||||||
.catch(error => console.log('error', error));
|
.catch(error => console.log('error', error));
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue