Giter VIP home page Giter VIP logo

linkmybio's Introduction

Description

You will create a link.tree like web page πŸ€“, it will be a single web page that will contain all the links to your social media / contact / places of interest.

From link.tree:

You get one link to house all the content you’re driving followers to. Share that link anywhere, like your Instagram bio, Facebook posts or Twitch profile. Send followers anywhere: articles, webstore, events, socials and more.

Rules

So obviously for this project you will need:

  • multiple destination where you want to send your followers, it might include: LinkedIn profile, Facebook profile, Instagram profile(s), personal blog, web store, latest youtube video etc.
  • develop it in Flask
  • read the content dynamically via a yaml file (links.yaml)
  • generate the buttons with the correct href to redirect

watch it online

# point to your own profile pic you want to display in your link.my.bio
picture: "static/filename_of_your_selfie.[png|jpg]"

# it will appear just below your picture.
name: "Your Full Name"
# short auto biography about yourself
shortbio: "brief paragraph that contains your short bio"

# 'links' will be an array of any amount of links you want your followers to discover, notice that the name will be mere descriptive (it is not necesarily functional.)
# each link will have 3 attributes:
# - enable: this will tell your app to display/hide this link in your "link.my.bio"
# - link: this is the link you want to "redirect" your users to, when they click on the button
# - description: this will appear as the text in the button of your link

links:
    - facebook:
        enable: True
        link: "https://url_to_your.facebook.profile"
        description: "check my facebook"
    - instagram:
        enable: True
        link: "https://url_to_your.instagram.profile"
        description: "How Cool my photos are in instagram :camera:"
    - blog:
        enable: False
        link: "lorem ipsum"
        description: "lorem ipsum dorem"
    - etc:
        enable: False
        link: "http://etc.etc"
        description: "any other link you want your followers to see"

notice that the order of the attributes is irrelevant, what matters is that they should exist.

Examples

Example-1


All parts explained and showed. Mobile showed to reflect the responsiveness , but it should work in Desktop as well πŸ˜‰.


1

Example-2


See you can add any style to your own project. These are only ideas.



2

Requirements

  • FORK THIS REPO!
  • Your project will read the links.yaml file and generate the webpage to start serving it as desired.
  • Project MUST compile
  • Update README.md to add a section Usage, where you will place the commands in order to run your bio.py
  • Add Style, suggestions "bootstrap.css"
  • Deliver it via git tags
  • Make sure to use/develop/fill the empty files/folders provided: static/, templates/, bio.py , requirements.txt.

Usage

put your code here

Extras:

  • You can add any other attribute you like in order to add more functionalities.
  • Create a "timer" per link, in a new attribute called until you will put a date 2019/9/30 20:30:00 which will mean that this specific link will only appear until that date, and after that date it will disappear.
  • Deploy this to real life (AWS lambda, Google Cloud Functions, Heroku)
  • Add CI/CD
  • Modularize it
  • Create a POST endpoint /link (ideally with basic-auth) that will allow you to create a new link given a JSON request data.
curl -d @link.json -X POST  \
     -H "Content-Type: application/json" http://localhost:5000/link
//link.json:
{
      "youtube_video_sport": {
        "enable": true,
        "link": "https://url_to_your.youtube.video",
        "description": "check my latest video in youtube"
      }
}

linkmybio's People

Contributors

jmarcos-cano avatar

Watchers

 avatar

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.