StencilJS https://stenciljs.com/
When generating docs-json output for the components, there is a usage (and docs) property for each component but we couldn't find any mention in the documentation about this.
The question: Is the "usage" property for adding a usage example and if so how can it and the "docs" be accessed?
{
"filePath": "src\\components\\my-component\\my-component.tsx",
"encapsulation": "shadow",
"tag": "my-component",
"readme": "# my-component\r\n\r\n\r\n\r",
"docs": "",
"docsTags": [],
"usage": {}, // This property here
"props": [
{...
}
The only way to do it currently seems to be adding .md files in your component/usage folder.
components/
my-component/
usage/
usage-example.md // This is added to usage
another-example.md
my-component.css
my-component.tsx
Related
I'm new to vscode and can't get snippets to work properly inside of Vue files. They work in /snippets/vue.json:
{
"<template></template>": {
"prefix": "template",
"body": [
"<template>$1</template>"
]
}
}
This works, as long as it is written in the vue base layer but not inside script/template/style tags. I've tried adding it to vue-injection-markdown.json which I thought is used for exactly that but it doesn't work. I've also created a vue-html.json file and added the json there but it also doesn't make the snippets work:
{
"hello": {
"prefix": "hello",
"body": [
"blub"
]
}
}
I've installed both these plugins:
Vue Language Features (Volar)
TypeScript Vue Plugin (Volar)
What am I doing wrong?
Ok, it has to be defined either in global.code-snippets with a html scope or in the html.json file.
i have Nuxt project, when i try to add or edit message property it's not reflect direct, i should terminate the app and re-run it to see the results.
i followed the Nuxt Documentation and applied every single step
Edit your nuxt.config.js modules to look like this
modules: [
[
"#nuxtjs/i18n",
{
locales: [{ code: "en", name: "en-US", file: "en.json" }],
langDir: "locales/"
}
],
]
assuming your strings file is called en.json and it's inside locales/ like locales/en.json
I use 'Docusaurus' to docs but I don`t know How to config multi-language sideBar.
[
'#docusaurus/preset-classic',
{
docs: {
path: 'docs',
routeBasePath: '/',
sidebarPath: require.resolve('./sidebars.js')
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
]```
The code only use a kind of sidebars, if I switch the language The sidebars can`t switch.
run the write-translations command, for example your locale is zh-cn, when command finished, you will get a current.json file in the i18n/zh-cn/docusaurus-plugin-content-docs directory
yarn run write-translations -- --locale zh-cn
the current.json contains the docs sidebar's category labels, modify it like the following:
{
"version.label": {
"message": "5.0.0.alpha.1",
"description": "The label for version current"
},
"sidebar.docsSidebar.category.Getting Started": {
"message": "开始上手",
"description": "The label for category Getting Started in sidebar docsSidebar"
},
"sidebar.docsSidebar.category.Guides": {
"message": "指南",
"description": "The label for category Guides in sidebar docsSidebar"
}
}
for more details, refer to:https://docusaurus.io/docs/next/i18n/tutorial#translate-plugin-data
Docusaurus allows you to add a navbar item so the user can select the language they want. You can enable the dropdown by adding the code below, as explained in the official documentation, to the docusaurus.config.js file.
If you want to find out more you can also have a look at this video in which I explain all the steps you need to follow to translate your Docusaurus website.
module.exports = {
themeConfig: {
navbar: {
items: [
{
type: 'localeDropdown',
position: 'left',
},
],
},
},
};
if I switch the language The sidebars can`t switch
If you properly prepared i18n JSON files, when you switch the locale (language), the sidebar label will show different languages.
I followed this doc to add CSS reset to my app.
https://create-react-app.dev/docs/adding-css-reset/#indexcss
But it showed this message:
"stylelint": {
"extends": "stylelint-config-recommended",
"rules": {
"at-rule-no-unknown": null
}
How to fix this problem?it is annoying...
To fix this warning you just need to add this line to.vscode/settings.json inside your project (you can create this file if it doesn't already exist):
{
"css.lint.unknownAtRules": "ignore"
}
Source: https://create-react-app.dev/docs/adding-css-reset/#indexcss
For VS Code -
To make the VS Code recognise this custom CSS directive, you can provide custom data for VS Code's CSS Language Service as mentioned here - https://github.com/Microsoft/vscode-css-languageservice/blob/master/docs/customData.md.
Create a CSS custom data set file with the following info. Place it at location .vscode/custom.css-data.json relative to the project root.
{
"version": 1.1,
"properties": [],
"atDirectives": [
{
"name": "#import-normalize",
"description": "bring in normalize.css styles"
}
],
"pseudoClasses": [],
"pseudoElements": []
}
Now, if you don't have already, create a .vscode\settings.json file relative to project root. Add a field with key "css.customData" and value as the path to custom data set. For example,
{
"css.customData": ["./.vscode/custom.css-data.json"]
}
Now, you will no longer get "Unknown at rule" warning. When you hover over "#import-normalize", you will see the description you set for it in custom.css-data.json
#import-normalize is a non-standard at-rule. From the rule's documentation:
This rule considers at-rules defined in the CSS Specifications, up to and including Editor's Drafts, to be known.
However, the rule has an ignoreAtRules secondary option for exactly this use case, where you can list the non-standard imports you are using.
For example, in your package.json:
{
"stylelint": {
"extends": "stylelint-config-recommended",
"rules": {
"at-rule-no-unknown": [true, {
"ignoreAtRules": ["import-normalise"]
}]
}
}
}
Or within your .stylelintrc file:
{
"extends": "stylelint-config-recommended",
"rules": {
"at-rule-no-unknown": [true, {
"ignoreAtRules": ["import-normalise"]
}
}
}
I noticed that after using the command stencil init to generate a .stencil file for a new stencil project, the generate file contains a customLayouts attribute. For example, the file might contain this:
{
"normalStoreUrl": "http://www.my-store.com",
"port": 3000,
"username": "Stencil",
"token": "11223344556677889900",
"customLayouts": {
"products": {},
"search": {},
"brands": {},
"categories": {}
}
}
Can someone please explain the purpose of this customLayout object and how it can be used?
It isn't presently in use. It will be available for use to have customized templates per each of those types of pages once we have finished some engineering work. It is a placeholder at this time.