How to define a custom main page on a YUIDoc-generated documentation - javascript

I've been playing with YUIDoc and I find it fantastic.
By the way, I don't find a way to define my own main page content for the auto-generated documentation site (custom content inside the auto-generated index.html).
How can I define the main page content - if this is possible, of course -?
Thank you in advance!

YUI Doc is quite themable, so in theory this should be quite easy:
Fork YUI Doc or modify your current YUI Doc installation.
Add your own theme under yuidoc/themes. Copying the default theme is probably a good place to start, or copy over the partials/files you want to override.
In index.handlebars you add your custom content.
You can also change the main.handlebars to include custom CSS, JS and/or markup.
When you now build the docs, use the --themedir switch to use your new theme:
$ yuidoc --themedir ./mytheme
Read more: On YUI Doc theming.

Related

Adding Particles.js into DIVI theme

Im having troubles with adding JS particles.js "adding Particles.js" into DIVI them which can be found here
(particleJs)Even i add HTML,CSS,JS the result cant be seen, thank you for reply.
I would enqueuer the scripts in functions.php, also before updating this I would create a child theme and add a functions.php file to your child theme and make the changes there to ensure you don't loose the change come updating the theme
Creating a child theme -> https://codex.wordpress.org/Child_Themes
Encuing scripts -> https://developer.wordpress.org/reference/functions/wp_enqueue_script/
I know this is a bit late but for the sake of future generations - there is an easy way using the following WP-Plugin ParticleJs-WP-Plugin that is available form Github only. This plugin allows you to use the Particle.js JSON via copy&paste.
The first argument of the function is your ID-name that you can use in the divi builder CSS-section.
particlesJS('your-particle-css-id',{});
Of course you can as well make a child theme and enque the scripts in functions.php but the plugin does it all for you and is very lightweight.

Dynamic loading of CSS in Dojo/Dijit?

The tutorial "Creating a custom widget" proposes a directory structure for a dijit widget, that includes 'css' directory. Everything else in the example is dymanicly loaded using AMD, but not CSS. The authors write:
Now, with that in place, we just need to add the CSS to our head on
our page, and we have a nicer looking author list!
However, does Dojo/Dijit has any mechanism that doesn't required putting all possible CSS stuff in HTML HEAD or some aggregating CSS (imports)?
It is possible to simply add the section to the header, but it requires checking first, if it was already loaded, and probably waiting for CSS to load. Is there some build-in solution for making that things?
See http://davidwalsh.name/amd-xstyle and https://github.com/kriszyp/xstyle#amd-plugin-loader
A brief example of usage, straight from the docs:
define(["xstyle!./path/to/file.css"], function(){
// module starts after css is loaded
});
There have been some issues in the past when combining this with Dojo builds. However, it appears #kriszyp has now documented this stuff fairly well - https://github.com/kriszyp/xstyle#building-with-amd-plugin

Adding HTML, JQuery and CSS to drupal7

I am a very new user of Drupal and want to add this menu to my website. It has the HTML code with a CSS file, two .js files and a few images.
I want to embed this code in a block into my Responsinve blog themed Drupal7 site
I don't even know where to start or end.I tried drupal_add_js but I think I missed something somewhere and reading the forums has got me all the more confused.
In short I need to understand every small point of how and where to make changes to my site folders.
Any help would be highly appreciated.
You dont need to add your js & css in the template file.
When you go into sites/all/themes/your_theme_name
Look for a file that ends with .info
Best practice is to add all of your custom .js & css files there.
All HTML changes will be done in the .tpl template files.
Hope this helps.
The easiest way to do add js is:
Locate your theme folder, usually /themes/your_theme_name or /sites/all/themes/your_theme_name
Look for template.php in it
Look for your_theme_preprocess_html() function - 'your_theme' might be, 'bartik' or 'garland' or your theme name, if not - change it (usually, it's the name of the folder)
add `drupal_add_js('path_to_js') to function
That's it, clear your cache in Admin > Config > Perfomance and check your code
oh, and to add menu block,
Structure > Menu and create new menu or use existant, add menu items
go to Structure > Blocks, find your menu in list and select region for it
p.s.
and, yep, it's not the only way to add js, here you can find at least 7 ways to do it

Remove all CSS rules

Is there a way to wipe out all CSS rules once style sheets have already been loaded?
I have to use a proprietary JavaScript library (ESRI's ArcGIS Server API) which is built on top of Dojo. I make extensive use of Dojo's widgets and would like to use Dojo's claro theme but unfortunately the ESRI library mungs up the CSS by loading in off-site CSS files (and probably CSS rules hard-coded in the JS). This ends up mangling the Claro theme.
So many Dojo widget CSS classes get rewritten and new rules get created that just wiping out all CSS and reloading the standard Dojo stylesheets seems easier/safer.
Something like the following would be nice:
* {none}
but I figure I'll have to end up using either Dojo or jQuery to accomplish this.
check out this bookmarklet called RefreshCSS by Paul Irish:
javascript:(function(){var h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href){var g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');f.href=g+(g.match(/\?/)?'&':'?')+'forceReload='+(new Date().valueOf())}}})()
It refreshes the CSS stylesheets on a page, without refreshing the page itself.
I think you could do some alterations to it and get it to do what you want?
Another approach using jQuery that might work is to run this once the page has loaded:
$('head link, head style').remove();
Nope. Sadly, such a thing does not exist.
The answers to these related questions give pretty much the rundown on what is possible in terms of workarounds.
Is there a way to “sandbox” an html block away from its page's CSS without using iframes?
Reset CSS for a certain area of the page?
prevent meyer reset css to mess with dynamic content
How to reset css in middle of html document ?
There is always document.head.innerHTML = ""; But it really cleans house so you have to store away any scripts,metatags, titles or whatever you want to save and add them again.

dojo.require issues

I'm having trouble configuring my initial installation of dojo to include the widget framework correctly.
Following most of the code I see, including dijit should look like this:
dojo.require("dijit");
and that's that. Unfortunately, that doesn't seem to work.
Using this initializes the widgets correctly, but there's some weird behavior from the standard dijit methods that makes me think that I'm doing it wrong:
dojo.require("dijit.dijit");
Is there an element of configuring dojo that I'm missing? The files are all placed as they are in the 1.2.3 distribution, underneath another javascript folder.
You don't actually have to include dijit, just point directly to widgets you want to use: dojo.require("dijit.Dialog");. Weird widget behavior could be explained also by:
missing theme css files: check with FireBug that everything gets loaded
missing theme class attribute: add class="tundra" to the body element
missing djConfig="parseOnLoad: true"

Categories