Can you load template from string in Meteor's Iron Router - meteor

Can you load a template from string in Meteor's Iron Router instead of doing this.render('pageName');?
In other words can you have:
var html = "<div>{{todo}}</div>";
this.render(html);
Thanks!

There is the package numtel:template-from-string which makes Blaze templates with the Spacebars from string.

Related

How do I localize routes with next.js and next-i18next?

I need to change the name of the route when I change the language. For example, I have a route /en/career but when I change to Czech language, I need a route /cs/kariera. Basically I need the URLs to be localized. Right now, when I'm on /en/career and change language to cs, I get /cs/career. This page should not exist at all and when I render the page on server, I correctly get 404. Can I do something like this with next-i18next package? If so, how?
I found this package https://github.com/vonschau/next-routes-with-locale which probably does exactly what I need but it's apparently no longer maintained and doesn't work under next.js 8.
What I did eventually was to use next-routes package and defined specific route for every page, such as:
module.exports = routes()
.add('en-career-listing', '/en/career/:listing', 'career/listing')
.add('cs-career-listing', '/cs/kariera/:listing', 'career/listing')
.add('en-career', '/en/career', 'career')
.add('cs-career', '/cs/kariera', 'career')
.add('en-our-story', '/en/our-story', 'our-story')
.add('cs-our-story', '/cs/nas-pribeh', 'our-story')
And I also had to create a custom Link component based on next/link where I manually added the language to URL.
next-i18next supports this functionality, it called locale subpaths.
You need to configure: new NextI18Next({ localeSubpaths: 'foreign' }), and then use the Link & Router that NextI18Next instance has on it, not the next/router.

How to generate SEO friendly URLS using flow router?

I am working on an application that needs to have some SEO standing. For starters it would be nice to get slug type search engine friendly urls that get generated based on document title. Does anyone know of any libraries or ways to get about doing that?
Secondly based on my reading it seems that if one wants better SEO that he/she get iron router since there are some 3rd party packages that seem to help with that (spiderable etc). Also iron router is easy with generating titles and meta tags. Is that a true assumption?
If you use simple schema then you can do something like this:
Posts.attachSchema new SimpleSchema
title:
type: String
content:
type: String
url:
type: String
autoValue: ->
title = #field('title')
unless title.isSet then return
someEscapeFunction(title.value.substring(0, 120))
and pass url as path param in router

iron:router wildcard path generating seems to be broken

