fix: update tweet components

docs/.vitepress/config.js

@@ -98,7 +98,6 @@ module.exports = {
     ['link', { rel: 'dns-prefetch', href: 'https://fonts.gstatic.com' }],
     ['link', { rel: 'preconnect', crossorigin: 'anonymous', href: 'https://fonts.gstatic.com' }],
     ['link', { href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200;400;500&family=Inter:wght@200;400;500;600', rel: 'stylesheet' }],
-    ['script', { async: true, src: 'https://platform.twitter.com/widgets.js', charset: 'utf-8' }],
   ],
   themeConfig: {
     repo: 'slidevjs/slidev',

packages/client/builtin/Tweet.vue

@@ -1,24 +1,40 @@
 <script setup lang="ts">
-import { defineProps, onMounted, ref } from 'vue'
+import { useScriptTag } from '@vueuse/core'
+import { defineProps, getCurrentInstance, onMounted, ref } from 'vue'
 import { isDark } from '../logic/dark'
 
 const props = defineProps<{
   id: string | number
   scale?: string | number
+  conversation?: string
 }>()
 
 const tweet = ref<HTMLElement | null>()
 
-onMounted(() => {
+const vm = getCurrentInstance()!
+
+function create() {
   // @ts-ignore
   window?.twttr?.widgets?.createTweet(
     props.id.toString(),
     tweet.value,
     {
       theme: isDark.value ? 'dark' : 'light',
+      conversation: props.conversation || 'none',
     },
   )
-})
+}
+
+useScriptTag(
+  'https://platform.twitter.com/widgets.js',
+  () => {
+    if (vm.isMounted)
+      create()
+    else
+      onMounted(create, vm)
+  },
+  { async: true },
+)
 </script>
 
 <template>

packages/client/index.html

@@ -10,6 +10,5 @@
   <div id="app"></div>
   <script type="module" src="__ENTRY__"></script>
   <!-- body -->
-  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 </body>
 </html>

packages/create-app/template/slides.md

@@ -92,6 +92,62 @@ function updateUser(id: number, update: Partial<User>) {
 }
 ```
 
+---
+
+# Components
+
+<div grid="~ cols-2 gap-4">
+<div>
+
+You can use Vue components directly inside your slides.
+
+We have provided a few built-in components like `<Tweet/>` and `<Youtube/>` that you can use directly use. And add your custom components are also super easy.
+
+Check out [the guides](https://slidev.antfu.me/custom/#components) for more.
+
+</div>
+<div>
+
+```html
+<Tweet id="1385774635015307265" />
+```
+
+<Tweet id="1385774635015307265" scale="0.65" />
+
+</div>
+</div>
+
+---
+class: "px-20"
+---
+
+# Themes
+
+Slidev come with a powerful theming support. Themes are able to provide styles, layouts, components or even tools configurations. Switching between themes by just **one edit** in your frontmatter:
+
+<div grid="~ cols-2 gap-2" m="-t-2">
+
+```yml
+---
+theme: default
+---
+```
+
+```yml
+---
+theme: seriph
+---
+```
+
+<img border="rounded" src="https://slidev.antfu.me/themes/default.png">
+
+<img border="rounded" src="https://slidev.antfu.me/themes/seriph.png">
+
+</div>
+
+Read more about [How to use a theme](https://slidev.antfu.me/themes/use.html) and
+check out the [Awesome Themes Gallery](https://slidev.antfu.me/themes/gallery.html).
+
 ---
 layout: center
 class: "text-center"

packages/slidev/node/parser.ts

@@ -108,6 +108,13 @@ export function parse(
         }
       }
     }
+    // skip code block
+    else if (line.startsWith('```')) {
+      for (i += 1; i < lines.length; i++) {
+        if (lines[i].startsWith('```'))
+          break
+      }
+    }
   }
 
   if (start !== lines.length - 1)