✨ (note) first note display
This commit is contained in:
@@ -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
28
src/hooks/useLinks.hook.ts
Normal 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
50
src/hooks/useRepo.hook.ts
Normal 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
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -6,3 +6,19 @@ body {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,18 +1,35 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home">
|
<div class="home">
|
||||||
<img alt="Vue logo" src="@/assets/logo.png" />
|
<p class="note" v-html="readme"></p>
|
||||||
<HelloWorld msg="Welcome to OVA Template!" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue'
|
import { defineComponent, watch, onUnmounted, nextTick } from 'vue'
|
||||||
import HelloWorld from '@/components/HelloWorld.vue'
|
import { useRepo } from '@/hooks/useRepo.hook'
|
||||||
|
import { useLinks } from '@/hooks/useLinks.hook'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'Home',
|
name: 'Home',
|
||||||
components: {
|
setup() {
|
||||||
HelloWorld
|
const { readme } = useRepo('jcalixte', 'notes')
|
||||||
|
const { listenToClick, removeListeners } = useLinks('note')
|
||||||
|
|
||||||
|
watch(readme, () => {
|
||||||
|
if (readme.value) {
|
||||||
|
nextTick(() => {
|
||||||
|
listenToClick()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
removeListeners()
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
readme
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user