Dark themed, SEO friendly: Nuxt Content + TailwindCSS + Firebase + i18n + RSS2 based SPA for procrastinating developers to quickly spin up their own kickass blog and showcase their projects.

Overview

Logo

Netlify Status

template.karngyan.com

Dark themed, SEO friendly: Nuxt Content + TailwindCSS + Firebase + i18n based SPA for procrastinating developers to quickly spin up their own kickass blog and showcase their projects.

Product Name Screen Shot

Visit: template.karngyan.com to see all feature enabled version of this template.

Table of Contents
  1. Instructions to make it your own
  2. Other Deployment Options
  3. Contributing
  4. Awesome Forks
  5. License
  6. Contact

Instructions to make it your own

Recommended [more like easiest and quickest way]

  1. Fork the project.
  2. Clone your copy and create your own branch out of it.
# replace  with your username
git clone [email protected]:<username>/karngyan.com.git
git checkout -b website
  1. Choose your favorite editor and open the project.
  2. Local development setup:
# install node <= 14 and yarn (highly recommended)
$ npm install --global yarn

# cd into your project and install the dependencies
$ yarn install

# run the dev server
$ yarn dev

# open localhost:3000

Page might not load right now, you can set firebase.enabled = false in karngyan.config.js for now. Read along.

  1. Edit karngyan.config.js to your liking. You can turn on and off sections/pages by changing the enabled value for respective objects.
    • You can add your images to static directory. It matches to root when deployed.
    • Update the strings object accordingly.
  2. To enable comments and likes on blog posts and project posts, we use Firebase. If you don't need that, set firebase.enabled = false in karngyan.config.js, and move to the next step. Otherwise follow these:
    • Create a firebase project.

    • Create a web app and get the firebase config object. (You can follow this video)

    • Enable Authorization (Google Provider supported as of now)

    • Enable Firestore

    • Set the following cloud firestore rules, so that your database is write protected:

      rules_version = '2';
      service cloud.firestore {
        match /databases/{database}/documents {
          match /{document=**} {
            allow write: if request.auth != null;
            allow read: if true;
          }
        }
      }
      
    • Only if you'll be testing locally

      • Create a copy of .env.example -> .env and add values from config object.
  3. Deploy to netlify using the following config:
    • Repository: Your forked repository
    • Branch: website
    • Publish Directory: dist
    • Build Command: yarn generate
    • Don't forget to add all the environment variables if you have enabled firebase.
  4. Write your blogs in content/posts and projects in content/projects in markdown or html. There's a couple of samples that come with the template.
  5. Add to staging, Commit and Push.

The code is yours, edit whatever you feel like. Don't forget to star the repository if you liked it.

This project uses nuxt content, you can read about it here

You can also set up forestry to never open code and use a cool editor. I'll add instructions to use that later.

Other Deployment Options

My own website karngyan.com is actually deployed on AWS in an S3 bucket, with Cloudfront. But that comes with a few caveats to configure and maintain. Anyways the gulpfile.js to deploy to AWS is committed with the project if you feel like you want to check it out.

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Awesome Forks Awesome

Raise a PR when your website's up to add you here.

Find your alphabetical position, or raise a PR to automate this.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Karn - @gyankarn - [email protected]

For detailed explanation on how things work, check out Nuxt.js docs.

