frontity / step-by-step-tutorial Goto Github PK

In the step Formatting the date the final code makes use of "dayjs" to format the date

import React from "react"
import { connect } from "frontity"
import dayjs from "dayjs"

const Post = ({ state }) => {
  const data = state.source.get(state.router.link)
  const post = state.source[data.type][data.id]
  const author = state.source.author[post.author]

  const formattedDate = dayjs(post.date).format("DD MMMM YYYY")

  return (
    <div>
      <h2>{post.title.rendered}</h2>
      <p>
        <strong>Posted: </strong>
        {formattedDate}
      </p>
      <p>
        <strong>Author: </strong>
        {author.name}
      </p>
      <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
    </div>
  )
}

export default connect(Post)

but later, in the step Styling the post this date formatting piece of code does not appear

import React from "react"
import { connect, styled } from "frontity"

const Post = ({ state }) => {
  const data = state.source.get(state.router.link)
  const post = state.source[data.type][data.id]
  const author = state.source.author[post.author]

  return (
    <div>
      <h2>{post.title.rendered}</h2>
      <PostInfo>
        <p>
          <strong>Posted: </strong>
          {post.date}
        </p>
        <p>
          <strong>Author: </strong>
          {author.name}
        </p>
      </PostInfo>
      <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
    </div>
  )
}

I think the code should evolve and continue from how it was in the latest section that modified it

Something like...

A preview of the finished site and the final version of the code can be seen in this CodeSandbox.

Pointing to https://codesandbox.io/s/github/frontity-demos/tutorial-hello-frontity

The first time the <Link> component is introduced in the tutorial in the Use the component they're properly using the link attribute

 <nav>
        <Link link="/">Home</Link>
        <br />
        <Link link="/page/2">More posts</Link>
        <br />
        <Link link="/about-us">About Us</Link>
      </nav>

But from the Styled components there are some links that use the href attribute that makes these links fail

 <nav>
    <Link href="/">Home</Link>
    <Link href="/page/2">More posts</Link>
    <Link link="/about-us">About Us</Link>
  </nav>

The text the ones in this commit. should be the ones in these tagged commits per step. and should point to https://github.com/frontity-demos/tutorial-hello-frontity/tags

Check you're on the right track by comparing your changes with the ones in this commit.

In In Formatting the date the following command npm install dayjs

need to be like this npm install dayjs --save or npm install dayjs -S

so besides the installations of the package the dependency is automatically added to package.json
Without this argument the package is installed but not added as a dependency in the package.json

There is a typo on Part 7: html2react (https://tutorial.frontity.org/part7-finishing-touches/use-the-html2react-component) in the code block for applying the changes to page.js

I tried to create a PR but access was denied.

{post.title.rendered} and {post.content.rendered} should use 'page' instead of 'post'.
The variable is declared as page in previous sections of the tutorial.

In the Step "Creating a Custom Theme > Connect the component to the state"
When accessing http://localhost:3000/hello-frontity
The terminal returns an error

ServerError: post type from endpoints "posts,pages,media" with slug "hello-frontity" not found
    at Object.eval (webpack-internal:///./node_modules/@frontity/wp-source/src/libraries/handlers/postType.ts:37:21)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at eval (webpack-internal:///./node_modules/@frontity/wp-source/src/actions.ts:24:1) {
  status: 404,
  statusText: 'post type from endpoints "posts,pages,media" with slug "hello-frontity" not found'
}

I suggest to change that URL example for "http://localhost:3000/about-us/" that is an URL that actually exists in https://test.frontity.org/about-us/

Provide a better explanation of state.router.link and connect in connect-the-root-component-to-the-state.md

at Add a component the example should be like this

// File: /packages/my-first-theme/src/components/index.js

//
import Loading from "./loading"
 ...
<Main>
  <Switch>
    <Loading when={data.isFetching} />
    <List when={data.isArchive} />
    <Page when={data.isPage} />
    <Post when={data.isPost} />
    <Page when={data.isDestinations} />
  </Switch>
</Main>

// ...

Something like what we have at https://docs.frontity.org/

👋 Hi! Welcome to Frontity, and to our.....

Our documentation is distributed across three separate sites:
- docs.frontity.org - Introduction, concepts and guides
- api.frontity.org - API Reference
- tutorial.frontity.org - Step by Step guide

This site (XXXX.frontity.org) is where you will find ....

I would remove the subsection Using a single component for both posts and pages because I think it creates some confusion about how the file /packages/my-first-theme/src/components/post.js should be

The /packages/my-first-theme/src/components/index.js is also affected depending on the way to manage posts & pages

So, for the sake of simplicity I would just stick the tutorial to using different components (<Page> & <Post>) to manage these different types of content

This would make no need of the warning info at the end of Display posts and pages separately and continuing the code from Styling the post info would be easier to follow

The snippets in this tutorial seem a bit inconsistent and confusing. I guess i'm just putting this up to see if it's just my style, or if others are a bit confused by the snippets.

Sometimes the imports in their entirety are shown, sometimes not.

Sometimes ellipses are used, sometimes not.

I dunno, anyone else little bit thrown off?

something like the explanations provided in the blog post...

As you work through the course you can compare your code at each stage with the corresponding commit in this repo, so you’ll always be sure that you’re on the right track.