Switch from Jekyll to next.js for 0.9 OnboardingPi Porftolio (0.9)

[trainfarb]

0.9/9.0 YOU: 0.9 OnboardingPi by oS3, ourStory, hu3agency, ep0_daoTeaching, trainfarb

1.8 NEED: Jekyll was good for me to spin up my initial idea, but it's outdated and there's not much more I can do with the framework as the project evolves.

8.1 GO: https://youtu.be/uXFbi9Nqzc8: Was avoiding Next.js because I assumed Jekyll was easier, but after watching this video it was clear that this was the way to go

• Next.js sites can be served up to Github Pages just like Jekyll and there are tons of awesome tutorials and templates online for the growing community.

2.7 SEARCH: Looked up some different tutorials and websites for templates:

• https://blog.logrocket.com/best-next-js-starter-templates/#thankyounext
• https://suncel.io: This looked promising, but also seemed too complicated for how I wanted to get started and want to keep as much in GitHub as possible

7.2 FIND: https://youtu.be/Hiabp1GY8fA: landed on this because it lets me use markdown which is what I wanted from Jekyll, but also is customizable with html and css which I'm really good at from designing nOrm's frontend

3.6 TAKE:

• Next.js is one of the most popular frontend frameworks, so onboarding people with this will give them a site that tons of developers want to contribute to
• Github Pages integration with Actions give people the ability to host their onboarding site completely for free

4.5 RETURN:

• Ultimately, this Next.js site is the foundation of the portfolio and the GitHub account backend is the wallet of the portfolioWallet
• Onboard people by saying they can create their platform ecosystem with GitHub and Next.js
• Really marketable skills that people will be drawn to

5.4 CHANGED:

• Call to Action - clone the repository and onboarding project for free to get up and running with your portfolioWallet
• Call to Action - create a pull request to join the ourStory.network and build your platform ecosystem with an onboarding agent

[trainfarb]

Dediced to create this in the same directory of the app that already exists. These are the presets that I used. Taking note because they weren't in the video tutorial that I'm watching

[trainfarb]

Kept getting an error when trying to run. Saw something that said node was outdated and still couldn't upgrade. Think this is the solution: https://youtu.be/Ue6g4udgbdI

This worked!!! Only took me 45 minutes to get to this point (yikes)

DOCUMENTATION: Ensure people install the latest version of node from the website before they try to create a next.js site with our process

[trainfarb]

Loom Video after first hour of work: https://www.loom.com/share/e89c18ec9abe47f6a888985b924839ee?sid=9027687b-2462-4eaa-bd91-c738d12cfc35

Took me 45 minutes to work through all of the issues. Then, the default functions of what I was working with didn't align with the video. I'm no pro in javascript, react, or next, so I found a tutorial from a month ago that I'll work on in the next pass.

https://youtu.be/MqmzrQ1MNG8

[trainfarb]

https://youtu.be/MqmzrQ1MNG8

This video decided to use ESLint, so deleting files to start over to follow this.

This is using Sanity.io which I don't want. I want everything to be in one place. Going back to original video now that I've seen how much he's stripped away the original file.

https://youtu.be/Hiabp1GY8fA

Just added header and footer with this tutorial and realizing the fonts aren't working, so I'll be looking up a way to resolve the conflict that's being shown in the app.

This resolved all errors: https://stackoverflow.com/questions/69238794/cannot-find-module-next-or-its-corresponding-type-declarations

After resolving that issue, fonts still weren't loading. Found another articles to help with what I think the issue is. https://www.codeconcisely.com/posts/tailwind-css-unknown-at-rules/

[trainfarb]

LOOM After 2nd hour of work: https://www.loom.com/share/348d4659c7e94136abe6b352b83712f9?sid=bd1b4af3-fcd3-42b9-a987-019e53366e62

Switched back and forth until landing on the tutorial that will allow for markdown. Had some issues with error messages and fonts not loading. General error messages got resolves (above), but still need to work on the font size issue in the next go around. Soon enough I'll

After 2 hours...I'm 9:11 into the video

And this is what the app looks like lolz...

I missed coding and am enjoying this battle...looking forward to getting over the hump so the rest of the video can go smooth.

[trainfarb]

https://www.codeconcisely.com/posts/tailwind-css-unknown-at-rules/ This cleared up the at warning, but still wasn't seeing the fonts rendering properly

---

By randomly commenting out the import.global.css, the proper text styles started loading. I think this will get flushed out when the tutorial starts styling

time to keep going

---

[trainfarb]

LOOM After 3rd hour of work: https://www.loom.com/share/564b261c0a9942679d945252eecffa78?sid=2ef8635a-7374-43dc-a9a9-10d020dff32d

Got to 23:00 into the tutorial. Making good progress now. Here's what the app looks like now: Home Page

Post Page

Good to move onto hour 4

[trainfarb]

LOOM After 4th Hour of Work: https://www.loom.com/share/cc8b68fb69f3466c9989e5f2722b92c3?sid=694f32a1-7f4d-4e43-8857-b9ded23618d7

