Replace youtube iframes

[Bouncey]

This gist holds a list of stories that have been marked as containing embedded youtube videos.

We need to replace them with our own to maintain the resource. They currently do not work, I suspect this is because we do not have the correct origin.

What is required is that each iframe in the resource should be replaced with the correct youtube embed.

@QuincyLarson

[nikrb]

I'll help with this if I can.
I see the iframes in the md files. So you want the youtube vid embed link used for the iframe src?

I have the repo running locally (node v8.9.1) but if I click on an article I get a "gatsby.js development 404" page.

There's not a page yet at /learn-css-grid-in-5-minutes/

Create a React.js component in your site directory at src/pages/learn-css-grid-in-5-minutes.js and this page will automatically refresh to show the new page component you created.

[Bouncey]

Hi @nikrb I have just push a big update which moved all the pages into a new folder. Please be sure to git pull --rebase upstream master before going any further as you will likely get some merge conflicts if you raise a PR.

Thanks for taking this on, I don't know why you would get the dev-404, try the rebase and yarn install to see if it helps.

[nikrb]

Hi @Bouncey did the pull rebase and re install.

missing "audio" and "video" directories gave errors, so created them.

Now I get the landing page, but when I click a story I see the following errors. I have tried http://0.0.0.0:8000 and localhost:8000.

edit: sorry I should add the article show for a second or two before the browser error appears.

client

localhost/:1 Failed to load https://search.freecodecamp.org/news/v1/increment-views/430-free-online-programming-computer-science-courses-you-can-start-in-november-6f2e5022e7a9: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.
:8000/commons.js:75630 Uncaught TypeError: Cannot read property 'status' of undefined
    at MergeMapSubscriber.project (:8000/commons.js:6882)
    at MergeMapSubscriber../node_modules/rxjs/operators/mergeMap.js.MergeMapSubscriber._tryNext (:8000/commons.js:91510)
    at MergeMapSubscriber../node_modules/rxjs/operators/mergeMap.js.MergeMapSubscriber._next (:8000/commons.js:91500)
    at MergeMapSubscriber../node_modules/rxjs/Subscriber.js.Subscriber.next (:8000/commons.js:75512)
    at MergeMapSubscriber../node_modules/rxjs/operators/mergeMap.js.MergeMapSubscriber.notifyNext (:8000/commons.js:91533)
    at InnerSubscriber../node_modules/rxjs/InnerSubscriber.js.InnerSubscriber._next (:8000/commons.js:74288)
    at InnerSubscriber../node_modules/rxjs/Subscriber.js.Subscriber.next (:8000/commons.js:75512)
    at CatchSubscriber../node_modules/rxjs/OuterSubscriber.js.OuterSubscriber.notifyNext (:8000/commons.js:74784)
    at InnerSubscriber../node_modules/rxjs/InnerSubscriber.js.InnerSubscriber._next (:8000/commons.js:74288)
    at InnerSubscriber../node_modules/rxjs/Subscriber.js.Subscriber.next (:8000/commons.js:75512)
    at Object.subscribeToResult (:8000/commons.js:98977)
    at CatchSubscriber../node_modules/rxjs/operators/catchError.js.CatchSubscriber.error (:8000/commons.js:87504)
    at MapSubscriber../node_modules/rxjs/Subscriber.js.Subscriber._error (:8000/commons.js:75551)
    at MapSubscriber../node_modules/rxjs/Subscriber.js.Subscriber.error (:8000/commons.js:75525)
    at MapSubscriber../node_modules/rxjs/Subscriber.js.Subscriber._error (:8000/commons.js:75551)
    at MapSubscriber../node_modules/rxjs/Subscriber.js.Subscriber.error (:8000/commons.js:75525)
    at AjaxSubscriber../node_modules/rxjs/Subscriber.js.Subscriber._error (:8000/commons.js:75551)
    at AjaxSubscriber../node_modules/rxjs/Subscriber.js.Subscriber.error (:8000/commons.js:75525)
    at XMLHttpRequest.xhrReadyStateChange (:8000/commons.js:80975)
:8000/commons.js:102320 [HMR] connected

server

(xenial)nik@localhost:~/projects/news$ yarn run dev
yarn run v1.3.2
$ yarn slugsafe && node --max-old-space-size=7168 ./node_modules/gatsby/dist/bin/gatsby develop
$ node slugSafe.js
success delete html files from previous builds — 0.033 s
success open and validate gatsby-config.js — 0.021 s

  gatsby is not running in production, view counts will be
  simulated using random numbers (1 - 1,000,000)

success copy gatsby files — 0.192 s
success onPreBootstrap — 0.075 s
success source and transform nodes — 8.693 s
success building schema — 3.806 s
success createLayouts — 0.053 s
success createPages — 0.267 s
success createPagesStatefully — 0.144 s
success onPreExtractQueries — 0.008 s
success update schema — 2.257 s
success extract queries from components — 0.817 s
success run graphql queries — 30.822 s
success write out page data — 0.018 s
success write out redirect data — 0.010 s
success onPostBootstrap — 0.002 s

info bootstrap finished - 54.781 s

 DONE  Compiled successfully in 50513ms                                                                  00:46:20


You can now view freecodecamp-news in the browser.

  http://0.0.0.0:8000/

Note that the development build is not optimized.
To create a production build, use gatsby build

 WAIT  Compiling...                                                                                      00:46:21

 DONE  Compiled successfully in 3838ms                                                                   00:46:26