When you create a wildcard URL in iron:router for meteor the pathFor Template helper but also Router.go and Router.routes[routeName].path() seems to be broken.
This is our route:
Router.route('/:urlQuery*', function(){
this.render('ourTemplate');
}, {
name : 'ourRoute',
});
To accessing a generated url to this we tried the following:
Router.go('ourRoute', {urlQuery : 'test'});
Router.go('ourRoute', {urlQuery : ['test']});
Router.go('ourRoute', {urlQuery : null});
Router.go('ourRoute', {urlQuery : false});
Router.routes.ourRoute.path({urlQuery : 'test'});
Router.routes.ourRoute.path({urlQuery : ['test']});
Router.routes.ourRoute.path({urlQuery : null});
Router.routes.ourRoute.path({urlQuery : false});
And - of course - also we tried the {{pathFor}} Template-Helper.
Every of these lines of code throw the same errors:
Uncaught Error: You are trying to access a wild card parameter at index 0 but the value of params at that index is undefined
I did not find any reference in the iron:router guide so my question is: How to generate a URL in iron:router with a wildcard as parameter ?
Looks like Iron Router is using path-to-regexp but the format is a little different when used in Iron Router and not very clear. Try this...
Router.route('/:urlQuery(.*)', function(){
The (.) will tell it to take the param name, and repeat it 0 or more times. Just urlQuery is breaking the name I think, and making it part of the regex. Now if you want to pass an array of mulitple objects to Router.go, you will have another issue...
Router.go("our.route", {urlquery: ['test', 'another']});
Produces a URL that looks like this...
http://localhost:3000/test%2Canother
but that's a different issue I don't have an answer for yet. Perhaps for sending multiple's in Router.go, a better way would be to concat them yourself. Looks like iron router and path-to-regexp are not fully integrated yet?

Meteor Iron Router does not get Current Path from Route

In a Template Helper I get the current path from Iron.Router (iron:router) as follows:
Router.current().route.path(this);
This works fine, unless the route path does contain parameters (e.g. /client/:_id/edit). In that case the path() function returns null.
How do I get the current path within a Template Helper, when the route contains parameters?
There are posts around covering the issue but the solution mentioned there seem not to fit.
I'm using Meteor 1.1.5 with iron:router1.0.7
According to this iron-router/issues/289 there are problems when the path contains parameters. The suggestion to use Iron.Location.get().path This works well for me.

Emulate server-side rendering with Meteor

As we all know, Meteor's initial payload sent to the client comprises (in production) a concatenated javascript file containing the Meteor platform, packages, and all templates parsed into Meteor's reactive templating system. Server-side rendering, where the templates are rendered to HTML and sent to the client in the initial payload, is on its way but doesn't have an expected release date yet.
I'm looking for a way to "hack" or approximate server-side rendering given the available functionality in Meteor 0.8.x. Specifically, I want to:
enable the page to render its initial contents without first waiting for the several hundred KB Meteor platform javascript file to be downloaded and parsed.
alternatively, modify Meteor so it only sends the templates it needs to render the initial request in the javascript payload, and fetches the remaining templates once render is complete.
The use case is http://q42.com. I recognise Meteor isn't the best fit for static websites like this one but I want to try and see how far I can get anyway. Right now the Meteor platform JS file is over 600 KB in size (±200 KB gzipped) and I'd like to reduce this size if possible.
Note: I'm aware of and already using Arunoda's fast-render package, which is intended to send data with the initial payload. In this case I want to cut down on time-to-first-render by also getting the templates themselves down faster.
This is a little bit tricky. But there are some things you could do. This may not be the beeest way to do it but it could help you get started somehow.
Meteor is build with many packages as 'default', sometimes some are not needed. You can remove the standard-app-packages and add the packages (that you need and use manually) listed here: https://github.com/meteor/meteor/blob/devel/packages/standard-app-packages/package.js
To cut down the templates you would have to include the bare templates that you use and include the other template's separately and perhaps send down the Template information via a Collection, using a live observer handle to initiate the templates
You would have to 'render' the templates on the server side or store them manually in your collection using Spacebars.compile from the spacebars-compiler package which is a little tricky but you could have it done decently:
This should give you a rough idea, not sure how to get passed the 'eval' bit of it though:
HTML file in /private/template.html
<template name="test">
Hello {{name}}
</template>
JS file in /private/template.js
Template.test.name = function() { return "Bob" }
Server side code
var collection = new Meteor.Collection("templates");
var templateData = Assets.getText("template.html");
var templateJs = Assets.getText("template.js");
var compiled = Spacebars.compile(templateData).toString();
var jsData = templateJs;
collection.insert({templateName:"test", data: templateData, js: templateJs});
Client Side code
collection.find().observeChanges({
added: function(id, fields) {
var template = fields.data,
name = fields.name,
js = fields.js;
Template["name"] = UI.Component.extend({
kind: "name",
render: eval(template),
});
eval(js);
}
});
Then just subscribe to the collection asking for your template and it should exist. If you use iron-router I think (not sure) you could make the subscription wait before the template is rendered so you could have it work.
Again this is just a 'hacky' solution, one thing I personally don't like about it is the use of eval, but javascript needs to run somehow...
You could loop through files in a particular folder using fs = Npm.require('fs') to render each template too.
One alternative would be to inject a 'script' tag calling the compiled js template and template helpers to let the template exist.

Resources