Got to 46:00 in the video. Styled the homepage with tailwind.css. Here's how it looks now:

[trainfarb]

LOOM After 5th Hour of Work: https://www.loom.com/share/8231ee49ec8f466890f9c3a4931fe555?sid=50999090-d641-4496-9961-d7e6478dd0bd

I got through the design of each page. Ran into two errors that I worked through. One was from the html syntax that I had in b09onboarding from the Jekyll site. I took that page out to resolve and will add back in on the next pass in plain markdown for simplicity. Also, the images weren't loading at first, but I noticed I just placed them in the wrong folder.

Here's how the site looks now. This matches what's in the tutorial.

Here's a post page:

I'll obviously want to change the design quite a bit, but this is great for the initial version for onboarding.

[trainfarb]

About to start 6th hour. This will be dedicated to going through each of the posts to get clear on what I want the final product to be for people who are onboarding. This will be the first iteration of the portfolioWallet (Web5 Wallet for GitHub) that a person creates for their platform ecosystem.

• The 7 onboarding questions will be all that is asked in the first part of this
• Want it to be really easy for people to get up and running with a quick return on investment and dopamine hit
• These more in depth questions will be saved for governance since they're related to defining the main players in the ecosystem

LOOM Video after 6th hour: https://www.loom.com/share/d8dcd673cd3f41ce9e230c668ad252d3?sid=d5606d6a-57fe-46b8-8d9f-05140e852804

How page looks after completing this session: https://github.com/ourStoryNetwork/lp09-onboarding-platform/assets/8133349/24c683d7-d819-4205-ab2f-d7c88901d770

[trainfarb]

About to start 7th hour. Complete 09onboarding and walk through each of the rest as an introduction to each of the repositories that'll be created.

LOOM Video after 7th hour: https://www.loom.com/share/15b4b8a5cb454a099073ad310422e725?sid=86a946c0-a3bd-4932-b3dc-4fe0d78c4a14

[trainfarb]

Today's focus will be on wrapping up the initial release of the 0.9 OnboardingPi Portfolio with Next.js. I want this to look really good, so I'll be bringing in designs from TailwindUI.

• This will be the default view for each page: https://tailwindui.com/components/application-ui/data-display/description-lists
• This could be good as a footer for each page to introduce their software catalog: https://tailwindui.com/components/ecommerce/components/product-features
• 404 page: https://tailwindui.com/components/marketing/feedback/404-pages

Last week, I was turning a lot of this into documentation, but all of that is meant for the project wiki. I will maintain focus on presenting the final responses for each beat rather than explaining all of the steps. We have each of these platforms for a reason.

[trainfarb]

I found this video and am switching from the markdown structure to my own page structure: https://youtu.be/zbYBgy_ChGY

Doing this so I can more easily take advantage of the Tailwind UI free templates.

[trainfarb]

Part 7 / 8th hour Tasks

• [x] Add new page structure for GitHub Pages site
• [x] Update tab spacing in VS Code: https://stackoverflow.com/questions/34174207/how-to-change-indentation-in-visual-studio-code
• [ ] Add header with Onboarding, Training, Governance, and Operations as visible with a list for more
  • [x] Add Headless UI to the project: https://headlessui.com/react/menu
  • [x] Add useState functionality to the project: https://stackoverflow.com/questions/76195439/why-i-cannot-use-usestate-in-a-child-component-in-next-js-13
  • [x] Add heroicons to the project: https://stackoverflow.com/questions/68809554/how-to-fix-module-not-found-cant-resolve-heroicons-react-solid-in-react-app
  • [ ] Add metadata back into the main page
• [ ] Populate the each of the platform pages with metadata: https://tailwindui.com/components/application-ui/data-display/description-lists
• [ ] Create a global variables file so people can update their responses in a single place - comments can be questions
• [ ] Add black and white cover photo for each page heading
• [ ] Add software catalog footer for each page: https://tailwindui.com/components/ecommerce/components/product-features
• [ ] Add footer
• [ ] Deploy to GitHub Pages
• [ ] Summarize these notes on Github Discussions and share to social media

LOOM Video after 8th hour: https://www.loom.com/share/bd9c47c4baaa4ef9a55ee34c7bd9ed04?sid=75f2ddb5-980c-41c2-b50c-ba02a22ca59b

[trainfarb]

Part 8 / 9th hour Tasks

• [x] Add new page structure for GitHub Pages site
• [x] Update tab spacing in VS Code: https://stackoverflow.com/questions/34174207/how-to-change-indentation-in-visual-studio-code
• [ ] Add header with Onboarding, Training, Governance, and Operations as visible with a list for more
  • [x] Add Headless UI to the project: https://headlessui.com/react/menu
  • [x] Add useState functionality to the project: https://stackoverflow.com/questions/76195439/why-i-cannot-use-usestate-in-a-child-component-in-next-js-13
  • [x] Add heroicons to the project: https://stackoverflow.com/questions/68809554/how-to-fix-module-not-found-cant-resolve-heroicons-react-solid-in-react-app
  • [x] Turn header links into "Manifesto (The Browser Company Remix)", "Protocol (Nostr remix)", "Platforms (list)", "Join ->"
  • [x] Add links to header: https://nextjs.org/docs/pages/api-reference/components/link
  • [x] Correct last error message: https://stackoverflow.com/questions/47848778/parameter-implicitly-has-an-any-type
  • [ ] Create and import a header component so I can add metadata back into the main page
