I am using bootstrap carousel to make a website for a school project.
I want the search input box to highlight all text on the page its on so I Googled and found mark.js : https://markjs.io/
And I looked at the Search bar with jump to matches example which leads me here: https://jsfiddle.net/bap5uf8e/
So I copied and pasted the html into index.html added all the basic elements like !DOCTYPE html, head and body, copied the css into a test.css and referenced to it in the <head></head> of index.html. For the JS, I cloned the repo for mark.js and put it in my project folder so the tree looks like this:
├── index.html
├── mark.js [9 entries exceeds filelimit, not opening dir]
├── markTest.js
├── package-lock.json
└── test.css
markTest.js is the JS code copied from the above example (link again: https://jsfiddle.net/bap5uf8e/)
Then I reference both mark.min.js and markTest.js right below the opening <body> tag:
<body>
<script src="mark.js/dist/mark.min.js"></script>
<script src="markTest.js"></script>
Next I use browser-sync (https://www.browsersync.io/) to see if the highlight functionality works but it does not. I copied package-lock.json from my home folder to this one because it had something about mark.js in it and in Python which I am fairly comfortable with, I would put the requirements.txt or yaml file in the project folder. It looks like this:
{
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"jquery": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
"integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
},
"mark.js": {
"version": "8.11.1",
"resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz",
"integrity": "sha1-GA8fnr74sOY45BZq1S24eb6y/8U=",
"dev": true
}
}
}
I have npm install'ed jquery, mark.js as the above seems to indicate. Can someone point out to me what I am missing to get this example to work locally?
This worked:
├── assets
│ ├── brand
│ └── dist
├── biosphere.html
├── clipboard.html
├── comp2680Presentation.odp
├── css
│ ├── biosphere.css
│ ├── bootstrap.css
│ ├── carousel.css
│ ├── dashboard.css
│ ├── famousVegans.css
│ ├── food.css
│ ├── grid.css
│ ├── mental.css
│ ├── parallax.css
│ ├── physicalHealth.css
│ ├── signin.css
│ ├── spiritual.css
│ └── starter-template.css
├── dashboard.html
├── famousVegans.html
├── food.html
├── grid.html
├── index.html
├── js
│ ├── clearButton.js
│ ├── dashboard.js
│ ├── main.js
│ ├── mark.min.js
│ ├── nameValidator.js
│ └── navbarSearch.js
├── js_test
│ ├── basicMarkJS.css
│ ├── index2.html
│ ├── index.html
│ ├── mark.js
│ ├── markTest.js
│ ├── package-lock.json
│ └── test.css
├── markJsTest
│ └── index.html
├── mental.html
├── navbarSearchDemo.png
├── parallax.html
├── physicalHealth.html
├── public
│ ├── fonts
│ └── imgs
├── README.md
├── signIn.html
├── spiritual.html
└── starter.html
You can see my site here: https://nyck33.github.io/ecoWarriors/
The mark.js highlighting works.
Related
I try to document my "large" node.js backend, which has the following file/folder structure:
backend
├── components
│ ├── devices
│ ├── endpoints
│ ├── plugins
│ ├── rooms
│ └── vault
├── helper
│ ├── debounce.js
│ ├── expose.js
│ ├── extend.js
│ ├── infinity.js
│ ├── iterate.js
│ ├── mixins.js
│ ├── observe.js
│ ├── promisify.js
│ ├── propertys.js
│ ├── queue.js
│ ├── request.js
│ ├── sanitize.js
│ └── timeout.js
├── index.js
└── system
├── component
├── hooks.js
└── middleware.js
Basically i want to create tree groups: system, helper & components, where i can add.
Is there a way to add custom categorys/groups in the jsdoc with the above headlines? E.g. (Generated jsdoc output edited to illustrate goal):
Is there a built in way with a combination of built in stuff?
(Im pretty new when it comes to work with jsdoc)
I am doing pretty much this tutorial. Basically you have a pom which controls two modules, the frontend module and the backend module.
Environment: IDE: Intellij, spring-boot, Vue.js
I initialized the frontent module using vue init webpack frontend. I added the pom to the backend module which copies the assets into the backend module asset/public folder. After mvn clean install all the content is in the ressources/public folder, but when I view the browsers sources it does not show any of them.
The resources folder looks like this:
└── resources
├── application.properties
└── public
├── index.html
└── static
├── css
│ ├── app.30790115300ab27614ce176899523b62.css
│ └── app.30790115300ab27614ce176899523b62.css.map
└── js
├── app.b22ce679862c47a75225.js
├── app.b22ce679862c47a75225.js.map
├── manifest.2ae2e69a05c33dfc65f8.js
├── manifest.2ae2e69a05c33dfc65f8.js.map
├── vendor.42fc6c515ccdfe89bd76.js
└── vendor.42fc6c515ccdfe89bd76.js.map
I just noticed that running java -jar backend/target/backend-0.0.1-SNAPSHOT.jar solves the problem. But when I start the application using intellij it does not work out.
Full tree (directories only):
├── fileconverter
│ ├── backend
│ │ ├── src
│ │ └── target
│ ├── frontend
│ │ ├── build
│ │ ├── config
│ │ ├── node
│ │ ├── node_modules
│ │ ├── src
│ │ ├── static
│ │ ├── target
│ │ └── test
│ └── target
│ ├── classes
│ └── test-classes
Okay, as I am having two modules IntelliJ used the classpath of the whole project instead of the backend module.
After changing the path in the configuration to: Use classpath of module: backend everything works fine.
In my tsconfig.json file, I have:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": false,
"baseUrl": "./node_modules/"
},
"exclude": [
"node_modules",
"typings"
]
}
Transpiling to JavaScript works fine, but throws an error in the browser. (exports is not defined). If I remove commonJS as noted in this answer, then it can no longer resolve the import statment:
import { angular } from "angular";
...and it won't transpile. What am I missing here?
Updated:
As requested in the comments, a file tree for project structure. The tree actually has 250+ directories and several thousand files, it has been abbreviated to only show the relevant bits:
.
├── bugzy-work-timer
│ ├── app.php
│ ├── css
│ │ └── 01-timer.css
│ ├── js
│ │ └── footer
│ │ ├── timer.js
│ │ └── timer.ts
│ ├── manifest.sig
│ ├── manifest.xml
│ └── tests
├── move-unused-apps.sh
├── node_modules
│ └── angular
│ ├── angular-csp.css
│ ├── angular.js
│ ├── angular.min.js
│ ├── angular.min.js.gzip
│ ├── angular.min.js.map
│ ├── bower.json
│ ├── index.js
│ ├── LICENSE.md
│ ├── package.json
│ └── README.md
├── package-lock.json
├── phpunit.xml
├── tsconfig.json
├── tsd.json
├── tslint.json
├── typings
│ ├── index.d.ts
│ ├── modules
│ │ └── angular
│ │ ├── index.d.ts
│ │ └── typings.json
│ └── tsd.d.ts
└── update-all.sh
When I use bower install to install the dependencies, they will be downloaded into bower_components, like:
├── jquery
│ ├── AUTHORS.txt
│ ├── CONTRIBUTING.md
│ ├── MIT-LICENSE.txt
│ ├── README.md
│ ├── build
│ │ ├── release-notes.js
│ │ ├── release-notes.txt
│ │ └── release.js
│ ├── component.json
│ ├── composer.json
│ ├── grunt.js
│ ├── jquery.js
│ ├── jquery.min.js
│ ├── package.json
You can see there is no version in the file names.
Is there any way to make bower add the versions to the file name or path automatically, so that I don't need to worry about the browser-cache if I include them directly in the web server?
I want it like this:
├── jquery-1.9.1
│ ├── AUTHORS.txt
│ ├── CONTRIBUTING.md
│ ├── MIT-LICENSE.txt
│ ├── README.md
│ ├── build
You can do like this :
bower install jquery-1.9.1=jquery#1.9.1
I am at the point where I have to add Express 4 to my modularized AngularJS ui-router app. Previously I used this tutorial to modularize my Angular app. I currently have all the modules for my AngularJS app in the src/app/ directory like so:
$ tree -I 'node_modules|bower_components|assets|scss|test' -L 4
.
├── awsS3.js
├── bower.json
├── Gruntfile.js
├── karma.conf.js
├── karma-e2e.conf.js
├── package.json
├── README.md
├── server.js
└── src
├── app
│ ├── app.module.js
│ ├── auth
│ │ ├── auth.ctrl.js
│ │ ├── auth.module.js
│ │ └── auth.serv.js
│ ├── image
│ │ ├── image.module.js
│ │ ├── images.ctrl.js
│ │ ├── image.serv.js
│ │ ├── images.tpl.html
│ │ ├── imageview.ctrl.js
│ │ └── imageview.tpl.html
│ ├── nav
│ │ ├── login.tpl.html
│ │ ├── nav.ctrl.js
│ │ ├── nav.module.js
│ │ ├── post-register.tpl.html
│ │ ├── register.tpl.html
│ │ └── url.fltr.js
│ └── security.json
├── index.html
└── robots.txt
Now I am wondering how I should break up the Express 4 code to fit in with my Angular modules. I really can't find any tutorials that focus on this. Any ideas?
When i develop client-server applications I tend to keep the server and client completely separate from each other. So I would suggest that you create a "server" folder and in there your layout could look something like this:
server
--app.js
--server.js
--config.js
--controllers
----firstController.js
--routes
----firstRoute.js
--models
----firstModel.js
I would recommend this website: https://scotch.io