https://github.com/timlrx/pliny/issues/26

Search Component

• Supports Algolia and Kbar (local)
• Search component is implemented using react context and is meant to wrap the entire application at the root level
• Modal based search which can be open with control k
• Users can also toggle open or close the component by using the query.toggle() method from useContext
• Algolia search is modified from the docusaurus integration and lazy loads the modal
• Kbar is modified from contentlayer docs implementation but instead of using the default table display which has compatibility issues with Preact (https://github.com/timc1/kbar/issues/208), we use a simple list to display the results.
• Instead of using loading all the content to search together with the component, we create the search index at build time using a post build script and load the content to be search after the main page loads to avoid delaying FCP.
• Sample config for kbar

    provider: 'kbar',
    kbarConfig: {
       searchDocumentsPath: 'search.json', // path to load documents to search
    },

• Config for algolia

provider: 'algolia',
algoliaConfig: {
      // The application ID provided by Algolia
      appId: 'R2IYF7ETH7',
      // Public API key: it is safe to commit it
      apiKey: '599cec31baffa4868cae4e79f180729b',
      indexName: 'docsearch',
    },

Since this is a newsletter subscription and not a website registration form, the label has been modified from "Sign up" to "Subscribe"

When running pliny install on mac results in segfault e.g.

zsh: segmentation fault  pliny install add-classic

There is no additional output

To Reproduce Steps to reproduce the behavior:

1. Install pliny as per instructions: npm i -g @pliny/cli(pliny --version outputs '0.0.5')
2. Try to use pliny install e.g. pliny install add-blog ContentDir=content ContentName=Blog
3. See error: zsh: segmentation fault pliny install add-blog ContentDir=content ContentName=Blog

Note that pliny install works and puts up a prompt. if you select any option from list it seg faults.

Expected behavior

Command to work and add the template.

Screenshots If applicable, add screenshots to help explain your problem.

System Info (if dev / build issue):

Output of version command

@pliny/cli/0.0.5 darwin-x64 node-v16.5.0

• use esm export for main pliny package, prefer named exports and re-organize structure
• lazy import kbar search only when ctrl-k is pressed
• update dependencies (except vitest since we use process.chdir() and in the new version --no-thread does not work. see https://github.com/vitest-dev/vitest/issues/1436)
• fixed preact setup for starter blog

Note: test fails because react in node_modules is getting replaced by preact, as specified in the starter-blog package.json. Would need to find a way to separate both.

Describe the bug Some of the compiled MJS files in the pliny package fail to import because they use try to use node-style module resolution while node requires explicit module resolution for ESM.

The error looks like:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '<path-to-project>\node_modules\next\script' imported from <path-to-project>\node_modules\pliny\dist\chunk-J2TU2LAM.mjs
Did you mean to import next/script.js?
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:391:11)
    at moduleResolve (node:internal/modules/esm/resolve:893:10)
    at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:1004:11)
    at Loader.resolve (node:internal/modules/esm/loader:89:40)
    at Loader.getModuleJob (node:internal/modules/esm/loader:242:28)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND',
  page: '/'
}

To Reproduce Steps to reproduce the behavior:

1. Create a new blog (e.g. pliny new --template=starter-blog my-blog)
2. Run npm run dev
3. Navigate to localhost:3000

Expected behavior Loads the page

System Info (if dev / build issue):

• OS: Windows 10
• Node version: 16.9.0
• Npm version: 8.1.4

Enhancement for #30

• Add contentlayer config to paths
• Add utility function to detect contentlayer parts in installer
• Add contentlayer document type transform helper codemod
• Pass cli args to transformers
• Add contentlayer transform codemod to add-blog recipe
• Sync starter blog with v1.5.6 in secondary repo

In this screenshot I declared the function and when I try to deploy it to Vercel I get this error message.

Any help would be greatly appreciated, fairly new to programming so not sure what or how to fix this issue.

The current regex removes any mention of .js|.tsx|.mdx|.md in the file name and changes the slug when generating a sitemap.

Example: /blog/my-new-nextjs-reactjs-portfolio.mdx becomes /blog/my-new-nex-reac-portfolio

Hi,

I'm trying to get Giscus working in my blog https://flow-wizard.xyz but I'm struggling with the giscus implementation. It is said in the readme that the content security policy needs to be changed. But it doesn't say how it should be changed. I've added the giscus env variables in .env but when I render the page and click on Load Comments, it outputs this in the console:

Refused to frame 'https://giscus.app/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
Failed to load resource: the server responded with a status of 404 ()

I've tried adding frame-src 'self' giscus.app https://giscus.app; inside next.config.js but the same error stays

When I render the giscus script that was given to me by giscus.app (<Script ... />) inside the layout file it actually loads, but only on a refresh.

Upgrade guide.

Things to update:

• [ ] Update starter blog template
• [ ] Update CLI and Installer to reference app instead of pages
• [ ] Update pliny components that might be using the older conventions e.g. SEO

Blockers:

• next-themes appDir support
• Contentlayer RSC support

To Reproduce Bootstrapping a new package with npm or running npm install in the repo will throw the following error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR!   next@"13.0.2" from the root project
npm ERR!   peer next@"*" from [email protected]
npm ERR!   node_modules/next-themes
npm ERR!     next-themes@"^0.2.0" from the root project
npm ERR!     next-themes@"^0.2.0" from [email protected]
npm ERR!     node_modules/pliny
npm ERR!       pliny@"0.0.9" from the root project
npm ERR!   1 more (pliny)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^12" from [email protected]
npm ERR! node_modules/next-contentlayer
npm ERR!   next-contentlayer@"0.2.8" from the root project
npm ERR!   next-contentlayer@"0.2.8" from [email protected]
npm ERR!   node_modules/pliny
npm ERR!     pliny@"0.0.9" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/next
npm ERR!   peer next@"^12" from [email protected]
npm ERR!   node_modules/next-contentlayer
npm ERR!     next-contentlayer@"0.2.8" from the root project
npm ERR!     next-contentlayer@"0.2.8" from [email protected]
npm ERR!     node_modules/pliny
npm ERR!       pliny@"0.0.9" from the root project

Workaround Manually install with npm install --legacy-peer-deps or use yarn in the meantime until next-contentlayer updates its dependency