• [ ] Populate the each of the platform pages with metadata: https://tailwindui.com/components/application-ui/data-display/description-lists
• [ ] Create a global variables file so people can update their responses in a single place - comments can be questions
• [ ] Add black and white cover photo for each page heading
• [ ] Add software catalog footer for each page: https://tailwindui.com/components/ecommerce/components/product-features
• [ ] Add footer
• [ ] Deploy to GitHub Pages
• [ ] Confirm platform links don't need to be clicked twice in production to work (that's what happened when in development)
• [ ] Summarize these notes on Github Discussions and share to social media

LOOM Video after 9th hour: https://www.loom.com/share/bd9c47c4baaa4ef9a55ee34c7bd9ed04?sid=b98d59e9-8838-4578-addb-3f588118f423

[trainfarb]

Part 9 / 10th hour Tasks

• [x] Add new page structure for GitHub Pages site
• [x] Update tab spacing in VS Code: https://stackoverflow.com/questions/34174207/how-to-change-indentation-in-visual-studio-code
• [x] Add header with Onboarding, Training, Governance, and Operations as visible with a list for more
  • [x] Add Headless UI to the project: https://headlessui.com/react/menu
  • [x] Add useState functionality to the project: https://stackoverflow.com/questions/76195439/why-i-cannot-use-usestate-in-a-child-component-in-next-js-13
  • [x] Add heroicons to the project: https://stackoverflow.com/questions/68809554/how-to-fix-module-not-found-cant-resolve-heroicons-react-solid-in-react-app
  • [x] Turn header links into "Manifesto (The Browser Company Remix)", "Protocol (Nostr remix)", "Platforms (list)", "Join ->"
  • [x] Add links to header: https://nextjs.org/docs/pages/api-reference/components/link
  • [x] Correct last error message: https://stackoverflow.com/questions/47848778/parameter-implicitly-has-an-any-type
  • [x] Bring header back into layouts page to keep moving forward - worry about metadata later
  • [x] Remove platforms dropdown menu (too cluttered) and add a platforms page
  • [x] Remove Disclosure and Popover from headless UI and header template to simplify
  • [x] Add External link for GitHub link https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/
• [ ] Populate the each of the platform pages with ourStory responses: https://tailwindui.com/components/application-ui/data-display/description-lists
  • [x] Add Spotify plugin for react: https://www.npmjs.com/package/react-spotify-embed?activeTab=readme
• [ ] Add stacked lists for the platform page: https://tailwindui.com/components/application-ui/lists/stacked-lists
• [ ] Create a global variables file so people can update their responses in a single place - comments can be questions
• [ ] Add black and white cover photo for each page heading
• [ ] Add software catalog footer for each page: https://tailwindui.com/components/ecommerce/components/product-features
• [ ] Add footer
• [ ] Deploy to GitHub Pages
• [ ] Confirm platform links don't need to be clicked twice in production to work (that's what happened when in development)
• [ ] Summarize these notes on Github Discussions and share to social media
• [ ] Create and import a header component so I can add metadata back into the main page

LOOM Video after 10th hour: https://www.loom.com/share/ba2e07afd3604e3793d615259defae3a?sid=4b059b2c-dce3-4756-b46a-065176624ce4

[trainfarb]

Part 10 / 11th hour Tasks

• [x] Add new page structure for GitHub Pages site
• [x] Update tab spacing in VS Code: https://stackoverflow.com/questions/34174207/how-to-change-indentation-in-visual-studio-code
• [x] Add header with Onboarding, Training, Governance, and Operations as visible with a list for more
  • [x] Add Headless UI to the project: https://headlessui.com/react/menu
  • [x] Add useState functionality to the project: https://stackoverflow.com/questions/76195439/why-i-cannot-use-usestate-in-a-child-component-in-next-js-13
  • [x] Add heroicons to the project: https://stackoverflow.com/questions/68809554/how-to-fix-module-not-found-cant-resolve-heroicons-react-solid-in-react-app
  • [x] Turn header links into "Manifesto (The Browser Company Remix)", "Protocol (Nostr remix)", "Platforms (list)", "Join ->"
  • [x] Add links to header: https://nextjs.org/docs/pages/api-reference/components/link
  • [x] Correct last error message: https://stackoverflow.com/questions/47848778/parameter-implicitly-has-an-any-type
  • [x] Bring header back into layouts page to keep moving forward - worry about metadata later
  • [x] Remove platforms dropdown menu (too cluttered) and add a platforms page
  • [x] Remove Disclosure and Popover from headless UI and header template to simplify
  • [x] Add External link for GitHub link https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/
