I have a created a web component, let's call it a-1.html, this is the main web component that I would like to publish, but this component also depends on another component that I created, b-2.html, and b-2.html also depends on a third component that I created c-3.html.
I have followed Polymer's Create reusable elements guide in order to publish my element on GitHub, everything worked fine in terms of development (they were already developed), and I made the documentation, and I published on GitHub, but I'm facing 1 problem.
The guide deals as if you have a single component to be published, and it mentions that if there's any dependencies, I should place them, but what if my dependencies are still local dependencies? I can't put b-2.html and c-3.html in bower.json, because they are not yet online.
So later on, when I'm installing my element using bower install <username>/element, the element is not working because it's missing b-2.html and c-3.html, also the online demo (Github page using gp.sh) is not working.
For this situation, where should I place these files in order to have a complete working repo on GitHub, and also a working demo.
Directory:
bower_components
--- lots of compoenents
--- including b-2 and c-3 added manually by me
---- in order for the demo to work locally, but since they
----- aren't in bower.json, this won't work eventually
bower.json
demo
---index.html
index.html
README.md
test
---basic-test.html
---index.html
a-1.html
THANKS!
Publishing multiple elements in a GitHub repository is exactly the same as publishing a single one. The b-2.html and c-3.html elements in your case should be placed besides a-1.html in the directory:
bower.json
a-1.html
b-2.html
c-3.html
Unless specified in an ignore section of the bower.json file, these should be installed by bower.
In my point of view, the main section of the bower.json file is here subtle. Multiple elements should be considered as individual which could be used independently. Here could be a main section for your situation:
"main": [
"a-1.html",
"b-2.html",
"c-3.html"
]
However, if you wish to document your elements with an iron-component-page component, according to the Polymer 1.0 documentation all elements should be imported in a single html page. The recommended way of setting up the components would be a subdirectory for each component in order to write a demo page per component. I did that in a personal project including several elements to define an UML model: polymeria-uml.
Related
I have made my project with bootstrap, html and css. But the Github pages are only showing the readme file and sending me the error mail. Please help me, this project is important for me
First of all, index.html is missing from your repository.
If you have used only Bootstrap, CSS, and HTML, you probably don't even need npm. You can just upload your files (including those folders for images and CSS) and then go to your Repository Settings and in Github Pages, set the source. If you have an index.html, then <username>.github.io/repo-name will render it automatically after a successful build.
You might find this repository which was made using HTML, CSS, Bootstrap (and Javascript) helpful to refer to.
PS: Don't push node_modules on GitHub. You should ideally add that folder to .gitignore. These modules can be installed by the user who clones your repo using npm commands.
Fresh install of DNN 7.4.2
Anything under the site's DesktopModules folder does not look like it loaded.
How can I get those items like HTML, Journal, SocialGroups, etc to load?
My issue is that on a new page, I can't add an HTML module - that module, and all others from that directory are not one of the available items to add to a page.
Try going to the Extensions page, edit one of the missing modules, and check to see that it has been assigned to the portal in questions.
I switched from the included ReadtheDocs theme to the bootswatch United theme for my project. I did a pip install mkdocs-bootswatch for this theme, and changed theme: readthedocs to theme: united in my mkdocs.yml file.
However, although the project builds successfully in Read the Docs, the documentation retains the standard readthedocs theme. When I run it locally (using mkdocs serve), it appears correctly with the United theme.
Is there another line of code I should be tweaking somewhere? A requirements file I should add? How can I get the external theme to properly appear in the ReadtheDocs... or indeed, can I even use external themes on readthedocs.org?
Note: I did ask the MkDocs folks and they said it was a ReadTheDocs limitation, so if there is anything to be done, it seems like it will be a ReadTheDocs-related solution. Otherwise, I may have to switch to GitHub pages or something similar.
I took a look at ReadtheDocs source code and it appears that they actually override your settings config and force their own template. As I understand it, they do this because they inject JavaScript and navigation stuff specific to ReadtheDocs into your pages and by using a known theme, they can be sure the injections are done correctly. That said, there shouldn't be any technical reason why you can't use the same HTML as the readthedocs theme but perhaps different CSS to alter the look/styling of the pages. Its just that ReadtheDocs appears to not explicitly support this.
That said, I did notice that the template override only happens if 'theme_dir' not in user_config and self.use_theme. That gives you two possible paths to avoid the override. Just be aware that there will be no guarantee that the injected stuff will work correctly so tread carefully.
theme_dir is a Mkdocs setting. Rather than installing a MkDocs theme as a separate Python library, you could copy the theme files into a directory next to the docs_dir and then point the theme_dir setting to it. Just be sure to set theme: null so that MkDocs only uses the theme_dir.
Perhaps as a less aggressive approach, you could set theme: readthedocs, and then use theme_dir to only supply your own CSS files which would override/replace the CSS supplied by the built-in readthedocs theme. This should be less hostile to ReadtheDocs injections and give you a look you like. However, this may require more work to get right as you are restricted to the HTML of the existing theme and will need to author your own CSS (no using an already built theme).
For that matter, you could set theme to whatever theme you want and then point theme_dir to an empty directory. It would appear that ReadtheDocs only checks that theme_dir is set, and doesn't care what actually exists in the directory.
Note: I have not tested any of these suggestions and cannot be certain they will work. YMMV.
As an aside, the MkdDocs documentation about how this all works (interaction between the theme and theme_dir settings) is severely lacking right now. However some recent additions will become live when the next version of MkDocs (0.16) is released.
use_theme appears to be specific to readthedocs and hardcoded internally. My guess is that this will not be overridable by a user. A deeper investigation of the code would be needed to determine what, if any, options this provides.
I am trying to package my Polymer web app as a Chrome Packaged App, but I am running into some issues surrounding Chrome's Content Security Policy (CSP). I am vulcanizing the app (with the --csp option) before packaging it, which works great for the JavaScript portion, but fails to extract the CSS inlined in Polymer's elements. Is there any way to either 1) override the CSP for Polymer's CSS or 2) extract the CSS and place it in a separate file for all Polymer elements?
As far as I can tell, there is a PR in the works to resolve this issue, but it hasn't been updated since August: https://github.com/Polymer/vulcanize/pull/33.
You can use gulp-cssmin to concatenate your css extracted from inline htmls with vulcanize --csp option.
See example of clean-css in Github page:
type one.css two.css three.css | cleancss -o merged-and-minified.css
Is there a best practice for setting up a demo.html for a component? My component uses bootstrap for styling. Should I use the CDN in demo.html? That way I can ensure that the right styles are available if someone downloads the component via github and wants to take a look at it.
Most of the elements I've seen follow the element-boilerplate idea, which is include an index.html for demo purpose and host your project in the gh-pages branch on GitHub (that way you get a live demo right away).
See: https://github.com/webcomponents/element-boilerplate/blob/gh-pages/index.html