Questions and Feedback #49
Replies: 1 comment 2 replies
-
|
Hey, this is awesome! Definitely the best I've found on Github by far (as far as Next.js 13 templates). Keep up the good work =) I guess 1 question I have is – I'm trying to add some components and I found DaisyUI. Just wondering if you can point me in the right direction to figure out how I properly replace the theme/styling. Also having a helluva time figuring out how to go about with the layout. I see that there's a layout schema in tailwind.config but its unused in the actual site I believe. I'm trying to expand your project into this https://codepen.io/arthuraardvark/pen/zYjapQw?editors=0100 Extra, extra context, I'm a huge noob when it comes to coding so a bit of confusion and a whole lot of challenge I'm taking on haha. Python 101, a bit of WP/Webflow exp. (and would tweak custom code to fit my needs). Watched a bunch of Next/React based tuts. So as for the layout I suppose you'd recommend to keep it as modular as possible(?) aka just delete all that default theme stuff in tailwind.config and do what I need w/in the layout.tsx Hopefully my questions aren't too, too terribly basic, I'm sure I'll figure it out one way or another =) Thanks for the template and any help! |
Beta Was this translation helpful? Give feedback.
-
|
Hey, sorry for the late response. Thank you! About DaisyUI - I'm not really familiar with it, but I believe you can just add new components and use DaisyUI class names or replace the styling of existing components by deleting class names and using DaisyUI class names instead. About the layout - what you see in tailwind.config.js#L35-L44 is the grid layout: gridTemplateRows: {
// main layout grid rows (header, main, footer)
layout: '6rem minmax(calc(100vh - 16rem), 1fr) 10rem',
},
gridTemplateColumns: {
// main layout grid columns (left column, main, right column)
layout: '1fr minmax(640px, 800px) 1fr',
},And that is used in app/layout.tsx#L82: <body className="grid min-h-screen grid-cols-1 grid-rows-layout bg-slate-200 dark:bg-slate-700 sm:grid-cols-layout">
^^^^^^^^^^^ ^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^This means that on mobile there's 1 column (content) and 3 rows (header, main, footer), and on desktop there are 3 columns (left, content, right) and 3 rows (header, main, footer).
Yes, just delete that stuff and start from scratch in layout.tsx 👍 Good luck! |
Beta Was this translation helpful? Give feedback.
-
|
Heya, so I had everything straightened out from before, but naturally its never enough and I'm committed to challenging my slightly improved knowledge lol. I went ahead and added a Reading Time computed field and was hoping it'd help me with figuring out how to attach post's views/comment counts to the metadata without luck. To further convolute things, I'd like to create a "Featured Articles" column that basically presents the user with a list of the most popular posts (sorted/compiled by # of views & # of comments). I hoped I'd just engineer that by basing it off the current sort-by-date function you implemented but that's a futile, foolish wish 😂😭. I can't code for ship, just edit, manipulate and smash together code from outside projects. But I can't find a Next.js 13/contentlayer-based project that covers that. But I imagine I just need to broaden my search, just don't know where to start/stop that. Like if I find Angular or Vue based projects that fit the bill, if I can use a converter to easily churn out the Next equiv. The other thought is maybe I just need to find an NPM module that'll cover my needs, but I don't know what to search for and/or what to look for within modules I find. Found this https://www.npmjs.com/package/sort-by-typescript and also thinking of looking into the rehype plugins. Cheers! Edit: Of course I see with Giscus I can in fact listen in and get comment #s but also realizing I think I'll have to replace Giscus because my audience will be outside the programmers/devs who'd have a GitHub account. Guess I'll have to start with finding a replacement before I can think about this haha 😭 |
Beta Was this translation helpful? Give feedback.
-
Have any questions about the project or the technologies used in it?
Drop them here and I'll make sure to answer as soon as I can!
Any sort of feedback is also welcome 😃
Beta Was this translation helpful? Give feedback.
All reactions