• [ ] Populate the each of the platform pages with ourStory responses: https://tailwindui.com/components/application-ui/data-display/description-lists
  • [x] Add Spotify plugin for react: https://www.npmjs.com/package/react-spotify-embed?activeTab=readme
  • [x] Onboarding Metadata
  • [x] Training Metadata
  • [x] Governance Metadata
  • [ ] Operations Metadata
  • [ ] Product Metadata
  • [ ] Design Metadata
  • [ ] Story Metadata
  • [ ] Marketing Metadata
  • [ ] Publication Metadata
  • [ ] Portfolio Metadata
• [ ] Add stacked lists for the platform page: https://tailwindui.com/components/application-ui/lists/stacked-lists
• [ ] Create a global variables file so people can update their responses in a single place - comments can be questions
• [ ] Add black and white cover photo for each page heading
• [ ] Add software catalog footer for each page: https://tailwindui.com/components/ecommerce/components/product-features
• [ ] Add footer
• [ ] Deploy to GitHub Pages
• [ ] Confirm platform links don't need to be clicked twice in production to work (that's what happened when in development)
• [ ] Summarize these notes on Github Discussions and share to social media
• [ ] Create and import a header component so I can add metadata back into the main page

LOOM Video after 11th hour: https://www.loom.com/share/e6666098568941c6baf8ce3068d0d704?sid=dc429cee-f39d-412b-ac8a-8ccf2184b822

[trainfarb]

Part 11 / 12th hour Tasks

• [x] Add new page structure for GitHub Pages site
• [x] Update tab spacing in VS Code: https://stackoverflow.com/questions/34174207/how-to-change-indentation-in-visual-studio-code
• [x] Add header with Onboarding, Training, Governance, and Operations as visible with a list for more
  • [x] Add Headless UI to the project: https://headlessui.com/react/menu
  • [x] Add useState functionality to the project: https://stackoverflow.com/questions/76195439/why-i-cannot-use-usestate-in-a-child-component-in-next-js-13
  • [x] Add heroicons to the project: https://stackoverflow.com/questions/68809554/how-to-fix-module-not-found-cant-resolve-heroicons-react-solid-in-react-app
  • [x] Turn header links into "Manifesto (The Browser Company Remix)", "Protocol (Nostr remix)", "Platforms (list)", "Join ->"
  • [x] Add links to header: https://nextjs.org/docs/pages/api-reference/components/link
  • [x] Correct last error message: https://stackoverflow.com/questions/47848778/parameter-implicitly-has-an-any-type
  • [x] Bring header back into layouts page to keep moving forward - worry about metadata later
  • [x] Remove platforms dropdown menu (too cluttered) and add a platforms page
  • [x] Remove Disclosure and Popover from headless UI and header template to simplify
  • [x] Add External link for GitHub link https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/
• [ ] Populate the each of the platform pages with ourStory responses: https://tailwindui.com/components/application-ui/data-display/description-lists
  • [x] Add Spotify plugin for react: https://www.npmjs.com/package/react-spotify-embed?activeTab=readme
  • [x] Onboarding Metadata
  • [x] Training Metadata
  • [x] Governance Metadata
  • [ ] Operations Metadata
  • [x] Create structure for 0.9
  • [x] Populate metadata for 0.9 & 9.0
  • [ ] Complete operations metadata for remaining platforms
  • [ ] Product Metadata
  • [ ] Design Metadata
  • [ ] Story Metadata
  • [ ] Marketing Metadata
  • [ ] Publication Metadata
  • [ ] Portfolio Metadata
• [ ] Add stacked lists for the platform page: https://tailwindui.com/components/application-ui/lists/stacked-lists
• [ ] Create a global variables file so people can update their responses in a single place - comments can be questions
• [ ] Add black and white cover photo for each page heading
• [ ] Add software catalog footer for each page: https://tailwindui.com/components/ecommerce/components/product-features
• [ ] Add footer
• [ ] Deploy to GitHub Pages
• [ ] Confirm platform links don't need to be clicked twice in production to work (that's what happened when in development)
• [ ] Summarize these notes on Github Discussions and share to social media
• [ ] Create and import a header component so I can add metadata back into the main page

LOOM Video after 12th hour: https://www.loom.com/share/45a69f2035cf4cc9b78dbd48fc6b0e24?sid=ecc1eece-c7f2-4607-b4ae-4628ca8b53d6

[trainfarb]

Part 12 / 13th hour Tasks

