Skip to content
Permalink
Browse files

recent posts implementation

  • Loading branch information...
erzr committed Mar 1, 2019
1 parent c548cbe commit ab3f904acd31578e9866f1ab315db88ebb69282e
@@ -1,4 +1,5 @@
id: header-content
displayName: HeaderContent
componentName: Header
fields:
title: Adam Lamarre
@@ -0,0 +1,4 @@
template: Article-Template
fields:
title: Test Article
body: <p>This is test body text.</p>
@@ -1,2 +1,4 @@
id: page-business
template: ListingPage-Template
template: ListingPage-Template
fields:
title: Business
@@ -1,2 +1,4 @@
id: page-culture
template: ListingPage-Template
template: ListingPage-Template
fields:
title: Culture
@@ -1,2 +1,4 @@
id: page-design
template: ListingPage-Template
template: ListingPage-Template
fields:
title: Design
@@ -1,2 +1,4 @@
id: page-health
template: ListingPage-Template
template: ListingPage-Template
fields:
title: Health
@@ -1,2 +1,4 @@
id: page-opinion
template: ListingPage-Template
template: ListingPage-Template
fields:
title: Opinion
@@ -1,2 +1,4 @@
id: page-politics
template: ListingPage-Template
template: ListingPage-Template
fields:
title: Politics
@@ -1,2 +1,4 @@
id: page-science
template: ListingPage-Template
template: ListingPage-Template
fields:
title: Science
@@ -1,5 +1,5 @@
id: github-featured-link
templateName: FeaturedLink-Template
template: FeaturedLink-Template
fields:
link:
href: https://github.com/erzr/
@@ -1,5 +1,5 @@
id: sitecore-featured-link
templateName: FeaturedLink-Template
template: FeaturedLink-Template
fields:
link:
href: https://www.sitecore.com/
@@ -1,2 +1,4 @@
id: page-style
template: ListingPage-Template
template: ListingPage-Template
fields:
title: Style
@@ -1,2 +1,4 @@
id: page-technology
template: ListingPage-Template
template: ListingPage-Template
fields:
title: Technology
@@ -1,2 +1,4 @@
id: page-travel
template: ListingPage-Template
template: ListingPage-Template
fields:
title: Travel
@@ -1,2 +1,4 @@
id: page-us
template: ListingPage-Template
template: ListingPage-Template
fields:
title: US
@@ -1,2 +1,4 @@
id: page-world
template: ListingPage-Template
template: ListingPage-Template
fields:
title: World
@@ -120,6 +120,7 @@
<queries hint="raw:AddQuery">
<!-- enable querying on items via this API -->
<query name="item" type="Sitecore.Services.GraphQL.Content.Queries.ItemQuery, Sitecore.Services.GraphQL.Content" />
<query name="search" type="Sitecore.Services.GraphQL.Content.Queries.SearchQuery, Sitecore.Services.GraphQL.Content" />
</queries>

<fieldTypeMapping ref="/sitecore/api/GraphQL/defaults/content/fieldTypeMappings/standardTypeMapping" />
@@ -9,6 +9,10 @@ import { Manifest } from '@sitecore-jss/sitecore-jss-manifest';
*/
export default function addPlaceholdersToManifest(manifest) {
manifest.addPlaceholder(
{ name: 'jss-main', displayName: 'Main' }
{ name: 'jss-main' },
{ name: 'jss-row-5050-left' },
{ name: 'jss-row-5050-right' },
{ name: 'jss-row-7525-left' },
{ name: 'jss-row-7525-right' }
);
}
@@ -0,0 +1,12 @@
// eslint-disable-next-line no-unused-vars
import { CommonFieldTypes } from '@sitecore-jss/sitecore-jss-manifest';

export default function(manifest) {
manifest.addTemplate({
name: 'Article-Template',
fields: [
{ name: 'title', type: CommonFieldTypes.SingleLineText },
{ name: 'body', type: CommonFieldTypes.RichText }
],
});
}
@@ -9,23 +9,7 @@ import './assets/app.css';

const Layout = ({ route }) => (
<React.Fragment>
{/* react-helmet enables setting <head> contents, like title and OG meta tags */}
<Helmet>
<title>
{(route.fields && route.fields.pageTitle && route.fields.pageTitle.value) || 'Page'}
</title>
</Helmet>

{/*
VisitorIdentification is necessary for Sitecore Analytics to determine if the visitor is a robot.
If Sitecore XP (with xConnect/xDB) is used, this is required or else analytics will not be collected for the JSS app.
For XM (CMS-only) apps, this should be removed.
VI detection only runs once for a given analytics ID, so this is not a recurring operation once cookies are established.
*/}
<VisitorIdentification />

{/* root placeholder for the app, which we add components to using route data */}
<div className="container">
<Placeholder name="jss-main" rendering={route} />
</div>
@@ -15,8 +15,8 @@ let HeaderTop = ({ title }) => (
let HeaderNavigation = ({ navLinks }) => (
<div className="nav-scroller py-1 mb-2">
<nav className="nav d-flex justify-content-between">
{navLinks.value.map((listItem, index) => (
<Link to={"/" + listItem.name} className="p-2 text-muted" key={index}>{listItem.name}</Link>
{navLinks.map((listItem, index) => (
<Link to={"/" + listItem.fields.title.value} className="p-2 text-muted" key={index}>{listItem.fields.title.value}</Link>
))}
</nav>
</div>
@@ -1,9 +1,13 @@
import React from 'react';
import PostListingItem from '../PostListingItem';

const PostListing = (props) => (
const PostListing = ({posts}) => (
<div>
<PostListingItem />
{
posts.map(post => (
<PostListingItem post={post} />
))
}
</div>
);

@@ -1,37 +1,13 @@
import React from 'react';
import { Text, RichText } from '@sitecore-jss/sitecore-jss-react';

const PostListingItem = (props) => (
<div class="blog-post">
<h2 class="blog-post-title">Sample blog post</h2>
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>

<p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
const PostListingItem = ({ post }) => (
<div className="blog-post">
<h2 className="blog-post-title">
<Text field={post.item.title} editable={false} />
</h2>
<hr />
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<h2>Heading</h2>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<pre><code>Example code block</code></pre>
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
<ol>
<li>Vestibulum id ligula porta felis euismod semper.</li>
<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
</ol>
<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
<RichText field={post.item.body} editable={false} />
</div>
);

@@ -1,11 +1,47 @@
import React from 'react';
import gql from "graphql-tag";
import { Query } from "react-apollo";
import { Text } from '@sitecore-jss/sitecore-jss-react';
import PostListing from '../PostListing';

const GET_RECENT_POSTS = gql`
{
search(fieldsEqual:[{
name:"_templatename"
value:"Article-Template"
},
{
name:"_fullpath"
value:"/sitecore/content/blog*"
}]) {
results {
items {
item {
... on ArticleTemplate {
title {
value
}
body {
value
}
}
}
}
}
}
}
`;

const RecentPosts = (props) => (
<div>
<PostListing />
</div>
<Query query={GET_RECENT_POSTS}>
{({ loading, error, data }) => {
if (loading) return "Loading...";
if (error) return `Error! ${error.message}`;
return (
<PostListing posts={data.search.results.items} />
);
}}
</Query>
);

export default RecentPosts;

0 comments on commit ab3f904

Please sign in to comment.
You can’t perform that action at this time.