I'm using Hugo framework and I've setup Mermaid to create diagrams.
In a Hugo post I've two sequence diagrams. I would like to style them the same way.
However, when I style the first one, the diagram breaks and shows me only the syntax. When I style the second diagram it works well, but if I try to style the first one again, both of them breaks.
Below is my code:
first diagram
{{< mermaid align="center">}}
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#512163',
'primaryTextColor': '#fff',
}
}
}%%
sequenceDiagram
Service ->> User: Enter username and password
User ->> Service: Send credentials
{{< /mermaid >}}
second diagram:
{{< mermaid align="center">}}
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#512163',
'primaryTextColor': '#fff',
}
}
}%%
sequenceDiagram
Service ->> User: Enter username and password
User ->> Service: Send credentials
{{< /mermaid >}}
This is my shortcode in the Hugo themes folder:
layouts/shortcodes/mermaid.html
1 <script async type="application/javascript" src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
2 {{ $align := .Get "align" }}
3 <div class="mermaid" align="{{ $align }}">
4 {{ .Inner | safeHTML }}
5 </div>
I've tried to see if I'm missing some tags, removing the entire script and setting it at the header level.
I'm expecting to style all my mermaid graphs the same way.
Like this:
mermaid.live
Related
I've looked at the vue documentation on this page to see how I can solve this: https://kazupon.github.io/vue-i18n/guide/formatting.html#named-formatting
I think i have all the syntaxes correct and I have tried many different scenarios with the href code.
This is the english translated file from my json file:
"link": {
"text": "Click this {Url} link."
}
This is from my template:
{{ $t("Message.link.text", { Url: www.google.com }) }}
This does not work and it displays {{ $t("Message.link.text", { Url: www.google.com }) }} in the UI.
Appreciate all the help I can get, thanks in advance!
You cannot output HTML with interpolation ({{ }} syntax) in Vue. You can use v-html for that but it is dangerous (see the warnings in the docs)
Use Component interpolation instead:
"link": {
"text": "Click this {url}.",
"link": "link",
}
Template:
<i18n path="Message.link.text" tag="p">
<template v-slot:url>
{{ $t('Message.link.link') }}
</template>
</i18n>
im trying to make a set of images using v-for loop, but somehow it doesn't recognise variables inside the tag. pic is broken and alt just shows me {{ item.alt }} thing.
Here is my HTML:
<section class="our-technologies__section" v-for="(item, index) in tech_item" :key="index">
<div class="technologies__logo" #click="activeIndex = index" :class="{active: activeIndex === index}">
<img src="{{ item.src }}" alt="{{ item.alt }}">
<p>{{item.title}}</p>
</div>
</section>
And here are script:
export default {
name: "OurTechnologies",
data: function () {
return{
tech_item: [
{ title: 'Twilio', text: 'gfmds/lgkmlk/f', src: '../../images/twilio.png', alt: 'Twilio' },
{ title: 'Android', text: '12334356676', src: '../../images/android.png', alt: 'Android' },
],
activeIndex: 0,
}
},
}
I tried to use <img :src="item.src" :alt="item.alt"> and its still no results.
In vue cli you should use require to load the image :
<img :src="require(item.src)" :alt="item.alt"/>
<img :src="item.src" :alt="item.alt"> should work ™, but then I don't know enough about the environment you have set up. I quickly tried with a fresh project using vite and using the App component (so that it was root level), it didn't even need require for it to work. For this to work your images would be usually be in the ./src/assets/ directory, which they are not and I'm wondering if that's what is causing the problems, that the images are falling out of scope. You likely have a different setup, but I think you might able to use another option.
Place the images into the ./public/images/ folder. This will make them included as part of the bundle whether you're using dev/serve or build. Then reference them as /images/*.png without require or import. As long as you are serving the app at root level so that /images resolves correctly this should make it work. Otherwise it may need a bit of extra finessing to target the right directory.
I have this tab system, which works perfectly for me. I am learning VueJs. I have a concern
regarding components and/or templates. My concern is:
Using any tab windows as an example,how do I add two components inside a tab,I mean
one of its windows or sections.
Any help,please?
This is my codepen:
https://codepen.io/luis-tavarez/pen/dyOeRwO
It would be worth checking out Vue's Single File Components.
Using the layout you already have in place, you could add additional components to a tab by doing the following. Let's assume the new component will be named Custom.
Add an additional router-view to your HTML:
<section class="mainBody">
<router-view name="header"><button>asaaasas</button></router-view>
<router-view name="content"></router-view>
<router-view name="custom"></router-view>
</section>
Add a new template block to Home, for example above line 43 where you've described the Header template:
const Custom = {
template: `
<section class="content">
<div>
<h1>Here is your new custom component</h1>
</div>
</secion>
`
};
Update Components in your Routes description:
{
path: "/three",
name: 'three',
components: {
header: Header,
content: contentThree,
custom: Custom
},
props: {
header: true,
content: false
}
},
And here it is rendered:
I have a drupal module called chess, in which I have different images to be displayed, javascripts to be included, and css to be linked.
I tried defining a chess/chess.libraries.yml that looks like this:
chess:
version: 1.x
css:
theme:
css/chess.css: {}
js:
js/jquery-ui.min.js: {}
js/jquery.ui-touch-punch.min.js: {}
js/jquery.simulate.js: {}
js/chess.js: {}
js/socket.io.js: {}
js/chess-socket.js: {}
js/chat.js: {}
dependencies:
- core/jquery
and included a line {{ attach_library('chess/chess') }} in chess/templates/index.html.twig. The images live in chess/images. Additionally, my ChessController's render array looks like this:
public function page(){
$content = readfile('modules/chess/templates/index.html.twig');
$element = array (
'#type' => 'markup',
'#markup' => $this->t($content),
'#attached' => array(
'library' => 'chess/chess'
),
);
return $element;
}
So it has the chess library attached. The only thing that shows up though is the html with broken images, no css, and an error message at the bottom of the page:
The website encountered an unexpected error. Please try again later.
InvalidArgumentException: $string ("7864") must be a string. in
Drupal\Core\StringTranslation\TranslatableMarkup->__construct() (line
133 of core/lib/Drupal/Core/StringTranslation/TranslatableMarkup.php).
As far as I can tell, none of the translation modules are even enabled. Anyone got an idea of what I'm missing?
Update:
I changed the page() function of my controller to read
public function page(){
$content = readfile('modules/chess/templates/page.html.twig');
$element = array (
'#type' => 'markup',
'#template' => $content,
'#attached' => array(
'library' => 'chess/chess'
),
);
return $element;
}
and the css shows up, but the images don't yet. The source also still shows the asset function, instead of the filled in script tag.
Update 2:
I installed symfony/asset via composer, and my twig file now looks like this:
<link href="{{ asset('css/chess.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ asset('js/jquery-1.12.min.js') }}"></script>
...
<div class="piece black queen" id="black-queen"><img src="{{ asset('images/queen-black.png') }}" /></div>
The css shows up, but the content is displayed above the rest of the drupal page. Is there a way to put the page in its proper place within the drupal layout? (Also, the images aren't showing).
Update 3:
I removed all src="{{ asset(...) }}" tags from page.html.twig, and the javascript seems to work, as does the css. The only things left are how to get the page to work within the framework of the drupal page (instead of above it), and how to include images.
I think you should change it to just
{{ attach_library('chess/chess') }}
Rather than the absolute path to a CSS file.
I have a jade template layout.jade file from wekan:
...
template(name="userFormsLayout")
section.auth-layout
//-h1.at-form-landing-logo
img(src="{{pathFor '/wekan-logo.png'}}" alt="Wekan")
section.auth-dialog
+Template.dynamic(template=content)
div.at-form-lang
...
i dont understand what exactly this line is doing:
+Template.dynamic(template=content)
Can somebody explain it to me, i am most curious about this content reference.
It's no related to jade syntax but to Blaze, see related documentation here.
An example of use: when you use a router, you can define what template name is the content dynamic template for each route. Here you are an example with FlowRouter (coffeescript syntax)
...
FlowRouter.route '/home',
name: 'home'
action: ->
BlazeLayout.render 'layout',
content: 'contentTemplateNameForHomeRoute'
FlowRouter.route '/user_profile',
name: 'userProfile'
action: ->
BlazeLayout.render 'layout',
content: 'contentTemplateNameForUserProfileRoute'
...
This could be your layout template (jadesyntax)
template(name='layout')
+header
+Template.dynamic template ='content'
...