Posts

Showing posts from May, 2024

My very simple but functional, Bhagavad Gita Next.js web app with minimal code and coding complexity, shared as open-source free-software; Notes

Image
Last updated on 29 Jul 2024 Minor update on 1 Oct. 2024 Note Improved version with regular web app UI deployed at:  https://gita-rsi.vercel.app/ About latest version of regular web app as of 1 Oct. 2024:  Gita web app (Next.js, open source) v1.4.1  . About first incremental version of regular web app on top of this Very Simple Gita app:  Gita Web App v1.0 (Open Source), Pathway to Self-Learn Next.js Web Dev with Tailwind CSS and TypeScript ==================================== Quick Info (about Very Simple Gita web app) Github repo Deployed app Screenshot on mobile:  ================= Update for Version 2.0 This version adds to earlier version 1.0, the feature of going to a user specified chapter and optionally verse. It adds a little complexity to the app but not too much. Further, this little complexity is limited to two components (Navbar and its child SelectChapterVerse) and some utility functions in one file (util.js). Some minor finishing touches were adde...

Notes on Bhagavad Gita web app "My-Gita", open-source Github repo using Next.js

Last updated on 14 Jun 2024 Today I started going through "My-Gita",  https://github.com/parthpanchal123/My-Gita , no license, last modified in April 2023, live site:  https://my-gita.vercel.app/ . Its README states that it uses  bhagavad-gita-graphql for the data which seems to be the same GraphQL data source that I used for my small Bhagavad Gita (BG) chapter summaries test Next.js app mentioned in my recent posts. I was able to easily clone the My-Gita repo and get it to run on my local PC. The steps I followed: Cloned repo using VSCode. Ran 'npm install' command. Ran 'npm run dev' command. That's it. The app. was running on local PC browser on http://localhost:3000 . One small issue with the app even on live site (don't know if that is deliberate design though) is that the verses text in the Chapter page is not visible (for my Chrome browser settings at least) and when one moves the mouse over a particular verse, the verse text shows in black co...

There seems to be very limited Telugu Bhagavad Gita open source APIs and web apps; Added BG Telugu summaries to starter/test app

Last updated on 28 May 2024 My post:  Bhagavad Gita and some other Hindu scripture websites/web apps with source code (Next.js, React, React Native, REST API, JSON, AI-ChatGPT) shares my pleasure at finding fair amount of open source web apps on Bhagavad Gita, and some details about them. Over past few days, I am investing some time in going through code of one of the stand-out apps in the above. Related blog post:  Notes on Next.js '"Frontend for BhagavadGita.io v2", gita-frontend-v2, open-source Github repo . The associated web app.:  https://bhagavadgita.io/ is impressive. But it is limited to English and Hindi (and Sanskrit) language. It does not show the content in Telugu or Tamil or Marathi etc.  I think the reason for above app to be limited to English and Hindi seems to be, I repeat seems to be, the bhagavadgita.io web app using data from https://www.gitasupersite.iitk.ac.in/ of IIT Kanpur. Note that IIT Kanpur does not seem to have publicly shared the dat...

Notes on Typescript

How to Use TypeScript – Beginner-Friendly TS Tutorial, https://www.freecodecamp.org/news/an-introduction-to-typescript/ , March 2022 Based on above article the procedure to create a simple console-based typescript project is: npm i typescript --save-dev npx tsc --init --- I tried out the above and it worked as expected. Now .ts files can be coded in VSCode. To transpile .ts to .js, the article states that one can use: tsc <file-name.ts>  That creates <file-name>.js When I tried out 'tsc <file-name.ts>', I got an error that tsc is not recognized. The following worked: '.\node_modules\.bin\tsc .\test.ts'  It created test.js. 'npx tsc .\test.ts' also worked. ... https://www.typescriptlang.org/download/ says one should use 'npx tsc'. Hmm. https://docs.npmjs.com/cli/v7/commands/npx states: "Run a command from a local or remote npm package" .. "If any requested packages are not present in the local project dependencies, then...

Notes on Next.js '"Frontend for BhagavadGita.io v2", gita-frontend-v2, open-source Github repo

Last updated 1 Jun 2024 Today I started going through '"Frontend for BhagavadGita.io v2", gita-frontend-v2, https://github.com/gita/gita-frontend-v2 , MIT license, last modified: Mar 2024, live site: https://bhagavadgita.io/ .' from my post: https://raviswdev.blogspot.com/2024/05/bhagavad-gita-and-hindu-scripture.html . https://bhagavadgita.io/acknowledgements lists the sources for the Bhagavad Gita text, translations and commentaries. It has an API link that takes us to: https://rapidapi.com/bhagavad-gita-bhagavad-gita-default/api/bhagavad-gita3 which may be the REST API used by the app. The verse page (e.g. https://bhagavadgita.io/chapter/5/verse/1 ): has customization links for appearance, source (of translation & commentary, I think), a play audio link and an Advanced View button which allows for change in the verse page content itself (turn on/off Devanagari, Verse text, translation etc.). The app. does not seem to have a login page but that may not be nec...