• [x] Add new page structure for GitHub Pages site
• [x] Update tab spacing in VS Code: https://stackoverflow.com/questions/34174207/how-to-change-indentation-in-visual-studio-code
• [x] Add header with Onboarding, Training, Governance, and Operations as visible with a list for more
  • [x] Add Headless UI to the project: https://headlessui.com/react/menu
  • [x] Add useState functionality to the project: https://stackoverflow.com/questions/76195439/why-i-cannot-use-usestate-in-a-child-component-in-next-js-13
  • [x] Add heroicons to the project: https://stackoverflow.com/questions/68809554/how-to-fix-module-not-found-cant-resolve-heroicons-react-solid-in-react-app
  • [x] Turn header links into "Manifesto (The Browser Company Remix)", "Protocol (Nostr remix)", "Platforms (list)", "Join ->"
  • [x] Add links to header: https://nextjs.org/docs/pages/api-reference/components/link
  • [x] Correct last error message: https://stackoverflow.com/questions/47848778/parameter-implicitly-has-an-any-type
  • [x] Bring header back into layouts page to keep moving forward - worry about metadata later
  • [x] Remove platforms dropdown menu (too cluttered) and add a platforms page
  • [x] Remove Disclosure and Popover from headless UI and header template to simplify
  • [x] Add External link for GitHub link https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/
• [ ] Populate the each of the platform pages with ourStory responses: https://tailwindui.com/components/application-ui/data-display/description-lists
  • [x] Add Spotify plugin for react: https://www.npmjs.com/package/react-spotify-embed?activeTab=readme
  • [x] Onboarding Metadata
  • [x] Training Metadata
  • [x] Governance Metadata
  • [x] Operations Metadata
  • [x] Create structure for 0.9
  • [x] Populate metadata for 0.9 & 9.0
  • [x] Update template for pitch deck intro deliverable: https://www.figma.com/community/file/1275831803883143109/ourStory-0.9_b27-Onboarding-Pitch-Deck-Intro
  • [x] Create repositories as deliverables for 6.3-4.5
  • [x] Apply for GitHub Sponsors for ourStory
  • [x] Complete operations metadata for remaining platforms
  • [ ] Product Metadata
  • [ ] Design Metadata
  • [ ] Story Metadata
  • [ ] Marketing Metadata
  • [ ] Publication Metadata
  • [ ] Portfolio Metadata
• [ ] Add stacked lists for the platform page: https://tailwindui.com/components/application-ui/lists/stacked-lists
• [ ] Create a global variables file so people can update their responses in a single place - comments can be questions
• [ ] Add black and white cover photo for each page heading
• [ ] Add software catalog footer for each page: https://tailwindui.com/components/ecommerce/components/product-features
• [ ] Add footer
• [ ] Deploy to GitHub Pages
• [ ] Confirm platform links don't need to be clicked twice in production to work (that's what happened when in development)
• [ ] Summarize these notes on Github Discussions and share to social media
• [ ] Create and import a header component so I can add metadata back into the main page

LOOM Video after 13th hour: https://www.loom.com/share/71ef867ba1914efeb8aae01cab7d9a33?sid=c890b978-4948-4f4b-b112-41786c681a26

[trainfarb]

Part 13 / 14th hour Tasks

• [x] Add new page structure for GitHub Pages site
• [x] Update tab spacing in VS Code: https://stackoverflow.com/questions/34174207/how-to-change-indentation-in-visual-studio-code
• [x] Add header with Onboarding, Training, Governance, and Operations as visible with a list for more
  • [x] Add Headless UI to the project: https://headlessui.com/react/menu
  • [x] Add useState functionality to the project: https://stackoverflow.com/questions/76195439/why-i-cannot-use-usestate-in-a-child-component-in-next-js-13
  • [x] Add heroicons to the project: https://stackoverflow.com/questions/68809554/how-to-fix-module-not-found-cant-resolve-heroicons-react-solid-in-react-app
  • [x] Turn header links into "Manifesto (The Browser Company Remix)", "Protocol (Nostr remix)", "Platforms (list)", "Join ->"
  • [x] Add links to header: https://nextjs.org/docs/pages/api-reference/components/link
  • [x] Correct last error message: https://stackoverflow.com/questions/47848778/parameter-implicitly-has-an-any-type
  • [x] Bring header back into layouts page to keep moving forward - worry about metadata later
  • [x] Remove platforms dropdown menu (too cluttered) and add a platforms page
  • [x] Remove Disclosure and Popover from headless UI and header template to simplify
  • [x] Add External link for GitHub link https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/
• [ ] Populate the each of the platform pages with ourStory responses: https://tailwindui.com/components/application-ui/data-display/description-lists
  • [x] Add Spotify plugin for react: https://www.npmjs.com/package/react-spotify-embed?activeTab=readme
  • [x] Onboarding Metadata
  • [x] Training Metadata
  • [x] Governance Metadata
  • [x] Operations Metadata
  • [x] Create structure for 0.9
  • [x] Populate metadata for 0.9 & 9.0
  • [x] Update template for pitch deck intro deliverable: https://www.figma.com/community/file/1275831803883143109/ourStory-0.9_b27-Onboarding-Pitch-Deck-Intro
  • [x] Create repositories as deliverables for 6.3-4.5
  • [x] Apply for GitHub Sponsors for ourStory
  • [x] Complete operations metadata for remaining platforms
  • [x] Product Metadata
  • [x] Design Metadata
  • [ ] Story Metadata
  • [ ] Marketing Metadata
  • [ ] Publication Metadata
  • [ ] Portfolio Metadata
