Code <-> Documentation workflow

šŸ‘Øā€šŸ’» Framework Development šŸ“– Documentation
25

Hey guys, Iā€™d love if you could check out this PR and give feedback here about how the TSDocs for the types.ts file of a Frontity package can look like.

@dev-team, @SantosGuillamot:

  • What do you think?
  • Do you do something different?

@documentation-team:

  • Is it useful for you?
  • Do you want us to do something different?
26

Another thing: @documentation-team, what are you using to prettify the markdown files? Isnā€™t it prettier?

I tried to do a simple change to a markdown file in my local environment and prettier introduced a lot of changes to the format: https://github.com/frontity/docs/commit/16e81a482e23b28aec36485c58195e0df94328b5

27

Iā€™ve reviewed the PR that @luisherranz has made:

I think it looks great, I have only noticed one thing that I think we should all agree on.

In TSDocs or in Documentation, when describing a method, I think we should be adding the () after the method name. Right now, we write it like (examples from current TSDocs):

An object that will be used in each call to the REST API when using actions.source.fetch with the default handlers.

Usually returned from api.get, but can also be the one returned by fetch.

Especially in the second example, it might not be clear to a new user that get and fetch are both methods and not some kind of getter or flag.

28

Weā€™re not using prettier for code examples in markdown files. But I think we should.
We should add a prettier configuration file so we all use the same prettier configuration in the docs.
Which one are you using for frontity code?

29

Prettier without any configuration. Itā€™s already in the package.json :slight_smile:

You can add it to your pre-commit hook if you want, using lint-staged using prettier --write (https://github.com/okonet/lint-staged#running-multiple-commands-in-a-sequence)

Optionally, you can configure VS Code to run prettier on file save with the ā€œFormat on saveā€ option.

30

As suggested by @mmczaplinski in Documentation 2.0 Structure maybe we could start doing adding a @since tag in our TSDocs for reference of when a feature/API was added.

WordPress does it with the @since tag. For example:

/**
 * Checks if a block can be read.
 *
 * @since 5.0.0
 *
 * @param WP_Post $post Post object that backs the block.
 * @return bool Whether the block can be read.
 */

In our case, it is not going to be that simple, because we donā€™t know the exact version that is going to be next, depending on the type of bump (minor or patch).

One idea would be to populate it with a NEXT tag, for example, and run a script that replaces all the NEXT tags with the bumped version of each package before the release.

We commit this:

/**
 * Do something.
 *
 * @since NEXT
 */

And a script does a commit before the release, once the package.json files have been updated to replace all the @since NEXT found with the package.json versions:

/**
 * Do something.
 *
 * @since 1.13.1
 */

Maybe to not overengineer it we could use an @after tag and add the current version.

For example, this means that this API is not available in version 1.13.1 or below. It is not as nice, but the final information is the same.

/**
 * Do something.
 *
 * @after 1.13.1
 */

Any other ideas?

31

yeah, I think thatā€™s really nice!

I think maybe itā€™s not even worth automating right now, because it might be more effort than itā€™s worth at the moment and it would be easier to just update the @since tags manually after a release.

32

@SantosGuillamot has done great work on improving the FD process. As part of that he proposed that once a feature is implemented, we should create a post with the Final Implementation

I think that the Final Implementation should in almost all cases be sufficient to create documentation based on it. In fact, I have lately used mostly the same text in both the github issue of the docs and the Final Implementation, for example when implementing state.source.url:

Thus, I propose that we centralize all the details in the Final Implemention post that would normally go into the github issue in the Docs repo. The issue in the github docs should then include just:

  • the link to the PR
  • the link to the FD
  • any (optional) notes to the DevRel team about the feature that are beyond the scope of the FD. Those may be something like: ā€œLetā€™s create a new section in the docs for this featureā€, for example.
2 Likes
33

Totally agree @mmczaplinski :slightly_smiling_face: Our end goal should be to improve the Final implementation post, with everything needed, so it is enough to fully understand each feature.

34

I like that. Letā€™s keep as much information as possible in the FDs :slightly_smiling_face:

35

What is the status of this? Is this information available for all the methods yet? Is this somethings that is going to be applied gradually from now on?

Regarding API Reference documentation I finished checking what is going to be the new site for these docs ā†’ https://api.frontity.org/

For that review I have applied prettier to all the docs and included that in the pre-commit hook (so prettier will be automatically applied on every commit)

I have also created in the WIKI some Guidelines for API reference docs with the criteria Iā€™ve followed to document every piece of information (syntax, arguments, types, is mandatory, ā€¦). These guidelines takes into account the constraints we have for working with gitbook.

Any feedback on these guidelines (how to properly document API) will be appreciated

36

None yet to be honest. Weā€™ll try to make a decision this month when all the dev team is back from holidays (cc: @santosguillamot).

It looks great to me Juanma :slightly_smiling_face:

37

@juanma now that the DevReal team is going to lead the development of the starter themes, I have a question for you: Will you use the same TSDocs standard that we use for the rest of the Frontity packages, or do you prefer to use another comment format/standard?

I am asking because we have our eslint configured to require TSDocs for the theme files, and each time we edit a file we need to add proper TSDocs for the whole file (we are doing it that way to add TSDocs to our codebase progressively). So if you donā€™t plan to use TSDocs for the starter themes, it doesnā€™t make sense that we spend time with that, does it?

38

TBH I donā€™t understand well the issue here :blush:
Can we have a quick meeting at some point so you can explain this to me?

39

Sure, letā€™s schedule a meeting :slightly_smiling_face:

40

Juanma has decided that they are going to use TSDocs in the themes, so we donā€™t have to modify what we do.

Also, I have opened an issue to remove all the React imports from the themes (and our packages), but we agreed that we will ignore the Eslint TSDocs errors for that PR, to avoid the need to add TSDocs to all the theme files at once.

Issue: https://github.com/frontity/frontity/issues/668

41

@santosguillamot and I thought this morning that maybe it would make more sense to not open the ā€œdoc issueā€ in each of our PRs, but once all the PRs of that feature have been merged and we are writing the Final Implementation (and creating the demo video) in the FD.

We think we can make a better summary of the feature and the things that need to be documented as part of the Final Implementation, and it would be much more useful for you.

What do you think guys?

42

I agree. :+1: I think this will simplify the understanding of the features to document them

43

Awesome! Letā€™s try it then as see how it goes :slightly_smiling_face:

44

@juanma, @mburridge: At some point @santosguillamot and I proposed to be the ones helping you to document the next features because we want to understand what you need.

If you still want, we can do that for the Google Ad Manager package.