What do I do to eliminate the double code that's happening?
In about.html.erb I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails Tutorial Sample App | <%= #title %></title>
</head>
<body>
<h1>Pages#about</h1>
<p>Find me in app/views/pages/about.html.erb</p>
</body>
</html>
In the browser at localhost:3000/pages/about
<!DOCTYPE html>
<html>
<head>
<title>SampleApp</title>
<link href="/stylesheets/application.css" media="all" rel="stylesheet" type="text/css" />
<script src="/javascripts/application.js" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="ra/NXpqBo1ccudzQ2HGHoo3OrZB2bLX732MQl+EJHU4=" name="csrf-token" />
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails Tutorial Sample App | About</title>
</head>
<body>
<h1>Pages#about</h1>
<p>Find me in app/views/pages/about.html.erb</p>
</body>
</html>
</body>
</html>
The duplicate is part of app/views/layouts/application.html.erb
Related
I have a fragment for the head tag, and from within this I would like to call another fragment for my styles and scripts.
templates/fragments/commonHead.html
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="commonHead(title)">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div th:replace="~{fragments/styles :: styles}"></div>
<div th:replace="~{fragments/scripts :: scripts}"></div>
<title th:text="${title}"></title>
</head>
templates/fragments/styles.html
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="styles" th:remove="tag">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<link type="text/css" th:href="#{/css/normalize.css}" rel="stylesheet"/>
<link type="text/css" th:href="#{/css/style.css}" rel="stylesheet"/>
</div>
templates/fragments/scripts.html
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="scripts" th:remove="tag">
<script src="https://cdn.jsdelivr.net/npm/axios#1.1.3/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</div>
And this is how I am calling the common head fragment.
templates/schedule.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/commonHead :: commonHead('Schedule')}"></head>
<body>
----
But when I do this, there are no errors, but the generated html does not complete the head tag. There must be some issue, but I have no indication what is wrong. Is it not possible to do this? I have tried both with <div th:replace="~{fragments/styles :: styles}"></div> and <div th:replace="~{styles :: styles}"></div> (same for scripts) in case it doesn't need the directory when the fragment is in the same folder.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
EDIT:
After further troubleshooting here, it seems like it is completely overlooking the fragments in commonHead. If I intentionally call something with the wrong name (like <div th:replace="~{fragmentsX/stylesX :: stylesX}"></div>) I get no errors, and of course the fragment is not included.
It seems like the issue was with having the head tag in my commonHead fragment. When I changed that to div (with th:remove="tag" so that the div didn't show up in the html), then it worked fine.
Only change was made to templates/fragments/commonHead.html, final version is below.
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="commonHead(title)" th:remove="tag">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div th:replace="~{fragments/styles :: styles}"></div>
<div th:replace="~{fragments/scripts :: scripts}"></div>
<title th:text="${title}"></title>
</div>
I added open graph meta tags to my thymeleaf page.
When I try to share my page - it looks like tags absent.
My page (partially) code
<!DOCTYPE html>
<html lang="ru" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
prefix="og: //ogp.me/ns#">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link th:href="#{/css/app.css}" rel="stylesheet"/>
<title th:text="${'pageTitle'}">Title</title>
<meta property="og:type" content="article" />
<meta property="og:url" th:content="${'https://my_site_url'}" />
<meta property="og:title" th:content="${'pageTitle'}" />
<meta property="og:description" th:content="${'DESCRIPTION'}" />
<meta property="og:image" th:content="#{'https://pp.vk.me/c629531/v629531034/3172e/xEBYyER1WE4.jpg'}" />
</head>
<body>
<section class="base fullpage">
<div class="fullpage__content">
<div th:replace="component/partial/header"/>
<div th:replace="${page}"/>
</div>
<div class="fullpage__bottom">
<div th:replace="component/partial/footer"/>
</div>
</section>
<div th:replace="component/auth/auth"/>
</body>
</html>
And my share page button
<a th:href="#{'https://twitter.com/share?url=' + ${full_my_Page_Url}}" rel="canonical" target="_blank" class="c-article-socials__link twitter-share-button">
<div class="icon">
<img th:src="#{/img/icons/social/tw-h.svg}" alt="">
</div>
</a>
I expected share preview card if full by open graph tags, but now it is empty, I can share, but haven't information. Only the link from the share button, but no info from og prefix info
UPDATES
My generated HTML head code looks like:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/app.css" rel="stylesheet">
<title>Статья</title>
<meta property="og:type" content="website">
<meta property="og:url"content="https://localhost:8443/articles/instruction/2">
<meta property="og:title" content="Статья">
<meta property="og:description" content="DESCRIPTION">
<meta property="og:image" content="/cmsstatic/img/posts/image_5.png">
</head>
I have integrated my angular project with ASP.NET MVC. I want to redirect my MVC page to angular route on first load. I have following code in my Index.cshtml page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Myapp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="skin-blue sidebar-mini wysihtml5-supported">
<app-root></app-root>
<script type="text/javascript" src="~/Scripts/client/runtime.js"></script>
<script type="text/javascript" src="~/Scripts/client/polyfills.js"></script>
<script type="text/javascript" src="~/Scripts/client/styles.js"></script>
<script type="text/javascript" src="~/Scripts/client/vendor.js"></script>
<script type="text/javascript" src="~/Scripts/client/main.js"></script>
</body>
</html>
I also have the index.html page configurations in angular index page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Myapp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>
<div class="wrapper">
</div>
</app-root>
</body>
</html>
Now I need to redirect the page from here to angular route where login route is defined for angular.
{ path: 'login', component: LoginComponent },
You have everything needed for Angular to run from your cshtml file. No need for index.html file.
Try to add this to your route config.
{path:'', redirectTo:'login', pathMatch: 'full' }
Once you add this Angular should redirect to login route by default.
I want to display an icon before the list for which i had used like.
Not sure if the below is supported for Angular2.
The below module 'MaterialModule' is not required i guess, cause after removing it is working for me.
If i import this module, i get: no exported 'MaterialModule'!
app.module.ts //Not required to import here
import {MaterialModule} from '#angular/material';
imports: [
MaterialModule
...
index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
test.component.html
<md-list-item routerLink="2" routerLinkActive="active">
<md-icon md-list-icon>face</md-icon> <!--Icon not displaying here!-->
<div fxFlex="10"></div>
<div *ngIf="sidenavWidth > 6" class="sidenav-item">
<a *ngFor="let cat of categories; let i = index" href="javascript:; " class="list-group-item " (click)="getProducts(cat._id,i)">{{cat.category_name}}</a>
</div>
</md-list-item>
my \src\index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Food4Smiles</title>
<base href="/">
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/static/hmicon.png">
</head>
<body>
<app-root></app-root>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
UPDATED ANSWER:
index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
test.component.html
<md-list-item routerLink="2" routerLinkActive="active">
<md-icon md-list-icon>face</md-icon> <!--Icon not displaying here!-->
<div fxFlex="10"></div>
<div *ngIf="sidenavWidth > 6" class="sidenav-item">
<a *ngFor="let cat of categories; let i = index" href="javascript:; " class="list-group-item " (click)="getProducts(cat._id,i)">{{cat.category_name}}
</a>
</div>
</md-list-item>
\src\index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Food4Smiles</title>
<base href="/">
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/static/hmicon.png">
</head>
<body>
<app-root></app-root>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I've got it working in all other browsers tested -- Mac Chrome & Firefox, but it fails in Safari. Here is the current source: http://eventchampion.heroku.com
<!DOCTYPE html>
<html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>EventChampion</title>
<meta name="google-site-verification" content="4ZMUXRmgofgl5Z8oVXF6RbhGNrwJkieaDhmqZOeU_Mw" />
<link href="/assets/application-1c9609bc58b1e77c196de29021583379.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/application-55cd299d6f8fe22d8853de1220f2c546.js" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="j8Q8B/apM+we+Kv8NK5bdN216GVpw6zIMYWNWQmHRt0=" name="csrf-token" />
</head>
<body>
<p class='notice'></p>
<p class='alert'></p>
<div id='janrainEngageEmbed'><a class="rpxnow" href="https://EventChampion.rpxnow.com/openid/v2/signin?token_url=%23%3Fauthenticity_token%3Dj8Q8B%252FapM%252Bwe%252BKv8NK5bdN216GVpw6zIMYWNWQmHRt0%253D">Sign In</a></div>
<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.haml</p>
<script src="https://rpxnow.com/openid/v2/widget" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
RPXNOW.token_url = 'http://eventchampion.heroku.com/users/sign_in?authenticity_token=j8Q8B%2FapM%2Bwe%2BKv8NK5bdN216GVpw6zIMYWNWQmHRt0%3D';
RPXNOW.realm = 'EventChampion';
RPXNOW.overlay = true;
//]]>
</script>
</body>
</html>
I changed a config setting from app_name = "AppName" to app_name = "appname" solved