[nikrb]

How do I view the pages after I have updated them?
e.g. I have tried localhost:8000/1-000-days-of-freecodecamp for 1-000-days-of-freecodecamp.md but no luck

[QuincyLarson]

@nikrb I would install httpster. Then you can run the command httpster -p 3001 and open localhost:3001 to view the guide running locally.

[nikrb]

sorry @QuincyLarson but I don't get it. when I open localhost:3001 I see a directory listing. I've tried clicking various things, but I just get the file text. Clicking on md files shows a download dialogue.

[QuincyLarson]

@nikrb Hm... try running npm run dev then you should be able to navigate to localhost:8000

[nikrb]

@QuincyLarson yes that's the ticket, but how do I view, say, the article 1-000-days-of-freecodecamp, so I can check my updates to the md file?

[QuincyLarson]

@nikrb You should be able to navigate to it. I'm not sure where that specific file is in the directory tree, but most of them should be accessible just by going to localhost:8000 and clicking around in the UI.

[nikrb]

@QuincyLarson I have found the md files no problem.

Regarding clicking around the UI, there is a search bar. Tried searching for the "1000 days of freecodecamp", using single words and combinations, but it doesn't show up. e.g. "1000" shows articles about SQL in the main and "1000 days" returns no results.

The "Load More" button at the bottom of the landing page only seems to work once and I don't see any errors in the server or client.

I guess I'm looking at the code next time :)

[QuincyLarson]

@nikrb Yes - I tried that query too and I was unable to find the article using that. I think it may be a quirk with the search. I'll mention @Bouncey here, who implemented the search, in case he has some idea why that guide article isn't showing up in the search results.

[Bouncey]

That article isn't in the search as News isn't ready for release yet. The search component is using the live version of search. You should get results for guide, youtube and challenge.

I am working on dockerising the search repo so it can be run locally with minimal fuss, (without having to install and configure elasticsearch) this should help whilst news it in development, and for testing any search features across all repos.

At the minute, the only navigation we have is direct URL. Each article can be found at /${fileName-without-.md}

[nikrb]

hey guys, I tried the first few md files but got the error below. for example: http://localhost:8000/1-000-days-of-freecodecamp .

There's not a page yet at /1-000-days-of-freecodecamp

Create a React.js component in your site directory at src/pages/1-000-days-of-freecodecamp.js and this page will automatically refresh to show the new page component you created.

Note the path in the error message, src/pages. The files are now in src/resource/text. Seems unlikely, but is there a build step to generate the component js files?

I'll have a look through the code ... any suggestions appreciated :)

[Bouncey]

Ah yes, sorry about that @nikrb, I was in the middle of refactoring the file structure, and I haven't gotten round to completing it yet. We should shelve this until I get it all working again, and I can ping you when it's good to go.

Being such a new project, things are pretty fluid as you can imagine.

[nikrb]

yes of course @Bouncey no worries. If I can find the code locally I'll make a start on the md file changes.

[nikrb]

@Bouncey Hi, howze it going?
Thought I would update and take another look, see if I could do anything.
I see the following error when I run (node -v 8.9.1):

(xenial)nik@localhost:~/projects/news$ yarn dev
yarn run v1.5.1
$ yarn slugsafe && node --max-old-space-size=7168 ./node_modules/gatsby/dist/bin/gatsby develop
$ node slugSafe.js
success delete html files from previous builds — 0.033 s
success open and validate gatsby-config.js — 0.014 s

  gatsby is not running in production, view counts will be
  simulated using random numbers (1 - 1,000,000)
  
success copy gatsby files — 0.099 s
success onPreBootstrap — 0.025 s
success source and transform nodes — 0.212 s
success building schema — 0.583 s
success createLayouts — 0.038 s
error UNHANDLED EXCEPTION


  TypeError: Cannot destructure property `edges` of 'undefined' or 'null'.
  
  - gatsby-node.js:72 ForkJoinSubscriber.forkJoin [as resultSelector]
    /home/nik/projects/news/gatsby-node.js:72:19
  
  - ForkJoinObservable.js:195 ForkJoinSubscriber.notifyComplete
    [news]/[rxjs]/observable/ForkJoinObservable.js:195:57
  
  - InnerSubscriber.js:30 InnerSubscriber._complete
    [news]/[rxjs]/InnerSubscriber.js:30:21
  
  - Subscriber.js:115 InnerSubscriber.Subscriber.complete
    [news]/[rxjs]/Subscriber.js:115:18
  
  - PromiseObservable.js:67 
    [news]/[rxjs]/observable/PromiseObservable.js:67:36
  
  - es6-promise.js:409 tryCatch
    [news]/[es6-promise]/dist/es6-promise.js:409:12
  
  - es6-promise.js:424 invokeCallback
    [news]/[es6-promise]/dist/es6-promise.js:424:13
  
  - es6-promise.js:398 publish
    [news]/[es6-promise]/dist/es6-promise.js:398:7
  
  - es6-promise.js:128 flush
    [news]/[es6-promise]/dist/es6-promise.js:128:5
  
  - next_tick.js:131 _combinedTickCallback
    internal/process/next_tick.js:131:7
  
  - next_tick.js:180 process._tickCallback
    internal/process/next_tick.js:180:9
  

error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c yarn slugsafe && node --max-old-space-size=7168 ./node_modules/gatsby/dist/bin/gatsby develop
Directory: /home/nik/projects/news
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "/home/nik/projects/news/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Am I missing something?