Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: better markdown support #5366

Closed
wants to merge 10 commits into from
Closed

feat: better markdown support #5366

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
adb14ec
feat: better markdown support
Jarsen136 Mar 25, 2023
9b23397
fix: support more language
Jarsen136 Mar 25, 2023
26cc230
feat: vue-markdown-v2
Jarsen136 Mar 31, 2023
45a92a3
Merge branch 'main' into issue-5361
Jarsen136 Mar 31, 2023
f37df46
fix update pnpm lock
Jarsen136 Mar 31, 2023
fda835b
fix: update markdown & hightlight.js version
Jarsen136 Mar 31, 2023
9b1ea6b
Merge branch 'main' into issue-5361
Jarsen136 Apr 1, 2023
a202589
fix: update pnpm locl
Jarsen136 Apr 1, 2023
75be4e9
fix: update @iktakahiro/markdown-it-katex
Jarsen136 Apr 2, 2023
9b6dc63
Merge branch 'main' into issue-5361
vikiival Apr 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .github/renovate.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
"https://github.com/polkadot-js/",
"https://github.com/vue-polkadot/",
"https://github.com/kodadot/packages",
"https://github.com/cloudacy/vue-markdown-render",
"https://github.com/FortAwesome/Font-Awesome",
"https://github.com/TypeStrong/ts-loader"
],
Expand Down
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ Since we're using [Cypress](https://www.cypress.io/) as our primary E2E tool for

One of the main reasons tests will fail (except when bugs get introduced) is that we're using custom HTML tags to [select elements](https://docs.cypress.io/guides/references/best-practices#Selecting-Elements) within the testing suite. If your contribution touches components with these custom tags and you get failed tests, these selectors must be checked and usually adjusted.

You can identify these kinds of problems by seeing similar-looking test reports:
You can identify these kinds of problems by seeing similar-looking test reports:
`Expected to find element: [data-cy="submit"], but never found it.`

TL;DR: If you're touching components which include HTML tags such as `data-cy="submit"`, and the tests fail, make sure the tests still use the correct selector.
Expand Down
3 changes: 1 addition & 2 deletions components/collection/CollectionInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
</nuxt-link>
</div>
<div class="overflow-wrap">
<vue-markdown :source="visibleDescription" />
<Markdown :source="visibleDescription" />
</div>
<NeoButton
v-if="hasSeeAllDescriptionOption"
Expand Down Expand Up @@ -51,7 +51,6 @@
</div>
</template>
<script setup lang="ts">
import VueMarkdown from 'vue-markdown-render'
import CollectionInfoLine from './collectionInfoLine.vue'
import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
import IdentityIndex from '@/components/identity/IdentityIndex.vue'
Expand Down
4 changes: 2 additions & 2 deletions components/gallery/GalleryItemDescription.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</nuxt-link>
</div>

<vue-markdown
<Markdown
:source="nftMetadata?.description?.replaceAll('\n', ' \n') || ''"
class="gallery-item-desc-markdown" />
</o-tab-item>
Expand Down Expand Up @@ -94,7 +94,7 @@
import { OTabItem, OTable, OTableColumn, OTabs } from '@oruga-ui/oruga'
import Identity from '@/components/identity/IdentityIndex.vue'
import { sanitizeIpfsUrl } from '@/utils/ipfs'
import VueMarkdown from 'vue-markdown-render'

import { DisablableTab } from '@kodadot1/brick'

import { useGalleryItem } from './useGalleryItem'
Expand Down
3 changes: 1 addition & 2 deletions components/massmint/OnBoarding.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
{{ card.title }}
</p>
<div class="content is-size-4-tablet is-size-5-mobile">
<VueMarkdown :source="card.content" />
<Markdown :source="card.content" />
</div>
</div>
</div>
Expand Down Expand Up @@ -65,7 +65,6 @@

<script lang="ts" setup>
import { NeoButton, NeoButtonVariant } from '@kodadot1/brick'
import VueMarkdown from 'vue-markdown-render'
import { usePreferencesStore } from '@/stores/preferences'
import { SwipeDirection, useSwipe } from '@vueuse/core'
const router = useRouter()
Expand Down
37 changes: 37 additions & 0 deletions components/shared/Markdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<template>
<vue-markdown
:source="source"
class="content-markdown"
:anchor-attributes="{
target: '_blank',
rel: 'noopener noreferrer',
}"
@rendered="update" />
</template>

<script lang="ts" setup>
import VueMarkdown from 'vue-markdown-v2'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can still use vue-markdown-render. that package support vue3 starting on v2 https://github.com/cloudacy/vue-markdown-render/releases/tag/v2.0.0. because vue-markdown-v2 was a bit outdated 4 years ago

I test it by changing it to this seems works:

<template>
  <vue-markdown :source="source" :options="options" />
</template>

<script lang="ts" setup>
import VueMarkdown from 'vue-markdown-render'
import hljs from 'highlight.js'

const props = defineProps<{
  source: string
  highlight?: boolean
}>()

const options = computed(() => {
  const defaultOptions = {
    html: true,
    linkify: true,
    typographer: true,
  }

  if (props.highlight) {
    return {
      ...defaultOptions,
      highlight: (code: string, lang: string) => {
        if (lang && hljs.getLanguage(lang)) {
          try {
            return hljs.highlight(lang, code).value
          } catch (error) {
            console.error(error)
          }
        }

        return hljs.highlightAuto(code).value
      },
    }
  }

  return defaultOptions
})
</script>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. I will take a try later

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good 🤗

import Prism from 'prismjs'
import 'prismjs/themes/prism-okaidia.css' // theme

import '@/styles/components/_content-markdown.scss'