• [ ] Add stacked lists for the platform page: https://tailwindui.com/components/application-ui/lists/stacked-lists
• [ ] Create a global variables file so people can update their responses in a single place - comments can be questions
• [ ] Add black and white cover photo for each page heading
• [ ] Add software catalog footer for each page: https://tailwindui.com/components/ecommerce/components/product-features
• [ ] Add footer
• [ ] Deploy to GitHub Pages
• [ ] Confirm platform links don't need to be clicked twice in production to work (that's what happened when in development)
• [ ] Summarize these notes on Github Discussions and share to social media
• [ ] Create and import a header component so I can add metadata back into the main page

LOOM Video after 14th hour: https://www.loom.com/share/8aa59132bfbb4e738cb347dfbc01285d?sid=713646ad-632f-4ff3-9c5f-a4ad94721ead

[trainfarb]

Part 14 / 15th hour Tasks

• [x] Add new page structure for GitHub Pages site
• [x] Update tab spacing in VS Code: https://stackoverflow.com/questions/34174207/how-to-change-indentation-in-visual-studio-code
• [x] Add header with Onboarding, Training, Governance, and Operations as visible with a list for more
  • [x] Add Headless UI to the project: https://headlessui.com/react/menu
  • [x] Add useState functionality to the project: https://stackoverflow.com/questions/76195439/why-i-cannot-use-usestate-in-a-child-component-in-next-js-13
  • [x] Add heroicons to the project: https://stackoverflow.com/questions/68809554/how-to-fix-module-not-found-cant-resolve-heroicons-react-solid-in-react-app
  • [x] Turn header links into "Manifesto (The Browser Company Remix)", "Protocol (Nostr remix)", "Platforms (list)", "Join ->"
  • [x] Add links to header: https://nextjs.org/docs/pages/api-reference/components/link
  • [x] Correct last error message: https://stackoverflow.com/questions/47848778/parameter-implicitly-has-an-any-type
  • [x] Bring header back into layouts page to keep moving forward - worry about metadata later
  • [x] Remove platforms dropdown menu (too cluttered) and add a platforms page
  • [x] Remove Disclosure and Popover from headless UI and header template to simplify
  • [x] Add External link for GitHub link https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/
• [ ] Populate the each of the platform pages with ourStory responses: https://tailwindui.com/components/application-ui/data-display/description-lists
  • [x] Add Spotify plugin for react: https://www.npmjs.com/package/react-spotify-embed?activeTab=readme
  • [x] Onboarding Metadata
  • [x] Training Metadata
  • [x] Governance Metadata
  • [x] Operations Metadata
  • [x] Create structure for 0.9
  • [x] Populate metadata for 0.9 & 9.0
  • [x] Update template for pitch deck intro deliverable: https://www.figma.com/community/file/1275831803883143109/ourStory-0.9_b27-Onboarding-Pitch-Deck-Intro
  • [x] Create repositories as deliverables for 6.3-4.5
  • [x] Apply for GitHub Sponsors for ourStory
  • [x] Complete operations metadata for remaining platforms
  • [x] Product Metadata
  • [x] Design Metadata
  • [x] Story Metadata
  • [x] Sign up for StoryMaps
  • [ ] Marketing Metadata
  • [ ] Publication Metadata
  • [ ] Portfolio Metadata
• [ ] Add stacked lists for the platform page: https://tailwindui.com/components/application-ui/lists/stacked-lists
• [ ] Create a global variables file so people can update their responses in a single place - comments can be questions
• [ ] Add black and white cover photo for each page heading
• [ ] Add software catalog footer for each page: https://tailwindui.com/components/ecommerce/components/product-features
• [ ] Add footer
• [ ] Deploy to GitHub Pages
• [ ] Confirm platform links don't need to be clicked twice in production to work (that's what happened when in development)
• [ ] Summarize these notes on Github Discussions and share to social media
• [ ] Create and import a header component so I can add metadata back into the main page

LOOM Video after 15th hour: https://www.loom.com/share/3427b74c441640fda2e0afc624339c35?sid=84305844-3124-4a47-a07c-835564effda9

[trainfarb]

Part 15 / 16th hour Tasks

