Add vue sequence

.gitignore

@@ -1,3 +1,4 @@
+.idea
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
@@ -33,4 +34,4 @@ yarn-error.log*
 .env.local
 .env.development.local
 .env.test.local
-.env.production.local
+.env.production.local

components/MDXComponents.js

@@ -4,12 +4,14 @@ import { getMDXComponent } from 'mdx-bundler/client'
 import Image from './Image'
 import CustomLink from './Link'
 import TOCInline from './TOCInline'
+import ZenUML from './ZenUML'
 import Pre from './Pre'
 import { BlogNewsletterForm } from './NewsletterForm'
 
 export const MDXComponents = {
   Image,
   TOCInline,
+  ZenUML,
   a: CustomLink,
   pre: Pre,
   BlogNewsletterForm: BlogNewsletterForm,

components/TOCInline.js

@@ -1,3 +1,14 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import { VueSequence } from 'vue-sequence'
+import 'vue-sequence/dist/vue-sequence.css'
+import { useEffect, useRef } from 'react'
+
+console.log('Vue', Vue, Vuex)
+console.log('VueSequence', VueSequence)
+Vue.use(Vuex)
+const store = new Vuex.Store(VueSequence.Store())
+store.commit('code', 'A.m')
 /**
  * @typedef TocHeading
  * @prop {string} value
@@ -20,7 +31,7 @@
  * }} props
  *
  */
-const TOCInline = ({
+const TOCInline1 = ({
   toc,
   indentDepth = 3,
   fromHeading = 1,
@@ -47,8 +58,20 @@ const TOCInline = ({
     </ul>
   )
 
+  const localRef = useRef(null)
+
+  useEffect(() => {
+    new Vue({
+      el: localRef.current,
+      store,
+      render: function (h) {
+        return h(VueSequence.DiagramFrame)
+      },
+    })
+  })
   return (
     <>
+      <div ref={localRef}></div>
       {asDisclosure ? (
         <details open>
           <summary className="ml-6 pt-2 pb-2 text-xl font-bold">Table of Contents</summary>
@@ -61,4 +84,4 @@ const TOCInline = ({
   )
 }
 
-export default TOCInline
+export default TOCInline1

components/ZenUML.js

@@ -0,0 +1,54 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import { VueSequence } from 'vue-sequence'
+import 'vue-sequence/dist/vue-sequence.css'
+import { useEffect, useRef } from 'react'
+
+console.log('Vue', Vue, Vuex)
+console.log('VueSequence', VueSequence)
+Vue.use(Vuex)
+const store = new Vuex.Store(VueSequence.Store())
+store.commit('code', 'A.m')
+/**
+ * @typedef TocHeading
+ * @prop {string} value
+ * @prop {number} depth
+ * @prop {string} url
+ */
+
+/**
+ * Generates an inline table of contents
+ * Exclude titles matching this string (new RegExp('^(' + string + ')$', 'i')).
+ * If an array is passed the array gets joined with a pipe (new RegExp('^(' + array.join('|') + ')$', 'i')).
+ *
+ * @param {{
+ *  toc: TocHeading[],
+ *  indentDepth?: number,
+ *  fromHeading?: number,
+ *  toHeading?: number,
+ *  asDisclosure?: boolean,
+ *  exclude?: string|string[]
+ * }} props
+ *
+ */
+const ZenUML = ({ code }) => {
+  store.commit('code', code)
+  const localRef = useRef(null)
+
+  useEffect(() => {
+    new Vue({
+      el: localRef.current,
+      store,
+      render: function (h) {
+        return h(VueSequence.DiagramFrame)
+      },
+    })
+  })
+  return (
+    <>
+      <div ref={localRef}></div>
+    </>
+  )
+}
+
+export default ZenUML

data/blog/How-to-show-the-stickman-for-a-participant.mdx

@@ -0,0 +1,38 @@
+---
+title: 'How to show a stick-man icon in ZenUML?'
+date: 2022-03-14
+lastmod: '2022-03-15'
+tags: ['zenuml', 'next-js', 'tailwind', 'guide']
+draft: false
+summary: 'An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more'
+layout: PostSimple
+bibliography: references-data.bib
+canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/new-features-in-v1/
+---
+
+## Question
+
+I want to use the stick-man for one participant.
+
+sources: https://stackoverflow.com/questions/64802507/how-to-change-the-default-user-participant-label-in-zenuml-sequence-diagram
+
+## Solution
+
+ZenUML use annotations to assign icons to the participants. To use the stick-man icon, you need to use the `@Actor` annotation
+when declaring the participant. For example, the following DSL will show a stick-man icon for the `Buyer` participant.
+
+```java
+@Actor Buyer
+@Actor Seller
+
+Buyer->Seller: Hello Seller!
+```
+
+export const demo = `
+@Actor Buyer
+@Actor Seller
+
+Buyer->Seller: Hello Seller!
+`
+
+<ZenUML code={demo} />

data/blog/new-features-in-v1.mdx

@@ -14,7 +14,7 @@ canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/new-features-
 
 A post on the new features introduced in v1.0. New features:
 
-<TOCInline toc={props.toc} exclude="Overview" toHeading={2} />
+<ZenUML />
 
 First load JS decreased from 43kB to 39kB despite all the new features added!^[With the new changes in Nextjs 12, first load JS increase to 45kB.]
 

data/blog/zenuml-sample.mdx

@@ -0,0 +1,22 @@
+---
+title: 'ZenUML on MDX'
+date: 2022-03-14
+lastmod: '2022-03-14'
+tags: ['zenuml', 'next-js', 'tailwind', 'guide']
+draft: false
+summary: 'An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more'
+layout: PostSimple
+bibliography: references-data.bib
+canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/new-features-in-v1/
+---
+
+## Overview
+
+This post demonstrates the integration of ZenUML with MDX, Next.js and Tailwind.
+
+export const demo = `
+A B C D
+E.m
+`
+
+<ZenUML code={demo} />

data/resources/zenuml-sample/demo-dsl.js

@@ -0,0 +1,4 @@
+const DSL = `headClass = methodStack.peekContainingClass() {
+  return "peekMethod().map(PsiMember::getContainingClass)";
+}`
+export default DSL