{"id":14967574,"url":"https://github.com/whizzbbig/floema_","last_synced_at":"2025-10-25T20:31:35.494Z","repository":{"id":44727358,"uuid":"411856108","full_name":"whizzbbig/floema_","owner":"whizzbbig","description":"A repo of Creative Course by luis henrique bizzaro on awwwards which intent to use latest techniques and also has commits according to lecture on awwwards","archived":true,"fork":false,"pushed_at":"2023-07-18T13:10:01.000Z","size":5872,"stargazers_count":73,"open_issues_count":0,"forks_count":21,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-23T14:42:26.218Z","etag":null,"topics":["glsl","javascript","nodejs","ogl","pug","scss","webgl","webpack"],"latest_commit_sha":null,"homepage":"https://floema-ice.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/whizzbbig.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-29T23:14:53.000Z","updated_at":"2024-11-27T22:13:37.000Z","dependencies_parsed_at":"2024-08-23T14:26:36.153Z","dependency_job_id":"6e6b41ed-966e-472a-969f-a4a049e62a17","html_url":"https://github.com/whizzbbig/floema_","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whizzbbig%2Ffloema_","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whizzbbig%2Ffloema_/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whizzbbig%2Ffloema_/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whizzbbig%2Ffloema_/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/whizzbbig","download_url":"https://codeload.github.com/whizzbbig/floema_/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238207644,"owners_count":19434095,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["glsl","javascript","nodejs","ogl","pug","scss","webgl","webpack"],"created_at":"2024-09-24T13:38:17.686Z","updated_at":"2025-10-25T20:31:29.989Z","avatar_url":"https://github.com/whizzbbig.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hosted and Deployed on Heroku and Vercel\n\n- [Floema on Heroku](https://floema-ice.herokuapp.com)\n- [Floema on Vercel](https://floema-ice.vercel.app)\n\n\n# webpack-boilerplate\nA boilerplate which inspired from luis henrique bizzaro course on awwwards but intent to use up-to-date technologies.\n\n\nIt has commits according to the lecture of the course \n\n# Setup\n\n`npm install`\nto install all the dependencies\n\nadd `.env` file to the folder\n\n`npm start`\nto run development in your localhost\n\n# Migration Guide from @prismicio/client v5 to v6 \n\n## Step - 1\n\n- Remove `prismic-dom` module from file by doing `npm uninstall prismic-dom`\n- Update `@prismicio/client` module \n- add `@prismicio/helpers` and `node-fetch` by doing `npm i @prismicio/helpers node-fetch@2.6.7` // don't install the latest v of node-fetch it isn't compatible\nto cjs env.\n\n## Step - 2\n- add PrismicH to the `app.js`\n```js\nconst PrismicH = require('@prismicio/helpers');\n```\n- replace the declaration of **PrismicDOM** from **PrismicH** from everywhere\n- add node-fetch to the `app.js`\n```js\nconst fetch = require('node-fetch');\n```\nthings should look like this\n\n```js\nconst fetch = require('node-fetch');\nconst logger = require('morgan');\nconst path = require('path');\nconst express = require('express');\nconst errorHandler = require('errorhandler');\nconst bodyParser = require('body-parser');\nconst methodOverride = require('method-override');\n\nconst app = express();\nconst port = process.env.PORT || 8004;\n\nconst Prismic = require('@prismicio/client');\nconst PrismicH = require('@prismicio/helpers');\nconst { application } = require('express');\nconst UAParser = require('ua-parser-js');\n```\n\n## Step - 3\nrefactor the prismic init\n```js\nconst initApi = (req) =\u003e {\n  return Prismic.createClient(process.env.PRISMIC_ENDPOINT, {\n    accessToken: process.env.PRISMIC_ACCESS_TOKEN,\n    req,\n    fetch,\n  });\n};\n```\n\n## Step - 4\nnow we have to fetch all the pages at once to resolve the issue of pages are not loading on time\nreplace this 👇 from your `app.js/handleRequest function`\n```js\n  const meta = await api.getSingle('meta');\n  const preloader = await api.getSingle('preloader');\n  const navigation = await api.getSingle('navigation');\n  const home = await api.getSingle('home');\n  const about = await api.getSingle('about');\n  const { results: collections } = await api.query( Prismic.Predicates.at('document.type', 'collection'), { fetchLinks: 'product.image' } ); // prettier-ignore\n```\nto this 👇\n```js\n  const [meta, preloader, navigation, home, about, { results: collections }] =\n    await Promise.all([\n      api.getSingle('meta'),\n      api.getSingle('preloader'),\n      api.getSingle('navigation'),\n      api.getSingle('home'),\n      api.getSingle('about'),\n      api.query(Prismic.Predicates.at('document.type', 'collection'), {\n        fetchLinks: 'product.image',\n      }),\n    ]);\n```\nafter this all pages are gonna load on time except `/about` route coz you forgot to refactor `PrismicDOM` to `PrismicH` 😆 les do that also...\n\n## Step - 5\nreplace this 👇 \n`.about__content__description!=PrismicDOM.RichText.asHtml(section.primary.description).replace(/\u003cp\u003e/g, '\u003cp data-animation=\"paragraph\"\u003e')`\n\nto this 👇\n```js\n.about__content__description!=PrismicDOM.asHTML(section.primary.description).replace(/\u003cp\u003e/g, '\u003cp data-animation=\"paragraph\"\u003e')\n```\n\nnow we updated our repo to Prismic v6 :)\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhizzbbig%2Ffloema_","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhizzbbig%2Ffloema_","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhizzbbig%2Ffloema_/lists"}