search

antwarjs / antwar

A static site generator built with React and Webpack.
https://antwar.js.org/
MIT License
460 stars 35 forks source link

[WIP] Site design #115

Closed webdesserts closed 7 years ago

webdesserts commented 7 years ago

Here is a list of what's currently in the pull request and what still needs to be worked on.

Hero

Here's a preview of the what the Hero Image currently looks like.

screen shot 2016-11-27 at 7 40 42 pm

The basic idea behind the Hero is that when the user first visits the site, they are presented with with a tv in the dark. The tv will then swap back and forth between a static screen and the clear title as if the tv was loosing signal. I'm exploring whether I can do the static effect with a custom svg pattern or maybe just a normal video.

Typography

I am currently using Freight Sans Compressed Pro as the display font and I am using FF Meta Web Pro for all body text. Right now I am just hosting these through my Typekit account. I would be happy to continue hosting these fonts for you as I am currently doing so for react-boilerplate as well, but if you would rather purchase these fonts yourself or find an alternative set of free fonts, just let me know.

webdesserts commented 7 years ago

@bebraw I also had a few random questions about how I should be using antwar

How should I style the Home Page?

I would like to add some custom styles to the home page, but it's currently done with markdown. Should I just fill the markdown page with html so I can add classes and wrappers to a few things, or should I find some other way to render the page in jsx?

What should I do about the Responsive Nav?

Were we still going to try to use Webpack's responsive nav here or were we going to create our own? We will have a second layer of navigation on the documentation pages, would the Webpack navigation handle that?

How do I add <meta> tags?

What's the preferred way to add meta tags to the document? I would like to add a viewport meta tag to the <head> but I don't quite see where I'm supposed to do that.

Am I doing third party scripts right?

Again, I am currently adding typography through a third-party typekit script. I noticed in your antwar helpers that you load these through react components. Is this the preferred way for antwar users to load these types of third-party scripts or did you have somewhere else I could/should load them?

bebraw commented 7 years ago

I would like to add some custom styles to the home page, but it's currently done with markdown. Should I just fill the markdown page with html so I can add classes and wrappers to a few things, or should I find some other way to render the page in jsx?

Sounds good enough. So Markdown with some HTML here and there would work. Authoring the content would be more painful in JSX most likely. But do whatever makes the most sense to you.

Were we still going to try to use Webpack's responsive nav here or were we going to create our own? We will have a second layer of navigation on the documentation pages, would the Webpack navigation handle that?

@skipjack Any thoughts on extracting the navigation component from the webpack site project? I could push it to antwar/react-navi or so if that sounds good to you. react-navigation is sadly taken (squatted).

What's the preferred way to add meta tags to the document? I would like to add a viewport meta tag to the but I don't quite see where I'm supposed to do that.

You can define a custom template. Rough idea:

antwar.config.js

module.exports = {
  template: {
    title: 'antwar',
    file: path.join(__dirname, 'template.ejs')
  },
  ...
}

You can copy the base template from packages/antwar/templates/page.ejs and adjust it to your liking.

Again, I am currently adding typography through a third-party typekit script. I noticed in your antwar helpers that you load these through react components. Is this the preferred way for antwar users to load these types of third-party scripts or did you have somewhere else I could/should load them?

There are two ways. One option would be to wrap the script tag within a React component and render it through that. I do this with Disqus and Google Analytics (antwar-ga-plugin) for example.

Another option would be to modify the base template. This makes sense particularly if the scripts should be available everywhere.

skipjack commented 7 years ago

@bebraw

Just saw your comment on webpack/webpack.js.org#430, this was my next stop 😄 . Yes I'll start to give this some thought, I'd rather go with something like react-banner or whatever we can think of that's not taken so it's clear that it can be used in any react project.

I'll get a repo up sometime this week and probably bug you for advice on a few things 👍 . Would be happy to add you as a maintainer as well, if you're interested.

bebraw commented 7 years ago

@skipjack Ok, cool. Poke me then.

bebraw commented 7 years ago

Github Ribbon

react-github-corner would work for that. Demo:

<GithubCorner
  href="https://github.com/antwarjs/antwar"
  bannerColor="#fff"
  octoColor="#000"
  width={80}
  height={80}
  direction="right"
/>

Adjust to your liking.

bebraw commented 7 years ago

I like the way it's going. Maybe the prev/next links should be on the whole element instead of links.

I attached GitHub ribbon there as discussed above so remember to pull.

bebraw commented 7 years ago

Scratch that. You can cherry-pick the ribbon from here.

webdesserts commented 7 years ago

Thoughts on Navigation

This navigation is a slight retake on the current webpack navigation. The main goal of this navigation mockup is to provide a component that will work for most Open Source projects while keeping the needs of webpack and antwar in mind. The navigation would look something like this:

img_0011 img_0013

The navigation would have two modes: mobile & desktop. Desktop mode is a slide out nav that is open by default and would not cover content. Mobile would be a full-page, scrollable pop up that would anchor to the right on a tablet sized device. Note that that this component would only be responsible for the slide-out nav and not the navigation in the header of the page. That would be a separate component that could possibly share the same navTree.