• [x] Add new page structure for GitHub Pages site
• [x] Update tab spacing in VS Code: https://stackoverflow.com/questions/34174207/how-to-change-indentation-in-visual-studio-code
• [x] Add header with Onboarding, Training, Governance, and Operations as visible with a list for more
  • [x] Add Headless UI to the project: https://headlessui.com/react/menu
  • [x] Add useState functionality to the project: https://stackoverflow.com/questions/76195439/why-i-cannot-use-usestate-in-a-child-component-in-next-js-13
  • [x] Add heroicons to the project: https://stackoverflow.com/questions/68809554/how-to-fix-module-not-found-cant-resolve-heroicons-react-solid-in-react-app
  • [x] Turn header links into "Manifesto (The Browser Company Remix)", "Protocol (Nostr remix)", "Platforms (list)", "Join ->"
  • [x] Add links to header: https://nextjs.org/docs/pages/api-reference/components/link
  • [x] Correct last error message: https://stackoverflow.com/questions/47848778/parameter-implicitly-has-an-any-type
  • [x] Bring header back into layouts page to keep moving forward - worry about metadata later
  • [x] Remove platforms dropdown menu (too cluttered) and add a platforms page
  • [x] Remove Disclosure and Popover from headless UI and header template to simplify
  • [x] Add External link for GitHub link https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/
• [ ] Populate the each of the platform pages with ourStory responses: https://tailwindui.com/components/application-ui/data-display/description-lists
  • [x] Add Spotify plugin for react: https://www.npmjs.com/package/react-spotify-embed?activeTab=readme
  • [x] Onboarding Metadata
  • [x] Training Metadata
  • [x] Governance Metadata
  • [x] Operations Metadata
  • [x] Create structure for 0.9
  • [x] Populate metadata for 0.9 & 9.0
  • [x] Update template for pitch deck intro deliverable: https://www.figma.com/community/file/1275831803883143109/ourStory-0.9_b27-Onboarding-Pitch-Deck-Intro
  • [x] Create repositories as deliverables for 6.3-4.5
  • [x] Apply for GitHub Sponsors for ourStory
  • [x] Complete operations metadata for remaining platforms
  • [x] Product Metadata
  • [x] Design Metadata
  • [x] Story Metadata
  • [x] Sign up for StoryMaps
  • [x] Marketing Metadata
  • [ ] Publication Metadata
  • [ ] Portfolio Metadata
• [ ] Add stacked lists for the platform page: https://tailwindui.com/components/application-ui/lists/stacked-lists
• [ ] Create a global variables file so people can update their responses in a single place - comments can be questions
• [ ] Add black and white cover photo for each page heading
• [ ] Add software catalog footer for each page: https://tailwindui.com/components/ecommerce/components/product-features
• [ ] Add footer
• [ ] Deploy to GitHub Pages
• [ ] Confirm platform links don't need to be clicked twice in production to work (that's what happened when in development)
• [ ] Summarize these notes on Github Discussions and share to social media
• [ ] Create and import a header component so I can add metadata back into the main page

LOOM Video after 16th hour: https://www.loom.com/share/a7415588e0ed4482a8f8cb5e6e19b234?sid=58708b1d-aa6a-414f-80d6-f0815ed0c9e1

[trainfarb]

Part 16 / 17th hour Tasks: Complete publication & portfolio metadata; structure platform page

• [x] Add new page structure for GitHub Pages site
• [x] Update tab spacing in VS Code: https://stackoverflow.com/questions/34174207/how-to-change-indentation-in-visual-studio-code
• [x] Add header with Onboarding, Training, Governance, and Operations as visible with a list for more
  • [x] Add Headless UI to the project: https://headlessui.com/react/menu
  • [x] Add useState functionality to the project: https://stackoverflow.com/questions/76195439/why-i-cannot-use-usestate-in-a-child-component-in-next-js-13
  • [x] Add heroicons to the project: https://stackoverflow.com/questions/68809554/how-to-fix-module-not-found-cant-resolve-heroicons-react-solid-in-react-app
  • [x] Turn header links into "Manifesto (The Browser Company Remix)", "Protocol (Nostr remix)", "Platforms (list)", "Join ->"
  • [x] Add links to header: https://nextjs.org/docs/pages/api-reference/components/link
  • [x] Correct last error message: https://stackoverflow.com/questions/47848778/parameter-implicitly-has-an-any-type
  • [x] Bring header back into layouts page to keep moving forward - worry about metadata later
  • [x] Remove platforms dropdown menu (too cluttered) and add a platforms page
  • [x] Remove Disclosure and Popover from headless UI and header template to simplify
  • [x] Add External link for GitHub link https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/
• [ ] Populate the each of the platform pages with ourStory responses: https://tailwindui.com/components/application-ui/data-display/description-lists
  • [x] Add Spotify plugin for react: https://www.npmjs.com/package/react-spotify-embed?activeTab=readme
  • [x] Onboarding Metadata
  • [x] Training Metadata
  • [x] Governance Metadata
  • [x] Operations Metadata
  • [x] Create structure for 0.9
  • [x] Populate metadata for 0.9 & 9.0
  • [x] Update template for pitch deck intro deliverable: https://www.figma.com/community/file/1275831803883143109/ourStory-0.9_b27-Onboarding-Pitch-Deck-Intro
  • [x] Create repositories as deliverables for 6.3-4.5
  • [x] Apply for GitHub Sponsors for ourStory
  • [x] Complete operations metadata for remaining platforms
  • [x] Product Metadata
  • [x] Design Metadata
  • [x] Story Metadata
  • [x] Sign up for StoryMaps
  • [x] Marketing Metadata
  • [x] Publication Metadata
  • [x] Portfolio Metadata
