Is there a way to include markdown files in styleguidist that don't have an associated React component file?
Right now I'm using dummy components to accomplish this but I'm wondering if there is a better way? I'm also hiding the dummy component's path (via getComponentPathLine() in the config) so that it doesn't appear like a component in the style guide.
Thanks
In your style guide config:
module.exports = {
sections: [
{
name: 'Introduction',
content: 'docs/introduction.md'
}
]
}
See more examples in the docs.
Related
First, I'm much more of a Rails back end person. The JS world today scares me. I know this is a super basic question, but I've racked my brain for a solid couple days trying to figure, this out. I don't know why I can't put a CDN link somewhere in my HTML and get all the JS I need. Those were the good ol' days...
Anyway, I have a nearly fresh Rails 7 app that uses import-maps (do they all?) and I'm trying to get a dropdown "component" from https://tailwindui.com/preview (the first navbar from that page) working. It starts popped open, no hover effects, and is unable to close. My goal is to use more of those components, but all the docs I read seem to leave me thinking there's a missing piece I'm not understanding.
Gemfile contains gem "tailwindcss-rails", "~> 2.0" # github: "rails/tailwindcss-rails"
app/assets/stylesheets/application.tailwind.css:
#tailwind base;
#tailwind components;
#tailwind utilities;
app/assets/javascript/application.js
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
// what else needs to go here???
config/tailwind.config.js
// const defaultTheme = require('tailwindcss/defaultTheme')
// module.exports = {
// content: [
// './app/helpers/**/*.rb',
// './app/javascript/**/*.js',
// './app/views/**/*'
// ],
// theme: {
// extend: {
// fontFamily: {
// sans: ['Inter var', ...defaultTheme.fontFamily.sans],
// },
// },
// },
// plugins: [
// require('#tailwindcss/forms'),
// require('#tailwindcss/aspect-ratio'),
// require('#tailwindcss/typography'),
// ]
// }
What else do I need to put where to get this working? Thank you kindly for filling in the missing pieces in my brain.
I know it's been a while since you've asked this question, yet I've been fighting this thing recently and I'd like to talk about what I've found, in case anybody's wondering.
So, Tailwind UI provides components in 3 variants: HTML, React, and Vue. If you pick HTML, you'll have to figure out how to write your own JavaScript. this answer mentions that, but I'll elaborate on that point, though.
Aside from mentioning "do your own JavaScript" on their website, they also give us instructions how exactly we should style our components when we add JavaScript:
<!--
Dropdown menu, show/hide based on menu state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
Yet, that doesn't really tell us that we must code it ourselves. Surely, there's something we're missing, right? Turns out, not really.
Basically, the "dynamic" aspect of the layout is implemented via Headless UI, a set of components developed & maintained by the same people. It only has three public packages: #headlessui/vue, #headlessui/react and #headlessui/tailwindcss.
I ran npm i #headlessui/tailwindcss and added #headlessui/tailwindcss to the plugins, but it didn't really do much. If you inspect the source code for the package, you'll find a pretty tiny index.js which only adds some utility classes. So that didn't help and I had to scratch it.
So far it seems the most viable option is to grab a React or Vue version of the template and integrate those into your pipeline. Otherwise you'll have to write a bunch of JS to basically reimplement headless UI yourself.
I'm still looking for an importmap-based solution to integrate Vue, while webpack should be pretty much straightfoward.
There is no JavaScript in their HTML code. On TailwindUI homepage, they explain:
Accessible, interactive examples for React and Vue powered by
Headless UI, plus vanilla HTML if you’d rather write any necessary JS
yourself.
So I guess in this case you have to write the necessary JS yourself.
I have an Angular project with PrimeNg Library and I want to use p-dropdown component I imported it at app.module file like this:
import { DropdownModule } from "primeng/dropdown";
imports: [
DropdownModule,
],
And when I use it on an html file:
<div class="charts-dropdown">
<p-dropdown [options]="chartsDropdownLookup" [(ngModel)]="selectedChartOption"></p-dropdown>
</div>
This is How it looks:
It doesn't render my [options] array which is an array with label and value attributes and it doesn't show the styling properly.
What I'm missing here?
I just had exactly the same issue.
Ensure the "styles" array includes the prime ng style sheets under the "build" AND "test" (under "architect" under the project under "projects"):
"styles": [
"./node_modules/primeicons/primeicons.css",
"./node_modules/primeng/resources/themes/nova-light/theme.css",
"./node_modules/primeng/resources/primeng.min.css"
],
Other stylesheets will probably already be there. Other themes are available.
I only found the relevant documentation after working out the solution, but it is detailed here on the PrimeNG web site:
https://www.primefaces.org/primeng/showcase/#/setup in the Styles Configuration section at the bottom of the page.
I am trying to add a custom favicon to my NestJs documentation. However, I am a bit lost on how the path file gets resolved and not sure how to achieve this.
I am using nestjs/swagger module version 3.1.0 and trying to pass the path file like so when initializing the Swagger Module.
My main.ts file
SwaggerModule.setup('/v1/docs', app, document, {
customCss: CUSTOM_STYLE,
customSiteTitle: 'My API Documentation',
customfavIcon: './public/favicon.jpg'
});
Searched on the github issues and didn't find anything useful. And as you can see from the code I was able to modify the CSS styles, but I cannot figure out how to make the favicon custom.
Appreciate any help
I have added the custom favicon to my swagger docs using following:
The first thing you make sure is, in your main.ts, the app is initialized with the following:
const app: NestExpressApplication = await NestFactory.create(...)
To serve static content you must initialize your app with NestExpressApplication.
The next thing is to allow the Nest application to look for public content using the following in your main.ts after initialization:
app.useStaticAssets(join(__dirname, '..', 'public'));
Also, create a public directory in your root of the application and paste your favicon.jpg file in it.
Now its time to initialize the Swagger in main.ts
SwaggerModule.setup('/v1/docs', app, document, {
customCss: CUSTOM_STYLE,
customSiteTitle: 'My API Documentation',
customfavIcon: '../favicon.jpg'
});
You must give a relative path to the root of the application like ../favicon.jpg in case our main.ts is in src folder in root of the application.
Alternative solution, just host your favicon and reference it with external url
SwaggerModule.setup('api', app, getSwaggerDocument(app), {
...
customfavIcon:
'https://[your-bucket-url].com/.../anything.png',
});
To iterate on pravindot17's answer, now there's the #nestjs/serve-static package for hosting static files. Which avoid us from type-casting the Nest.js client and relying on our implicit assumption that we're running an Express-backed Nest.js server.
After installing the package, you hook it into your src/app.module.ts. This configuration expects that the root of your project has a /public/ folder where you store your static assets.
import { Module } from '#nestjs/common';
import { ServeStaticModule } from '#nestjs/serve-static';
import { join } from 'path';
#Module({
imports: [
// Host static files in ../public under the /static path.
ServeStaticModule.forRoot({
/**
* Config options are documented:
* https://github.com/nestjs/serve-static/blob/master/lib/interfaces/serve-static-options.interface.ts
*/
rootPath: join(__dirname, '..', '..', 'public'),
serveRoot: '/static',
}),
// ...
})
export class AppModule {}
Now my own preference is using an absolute path rather than relative, as it makes it independent from the path we picked to host our API documentation under.
SwaggerModule.setup('/v1/docs', app, document, {
customfavIcon: '/static/favicon.jpg'
});
One last note is that this configuration hosts static files from /static/*, this is done to prevent that API calls to non-existing endpoints show an error message to the end-user that the static file cannot be found.
Otherwise, all 404's on non-existing endpoints will look something like:
{"statusCode":404,"message":"ENOENT: no such file or directory, stat '/Users/me/my-project/public/index.html'"}
When I paste a URL into a TinyMCE editor it converts the text into a link.
So http://vimeo.com/18150336 would be come http://vimeo.com/18150336. I would like to keep the plain text. Is their a way to configure TinyMCE to keep the link as plain text.
I do not want to strip out tags as adding a hyperlinks should be an option on the toolbar. It should just not happen by default.
You can use the paste plugin and the setting paste_preprocessing in order to keep the plain text. You might need to check inside the function specified using paste_preprocessing if you got a link or not.
It's been 5 years, So I'm probably using a newer version of TinyMCE, anyway this solution worked for me, Just add this option:
paste_preprocess: function(plugin, args) {
args.content += ' ';
}
So when you initialize the tinymce, it should be something like this:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "paste",
paste_preprocess: function(plugin, args) {
args.content += ' ';
}
});
This is the page of documentation for TinyMCE V4
It is the TinyMCE plugin autolink which is responsible for automatically creating links on paste. (And write).
https://www.tiny.cloud/docs/plugins/opensource/autolink/
I've been documenting a software package using Sphinx and reStructuredText.
Within my documents, there are some long code snippets. I want to be able to have them hidden as default, with a little "Show/Hide" button that would expand them (Example).
Is there a standard way to do that?
You don't need a custom theme. Use the built-in directive container that allows you to add custom css-classes to blocks and override the existsting theme to add some javascript to add the show/hide-functionality.
This is _templates/page.html:
{% extends "!page.html" %}
{% block footer %}
<script type="text/javascript">
$(document).ready(function() {
$(".toggle > *").hide();
$(".toggle .header").show();
$(".toggle .header").click(function() {
$(this).parent().children().not(".header").toggle(400);
$(this).parent().children(".header").toggleClass("open");
})
});
</script>
{% endblock %}
This is _static/custom.css:
.toggle .header {
display: block;
clear: both;
}
.toggle .header:after {
content: " ▶";
}
.toggle .header.open:after {
content: " ▼";
}
This is added to conf.py:
def setup(app):
app.add_css_file('custom.css')
Now you can show/hide a block of code.
.. container:: toggle
.. container:: header
**Show/Hide Code**
.. code-block:: xml
:linenos:
from plone import api
...
I use something very similar for exercises here: https://training.plone.org/5/mastering-plone/about_mastering.html#exercises
You can use the built-in HTML collapsible details tag by wrapping the code in two raw HTML directives
.. raw:: html
<details>
<summary><a>big code</a></summary>
.. code-block:: python
lots_of_code = "this text block"
.. raw:: html
</details>
Produces:
<details>
<summary><a>big code</a></summary>
<pre>lots_of_code = "this text block"</pre>
</details>
I think the easiest way to do this would be to create a custom Sphinx theme in which you tell certain html elements to have this functionality. A little JQuery would go a long way here.
If, however you want to be able to specify this in your reStructuredText markup, you would need to either
get such a thing included in Sphinx itself or
implement it in a Sphinx/docutils extension...and then create a Sphinx theme which knew about this functionality.
This would be a bit more work, but would give you more flexibility.
There is a very simplistic extension providing exactly that feature: https://github.com/scopatz/hiddencode
It works rather well for me.
The cloud sphinx theme has custom directive html-toggle that provides toggleable sections. To quote from their web page:
You can mark sections with .. rst-class:: html-toggle, which will make the section default to being collapsed under html, with a “show section” toggle link to the right of the title.
Here is a link to their test demonstration page.
sphinx-togglebutton
Looks like a new sphinx extension has been made to do just this since this question has been answered.
Run: pip install sphinx-togglebutton
Add to conf.py
extensions = [
...
'sphinx_togglebutton'
...
]
In rst source file:
.. admonition:: Show/Hide
:class: dropdown
hidden message
since none of the above methods seem to work for me, here's how I solved it in the end:
create a file substitutions.rst in your source-directory with the following content:
.. |toggleStart| raw:: html
<details>
<summary><a> the title of the collapse-block </a></summary>
.. |toggleEnd| raw:: html
</details>
<br/>
add the following line at the beginning of every file you want to use add collapsible blocks
..include:: substitutions.rst
now, to make a part of the code collapsible simply use:
|toggleStart|
the text you want to collapse
..code-block:: python
x=1
|toggleEnd|
Another option is the dropdown directive in the sphinx-design extension. From the docs:
Install sphinx-design
pip install sphinx-design
Add the extension to conf.py in the extensions list
extensions = ["sphinx_design"]
Use the dropdown directive in your rst file:
.. dropdown::
Dropdown content