Create a Website for Mail for Good based on GitHub pages

[karuppiah7890]

In this website, we can mention the features of Mail for Good Beta and also put up more screen shots of the web app

[AndrewWalsh]

This is a great idea, I don't suppose you'd have time to implement a basic skeleton? Ideally it would be something based on static pages, particularly if there's a way to use a static site generator. Anything basic and quick to implement that's also easy to edit/update would be ideal.

[Dhiana1]

I can make the "basic skeleton" for you (Mail for good). Do you like WordPress? Or want Bootstrap? Let me know. Also, let me know where I can find your content/ presentations for the "Mail for good" project - so I can use them to populate the site. I suppose you already have the domain... :) Thank you! :)

[karuppiah7890]

@Dhiana1 We can use Bootstrap or Site generators like @AndrewGHC mentioned. It should just be a static website. The ideal thing would be to use gh-pages branch to upload the static site using GitHub Pages if you are gonna use Bootstrap or see how to use the Jekyll themes provided by GitHub pages. And for domain, it will get a default domain from GitHub - https://freecodecamp.github.io/mail-for-good. Later if we want, we can point a custom domain to it, and GitHub provides options for that.

[Dhiana1]

Ok. GitHub Pages is also ok. Talk to you soon.

[karuppiah7890]

@Dhiana1 :+1: :smile: And for content, you can use the README file. It tells about the features and also about how to contribute code to the software, since it's an OSS. For now, just start with mentioning the features and put a nice sign to mention that it's in Beta and that people are welcome to use it and give feedback and suggestions. We can then move on iteratively, to decide what screenshots to put and other stuff

[karuppiah7890]

If you have any doubts, you can comment here and we can discuss it out along with Andrew. cc @AndrewGHC

[Dhiana1]

guys, I still try to understand this github pages generator

until than... I made a little treat for the project:

I hope you like it! :)

[karuppiah7890]

@Dhiana1 If you need any help, you can ask :) and the art is pretty good!

[TheMightyPenguin]

Hey @karuppiah7890 @dhiana1 I'd like to add an initial structure for the site with Jekyll! I'll add bootstrap with sass, I'm gonna try to open a PR for this tomorrow!

[ryanbsherrill]

@karuppiah7890 I would like to help with this in any way I can. Exp. w/ HTML, CSS, React, Redux, Router, NodeJS, Express, MongoDB, testing, deployment, etc.

[karuppiah7890]

Okay, many people are trying to work on this PR. Let's get this sorted out @Dhiana1 I think you aren't working on this anymore ?

@TheMightyPenguin Have you started work on this ? :smile:

And @ryanbsherrill Wow, that's quite some skill set. We could use your help in the Application itself which uses NodeJS, Express and React. For DB it uses Postgres though. Do have a look at other issues and if @TheMightyPenguin hasn't started work on this, you can try this out :smile: Just trying to give an equal chance to all. Also we prefer using static site generators to easily change content and stuff

[Dhiana1]

I am not a developer. :) I only do wordpress sites (with wordpress tools) and some graphic design. So good luck with the page. :)

https://www.facebook.com/AgendaCulturalaPentruCopii http://agendacopiilor.wordpress.com/

On Tue, Sep 19, 2017 at 8:58 PM, Karuppiah notifications@github.com wrote:

Okay, many people are trying to work on this PR. Let's get this sorted out @Dhiana1 https://github.com/dhiana1 I think you aren't working on this anymore ?

@TheMightyPenguin https://github.com/themightypenguin Have you started work on this ?

And @ryanbsherrill https://github.com/ryanbsherrill Wow, that's quite some skill set. We could use your help in the Application itself which uses NodeJS, Express and React 😄 For DB it uses Postgres though. Do have a look at other issues and if @TheMightyPenguin https://github.com/themightypenguin hasn't started work on this, you can try this out 😄 Just trying to give an equal chance to all. Also we prefer using static site generators to easily change content and stuff

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/freeCodeCamp/mail-for-good/issues/170#issuecomment-330621054, or mute the thread https://github.com/notifications/unsubscribe-auth/AZQkZNe0egZ5aY37oXdG02esP-pbMuPkks5skADEgaJpZM4OcofL .

