frontity / docs Goto Github PK
View Code? Open in Web Editor NEWFrontity Docs/Guides
Home Page: https://docs.frontity.org/
License: Apache License 2.0
Frontity Docs/Guides
Home Page: https://docs.frontity.org/
License: Apache License 2.0
I think this is a use case we didn’t think of. That users can just upgrade frontity and expect it to work. @frontity/core is not a dependency of frontity because we want to keep frontity lightweight and the users might end up with a package version mismatch like how it happened here.
@juanma I mention you here in case that it’s that something that should be more prominent in the docs. By that I mean that frontity is a modular framework that is composed of packages that need to be updated together.
https://community.frontity.org/t/error-unexpected-token-export/2307/2
Say a kind of "Recap": Okay, so far you've learnt all the concepts, let's make a recap". Frontity and its packages exposed state, actions, libraries, etc globally so components can use them using "connect", and if they are updated, all the components affected know it.
I think that we could create a very barebones “hello-world” theme which has just 1 component and no configuration. I think this would help users to understand what is the “baseline” for a fronity app. Especially for someone used to create-react-app or next or gatsby, this could make more sense initially.
https://community.frontity.org/t/reflections-on-moving-the-blog-from-gatsby-to-frontity/2248
It could be directly under "Resources" section
https://community.frontity.org/t/how-to-read-environment-variables/1495/16?u=juanma
https://wordpress.org/plugins/rest-api-head-tags/
not sure if this is a common problem, but it should be Cristal clear that the Head Tags WordPress Plugin also requires the Frontity Package to work.
https://community.frontity.org/t/yoast-seo-rest-api-head-tags-compatibilty/1651/10
The example included for the populate
function shows a wrong use of api.get
.
api.get
is an asynchronous function and must be called using await
to get the returned object. However, await
is not used in the example, and that can make handlers to stop working if developers include that code in their projects. See frontity/frontity#438
The way to fix this is just adding await
to the api.get
function call:
const response = await libraries.source.api.get({ endpoint: "posts" });
I would take the opportunity to clarify other examples as well, for example, adding await
also to other asynchronous function calls like actions.source.fetch
and libraries.source.populate
.
Here https://docs.frontity.org/guides/understanding-mars-theme-1 says wp-souce instead of wp-source.
You can see it here: https://cl.ly/54107e
The documentation for the command npx frontity create
has conflicting options, -h
can mean theme
or help
.
See: https://docs.frontity.org/frontity-cli/create#options
Instead of installing WordPress on my server I tried to use a free site on worpress.com and the problem was that they don’t support the /wp-json
endpoint. Instead, you have to use something like this:
https://public-api.wordpress.com/wp/v2/sites/instajuegos.home.blog/posts/ 3
That drove me crazy because it was so difficult to find that endpoint on forums etc. I realize that wordpress.com was very limited so I decided to install WordPress on my server. But the /wp-json
endpoint still does not work because I didn’t have something called permalink. Again google and forums looking for the answer.
I think this is a very important part because is the way you connect your backend with your frontend. So, in my opinion, the docs are a bit poor explaining all of these cases.
What I would do is create a small tool inside of the docs where you can type the URL of your site and then it tells you what endpoints can be used. Checking first /wp-json
then /?rest_route=/.
or even the wordpress.com format.
Source: https://community.frontity.org/t/my-experience-and-some-feedback-for-frontity/999
Add the sandbox.config.json file to all our demos and a link to “Edit it in Codesandbox” like what we have in our website.
https://community.frontity.org/t/update-codesandbox-template-automatically/862/3?u=luisherranz (edited)
Add a link to the community on all pages of the Learning Frontity section like the one at the bottom of this page: https://docs.frontity.org/about/frontity-features
He tried to find the React and JavaScript guides and he wasn't able to do so.
From: https://frontity.slack.com/archives/CD0NJS8L8/p1592377003003500
The following sections of the documentation under 'Frontity Packages'
Lack any kind of introduction describing them, what they do, or what they should be used for and why.
Add descriptive text to top of these documents outlining their purpose.
I am interested about how this works. Would you maybe want to elaborate about how to get Gravity Forms working with Frontity?
wouldn’t it be great to have some documentation about how to integrate forms in Frontity? I can’t really find any information about this.
He suggested to include in the Styles page not only code examples but also how they look in a real site.
From: https://frontity.slack.com/archives/CD0NJS8L8/p1592377003003500
Note: ln fact we should add more screenshots and visual examples to the docs generally
Like this one → https://www.gatsbyjs.org/docs/glossary/
To include things like:
It'd be good to mention in the @frontity/wp-source
package that it only works with pretty permalinks (as opposed to plain permalinks).
This is not about Frontity itself, it's a thing of @frontity/wp-source
. And it can be improved in the future, with either support for plain permalinks in that package or by creating a new package, for example @frontity/wp-plain-source
.
He installed mars-theme and after he wanted to use twentytwenty-theme and he didn't know how to do it. He had to create a new project from scratch.
From: https://frontity.slack.com/archives/CD0NJS8L8/p1592377003003500
Both the error
and warn
commands from the frontity
package are missing.
Conversations are here:
The API is:
import { error, warn } from "frontity";
// ## Development
// Throw this message and a link to the community.
error("Message");
// Console error this message and a link to the community.
error("Message", { throw: false });
// Console warn this message and a link to the community.
warn("Message");
// ## Production
// Throw this message.
error("Message");
// Console error this message.
error("Message", { throw: false });
// Does nothing.
warn("Message");
what would be the difference between the “React-only PHP theme” & “Static Rendered HTML” vs using Gatsby or Next.js?
I think the most important difference between Gatsby and Next is not the rendering (static vs dynamic…) but the package/extensibility system. This is hard to see right now because there are almost no packages for Frontity, but Frontity is prepared to become more like what WordPress is today, than to another npm/React framework.Right now that is not explained in our docs, but it’s not a priority so there’s no hurry. We can have a discussion later on. I’d love to explain you all the patterns backed in the framework and how they will be used to extend Frontity
Make it more clear the type of URL that need to be set in wp-source
https://test.frontity.org/wp-json/wp/v2/
vs https://test.frontity.org/wp-json/
And some typical examples:
etc...
The only problem I experienced is when I deployed the site, I forgot swapping my domain from the wordpress instance to Frontity meant that the wp-source plugin would break! Instructions on how to setup a subdomain in vercel might be worth mentioning in the deployment section. I’ve now got wp.benwrightdev.com for the wordpress source.
https://community.frontity.org/t/personal-portfolio-site/2066
@juanma Garrido 15/04/2020
For what I've seem, this seems to be the best option as documentation generator
Build optimized websites quickly, focus on your content | Docusaurus
To take into account → https://community.frontity.org/t/migrate-documentation-to-wordpress/1348
Contributors a lot of visibitlity
Edit in Github
Docs in Github (markdown)
Search Algolia
Edit in Github
Docs in Github (markdown)
Maybe add a system so people can suggest and vote topics?
Something like
I'm a huge fan of this section in the Gatsby documentation: https://www.gatsbyjs.org/docs/using-gatsby-professionally/
I think that as soon as we start having our first Big Publishers in production, a section like this would be a great complement to the case studies.
https://community.frontity.org/t/my-experience-and-some-feedback-for-frontity/999
Tutorial on creating Custom Post Types, Custom Taxonomies, and Custom Fields in WordPress, and adding them to REST-API/WPGraphQL.
He said it'd be nice to have a guide about how to deploy to Netlify (if possible).
From: https://frontity.slack.com/archives/CD0NJS8L8/p1592377003003500
I think it would be very useful to create a page in the docs where we can collect all the posts, tutorials, workshops, talks, guides, and other resources created by us and the community.
These are some examples:
There are some archives/pages of WordPress that aren't supported by the Head Tags plugin because they don't have an entity in the REST API. Although we already are specifying the entities that are supported, we thought it would be nice to list also the ones that aren't. These are the ones we have in mind:
Although they are not supported by the plugin right now, a workaround hardcoding it in Frontity it's pretty easy. They just have to add the title
they want in the date
or 404
pages.
vip-svn
they shared - 0.10.0 (https://vip-svn.wordpress.com/plugins/wp-seo/).These are the settings of the plugin, you can change the title
, description
and meta keywords
for most of them. You can set up a default value using variables like Post - #title#
and apart from that, at each specific post, page, category... customize it if you want to override it. I've checked the ones that are supported by the current status of our plugin/package.These are the things that are left (we'll have to consider with Aleteia if it makes sense to support them from Frontity or suggest a workaround):
.../type/video
and see an archive of all the post with the video format. Anyway, it's something that the theme has to support, and not even the 2020 theme is supporting it. It seems that is not used anymore. It doesn't seem to have support for the REST API neither./search/query
right? It's the url they use as example. Apart from that, with ?s=query
, it's getting the head tags of the homepage. The title
, that is the only setting you can configure in this case, could be easily hardcoded in Frontity.title
, that is the only setting you can configure in this case, could be easily hardcoded in Frontity.For these last cases (search and 404), if we don't want it to be hardcoded in Frontity, I guess we'd need to add REST API support for that settingsand get that from the Frontity package.
I still have to open the Feature Discussion, but I'd like to know your opinion, maybe after talking to Aleteia, of what we should support or not.
Date Archives
head tags are not supported by the Head Tags plugin yet because they don’t have an entity in the REST API. Is that right @david? Maybe they can use the home tags (type “post”).<title>
using the Theme Bridge.What is not working right now?
What do you mean with what is not working? All the settings of the WP SEO plugin are working excepting the ones mentioned (format archives, date archives, search pages and 404 pages).
ohhh, ok thanks
then I guess it’s working because none of those work in Yoast SEO or AIOSP
Which one is the "Format Archive"?
the others are those cases that our plugin can't handle
so yes, it's working
So I guess:
What do you think? (edited)
In the docs it's specified which type of entities come with the head_tags
field, but not those that don't. I think is a good idea to add a note explicitly mention those types.
https://docs.frontity.org/frontity-plugins/rest-api-head-tags#entities-with-head-tags
there
We could create a section called “Caveats”
(I’m not sure if that is the better name, we can ask Michael)
And do a list of things that are not working in general and then the things that are not working in each SEO plugin
Hey
I want to write to Aleteia to catch up and see how they're doing, but first I'd like to understand the state of this
Can you help me?
From all the settings of the WP SEO plugin, everything works except the ones I mention before, but they are cases that the plugin can't handle so we can suggest a workaround if Aleteia is using them:
title
could be easily hardcoded in Frontity./search/query
ot the query ?s=query.
. Anyway, it's not supported by the plugin. The title
could be easily hardcoded in Frontity.title
could be easily hardcoded in Frontity.Michal created this discussion to create a "zero to production" tutorial.
https://community.frontity.org/t/create-an-official-frontity-tutorial/963
Review docs and check if this can be explained better
> the docs say it still needs the connect HOC, what's the point of useConnect then?
> Good question, I'm using it without the connect HOC and its working right. I guess its maybe an error in the docs.
> By using useConnect() you can create your own hooks that make use of the frontity state, which would not be straightforward with just using connect :slight_smile:
For example, we are going to release a useInfiniteScroll hook which is using useConnect internally to access the frontity state!
https://403page.com/scaling-for-volume-with-frontity-cloudflare/
with that setup, he is pretty much testing how well cloudflare CDN works
because 99.89% of the requests when to the CF CDN
and that obviously scales to the infinitum
but that’s one of the points I always try to make: Frontity is as fast and as scalable as a static site as soon as you add a CDN
and you should add a CDN
(by the way, all the modern static site hostings like Now, Netlify, Surge… have CDNs)
For the rest of 0.11% of the requests that went into Frontity:
If you use a Node server: much more scalable than WordPress, because it’s Node (which by default is more scalable for its I/O) and it’s stateless so you can easily scale horizontally.
If you use Serverless: then this part is also infinite scalable, like a CDN.
and finally the last thing that needs to be taken into consideration to scale Frontity is how well you cache the REST API
From discussion at: https://community.frontity.org/t/moving-an-existing-wordpress-website-with-over-5000-articles/1477/23
Thanks for the quick reply! In Frontity can we handle the multiple post layout depends on category?
Sure.
You could use the [Switch
component 1](https://docs.frontity.org/api-reference-1/frontity-components#switch) for example:
<Switch>
<Layout1 when={data.category === "nature"} />
<Layout2 when={data.category === "cities"} />
<DefaultLayout /> {/* rendered by default */}
</Switch>
We already have an excellent guide to instruct people how to share their Frontity project with the world: https://docs.frontity.org/guides/how-to-share-a-frontity-project
It'd be awesome if you could add a section there to instruct people to add a sandobx.config.json
file with the node
template like explained here https://community.frontity.org/t/update-codesandbox-template-automatically/862/3?u=luisherranz and a link to "Edit in codesandbox" in their project to make collaboration even easier.
Hola! 👋
It seems to me that the documentation has some incorrect / confused info for api.set
/ api.init
and api.get
:
As far as I understand, there is no such method as api.set()
, so this line https://github.com/frontity/gitbook-docs/blob/616012622fccff28ac5eea40fa682b303561e49c/docs/api-reference-1/wordpress-source.md#L345 should refer to api.init()
. Also, the examples for the usage of api.get()
below are actually (correctly) showing the usage of api.init()
🤦
The description of api.set()
(which should actually be api.init()
like described above) says "Request entity to the WordPress REST API.". This is incorrect. It should say something like "Set the path to the WordPress REST API"
It's not the first site that I see that is not using pre-fetching, so when you click on links the content is not preloaded. Maybe it's a topic that it's worth explaining in detail?
This is for creating the documentation of all the analytics packages. The main package (@frontity/analytics
) is not intented to be use as another package but extended by each specific analytics packages. I can explain that if you need so.
Hey, ... asked me if Frontity is or plans to be compatible with page builders. I'd love to understand and learn more about this because I feel quite confused/stupid about it now.
(pieces of a Slack conversations)
Elementor
, Page Builder by SiteOrigin
, CoBlocks
and the likes can be fetched into Frontity apps. However, like we do with Gutenberg in frontity.org, you'd need to import the builder's styles into the Frontity application.In frontity.org, we saved the Gutenberg styles in a folders, imported it and included it with the <Global />
component in Frontity.I was able to test this with Elementor and it worked. I'm also trying it out with other builders.NB: Using other builders does not also limit the use of Frontity features like Processors e.t.c@frontity/gutenberg
one?wp-content/plugins/elementor/assets/css
folder. The location of the css files in the page builders plugin might differ from the other, depending on how the plugin's folder is structured.Create a PR like this one, with Frontity, stating that we choose Emotion for our whole framework and ecosystem.
Some of the issues reported in the Alexandra Spalato starter theme (console.log, unused variables, ...) could be prevented by adding a linter in our default themes.
The code PR contains the TSDoc which should be helpful in creating the documentation
You can see the usage of the component in the mars-theme and twenty-twenty theme in the PR linked.
We should add more comments to the frontity.settings.js & the index.js generated by default by the CLI with some more information about the purpose of each setting, some examples:
- explain why all the code is under packages.
- explain what is mars-theme and that it’s like a “starter” theme in WordPress.
- explain what is the purpose of the wp-source package in the frontity.settings.js
- explain that the settings, state & actions in index file are merged with the ones in frontity.settings.js
https://community.frontity.org/t/reflections-on-moving-the-blog-from-gatsby-to-frontity/2248
Interested in deploying to AWS-Lambda. Is there any official Frontity - AWS integration Template coming on the roadmap?
Also I had problems to follow the Deployment section, when it is even easy to read an understand, I couldn't deploy my site by following that guide. But I had to manage to deploy :) .
https://docs.frontity.org/deployment/deploy-using-now-vercel
@mburridge Can you do a test following the instructions to detect any improvements that could be done here?
This issue is opened for any member of the community who wants to follow these steps and provide feedback about it to improve it
Add a guide on how to create a custom page, i.e. a page where the content is not fetched from WordPress.
Create a custom handler for the route of each page
https://community.frontity.org/t/how-to-create-custom-pages/435
Can you update about your newly added packages so me as wordpress developer can read and understand the usecase and benifits of that package or article? so i can make sure my team following same method instead of any other long or old method ?
https://community.frontity.org/t/guide-for-frontity-packages/2092
Overall, I think the documentation needs to improve, very few packages have a useful README.md (but I did notice a couple of PR related to this). I tried implementing a new processor for html2react along with a custom component and it wasn’t very clear on how it should be done (I eventually figured it out :slight_smile:)
https://community.frontity.org/t/10up-frontity-review-feedback/2064
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.