Comments
  • Add an image to a blog entry

    Add an image to a blog entry

    Is your feature request related to a problem? Please describe. Putting a folder in ./content/posts which images break the blog.

    Describe the solution you'd like I just would like to see how to add an image in any of the posts already created.

    Describe alternatives you've considered I have a hexo blog. Porting the .md was easy but the folder with the name of the post containing images failed.

    Amazing job BTW

    question 
    opened by Klaudioz 7
  • Empty section addition

    Empty section addition

    Is your feature request related to a problem? Please describe. I'd like to have an empty section to add new stuff from zero. It can be disabled by default.

    Describe the solution you'd like With simple code, anybody will be able to use it to create more sections as desired.

    Additional context On my website I was able to "duplicate" buyMeACoffee section to add one linked to my Polywork site, but it's out of my knowledge.

    opened by Klaudioz 5
  • Add plausible for analytics

    Add plausible for analytics

    Is your feature request related to a problem? Please describe. Google Analytics is evil.

    Describe the solution you'd like I followed this guide. It looks easy to do but when I check the source of my website I can't see Plausible add it to my head

    Describe alternatives you've considered I didn't find more.

    Additional context This is what I did, after running https://debbie.codes/blog/nuxt-analytics/:

    Screen Shot 2021-06-18 at 2 57 51 PM Screen Shot 2021-06-18 at 2 57 38 PM enhancement 
    opened by Klaudioz 3
  • Adds a language switcher

    Adds a language switcher

    image

    Steps to add a language:

    1. Add a new key in karngyan.config.js inside strings with your language image
    2. Create a lang file inside /lang referencing the config image
    3. Reference the file inside nuxt.config.js image

    It can be disabled in config. Enabled by default.

    opened by hacheraw 2
  • Bump follow-redirects from 1.13.3 to 1.14.7

    Bump follow-redirects from 1.13.3 to 1.14.7

    opened by mallovelli 2
  • Background blur should happen on TheNavBar only when scroll starts

    Background blur should happen on TheNavBar only when scroll starts

    Current Scenario This is how background blur looks like when it's on, it doesn't look very good. image

    Expected solution A common pattern on blurred NavBars that's been going around right now, is blur on scroll. For example: https://somecourse.io https://linear.app https://deepsource.io

    Additional context You might have to add some event handlers on scroll and pick a height on which blur kicks in.

    enhancement stale hacktoberfest 
    opened by karngyan 2
  • Recommendations header point to linkedin home page instead of user's linkedin page

    Recommendations header point to linkedin home page instead of user's linkedin page

    Describe the bug Recommendations section header point to LinkedIn home page.

    Expected behavior If user has entered the linkedin user name i.e. social.linkedin in karngyan.config.js, the recommendations header should redirect to user's linkedin page. Otherwise, no links should be present.

    Additional context If you're running the project for the first time, you can disable firebase in karngyan.config.js for easier development.

    bug good first issue hacktoberfest 
    opened by karngyan 2
  • Nuxt markdown content gives 404 while hosted on github pages

    Nuxt markdown content gives 404 while hosted on github pages

    Describe the bug I started experimenting a bit, using your framework, and I came to the idea of hosting it on GitHub pages. For this I used the following workflow as documented on the site of Nuxt. This all went well, and it was easy to set up. Once everything was set up, I came to the conclusion that the Nuxt content route mapping does not work and that it always displays a 404 not found error when loading direct Nuxt markdown content via a URL.

    I don't know if this is normal behavior on the github side but I thought you might know more about it since, you have focused deeply on development and working with Nuxt content.

    To Reproduce Steps to reproduce the behavior:

    • Clone the repo and then push it to a repo with the following naming convention username.github.io and since you didn't make any changes to the repo don't forget to set the Firebase to false in the config.
    • Create a new .yml file in the .github/workflow folder as described
    • When created, push the changes to the github test repo
    • In your GitHub repo, go to settings -> pages and change the course branch to gh-pages
    • After that, click on the link indicated in a green alert box
    • When the site has loaded correctly click on projects then click on any project doesn't matter which one
    • As you can see, the content loads correctly and everything is fine
    • Now reload the page as you can see you get a 404 not found error message while you would expect the content to load again

    GitHub actions workflow file as given:

    name: cd
    
    on: [push, pull_request]
    
    jobs:
      cd:
        runs-on: ${{ matrix.os }}
    
        strategy:
          matrix:
            os: [ubuntu-latest]
            node: [14]
    
        steps:
          - name: Checkout πŸ›ŽοΈ
            uses: actions/checkout@master
    
          - name: Setup node env πŸ”§
            uses: actions/[email protected]
            with:
              node-version: ${{ matrix.node }}
    
          - name: Install dependencies πŸ”§
            run: yarn
    
          - name: Generate πŸ”§
            run: yarn generate
    
          - name: Deploy πŸš€
            uses: peaceiris/actions-gh-pages@v3
            with:
              github_token: ${{ secrets.GITHUB_TOKEN }}
              publish_dir: ./dist
    
    

    Expected behavior The Nuxt content should also load after a refresh of the whole page.

    stale 
    opened by rikp777 1
  • Resume Page Revamp [Config must be backward compatible]

    Resume Page Revamp [Config must be backward compatible]

    Idea PDF Readers affect page loads. Some people do not prefer rendering the entire PDF in the resume page.

    Expected solution A complete revamp of the Resume page. There's not much thought given to the UI as of now. But a good starting point would be Linkedin home Page in dark mode. Or check out the resume tab on https://peerlist.io/karngyan

    Also, I'd like to keep the download resume button somewhere on the page as well.

    Additional context The karngyan.config.js should be backward compatible with minimum changes.

    enhancement stale hacktoberfest 
    opened by karngyan 1
  • Show reveal.js presentation in projects

    Show reveal.js presentation in projects

    Is your feature request related to a problem? Please describe. I'd like to able to show a presentation in the browser for my projects. Example

    Describe the solution you'd like Implementing revealjs-vue. It's not very updated so it's necessary to test it first.

    Additional context Maybe it's too heavy or too complex to implement or it's not giving a real value.

    stale 
    opened by Klaudioz 1
  • add links to 'uses' section

    add links to 'uses' section

    User can now add a link along with title and value under the uses section in karngyan.config.js. On clicking the value, the visitor will be redirected to the link.

    Sample:

    uses: {
        enabled: true,
        meta: [{
                title: "Memory",
                value: "32 GB LPDDR5"
            },
            {
                title: "Mouse",
                value: "Logitech MX Master 3S",
                link: "https://www.amazon.in/Logitech-MX-Master-3S-Chrome-Graphite/dp/B0B11LJ69K/ref=sr_1_2?crid=1NHOVPXV7CN0J&keywords=mx%2Bmaster%2B3s&qid=1669211809&qu=eyJxc2MiOiIyLjM2IiwicXNhIjoiMS44NyIsInFzcCI6IjEuODUifQ%3D%3D&sprefix=mx%2Bmaster%2B3%2Caps%2C261&sr=8-2&th=1"
            },
            {
                title: "E-Reader",
                value: "Kindle (10th Gen)",
                link: "https://www.amazon.in/Kindle-10th-Gen/dp/B07FQ4Q7MB"
            }
        ]
    }
    

    Demo can be found here.

    opened by MadhavKauntia 2