[karuppiah7890]

@Dhiana1 Even that's some web development. And thanks for the art. :smiley:

[TheMightyPenguin]

Haven't started due to college, but I'll do it @karuppiah7890! I plan to make a Jekyll with Webpack setup (I have lots of experience with Jekyll), so the site can be easily built on top of that setup. I'll make sure to document it and add a Readme with instructions, my plan is to make a site branch and then make a gh-pages branch that will be used to deploy. Does that sounds good @karuppiah7890 ? If it does, I'll love to start working on it to open the PR this week

Also, once thats gets done, I'll love to contribute on the app itself, I've also got some experience with React/Redux 😄

[karuppiah7890]

@TheMightyPenguin We need Webpack setup for Jekyll ? I haven't used Jekyll actually, but I see that Jekyll can be used as a static site generator and that's what we want like @AndrewGHC mentioned. And yes, the ideas sounds awesome! And sure, we welcome all contributions to the Application! :smile:

cc @AndrewGHC

[TheMightyPenguin]

You don't need Webpack, but it helps a lot managing any needed dependencies and processing assets (bootstrap, etc..). Alright I'm gonna start working on this 👍

[karuppiah7890]

:+1:

[esaezgil]

what about using https://github.com/gohugoio/hugo for this. It's free, OSS, easy to contribute to, just installing a binary. There's more info on http://gohugo.io/ including themes (https://themes.gohugo.io/), docs (http://gohugo.io/documentation/) and tutorials. Just my 5c. Most of the styling/templating done in Jekyll will be reusable there.

[TheMightyPenguin]

Hmm I've never used Hugo before, it seems nice, I'll develop the tempate in jekyll tho, I've lots of experience with it, I'll make it support multilanguage out of the box!

[Dhiana1]

Welcome. I could do some more. When you will feel you need to have some images for illustrating the project. Just let me know! :)

On 19 Sep 2017 21:11, "Karuppiah" notifications@github.com wrote:

@Dhiana1 https://github.com/dhiana1 Even that's some development. And thanks for the art. 😃

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/freeCodeCamp/mail-for-good/issues/170#issuecomment-330624592, or mute the thread https://github.com/notifications/unsubscribe-auth/AZQkZHtvvDfCOkRa9l9YvhHKmsKB9qb7ks5skAPJgaJpZM4OcofL .

[karuppiah7890]

@Dhiana1 Sure :smile:

[ryanbsherrill]

@karuppiah7890 @TheMightyPenguin Hey guys. Was just wondering if anything has been started for this? Definitely would still love to contribute.

[missmatsuko]

Would also be interested in contributing. Has a design been made yet, or does FreeCodeCamp have any other similar sites to base a design off of?

[AndrewWalsh]

@Dhiana1 @missmatsuko Thanks for your interest in this project. There are two key areas where design would be valuable, a github pages sort of thing detailing the objectives and use of the project, and the sign in page (which is very basic at present). The sign in page is itself in essence a separate app that could be expanded, and currently consists of basic HTML/CSS without any bells and whistles. What are your thoughts?

@ryanbsherrill Would be cool to discuss this on Skype if you're free for a bit? We're looking to expand our core dev team. Just looking for back or front end devs (or both!) with enough knowledge to be comfortable with the existing structure.

@esaezgil I'm a fan of static site generators and can see the use case for this case. As a proposal I support this approach, so long as we avoid unnecessary complication.

@TheMightyPenguin Following on from the suggestion of Hugo, Jekyll is no doubt a good framework for a static site. I'm open to either, with a leaning toward simplicity. What are your thoughts?

[missmatsuko]

@AndrewGHC I'm primarily a front-end developer, but I could work on the design as well. I think a design (or at the very least, a wireframe) is necessary before starting on the website.

I think a simple static site using GitHub Page's version of Jekyll would be the simplest way to create the site. I haven't used Hugo before but I'm wondering if that's overcomplicating things unless localization is a requirement?

What is the intended functionality for the sign in page?

[AndrewWalsh]

