jamie2
September 10, 2024, 1:12pm
1
When it comes from the api - last 4 symbols aren't getting bold, in fact we can clearly see the tag ends 4 symbols before it's supposed to. In CMS it displays perfectly fine.
<strong><em>Ahead of the UN General Assembly’s second-ever High-Level Meeting on antimicrobial resistance in September, 80 investors back statement from Investor Action on Antimicrobial Resistance (IA</strong>AMR)</em>
Already looked at the code and seems it comes as that from the api query
"dependencies": {
"apollo-link-prismic": "^1.1.2",
"graphql-type-json": "^0.3.2",
"js-cookie": "^3.0.5",
"vue": "^2.7.15",
"vue-apollo": "^3.1.1",
"vue-highlightjs": "^1.3.3",
"vue-meta": "^2.4.0",
"vue-router": "^3.6.5"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^5.0.8",
"@vue/cli-service": "^5.0.8",
"eslint-plugin-vue": "^9.18.1",
"graphql-tag": "^2.12.6",
"regenerator-runtime": "^0.14.0",
"remark-cli": "^12.0.0",
"sass": "^1.69.5",
"sass-loader": "^10.4.1",
"style-resources-loader": "^1.5.0",
"vue-cli-plugin-apollo": "~0.22.2",
"vue-cli-plugin-style-resources-loader": "~0.1.5",
"vue-template-compiler": "^2.7.15"
},
Phil
September 11, 2024, 4:16pm
3
Hi Jamie,
Can you check the API browser for your repo at:
https://your-repo-name.prismic.io/api/v2
We can confirm what's coming through the API and work from there.
Thanks.
jamie2
September 12, 2024, 9:34am
5
hey Phil,
how can I query a specific url?
https://fairr-amr2.prismic.io/api/v2
url: usd13-trillion-investors-call-on-global-leaders-to-tackle-antimicrobial-resistance-crisis
currently we have removed Italic from the first paragraph to not have this problem
Phil
September 12, 2024, 11:42am
6
So, this document is the first in the results here:https://fairr-amr2.prismic.io/api/v2/documents/search?ref=ZuBJ8hUAACIAZ7AI&src=apibrowser#format=json
The text that you talked about is highlighted here and the strong spans are applied to all 192 characters.
If you re-add the italics you can see if this issue is starting in the API or not.
jamie2
September 12, 2024, 1:38pm
7
hey Phil, span.
website seems to add two
A collaboration between the FAIRR Initiative, the Access to Medicine Foundation, the Principles for Responsible Investment, and the UK Government to galvanise investor efforts to address global antimicrobial resistance.
thanks a lot for helping to resolve this
Phil
September 12, 2024, 2:16pm
9
The API shows both now. We just needed to get the latest content.
Glad it's working
jamie2
September 12, 2024, 2:47pm
11
Oh the website is still making last 4 symbols not bold - so not sure where the issue lies
Phil
September 12, 2024, 3:00pm
12
It seems to be on the code side in that case can you share your code for this?
jamie2
September 12, 2024, 3:05pm
13
components/PrismicSlices.vue
<prismic-text
:key="`section${index}`"
v-if="section.__typename == `${queryNameCap}BodyText`"
:content="section"
/>
apollo: {
content: {
query() {
return gql`
query($uid: String!) {
${this.queryName}(uid: $uid, lang: "en-gb") {
body {
... on ${this.queryNameCap}BodyStandard_header {
primary {
header_tag
header_title
header_subtitle
header_background {
... on _ImageLink {
url
}
}
header_logo {
... on _ImageLink {
url
}
}
author_name
author_link {
... on Article {
_meta {
uid
}
}
... on _ExternalLink {
url
target
}
}
publish_date
}
}
... on ${this.queryNameCap}BodyRegister_header {
primary {
header_tag
header_title
header_subtitle
}
}
... on ${this.queryNameCap}BodyLanding_header {
primary {
header_tag
header_title
header_subtitle
header_background {
... on _ImageLink {
url
}
... on _FileLink {
url
}
}
}
fields {
founding_partner {
... on Founding_partner {
link {
... on Article {
_meta {
uid
}
}
... on _ExternalLink {
url
target
}
}
name
logo {
... on _ImageLink {
url
}
}
}
}
}
}
... on ${this.queryNameCap}BodyText {
primary {
text
}
}
... on ${this.queryNameCap}BodyFounding_partners {
primary {
founding_partners_title
}
fields {
founding_partner {
... on Founding_partner {
link {
... on Article {
_meta {
uid
}
}
... on _ExternalLink {
url
target
}
}
name
logo {
... on _ImageLink {
url
}
}
}
}
}
}
... on ${this.queryNameCap}BodyInvestor_partners {
primary {
investor_partners_title
}
fields {
investor_partner {
... on Investor_partner {
link {
... on Article {
_meta {
uid
}
}
... on _ExternalLink {
url
target
}
}
article {
... on Article {
_meta {
uid
}
}
}
name
logo {
... on _ImageLink {
url
}
}
}
}
}
}
... on ${this.queryNameCap}BodyUpdates_carousel {
primary {
updates_carousel_title
}
fields {
update {
... on Update {
type
date
author {
... on Founding_partner {
link {
... on Article {
_meta {
uid
}
}
... on _ExternalLink {
url
target
}
}
name
logo {
... on _ImageLink {
url
}
}
}
}
headline
link {
... on Article {
_meta {
uid
}
}
... on _ExternalLink {
url
target
}
}
background {
... on _ImageLink {
url
}
}
thumbnail {
... on _ImageLink {
url
}
}
}
... on Article {
_meta {
uid
lastPublicationDate
}
body {
... on ArticleBodyStandard_header {
primary {
header_title
header_background {
... on _ImageLink {
url
}
}
header_logo {
... on _ImageLink {
url
}
}
author_name
publish_date
}
}
}
}
}
}
}
... on ${this.queryNameCap}BodyVideo_gallery {
primary {
video_gallery_title
}
fields {
video {
... on Video {
video
}
}
}
}
... on ${this.queryNameCap}BodyPromo {
primary {
promo_title
promo_subtitle
promo_button_link {
... on Article {
_meta {
uid
}
}
... on Page {
_meta {
uid
}
}
... on _ExternalLink {
url
target
}
}
promo_button_text
promo_background {
... on _ImageLink {
url
}
}
}
}
... on ${this.queryNameCap}BodyHub {
fields {
hub_tag
}
}
... on ${this.queryNameCap}BodyTwitter_timeline {
primary {
title
handle
}
}
}
}
}
`;
},
jamie2
September 12, 2024, 3:08pm
14
components/PrismicText.vue:
<template>
<container>
<template v-for="(block, index) in parsedBlocks">
<div :key="index" v-if="block.type == 'image'" class="image">
<img :src="block.url" />
</div>
<ul :key="index" v-else-if="block.type == 'ul'">
<li
v-for="(item, itemIndex) in block.items"
:key="`${index}_${itemIndex}`"
v-html="item.text"
/>
</ul>
<ol :key="index" v-else-if="block.type == 'ol'">
<li
v-for="(item, itemIndex) in block.items"
:key="`${index}_${itemIndex}`"
v-html="item.text"
/>
</ol>
<h1 :key="index" v-else-if="block.type == 'heading1'">
{{ block.text }}
</h1>
<h2 :key="index" v-else-if="block.type == 'heading2'">
{{ block.text }}
</h2>
<h3 :key="index" v-else-if="block.type == 'heading3'">
{{ block.text }}
</h3>
<h4 :key="index" v-else-if="block.type == 'heading4'">
{{ block.text }}
</h4>
<h5 :key="index" v-else-if="block.type == 'heading5'">
{{ block.text }}
</h5>
<h6 :key="index" v-else-if="block.type == 'heading6'">
{{ block.text }}
</h6>
<p
:key="index"
v-else-if="block.type == 'paragraph'"
v-html="block.text"
></p>
<div :key="index" v-else v-html="block.text" />
</template>
</container>
</template>
<script>
import Container from "@/components/Container";
export default {
name: "PrismicText",
components: {
Container
},
props: {
content: {
type: Object,
default: () => {
primary: {
text: [];
}
}
}
},
computed: {
parsedBlocks() {
// This parses the text within each block, injecting markup from Prismic as defined in "spans"
const blocks = this.content.primary.text.map(block => {
if (block.spans && block.spans.length) {
// Reverse the spans since character indexes will change as we inject
block.spans.sort((a, b) => b.start - a.start);
block.spans.forEach((span, index) => {
let type, attrs;
if (span.type == "hyperlink") {
type = "a";
} else if (!block.type.startsWith("heading")) {
// no styling in headers since it's messy
type = span.type;
}
if (!type) {
return;
}
if (span.data) {
attrs = ` href="${span.data.url}" target="${
span.data.target || ""
}"`;
} else {
attrs = "";
}
block.text = [
block.text.slice(0, span.start),
`<${type}${attrs}>`,
block.text.slice(span.start, span.end),
`</${type}>`,
block.text.slice(span.end)
].join("");
delete block.spans[index]; // Prevent span being re-applied
});
}
return block;
});
// This finds list items and wraps them in a ul or ol
const grouped = [];
let subgroup = {};
blocks.forEach(block => {
if (block.type == "list-item") {
subgroup.type = "ul";
if (!subgroup.items) {
subgroup.items = [block];
} else {
subgroup.items.push(block);
}
} else if (block.type == "o-list-item") {
subgroup.type = "ol";
if (!subgroup.items) {
subgroup.items = [block];
} else {
subgroup.items.push(block);
}
} else {
if (Object.keys(subgroup).length) {
grouped.push(subgroup);
subgroup = {};
}
grouped.push(block);
}
});
if (
this.content.primary.text.length &&
["list-item", "o-list-item"].includes(
this.content.primary.text[this.content.primary.text.length - 1].type
)
) {
grouped.push(subgroup);
}
return grouped;
}
}
};
</script>
Phil
September 13, 2024, 11:56am
15
So, is this a custom Rich Text component you've built?
Is there any reason you're not using the rich text component from the @prismicio/vue package?