Notes on Vercel Next.js templates

Last updated on 18 Sept. 2024 A few days back I started a second round of the official Next.js tutorial: https://nextjs.org/learn . Notes on this second round are being added to my post: Notes on learning Next.js . As part of this second round, as I was browsing through the official tutorial and related pages, I visited the Vercel templates page:  https://vercel.com/templates  The page states, "Jumpstart your app development process with pre-built solutions from Vercel and our community." Hmm.  I was pleasantly surprised to see a large list of Next.js (and other framework) templates. The Next.js templates have titles indicating that they cover portfolio, blog, ecommerce, AI chatbot, AI powered answer engine, image gallery, video course etc. app types. I tried out using a simple portfolio app (starter) template: https://vercel.com/templates/next.js/portfolio-starter-kit . I clicked on "Deploy" which resulted in the app being deployed to Vercel @  https://portfolio-s...

How to search through files (using VSCode) at a previous commit stage in a local repo

I wanted to change the files to a previous commit in a repo so as to use VSCode search in files feature. Note that searching through a particular file is easy using GitHub or GitHub Desktop or GitGUI. But I could not find a search in all files of project feature in them, which is available in VSCode. I am not confident enough about my git knowledge to go back to a previous commit stage in a live project folder, search through the files and then get back to the latest commit stage in the live project. So, to be on safe side, I made a copy of the project and in the temp copy, I wanted to change the files to the previous commit. But the copy also was linked to the remote repo and so that link had to be snapped to avoid any possible issues. git: how to break link with remote repo I tried to do that using GitHub Desktop and that seemed to do it but there was some confusion. I think Git GUI also may help there using its Remote menu but I am not so sure about it. git command line seems to be ...

Notes on using Next.js 14 with Pages router to generate static site from data returned by an API

Last updated on 18 May 2024 Static Site Generation (SSG),  https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation The above page has the key code required to generate a static site from blog posts using fetch to retrieve the blog posts using an API. I used it to write a test app ( its Github repo ) that retrieves latest 5 posts of this blog using Blogger API (v3.0), shows an index page with the post titles which are linked to appropriate pages showing post content. getStaticProps() and getStaticPaths() are used in this test app. I deployed it to Vercel (and later deleted the deployment). The build seems to have generated the 5 static posts as they are listed under "Static Assets" under "Deployment Summary". Hmm. So deploying the static site was very straightforward in Vercel. I had tried deploying it to GitHub Pages without going through any special procedure for next.js apps and that, expectedly, did not work. So the easy Vercel de...

Bhagavad Gita and some other Hindu scripture websites/web apps with source code (Next.js, React, React Native, REST API, JSON, AI-ChatGPT)

Last updated on 27 Aug. 2024 It has been a pleasant surprise to see quite a few Bhagavad Gita web apps developed using Next.js/React with publicly shared source code, and Bhagavad Gita data being available through REST API as well as raw JSON files. One Github repo focused on sharing Hindu scripture as JSON data goes beyond Bhagavad Gita into Mahabharata, Ramayana and some of the Vedas. Fascinating! I think this should enable easier creation of more web apps. on Hindu scripture using latest web development technologies, satisfying specific needs which are not catered to by the existing free to run web apps. The open-source JSON data is the big enabler, IMHO. Some of the existing web apps' source code may not be reusable as the license (or copyright law in case of no license), may not permit it but one can study the source code and understand the design of the web app. That would make it easier to write a new app without reusing code from that web app. I do not have any exposure, as...

Notes on: Hand-code simple/medium complexity static websites in HTML, CSS and JavaScript or use a website builder or static site generator?

Last updated on 14 May 2024 This post is capturing my thoughts on this topic. As of now, I don't know enough to have a clear view. As I explore this area further over time, I plan to use this post to capture my learnings and views. One of the text/video intro/tutorials for Jekyll or Gatsby that I saw recently, said that one of the reasons for using them is to avoid repeating (HTML) code in the various pages of a website, and gave an example of header and footer, if I recall correctly. It said that if changes have to be made to this repeated header and footer (HTML) code, then the changes will have to be done repeatedly for all the pages using them. That set me thinking. I thought of HTML frames and I wondered why I had not seen any coverage of that (as far as I can recall) in the HTML 5 tutorial I had been through. Some browsing led me to an article that gives the reasons why HTML frames have been made obsolete by w3.org in HTML5: HTML Frames Are Obsolete In HTML5: Here's How T...