remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ (note) first note display

Browse Source
This commit is contained in:
Julien Calixte
2021-03-13 13:59:15 +01:00
parent b6d71227b6
commit c625db82c7
5 changed files with 117 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/components/HelloWorld.vue
View File

@@ -1,184 +0,0 @@
<template>
<div class="hello">
<h1 class="title is-1">{{ t('hello') }}</h1>
<h2 class="subtitle is-2">{{ upperMessage }}</h2>
<p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
>vue-cli documentation</a
>.
</p>
<h3 class="title is-3">Installed CLI Plugins</h3>
<ul>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank"
rel="noopener"
>babel</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
target="_blank"
rel="noopener"
>pwa</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
target="_blank"
rel="noopener"
>router</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
target="_blank"
rel="noopener"
>vuex</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
target="_blank"
rel="noopener"
>eslint</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest"
target="_blank"
rel="noopener"
>unit-jest</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
target="_blank"
rel="noopener"
>typescript</a
>
</li>
</ul>
<h3 class="title is-3">Installed command</h3>
<ul>
<li>
<code>yarn pwa:asset</code> (or <code>npm run pwa:asset</code>) creates
all the assets for the PWA asset. Just change the logo.svg in the img
folder and let the magic do the rest.
</li>
</ul>
<h3 class="title is-3">Essential Links</h3>
<ul>
<li>
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
>Forum</a
>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
>Community Chat</a
>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
>Twitter</a
>
</li>
<li>
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
</li>
</ul>
<h3 class="title is-3">Ecosystem</h3>
<ul>
<li>
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
>vue-router</a
>
</li>
<li>
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-devtools#vue-devtools"
target="_blank"
rel="noopener"
>vue-devtools</a
>
</li>
<li>
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
>vue-loader</a
>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
rel="noopener"
>awesome-vue</a
>
</li>
</ul>
</div>
<FooterTranslation class="footer-translation" />
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import FooterTranslation from '@/components/FooterTranslation.vue'
export default defineComponent({
name: 'HelloWorld',
components: {
FooterTranslation
},
props: {
msg: String
},
setup(props) {
const { t } = useI18n()
const upperMessage = computed(() => {
return (props.msg ?? '').toUpperCase()
})
return {
upperMessage,
t
}
}
})
</script>
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.footer-translation {
margin-top: 1rem;
}
</style>

28
src/hooks/useLinks.hook.ts Normal file
View File

@@ -0,0 +1,28 @@
export const useLinks = (className: string) => {
const linkNote: EventListenerOrEventListenerObject = (e) => {
e.preventDefault()
console.log('use links')
}
const selector = `.${className} a`
const removeListeners = () => {
const elements = document.querySelectorAll(selector)
elements.forEach((element) => {
element.removeEventListener('click', linkNote)
})
}
const listenToClick = () => {
removeListeners()
const elements = document.querySelectorAll(selector)
elements.forEach((element) => {
element.addEventListener('click', linkNote)
})
}
return {
listenToClick,
removeListeners
}
}

50
src/hooks/useRepo.hook.ts Normal file
View File

@@ -0,0 +1,50 @@
import { onMounted, ref } from '@vue/runtime-core'
import MarkdownIt from 'markdown-it'
import { request } from '@octokit/request'
const md = new MarkdownIt()
export const useRepo = (owner: string, repo: string) => {
const readme = ref<string | null>(null)
onMounted(async () => {
const README = await request('GET /repos/{owner}/{repo}/readme', {
repo,
owner
})
if (README) {
readme.value = md.render(
decodeURIComponent(escape(atob(README.data.content)))
)
}
const commits = await request('GET /repos/{owner}/{repo}/commits', {
owner,
repo
})
const lastCommit = commits.data.shift()
if (!lastCommit) {
return
}
const tree = await request(
'GET /repos/{owner}/{repo}/git/trees/{tree_sha}',
{
owner,
repo,
tree_sha: lastCommit.commit.tree.sha,
recursive: 'true'
}
)
console.log(tree.data.tree.filter((t) => t.type === 'blob'))
})
return {
readme
}
}

16
src/styles/app.scss
View File

@@ -6,3 +6,19 @@ body {
text-align: center;
min-height: 100vh;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 2rem;
}
h4 {
font-size: 1.5rem;
}

29
src/views/Home.vue
View File

@@ -1,18 +1,35 @@
<template>
<div class="home">
<img alt="Vue logo" src="@/assets/logo.png" />
<HelloWorld msg="Welcome to OVA Template!" />
<p class="note" v-html="readme"></p>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'
import { defineComponent, watch, onUnmounted, nextTick } from 'vue'
import { useRepo } from '@/hooks/useRepo.hook'
import { useLinks } from '@/hooks/useLinks.hook'
export default defineComponent({
name: 'Home',
components: {
HelloWorld
setup() {
const { readme } = useRepo('jcalixte', 'notes')
const { listenToClick, removeListeners } = useLinks('note')
watch(readme, () => {
if (readme.value) {
nextTick(() => {
listenToClick()
})
}
})
onUnmounted(() => {
removeListeners()
})
return {
readme
}
}
})
</script>