I thought that having something like:
Router.configure({
layoutTemplate : "template"
});
and then
<template name="template">
<head>
<title>Your Website Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
{{> menu}}
{{> yield}}
</body>
</template>
would continue to work after the last update. Any idea what changes need to be made in order to keep my layout working ? Doesn't seem to be described very well anywhere for now.
What I get after rendering the page is just
template
in the upper left corner of the browser.
Edit1: For some reason, my browser console wasn't printing out any errors before, but it is now. It seems like it's related to accounts-ui-bootstrap-3 - it's trying to use Spark, I'll try changing to the blaze(dev?) branch and try again.
Edit2: Replaced the appropriate line in the smart.json file with this
"accounts-ui-bootstrap-3": {
"git": "https://github.com/mangasocial/meteor-accounts-ui-bootstrap-3.git",
"branch": "blaze"
}
It seems to have helped with the errors I am getting in the console, but I still just see the "template" text in the upper left. The "blaze" branch seems to be undergoing active updates, so it's probably just that... will update when I figure this out.
In Meteor 0.8.0 {{yield}} is now {{>yield}}
Related
I cannot for the life of me figure this out. The following site is hosted on Netlify and prerendering is enabled. When inspecting the page, all of the OG tags are correct. These tags are injected using react-helmet.
https://browniepoints.africa/opportunities/volunteer-at-a-soup-kitchen-every-week-on-thursdays
When scraping the above URL on the Facebook debugger, it responds with:
The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id
The only one of those errors/warnings that should be there is the app_id, which I don't care about.
I've waited well over 48 hours for caches to clear, I've tried scraping with query strings appended to the URL, and the images have absolute URLs. But not even the description tag is pulling through.
Can somebody that uses react-helmet and Netlify please shed some definitive light onto this problem?
This is related to a known prerendering issue.
My fix was to remove the <!DOCTYPE html> declaration from the index.html file as a temporary workaround until the above issue is resolved.
While I can't tell you exactly why. your SSR is not working correctly. Go to Chrome DevTools and click the 3 vertical dots next to Console:
Select Networking Conditions, then uncheck Select Automatically and enter Googlebot/2.1 (+http://www.google.com/bot.html):
Now refresh the page and notice that all you see on the site is some plaintext saying "html" and even your javascript bundle is missing. This is what your html looks like:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="fragment" content="!">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Brownie Points</title>
<link href="/static/css/2.3bf0f3c5.chunk.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Note that Netlify SSR is in Beta but I personally didn't have those issues with it. Have you done any other steps other than enable it? I have tested it to be working with a CRA generated app before.
I am building a web2py application.
I use my own css file called style.css
I do know that the following code
{{response.files.append(URL('static','css/base.css'))}}
{{include 'web2py_ajax.html'}}
will link my css file to my application.
I use this for layout.html; which is used for every page of application.
Initially, I do not have problem with this...
Suddenly, at some point, my css is not updated...
Every css before the point, works fine.
Every css after the point, do not work at all.
In web2py editor, all css changes are updated. However, If if run it, the css is not updated... If I inspect the css code using chrome, the css is not updated and remain to previous css file..
for clarification, I give you example
initially I just have the following.
#title{
font-size: 90px;
}
then I change it to the following
#title{
font-size:100px;
}
IN the web2py editor, the change is saved and set it to 100px. However, if i run the application and view css file using chrome inspect, it is still remained as 90px.
I thought the server may have some error, so I restarted. I still get error.
Another thing I can think of is the confit with bootstrap..
The following is the head part of layout.html
<head>
<title>NR</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
{{response.files.append(URL('static','css/bootstrap.min.css'))}}
{{response.files.append(URL('static','css/style.css'))}}
{{include 'web2py_ajax.html'}}
</head>
Actually, I do have a solution...
If I create css file with different name, and copy and paste all css work, it work!!
However, this takes extra work... create new css file and copy and paste.... It is not good way.
Can you help me?
Thank you
Perhaps your web server is configured to set the HTTP response headers so the assets will be cached by the browser (in which case, they will not be re-sent on every request). If this is just a development issue, you can simply force your browser to reload all assets (e.g., by pressing CTRL-F5).
For a more general solution, see the documentation on static asset management.
Another option is to let web2py serve the static content itself, in which case, the assets will be re-requested with each page and web2py will return 304 responses if the assets have not changed since last sent.
I'm creating a Meteor application. When first creating application, Meteor has put this sample code in hello.html
<head>
<title>hello</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
<template name="hello">
Hello World Template
</template>
I install Iron-Router package. then here is my lib/Router.js file:
Router.route('/', function () {
this.render('post_template');
});
And here is my client/templates/posts/post_template.html
<template name="post_template">
Example Template
</template>
I don't know why when I run this application. The result is:
HelloWorld Template
Example Template
In other word, which part of Meteor's configuration that load hello.html as default page, and then append all other templates in routing inside ?
Thanks :)
In this case the very first Meteor loads is the
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
Since you are calling there the hello template, thats the first you get on the screen.
I reccomend on this case use the layout template and remove the <body> tag
So first declare the route.
Router.configure({
layoutTemplate:'layout'
})
delete the <body> and <head> tags and place this layout template instead.
<template name="layout">
<navbar>
<!-- This stuff will be available on all routes since you are declaring on the layout template -->
</navbar>
{{> yield}} <!-- this yield helper will render the post_template or any other -->
</template>
For example
If you have this 2 routes.
Router.route('/', function () {
this.render('post_template');
});
Router.route('/example', function () {
this.render('example');
});
What happened here, when you go through the / route, iron router will render the 'post_template' html into the layout template, and when you navigate to /example, iron router will remove the post_Template html and render the content inside /example template, if you want to have the same content on all pages, declare it on the <layout> template i.e footers,navbars, etc
The layout template its like the "master" template here.
IR will append to the <body> if it exists (and otherwise add one for you) so it's recommended that you remove the entire <body> tag.
You are actually safe to remove the hello.html entirely (since you also don't need the hello template). If you want to keep the head tag, you could just modify the file to look like:
<head>
<title>hello</title>
</head>
To understand why hello.html is being included, see the Structuring your application section of your docs:
HTML files in a Meteor application are treated quite a bit differently from a server-side framework. Meteor scans all the HTML files in your directory for three top-level elements: <head>, <body>, and <template>. The head and body sections are separately concatenated into a single head and body, which are transmitted to the client on initial page load.
So all of your html files are always included. If you don't want to include them, you need to remove them from your app.
I've got a very simple template problem going on that appears to be similar to this guy's problem, though I've tried to build a simple example to demonstrate the problem and hopefully have someone explain to me how to fix or work around it.
Although as I'm doing some online research, it may be that the official documentation is out of date with the code. The reason I haven't bought into accepting that just yet is that the problem seems to have existed for a while, the dates on such articles in forums appears to be fairly old, and there's talk of it being fixed. There's also talk the feature is gone. What's the new way, if there is one?
I'm using Meteor 0.9.0.1 with iron:router 0.9.1. Specifically, I set up my project like this:
$ meteor create ironTest
$ cd ironTest
$ meteor add iron:router
$ meteor
Pointing my browser at http://localhost:3000/ as instructed, shows the default project. So far so good.
Now make ironTest.html contain this:
<body>
<h1>Before</h1>
{{renderRouter}}
<h2>Afterward</h2>
</body>
<template name="hello">
Hello Template
</template>
<template name="goodbye">
Goodbye Template
</template>
Make ironTest.js contain this:
Router.configure({
autoRender: true // we will experiment with this Boolean shortly
});
Router.map(function () {
this.route('hello');
this.route('goodbye');
});
If you go to the routes http://localhost:3000/hello and http://localhost:3000/goodbye, you'll see the templates correctly render as expected and documented, appended to the <body> element, so it appears after the <h2> element.
According to the current documentation for iron:router, one should be able to set the autoRender property to false, and the template should no longer be appended to the <body> element, but rather be injected where the Handlebars (okay, Spacebars) element {{renderRouter}} is, that is, between the <h1> and <h2> elements.
When I try this, visually it doesn't do anything. Opening a JavaScript Console to look at errors shows none. Although, by deliberately going to an invalid route it will show a missing template router exception, showing the routing code is indeed working.
Does anyone know how to coerce the code above into working?
For the curious, I've got a working simplistic equivalent that might be of use to others working this problem.
This new ironTest.html uses a template (for a layout) with no <body>:
<template name="main">
<h1>Before</h1>
{{> yield}}
<h2>Afterward</h2>
</template>
<template name="hello">
Hello Template
</template>
<template name="goodbye">
Goodbye Template
</template>
This ironTest.js instead uses a layout:
Router.configure({
layoutTemplate : 'main'
});
Router.map(function () {
this.route('hello');
this.route('goodbye');
});
It's worth an aside that this solution doesn't work for me, as I don't want a global layout, and have concern that riddling layouts in the route themselves is a tighter coupling than desired for my purposes.
I'm currently looking for a way to dump debugging log information from the Router as it performs transitions, but that's another story.
I'm attempting to teach myself ASP.Net and I've decided to start with web pages so I'm going through the tutorial here
The problem I'm running into is that I can't get the Twitter helper to work. I just get a blank page and can't figure out what the issue is. I have checked to make sure the Twitter helper is installed and intellsense recognizes the TwitterGoodie methods. Here is my code...
#{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>twittertest</title>
</head>
<body>
<div>
#TwitterGoodies.Search("webmatrix")
</div>
</body>
</html>
The package referenced in the article you linked to uses version 1.0 of the Twitter API which was deprecated in June 2013. Hence nothing appears on your page. If you want a Twitter widget to appear on a page, go and get one directly from them: https://twitter.com/settings/widgets/new