I'm once again attempting to use the meteor-accounts-t9n package and I'm seriously flipping out with the vague explanations provided in the package's GitHub.
I added the package with meteor add meteor-accounts-t9n as well as the accounts-password and accounts-ui packages.
Then I created part of my usual project structure: client folder, server folder and lib folder.
I got nothing on server for now.
I configured my client html to be like:
<head>
<title>t9nTest</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
{{> loginButtons}}
</template>
My javascript is like:
Template.loginButtons.onRendered(function(){
T9n.setLanguage("pt");
});
I've attempted with Meteor.startup as well.
I added a t9n folder under lib. On that folder I put a file called pt.coffee and put the entire portuguese structure available on the project's github.
KEEP IN MIND THIS IS MY ONLY COFFESCRIPT FILE - I'M WANT TO USE JAVASCRIPT
Still nothing. What am I missing? What is the appropriate usage of the package in order to translate the accounts-ui loginButtons form?
I also have gotten this error on the client-side: "Uncaught Error: No such function: t9n" when I attempt to directly convert a string returned by a helper function with `
{{t9n textReturned}}
As far as I know, in terms of translations for account-related UI elements (buttons, links, placeholders and so on), meteor-accounts-t9n is set to work with the meteor-useraccounts packages. (core and framework-specific, such as bootstrap, foundation, ratchet...)
With the meteor-useraccounts packages installed and in use (using {{> atForm}}), all you need to do is, like you said, install the meteor-accounts-t9n package:
$ meteor add softwarerero:accounts-t9n
And that's it, the translations should be in place according to the default language. All you need to do to change the language for your account elements is (here for portuguese):
T9n.setLanguage("pt");
Related
I've been trying to sort this out for a while; my goal is to use Polymer modules inside the Aurelia framework. There's a tutorial here (on the official documentation), but that's not for a CLI generated app.
my aurelia.json file has the following dependencies:
…
"aurelia-html-import-template-loader",
"aurelia-polymer",
…
(installed using npm)
and the index.html file looks like this:
<head>
<title>Aurelia</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
…
I have no errors in the CLI/console upon building.
main.js
aurelia.use.plugin('aurelia-polymer');
loads fine but
aurelia.use.plugin('aurelia-html-import-template-loader');
gives errors in the browser console:
vendor-bundle.js:21513 GET http://localhost:9000/app.html
Unhandled rejection Error: Load timeout for modules: template-registry- ………
I've been talking to a bunch of lads on aurelia/gitter, but so far I've found nobody who was able to get 'aurelia-html-import-template-loader'working in the CLI.
Thanks for reading,
have an awesome day
From aurelia-polymer:
Using with Webpack
If you're using webpack, you won't be able to use
aurelia-html-import-template-loader, which means you won't be able to
load Polymer elements in your templates directly (see #18). Instead,
it's suggested that you use vulcanize to bundle all the Polymer
elements you use into one file that can be loaded in index.html. The
elements will still be available in your templates once loaded, but
this avoids the syntax issues that require the HTML import template
loader.
I haven't tried it with aurelia-cli yet, but it's worth a shot.
Suppose I have a README.md file in a github repository. I am then making a website all about this repository that I will host using gh-pages.
What I want is to have a section of my index.html file that gets its content from my README.md file. This way, only one file needs to be updated.
I imagine that the markdown file will first need to be converted to html, and that html can then be put into another html file.
I have looked into HTML5 Imports, but they are only currently supported in Chrome. Using a separate .js file with document.write() could be useful, but is there a simple, clean way?
I am using <zero-md> web component.
<!-- Lightweight client-side loader that feature-detects and load polyfills only when necessary -->
<script src="https://cdn.jsdelivr.net/npm/#webcomponents/webcomponentsjs#2/webcomponents-loader.min.js"></script>
<!-- Load the element definition -->
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#1/src/zero-md.min.js"></script>
<!-- Simply set the `src` attribute to your MD file and win -->
<zero-md src="README.md"></zero-md>
My complete answer using Node.js
1. First install the marked markdown converter:
$ npm install --save-dev marked
2. Then in a new file called generateReadMe.js, compile the markdown to HTML and write it to a new README.html file:
var marked = require('marked');
var fs = require('fs');
var readMe = fs.readFileSync('README.md', 'utf-8');
var markdownReadMe = marked(readMe);
fs.writeFileSync('./site/README.html', markdownReadMe);
3. Then inside the index.html where the README.md content is wanted, add an <object> tag:
<object data="README.html" type="text/html"></object>
4. Then run this on the command line to make it happen:
$ node path/to/generateReadMe.js
The whole process was pretty simple and painless. I added the whole thing to my npm start script. Now any time I make a change to my README.md file, the changes will register on my gh-pages website.
You could use a markdown parser such as https://github.com/markdown-it/markdown-it to convert the markdown to html.
You could either convert the markdown on the server and merge it into the HTML delivered to the client, or use it to load the markdown in the browser and convert it there.
To convert markdown to html, you can use a conversion library or a command tool. For an example using the Ruby language, visit: https://github.com/github/markup.
Try searching for an appropriate conversion library or command tool for your implementation by visiting: https://www.npmjs.com/search?q=markup. The accepted answer above is an example using the NPM package manager for Node.js.
I am using react starter kit for client side programming. It uses react and webpack. No index.html or any html to edit, all js files. My question is if I want to load a vendor js lib from cloud, how to do I do that?
It would be easy to do that in a html file. <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
However, in js file, it only uses npm installed packages. How can I import the above lib with no html file? I tried import and require, they only work for local files.
update 10/21/15
So far I tried two directions, neither is ideal.
#minheq yes there is a html file sort of for react start kit. It is html.js under src/components/Html. I can put cloud lib and all its dependencies there like this:
<div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
<script src="/app.js"></script>
<script dangerouslySetInnerHTML={this.trackingCode()} />
</body>
Good news is it works, I don't need do anything else in js file, no import or require. However, now I have two jquery libs loaded in different ways. One in here, the other through npm and webpack. I wonder it will give me trouble later. The react-routing I use give me 'undefined variable' error if I type a none home path in browser window due to the server side loading I guess. So this solution is not very good.
Use webpack externals feature. This is documented as: link. "You can use the externals options for applications too, when you want to import an existing API into the bundle. I.e. you want to use jquery from CDN (separate tag) and still want to require("jquery") in your bundle. Just specify it as external: { externals: { jquery: "jQuery" } }."
However, the documentation I found a few places are all fussy about how to do this exactly. So far I have no idea how to use it to replace <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script> in html.
externals is not intended to let you do this. It means "don't compile this resource into the final bundle because I will include it myself"
What you need is a script loader implementation such as script.js. I also wrote a simple app to compare different script loader implementations: link.
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
$('body').html('It works!')
});
You can create a script tag in your JS as
$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))
There is one html file that is definitely being used to serve to users with your js bundle attached. Probably you could attach the script tag into that html file
Use webpack's externals:
externals allows you to specify dependencies for your library that are
not resolved by webpack, but become dependencies of the output. This
means they are imported from the environment during runtime.
I have looked around for a solution and most of all proposals were based on externals, which is not valid in my case.
In this other post, I have posted my solution: https://stackoverflow.com/a/62603539/8650621
In other words, I finished using a separate JS file which is responsible for downloading the desired file into a local directory. Then WebPack scans this directory and bundles the downloaded files together with the application.
I'm building an Express.js Node app and using Jade templates. Jade provides a :markdown filter which enables embedding Markdown code inside Jade:
h1 This is Jade
:markdown
## And this is Markdown
h3 Back in Jade
(Note: In order to use this filter you have to npm install a Markdown engine, e.g. npm install marked --save. You don't have to require() this module within your Express app, but it has to be installed.)
So, embedding Markdown within Jade works fine. However, I would like to keep my Markdown in separate files and include them in Jade templates dynamically. I've tried this and it does not work:
:markdown
include ../path/to/markdown/file.md
The include command is treated as source code instead of being interpreted as a command. Is it possible to inject Markdown from external files within the :markdown filter?
Please don't provide workarounds! I know how to work around this issue. I want to know if the :markdown filter is compatible with external Markdown files.
You can include markdown files using the :md filter modifier.
eg.
html
body
include:md ../path/to/markdown/file.md
Language Reference: https://pugjs.org/language/includes.html#including-filtered-text
the :md modifier does not work for me either, but this works:
html
body
// works:
include file.md
//- does not work:
include:markdown file.md
include:md file.md
I am using docpad with the HTML5 Boilerplate template.
You also should consider the problem of no auto-generation of including *.html.jade files of such includes:
How to auto-generate html from jade file when only included markdown file has changed in livereload development environment?
First, run this command:
npm install marked --save
Then, do this:
include:md ../path/to/markdown/file.md
I am creating single page app using Ember.js with multiple javascript files, which are combined and minified using bundle feature in VS2012.
If I turn on minification (BundleTable.EnableOptimizations = true;), ember.js library (ember-1.0.0-rc.3.js) is not included into ember bundle. For clarification filename does NOT end with ".min.js" nor ".debug.js". My bundle definition looks like:
bundles.Add(new ScriptBundle("~/bundles/ember").Include(
"~/Scripts/handlebars-1.0.rc.3.js",
"~/Scripts/ember-1.0.0-rc.3.js",
"~/Scripts/ember-i18n.js",
"~/Scripts/localize/loc-slovak.js"));
and it is used on page using:
#Scripts.Render("~/bundles/ember")
I have suspicion for too large file (more than 28000 lines, 774 kiB). I tried to update nuget package Microsoft.AspNet.Web.Optimization to latest version, but id did not solve my problem.
.NET's Bundler breaks Ember RC3 if you minify it. It's also breaking Ember-Data. We had to include all Ember related scripts without bundling directly in the _Layout.cshtml for now while we work on a different solution (we'll likely include a different transform just for Ember):
<script type="text/javascript"
src="#Url.Content("~/scripts/ember-1.0.0-rc.3.min.js")"></script>
<script type="text/javascript"
src="#Url.Content("~/scripts/ember-data.min.js")"></script>
If you're using the SPA template(download | source), you should be fine as it's still using RC2; but if you update to RC3, then you'll have to modify the bundle config and the layout file according to this sample.
I didn't have time to send the PR to the SPA template yet, but I have updates for this issue (will do it tonight fo sho)
Another thing if you're using the SPA template: It comes with a HTML helper #Html.RenderEmber() to render the templates in the View file in debug mode. This method does not render the template names according to Ember conventions, so I've added another method for now (#Html.RenderEmberTemplates()). They should be in sync after the PR/merge.
The sample added in Myslik's repo is probably the most up to date at this point and I suggest that you take a look for reference.