microstates icon indicating copy to clipboard operation
microstates copied to clipboard

Build microstates.io website

Open cowboyd opened this issue 6 years ago • 12 comments

We have an (interim) logo, we have desire to market and bring microstates to the world... It naturally follows that we should have a website.

It should help you get started if you're new to microstates, or also provide api docs.

cowboyd avatar Apr 27 '18 16:04 cowboyd

I'd like to help with the website if possible. Are there any starting point or requirements?

ematipico avatar Jul 19 '18 17:07 ematipico

Hey there, just heard the podcast of Microstate.js on Javascript Jabber and I like it. Is there any way I can help to build the website?

marioacc avatar Nov 17 '18 01:11 marioacc

Hi Everyone, thank you for your interest in contributing to Microstates. I'm sorry I missed these messages earlier. Are you still interested in helping with the website?

taras avatar Nov 19 '18 14:11 taras

Sure thing!

marioacc avatar Nov 19 '18 14:11 marioacc

@taras, as @ematipico asked, is there any starting point or requirements for the product website?

marioacc avatar Nov 20 '18 17:11 marioacc

I haven't had a chance to think about it yet, but I'm happy to start to work with you on it. I'm thinking that documentation is going to be somewhat similar to GraphQL documentation because they have similar scope and concepts.

We will probably want to be able to run code blocks in different frameworks to show how same types can be used across different frameworks. If you would like, we can setup a time to discuss this together and make a plan. What do you y'all think?

What timezones are you in?

//cc @eandy5000

taras avatar Nov 20 '18 18:11 taras

I like how the GraphQL page looks, I do not have an idea about how the embedded code blocks can be implemented, but I can start the pertinent research.

I am currently on MST Time, let me know If you want to schedule a meeting!

marioacc avatar Nov 22 '18 04:11 marioacc

@marioacc Over the weekend, I had some ideas about the website. I'm currently working on a PR to @microstates/ember which is going to have a format that's similar to the Microstates website.

I want to finish this and then we can review it together and make a plan for broader website with @microtates/ember as a reference. I'll keep you posted.

taras avatar Nov 26 '18 14:11 taras

Perfect @taras, that is good to hear! Please let me know what will be the next step, I will look for other issues in the project.

marioacc avatar Nov 27 '18 20:11 marioacc

Here is a site that I made for Ember in Microstates demo https://ember-microstates.netlify.com

This will be the starting point for Microstates site. It won't be in Ember, we'll probably make it with React + Gatsby but the demos will be similar on the other site. @minkimcello is putting together a high level plan for content then we'll setup a time and make a plan together on how we'll build the actual site.

taras avatar Nov 27 '18 22:11 taras

Hello everyone, I've attached a pdf of the proposed plan for the website.

Proposed logo

I also drafted and attached an interim (v2) microstates logo using the same color theme as BigTest and Frontside's logo. The logo is intended to convey the message that using Microstates fast-fast-forwards the development process. Enclosed in a hexagon suggests it is dependable and structurally sound. And maybe this is cheesy but I like that the three arrows resembles a cursive M.

The website has four main sections: Home, Docs, Blog, and About.

Starting with the home page, we'll have the usual Get Started, Why Microstates, and Features section. I wanted to incorporate a dropdown for the Get Started button to list all the different frameworks. This would allow the Getting Started page (under Docs) and all the other sections in Docs to display framework-specific code blocks and instructions (and that way we don't have to worry about a 'default' selection and users accidentally viewing code examples that are irrelevant to the framework with which they are working).

In the Docs dropdown (from the navigation bar), we will list the different frameworks and have dropdown menus for each one. There should be a side navigation menu for all the pages within Docs. And within the side navigation, I suggest a section on top with (yet another) dropdown menu for the user to be able to toggle between different frameworks without losing their place in the section they were currently viewing. (The framework-specific codes and instructions will be loaded in dynamically so that we don't need to create separate pages for each framework.) The structure of the pages under Docs is TBD. I just came up with a few in the PDF file as an example.

The blogs page should be pretty straightforward. I took inspiration from the current Frontside website. The way the snippets are organized and displayed makes it comfortable to navigate and not so overwhelming for the user (personally speaking). I think Taras will work out how each blog post page will be generated and automatically added to the website using NetlifyCMS.

In the About section, we currently only have the Team and Community section. I didn't know what else to add but I'm thinking we can just include some links to where people can discuss and seek help using Microstates in the Community page. In the future this is where we could list meetups.

We haven't worked out the aesthetic details yet. I was told we can figure that out after the foundation of the website is built so for now we can just use whatever fonts and colors as we please. I hope my explanation was easy to understand. If not the visual aid of the PDF should help. And please let me know if I missed anything and I'll keep the plan updated.

ms website proposal.pdf

minkimcello avatar Dec 07 '18 16:12 minkimcello

After a bunch of back and forth, here is the new Microstates logo. Great job @minkimcello

taras avatar Dec 07 '18 23:12 taras