Create new svelte app and migrate basic content
erskingardner opened this issue · 25 comments
- Create new svelte app
- Set up prettier, tailwind, eslint, etc.
- Add NDK
- Pick a base font and add it
- Replace old site with svelte app
- Update GitHub Actions to continue deploying old site (from ARCHIVE folder) for now.
@zatzby I think you'll have to update the Action since it doesn't look like I have access.
Thanks for all your work getting this started Jeff.
I created an archive branch and have site deployed from there now, although that is a little different from what you said to do, which is make an archive folder in the main branch and deploy from there... going to go that route once I figure out how.
I am going to review the details in this issue/others and then follow-up with questions once I've got them.
🤙
archive branch is totally fine too. That will allow us to remove all the old code from the main branch.
I am going to merge this shortly, just getting node/npm setup and then will also be working through the readme and running the development server..
working my way through slowly but surely, thank you again for building the foundation for the new svelte app so I can work through it and learn what i can.
don't hesitate to ask questions – here or DM.
[2nd update TLDR: you can ignore this question, I answered it, but I'll leave it here for transparency, this answered my question when I was researching "A CLI for creating new SvelteKit projects. Just run...
npm create svelte@latest
...and follow the prompts. "]
Original Q:
I've been reviewing the code, learning a ton about its structure. still planning to merge asap, hopefully tonight or tomo. (Had a few big work days that occupied me!)
Sorry if this is dumb question, but are you building with sveltekit?
I watched a video on a simple to-do list app svelte project where the person used sveltekit.. seems similar to what I am seeing in the files you created. But maybe you generated files or created project in another way?
[1st update: I see vite files/references in the new svelte app code branch, so thinking you are using the kit!)
Do you have tailwind css frameworks you recommend? Or a place you recommend I can research them?
I may be jumping far ahead for my understanding, but I'm looking at this pnpm-lock.yaml file.
I see /@esbuild lines: 
Are these bundlers that help with rendering the code across all of the different operating systems a user may view site on? Is that one of secrets of svelte?
It seems like the new code structure for the site (the svelte style) breaks up a lot of the functionality across many different files. Does that simplify everything? (Maybe simplify isn't right word, perhaps optimize is better. After all that yaml file referenced above is pretty large, but seems to have a lot of info in it)
Thank you again for working through my very noob questions. 🤜🤙
Do you have tailwind css frameworks you recommend? Or a place you recommend I can research them?
So Tailwind is the framework. https://tailwindcss.com it's a way of writing really simple classes (which you learn fairly quickly) and having those translate to the right (and usually more complex CSS). I use Tailwind with all my projects, it's awesome.
Are you maybe asking about UI component frameworks?
pnpm-lock.yaml
This is an autogenerated file that is updated any time you add a new dependency to the project. It's basically a map of how all your dependencies interact so that your app can function properly. You never had to open or use this file, the pnpm package manager does it for you.
Thank you for clarification on Tailwind, I misunderstood what they meant in something I watched, think they were talking alternative frameworks to tailwind.
Thank you for sharing tailwindcss link.
I didn't know about UI component libraries, but I found this list of some
https://svelte-headlessui.goss.io/docs
https://www.svelteui.org
https://illright.github.io/attractions/
https://smeltejs.com/
https://github.com/bestguy/sveltestrap
https://c0bra.github.io/svelma
https://svelte-atoms.web.app/
https://github.com/svelterialjs/svelt...
https://www.agnosticui.com/
https://framework7.io/svelte/menu
Going to go through and browse to see whatsup, but do you have one you recommend? (From this list or other)
Also thank you for clarification on pnpm-lock.yaml file
Final note: I may be getting out over my skis with some questions.. as I don't really have basics down yet.
Going to work through the read me file (npm run dev and onwards) to get the main branch production version of app running on my local machine, then I can see a little more about whats going on. (will have time tonight, finally done with the work week!)
Hope you have a nice weekend Jeff, and looking forward to discussing this next week.
Re: UI component libraries. I've used quite a few; none are amazing, but many are helpful. One that I've been experimenting with most recently (and I like a lot) is https://www.shadcn-svelte.com/docs/installation It's a little different to the others in some key ways but it's easy to get started with.
In any case, we should not need to many components for this project so it's probably best to just leave the UI libraries out for now.
How did you get on with getting the app up and running locally? The only thing you should need to do is to run: pnpm i and then pnpm run dev to get it working....
Hey Jeff, thank you for sharing that link, but sounds good regarding holding off for now.
I have had some issues with pnpm on my system, pnpm wasn't installed on my system/vsc I guess... I tried installing from github with following command:
iwr https://get.pnpm.io/install.ps1 -useb | iex , and it showed that my system was already up to date/no changes to environment. Yet pnpm commands still don't work.
I was able to get app up and running locally though with npm run dev command. Looks great!!
If I understand correctly, next steps are:
- modify/update the existing site's landing page text to simplify (ie. less text, quicker calls to action - join, learn, explore)
- create new svelte components within the lib/components folder with updated content (such as menu icon, paragraph, links to other pages, etc.)
- import new svelte components into the +layout.svelte file
- adjust the +layout.svelte file design
Sound good? Or should another thing be in there?
On another note, re Vercel. Should I set up account and have that ready to go? Or is that only necessary to integrate after we have all code ready to go and need to serve code from a server?
Also, I want you to have full access to repo/abiliity to enable Actions. Is that determined by one of the options in the following pictures?
I would like you to have full access to all actions/process/etc.. I don't want to hold anything up because I haven't enabled you access.
Another note: I am going to be working on updating the content I would like the new svelte site to contain (specifically landing page), and will share asap for feedback.
Lastly, I will be traveling to Colorado/Kansas next week with family for a vacation, so will have some free time away from 9-5 to get some creative juices flowing and do some more work! Excited to make some good progress next couple weeks and get whynostr to a more respectable spot.
Re: installing pnpm
Let's figure that out first. While the interface to use npm and pnpm are the same, you actually can't use them interchangeably. If you're on a mac I'd strongly suggest using homebrew to install pnpm brew install pnpm. If you're on windows, god help you (just kidding). But, I won't be able to help as much because I haven't used a Windows machine in about 20 years. Happy to help troubleshoot though.
A few thoughts
- If the install command seemed to work but you can't get the
pnpmcommand to work it's probably an issue with your PATH variable (where your system is looking for the binary commands). - Try to restart your terminal, this sometimes works.
- If not that search for setting
pnpm path on windowsand see where that goes.
Next steps
Yup, that's all about right. I'll start on the homepage here today and see where we get.
Vercel
We can wait on that until we're ready to deploy the new site.
Github permissions
I'm actually not sure, I don't think I'll need any access to GitHub actions though. So maybe just leave it for now.
Sounds great about getting more time for content, etc. When do you want to try and do a call, this week or wait until next week?
I am on a windows! I have heard how much of a hassle they are. Now I get to experience it, they have their folder slash system set up backwards! 😂😂
I have a Mac laptop too I'll start pounding away there (it's a 2015, but should get job done)
I'll report back soon after getting pnpm going either on windows (less likely) or my Mac (more likely)
I will work on content and some examples as mentioned, and planning for call next week could be good!
Gives me a little time to get more educated, prepare some content to share.
Thank you again. I'll be in touch shortly.
✌️🤙
P.S. I just saw your new pull request with all of the additions. Wow!! Looks awesome! I'm going to look through all of code, merge today asap.
Thank you for your work! Excited to see the Nostr dev kit being incorporated!
Hey Jeff, just checking in. I was slammed at work this week but finally seeing light at the end of the tunnel, and getting a chance to look through all of the code you updated earlier this week.
Everything looks awesome! I am so grateful for your work on it so far. Thank you!
I can't believe I just logged into the website with NIP-07! I also really like the typewriter funtion that you added to the +page.svelte landing page.
I am going to create some additions to code and then create pull requests for review. Thank you again!
Also update on my pnpm stuff:
I installed pnpm on my 2015 mac, when I enter command pnpm run dev and go to local host it fails to ever load and just persistently appears to be in a loading state for many minutes. I tried npm run dev in addition to the pnpm command, and it generated a different port, but still failed to ever load. Maybe just an issue with my old mac?
I am continuing to use my windows in the meantime, haven't diagnosed the pnpm path issue yet I have just been using the npm run dev command at the moment.. it appears pnpm is just better across the board based on this site https://pnpm.io/ (looks official to my beginner eyes), so it's probably best I get this going. I am going to take another look at it this weekend.
I have been meaning to research this for awhile, figured I would ask. Do you have any recommendations for a linux machine (either laptop or desktop based) that I could program on?
Hey @zatzby – thanks for the kind words, the NIP-07 stuff is surprisingly straightforward (thanks to NDK).
Yeah, definitely much better to get pnpm going on your machines. Let's see if I can hopefully give you a few things to look into...
Here's the output of my system:
$ node -v
v20.5.0
$ pnpm -v
8.6.10I also realized what I'm actually running to run the dev server is just pnpm dev (I have it aliased to nr so I never type the full command). Maybe that has a different effect on you?
I don't know Linux but I asked the universe and they had ideas. nostr:nevent1qqsdykaffxnrf6dyzg40ff7n4nu3xfrz30ywde7xwpngt3v0r9u6ywsppemhxue69uhkummn9ekx7mp0qyghwumn8ghj7mn0wd68ytnhd9hx2tcpr4mhxue69uhkummnw3ezucnfw33k76twv4ezuum0vd5kzmp0qy2hwumn8ghj7un9d3shjtnyv9kh2uewd9hj7mx2a8u
Thank you for asking the hivemind about the Linux!! Really good stuff there. Going to investigate more.
Also, thank you for sharing your system output. I'll see what versions I am running and keep getting to run. Thanks for sharing the detail about the pnpm dev command too.
Ill reach back out with update once I have it, also going to carve out some time to work on some site to-dos this weekend.
pnpm dev is working! Tried it and success. Should be smooth sailing from here on out. Thank you for help troubleshooting.
Nice!