okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improvements to github repos page, added readme.md's

Browse source
This commit is contained in:
booploops 2022-02-13 23:55:06 -08:00
parent 2d9ca47f26
commit 25ed627d6c
4 changed files with 5651 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

5531
src/renderer/js/showdown.min.js vendored Normal file
View file

File diff suppressed because it is too large Load diff

41
src/renderer/less/pages.less
View file

@ -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

1
src/renderer/views/main.ejs
View file

@ -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 %>">

103
src/renderer/views/pages/themes-github.ejs
View file

@ -1,34 +1,52 @@
<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="row"> <div class="gh-header">
<div class="col nopadding"> <div class="row">
<h1 class="header-text">Themes from GitHub</h1> <div class="col nopadding">
</div> <h1 class="header-text">Themes from GitHub</h1>
<div class="col-auto nopadding flex-center"> </div>
<button class="md-btn md-btn-small md-btn-block" @click="installThemeURL()" style="margin-top: 8px"> <div class="col-auto nopadding flex-center">
{{$root.getLz('settings.option.visual.theme.github.download')}} <button class="md-btn md-btn-small md-btn-block" @click="installThemeURL()">
</button> {{$root.getLz('settings.option.visual.theme.github.download')}}
</button>
</div>
</div> </div>
</div> </div>
<ul class="list-group"> <div class="gh-content">
<li class="list-group-item list-group-item-dark" v-for="repo in repos"> <div class="repos-list">
<div class="row"> <ul class="list-group list-group-flush">
<div class="col-1 flex-center"> <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">
<img class="github-avatar" :src="repo.owner.avatar_url" alt=""> <div class="row">
</div> <div class="col flex-center">
<div class="col flex-center"> <div>
<div> <h4 class="repo-name">{{ repo.description }}</h4>
<h3 class="repo-name">{{ repo.description }}</h3> <div>⭐ {{ repo.stargazers_count }}</div>
<div>⭐ {{ repo.stargazers_count }}</div> </div>
<small><a :href="repo.html_url" target="_blank">{{ repo.full_name }}</a></small> </div>
</div>
</li>
</ul>
</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> </div>
<div class="col-auto flex-center">
<button class="md-btn md-btn-primary" @click="installThemeRepo(repo)">Install</button>
</div>
</div> </div>
</li> <hr>
</ul> <div v-html="openRepo.readme" class="github-content"></div>
</div>
</div>
</div> </div>
</script> </script>
<script> <script>
@ -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));