Thymeleaf: Access Environment bean - html

I want to access the environment properties:
<h1 th:text="${#environment.getProperty('site.name1')}">
<span th:text="${#environment.getProperty('site.name2')}"></span>
</h1>
but I don't get anything for site.name2 even it exists in application.property file
here my application.properties file:
spring.h2.console.enabled=true
spring.h2.console.path=/h2-console
spring.h2.console.settings.trace=false
spring.h2.console.settings.web-allow-others=false
site.name1=plats
site.name2=bruts
spring.messages.encoding=UTF-8
spring.thymeleaf.encoding=UTF-8
spring.servlet.multipart.max-file-size=1000MB
spring.servlet.multipart.max-request-size=1000MB
spring.servlet.multipart.enabled=true
server.port=8080
This is how it looks using:
<h1>Plats
<span class="muellerhoff">Bruts</span>
</h1>
and with:
<h1>
<span th:text="${#environment.getProperty('site.name1')}"></span>
<br/>
<span class="muellerhoff" th:text="${#environment.getProperty('site.name2')}"></span>
</h1>

The end goal is HTML as follows:
<h1>Plats
<span class="muellerhoff">Bruts</span>
</h1>
You can use <th:block> in this case, to handle the name1 value. The block tag will not appear in the final HTML.
<h1>
<th:block th:text="${#environment.getProperty('site.name1')}"></th:block>
<span class="muellerhoff" th:text="${#environment.getProperty('site.name2')}"></span>
</h1>
More info about the th:block tag can be found here.

Related

Angular *ngFor problems on showing result

i'm trying to show tags from user, (example when user write #name).
my code in html is this.
<div *ngIf="tagsArr" style="display: flex;">
<p>
<span>Tags: </span>
</p>
<p *ngFor="let tag of tagsArr">
<span> {{tag}}, </span>
</p>
</div>
This is the code. and the result is like:
Tags: #name ,#name ,#name < / p >,
(without space)
Why the end tag of </p>, is displayed there?
I want to display the Tags like:
Tags: #name, #name, #name
it shouldn't show <p> may be you have a <p> string in tagsArr
it work fine on my device
.ts
tagsArr = ['#tag1, #tag2, #tag3' ,'#tag4' ]
.html
<div *ngIf="tagsArr">
<p>
<span>Tags: </span>
</p>
<p *ngFor="let tag of tagsArr">
<span> {{tag}}, </span>
</p>
</div>

How to add a link in the end of each element (string) from the list? Using Thymeleaf

I am fetching lines of text from the list one by one and I need to add a hyper link in the end of each line. Trying the code below, but link is not displayed.
<p th:each="releases : ${release}"
class="releases" th:text="${releases}" th:href="www.abc.com"> New Releases </p>
<p th:each="releases : ${release}"> <span class="releases" th:text="${releases.split('Spotify')[0]}">
New Releases </span> <a class="spoturl" th:href="${releases.split('URL:\s')[1]}"> Spotify URL </a> </p>
My solution
If you want to add a link to the end of each "release" string, you can use this:
<p th:each="releases : ${release}"
class="releases">
<span th:text="${releases}"></span>
<a th:href="#{www.abc.com/${rel}(rel=${releases})}"
th:text=" '[link]'"></a>
</p>
So, for example, if the items in the release list are Some_Release and Another_Release, you will get this:
Some_Release [link]
Another_Release [link]
Each link text will have a customized href.
Try this
<p th:each="releases : ${release}" th:href="www.abc.com"> <span class="releases" th:text="${releases}"> New Releases </span> </p>

Does typer.js allow ascii characters?

Comma is used as the delimiter in typer.js. I am trying to use the ascii code of , for a comma but to no avail.. A blank space appears.
Codepen: https://codepen.io/straversi/pen/yrLvmw
<h1>
It was <span
class="typer"
id="some-id"
data-words="dark,,stormy,,night,"
data-delay="100"
data-colors="#08605F,#177E89,purple">
</span>
<span style="font-size:1.2em;vertical-align:middle;" class="cursor" data-cursorDisplay="|" data-owner="some-id"></span>
</h1>
<button class="typer-stop" data-owner="some-id">Stop</button>
<button class="typer-start" data-owner="some-id">Start</button>
This will print a comma.. you need to encode it :)
<h1>
It was <span
class="typer"
id="some-id"
data-words="&#44;.,dark.,stormy.,night."
data-delay="100"
data-colors="#08605F,#177E89,purple">
</span>
<span style="font-size:1.2em;vertical-align:middle;" class="cursor" data-cursorDisplay="|" data-owner="some-id"></span>
</h1>
<button class="typer-stop" data-owner="some-id">Stop</button>
<button class="typer-start" data-owner="some-id">Start</button>
A comma encoded: &#44;
Some common symbols as encoded: HTML Entities
Read this: Is it possible to print a HTML entity in JS or PHP?
Let me know how you get on!