• [ ] Add teams sections for the platform page: https://tailwindui.com/components/marketing/sections/team-sections
  • [x] Add descriptions for each team
  • [ ] Add description for the platform page
  • [ ] Add links to each platform page
  • [ ] Add photos for each platform page (via unsplash?)
• [ ] Create a global variables file so people can update their responses in a single place - comments can be questions
• [ ] Add black and white cover photo for each page heading
• [ ] Add software catalog footer for each page: https://tailwindui.com/components/ecommerce/components/product-features
• [ ] Add footer
• [ ] Deploy to GitHub Pages
• [ ] Confirm platform links don't need to be clicked twice in production to work (that's what happened when in development)
• [ ] Summarize these notes on Github Discussions and share to social media
• [ ] Create and import a header component so I can add metadata back into the main page

LOOM Video after 17th hour: https://www.loom.com/share/65c0e7b74ffe45d4853f1be878847225?sid=3a33fcb1-639f-444a-8973-2d2002fc1285

[trainfarb]

Part 17 / 18th hour Tasks: Move Platforms to home page and add links

• [x] Add new page structure for GitHub Pages site
• [x] Update tab spacing in VS Code: https://stackoverflow.com/questions/34174207/how-to-change-indentation-in-visual-studio-code
• [x] Add header with Onboarding, Training, Governance, and Operations as visible with a list for more
  • [x] Add Headless UI to the project: https://headlessui.com/react/menu
  • [x] Add useState functionality to the project: https://stackoverflow.com/questions/76195439/why-i-cannot-use-usestate-in-a-child-component-in-next-js-13
  • [x] Add heroicons to the project: https://stackoverflow.com/questions/68809554/how-to-fix-module-not-found-cant-resolve-heroicons-react-solid-in-react-app
  • [x] Turn header links into "Manifesto (The Browser Company Remix)", "Protocol (Nostr remix)", "Platforms (list)", "Join ->"
  • [x] Add links to header: https://nextjs.org/docs/pages/api-reference/components/link
  • [x] Correct last error message: https://stackoverflow.com/questions/47848778/parameter-implicitly-has-an-any-type
  • [x] Bring header back into layouts page to keep moving forward - worry about metadata later
  • [x] Remove platforms dropdown menu (too cluttered) and add a platforms page
  • [x] Remove Disclosure and Popover from headless UI and header template to simplify
  • [x] Add External link for GitHub link https://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/
• [ ] Populate the each of the platform pages with ourStory responses: https://tailwindui.com/components/application-ui/data-display/description-lists
  • [x] Add Spotify plugin for react: https://www.npmjs.com/package/react-spotify-embed?activeTab=readme
  • [x] Onboarding Metadata
  • [x] Training Metadata
  • [x] Governance Metadata
  • [x] Operations Metadata
  • [x] Create structure for 0.9
  • [x] Populate metadata for 0.9 & 9.0
  • [x] Update template for pitch deck intro deliverable: https://www.figma.com/community/file/1275831803883143109/ourStory-0.9_b27-Onboarding-Pitch-Deck-Intro
  • [x] Create repositories as deliverables for 6.3-4.5
  • [x] Apply for GitHub Sponsors for ourStory
  • [x] Complete operations metadata for remaining platforms
  • [x] Product Metadata
  • [x] Design Metadata
  • [x] Story Metadata
  • [x] Sign up for StoryMaps
  • [x] Marketing Metadata
  • [x] Publication Metadata
  • [x] Portfolio Metadata
• [x] Add teams sections for the platform page: https://tailwindui.com/components/marketing/sections/team-sections
  • [x] Add descriptions for each team
  • [x] Add description for the platform page
  • [x] Add links to each platform page
  • [x] Add photos for each platform page (via unsplash?)
• [x] Deploy to GitHub Pages
  • [x] Push to GitHub and hope it knows how to switch from Jekyll to Next.js on its own (fingers crossed) - build failed when I deployed, but then switched to deploy with GitHub Actions and it detected next.js. Clicked on it, that brought up a yaml file, and I just went for it. No clue what's going on. Screenshot below said to change the config file in next.config.js based on this link https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
• [ ] Create a global variables file so people can update their responses in a single place - comments can be questions
• [ ] Add black and white cover photo for each page heading
• [ ] Add software catalog footer for each page: https://tailwindui.com/components/ecommerce/components/product-features
• [ ] Add footer
• [ ] Confirm platform links don't need to be clicked twice in production to work (that's what happened when in development)
• [ ] Summarize these notes on Github Discussions and share to social media
• [ ] Create and import a header component so I can add metadata back into the main page

LOOM Video after 17th hour: https://www.loom.com/share/4a3e7549759a47a296683dcfcf6a7fbc?sid=c612d8c9-fd13-4e29-9f53-7ee91a76ad17