I need to expand the clicked sidebar category and collapse the rest of the categories automatically
So far I found this:
https://docusaurus.io/docs/sidebar#auto-collapse-sidebar-categories
module.exports = {
themeConfig: {
docs: {
sidebar: {
autoCollapseCategories: true,
},
},
},
};
but it's not working for me. In the version of docusaurus.config.js I've got module.exports goes rather like this:
module.exports = ({})
not sure if the parentesis may Have an influence, I tried removing them and everything works fine except for autoCollapseCategories...
Related
I'm developing a stock manager webapp for a company.
I have this page where the administrator can edit and delete products that they added in a table (dataTable), I managed to make this possible by using this tutorial:
https://www.webslesson.info/2017/05/live-table-data-edit-delete-using-tabledit-plugin-in-php.html
Everything works fine but I had this issue where the 2 edit and delete buttons weren't showed on other pages of my table except from the 1st, I managed to resolve this issue with attached code
Everything right now works fine but i have a huge graphic problem. While i'm searching, every time I tap a letter or a backspace, the last column as you can see from the attachment is cloning itself every time.
Error of multiple columns
I've already tried to debug the search method but I don't think it's related to that... it's a standard method.
Do you think it can possibly be a problem related to the fact that the last column with the 2 button (edit and delete) is automatically added with a js of the library extension I'm using and it's not hardcoded? so every time I redraw the table it is like an external element to redraw?
var table = $('#dataTable').DataTable();
// Document ready
$(function() {
editTable();
});
// Assuming "table" is the variable name of your datatable
table.on('draw', editTable);
function editTable() {
$('#dataTable').Tabledit({
url: 'updateDB.php',
columns: {
identifier: [0, "id"],
editable: [
[1, 'name'],
[4, 'quantity'],
[5, 'threshold'],
]
},
restoreButton: false,
onSuccess: function(data, textStatus, jqXHR) {
if (data.action == "delete") {
document.getElementById(data.id).remove();
}
}
});
};
I have been converting a WordPress site to Gatsby, and everything works nicely with gatsby develop, however after building with gatsby build some pages seem to render with only the page body and no wrapper layout or styling. I am using markdown pages with mdx, and I have all my markdown files under subfolders of the src/pages directory, like this:
src/pages/
--project/
--contact.md
--outputs.md
--project.md
--sources.md
--software/
--apps.md
--frontend.md
--system.md
The above structure is more for organizational reasons than anything else (there are many more mdx files in reality). It does also correspond to the overall path structure of the site, however. In my built site, when I go to http://localhost:9000/contact the page renders perfectly, but when I visit http://localhost:9000/project or any other pages relating to that folder I only see the page body (the text content), with no layout component wrapper or styling. Everything under the software folder renders fine.
Each markdown file has a slug defined in the usual way in the frontmatter. The slug defined in src/project/project.md is just '/project'. The slug for src/project/contact.md is '/project/contact'.
Clearly the presence of src/pages/project/project.md is causing problems, but I can't figure out exactly why. I tried renaming that to src/pages/project/index.md, but that did nothing. Interestingly, when I look at public/project I see an index.html at the top level, with subfolders for each subpage, each containing its index.html. For public/software there is no index.html at the top level.
My gatsby-config.js (relevant parts):
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages`,
},
},
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.md`, `.mdx`, `.markdown`],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1024,
},
},
],
},
},
My template (under templates/page.js - I use some MUI components):
export default function SitePageTemplate({ data: { mdx } }) {
const { frontmatter, body } = mdx;
const { title } = frontmatter;
return (
<Layout>
<Seo title={title} />
<Container fixed>
<Stack direction="row" justifyContent="space-between">
<SideBar/>
<div style={ { padding: "0 0 0 3.5%", width: "75%" } }>
<MDXRenderer>{body}</MDXRenderer>
</div>
</Stack>
</Container>
</Layout>
);
}
export const pageQuery = graphql`
query ($id: String!) {
mdx(id: { eq: $id }) {
body
frontmatter {
date(formatString: "MMMM DD, YYYY")
slug
title
}
}
}`
My gatsby-node.js:
const path = require("path");
exports.createPages = async ({ graphql, actions, reporter }) => {
const { createPage } = actions
createPage({
path: "/using-dsg",
component: require.resolve("./src/templates/using-dsg.js"),
context: {},
defer: true,
})
const result = await graphql(`
query MARKDOWN {
allMdx {
edges {
node {
id
frontmatter {
date(formatString: "MMMM DD, YYYY")
slug
title
}
}
}
}
}
`);
if (result.errors) {
reporter.panicOnBuild("🚨 ERROR: Loading \"createPages\" query");
}
const md = result.data.allMdx.edges;
md.forEach(({ node }, index) => {
createPage({
// This component will wrap our MDX content
component: path.resolve("./src/templates/page.js"),
// Pass any value you want to access inside the template. They'll be available via `props`.
context: {
id: node.id
},
// Slug defined with frontmatter in each MDX file.
path: node.frontmatter.slug
});
});
}
If I place all the markdown files flat under the src/pages directory the problem goes away. But I would like to retain the above folder layout so that the markdown is organized properly. How can I do this whilst at the same time avoiding this problem?
OK, returning to this issue after a few months, I think I finally solved it. A warning I was also getting turned out to be the real clue - initially I had thought it unrelated to this issue. At develop and at build time I was getting a warning in the following format:
warn Non-deterministic routing danger: Attempting to create page: "/project/contact/", but page
"/project/contact" already exists
Others have reported this warning, but none of the reasons or propsed fixes seemed to relate to my problem. Looking at my gatsby-config.js, however, I noticed that I had at some time included the gatsby-plugin-page-creator plugin. I suspected that somehow this might be generating pages in addition to the mdx plugin. And it seemed as if this was right - removing the plugin removed both the warnings about duplicate page creation and also fixed my rendering problems. Everything looks fine now, for both development and production versions of my site.
I can't remember why I originally included this plugin - I was originally using the mdx extension for my markdown files, and I think I needed gatsby-plugin-page-creator so that files with that extension would be correctly interpreted as markdown. I now use the standard md extension, and removing gatsby-plugin-page-creator doesn't cause any problems.
On Google Chrome, printing a Highmap makes it resize and stick to the left. But the map won't take its initial shape after printing. See this Fiddle : http://jsfiddle.net/5u6z7csf/1/
The code is very basic :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=germany.geo.json&callback=?',
function (geojson) {
var data = Highcharts.geojson(geojson, 'map');
$('#container').highcharts('Map', {
series: [{
data: data
}]
});
});
I tested it on IE and Firefox and it works fine using them.
Is there a way to walk around this problem ?
Thank you for the reporting, it is requested here
I have put the question at the bottom as the only way I could explain my problem was with an example so with out the example it might not make sense but feel free to skip down to the bottom and just read the question.
I will use this example to try give some idea of what I do understand and where my understanding falls down.
I want to build a page where I can browse through a collection of items which I would set up like this:
angular.module('App')
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('browse', {
url: '/browse',
templateUrl: 'app/browse/browse.html',
controller: 'BrowseCtrl',
title: 'Browse',
mainClass: 'browse'
});
}]);
Each item is pulled through and place on this page using ng-repeat and then calling an api:
$scope.items = [];
$http.get('/api/items').success(function(items) {
$scope.items = items;
socket.syncUpdates('Item', $scope.items);
$scope.totalItems = $scope.items.length;
$scope.$watch('currentPage + itemsPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
end = begin + $scope.itemsPerPage;
$scope.filteredItems = $scope.items.slice(begin, end);
});
});
This then accesses the api and repeats out the items. So far so good. Heres an example of the API setup. Worth mentioning I am using the Angular-fullstack generator which plugs in to Mongo DB using Express & Sockets.io
Item.find({}).remove(function() {
Item.create({
"image_url" : "../../../assets/images/test.jpg",
"title" : "Test Item",
"created_on" : new Date(2014, 9, 23, 3, 24, 56, 2),
"creator" : {
"profile_img" : "../../../assets/images/stephanie-walters.jpg",
"username" : "StephW",
"url" : "/stephanie-walters",
"first_name" : "Stephanie",
"last_name" : "Walters",
}
}
Ok now this is where things start to get unclear for me.
I now need to create the item pages, so that when I click on an item I get access to the content of that item. Short of creating every single page for every entry I would very much like to be able to create a page template that ui-router is able to attach content to when the correct url structure is met.
Thats probably not clear so let me try be a bit clearer. Lets say if we follow that JSON above I want to go to 'Stephanie Walters' profile I am going to need three things.Firstly a profile template, secondly I need the content for the profile in an api call and lastly a dynamic url that can take that api content and put it in to the page template.
Perhaps something similar to:
.state('profile.username', {
url: '/:username',
templateUrl: '/partials/profile.username.html',
controller: 'profileUsernameCtrl'
})
But I don't exactly understand how to get the take a variable like username from the item JSON(above) and then use that to build a URL /:username that connects to a template page profile.username.html and further still fill that page with the users content that is stored in another API call.
To "build a url" so to speak, you need to use the ui-sref directive.
Given a state like so:
.state('profile.username', {
url: '/:username',
templateUrl: '/partials/profile.username.html',
controller: 'profileUsernameCtrl'
})
to create a link to this state use:
<a ui-sref="profile.username({username: user.name})">{{ user.name }}</a>
where user is an attribute on the scope where that link is displayed.
For more complex URLs you just add additional parameters like so:
.state('browse.item', {
url: '/:username/:itemId'
})
To get the parameters you use the $stateParams service in your controller like so:
.controller('MyController', function($scope, $stateParams) {
$scope.username = $stateParams.username;
$scope.itemId = $stateParams.itemId;
})
how can I display data point on bar in barchart?
I don't want to use datatip or tooltip which will highlight data points only when they are moused over.
I want to display the data point always on the bar.
is there any right way to get it?
thanks.
I want exactly like this
following is my code
<p:barChart id="barChartId" value="#{myBean.myModel}"
orientation="horizontal"
stacked="true" extender="ext" animate="true" shadow="false" />
<h:outputScript>
function ext() {
this.cfg.highlighter = {
useAxesFormatters: false,
tooltipAxes: 'x'
};
this.cfg.legend = {
show: true,
location: 'ne',
placement: 'outside'
};
this.cfg.seriesDefaults = {
pointLabels : { show: true },
};
}
</h:outputScript>
here, highlighter and legend are working fine but point labels are not displaying on bar
Not sure if it will work...
Use the extender of the <p:barChart , like this:
<p:barChart value="#{myBean.myModel}" widgetVar="myBarChart" extender="my_ext"/>
<script type="text/javascript">
function my_ext() {
this.cfg.seriesDefaults = {
renderer:$.jqplot.BarRenderer,
pointLabels: {show: true}
};
this.cfg.stackSeries: true;
}
</script>
or this
<script type="text/javascript">
function my_ext() {
this.cfg.seriesDefaults = {
pointLabels: {show: true}
};
this.cfg.stackSeries: true;
}
</script>
Also take a look at the jqplot examples : Bar charts
Just in case someone doesn't crawl through the comments of the marked answer, as I didn't do in the first place.
The problem basically is not the configuration of the pointLabelselement, but rather that primefaces (as of 4.0) in its original state does not ship with the needed plugin of jqPlot included.
Therefore actually the solution is to make the needed plugin jqplot.pointLabels.min.js available. From a ticket in the bug tracker (http://code.google.com/p/primefaces/issues/detail?id=5378) I extracted, that primefaces uses jqPlot version 1.0.8.
download jqplot 1.0.8 from https://bitbucket.org/cleonello/jqplot/downloads/
add the plugin to your project (e.g. src/main/webapp/resources/jqplot-plugins)
add the plugin as script to your page (<h:outputScript library="jqplot-plugins" name="jqplot.pointLabels.min.js" />)