Skip to content

(#5025) Blog Post Mock HTML #2091

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
karlikpj wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft

(#5025) Blog Post Mock HTML #2091

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions testing/ncids-css-testing/src/stories/templates/blog-posts/archive.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<div class="cgdp-blog-archive">
<div class="usa-accordion" data-open-sections="1">
<h4 class="usa-accordion__heading">
<button class="usa-accordion__button" type="button" aria-expanded="true">Archive</button>
</h4>
<div class="usa-accordion__content">
<ul class="usa-list">
{% for item in archive %}
<li{% if item.isSelected == true %} class="usa-list__selected" {% endif %}>
<a href="#{{ loop.index }}" class="usa-link">{{ item.date }}&nbsp;<span class="cgdp-blog-archive__total">({{ item.total }})</span></a></li>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
114 changes: 114 additions & 0 deletions testing/ncids-css-testing/src/stories/templates/blog-posts/blog-center-content.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<article>
{# blog title #}
{% if title %}
<h1 class="nci-heading-h1">{{ title }}</h1>
{% endif %}

<div class="cgdp-blog-post-info">

{# blog subscribe link #}
{% if blog_subscribe %}
<a href="#urlTest" class="usa-link cgdp-blog-post-info__subscribe">{{ blog_subscribe }}</a>
{% endif %}

{# blog by line and publish date #}
{% if blog_byline %}
<p class="cgdp-blog-post-info__publishing-info">
<time datetime="2025-01-15T12:00:00Z">{{ publish_date }}</time>
,{{ blog_byline }}
</p>
{% endif %}

</div>

<div
class="cgdp-inner-content-area">

{# blog lead image #}
{% if field_image_article %}
<div class="cgdp-field-image-article">
{{ field_image_article }}
</div>
{% endif %}

{# blog intro text area #}
{# docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/field/field--node--field-intro-text.html.twig #}
{% if field_intro_text %}
<div class="cgdp-field-intro-text">
<div class="usa-prose">
{{ field_intro_text }}
</div>
</div>
{% endif %}

<div class="cgdpl">
<div class="contentzone">
<div
id="cgvBody">
{# blog body copy #}
{% if body %}
{{ body }}
{% endif %}
</div>
</div>
</div>
</div>

<footer
class="cgdp-article-footer">
{# citations #}
<div class="cgdp-article-footer-citation usa-accordion usa-accordion--multiselectable" data-allow-multiple="" data-open-sections="0">
<div>
<h2 class="nci-heading-h2">Selected References</h2>
<ol>
{% for item in field_citation %}
<li id="r{{ loop.index }}">
{{ item }}
</li>
{% endfor %}
</ol>
</div>
</div>

{# related resources #}
<aside class="cgdp-related-resources usa-accordion usa-accordion--multiselectable" data-allow-multiple="" data-open-sections="0">
<h2 class="nci-heading-h2">Related Resources</h2>
<ul class="usa-list usa-list--unstyled">
{% for item in field_related_resources %}
<li>
<a class="usa-link" href="#" data-list-item-type="cgov_internal_link">{{ item }}</a>
</li>
{% endfor %}
</ul>
</aside>

{# blog pagination #}
<div class="cgdp-blog-pager clearfix">

<div class="cgdp-blog-pager--older">
<a class="usa-link" href="urlOlderPost">&lt; Older Post</a>
<p>
<i>Study Aims to Reduce Lung Cancer Stigma by Teaching Health Professionals Empathy</i>
</p>
</div>

<div class="cgdp-blog-pager--newer">
<a class="usa-link" href="urlNewerPost">Newer Post &gt;</a>
<p>
<i>Study Aims to Reduce Lung Cancer Stigma by Teaching Health Professionals Empathy</i>
</p>
</div>

</div>

{% include './feature-card-row.twig' with {
'cardImage': cardImage,
} %}

{# public use #}
{# docroot/profiles/custom/cgov_site/themes/custom/ncids_trans/templates/layout/regions/region--public_use.html.twig #}
<div class="cgdp-public-use">
{{ public_use }}
</div>
</footer>
</article>
119 changes: 119 additions & 0 deletions testing/ncids-css-testing/src/stories/templates/blog-posts/blog-images.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
import doctorA from './img/ostroff.jpg';
import doctorB from './img/banerjee.jpg';
import imageLead from './img/hug.jpg';
import placeHolder from './img/16x9_placeholder.png';
import headerImage from './img/series-header-image.jpg';

export const cardImage = `
<img loading="lazy" src="${placeHolder}" width="1408" height="792" alt="test ALT">
`;

export const leadImage = `
<div class="cgdp-embed-media-wrapper">
<div
data-caption=""
data-embed-button="media_entity_embed"
data-entity-embed-display="view_mode:media.image_display_article_medium"
data-entity-type="media"
data-entity-uuid="d5075051-6947-468c-88b2-3b1e9cbee4e4"
data-cgov-yaml-query-bundle="cgov_image"
data-cgov-yaml-query-name="Doctor Ostroff"
class="align-right embedded-entity cgdp-embed-image"
data-langcode="en"
data-entity-embed-display-settings="[]"
>
<div class="cgdp-image">
<figure>
<img
loading="lazy"
src="${imageLead}"
width="300"
height="300"
alt="Picture of doctor Ostroff."
/>

<figcaption class="cgdp-image__caption">
<div class="cgdp-image__caption-text">
<p>People diagnosed with lung cancer are often faced with the stigma of the disease's association with smoking, causing them to experience feelings of guilt and shame.</p>
</div>
<p class="cgdp-image__credit">Credit: iStock//nadia_bormotova</p>
</figcaption>
</figure>
</div>
</div>
</div>
`;

export const doctorAEmbed = `
<div class="cgdp-embed-media-wrapper">
<div
data-caption=""
data-embed-button="media_entity_embed"
data-entity-embed-display="view_mode:media.image_display_article_medium"
data-entity-type="media"
data-entity-uuid="d5075051-6947-468c-88b2-3b1e9cbee4e4"
data-cgov-yaml-query-bundle="cgov_image"
data-cgov-yaml-query-name="Doctor Ostroff"
class="align-right embedded-entity cgdp-embed-image"
data-langcode="en"
data-entity-embed-display-settings="[]"
>
<div class="cgdp-image">
<figure>
<img
loading="lazy"
src="${doctorA}"
width="300"
height="300"
alt="Picture of doctor Ostroff."
/>

<figcaption class="cgdp-image__caption">
<div class="cgdp-image__caption-text">
<p>Dr. Jamie Ostroff</p>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
`;

export const doctorBEmbed = `
<div class="cgdp-embed-media-wrapper">
<div
data-caption=""
data-embed-button="media_entity_embed"
data-entity-embed-display="view_mode:media.image_display_article_medium"
data-entity-type="media"
data-entity-uuid="d5075051-6947-468c-88b2-3b1e9cbee4e4"
data-cgov-yaml-query-bundle="cgov_image"
data-cgov-yaml-query-name="Doctor Banerjee"
class="align-right embedded-entity cgdp-embed-image"
data-langcode="en"
data-entity-embed-display-settings="[]"
>
<div class="cgdp-image">
<figure>
<img
loading="lazy"
src="${doctorB}"
width="300"
height="300"
alt="Picture of doctor Banerjee."
/>

<figcaption class="cgdp-image__caption">
<div class="cgdp-image__caption-text">
<p>Dr. Smita Banerjee</p>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
`;

export const seriesHeader = `
<img loading="lazy" src="${headerImage}" width="3333" height="890" alt="An illustrated banner to mark the 10-year anniversary of NCI's Cancer Currents research news blog. The design features interconnected scenes: a patient receiving care, a researcher in a lab, a tumor model, a laptop and mobile device displaying research articles, fitness activity, a clinical setting, and a researcher giving a scientific presentation. The foreground includes bold text that reads '10 Years of Cancer Research News. The background showcases rolling hills and abstract buildings.">
`;
Loading
Loading