// import languages
import 'prismjs/components/prism-javascript.min'
import 'prismjs/components/prism-json.min'
import 'prismjs/components/prism-graphql.min'
import 'prismjs/components/prism-typescript.min'
import 'prismjs/components/prism-bash.min'

defineProps<{
source: string
}>()

const { $nextTick } = useNuxtApp()

const update = () => {
$nextTick(() => {
Prism.highlightAll()
})
}
</script>
8 changes: 4 additions & 4 deletions components/shared/collapse/DescriptionWrapper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
activeWrapper && hasWrapper ? { maxHeight: `${rowHeight}px` } : null,
]"
:class="{ 'description-wrapper': activeWrapper && hasWrapper }">
<VueMarkdown :source="text" />
<Markdown :source="text" />
</div>
<div class="has-text-centered">
<a @click.prevent="toggleDescription" v-if="hasWrapper">
<a v-if="hasWrapper" @click.prevent="toggleDescription">
<b-icon :icon="activeWrapper ? 'chevron-down' : 'chevron-up'"></b-icon>
</a>
</div>
Expand All @@ -18,9 +18,9 @@
<script lang="ts">
import { Component, Prop, mixins } from 'nuxt-property-decorator'
import KeyboardEventsMixin from '~/utils/mixins/keyboardEventsMixin'

import Markdown from '@/components/shared/Markdown'
const components = {
VueMarkdown: () => import('vue-markdown-render'),
Markdown,
}

@Component({ components })
Expand Down
4 changes: 2 additions & 2 deletions components/unique/Collection/Item/CollectionItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
<div class="columns is-centered">
<div class="column is-8 has-text-centered">
<p class="content">
<VueMarkdown :source="description" />
<Markdown :source="description" />
<CollapseWrapper
v-if="attributes && attributes.length"
visible="collapse.collection.attributes.show"
Expand Down Expand Up @@ -105,7 +105,7 @@ const components = {
import('@/components/rmrk/Gallery/GalleryCardList.vue'),
Sharing: () => import('@/components/shared/Sharing.vue'),
ProfileLink: () => import('@/components/rmrk/Profile/ProfileLink.vue'),
VueMarkdown: () => import('vue-markdown-render'),
Markdown: () => import('@/components/shared/Markdown.vue'),
CollapseWrapper: () =>
import('@/components/shared/collapse/CollapseWrapper.vue'),
TransferCollection: () =>
Expand Down
1 change: 1 addition & 0 deletions nuxt.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,7 @@ export default defineNuxtConfig({
'~/plugins/pwa',
'~/plugins/vueAudioVisual',
'~/plugins/vueClipboard',
'~/plugins/vueMarkdown',
'~/plugins/vueSocialSharing',
'~/plugins/vueTippy',
],
Expand Down
6 changes: 4 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,6 @@
"emoji-unicode": "^2.0.1",
"graphql": "^16.6.0",
"graphql-ws": "^5.12.0",
"highlight.js": "^11.7.0",
"keen-slider": "^6.8.5",
"lazysizes": "^5.3.2",
"lodash": "^4.17.21",
Expand All @@ -106,6 +105,7 @@
"nuxt-edge": "2.16.0-27720022.54e852f",
"nuxt-property-decorator": "^2.9.1",
"ohmyfetch": "^0.4.21",
"prismjs": "^1.29.0",
"setimmediate": "^1.0.5",
"slugify": "^1.6.5",
"v-emoji-picker": "^2.3.3",
Expand All @@ -115,7 +115,7 @@
"vue-class-component": "^7.2.6",
"vue-clipboard2": "^0.3.3",
"vue-infinite-loading": "^2.4.5",
"vue-markdown-render": "^1.1.3",
"vue-markdown-v2": "^0.1.7",
"vue-social-sharing": "^3.0.9",
"vue-tippy": "^4.16.1",
"vuex": "3.6.2",
Expand Down Expand Up @@ -181,6 +181,8 @@
"overrides": {
"vue-server-renderer": "2.7.14",
"vue-template-compiler": "2.7.14",
"highlight.js": "10.4.1",
"markdown-it": "12.3.2",
"h3": "1.1.0"
},
"patchedDependencies": {
Expand Down
32 changes: 7 additions & 25 deletions pages/contribute.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,14 @@
<template>
<section class="content">
<VueMarkdown :source="content" :options="options" />
<Markdown
:source="Contributing"
:anchor-attributes="{
target: '_blank',
rel: 'noopener noreferrer',
}" />
</section>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import highlight from '~/utils/highlight'

import '@/styles/components/_content-markdown.scss'

<script lang="ts" setup>
import Contributing from '../CONTRIBUTING.md'

@Component({
components: {
VueMarkdown: () => import('vue-markdown-render'),
},
data() {
return {
options: {
highlight,
},
}
},
})
export default class Contribute extends Vue {
get content() {
return Contributing
}
}
</script>
32 changes: 7 additions & 25 deletions pages/first-time.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,14 @@
<template>
<section class="content">
<VueMarkdown :source="content" :options="options" />
<Markdown
:source="FirstTimeMD"
:anchor-attributes="{
target: '_blank',
rel: 'noopener noreferrer',
}" />
</section>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import highlight from '~/utils/highlight'

import '@/styles/components/_content-markdown.scss'

<script lang="ts" setup>
import FirstTimeMD from '../FIRST_TIME.md'

@Component({
components: {
VueMarkdown: () => import('vue-markdown-render'),
},
data() {
return {
options: {
highlight,
},
}
},
})
export default class FirstTime extends Vue {
get content() {
return FirstTimeMD
}
}
</script>
3 changes: 3 additions & 0 deletions plugins/vueMarkdown.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import Vue from 'vue'
import VueMarkdown from 'vue-markdown-v2'
Vue.use(VueMarkdown)
Loading