ferreiro / website Goto Github PK

🌐 Jorge Ferreiro personal website and blog fully developed in Javascript and Node.Js. It uses Yarn Workspaces to setup the package architecture. Currently migrating the project to ⚛️ React

Home Page: https://jorgeferreiro.com/

License: MIT License

JavaScript 23.73% CSS 5.50% HTML 1.15% Pug 35.20% SCSS 34.43%

nodejs javascript sass css3 api react reactjs monorepo

website's Introduction

Jorge Ferreiro website

Open source project that runs the website for Jorge Ferreiro, including the blog and the admin panel.

Features:

Blog.
Adming panel.
Projects/Portfolio.
Contact form.
Subscription modal with Mailchimp.
Image uploader with AWS.

Disclaimer: This documentation is a Work In Progress.

Cross browser testing with BrowserStack

The blog post is getting thousands of readers. In order to make sure that we are able to offer the best possible experience across multiple devices we have teamed up with BrowserStack, a really powerful tool for performing cross browser testing.

Run the server

We have all the configuration for beta and prod inside ./env/index.js, there we load 2 files, the production or the development.

You'll need to create a .env file to set the required variables:

NODE_ENV='DEV'
SESSION_SECRET='keyboard cat'

PORT=''
MONGODB_URI=''
ADMIN_EMAIL=''
ADMIN_PASS=''
MAILCHIMP_API_TOKEN=''

S3_REGION=''
S3_BUCKET=''
AWS_ACCESS_KEY_ID=''
AWS_SECRET_ACCESS_KEY=''

CONTACT_EMAIL=''
MAILGUN_USER=''
MAILGUN_PASS=''
RECAPTCHA_PUBLIC=''
RECAPTCHA_SECRET=''
NEW_RELIC_LICENSE_KEY=''

Source .env
Run the server yarn dev

Changelog

Version 3.5 (December 2018)

Fully refactor the codebase to use a Ducks pattern. Instead of controllers.js, routes.js, you'll find one folder per functionality. Also, there were some refactors from the web server to the API.
Revamp completely sections headers and the following sections: home, about and talks.
Now the blog has a sidebar with useful links, extra information.
Added new biography.

Version 3 (fall 2017)

Release date: 17th October 2017

v3.0.0 Download

V3, level up Jorge Ferreiro: The content has arrived.

Create my personal Blog.
Added tools to improve development time (Gulp, config files...)
Improve discoverability: social networks.
Content oriented: new bio.
Improved UX by polishing the UI: less is more.
General refactors to improve Architecture.
Hello SSL!

Version 2 (October 2016)

Version 1 (Early 2016 - Sep 25, 2016)

Contribute

💬 Create a new Pull Request

My social networks

Twitter: https://www.twitter.com/jgferreiro
Linkedin: https://www.linkedin.com/in/jgferreiro/
Instagram: https://www.instagram.com/jgferreiro/

website's People

Contributors

Stargazers

Watchers

Forkers

pavelzx nvphung22 skyroot1000 ofricke ferreiro-eb butonix puneet19062000 gravytrainproject josepablo240907

website's Issues

Migrating website to React

Create API endpoints to return each of the current pages as JSON.

Refactor the website into React components.

Use flexbox on Projects and Works

Implement projects gallery carousel

Add google analytics

Newsletter page

Requirements:

It needs to be able to redirect back to the page the user was signing in.
Trackable: It's need to show either a "thanks" page, or be able to emit a new event in Google Analytics.

Create a new page so I can share with users. It should be clear the CTA and also the benefict to sign up. Exclusive 1:1 with me?

Design the newsletter
Implement the new design.

Use dotenv to load enviroment variables...

When developing in local, passing ENV variables when running yarn dev command is a pain in the ass. The goal of this task is to get rid of that pattern, and inject a dotenv configuration using https://github.com/motdotla/dotenv

Fix header menu when the width is resize

Cache APIs endpoints

Use the same method for the videos APIs

Blog post page

Creating a new design for the blog post section.

Design, tweaks

Create a new design for the post section.
Styles for paragraph, titles... Including colors.

New post modules

Spike/decisions

Randomly inject new modules on a post or decide the post creator to add that though the CMS?

Include newsletter

Create SSR on the new React App.

TODO: Add the needed steps here.

Add loader spinner for NEXT.js

https://www.npmjs.com/package/next-nprogress

[EPIC] Support blog series in the Backend and Frontend of Jorge Ferreiro blog.

A blog serie, is a way to group blog articles that are related between them or part of a tutorial.

The goal of this TT is to implement blog series in the backend and frontend of Jorge Ferreiro blog. To achieve this:

UI (users)

Blog post card If the blogpost is assigned to a series, display a link to open the series.
/blog/series/list List all the available serie.
/blog/series/{permalink} Detail page for a series (metadata and list of blog posts associated with that series).
/blog/{permalink} If the blog post belongs to a series, show a URL to open the series.

UI (admin)

/admin/series List of all the available series.
/admin/series/create Admin can create a new series.
/admin/series/edit/:permalink Admin can edit a given series.
/admin/series/delete/:permalink Admin can deletes a series entry.
/admin/create Extend the blog post creator, to allow admin assign a series to a new blog post. Admin will see a list of all the available series and can create a new series.
/blog/{blog_permalink}/edit The user will be able to change the serie the post belongs to or remove it.

Backend

Fix contact form subscribed button and integrate it wtih mailchimp.

Bug: When a new email arrives, the html doesn't show if the user decided to subscribe to my newsletter.
Feature request: If the user subscribed to the newsletter, automatically add the user to the mailchimp list.

Move everything to API Rest

Create an api rest that severs all the content of the website

Revamp UI to incude new photos, unify UX and add new company.

Pages revamp

Home

Add a new picture to fullHeader.
Update call to actions buttons from fullHeader.
Update fullHeader texts.

About

Update bio texts
Update bio buttons "download resume", "Connect on linkedin" to occupy full screen
Create a new module for display the experience.

Blog

Update header image
SPIKE: Decide if we want a grid of 2 columns (including an aside with "Subscribe to blog", "Follow me", "RSS") or just one row.
Include categories in the side bar.
Remove comments from blog, instead put a button to open comments, and display a right model with the disqus comments.
Add to the blog post: "Author email / 4 hours ago + Comment button" [similar to tech crunch]
[] Update blog page with sidebar

Talks

Update new picture.
Update intro texts "What topics I can talk about? Eg: React, Web development, Designing products..."

Contact

SPIKE: Extend the form to fit in the whole screen

General

Abstract common UI components into their own .css
Margin/Padding shouldn't be directly into the component, rather than in a new CSS property that each of the components use.

Minor fixes

Fix fullHeader in Mobile => add picture.
Fix cards not to include a category div if categorylist is empty.
Pass a boolean flag to the card, to show or hide categoryList.
Blog Fix header button on hover (text should be black).
Fix header on "/contact/talk", put in one line

Home page

Refactor content.json

Split all the content into different files inside the content folder

Logo animation when focus

Change logo color, maybe animation, etc? Experiment and doing something funny with it.
Another idea, make the logo SVG and do some cool animation with it 🌴

Add 'antispam' method on contact

Revisit how we load environment variables

In this PR @kwelch commented that he normally uses .env to create enviroment variables. I also read that Heroku good practises suggests to use that approach as well.

The goal of this issue is to research different possible ways to load env variables, and decide which one makes more sense for this project. Either keeping current approach or move to a new one.

Also, let's take advantage of this and use a better way to notify the user when sone of the variables are not found. Current approach is to throw an error (which is fine, because the app shouldnt be working if some env variables are not running) but I'd prefer if we can be more specific on the exception (for example checking all the env variables, and see if we have values for them. Otherwise notify which variables are missing and how to set them)

Example:

MISSING ENV Variables
------------------------
Hey! There are some variables in your project that you haven't set up. Without them, we can't run the server since some of the configurations may not work.

See this doc to know how to set your enviroment variable: <link to this repo README>
==================================================================
| GOOGLE_SECRET -> We use this to be able to access Google accounts. <optionally add a link to get this credentials>
------------------------------------------------------------------------------------------

Revamp UI blog article to show related posts next to the article

TBU

Integrate a React app inside the current application

Once we have the react app set up, we need to start adding our first components to it. Also, we need to hydrate those components with data from the backend. In order to achieve this we have to do updates to the template views to pass data.

Acceptance criteria

Creating a new dummy react app inside ferreiro-client.
Add a new task to Gulp (or use webpack?) that will get as the source the react app folder, will transpile it using babel and put it in the server dst folder.
Update the app scripts to import this generated new asset and make sure we can load the react app.

Some resources

https://reactjs.org/docs/add-react-to-a-website.html

PORTFOLIO - Image gallery viewer

Menu auto-width

The idea is that the whole menu ocuppies all the width

Left fixed pannel hidden for devices with small heights.

Add Prettier to the project

Right now there is not automate code style checker for the project. This issue is about to fix that and ensure a consistency across the codebase.

Options:

A) Prettier

While I was checking the react documentation on how to contribute they use Prettier in their codebase. I didn't know the project so I searched on their website and discovered that is really popular and kind of a standard in the community.

B) ESLint

I've checked this blog post about famous JS linters and ESLint looks like number one: https://hackernoon.com/what-javascript-code-style-is-the-most-popular-5a3f5bec1f6f#5858

Blog page

Connect newsletter ad with mailchimp.
Make categories filtering work.

Updating breakpoints names

After researching on other popular frameworks I saw that they don't longer use -desktop, -tablet as the mixings. Instead they follow this convenction: xsmall, small, medium, large, extra-large.

The goal is updating our SCSS to use this convenction.

Boostrap: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_breakpoints.scss#L5

Blog post creation page converts '>' into `$gt`

This conversion is causing that I can't add quotes to the blog post, since that is converted into an html character. I should check the sanitizer to see why is that attribute scaped.

Migrate Gulp to Webpack

Right now we have many tasks already created with Gulp: https://github.com/ferreiro/website/blob/master/gulpfile.js

The goal of this story is to replace Gulp by Webpack for building the assets.

Contact + Contact talks

Clean SCSS and automatically add cross-browsers compatibility

Right now we have many many properties in the SCSS stylesheets where I add support to different vendors and prefix things like -webkit, -moz, etc... While this is a good intention to add cross browsing support, there is a need to automate this task.

The goal of this story is to revisit all the SASS files and remove browsers specifics prefixes, as well as adding a vendor autoprefix in our build step (prob in the gulp task that transpiles SASS into CSS).

Videos page

Re-build about me section to include more information about me and a large image

Create simple script to publish all the monorepo packages that are public.

I've not found a way to automate the process to automatically submit a new version for all the public monorepo packages.

This script can be used in 2 ways:

In the CLI: When executing the script publish-packages will get all the list of packages from the current workspaces. Will get their package.json and check if the package is public, if so, then it'll submit it.
We want to run this script inside a npm scripts so in our CI pipe we can automatically generate a new version of the package.

Nice to have feature

Avoid prompting the password for NPM or YARN registry. So we'll need to implement a way to persist the user password. In my dotfiles I used a similar approach for not asking the user password anytime they want to install: https://github.com/ferreiro/dotfiles/blob/master/api/install.sh#L17-L18
Prompt the user YES/NO to decide if a package shoulb be submited

Series page

Create a "follow the series" popup newsletter.
Create related series

http://localhost:3000/series/the-definitive-guide-for-college-hackathon?sub_confirmation=true

Cross-page components

Shared logic / components

Spike

Explore different designs for the main page navigation. Ex: Including "subscribe" / "share" / "follow"?
Can I have loading placeholders like Facebook ,etc? Or in Next.js I can only have the generic one?

Recalculated projects gallery height

Implement "Subscribe" button for series

Series are a new feature in the blog that allows admin to group blog posts per topics. In the detail page user should be able to "subscribe" to a given series.

The goal of this TT is to extend the backend and the frontend to allow users to sync up to a given series.

We can integrate the susbcribe button with Mailchimp and have specific lists per topic, or subscribe the user to a given category.

<Optional, but not required> We want to display users the number of subscribers per email list.

[EPIC] Integrate dummy react component inside the webpage

Acceptance criteria

Create 2 react components BlogPostsList and BlogPostsListItem/or BlogPostCard. The BlogPostsList will receive as one of the props the blogPosts.
Hydrating those react components using data from the backend (https://medium.com/@baphemot/understanding-reactjs-data-hydration-initialization-bacbb790c7cb)
Since we're using Jade/Pug for the templates, we can inject with JavaScript the SERVER_DATA inside the window object.
```
script.
      window.__SERVER_DATA__ = {
            blogPosts: [] // another data structure could be: { blog: { posts: [] }}
      } 
```

Hydrate BlogPostsList Component getting the data from the server using window.SERVER_DATA

const props = window.__SERVER_DATA__ || {};
ReactDOM.render(<BlogPostsList {...props} />, document.getElementById('root'));

Refactor codebase to use a monorepo approach

In this story I'm creating a new react app inside the repository and also moving the respository using the monorepo approach using yarn workspaces to allow each of the apps client and server to have their own package.json

Don't hide the submenu when an external link is open

So, when there is a submenu like "social sharing" showing, don't hide the menu when a external link is opened.

Submit Mailchimp newsletter once click on "publish" a blog post.

Once you are in the admin panel and you click on publish a blog post, automatically send a newsletter to the mailchimp subscribers, so we don't need to do it manually.

Blurry Image Placeholder when loading blogpost.

TODO: Add needed steps.

Update Node version to 10.8.4 and upgrade project dependencies to latest available versions

10.14.2 is the new TLS and the stable version so it's safe to upgrade it from our current version 8.10.0.

By updating this, we'll need to update the rest of the project dependencies (like bscrypt, etc).

Talks page

Add "Related pots in this series" inside the post page

Create push notification to increase blog posts engagement

Motivation: Until now, our channel to get people into the website have been the newsletter. While that can be a good channel, it may not be as effective as sending direrctly notifications to our users once a blog post is ready.

Feature request: We want to integrate the native HTML5 notifications and send them once there's a new blog post published in our website. In order to measure the engagement, we can add a query param to the URL indicating the origin of the view example ferreiro.me/blog/<path>?origin=html5-notification

Important things: This process should be automated, meaning, I shouldn't trigger manually a notification once there is a new blog. We can use the same logic we have for the "breadcamp ad" we show to the user once there is a new blog post => https://github.com/ferreiro/website/blob/master/web/UIComponents/mixins/mostRecentPostAd.pug#L1