@missmatsuko Cool - I agree that we should spec this before any development. Just to clarify, are you talking about a Github pages website or a site for unauthenticated users using the app?

That's definitely a vote for Jekyll over Hugo. I've only ever used Gatsby as a static site generator, but I'm familiar with the use case. Interested in other's thoughts on this. Overall, I think we should limit overhead in alignment with the perceived complexity of the site.

As aforementioned, please let me know your thoughts on what you're trying to target. Either are valid in my opinion.

[missmatsuko]

@AndrewGHC I was thinking that it would be a static site hosted on GitHub Pages that provides an overview of the features of Mail for Good, or am I misunderstanding? I didn't see an existing GitHub Pages for FreeCodeCamp, but users often use it to provide information about their repos.

There's some examples here: https://github.com/showcases/github-pages-examples

[karuppiah7890]

@missmatsuko Yes, I believe that's what @AndrewGHC meant. This whole thread is about creating a static website to provide an overview of the features of Mail for Good as currently, the only way to know the features is to read the Repo's Readme and it's not very catchy unlike showing it in a webpage with screenshots and nice design

[Dhiana1]

I can help with the visuals. Let me know if you have a preferred style (including fonts and colors) or a specific webpage that you love (and want something similar). As far as I understand there will be 2 visuals. One for signing in and one with objectives. :) Is there anything else? :)

https://www.facebook.com/AgendaCulturalaPentruCopii http://agendacopiilor.wordpress.com/

On Thu, Sep 28, 2017 at 7:04 AM, Karuppiah notifications@github.com wrote:

@missmatsuko https://github.com/missmatsuko Yes, I believe that's what @AndrewGHC https://github.com/andrewghc meant. This whole thread is about creating a static website to provide an overview of the features of Mail for Good as currently, the only way to know the features is to read the Repo's Readme and it's not very catchy unlike showing it in a webpage with screenshots and nice design

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/freeCodeCamp/mail-for-good/issues/170#issuecomment-332721930, or mute the thread https://github.com/notifications/unsubscribe-auth/AZQkZFMFF55OSCHbc2ENKUMwsYrwv8sfks5smxrngaJpZM4OcofL .

[seanWLawrence]

Hey guys, I created a site with Hugo for this repository that can easily be run on GitHub Pages, let me know what you think: mail-for-good.netlify.com

[karuppiah7890]

Wow @seanWLawrence ! It's awesome and neat and matches the freecodecamp theme :smile: Also, for the top right github icon, I think we could link that too to Mail for Good repo. What do you think ?

cc @QuincyLarson @AndrewGHC @zhakkarn

[seanWLawrence]

Thanks! I updated the link. Also thinking about adding a lightbox/modal for the screenshots to make them easier to see - thoughts?

[karuppiah7890]

@seanWLawrence Good idea! It will be useful for the AWS deployment guide screenshots. Also, we need to add more screenshots to show some features too

[killerfbi]

Hello I can build the website for mail for good.I have experince in HTML5, CSS, jQuery, node.js, BootStrap,Wordpress, Joomla, Ajax and meteor. I can make the design of the website and then I should upload it here?(if so message me what the website should contain)

[seanWLawrence]

@karuppiah7890 Cool, I'm happy to add the screenshots you need to if you like, just let me know what you'd like to show (or you can send them to me if you prefer). Also, what's the best way to send you the files - through a pull request?

[seanWLawrence]

@killerfbi Thank you so much for offering your help! I've already created a site with Hugo, a static site generator that integrates well with GitHub Pages for free hosting. It's also written in Markdown to make adding/editing content easier for everyone. You can view the draft here. We'd love your help if you have any suggestions to make it better!

[karuppiah7890]

@killerfbi Yea, you could suggest things to what @seanWLawrence has developed :smile:

@seanWLawrence We need to discuss about screenshots with @AndrewGHC and others. Mostly it will be about showing how people can upload email lists, see subscribed and unsubscribed people, see open rates, click through statistics, and some more. And for the PR, I think we can have a gh-pages branch in this repo and you can push to it and that way it will work with GitHub pages I guess ? Need @AndrewGHC 's suggestions in this too. But the site has pretty much what we want, so there won't be much changes except for adding screenshots and stuff

[killerfbi]

@seanWLawrence Back after analyzing the website draft.In my opinion if you only want a static website we should try making only one page site.This means that it should have only the homepage and be block based type of design(I can prepare one).Otherwise the website looks good and functions properly.May I ask you if I can have a look on the website code? :) Thank you!

[seanWLawrence]

@karuppiah7890 Cool, do you want to wait until the additional screenshots and modal/lightbox is added before creating the gh-pages branch and pushing it? I'll get started on adding the modal/lightbox ASAP and will add the screenshots as soon as we all decide on which ones to add.

@killerfbi Do you mean a single page application? If so, may I ask why you think that would be better for this project? And yes, you can see the code here

[karuppiah7890]

Yup, let's wait. I want to hear @AndrewGHC 's and @QuincyLarson 's opinions on the site and about screenshots too

On Oct 9, 2017 7:59 PM, "Sean W. Lawrence" notifications@github.com wrote:

@karuppiah7890 https://github.com/karuppiah7890 Cool, do you want to wait until the additional screenshots and modal/lightbox is added before creating the gh-pages branch and pushing it? I'll get started on adding the modal/lightbox ASAP and will add the screenshots as soon as we all decide on which ones to add.

@killerfbi https://github.com/killerfbi Do you mean a single page application? If so, may I ask why you think that would be better for this project? And yes, you can see the code here https://github.com/seanwlawrence/mail-for-good

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/freeCodeCamp/mail-for-good/issues/170#issuecomment-335175408, or mute the thread https://github.com/notifications/unsubscribe-auth/AMNw6MT91JFSyjoUHs-Ij2qudRDUfDHoks5sqi3IgaJpZM4OcofL .

[seanWLawrence]

@karuppiah7890 Sounds good, I'll hang tight and add the modal/lightbox in the meantime. Thanks!

[seanWLawrence]

@karuppiah7890 Hey, just a heads up, I'm still working on the modal. Should have it done soon, and will add the photos you need as soon as you decide on which ones you guys want.

[QuincyLarson]

@seanWLawrence @karuppiah7890 Sorry I've been absent from this thread recently. Your prototype (http://mail-for-good.netlify.com/) looks amazing! You have the green light from my end to do whatever you all think is best. Hopefully we'll be able to re-use your code here to create landing pages for the other open source for good projects in the future, as well :)

[seanWLawrence]

@QuincyLarson Thanks for the feedback! Yes, you can use it for any project you like.

@karuppiah7890 Sorry I took so long on this, but I've added a modal to zoom in on the image when clicked. You can check it out here.

PS. Most of the images are the AWS set up page here.

Also, have you all decided on which screenshots you'd like to add?

[karuppiah7890]

It's completely okay. You don't have to be sorry. Also, I am sorry because I have been quite inactive here except for helping people with issues setting up the current version and I think others are busy with code and other work, but not much commits recently. We didn't communicate much too. I will mail Andrew about the screenshots and get back to you. Thanks a ton for this. Also, if you would like to help maintain (code, code review for it's PRs, anything) this static website part of Mail for Good after it's branch is merged in the repo, I will talk to Andrew about it and @QuincyLarson can make you a collaborator too :)

[AndrewWalsh]

Hey guys, sorry for my absence in turn!

@seanWLawrence The site you made with Hugo looks brilliant. I think only a few screenshots would be of value, particularly the screen for creating campaigns and perhaps configuring settings. If you feel that anything would be of value then please do throw it in.

Great frontend on the site

[seanWLawrence]

@karuppiah7890 Awesome, I'd love to continue helping with all of the above. Thanks again!

@AndrewGHC Thanks! I'll make those screenshots and add them on the site and loop back to see if there's any other visuals/features to add before getting it ready to launch.

[karuppiah7890]

@AndrewGHC @seanWLawrence Awesome 👍

[joshuaedwardcrowe]

@seanWLawrence That's right on the brand. Kind of inspires a FreeCodeCamp app store!

[seanWLawrence]

@Crowes Thanks, really appreciate the feedback!