goquery- Extract text from one html tag and add it to the next tag

Yeah, sorry that the title explains nothing. I'll need to use an example.
This is a continuation of another question I posted which solved one problem but not all of them. I've put most of the background info from that question into this one. Also, I've only been looking into Go for about 5 days (and I only started learning code a couple months ago), so I'm 90% sure that I'm close to figuring out what I want and that the problem is that I've got some silly syntax mistakes.
Situation
I'm trying to use goquery to parse a webpage. (Eventually I want to put some of the data in a database). Here's what it looks like:
<html>
<body>
<h1>
<span class="text">Go </span>
</h1>
<p>
<span class="text">totally </span>
<span class="post">kicks </span>
</p>
<p>
<span class="text">hacks </span>
<span class="post">its </span>
</p>
<h1>
<span class="text">debugger </span>
</h1>
<p>
<span class="text">should </span>
<span class="post">be </span>
</p>
<p>
<span class="text">called </span>
<span class="post">ogle </span>
</p>
<h3>
<span class="statement">true</span>
</h3>
</body>
<html>
Objective
I'd like to:
Extract the content of <h1..."text".
Insert (and concatenate) this extracted content into the content of <p..."text".
Only do this for the <p> tag that immediately follows the <h1> tag.
Do this for all of the <h1> tags on the page.
Once again, an example explains ^this better. This is what I want it to look like:
<html>
<body>
<p>
<span class="text">Go totally </span>
<span class="post">kicks </span>
</p>
<p>
<span class="text">hacks </span>
<span class="post">its </span>
</p>
<p>
<span class="text">debugger should </span>
<span class="post">be </span>
</p>
<p>
<span class="text">called </span>
<span class="post">ogle</span>
</p>
<h3>
<span class="statement">true</span>
</h3>
</body>
<html>
Solution Attempts
Because distinguishing further the <h1> tags from the <p> tags would provide more parsing options, I've figured out how to change the class attributes of the <h1> tags to this:
<html>
<body>
<h1>
<span class="title">Go </span>
</h1>
<p>
<span class="text">totally </span>
<span class="post">kicks </span>
</p>
<p>
<span class="text">hacks </span>
<span class="post">its </span>
</p>
<h1>
<span class="title">debugger </span>
</h1>
<p>
<span class="text">should </span>
<span class="post">be </span>
</p>
<p>
<span class="text">called </span>
<span class="post">ogle </span>
</p>
<h3>
<span class="statement">true</span>
</h3>
</body>
<html>
with this code:
html_code := strings.NewReader(`
code_example_above
`)
doc, _ := goquery.NewDocumentFromReader(html_code)
doc.Find("h1").Each(func(i int, s *goquery.Selection) {
s.SetAttr("class", "title")
class, _ := s.Attr("class")
if class == "title" {
fmt.Println(class, s.Text())
}
})
I know that I can select the <p..."text" following the <h1..."title" with either doc.Find("h1+p") or s.Next() inside the doc.Find("h1").Each function:
doc.Find("h1").Each(func(i int, s *goquery.Selection) {
s.SetAttr("class", "title")
class, _ := s.Attr("class")
if class == "title" {
fmt.Println(class, s.Text())
fmt.Println(s.Next().Text())
}
})
I can't figure out how to insert the text from <h1..."title" to <p..."text". I've tried using quite a few variations of s.After(), s.Before(), and s.Append(), e.g., like this:
doc.Find("h1").Each(func(i int, s *goquery.Selection) {
s.SetAttr("class", "title")
class, _ := s.Attr("class")
if class == "title" {
s.After(s.Text())
fmt.Println(s.Next().Text())
}
})
but I can't figure out how to do exactly what I want.
If I use s.After(s.Next().Text()) instead, I get this error output:
panic: expected identifier, found 5 instead
goroutine 1 [running]:
code.google.com/p/cascadia.MustCompile(0xc2082f09a0, 0x62, 0x62)
/home/*/go/src/code.google.com/p/cascadia/selector.go:59 +0x77
github.com/PuerkitoBio/goquery.(*Selection).After(0xc2082ea630, 0xc2082f09a0, 0x62, 0x5)
/home/*/go/src/github.com/PuerkitoBio/goquery/manipulation.go:18 +0x32
main.func·001(0x0, 0xc2082ea630)
/home/*/go/test2.go:78 +0x106
github.com/PuerkitoBio/goquery.(*Selection).Each(0xc2082ea600, 0x7cb678, 0x2)
/home/*/go/src/github.com/PuerkitoBio/goquery/iteration.go:7 +0x173
main.ExampleScrape()
/home/*/go/test2.go:82 +0x213
main.main()
/home/*/go/test2.go:175 +0x1b
goroutine 9 [runnable]:
net/http.(*persistConn).readLoop(0xc208047ef0)
/usr/lib/go/src/net/http/transport.go:928 +0x9ce
created by net/http.(*Transport).dialConn
/usr/lib/go/src/net/http/transport.go:660 +0xc9f
goroutine 17 [syscall, locked to thread]:
runtime.goexit()
/usr/lib/go/src/runtime/asm_amd64.s:2232 +0x1
goroutine 10 [select]:
net/http.(*persistConn).writeLoop(0xc208047ef0)
/usr/lib/go/src/net/http/transport.go:945 +0x41d
created by net/http.(*Transport).dialConn
/usr/lib/go/src/net/http/transport.go:661 +0xcbc
exit status 2
(The lines of my script don't match the lines of the examples above, but "line 72" of my script contains the code s.After(s.Next().Text()). I don't know what exactly panic: expected identifier, found 5 instead means.)
Summary
In summary, my problem is that I can't quite wrap my head around how to use goquery to add text to a tag.
I think I'm close. Would any gopher Jedis be able and willing to help this padawan?
Something like this code does the job, it finds all <h1> nodes, then all <span> nodes inside these <h1> nodes, looking for one with class text. Then it gets the next element to the <h1> node, if it is a <p>, that has inside a <span>, then it replaces this last <span> with a new <span> with the new text and removes the <h1>.
I wonder if it's possible to create nodes using goquery without writing html...
package main
import (
"fmt"
"strings"
"github.com/PuerkitoBio/goquery"
)
var htmlCode string = `<html>
...
<html>`
func main() {
doc, _ := goquery.NewDocumentFromReader(strings.NewReader((htmlCode)))
doc.Find("h1").Each(func(i int, h1 *goquery.Selection) {
h1.Find("span").Each(func(j int, s *goquery.Selection) {
if s.HasClass("text") {
if p := h1.Next(); p != nil {
if ps := p.Children().First(); ps != nil && ps.HasClass("text") {
ps.ReplaceWithHtml(
fmt.Sprintf("<span class=\"text\">%s%s</span>)", s.Text(), ps.Text()))
h1.Remove()
}
}
}
})
})
htmlResult, _ := doc.Html()
fmt.Println(htmlResult)
}