I have positioned the nav to the right as most users are going to be right-handed and I believe it would be easier to reach for those users. Positioning the menu on the left will most likely cause the user to readjust the way they are holding the phone or bring in their other hand. However, I don't think this nav is reliant on it being on the right; it could easily be a configurable option.

One of focuses of this navigation is to put a project's social silos up front and center without them feeling too intrusive. I want the entire nav to feel like a part of the interface and not a foreign body. For this reason I have included a "QuickBar" where you can include things like your github & gitter. This QuickBar will always be visible on the side of the application in Desktop Mode, but will retreat to the pop up menu on Mobile. The mobile QuickBar would be a "sticky footer" that would always be visible as you scroll through the site navigation.

The simplest version of the API would look like this:

let tree = {
  Home: '/',
  Blog: '/blog/',
  Documentation: {
    index: '/docs/',
    "Getting Started": '/docs/getting-started',
    Configuration: '/docs/config/',
    Plugins: '/docs/plugins',
    Theming: '/docs/theming'
  }
}

return <Nav tree={tree} />

You could then configure your QuickBar and customize how the navigation itself renders, allowing for custom widgets within the sidebar such as a site search.

let icons = [<Icons.Gitter />,<Icons.StackOverflow/>,<Icons.Github/>]

return (
  <Nav tree={tree} quickBar={icons}>{(navTree) => (
      <MySearchWidget />
      {navTree}
      <InfoAboutOurSponsers />
  )}</Nav>
)

And that's about it. I have other ideas for configurable properties and how you could control when the desktop/mobile switch happens that could be ironed out. Otherwise, that's the gist of it.

bebraw commented 7 years ago

I like the visual mockup. Perhaps the position concern can be pushed outside of the component itself.

It might be a good idea to extend the definition like this:

let tree = [
  {
    label: 'Home',
    to: '/'
  },
  {
    label: <div>Blog</div> // Allow JSX etc.
    to: '/blog'
  },
  {
    label: 'Documentation',
    to: '/docs'
    children: [
      {
        label: 'Getting Started',
        to: '/docs/getting-started'
      },
      {
        label: 'Configuration',
        to: '/docs/configuration'
      },
      {
        label: 'Plugins',
        to: '/docs/plugins'
      },
      {
        label: 'Theming',
        to: '/docs/theming'
      }
    ]
  }
];

Even though it's more verbose, you get ordering (JS objects don't have order by default). label field also gives you an extension point as it's possible you might want to display something else than just text (can be icon etc.).

webdesserts commented 7 years ago

@bebraw Ahh, good point, I didn't think about object ordering. Yeah, I'm fine with verbosity in the navigation tree, The user can generate the tree in some "user friendly" way if they aren't happy with it.

bebraw commented 7 years ago

@webdesserts Alright. Additional things to think about - spacers (literally { type: 'spacer' }, customization (instead of a you might want to inject Link). Maybe we can go through types, assume a default, and expose a hook (({ type }) => ... branch here ...). That would keep it flexible while keeping the API surface small.

webdesserts commented 7 years ago

@bebraw Hmm, at certain point I wonder if we would just let them build the internals of the Nav themselves? The only thing you're really benefiting from the tree prop is some default styling and accordion logic. The slideout & popup functionality are where I see the majority of the value in the component.

<Nav quickBar={icons}>
  <mySearchBar />
  <myNavigation />
  <mySponsers />
</Nav>

We could even expose a <Nav.Collapsable /> or something like that if they're really missing the accordion sections?

Btw, after looking back over the webpack site again, and after a little reconsideration I do think that their current "Desktop Nav" might work better for their use case. Webpack has a lot of documentation and a 3 tier tree structure might feel a bit heavy comparatively. I do think their mobile navigation would benefit though. I wonder if we could expose a <Nav.Mobile/> and <Nav.Desktop/> that would allow a user to pull one of the two solutions. This would work great for sites with really tiny navs as they probably already have their desktop nav figured out and just need a mobile friendly hamburger menu.

bebraw commented 7 years ago

@webdesserts Yeah, it's entirely possible we won't find "one size fits all" kind of solution as navigation needs can be different. Maybe we'll end up with a series of components to assemble. I did that in Reactabular and it's an approach that works quite well although you need to glue it all together as a user (harder to learn). Still, I would be more than happy with that.

I think we'll hear @skipjack's thoughts at some point. 👍

skipjack commented 7 years ago

@webdesserts @bebraw hey sorry for the delay on this... the sketches look awesome! Yeah I definitely still want to create a separate repo for the Navigation component we're using for webpack.js.org. And fully open to tweaking the props it takes and whatever else to make it more flexible for use in a variety of projects.

I'll try to dig into the separation this weekend, been really swamped with work recently. Will have more free time to get this done over the holidays so EOY at the latest. As soon as I do I'll come back to this thread and read through more thoroughly. If you need to get something up soon, don't let me hold you up as we can always merge our efforts a little later on.

webdesserts commented 7 years ago

@bebraw I've rebased off of the latest master, so it should be mergeable. Let me know if there are any changes you would like me to make. I will be spending some time tomorrow to figure out how I could implement a Static effect in svg.

bebraw commented 7 years ago

Looking good.

A couple of notes for the final PR including the static effect: