timlrx / pliny Goto Github PK
View Code? Open in Web Editor NEWCreate content rich websites with ease - built on next.js, contentlayer and tailwindcss
License: MIT License
Create content rich websites with ease - built on next.js, contentlayer and tailwindcss
License: MIT License
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
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:
pliny new --template=starter-blog my-blog
)npm run dev
localhost:3000
Expected behavior
Loads the page
System Info (if dev / build issue):
Search should index and search through all content as specified in contentlayer config easily. It can either be a remote service like Algolia or something at build time like flexsearch which is used by Nextra.
Describe the bug
Kbar style breaks for long post content
To Reproduce
See https://dariuszwozniak.net/ or add some long blog titles
Expected behavior
Correct spacing is applied
Describe the bug
Looking at the code here:
pliny/packages/pliny/src/search/Algolia.tsx
Line 132 in 10f766e
the internal url transformation doesn't actually convert the absolute path to a relative path.
To Reproduce
Expected behavior
Should just navigate properly on next.js -> just change the router state
Additional context
The actual issue here is you need to return the item when it's an internal link or an anchor link. You only convert when it's not either of those.
Another thing I tried is just indexing the relative path but that breaks since you can't construct a new URL
without a domain.
Is your feature request related to a problem? Please describe.
Love what you've built! There are 2 minor issues I have with search functionality right now that can be easily changed, depending on what you think. Both changes can be made in this file
Variety is good and we can get more people to try out the recipes.
Something like distill would be nice or one with side footnotes.
Describe the bug
With a static NextJS build, using output: 'export',
, the redirects
configuration causes a build error:
Error: Specified "redirects" cannot but used with "output: export". See more info here: https://nextjs.org/docs/advanced-features/static-html-export
To Reproduce
Steps to reproduce the behavior:
13.2.4
output: 'export'
Expected behavior
I'd expect to be able to build a static site, even if I manually need to run some commands to have the 'watch mode' work with contentlayer
Tried both Vercel and Cloudflare pages. Below is the error received when trying to access a page using MDX.
EvalError: Code generation from strings disallowed for this context
at (node_modules/pliny/mdx-components.js:9:13)
at (node_modules/pliny/mdx-components.js:13:29)
at (node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js:28:35)
at (node_modules/next/dist/compiled/react/cjs/react.shared-subset.production.min.js:29:98)
at (node_modules/pliny/mdx-components.js:13:9)
at (node_modules/pliny/mdx-components.js:17:14)
at (node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js:41:208)
at (node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js:46:158)
at (node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js:37:180)
It would be nice if pages could be enabled/disabled using siteMetaData. E.g.
/about
=> both navbar and direct link to the page/projects
=> both navbar and direct link to the pageDescribe alternatives you've considered
The current situation: manually deleting /pages/about.tsx
and /pages/projects.tsx
, then stripping headerNavLinks.ts
.
Building on next.js makes for a very interesting possibility of coupling the project with a built-in markdown / mdx content editor. It will take the form of an API route which integrates with the markdown schema as specified in contentlayer.config.ts
and a given set of MDX plugins. This opens 2 modes of using it:
Thanks to contentlayer, there's no need to re-invent the wheel and require the user to re-specify the frontmatter schema like other CMSes out there. We can also use it for validation.
On the editor side, using Milkdown which is built on prosemirror and remark/rehype makes integration much more straightforward since everything can be transformed using a similar remark/rehype pipeline specified in contentlayer.config
. It also has numerous plugins which gives it a Medium like experience. Check out the online demo.
There are 3 main screens on the interface side:
It will be published as a standalone package within the monorepo (@pliny/editor) and can be integrated with other nextjs, contentlayer projects out there.
Milkdown already has existing integration with certain remark libraries like prismjs for code editing and katex for math. Beyond that, integration with specific remark/rehype packages and adding MDX components might require more work to define and scope out how it would happen and how the user could actually interact with it.
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.
I suggest replacing custom pliny sitemap-code with iamvishnusankar/next-sitemap for the following reasons:
alternateRefs
on next-sitemap configuration optionsrobots.txt
as requested in timlrx/tailwind-nextjs-starter-blog#613lastmod
as requested in timlrx/tailwind-nextjs-starter-blog#433The suggested code changes can be seen in this PR bravo-kernel/bravo-kernel.com#169.
Are you ok with a PR for Pliny?
Hi!!
Is your feature request related to a problem? Please describe.
I was trying to understand how to customize a little bit the style of a pliny component but it's a little bit weird taking the reference from outside and make the style applied to it.
Describe the solution you'd like
I think is better to maintain the logic of the project out of the styling of a particular component (like NewsletterForm)
Describe alternatives you've considered
Maybe you can think an external props to pass in order to apply the style to the component (if it's tailwind event better becasue the template is built like this)
Additional context
I have all the style of the app refactored as "neuromorphism" and it's not too cool to see only the newsletter form out of this style.
If there are already solution about this feature pls let me know.
Tnx, great work.
Is your feature request related to a problem? Please describe.
my build failed after I add an avif image (like xxxxx.avif
file) to mdx
npm build
2:22:05 AM: > [email protected] build /opt/build/repo
2:22:05 AM: > cross-env INIT_CWD=$PWD next build && cross-env NODE_OPTIONS="--experimental-json-modules" node ./scripts/postbuild.mjs
2:22:06 AM: - info Creating an optimized production build...
2:22:16 AM: ✘ [ERROR] TypeError: unsupported file type: undefined (file: /opt/build/repo/public/static/images/blog/2023-09-28_02-19-flameshot-config-save-path-and-save-extension-9ac8df864e.avif)
2:22:16 AM: at lookup (/opt/build/repo/node_modules/.pnpm/[email protected]/node_modules/image-size/dist/index.js:51:11)
2:22:16 AM: at imageSize (/opt/build/repo/node_modules/.pnpm/[email protected]/node_modules/image-size/dist/index.js:118:16)
2:22:16 AM: at file:///opt/build/repo/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected]_next@1_5de4fbg5pxn3x3gr2p4emqpuki/node_modules/pliny/chunk-PNQ6HFY5.js:15:30
Describe the solution you'd like
use https://www.npmjs.com/package/probe-image-size instead since it support avif.
image-size is not likely to add avif support in a rather short time. since this issue has been 3 years and no impl:
Describe alternatives you've considered
wait https://www.npmjs.com/package/image-size or we fork https://www.npmjs.com/package/image-size and add avif support
Additional context
avif almost suported by all popular modern web browsers
Is your feature request related to a problem? Please describe.
I come from other site generator, which I configured to generate full content RSS feeds.
after migrated to pliny, I see it only generate summary
based RSS feeds.
and the output xml name is fixed to feed.xml
, which I used to use atom.xml
in prev.
so it is good to have this filename configureable
Describe the solution you'd like
have config option to allow choose between full content RSS feeds and summary only RSS feeds
Describe alternatives you've considered
N/A
Additional context
N/A
Describe the bug
When a paragraph includes both text and an image, the text within the paragraph is removed by remarkImgToJsx
during the transformation.
To Reproduce
This is some text.
![Image](/path/to/image.jpg)
This is some more text.
This will gererate following HTML without remarkImgToJsx
:
<p>
This is some text.
<img alt="Image" src="/path/to/image.jpg">
This is some more text.
</p>
<div>
<img ...>
</div>
Expected behavior
The transformed output should include all the content in the paragraph, both text and image:
<p>This is some text.</p>
<div>
<img ...>
</div>
</p>This is some more text.</p>
or maybe:
<p>
This is some text.
<img ...>
This is some more text
</p>
Additional context
This is because remarkImgToJsx
directly replaces the entire <p>
node:
I attempted to patch this behavior by modifying the code like so:
// Change node type from p to div to avoid nesting error
node.type = 'div';
// Commented out the line that overwrites node children
// node.children = [imageNode];
I'm not entirely sure if this would introduce other issues, so it would be great if you could take a look at it.
Would there be any unintended consequences if we directly replace the img node?
Vercel deployment fails with below error, using latest Pliny:
[09:25:11.512] TypeError: String.prototype.replace called on null or undefined
[09:25:11.513] at replace (<anonymous>)
[09:25:11.513] at escape (file:///vercel/path0/node_modules/pliny/chunk-ECOO6QVZ.js:12:30)
[09:25:11.513] at generateRss (file:///vercel/path0/node_modules/pliny/utils/generate-rss.js:23:22)
[09:25:11.513] at generateRSS (file:///vercel/path0/node_modules/pliny/utils/generate-rss.js:36:17)
[09:25:11.513] at rss (file:///vercel/path0/scripts/rss.mjs:6:3)
[09:25:11.513] at postbuild (file:///vercel/path0/scripts/postbuild.mjs:6:22)
[09:25:11.513] at file:///vercel/path0/scripts/postbuild.mjs:9:1
[09:25:11.513] at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
[09:25:11.513] at async Promise.all (index 0)
[09:25:11.513] at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
To Reproduce
Steps to reproduce the behavior:
Workaround
Vercel deployment will succeed after making these changes:
Disable RSS in components/SEO.tsx
:
{/* <Head>
<link
rel="alternate"
type="application/rss+xml"
title={`${description} - RSS feed`}
href={`${siteMetadata.siteUrl}${router.asPath}/feed.xml`}
/>
</Head> */}
Disable RSS in scripts/postbuild.mjs
async function postbuild() {
// await Promise.all([rss(), sitemap(), search()])
await Promise.all([sitemap(), search()])
}
Is your feature request related to a problem? Please describe.
<TOCInline toc={props.toc} asDisclosure={true} />
but it cannot be collapsed by default.
Describe the solution you'd like
Add new collapse prop to TOCInline.
// default
<TOCInline toc={props.toc} />
<TOCInline toc={props.toc} asDisclosure={false} collapse={false} />
// only disclosure
<TOCInline toc={props.toc} asDisclosure={true} />
<TOCInline toc={props.toc} asDisclosure={true} collapse={false} />
// disclosure+collapse
<TOCInline toc={props.toc} asDisclosure={true} collapse={true} />
<TOCInline toc={props.toc} collapse={true} />
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.
Many bugs are in hurry to be fixed, but no action for them..
@timlrx
This should help the project. :)
Check this out: https://mozillascience.github.io/working-open-workshop/contributing/
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:
npm i -g @pliny/cli
(pliny --version
outputs '0.0.5')pliny install
e.g. pliny install add-blog ContentDir=content ContentName=Blog
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
Creating a new content type e.g. add-blog
should also modify contentlayer.config.ts
and bootstrap the document definition. This might require defining the base definitions and types in pliny
instead of referencing the definition from the starter folders like it is currently done.
Describe the bug
my blog mdx files is from docusaurus, and it support page bundle images well.
recently I migrated to pliny. and found all images can not shown in the generated html
"page bundle images" means the image is under the same subdir as the index.mdx
file.
this way, I can keep the images and the blog markdown file in the same dir.
To Reproduce
the file struct is like:
blog
└── demo
├── foo.png
└── index.mdx
Steps to reproduce the behavior:
enable nextjs trailingSlash, edit next.config.js
add trailingSlash: true,
have a blog under /blog/demo/index.mdx
put a image under /blog/demo/foo.png
and write ![foo](foo.png)
in /blog/demo/index.mdx
access /blog/demo/
blog via web browser, the image can not show ( /blog/demo/foo.png
not found)
Expected behavior
support images put in page bundle
Screenshots
If applicable, add screenshots to help explain your problem.
System Info (if dev / build issue):
Browser Info (if display / formatting issue):
Additional context
Add any other context about the problem here.
Describe the bug
Currently, a fresh generated Pliny blog with Giscus enabled:
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Giscus comments pane should utilize 100% available width
The fix suggested in above Giscus thread is simple:
.giscus, .giscus-frame {
width: 100%;
}
Solved for my blog by adding a new css file for overrides as can be seen here.
Are you open to a PR and if so, do you prefer a different implementation?
Is your feature request related to a problem? Please describe.
Pliny supports KBar search but it does not include support for icons (FontAwesome, React-Icons, Heroicons, svgs, strings, etc.) that is part of Kbar's actions schema - many other sites that use KBar implement this.
Describe the solution you'd like
I would like users to be able to add icons to their own custom actions like moon / sun icons for theme actions:
{
id: 'darkTheme',
name: 'Dark',
keywords: 'Change interface to dark theme',
parent: 'theme',
shortcut: [],
perform: () => setTheme('dark'),
icon: <FontAwesomeIcon icon={faMoon} />,
},
{
id: 'lightTheme',
name: 'Light',
keywords: 'Change interface to light theme',
parent: 'theme',
shortcut: [],
perform: () => setTheme('light'),
icon: <FontAwesomeIcon icon={faSquarePlus} />,
},
Also the default actions generated by Pliny should also include an icon for the homepage.
{
id: 'homepage',
name: 'Homepage',
keywords: '',
section: 'Navigation',
perform: () => router.push('/'),
// svg from https://heroicons.com/
icon: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>,
},
Describe alternatives you've considered
I could replace Pliny's implementation of kbar but that would defeat the purpose of using Pliny in the first place.
Additional context
I am willing to take on the task of creating a PR for this issue as I am invested in adding support for this, but I would like to know if it would be accepted.
Describe the bug
Creating a new starter blog throws a husky install error which also rolls back the installation process. User has to re-install the dependencies.
To Reproduce
Steps to reproduce the behavior:
pliny new starter-blog
Additional context
Creating a new starter leverages create-next-app. As there is no git initiated and there's no plans to include it within the starter blog, husky throws an error.
Ideally, we would be able to control the installation flow and skip installing the dependencies, possibly setup git and re-install everything when ready. This is blocked by vercel/next.js#33111.
Could consider implementing a custom installation logic like Blitzjs but I am not keen on maintaining it.
Describe the bug
I am getting error for npm build operation on integration of this template and building the site.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
$ npm run build
> [email protected] build
> cross-env INIT_CWD=$PWD next build && cross-env NODE_OPTIONS='--experimental-json-modules' node -r esbuild-register ./scripts/postbuild.mjs
Error :
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(node:53292) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
RSS feed generated...
file:///app-next/node_modules/pliny/chunk-ECOO6QVZ.js:12
var escape = (es) => replace.call(es, ca, pe);
^
TypeError: String.prototype.replace called on null or undefined
at replace (<anonymous>)
at escape (file:///app-next/node_modules/pliny/chunk-ECOO6QVZ.js:12:30)
at generateRss (file:///next-proj/app-next/node_modules/pliny/utils/generate-rss.js:21:16)
at generateRSS (file:///next-proj/app-next/node_modules/pliny/utils/generate-rss.js:36:17)
at rss (file:///app-next/scripts/rss.mjs:6:3)
at postbuild (file:///next-proj/app-next/scripts/postbuild.mjs:6:22)
at file:///app-next/scripts/postbuild.mjs:10:1
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
Node.js v18.13.0
System Info (if dev / build issue):
Browser Info (if display / formatting issue):
Additional context
i checked the content of the chunk, and sharing as below :
// src/utils/htmlEscaper.ts
var { replace } = "";
var ca = /[&<>'"]/g;
var esca = {
"&": "&",
"<": "<",
">": ">",
"'": "'",
'"': """
};
var pe = (m) => esca[m];
var escape = (es) => replace.call(es, ca, pe);
export { escape };
Things to update:
app
instead of pages
Blockers:
Revisit i18 and add support for it. Support for rtl might be a little tricky to implement.
References:
Hey, I was trying to use Umami analytics in a tailwind-next-starter project but I keep getting errors about it being the wrong script URL. I think the problem is here —
I believe the URL should be — https://analytics.umami.is (worth double checking though).
It would also be cool if the analytics scripts were automatically proxied to improve tracking (I do this manually currently).
Hope this helps, thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.