Owner
Gyan Prakash Karn
Serial SWE Intern.
Gyan Prakash Karn
A simple multipage and responsive Nuxt.js & TailwindCSS portfolio theme with dark mode.

Nuxt.js & TailwindCSS Portfolio - With Dark Mode A simple portfolio starter theme built with Nuxt.js and TailwindCSS. This is the Nuxt version of the

Nangialai Stoman 42 Dec 3, 2022
A framework for quickly creating vue3-based projects

vue3-boilerplate 이 ν…œν”Œλ¦Ώμ€ vue3 기반의 ν”„λ‘œμ νŠΈλ₯Ό λΉ λ₯΄κ²Œ λ§Œλ“€κΈ° μœ„ν•œ ν‹€μž…λ‹ˆλ‹€. κ³΅ν†΅μ μœΌλ‘œ μ‚¬μš©ν•˜λŠ” ν…œν”Œλ¦Ώλ“€μ„ λͺ¨μ•„λ‘μ—ˆμŠ΅λ‹ˆλ‹€. This template is a framework for quickly creating vue3-based project

cybertramp 2 Dec 27, 2022
A blog application with nuxt3, windicss, nuxt-content

A blog application with nuxt3, windicss, nuxt-content

eggp 3 Aug 16, 2022
A lightweight Nuxt template to write a Markdown driven website, based on Nuxt Content, WindiCSS and Iconify.

