Skip to content
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.

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

CMS Blog Posts, CMS Application Types, set up Unit Tests #123

Merged
merged 14 commits into from
Nov 21, 2023

Conversation

adamjarling
Copy link
Member

@adamjarling adamjarling commented Nov 20, 2023

What does this do?

@heathergreerklein So there is a LOT in this PR. Please don't merge it (I'll handle that after @mathewjordan puts some eyes on it for a sanity check). Also we should go over what content has now moved to Contentful. Maybe we can do a quick chat this week via Slack?

Essentially if you log into Contentful, you'll now see BlogPost entries, and this is where you should enter new Blog Posts (News and Event postings) from this point forward.

And now back to what this PR does:

  1. Creates new UI display to render Blog Posts which are fed from the Contentful CMS
  2. Renders existing Markdown "News" page .md files in the new Blog Post UI
  3. Adds Blog Posts (ie. News and Events) to the samvera.org homepage
  4. Creates new UI to render "Application Types" on the home page. Previously this was a slider (not great for accessibility), and a cleaner look using TailwindUI components
  5. Wires up Jest unit tests into the app, with a starter pattern for how to test a component, and mock data.
  6. Adds Unit Tests to Continuous Integration pipeline in Github Actions

Home page screen shot

image

New Application Types UI on homepage (replaces the slider)

image

Application Types New page

image

Update Community Banner on homepage

image

Updated News and Events page

image

Individual News and Event (Blog) page

image

To run tests (if you're a dev and comfortable with this), on the command line, run:

pnpm run test

And notice here that Github Actions are now running tests on PRs to main branch (this PR is first time):

https://github.com/samvera/samvera.org/actions

@adamjarling adamjarling force-pushed the 118-blog-post-cms branch 2 times, most recently from 98b137c to 4886974 Compare November 21, 2023 14:51
Copy link
Member

@mathewjordan mathewjordan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see some small changes to improve the head elements throughout but otherwise it looks pretty solid to me!

@@ -30,7 +30,6 @@ export default function UserProfilesPage({ config, content, frontmatter }) {

fetchData();
}, [contentful]);
console.log("userProfiles", userProfiles);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be removed?

pages/_app.js Outdated
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The og: data looks good in the head, but pages seem to be missing a title tag.

What about hard feeding it as:

<Head>
  <title>{ogData["og:title"]}</title>
  {/* Add Open Graph <meta></meta> tags here */}
  {Object.keys(ogData).map((key) => (
    // @ts-ignore
    <meta property={key} content={ogData[key]} key={key} />
  ))}
</Head>

</Main>
</Layout>
);
}

export async function getStaticProps() {
const { previews } = getNewsPreviews();
const subsetOfPreviews = previews.slice(0, 30);

const blogPosts = await getBlogPosts();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const blogPosts = await getBlogPosts();
const blogPosts = await getBlogPosts();
const openGraphData = {
"og:title": "News and Events - Samvera",
"og:description":
"Learn about the latest News and Events in the Samvera Community.",
};


return {
props: { previews },
props: { blogPosts, previews: subsetOfPreviews },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
props: { blogPosts, previews: subsetOfPreviews },
props: { blogPosts, previews: subsetOfPreviews, openGraphData },

Since this is the coming as index.jsx page, perhaps we should hardset these openGraphData values as well? Otherwise it seems to fall back to homepage values.

@adamjarling
Copy link
Member Author

adamjarling commented Nov 21, 2023

Good call here @mathewjordan I'm updating OpenGraph data in other core pages as well. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants