fus-marcom / franciscan-react Goto Github PK

Wrap the layout component in the proper MUI tags. See bulletin-react repo for and example.

Check out the h3 in this page for an example http://localhost:3000/Accounting

The br is currently set to display none in the news.css file, but we probably need a custom css file just for major.js

Add the Material UI side drawer component to the layout.

https://github.com/mui-org/material-ui/releases

As to get beta 2.1 working I used this babel plugin. Once 2.1 hits stable we need to remove that as I am sure will be get fixed.

See #67

Opening this issue as not to forget that.

in Firefox:

• Firefox kan geen verbinding maken met de server op http://localhost:3000/_next/webpack-hmr.
  translated: Firefox can't connect with the server on http://localhost:3000/_next/webpack-hmr.
  This goes together with a message in the terminal window where you run the server: CACHE MISS /_next/webpack-hmr
• Error with on-demand-entries-ping: JSON.parse: unexpected character at line 1 column 1 of the JSON data
  This goes together with a message in the terminal window where you run the server: CACHE MISS: /_next/on-demand-entries-ping?page=(/ for homepage, /minor for the minor component etc)

In Chrome:

• EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.
  I suspect this has the same cause as the first error in Firefox
• Error with on-demand-entries-ping: Unexpected token < in JSON at position 0
  Same error as second error in Firefox

both errors seem to endlessly repeat, leading to a console that's full of errors after leaving the site open for a while

If you are on a random page on the site, clicking on the logo in the appbar or the drawer should bring you back to the root page.

I wonder if it will be easier to use Flexbox to align the social icons and search box in the AppBar. Perhaps look at the source code for the Material-UI documentation website and see how they achieved that.

The problem right now is has to do with running chrome as a headless browser. I can get it running (see the commented out lines in travis.yml), but I think the tests themselves are trying to start chrome too. Travis is not allowing this. This is the error message:

> mocha --timeout 30000 ./e2e/runner.js ./e2e/tests/*.spec.js
(node:4772) UnhandledPromiseRejectionWarning: Error: Failed to launch chrome!
[4782:4782:0327/230654.509917:FATAL:zygote_host_impl_linux.cc(126)] No usable sandbox! Update your kernel or see https://chromium.googlesource.com/chromium/src/+/master/docs/linux_suid_sandbox_development.md for more information on developing with the SUID sandbox. If you want to live dangerously and need an immediate workaround, you can try using --no-sandbox.

URL: https://accessfus.franciscan.edu/

The URL structure of the current site does not match up will with the default system for NextJS and the parameterized routes we have set up. There are a number of URLs such as franciscan.edu/theology that cannot be easily parameterized. Ideally we would structure it like this: franciscan.edu/major/theology, but we need to keep as many of the links the same as possible.

Potential solution: Have one component that everything gets routed to if it does not already match up with a parameterized route. Anything routed to this component would get data from WordPress based on the URL/slug. Then, based on the category, the data will be passed down the proper component. That means all data that does not easily fit into the routing system will need to be lumped together as a page in WordPress. This is not ideal for organization in the WP admin panel, but I can't think of another way.

I will try to have a test branch with an example of this soon. If anyone has any other ideas, please share them.

I've got some questions after watching the P5D2 video on YouTube.
In production, this is a static site and content is only updated when you do a fresh build and deploy to your host. There is no way for Gatsby to know that you made changes to your database.
Does the content on the Franciscan University website change at all? If so, there will be a manual process involved in refreshing the content on the live site.
I'm not sure how many web pages the Franciscan website has but I wonder how long gatsby build will take.

Pages for programs (ex. /biology ) have sample program sections. These sections include a sample schedule for a student for all four years of school. We need to come up with a way to style them that will make sense to the user.

Eventually these will probably be their own component, but it is probably faster to just style what we have now so it is ready for launch.

The site doesn't automatically reload anymore on changes made in components, you have to manually click refresh.
@JesseRWeigel's confusion as to why he didn't see style changes he made on today's stream tipped me off to this.

I think this behaviour might be related to #71

Alumni: http://alumni.franciscan.edu/

Conferences: http://www.steubenvilleconferences.com/

Development: http://giving.franciscan.edu/

We need to be able to search across all post types at the same time. It will also be good to allow users to filter and sort their search a finely as is reasonable.

I have installed a wordpress plugin that allows us to search across multiple posts types with the WP REST Api by sending a GET request like this:

http://104.236.41.59/wp-json/wp/v2/multiple-post-type?search=catholic&type[]=post&type[]=page&type[]=admissions-page&type[]=chapel-page

First step is just to enable a request like this for all posts types from the search fields.

After that we can work on the filters. I think the search function we used for the ci-react site should work with some modification.

As mentioned by @JesseRWeigel on the stream, maybe structured commit messages would be a positive?

Commitizen seems like something that would fit if this repository goes that route, what do you all think? Other suggestions?
(reading some commitizen docs right now, only just learned of it)

It's important

See https://zeit.co/blog/next5

faculty.js and page.js in the pages folder are using the new query component. Refactor all other components in the pages folder to use the query component too.

The queries that correspond to these pages may need to be refactored as well.

See this

https://jsfiddle.net/88ncezuc/

regexp is /(\s?dr|\stor|\s?[$&+,:;=?@#|'<>.^*()%!-])/g

They are updating it quite a lot.

See https://twitter.com/MaterialUI/status/955550572438007808

We need some basic guidelines for contributors.

All code should have to pass StandardJS rules and be auto-formatted on commit.

My understanding is that GatsbyJS is great for building blogs, portfolio, documentation or small personal websites where the content rarely changes. Have a look at their showcase list of websites built with Gatsby and see for yourself.

I have not seen any evidence that GatsbyJS is a great tool to build interactive and dynamic large web apps.

I believe that the project built with NextJS will be just as fast if lru-cache and a WordPress database caching plugin like W3 Total Cache are used.
You might also want to use Cloudflare which will cache all the images, CSS and JS files and it's free.

And you will not have to rebuild the site every time the content changes at all or when a new event or news item is added/updated.

It sounds to me like complicating things unnecessarily. That's just my 2c worth.

PS: Early next year WordPress will be releasing a new editor called "Gutenberg" which is built using ReactJS.

Any URL of the form /news/something will go to the news.js page component. On the server side, this will always return an HTTP 200 status code, even for posts that don't exist.

Below is an example of how this issue could be fixed:

Release notes: https://github.com/mui-org/material-ui/releases

Pay close attention to the breaking changes under each version that's newer than the one in use right now.

This one:
[API] Complete type to variant migration
affects the student profile card (possibly other cards as well)

MUI masonry looks trash we need to grab grid from materialize.

see https://github.com/fus-marcom/bulletin-react

Zeit address our issue in vercel/next.js#3711

Now you can delete next.config.js

yarn add [email protected]

On some of the department pages there are menus for programs of study. These need styled to be in a list format. It can be under the other text (easiest way) or be some sort of side menu on the right hand side (desktop only).

You can see an unstyled example at this route: departments/acc-bus-ec/

You might want to use the Material-UI SvgIcon component for all the svg images in AppBar.js as it will give you better performance. For an example look at the source code for the Material-Ui Docs website

Refer https://github.com/pantharshit00/fcc_dbmigrate for migration scripts required.

Read comments carefully and you will be good to go!

In WordPress when you change a 'post slug' in the Permalink, WordPress will automatically redirect a link containing an old slug to the new link with new slug and sets the status to 301 Moved Permanently. This is very useful especially when you change a post's slug after Google has already indexed that page otherwise you will end up with lots of 404s and that's probably not good for SEO and certainly not good UX.

Since this is not a WordPress theme the functionality to redirect old post slugs will need to be created.

In the pages/pages.js component we are already doing this:
.replace(/src="\//g, 'src="https://www.franciscan.edu/')

We need to make sure this happens for all content on every page.

Use instructions found here: https://github.com/greenkeeperio/greenkeeper-lockfile

Replace the Gatsby default README with information about this project.

The inkbar color doesn't work anymore since the update to the newest MUI.

(the bottom bar used to be gold)

That results in this error in the console:

Issue is related to this breaking change in MUI:
mui/material-ui#10457

same thing for search-inkbar in the header

The app bar component was brought in from the bulletin-react project and is not functioning properly yet.

https://github.com/callemall/material-ui/releases/tag/v1.0.0-beta.21

https://github.com/mui-org/material-ui/releases/tag/v1.0.0-beta.22

It would be a good idea to add the ticked checkboxes to the browser history so that if a user sends the search page url to a friend then that person will not see a blank page.

We need to decide what we want to use for testing. Suggestions?