A lightweight Nuxt template to write a Markdown driven website, based on Nuxt Content, WindiCSS and Iconify.

null 3 May 30, 2022
A boilerplate to quickly start a Vue project using Vuetify, Vue-i18n, Vuex, Vue-router

Vue, Vuetify, Vuex, Vue-router, i18n boilerplate A good way to quickly start a Vue project with good foundations ! [ Demo ] ?? Features Vue 2.x Vuetif

MorgΓ€n 13 Nov 21, 2022
An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.

Vue Enterprise Boilerplate This is an ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI. Questio

Ben Hong 7.6k Jan 8, 2023
An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.

An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.

Ben Hong 7.6k Jan 7, 2023
This template allows you to quickly scaffold a Vue project with Vue Router, VueX, TailwindCss with JIT Compiler and vite as a bundler.

This template allows you to quickly scaffold a Vue project with Vue Router, VueX, TailwindCss with JIT Compiler and vite as a bundler.

VivekAsCoder 57 Jul 5, 2022
0xAliRaza.github.io - A deployment ready web app to showcase your coding portfolio

Codefolio as 0xAliRaza.github.io Live Demo | Deployment | About | Features | Con

Ali Raza 3 Dec 15, 2022
Elucidator blog starter - a starter blog built with Vuejs 3, Vite, and Typescript

Elucidator blog starter Blog starter build with Vue 3 + Vite + Typescript

Elucidator Project 30 Nov 8, 2022
This is nuxt invoice app using nuxt.js and firebase

Nuxt Invoice App Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and

Moein Salari 8 Dec 20, 2022
Shamim Hossain 53 Dec 21, 2022
A personal website theme powered by Nuxt Content, UnoCss, Iconify and Vue components.

Content UnoCss A personal website theme powered by Nuxt Content, UnoCss, Iconify and Vue components. ?? Demo & Docs Features Create pages in Markdown

Elone Hoo 5 Oct 26, 2022
πŸ“¦ Yeoman generator to build your own Vue.js components

generator-vue-component ?? Yeoman generator to build your own Vue.js components Support Vue.js 2 => generator-vue-component@>=2.0.0 [master] Vue.js 1

Nacho Anaya 32 Aug 7, 2019
A VueJS 3 starter to create Vue applications easily and quickly with Vue Router, Snowpack, TypeScript and SCSS

VueJS 3 Starter ✨ A VueJS 3 starter to create Vue applications easily and quickly with Vue Router, Snowpack, TypeScript and SCSS Architecture β”œβ”€ publi

null 1 Jun 1, 2022
This is a Nuxt 3 Starter Kit with Vite, Vue 3, TypeScript, SCSS and TailwindCSS!

Nuxt 3 Starter Kit This is a Nuxt 3 Starter Kit with Vite, Vue 3, TypeScript, SCSS and TailwindCSS! We recommend to look at the documentation. Setup M

Ricardo 17 Nov 19, 2022
Full stack Nuxt 3 Template starter with Supabase and Tailwindcss

Top Nuxt 3 Starter Template Fastest and most comfortable development experience started template With ?? from @ctwhome, inspired by @antfu vitesse Fea

J. Gonzalez 95 Dec 28, 2022
A simple portfolio starter theme built with Nuxt.js and TailwindCSS

Nuxt.js & TailwindCSS Portfolio - With Dark Mode A simple portfolio starter theme built with Nuxt.js and TailwindCSS. This is the Nuxt version of the

Nangialai Stoman 43 Jan 3, 2023
This is a Coding Challenge. The main goal is to clone the Password Manager LastPass using Nuxt 3, Vue.JS 3 and TailwindCSS.

LastPass Clone - Password Manager Table of Content Summary Algorithm and Approach Technical Dependencies and Libraries Setup Summary This is a Coding

Dan Colmenares 7 Oct 23, 2022