eleanorhaproff / aijs.rocks Goto Github PK

View Code? Open in Web Editor NEW

85.0 85.0 18.0 77.06 MB

License: MIT License

JavaScript 67.68% CSS 32.32%

aijs.rocks's People

Contributors

Stargazers

Watchers

Forkers

alex-saunders webtaculars teropa ahmadawais hpssjellis intuitionmachine codeaudit gogul09 adolfoeliazat poshaughnessy ajesse11x gantman futureexperience gchenfly mikeopondo thequarky plimoi dotonomic

aijs.rocks's Issues

Flash of unstyled content when the page is refreshed

We seem to be inlining the styles, so adding them into the page via style tags like so:

<style id="gatsby-inlined-css">h1,h2,h3,h4,h5,h6.... </style>

This means that the CSS isn't cached in the browser and I think that is what is causing the ugly flash of wrong text font when the page loads or is refreshed.

I can see in the build folder we produce a style.css, I think if we include that instead of inlining the styles it will remove the flash of unstyled content and reduce page size as well.

<style src="/style.css"></style>

Improve animations

Add hover effects
Nice animation transitions

Deploy website to aijs.rocks

Deploy the initial version of the website to aijs.rocks

Can't seem to add .gifs to the pages

They are not copied across to static like the pngs are show just show a broken link.

Cab we make the font size larger?

My eyesight isn't what it used to be and I'm finding the font really hard to read at its current size. A bit larger and it looks and reads much better.

I've set it to 100%/1.666em (before it's set to 75%/1.666em)

Before ->

After ->

A clearer blockquote or admonition style for highlighting things

This is what a blockquote renders as:

> **Note**
> 
> The API by default doesn’t return the emotion, you need to explicitly specify the query param `returnFaceAttributes=emotion`

I've got similar "admonition" styles on my website, like so:

npm run develop fails

the error is:

TypeError: Cannot read property 'childImageSharp' of null
(anonymous function)
src/pages/index.js:93
  90 | <PostTitle>{post.frontmatter.title}</PostTitle>
  91 | <Thumbnail
  92 |   style={{
> 93 |     backgroundImage: `url(${
  94 |       post.frontmatter.thumbnail.childImageSharp.responsiveSizes
  95 |         .src
  96 |     })`
View compiled
new Index
src/pages/index.js:85
  82 | return (
  83 |   <PostsWrapper>
  84 |     {posts
> 85 |       .filter(post => post.node.frontmatter.title.length > 0)
  86 |       .map(({ node: post }) => {
  87 |         return (
  88 |           <Post key={post.id}>

Submission instructions incorrect

Not sure if I'm 100% correct on this but the submission instructions indicate that you should 'create a folder inside /pages/', should this not be /pages/inspire? as this is where the showcased projects live?

Add initial submissions to the site

Basically take the submissions we've accepted in trello and create the images, markdown files, copy etc...

Buttons pointing to demos/code etc... needed on demo page

We need a few more buttons on each demo page...

Layout issues with different length descriptions

Add about page

Configure server-side to return 404

Update all social links on the site to the right ones

Twitter/Github/Our Social Profiles/Azure :)

Style 404 page

Initial Design

Basic version.

No Tags
No Search
No Blog
Simpe Menu
Responsive

Add submission page

Add a submission page with instructions on how to submit, rules for what submissions we accept and format of the submission (images, markdown, essential fields etc...)

Azure apps don't seem to work

you can't have a demo of the azure apps lol

Add CI support so any PR merge into master auto-deploys

Add meta data to head for sharing on twitter and facebook

Proper Titles
Proper Description
Proper Image
Twitter Tags
Facebook OpenGraph Tags

E.g. view mine from codecraft.tv


<!-- Open Graph -->
  | <meta name="description" content="The way think about these two different ways of binding is in terms of inputs and outputs.   With the [] we are binding to an input of a Component.  With the () we are binding to an output of a Component.   This is what we call one-way data binding, since data only flows one way, either into or out … ">
  | <meta property="og:title" content="Property &amp; Event Binding • Quickstart • Angular 5">
  | <meta property="og:description" content="The way think about these two different ways of binding is in terms of inputs and outputs.   With the [] we are binding to an input of a Component.  With the () we are binding to an output of a Component.   This is what we call one-way data binding, since data only flows one way, either into or out … ">
  | <meta property="og:image" content="https://www.codecraft.tv/assets/images/site/codecraft-cover-v1.jpg">
  | <meta property="og:type" content="article">
  | <meta property="og:site_name" content="CodeCraft">
  |  
  | <!-- Twitter Card data -->
  | <meta name="twitter:card" content="summary">
  | <meta name="twitter:site" content="@jawache">
  | <meta name="twitter:title" content="Property &amp; Event Binding • Quickstart • Angular 5">
  | <meta name="twitter:description" content="The way think about these two different ways of binding is in terms of inputs and outputs.   With the [] we are binding to an input of a Component.  With the () we are binding to an output of a Component.   This is what we call one-way data binding, since data only flows one way, either into or out … ">
  | <meta name="twitter:creator" content="@jawache">
  | <meta name="twitter:image:src" content="https://www.codecraft.tv/assets/images/site/codecraft-cover-v1.jpg">

Need to add in helmet in layouts/index.js