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

♻️ (notes) script with setup for stacked note

Browse Source
This commit is contained in:
Julien Calixte
2023-07-16 16:30:56 +02:00
parent 65ac0acb83
commit 7ef6205109
1 changed files with 43 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/StackedNote.vue
View File

@@ -1,3 +1,46 @@
<script lang="ts" setup>
import LinkedNotes from '@/components/LinkedNotes.vue'
import { useFile } from '@/hooks/useFile.hook'
import { useImages } from '@/hooks/useImages.hook'
import { useLinks } from '@/hooks/useLinks.hook'
import { useNoteOverlay } from '@/hooks/useNoteOverlay.hook'
import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
import { useTitleNotes } from '@/hooks/useTitleNotes.hook'
import { filenameToNoteTitle } from '@/utils/noteTitle'
import { generateTweets } from '@/utils/twitter'
import { computed, nextTick, watch } from 'vue'
const props = defineProps<{
user: string
repo: string
index: number
title: string
sha: string
}>()
const { scrollToFocusedNote } = useQueryStackedNotes()
const { content } = useFile(props.sha)
const { listenToClick } = useLinks('stacked-note', props.sha)
const className = computed(() => `stacked-note-${props.index}`)
const titleClassName = computed(() => `title-${className.value}`)
useTitleNotes(props.repo)
const { displayNoteOverlay } = useNoteOverlay(className.value, props.index)
const displayedTitle = computed(() => filenameToNoteTitle(props.title))
watch(content, () => {
if (content.value) {
nextTick(() => {
listenToClick()
useImages(props.sha)
generateTweets()
})
}
})
const focus = () => scrollToFocusedNote(props.sha)
</script>
<template> <template>
<div <div
class="stacked-note" class="stacked-note"
@@ -25,64 +68,6 @@
</div> </div>
</template> </template>
<script lang="ts">
import LinkedNotes from '@/components/LinkedNotes.vue'
import { useFile } from '@/hooks/useFile.hook'
import { useImages } from '@/hooks/useImages.hook'
import { useLinks } from '@/hooks/useLinks.hook'
import { useNoteOverlay } from '@/hooks/useNoteOverlay.hook'
import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
import { useTitleNotes } from '@/hooks/useTitleNotes.hook'
import { filenameToNoteTitle } from '@/utils/noteTitle'
import { generateTweets } from '@/utils/twitter'
import { computed, defineComponent, nextTick, watch } from 'vue'
export default defineComponent({
name: 'StackedNote',
components: {
LinkedNotes
},
props: {
user: { type: String, required: true },
repo: { type: String, required: true },
index: { type: Number, required: true },
title: { type: String, required: true },
sha: { type: String, required: true }
},
setup(props) {
const { scrollToFocusedNote } = useQueryStackedNotes()
const { content, fromCache } = useFile(props.sha)
const { listenToClick } = useLinks('stacked-note', props.sha)
const className = computed(() => `stacked-note-${props.index}`)
const titleClassName = computed(() => `title-${className.value}`)
useTitleNotes(props.repo)
const { displayNoteOverlay } = useNoteOverlay(className.value, props.index)
const displayedTitle = computed(() => filenameToNoteTitle(props.title))
watch(content, () => {
if (content.value) {
nextTick(() => {
listenToClick()
useImages(props.sha)
generateTweets()
})
}
})
return {
content,
fromCache,
titleClassName,
className,
displayNoteOverlay,
displayedTitle,
focus: () => scrollToFocusedNote(props.sha)
}
}
})
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
$border-color: rgba(18, 19, 58, 0.2); $border-color: rgba(18, 19, 58, 0.2);