tinacms / tina.io Goto Github PK
View Code? Open in Web Editor NEWOrganization site for general info, documentation, blogs & contribution guidelines.
Home Page: https://tina.io
Organization site for general info, documentation, blogs & contribution guidelines.
Home Page: https://tina.io
As a result of this - tinacms/tinacms#649, we made some changes to the way we pass options to the cms that can be seen here - tinacms/tinacms#723
I think we can switch to using the Github refs api https://developer.github.com/v3/git/refs/#create-a-reference
There's an "update reference" endpoint that will rebase it off of the base repo (and we can use force=false to let the user handle their own conflicts if they arise?)
When going through the Next Tinacms Github setup process, it takes a while to verify that you're on the right track. We should document sanity checks that prove that your prior steps have been successful.
E.g, After you add the TinacmsGithubProvider
, you should see an authentication modal
At a bare minimum provide the interface and some basic context of what this is. Could be a blog post later on creating our own.
See the custom field doc. Update to link to the newer styles docs and add a short explanation of how to approach this now with custom fields.
Add documentation about the globalRemarkForm
HOC to the 'using markdown' in Gatsby file.
The component created by createGlobalStyles
function in styled-components
is extremely inefficient. This will cause sites being edited with TinaCMS to eventually start to crawl.
Any global styles should be memoized:
const GlobalStyle = createGlobalStyle`
html {
min-height: 100%;
}
`
export default React.memo(() => <GlobalStyles />);
We should have a guide/blog post about this.
related issue: tinacms/tinacms#473
Clicking on the logo currently refreshes the page. It should use a Next Link
If you check the logs of the create_indices
job when it throws an error it will log out something like:
(node:3039) UnhandledPromiseRejectionWarning: Error: kill EPERM
However, the job will still pass
When in edit-mode:
On the docs (or blog page), if you click into the inline Wysiwyg section, if you scroll down, the Wysiwyg menu gets hidden behind the toolbar
A pull request in tinacms may require documentation updates.
The following files may need to be updated:
File | Reason |
---|---|
creating-forms.md | Demonstrates using useLocalForm on a Next.js site |
We may want to add a Tip on how to prevent forms from being registered in production
Current consumers.json
file was copied statically from the Gatsby site. We need to replace this with a dynamically generated version.
When clicking "Edit this site", the GitHub auth flow redirects back to tinacms.org/* instead of:
https://tinacms-site-next-git-branchname.tinacms.now.sh/*
We can't send a custom Github callback because Github returns:
https://tinacms.org/github/authorizing?error=redirect_uri_mismatch&error_description=The+redirect_uri+MUST+match+the+registered+callback+URL+for+this+application....
I setup Tina on my blog and made this form:
const BlogPostForm = {
label: "Post",
fields: [
{
name: "rawFrontmatter.title",
component: "text",
label: "Title",
required: true,
},
{
name: "description",
component: "textarea",
label: "Description",
},
{
name: "date",
component: "date",
label: "Last Updated",
},
{
name: "publishDate",
component: "date",
label: "Published",
},
{ name: "rawMarkdownBody", component: "markdown", label: "Body" },
],
}
export default remarkForm(BlogPostTemplate, BlogPostForm)
I didn't love the organization in the sidebar though. I rarely care about the descriptions or dates when editing my content. It really lengthens out the form:
I used the group
field shove those hide those extra fields. Now the form template looks like this:
const BlogPostForm = {
label: "Post",
fields: [
{
name: "rawFrontmatter",
label: "Metadata",
component: "group",
fields: [
{
name: "date",
component: "date",
label: "Last Updated",
},
{
name: "publishDate",
component: "date",
label: "Published",
},
{
name: "description",
component: "textarea",
label: "Description",
},
]
},
{
name: "rawFrontmatter.title",
component: "text",
label: "Title",
required: true,
},
{ name: "rawMarkdownBody", component: "markdown", label: "Body" },
],
}
And my sidebar looks like this:
Create an FAQ section on the site.
I've started going through issues (both open & closed) in the tinacms repo to tag potential FAQ items. https://github.com/tinacms/tinacms/issues?utf8=%E2%9C%93&q=label%3Afaq
The save button in the toolbar should say:
"Save Draft" before a PR is created
"Update Draft" after PR has been created
@ncphillips mentioned having cms.sidebar.buttons.save take in a component which would allow this to be possible
Our documentation needs to serve a spectrum of users, ranging from those looking for a quick + easy way to get started with Tina, to those interested in wielding parts of the API on their own for highly custom use cases, or building integrations. For simplicity I'll refer to these as lower-investment and higher-investment groups, referring to how much time/energy they want to invest in understanding/implementing Tina.
Trying to serve this entire spectrum from the documentation is challenging and can lead to the docs being confusing/unhelpful.
Docs should focus on the APIs and components of Tina, and cater primarily to developers in the medium- and higher-investment part of the spectrum. Naive examples to demonstrate functionality (like what's in the Plugin docs) would be preferred over examples that assume a specific setup.
We should consider a linear path through the documentation. Docs should attempt to present the most common/ubiquitous APIs and components first, leaving more esoteric or uncommonly-needed features for later. This organization should not come at the expense of cohesiveness, however.
Guides aim to serve the lower- to medium-investment developers, but will likely be useful to everyone.
The attitude of a Guide will be somewhere between documentation and a blog post. Guides should start with an overview of what will be achieved, and may be broken up into multiple logical steps, each in its own markdown file.
| guides
\
|--nextjs-github-public-repo
\
|--overview.md
|--1-add-github-api.md
|--2-bootstrap-api-routes.md
We should encourage guides to be as small in scope as seems appropriate, and have guides reference each other. For example, a guide on using the GitHub packages with NextJS should assume you have already bootstrapped Tina into your NextJS site (adding TinaProvider
to _app.js
,) and should link to a guide on how to do that rather than explaining it all over again.
Guides should be:
something like this
In order to be more productive
As an editor
I can learn the current keyboards shortcuts supported in the editor
A few technical/UX challenges to overcome:
The following actions will be difficult without being about to make commits within git:
Add/remove image
Add/remove page
We will not have the user's auth token, and perform Github requests from the server, so we may run into issues with Github rate limiting
- We can just read from the filesystem if unauthenticated.
Questions:
It would be nice to be able to create/edit new docs pages with Tina open-authoring.
There's currently no create button in the Docs pages.
I manually created the page in my fork, but the new page 404'ed (I assume because fallback: false on the docs layouts)
We would like to be able to edit content within Zeit's preview deployments with Open Authoring.
E.g https://tinacms-site-next-git-style-reform.tinacms.now.sh/docs/cms/styles
It looks like we can use a custom-url for zeit preview deployments: https://zeit.co/docs/v2/custom-domains
If that's the case, we can send a custom callbackURL to Github to redirect back to our preview deployment url.
With google tag manager, the Scroll Depth event can only reset based on:
Container Load
,
Window Load
,
or Dom Ready
(all of which are only fired upon initial site load). We will have to either manually fire these events on page change, or handle our own scroll tracking.
https://stackoverflow.com/questions/55472262/scroll-depth-gtm-gatsby
For example:
Warning: Each child in a list should have a unique "key" prop.
Warning: Invalid DOM property
fill-rule. Did you mean
fillRule?
Let's cleanup up all these little issues.
Would it help if we shared when a documentation page was edited for the last time?
Update post for NextJS 9.3, replace getInitialProps
After a PR has been merged, I will be looking at a stale copy of the site. What should happen to the branch? What should happen to the fork?
Some thoughts:
On the next visit, we could alert the user and say that their pr has been merged and ask them if they would like to create a new fork. We could then delete their existing fork and create a new one for them. We could also look into rebasing it.
For now, we could just show an alert and tell them that their changes have been merged and that their fork is out of date.
Depending on the settings of Firefox or Brave, i.e. how intense the ad-blocking etc. is, the newsletter signup will throw an error and not allow someone to signup. Right now it will at least communicate this to them with an alert.
See benjaminhoffman/gatsby-plugin-mailchimp#45 & benjaminhoffman/gatsby-plugin-mailchimp#34
I reset my firefox browser to factory settings and was able to sign up okay since all my blocker settings were chilled out but this is definitely unfortunate / something we'll want to address.
One thing I didn't try was embedding the entire mailchimp form in like was mentioned in one of the issues...I wasn't sure how that would play with Gatsby. Would be my first step to looking into this.
A pull request in tinacms may require documentation updates.
The following files may need to be updated:
File | Reason |
---|---|
using-tinacms-with-nextjs.md | Shows wrapping Next.js app with Tina component |
adding-backends.md | Shows wrapping Next.js app with Tina component |
bootstrapping.md | Shows wrapping Next.js app with Tina component |
sidebar.md | Explains setting sidebar position |
sidebar.md | Explains hiding sidebar in prod |
This should make commits to the base repo instead of making a fork.
Also, we likely will want to create branches instead of committing directly to the base branch.
Needs further discussion.
I would like to be able to create new blog posts for tinacms.org within Tina. It would be nice if there was a "create" button in the blog posts list
A pull request in tinacms may require documentation updates.
The following files may need to be updated:
File | Reason |
---|---|
three-ways-to-edit-md.md | Shows how to use remarkForm HOC |
inline-editing.md | Depends on remarkForm & liveRemarkForm hoc in example |
The referenced PR requires a change to docs describe how to get started with TinaCMS.
yarn add gatsby-plugin-tinacms styled-components
will now need to be
yarn add tinacms gatsby-plugin-tinacms styled-components
We should make sure to update any effected blog posts and notify anyone else who wrote a blog post.
Issue
Currently the search is hidden on mobile
Expected
People can search on lower resolutions
Originally posted by @DirtyF in #25 (comment)
We don't really mention passing Actions to the form. Let's describe this as a concept and add some examples of actions. I've added an example for the delete action.
If you click the submit pull-request button twice, it will try and create the pull request twice (and fail the second time).
https://www.loom.com/share/90603ae016734448a811fde11078489c
If we already have a fork_full_name
or github_access_token
cookie, we can perform a quick validation check instead of going through the full auth flow when toggling edit mode.
I'd like to at the least switch between my own branches, and create new branches on my fork.
Also ideally, I could view read-only branches from the base, or other users.
Show alert blocking nav when we leave the page with changes:
https://nextjs.org/docs/api-reference/next/router#routerevents
Thanks to the ability to dynamically create, add, and remove plugins from Tina, it's incredibly easy to add a button for contextually creating sub-pages!
import { liveRemarkForm, createRemarkButton } from "gatsby-tinacms-remark"
import slugify from "slugify"
import { usePlugin } from "react-tinacms"
function BlogPostTemplate(props) {
const post = props.data.markdownRemark
const siteTitle = props.data.site.siteMetadata.title
const { previous, next } = props.pageContext
const { setIsEditing, isEditing } = props
const CreateChildPost = React.useMemo(() => {
return createRemarkButton({
label: "Child Post",
fields: [{ name: "title", label: "Title", component: "text" }],
filename(form) {
let currentDir = post.fileRelativePath.replace("index.md", "")
let sluggifiedTitle = slugify(form.title)
return `${currentDir}${sluggifiedTitle}/index.md`
},
frontmatter(form) {
return {
title: form.title,
date: new Date(),
}
},
})
}, [post.fileRelativePath])
usePlugin(CreateChildPost)
return (
<Layout location={props.location} title={siteTitle}>
<SEO
title={post.frontmatter.title}
Checkout a video in the community slack:
Website shows Privacy Error
Your connection is not private
Attackers might be trying to steal your information from tinacms.org (for example, passwords, messages, or credit cards). Learn more
NET::ERR_CERT_AUTHORITY_INVALID
Help improve Chrome security by sending URLs of some pages you visit, limited system information, and some page content to Google. Privacy policy
A pull request in tinacms may require documentation updates.
The following files may need to be updated:
File | Reason |
---|---|
using-tinacms-with-nextjs.md | Demonstrates using useLocalForm on a Next.js site |
creating-forms.md | Demonstrates using useLocalForm on a Next.js site |
inline-editing.md | HOC examples depends on useLocalRemarkForm hook |
json.md | Demonstrates use of useLocalJsonForm and JsonForm |
markdown.md | Demonstrates useRemarkForm usage |
forms.md | Creates custom form with useForm & useLocalForm |
We need to document the new loadInitialValues
promise and update the Form
interface or any examples of initialValues
manually getting set.
Similar to the shortcut keyboard in forestry. Also mention that its commonmark compatible
Need to document the image config options for the Markdown, HTML, & InlineWysiwyg fields.
Could use some examples and extended docs around tina serve
options:
https://github.com/tinacms/tinacms-site/blob/teams-docs/content/docs/teams/cli/commands.md#tina-serve-options--tina-server-options
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.