khalisfoundation/sttm-web

STTM website - https://www.sikhitothemax.org

SikhiToTheMax Website

Originally developed by SHARE Charity UK, SikhiToTheMax has become a defacto standard for Keertans and gurdwaras around the world to display Gurbani on screens for Sangat to join into the depth of Gurbani and translations.

SikhiToTheMax is now developed by Khalis Foundation as Seva to the Panth and Khalis Foundation is working hard to ensure it lives up to its name. Khalis Foundation Sevadaars are currently working hard to build newer version of SikhiToTheMax website using modern web technologies.

Website: http://www.SikhiToTheMax.org

Developer: Khalis Foundation and Sevadars (see committers for more details)

Acknowledgements: Bhai Tarsem Singh UK, SHARE UK, Khalis Foundation, Khalsa Foundation UK, Dr. Sant Singh Khalsa, Dr. Kulbir Singh Thind

Powered by

Build Instructions

Make sure you've git & nodejs installed in your system. We advise using Node version 8 or above, and npm version 5.7 or above.

Open terminal and follow these steps;

• Step 1: Clone the repo.

git clone https://github.com/KhalisFoundation/sttm-web/

You should now see a SikhiToTheMax-Web folder in your present working directory. Let's change directory to it.

cd sttm-web/

• Step 2: Install dependencies.

# `ci` doesn't update package.json, and uses package-lock.json to install intended deps.
# This makes it pretty speedy and doesn't cause unintended updates.
npm ci

This will use npm that is included with nodejs to install project dependencies.

• Step 3: Start the project.

If you are running this project for the first time or did some change, run the following command to create a build and run it:

npm run dev

If you want to start a previous build, run the following command.

npm start

This will run a bunch of build tools and a nodejs server to deploy the code locally.

• Step 4: Access your local dev environment of the SikhiToTheMax website

# On mac OS X
open http://localhost:8080
# On Linux
google-chrome http://localhost:8080
# On windows
start chrome http://localhost:8080
# Or just open chrome and enter the URL manually.

Contributing

Slack channel.

Before raising a pull request, please go through CONTRIBUTING.md. We use dev branch as the development branch, while master is the production branch. You should branch out from dev branch and raise a PR against dev branch. You can see your submitted changes on dev.sikhitothemax.org.

Project Overview

You can watch this project and code walkthrough.

.

License

GSL

All images and assets not covered under other licenses are covered under full Copyright © 2019 Khalis Foundation.

Site made reliable with help of

sttm-web's Issues

Add meta data to shabad page

Same data as displayed in search results page, "Granth", "Ang", "Writer", "Raag" with clickable links.

Ang link would be blocked by #40.

Embed option

Allow user to embed Panktee(s) or Shabad to their website.
Use blockquote with Unicode followed by async script to style and add display option toggles

See Twitter embed code

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Now that the mad shopping is over let's focus on <a href="https://twitter.com/hashtag/GivingTuesday?src=hash ">#GivingTuesday</a><br>Help Khalis connect Sangat with Gurbani thru tech. <a href="https://t.co/J6LOqD1uKI">https://t.co/J6LOqD1uKI </a></p>— Khalis Foundation (@khalisfound) <a href="https://twitter.com/khalisfound/status/803660024325107712">November 29, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Add copy button

Add random hukamnama like sttm.com

Also differentiate random vs darbar sahib

Some shabad are not displaying

You're using ID instead of ShabadID

change top right links

#252525
weight: 600;
font-size: .9em;

Add social share features

maybe have something that when a line in a shabad is hovered over, fb/twitter icons appear to the right and basically post a link to the shabad with the line (unicode)+current display (ie translation) shared in text

drop downs and display tools should match on search and shabad

currently no drop downs in search

Port english search from current STTM

http://sikhitothemax.com/Search.asp?Spicy=1

Navdeep singh will provide you the asp code

Move all image and static resources to s3

Search Options/Dropdowns not working

create 404 from keertan.net

http://keertan.net/404

use loading gif, same as app

add search options on search results page

should be drop downs above the current search tool drop downs.

see mockup or google

Gurbani in search results should look like an hyperlink

use color: #00669B

Update format options UI to match Search Tools of Google

Ang 123 | Raag Suhi | Bhagat Kabeer | Format Options
-----------------------------------------------^-----------
  Unicode | English Transliteration | Punjabi Translation...
-----------------------------------------------------------

Add meta description and keywords to all pages

Add open graph standard headers AND graphics.

Also include relevant titles on pages where possible.

logo squeezed on mobile

It doesnt maintain it's aspect ratio and is squeezed on main page

uggardanti should be included as part of DG in sources drop down

Search settings not retained when searching from search results page

