In my docusaurus.config.js file I have the following which defines the contents of my nav bar:
navbar: {
title: 'Utili Documentation',
logo: {
alt: 'Utili Logo',
src: 'https://file.utili.xyz/UtiliSmall.png',
},
items: [
{
href: 'https://utili.xyz/',
label: 'Utili',
position: 'right',
},
{
href: 'https://github.com/230Daniel/UtiliDocs/',
label: 'GitHub',
position: 'right',
},
],
},
I would like to change the link of the navbar title from https://docs.utili.xyz/ to https://docs.utili.xyz/docs. How could I do so? I've tried adding a href value, but when building I was told that it was invalid.
I'm using Docusaurus 2.
Late to the party, but documentation actually shows the correct way, altough it may be a bit puzzleling. The trick is to set the href field of the logo attribute. That field is in fact binded to the link of the title itself (altough the title href cannot be directly set). Citing the documentation, he solution thus may be
logo: {
alt: 'Utili Logo',
src: 'https://file.utili.xyz/UtiliSmall.png'
href: 'https://docs.utili.xyz/docs', // Default to `siteConfig.baseUrl`.
target: '_self', // By default, this value is calculated based on the `href` attribute (the external link will open in a new tab, all others in the current one).
},
How one can set the title without displaying a logo, that I do not know.
Related
I am using deltaDecorations to show errors in my editor.
here is my code: https://gist.github.com/dinager/41578bd658b60cc912a6023f80431810
Here is the result:
I am trying to add resize property to the editor by adding to the style
resize: both;overflow: auto;
But then the hover message is partly hidden by the edges of the editor
As you can see in below attached image - the editor can resize now (bottom right), but the hover message is partly hidden
How can I add resize property to not hide elements?
Another question: can I make the hover message float inside the editor, meaning if it's at the top line it should float to the bottom, if at the side of the editor float to the middle, etc..
Attaching the code adding the markerDecorations (exists also in the gist link at the top):
this.markerDecorations = codeEditor.deltaDecorations(this.markerDecorations, [
{
range: new monaco.Range(pos.startLine, pos.startColumn, pos.endLine, pos.endColumn),
options: {
className: 'squiggly-error',
minimap: {
color: { id: 'minimap.errorHighlight' },
position: monaco.editor.MinimapPosition.Gutter,
},
overviewRuler: {
color: { id: 'editorOverviewRuler.errorForeground' },
position: monaco.editor.OverviewRulerLane.Full,
},
stickiness: monaco.editor.TrackedRangeStickiness.AlwaysGrowsWhenTypingAtEdges,
zIndex: 1,
hoverMessage: { value: parseResponse.error, isTrusted: false },
},
},
]);
solved it by adding fixedOverflowWidgets: true on monaco.editor.create options.
this.editor = monaco.editor.create(el, {
// ...
fixedOverflowWidgets: true
});
I am using Ckeditor as rich editor for text input in the Chrome browser. I also have added some html id tag for easy parsing by bs4 after the system getting the data.
The following is my setting in the html:
CKEDITOR.replace( 'editor', {
toolbar : 'Basic',
uiColor : '#9AB8F3',
height : '70%',
startupShowBorders: false,
})
And in the config.js:
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.allowedContent = True;
};
Although I have already followed the instruction to allow all html tag content to be preserved with config.allowedContent = *; in the config.jd. However, it seems not working as I got the following results when getting data (by CKEDITOR.instances.editor.getData()):
<span style='font-size:11.0pt;'> content </span>
instead of this that I want:
<span id="news_content" style='font-size:11.0pt;'> content </span>
In other words, it still strips out all the html tag I added.
When I checked the source code, I found that the same textarea content was produced twice with the one with the tag being put in hidden format, i.e.,
<textarea name="editor" id="editor" rows="100" cols="40" style="visibility: hidden; display: none;">
And the editor produces another version in the real textarea that allows me to edit. However, this is useless because all the html tags are stripped there.
So, my question is, how to preserve the html tag in the real textarea so that I can parse the html with id tags after editing and submission. Could anyone advise on this? Thanks a lot.
I may not be able to answer my own question, but I like to share my solution with those encountering similar situation.
In short, finally I give up using ckeditor or any plug-in editor as many of them will strip off the html tag, which is essential to me in the subsequent process.
Thanks to html5, my solution is using editable div. The setting is very simple as below:
css:
#my-content {
box-shadow: 0 0 2px #CCC;
min-height: 150px;
overflow: auto;
padding: 1em;
margin: 5px;
resize: vertical;
outline: none;
}
html:
<div id="my-content" class="editable" style="width:900px; height:400px; text-overflow: ellipsis; overflow-y: scroll;"></div>
js script:
$('.editable').each(function(){
this.contentEditable = true;
});
So far, I am happy with it, it shows what exactly the html code showing and preserve all the tags I added. The only downside is it does not provide any toolbar for format editing. My solution is to make one for it, and via the following link you can get a very good tutorial as to making a toolbar with a ready-to-use demo as illustration.
https://code.tutsplus.com/tutorials/create-a-wysiwyg-editor-with-the-contenteditable-attribute--cms-25657
Hope this helps.
I'm trying to set up a bootstrap tour. I've got two pages (Design.vbhtml and EditHomePage.vbhtml). They both use a layout page called (_DesignerLayout.vbhtml). I've got all the scripts and stylesheets for bootstrap, tour, jquery, etc. listed on the layout page. All that stuff is correct.
My tour starts on the Design page and displays my first 3 steps correctly. However when it gets to the fourth step (called third-step, not to be confused), it goes to the second page but it doesn't continue with the steps. The tour just stops.
My elements are all id's on div tags (welcome-step, first-step, etc.). I know those are all correct. It has to do something with my paths.
I've looked everywhere and can't seem to find anyone else using a layout page with a tour, so I'm wondering if it has anything to do with the steps jumping from the design page to the layout page to the edithomepage page. Any ideas would be appreciated!
Here is my bootstrap tour code---
Design.vbhtml (first page):
$(function () {
// Instance the tour
var tour = new Tour({
backdrop: true,
steps: [
{
element: "#welcome-step",
title: "Welcome!",
content: "Begin this tour to see how you can design the look of your website.",
orphan: true,
path: "/ClubAthleticsTemplate/Organization/Design/" & "#ViewBag.OrganizationId"
// this element is on the design.vbhtml page
},
{
element: "#first-step",
title: "Change the Look",
content: "Use this section to design how your website looks. You can choose which pages you want to include on your website.",
path: "/ClubAthleticsTemplate/Organization/Design/" & "#ViewBag.OrganizationId"
// this element is on the design.vbhtml page
},
{
element: "#second-step",
title: "Edit Pages",
content: "These are the different pages you can edit for your website. Click on each one to customize.",
path: "/ClubAthleticsTemplate/Organization/Design/" & "#ViewBag.OrganizationId"
// this element is on the _DesignerLayout.vbhtml page
},
{
element: "#third-step",
title: "Main Photo",
content: "You can upload a main photo that will appear on your front page.",
path: "/ClubAthleticsTemplate/Organization/EditHomePage/" & "#ViewBag.OrganizationId"
// this element is on the EditHomePage.vbhtml page
},
{
element: "#fourth-step",
title: "Main Photo Display",
content: "You can specify whether or not you want the main photo show at the top of all of your pages.",
path: "/ClubAthleticsTemplate/Organization/EditHomePage/" & "#ViewBag.OrganizationId"
// this element is on the EditHomePage.vbhtml page
},
{
element: "#fifth-step",
title: "Page Headline",
content: "This is where you can set a title for your page.",
path: "/ClubAthleticsTemplate/Organization/EditHomePage/" & "#ViewBag.OrganizationId"
// this element is on the EditHomePage.vbhtml page
},
{
element: "#sixth-step",
title: "Page Content",
content: "Here is where you add all your content for your page. You can add text, images, media, tables, etc.",
path: "/ClubAthleticsTemplate/Organization/EditHomePage/" & "#ViewBag.OrganizationId"
// this element is on the EditHomePage.vbhtml page
},
{
element: "#seventh-step",
title: "Save Changes",
content: "Make sure to hit the 'Save' button when finished!",
path: "/ClubAthleticsTemplate/Organization/EditHomePage/" & "#ViewBag.OrganizationId"
// this element is on the EditHomePage.vbhtml page
}
]
});
// Initialize the tour
tour.init();
// Start the tour
tour.start();
});
;
I discovered that copying and pasting the entire tour onto the second page gets it to work perfectly. It's not the best coding practice seeing as I have the same code in two different places and have to change both locations each time I make a change in it. But, for now, it works.
I am using ExtJs 4.2
My app needs to a have a button that will invoke a panel, that holds the navigation tree show once clicked.
This button needs to be visible at all times, and centered vertical to the middle and to the right of the screen.
How do I achieve this behavior? I don't want to nest the button in a panel, it should be a part of the view port...
Here is what I have tried:
Ext.define('NG.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
id: 'appviewport',
items: [{
itemId: 'app-header',
xtype: 'appheader',
region: 'north',
weight: 10,
border: false,
height: 60
}, {
itemId: 'navigation',
xtype: 'button',
region: 'west',
weight:15
}, {
xtype: 'carddeckmanager',
region: 'center',
weight:10,
border: false,
cls:'n-cardmanager-box',
items: [{
itemId: 'dashboard',
xtype: 'dashboard'
}]
}]
});
but this makes the button expand as the height of the viewport.
If you really want to float that button, there's no sense in adding it to a container or the viewport. Render it to the document body, configure it with floating: true, and give it a z-index that will ensure that it remains above any window (if that's what you want).
Then you can position it where you want with its alignTo method but, better yet, use anchorTo so that it sticks where you put it, even when the browser is resized.
All of this gives us:
var body = Ext.getBody();
// Create the button
var button = Ext.widget('button', {
text: "Yo"
,floating: true
,renderTo: body
});
// z-index
// Ext4's windows default z-index starts from 29000
button.setZIndex(40000);
// Anchor the right of the button to the right of the document body
// with a 5px horizontal offset.
button.anchorTo(body, 'r-r', [-5, 0]);
Put this code somewhere in the startup process of your application. Candidates could be the init method of your application, the initComponent method of your viewport, or a single afterrender listener on the viewport...
Now, if what you want is just that the button remains visible in the right border of the viewport but without it filling the whole region, you need to wrap it in a container with an appropriate layout. For example, add this to your viewport:
{
region: 'west',
layout: {type: 'hbox', pack: 'center', align: 'middle'},
items: [{
xtype: 'button',
text: "Viewport button"
}]
}
I'm sure a lot of people use the twitter widget that twitter provides.
Here's the code they provide:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 420,
height: 250,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#666666'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('apumpkinpatch').start();
</script>
You can see an example here how when you click the "feedback" tab on left side of screen, the twitter widget appears over the div. Any idea what I can do to prevent this?
I think the class for the widget is .twtr-doc according to the inspector. Anyone know if there is a css attribute I should be adding to it to stop this from happening?
EDIT -: took out IE part of question to just open it up in another question so I can mark the first answer as correct.
Re: the twitter widget being on top of the feedback div, you need to use z-index property in your styles to correct this.
Try adding z-index:100 to your feedback div. I do not have IE or I would help you debug that.