Welcome to the new Devonfw help page.
This project is a simple plain html/css/javascript landing page. It includes many scripts coded in ajax & jQuery.
The project itself is built with Webpack, a tool that merges all dependencies files inside a single .js file, commonly named bundle.js.
Using your favorite package manager, in this case npm, you will have to install some basic packages. In this case, the followed steps have been realized through the next guide How to include Bootstrap in your project with Webpack.
Finally, whenever you make an internal dependency change, you should execute npm run build to repack everything needed.
To avoid script related access issues: You may run a local server with your preferred tool commands.
- Go to your working directory where you have your index
- Execute command
python -m SimpleHTTPServer - Access your server through
http://localhost:8000
- Install
http-serverthroughnpm install -g http-server - Go to your working directory where you have your index
- Run an http server through
http-server -c-1 - Access your server through
http://localhost:8080
The main internal goal of this project is to have a clean structure, maintainable folders and files, and really easy read schemes.
According to the objectives, a simple solution has been designed to respect these guidelines:
The project is easily maintained by modularizing and recycling any html elements. Headers, footers, section, and any other kind are supposed to be coded in different files
The following mark has been designed for modularization and insertion process:
First, Create component folder:
/dist/yoursection/yourComponentFolderName
Then, create an html and a css file:
/dist/yoursection/yourComponentFolderName/component.html
/dist/yoursection/yourComponentFolderName/component.css
Finally, in your main html code:
<body>
...
<insertHtml url="/yourpath/yourComponentFolderName"></insertHtml>
...
</body>
As you may notice, this scheme is pretty much angular alike.
- Show elements ONLY if connected to Capgemini network
using the html class
only-internal. Example:
...
<div class="only-internal">This content will be shown only if internal Capgemini access is available</div>
...
- Show elements ONLY if not connected to Capgemini network
using the html class
only-external. Example:
...
<div class="only-external">This content will be shown if the user is outside the Capgemini network</div>
...
- Preferably place your Markdown file in
/dist/assets/markdown/(note thatdistis probably your root directory and therefore doesn't have to be specified) - Use the
insertMdHTML tag and specify the actual Markdown file with thesrcparameter. Example:
<insertMd src="/assets/markdown/helloworld.md"></insertMd>
- The
loadMarkdownInsertions()function atmain.jswill deal with the conversion from Markdown to HTML and inject the content.
- Place the Asciidoc file in
/dist/assets/asciidoc - Use the
insertAdHTML tag and specify the Asciidoc file with thesrcparameter. Example:
<insertAd src="/assets/asciidoc/helloworld.asciidoc"></insertAd>
- The
loadAsciidocInsertions()function atmain.jswill deal with the conversion from Asciidoc to HTML and inject the resulting HTML formatted content