STR:

• Search KmrhK from main page
• Search Results come up
• Press search again
• Observe the URL

Khoj is on top of mobile menu

Make production ready

• Transpile ES2015 to ES5 using Babel
• Add promises and fetch polyfills
• Minify CSS/JS
• JPEGify images

in search tools, add checkboxes

so we can select more than one, ie english and punjabi translations

make drop downs look more like google

Should be blue text with down arrow, no border. Buttons are also a bit strange looking.

Dark gray check boxes on search results should become grouped drop downs (ie transliteration drop down, font drop down (unicode/ascii), translation drop down). These would be blue text drop downs just like on google search results.

no checkboxes, just use highlighted/selected options when drop down clicked.

options should persist via cookies

Let me know your thoughts

margins between lines on shabad too large

When searching there are large margins between lines. They persist when adding translations, transliterations etc

Save hukamnama everyday and provide ability to open hukam from a certain date

We should save the shabad ID of the hukamnama in a table and provide ability to look up a hukamnama by entering a date.

Lazy-load results

Return 10 results for searches with a Load More button when relevant to dynamically add 10 more

Add meta description in search results

Something like Akmal...

Home page Search button doesn't work

Add google analytics

Search button doesn't work in search results page

test and fix in safari

must work in safari on iphone and macos

remove file extensions from site with htaccess

/search.php?q= to /search/?q=

Mobile issues (android, firefox)

Logo should always be on left of search (maybe search bar should resize width so that logo, search bar, and button can always be in same row and not flow down.

left margin on shabad is needed.

Create Hukamnama Page

use .php

For compatibility with production deploy scripts and future work, please rename html files to php

add larivaar and learn larivaar to search tools

large margin in default search results

When you do a default search, there is a large margin between url and source, seems like 2 lines extra.. lets bring writer/source up to be next line from url

Set english translation as default

add ang viewer

I feel we should have a way to view one entire ang of any source. The API does support it so it shouldn't be that hard, I guess the renderShabad method should just work.

Remember display options

Write to localStorage to persist through searches

Create Shabad Page

Add amrit keertan index

http://sikhitothemax.com/akindex.asp

Should be in DB

Use gurbaniakhar fonts from KhalisFoundation

They support anti-aliasing on windows.

https://github.com/KhalisFoundation/gurmukhi-fonts

Add a lightblue keyboard icon inside search text input box

Align right. Make the keyboardboard icon add a pop down gurmukhi keyboard below the search box. maybe something like a querty mapped keyboard on desktop and something like igurbani app on mobile

Use an API wrapper

This from SikhJS might be useful to create one.

export const API_URL = `https://api.gurbaninow.com/`;

export const TYPES = [
  'Initials from beginning (Gurmukhi)',
  'Initials from anywhere (Gurmukhi)',
  'Full word (Gurakhar)',
  'Full word (English)',
];

export const SOURCES = {
  all: 'All Sources',
  G: 'Guru Granth Sahib Ji',
  D: 'Dasam Granth Sahib',
  B: 'Bhai Gurdas Ji Vaaran',
  N: 'Bhai Nand Lal Ji Vaaran',
  A: 'Amrit Keertan',
  U: 'Uggardanti',
};

export const buildApiUrl = options => {
  const {
    q = false,
    source = false,
    type = false,
    writer = false,
    raag = false,
    ang = false,
    results = false,
    id = false,
    hukam = false,
    akhar = false,
    lipi = false,
  } = options;

  let url = API_URL;

  if (q !== false) {
    url += `search/${q}/?`;
    if (source) url += `source=${source}&`;
    if (type) url += `searchtype=${type}&`;
    if (writer) url += `writer=${writer}&`;
    if (raag) url += `raag=${raag}&`;
    if (ang) url += `ang=${ang}&`;
    if (results) url += `results=${results}&`;
  } else if (id !== false) { 
    url += `shabad/${id}`;
  } else if (ang !== false) {
    url += `ang/${ang}/`;
    if (source) url += `source=${source}`;
  } else if (hukam !== false) {
    url += `hukamnama`;
  } else if (akhar !== false && lipi !== false) {
    url += `akhar/${lipi}`;
  } else {
    throw new Error('Invalid options sent');
  }
  return url;
}

Hukamnama not scraped entirely

entire hukamnama is not displaying on STTM.org website

http://sikhitothemax.org/hukamnama.php

issues with raag, source and search

tried to find vah vah gobind singh, didnt come up in search results

but some results show undefined and no raag
http://dev.sikhitothemax.org/search.php?q=vvgs&type=1&source=all

Improve mobile experience

• manifest
• responsive search results
• responsive shabad

url should update on search tools change

to be able to share or return to your current view