HTML5 Microdata - itemref to another itemscope (Person works for Organization)

The website of an organization, say "Sun Industries", would like to add a list of employees. The address and contact information of the organization is already present at the webpage, but the list of employees would be somewhere else.
So we have
<div id="organization" itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">Sun Industries</span>,
<span itemprop="location" itemscope itemtype="http://schema.org/Place">
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Technologies Street 42</span>,
<span itemprop="addressLocality">Venustown</span>
<span itemprop="postalCode">98765</span>
</span>
</span>
</div>
and later on in the HTML5 code we will have
<div id="employee-1" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Doe</span>,
<span itemprop="jobTitle">Sales Manager</span>
</div>
How do we link the two objects "organization" and "employee-1" together?
I tried to add the following child to the "employee-1" object
<meta itemprop="worksFor" itemscope itemtype="http://schema.org/Organization" itemref="organization">
but that did not work (at least not in Google's Structured Data Testing Tool).
How can I use the microdata property itemref correctly in this case?
Just to be clear, I also tried the following:
Add itemprop="worksFor" to the "organization" object.
Add itemref="organization" to the "employee" object.
So
<div id="organization" itemprop="worksFor" itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">Sun Industries</span>,
...
</div>
...
<div id="employee-1" itemscope itemtype="http://schema.org/Person" itemref="organization">
<span itemprop="name">John Doe</span>,
<span itemprop="jobTitle">Sales Manager</span>
</div>
but that gave me a Warning: Page contains property "worksfor" which is not part of the schema. for the "organization" object.
Well, actually your last code snippet looks fine.
Maybe with Yandex Validator the output will be more clear
person
itemType = http://schema.org/Person
worksfor
organization
itemType = http://schema.org/Organization
name = Sun Industries
name = John Doe
jobtitle = Sales Manager
Couple of other working examples.
<body>
<div id="organization" itemscope itemtype="http://schema.org/Organization" itemref="employee-1">
<span itemprop="name">Sun Industries</span>,
<span itemprop="location" itemscope itemtype="http://schema.org/Place">
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Technologies Street 42</span>,
<span itemprop="addressLocality">Venustown</span>
<span itemprop="postalCode">98765</span>
</span>
</span>
</div>
<div id="employee-1" itemprop="employee" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Doe</span>,
<span itemprop="jobTitle">Sales Manager</span>
</div>
</body>
Gives the following:
organization
itemType = http://schema.org/Organization
employee
person
itemType = http://schema.org/Person
name = John Doe
jobtitle = Sales Manager
name = Sun Industries
location
place
itemType = http://schema.org/Place
address
postaladdress
itemType = http://schema.org/PostalAddress
streetaddress = Technologies Street 42
addresslocality = Venustown
postalcode = 98765
Or this
<body>
<div id="employee-1" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Doe</span>,
<span itemprop="jobTitle">Sales Manager</span>
<meta itemprop="worksFor" itemscope itemtype="http://schema.org/Organization" itemref="organization">
</div>
<div id="organization">
<span itemprop="name">Sun Industries</span>,
<span itemprop="location" itemscope itemtype="http://schema.org/Place">
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Technologies Street 42</span>,
<span itemprop="addressLocality">Venustown</span>
<span itemprop="postalCode">98765</span>
</span>
</span>
</div>
</body>
That results in
person
itemType = http://schema.org/Person
name = John Doe
jobtitle = Sales Manager
worksfor
organization
itemType = http://schema.org/Organization
name = Sun Industries
location
place
itemType = http://schema.org/Place
address
postaladdress
itemType = http://schema.org/PostalAddress
streetaddress = Technologies Street 42
addresslocality = Venustown
postalcode = 98765
Spec is not very clear about using itemref but example helps
<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
<p>Band: <span itemprop="name">Jazz Band</span></p>
<p>Size: <span itemprop="size">12</span> players</p>
</div>
Your last example is correct.
(Google’s testing tool no longer gives the mentioned error. Back then they were probably not up to date with new additions to the Schema.org vocabulary.)
Specification
Links to the itemref specifications:
W3C’s Microdata (Note): itemref
WHATWG’s HTML (Living Standard): Microdata: itemref
tl;dr:
You specify itemref on the element (with itemscope) to which you want to add properties.
You specify id on the element (with itemprop) which you want to add.
Examples
A minimal example:
<div itemprop="worksFor" itemscope itemtype="http://schema.org/Organization" id="org">
<!-- this property (worksFor) gets added to the Person item below -->
</div>
<div itemscope itemtype="http://schema.org/Person" itemref="org">
<!-- looks for the element with the ID "org" -->
</div>
This is equivalent to:
<div itemscope itemtype="http://schema.org/Person">
<div itemprop="worksFor" itemscope itemtype="http://schema.org/Organization">
</div>
</div>
Other examples:
adding meta elements from the head
adding the property specified on the body element to elements that are children of that body
adding an Event to an Action
adding a name property from a child item to the parent item
add a property that is a child of an Offer item to the parent Product item instead of the Offer
adding breadcrumb to WebPage
adding the Hotel as a branchOf an Organization
adding several related products to a Product
adding the Product to an Offer
two examples of relating Event items: either via superEvent or via subEvent
To keep in mind
The itemref attribute can only be used for elements in the same document.
You can reference multiple elements from one itemref attribute (separate the ID tokens with space characters).
The referenced element may be a container for multiple properties.
You have to make sure that the referenced elements are not children of an element with itemscope, otherwise their properties will also be added to this item (but you can circumvent this by adding a dummy itemscope).
There are 2 ways to links schema data together.
itemid: Link 2 complete objects (ie Organisation & Person)
itemref: Link 1 complete object to 1 incomplete object (ie Article & Comments)
1st one is easy. All you do is add the itemid property onto item you wish to link and add a link on other item:
<div itemid='#org' itemscope itemType='http://schema.org/Organization'>
<!-- ..... -->
</div>
<article itemscope itemType='http://schema.org/Article'>
<link itemprop='publisher' href='#org'>
</article>
Second one is not so easy. What if the comments for your blog post are somewhere far away. How do you connect them to your blog post? You can create an empty item with an id and then connect it to your blog post like so:
<div id="comments" itemscope>
<span itemprop="commentCount">0</span>
</div>
<div id="words" itemscope>
<span itemprop="wordCount">0</span>
</div>
We don't need to give comments an itemType. All we need is to add itemscope. This way we get no validation errors. Now we can link the comments back to blog post like so:
<div itemscope itemtype="http://schema.org/BlogPosting" itemref="comments words">
<!-- .... -->
</div>
Tada! We even managed to import wordCount as well.