I have common asp.net mvc project.
I have there one module that contains handlebars templates, javascript modules and stylesheets.
This module is used into different pages and placed somewhere inside div tag.
The new requirement is to use this module into other solution. But I do not want just copy and paste all files related to the module (js, html, css) because it would be hard to maintenance it into different solutions.
So, my question is in what way I should organize this module to be declared only once and to be used into different solutions.
I've had the same requirement before and this is how I dealt with it:
Move your shared content
In my solution, I added a new Shared folder and created a Shared project. You don't necessarily have to move into a new project, I just did this because the shared project also included shared MVC logic.
Add linked shared files to the solutions
It's important to know that this step is optional, it's just that it helps developers in that the files are still in the expected place. Now that you have for example: Project1, Project2 and Shared. Now in Project1 (for example), add your files back in individually. But follow these steps:
Right click the folder you wish to add the file to
Hover over Add then select Existing Item
Navigate to the file in the Shared project and select the file
Before clicking 'Add`, notice the arrow
Click this, and select Add as Link
The benefit of this is that when you click on the file in your solution explorer within Project2, it will open the file in Shared.
Add pre-build events
In each project using the Shared files you will need to add Pre Build Events. Currently, although the project contains a reference to the shared file, it won't actually do anything when you run the project. The solution to this is build events:
Right click your project and select Properties
Select Build Events in the menu
In the Pre-build event command line section enter the following:
xcopy /R /E /Y "$(SolutionDir)SharedProject\Scripts" "$(ProjectDir)Scripts"
To explain: this will copy the contents of your scripts directory in your shared project, and add it to (or replace) your current projects scripts directory. You will need to add a line for each folder (e.g. HTML, CSS, etc)
Related
Is there a 'native' way to include your own HTML, CSS and Javascript page in an Antora generated site?
Including an HTML file in the Asciidoc source with inline CSS styling works for only HTML and CSS like this (see the attached image for the result):
++++
include::partial$test.html[]
++++
However, if you were to separate the CSS out and add Javascript then the .css and .js files do not get published since they are not directly included anywhere and the included HTML follows the styling defined by the UI bundle.
Manually copying the CSS and Javascript files to the right place in the build files works as expected (the Antora page is styled and runs the .js as expected)
I would think most Antora documentation is the product of some CI/CD pipeline so you could probably add the CSS and Javascript to the build files as part of the pipeline but that is a messy solution.
What is really required is a way to force Antora to publish some 'extra' files or folders.
I get that the whole point of Antora is to make consistently styled and formatted documentation. The reason for wanting to do this is to include interactive graphs generated by Plotly or Bokeh in the documentation.
It also opens up the possibility of including any kind of interactive window, such as a button to play music. In my case I want to have an 'interactive chord book' that plays and highlights the notes in music chords.
Inline Styling on Antora Site
Your sample pass-through block works because the included file is inserted into the content flow at that position. The test.html file is not, itself, published, but its contents exist within the file using the include macro.
Similarly, if you used this partial block:
++++
include::partial$test.js[]
++++
The contents of test.js are injected into the content flow at that point. test.js itself doesn't need to be published if you are simply embedding a few lines of code.
If you do need test.js to be published, you have three choices:
Store test.js in the module's attachments folder (instead of partials. The partials folder is intended to contain "small" Asciidoc documents that are used multiple times). You'd need to include::attachment$test.js[], but that file does get copied to the build folder.
Use supplemental_files: https://docs.antora.org/antora/latest/playbook/ui-supplemental-files/
Supplemental files allow you to customize the assets in the UI.
Fork the UI and add your customizations directly.
The latter two approaches would be preferable. Currently, Antora only publishes HTML. In the future, publishing to other output formats may occur, including to PDF. PDFs won't work well with embedded HTML, CSS, or JavaScript, so the UI customization is the preferred approach. (PDF generation will likely have a distinct theme support, similar to asciidoctor-pdf).
I'm wondering how to remove certain files form IntelliJ's autocomplete. More specifically things fetched via Maven. As an example, replace will generate a long list of declarations:
Most of which are random declarations of variables and functions in JS-files which come from Maven dependencies (I'm developing Confluence plugins, hence the Confluence dependencies). What I'm wondering is how I make IntelliJ ignore all these files? For files in the project I can simply mark the directory as ignored but since these files are in my Maven repository I can't do that.
You might want to try the scope setting in IntelliJ to exclude files coming from libraries or other sources.
The scope of a library defines the set of files and folders in which the library is considered as library, that is, it is write-protected, excluded from check for errors and refactoring, affects the completion list and highlighting.
By default, all predefined libraries and libraries downloaded from within IntelliJ IDEA provide completion, resolution, highlighting and are treated as libraries in any file within the project. In other words, their usage scope is the whole project.
Libraries that you create yourself are not considered libraries in any of the files unless you specify their usage scope explicitly.
Open the Settings dialog.
In the left-hand pane, expand the JavaScript Libraries node and select Usage Scope.
In the right-hand part (on the Usage Scope page):
To make the library available in all the files within the project, click the Library cell in the topmost (Project) row and select the library in the list that appears.
To specify a narrower usage scope, expand the nodes in the File/Directory column to see the folder or file you want to limit the library usage scope to. Click the Library cell to the right of the corresponding folder or file and select the library in the list.
Click OK in the Settings dialog.
https://www.jetbrains.com/idea/help/configuring-javascript-libraries.html#d76972e18833
Handlebars templates in ember.js applications are within "script" tags. Third party widgets, ads, and whatnot often is another "script" which document.writes something in the place it's inserted.
Script withing a script tag will not work, so is there a way to handle then within ember applications?
For the purposes of writing maintainable, DRY code, an Ember app of any real size or significance should be built using a build tool like ember-cli or brunch. These build tools will compile the application files (including templates and vendor files) from multiple directories. I'll cover those, then I'll cover a couple of ways in which you can include widgets/scripts without a build tool.
1) Whilst the Ember Guides show you how to define your templates using script tags, that's not an efficient or effective way to manage your application's templates (unless you're building an app for learning purposes or a JSbin demo, etc, when you need to put everything inside a single file). Build tools like those mentioned above use resolvers to watch your file directories and compile the templates to the Ember.TEMPLATES object, which is where your application would access them anyway.
These build tools usually have separate directories in which to place your vendor files (e.g. third-part widgets), which will usually be watched for changes and compiled into a vendor.js file that is included in your index.html page. You can also use dependency management tools like NPM and Bower to streamline this process. In both situations, the plugin methods will be accessible throughout your application.
2) If you really don't want to use a build tool then just include the script tags on your index.html page just before the closing body tag and any methods will be accessible on the window object inside your application. This is obviously not effective if you're trying to place a widget like a social sharing button in a specific place on the page.
3) Another approach when you're not using a build tool would be to run the $.getScript() method (see here) inside a view or component on the didInsertElement event. This is probably the best way to include widget-like scripts at particular places in your template. Inside the view you can use this.$().find('.some-selector') to target specific elements inside the template or this.$() to target the view's element itself.
More info:
Templates in Ember CLI
I've started using SailsJS for a small web app and so far it's great.
However I'm struggling with the assets and layout.
Basically I would like to be able to use different type of assets (groups of css files) depending on the page.
For this, I wrote 2 different layouts, each should includes the correct css files.
However, when I add those files in the config/assets.js files there all bundled together.
Is there a way to specifiy in my layout which assets i want to use ?
I know you can specify assets.js or assets.styles but I would like to be able to create my own group .
I also tried to put those assets in a different directory (public for example) and load them manually in my layout. It's still not working because the server doesn't want to 'serve' them.
Any idea ?
Glad you're liking Sails :)
For now, you can (a) bring in all styles all the time and make only the relevant ones apply (b) use another tool (like Grunt) to bundle assets like you would in a vanilla node.js project or (c) link the stylesheets manually (put them in your public folder).
As for the roadmap-- the community is working on more options for serving templates/styles/client-side logic. There's an open spec here:
https://github.com/balderdashy/sails/issues/240
Hope that helps!
I know this is old, but in case anyone else comes across this; in recent versions of sails the asset pipeline is built around grunt by default (I haven't used sails before 0.10.x).
You can add your own exports in tasks/pipeline.js and link those to the appropriate location in tasks/config/sails-linker.js. E.g. you could have a views/public folder and tell sails-linker to inject publicCSS vars there. Then adjust your layout.ejs so that it imports the styles/javascript from whichever folder.
I have all jQuery files in the js folder. I noticed that the SlickGrid download contains its own copy of jQuery. I'd prefer to have a single copy of jQuery for my own code as well as SlickGrid. Presently the folder hierarchy looks like this:
mysite/
js/
SlickGrid/
build/
css/
examples/
images/
lib/
jquery-1.4.3.min.js
jquery-1.8.5.custom.min.js
...
MIT-LICENSE.txt
slick.columnpicker.css
...
jquery-1.5.1.min.js
jquery-ui-1.8.13.custom.min.js
Is there a way to rearrange the folder hierarchy so that only a single copy of jQuery is used? Is it advisable?
in my humble opinion, it depends how demand you are. If you want to keep the folder structure then you should test if the plugin does also work with the newer versions of jquery and jquery-ui. If so, then you have to change all script includes to new .js files. You can use an extra program to do the changes automatically, like Search & Replace. After that move the newer ones to the 'lib' folder and delete the other files.
from my experience, when using jquery plugins we can copy the relevant plugin script, the css and images to what ever folder we need. when referring the plugin, we refer from that folder. in this case u can remove the jquery scripts provided with Slick grid and refer the one you already use.
PLS NOTE : when moving css files, the images referred in css also should be moved to specific folders accordingly.
Since there's so much in the SlickGrid git repo that I don't want to have in my own source tree I've been pulling it into directory outside my project's tree and copying the files I need into the appropriate places in my source.
This is kind of a crappy solution since it takes a while to update. So what I've been thinking of doing is making the copies of the SlickGrid files in my source tree into links to the outside repo. So when I pull a new version of SlickGrid the copies in my tree would update automatically.