Code Monkey home page Code Monkey logo

website's Introduction

Website

Source code for Tattle's website. Its hosted at tattle.co.in

Other than reading our tweets, blog and mailing list, reading the commit history of this repo is a great way to know what we are upto.

Developing Locally

The website is built using Gatsby.

Install all the relevant dependencies

npm install

To start the development server run

gatsby develop

A development server will be started at http://localhost:8000, the GraphQL structure will be deployed at http://localhost:8000/__graphql

To build a production ready version of the website. Run,

gatsby build

How to Add an Update?

To make a change/ addition to the Updates section on the website, could be done by adding/ editing a markdown file (.mdx). The mark down files can be found in the udpates folder under src.

src   
└───updates
│   │   file1.mdx
│   │   file2.mdx

The .mdx files should look like this

---
date: YYYY-MM-DD
title: "Example Title"
excerpt: "A small demo of the .mdx file"
url: "https://tattle.co.in/updates"
tags: Demo, Example
---

NOTE

  • The format should be followed, else an error might occur
  • It is important to add the "day" in the date.
  • Currently, tags cannot be written as arrays.

Adding Tags to blog posts

Try to from the following list of tags

  1. bts (behind the scene), announcement
  2. Themes : responsible-ai, online-harms, civic-agency
  3. Topic : archives, misinformation, content-moderation, media-literacy, web-scraping

Tech Stack

Gatsby, ReactJS, Github Actions

REsume hyphen case all tags limit the number of tags

website's People

Contributors

tarunima avatar dennyabrain avatar budhiy16 avatar aatmanvaidya avatar kaustubhavarma avatar bhargav-dave avatar surajsharma avatar duggalsu avatar manueltollis avatar rishavt avatar siddhant-k-code avatar swastikamohapatra avatar rahul-n18 avatar

Stargazers

 avatar Bal Krishna Jha avatar

Watchers

swairshah avatar James Cloos avatar  avatar  avatar

website's Issues

Navigation Best Practices

Lets continue the discussion from #15 about

  1. how to decide what goes to header,footer.
  2. How many items should each have
  3. Should we create a sitemap for random pages we create. I dont think everything needs to be on the homepage

Add a image to the homepage

the original image is wide but it also needs to appear on the mobile website in a clean manner

I have an idea to create a React Image Component that is responsive and loads two versions of the image depending on which device you are viewing the website in. so for tablets and websites, it loads a wide version of the image and for mobile phones it opens a narrow version of the image

Show past mailing lists when a user subscribes

When the user submits their email and gets a success message, we should guide the user to the mailchimp webpage of past emails.

This would require modifications to this code -

<Text size={"medium"}>
Thank you. We look forward to sharing our progress with you
</Text>

This needs to be replaced with a Text and Hyperlink that opens the webpage in a new tab.

There is a non technical roadblock :

  1. This is the current webpage - https://us19.campaign-archive.com/home/?u=a9af83af1f247ecc04f50ad46&id=4afc4a2c79
    the text on that page could be made more welcoming.

Add Product Description

Add a tab with description as well as link to the product, for the following products:

  • Tattle Archive (Kosh)
  • Telegram Bot (JodBot)
  • Tattle Search (Khoj)

Sections that must exist on each page:

  • What does the product do?
  • Github link
  • Go to product site

Make the website title dynamic

The website Title is static and set to Tattle - Tattle

Screen Shot 2020-12-26 at 9 39 31 PM

The second part of the heading should be dynamic and reflect the page you are on.

This should involve making changes in src/components/atomic/seo.js
Look at react-helmet and gatsby documentation.

Update contributors page with June-Aug 2020 Data

We should update the contributor section of the website.

WIP draft would be
Harman Singh - Mobile Engineer
Yohan Mathew - DevOps Engineer
Suraj Sharma - Full stack engineer
Anushree Abhyankar - Full stack engineer
Anushree Gupta - Researcher

Will have to confirm with respective people

Fix Kosh Go To Service link

The go to service link goes to shell.tattle.co.in. The URL doesn't open in a new tab. Connection to the main site is lost (back button doesn't work). Fix link to take to new Kosh

UI Issues

Accommodate a drop down for multiple product listings
Think of a language selection UI.

Research page Redesign

  • Create a research page at /research
  • Must be easy to update
  • Should have a featured section to highlight 3 items
  • should included a list of all articles in chronological order

Add line breaks to paragraph on the blog

This seems to be a bug in the css of http://blog.tattle.co.in/

normal paragraphs render with display : inline. When i modify display to be 'block' in the css, it renders correctly.

I am not sure why the display would be inline for paragraphs. so maybe figuring that out first is important to fix this.

Social cards need to by dynamic

Social cards need to be such that if the page you are sharing contains an image, then it should be picked up. In case there's no image then we should default to a standard Tattle cover page image.

Right now all fields related to social media graph are defined here :

<meta property="description" content={metaDescription} />
<meta property="og:title" content={heading} />
<meta property="og:description" content={metaDescription} />
<meta property="og:image" content={`${baseURL}${socialImageURL}`} />
<meta property="og:type" content={"website"} />
<meta name="twitter:card" content={"summary_large_image"} />
<meta name="twitter:site" content={"@tattlemade"} />
<meta name="twitter:creator" content={"@tattlemade"} />
<meta name="twitter:title" content={heading} />
<meta name="twitter:description" content={metaDescription} />
<meta name="twitter:image" content={`${baseURL}${socialImageURL}`} />

We need to find a way if the content here can vary depending on which page you are on.
For instance, if you visit a blog post, the cover image of that blog post (if defined) should be picked up as the og:image and twitter:image field

Tweaking Information about full stack role

  1. On the page https://tattle.co.in/join-us, instead of 'Apply Here', the link should say 'Learn more'
  2. On this page, Before About tattle, there should be a heading of type h1, with the label 'Full Stack Developer'
  3. right now the webpage for full stack developer resides on https://tattle.co.in/fullstack/, it should be on https://tattle.co.in/job/fullstack/, to do this, all you have to do is create a folder called jobs in pages and put your fullstack.mdx file in it. Gatsby will take care of the rest

Fix grammar on FAQ page

Please change the subheading "How will tattle measure it's success?" to "How will Tattle measure its success?" on the FAQ page.

deployment of new pages specific to languages failed

I created 5 folders for 5 regional Indian languages with files with FAQ and Values for four of these five languages.

I hyperlinked the FAQ page in regional languages on the English FAQ page. This commit however was not deployed:

Commit: 917e6e7

Copy and Visual Layout design for Khoj

We must rethink the copy and layout of the content of this page.

I would love to explore doing a comparative analysis of existing product pages out there and come up with something new. The current page lacks any visual interest. But thats not the only reason to suggest this Issue. I think the page also does not reflect accurately what all capabilities Khoj has. Even for features that are not public yet, creating a feature list along with illustrative screenshots could be helpful. I would like to also spend some time customizing the content keeping in mind some prospective and current users in mind.

Add Impact Page

A page that lists Tattle's impact- media mentions, papers, articles based on Tattle data etc.

Language Selection UI

  • Proposals are open to figure out how to do this
  • An easter egg feature was suggested by @tarunima here : #4
    "Could use the image with Tattle written in multiple languages as a menu for language selection."

Header styles don't reflect on markdown pages

Steps to recreate :
Open any page defined as a .mdx file in the /pages folder. The font of headings for these pages is different from thee .jsx files.
the font is supposed to be Bitter.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.