GithubHelp home page GithubHelp logo

dev-protocol / devprotocol.xyz Goto Github PK

View Code? Open in Web Editor NEW
20.0 6.0 21.0 18.47 MB

Dev Protocol Website 2.0 πŸš€ Check our issue tracker for beginner-friendly issues

Home Page: https://devprotocol.xyz

License: MIT License

JavaScript 7.44% Astro 41.65% CSS 2.60% Vue 48.27% Shell 0.04%
hacktoberfest webdev website dev-protocol

devprotocol.xyz's Introduction



devprotocol.xyz

Dev Protocol Website 2.0

View deployed version Β· Report a Bug

πŸ€“ Features

  • Uses modern web technologies
  • Source code has support for writing in Vue, React, Svelte, and/or Preact
  • Source compiles into static HTML and CSS with no/little JavaScript
  • Uses Tailwindcss for styling
  • Handcrafted UI with UX in mind
  • Accessible, Performant, and SEO Optimized

πŸ€” I want to see a deployed version

This website is live hosted at devprotocol.xyz.

πŸš€ Get it running quick

  1. Skip all of the rest steps and use Gitpod, which would automatically do all of this for you: Open in Gitpod

  2. Make sure you have the latest version of NodeJs Installed.

node --version
  1. Install Dependencies
yarn
  1. Start the app
yarn start

πŸ”– Linting

Execute linting and formatting with ESLint and Prettier

yarn lint

πŸ“¦ Requirements

⌚ Coming Soon

Updates available at: https://github.com/dev-protocol/devprotocol.xyz/projects/1

πŸ’– Contributors

Every contributor's efforts and time are deeply appreciated. Thank you! πŸ˜„

devprotocol.xyz's People

Contributors

0rgaan1c avatar abhinavmv avatar aggre avatar anatxiki avatar boidushya avatar ewatch avatar inomag avatar kkrishguptaa avatar kunal0007 avatar mkubdev avatar osaguild avatar panquesito7 avatar rizaafandi avatar shuklaritvik06 avatar simperfy avatar sirinoks avatar sukriti-sood avatar vinzvinci avatar zaidkhan2002 avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar

Forkers

panquesito7 shreyaansjain06 anatxiki inomag himanshu-malviya15 vinzvinci sirinoks rizaafandi sukriti-sood 0rgaan1c mkubdev aggre zaidkhan2002 frankiefab100 abhinavmv hixio-mh kunal0007 simperfy prathamesh-thakur matteusan osaguild

devprotocol.xyz's Issues

[FEATURE] Add a dark mode to the website

Detailed description

I think a dark mode should be added to the website. I currently use Dark Reader to make the websites dark, but for Dev Protocol, it doesn't look that good, IMO.

image

Context

Many users do not like the light mode, they prefer dark mode (like me πŸ˜‚), so I think it'd be a good idea to add a dark mode to the website.

Possible implementation

Add a dark mode to the website, that can be toggled with a button in the navbar.

Additional information

Nope.

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEATURE] Improvement in nav bar

Detailed description

  • Logo need a black circular background so that it is visible clearly
  • There is no hover effect in nav bar components

Context

It will enhance the user's experience

Possible implementation

No response

Additional information

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[BUG] Tablet size doesn't have toggle switch

Description

On tablet size the toggle switch is not there so we can't se any option for creators, developers and patrons.

Expected behavior

There should be a toggle switch present for tablet size screens.

Actual behavior

There is no toggle switch

Possible fix

No response

Steps to reproduce

Fix the code in Navbar

Context

Screenshot 2021-10-20 at 2 54 19 PM

Additional information

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[BUG] Footer looks far different from design

Description

Footer doesn't follow the design schema

Expected behavior

Actual behavior

Possible fix

Steps to reproduce

Context

Additional information

Was introduced in #39

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEATURE] Add links to the team's GitHub profiles

Detailed description

For those who have a GitHub profile and work in Dev Protocol, we might want to add a link to their profile.

Context

This is useful so you can actually know who they actually are at GitHub, the work they do, etc..

Possible implementation

Add a link to the team's respective GitHub profiles.

Additional information

I'd like to work on this!

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEATURE] Build the dynamic medium blog post section

Detailed description

Write code that fetches all the blog posts by devprotocol on medium, Then converts it into markup styled with Tailwind CSS

To be implemented in vue or astro

Styling to be done with Tailwind CSS

Dev Protocol Medium: https://medium.com/devprtcl

RSS Feed: https://medium.com/feed/devprtcl

Design to be achieved:

Blog Post Design. Dev Protocol Website 2.0

Design File available at figma

For more information/support/opportunities to contribute join our discord server

Context

To be implemented at: https://github.com/web3community/devprotocol.xyz/blob/main/src/pages/index.astro#L70-L76

Discussed on Discord

Possible implementation

Use this API: https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/devprtcl

Fetch it using: https://docs.astro.build/guides/data-fetching#fetch

If you are familiar to jsx, here is how to repeat the array into generating blog posts: https://docs.astro.build/core-concepts/astro-components#comparing-astro-versus-jsx

This is a example of somewhat how you have to build it:

---
const blogs = (await (await Astro.fetch('https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/devprtcl')).json())

// Let's assume the response were to be [{ title: 'Blog Post' }, img: '<img_url>'}, { title: 'Blog Post' }, img: '<img_url>'}]
---

<ul>
{blogs.map(blog => <li><img src="{blog.img}"><h4>{blog.title}</h4></li>)}
</ul>

Also use tailwindcss classes to style the components.

Note: This is just example markup, please use more structured and semantic markup. The response also might not be the one displayed since it was just for a example.

Additional information

Discussed on Discord with @mkubdev. Credits to them for the rss-parsing API idea

Code of Conduct

  • I agree to follow this project's Code of Conduct

Update for developers nav link

We have the new developers page, so I believe the navbar like for developers should be rewritten to link to /developers

[FEATURE] Change the navbar items

Detailed description

OVERVIEW | DAO | Community | Help | Launch App

Overview
| For Creators
| For Patrons
| For Developers
| Roadmap

DAO
| Voting Portal

Community
| Forum
| Builders Program

Help
| FAQ
| Tutorials
| Documentation
| Code of Conduct

Launch App = Button for Stakes.social

Context

Dev Protocol team decided to change the navbar items with the ideas above ☝️

Possible implementation

You can get the navbar codes & ideas here πŸ‘‰ https://tailwindui.com/components/marketing/page-examples/pricing-pages

Please center the OVERVIEW | DAO | Community | Help and the launch app should separate to the right
image

Additional information

Please comment here if you want to work with this issue before making PR.

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEATURE] Add contributing guidelines

Detailed description

Add detailed contributing guidelines to the repository. You can
take a reference from the web3community.github.io repository. πŸ™‚

Context

This is useful when first-timers want to contribute to our project or anyone who wants to.

Possible implementation

I don't think this applies here.

Additional information

Please don't just copy-paste the contributing.md file. Try to adjust it according to what this repository is about. πŸ™‚

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEATURE] Add GitPod Support

Detailed description

Add a gitpod config to make the process of setting up the app for development faster.

Context

It would setup a faster and more efficient contributing workflow

Possible implementation

Read the docs.

Borrow the sample config from here

Edit is as per our needs.

Additional information

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[BUG] Image not showing properly in mobile view

Problem subject

Other: Image orientation issue

Description

Top of the image is cut off in mobile view For the following pages
Creators
Developers
Patrons
Screenshot:
image

Expected behavior/contents

Full Image should be visible

Actual behavior/contents

Image Cut off from top

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEATURE] Add URL for Vyper, HiDE, Sindre

Detailed description

Vyper - https://stakes.social/0x90168f9Ba07B95f629f8b77F789d46A549d6470F
HiDE - https://stakes.social/0x528010540517Dd3B708d8Ff7036f841FEA0135b2
Sindre - https://stakes.social/0x44d871aebF0126Bf646753E2C976Aa7e68A66c15

Context

Pretty important to know more about their project

Possible implementation

When we hover the picture or the title, we can see the pointer and can be able to visit the URL provided above ☝️

Additional information

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEATURE] Set the navbar position fixed

Detailed description

I want this navbar position fixed when the user scroll
image

Context

It is better, so they can still visit the links in navbar when they scroll

Possible implementation

No response

Additional information

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[BUG] The backed by section behaves weiredly when passing through navbar

Description

When we scroll and get to the backed by section, it appears to be merged with the nav bar

Expected behavior

It should just go beneath the navbar

Actual behavior

It appears as if it is merging with the navbar

Possible fix

No response

Steps to reproduce

Just scroll through the "backed by" section

Context

It will effect the the people visiting the website

Additional information

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[BUG] navbar and footer bug in mobile view

Description

image

image

Expected behavior

I provided info. on what to change, please see the image

Additional information

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEAT]: SEO

SEO can be certainly improved on the website. Add meta description and meta tags to the website

[FEATURE] Improve the Blog design

Detailed description

Wrong design:
image

Correct design:
image

You can see the Figma design πŸ‘‰ here

Context

This required change is important to make it look better.

Possible implementation

No response

Additional information

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[BUG] 3 pages different placement

Problem subject

I would like the text and images to appear in the same place on all three screens of for Creators, for Patrons, & for Developers.

Description

image

Expected behavior/contents

The placement should not different

Actual behavior/contents

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEATURE] nav bar changes

Detailed description

  • Make the nav bar opaque
  • Make the join button slightly better
  • Add a line at the bottom of navbar

Context

This change will make the website look better from a design perspective

Possible implementation

No response

Additional information

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEAT] Config tailwind to use the new fonts

Detailed description

Use the fonts declared in the design

Context

Possible implementation

Add this to the stylesheet:

@font-face {
                font-family: 'Whyte';
                src: url('https://devstaticasset.azureedge.net/font/ABCWhyte-Regular.woff2')
                    format('woff2');
                font-style: normal;
                font-weight: 400;
                font-display: swap;
            }

            @font-face {
                font-family: 'WhyteInktrap';
                src: url('https://devstaticasset.azureedge.net/font/ABCWhyteInktrap-Bold.woff2')
                    format('woff2');
                font-style: bold;
                font-weight: 900;
                font-display: swap;
            }

            @font-face {
                font-family: 'WhyteInktrap';
                src: url('https://devstaticasset.azureedge.net/font/ABCWhyteInktrap-Regular.woff2')
                    format('woff2');
                font-style: normal;
                font-weight: 400;
                font-display: swap;
            }

Then config tailwind for this: https://tailwindcss.com/docs/font-family#font-families

Also update the class names if needed

Additional information

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEATURE] Add Community Partners page

Detailed description

Another page for Dev Protocol community partners

here's the community partners
image

Context

This is one of the most important page in this website

Possible implementation

I think better use cards for this, u can get some ideas here: https://tailwindui.com/components/application-ui/lists/grid-lists#component-5d72b187beb968e12db89fe49f272b18

Additional information

Anyone can start working with this, hopefully will be done this week.

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEATURE] Add Testimonials in creator page

Detailed description

Hey folks! Another green square πŸŽ‰

Let's add testimonials to the creators page

Context

This is very important to know the creators experience within the Dev Protocol

Possible implementation

I suggest to use this
https://tailwindui.com/components/marketing/sections/testimonials#component-54ee9cbce13afa3082f12b00ff1c00a6
image

Additional information

Here's their testimonials:

Sindre

"I like how the Dev Protocol is improving open source sustainability in an innovative way"

link: https://twitter.com/sindresorhus

ΞΌ-zomia

"DevProtocol is born out of the love of people supporting people. Once you understand that, there's no reason not to be part of the team."

link: https://twitter.com/zomia12

HiDE

"DEV protocol is a sustainable source of funding for the community ecosystem that uses our services to operate.
It is a core feature of the HiÐΞ protocol and is a very important financial resource. As OSS creators, we feel free to use some DEV tokens for development and redistribute them in our services. I will continue to do my best for the further development of the DEV community that you have staked out for us."

link: https://twitter.com/HideProtocol

ScytheSwap

"Being a part of Dev Protocol has been an incredible experience. When I was on boarded to stakes.social I was exposed to an audience of OSS creators and enthusiasts alike who helped to fund our project while simultaneously engaging with us, creating long-term connections with some of the most intelligent developers in the world. Dev Protocol, and all that it offers to OSS contributors, along with its community are truly one of a kind."

link: https://github.com/ScytheSwapProtocol

IslandviewDigital

"Being part of Dev Protocol not only means being able to sustainably raise capital for our immersive, revenue-generating VR real estate development projects, it means being part of a community of talented innovators with whom we can synergize to bring even more value to the protocol."

link: https://twitter.com/IslandVDigital

Samuil / SQ-UI

"DEV protocol jump-started our project and helped us do what we love."

link: https://twitter.com/samuil4

Code of Conduct

  • I agree to follow this project's Code of Conduct

[BUG] Wrong Stakes.Social link for Vyper

Problem subject

No response

Description

The link to Vyper's Stakes.Social profile is wrong. It leads you to Chalk's profile.

Expected behavior/contents

Link to Vyper's Stakes.Social profile.

Actual behavior/contents

The current link leads to Chalk.

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEAT]: OGP Banner

We need a image banner for open graph protocol (the one that will appear when we share the website on discord/twitter/other)

[FEATURE] Set the navbar position fixed

Problem subject

Navbar

Description

Navbar is not sticky at top in any of the pages.

Expected behavior/contents

Navbar should be sticky so that user can navigate using Navbar rather then scrolling up.

Actual behavior/contents

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEATURE] Add documentation in README

Detailed description

Please add documentation in our README with some installation needed

Context

This is important, this allows others to understand what we are working

Possible implementation

No response

Additional information

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEATURE] Step by Step Onboarding section

Detailed description

Step by Step Onboarding

Step 1
In order for you to register (or tokenize) your Open Source Project to Dev Protocol, you need to go through a registration procedure for Stakes.social. You’ll need a wallet to register, so you must have one beforehand. You can use any wallet provided there like MetaMask to log in on Stakes.social.

Step 2
Click the β€œSign in” button located at the right side of the navigation bar to connect your wallet to Stakes.social and it will automatically login if you successfully connect your wallet to the Stakes.social.

Step 3
Click the "Create" in navigation bar and answer the provided form. After you submit your application form, we kindly ask you to wait for about a week for the screening process. We’ll let you know the result via email, so please change the filtering setup for your mail box to receive an email from β€œ@devprotocol.xyz”.

Step 4
If you successfully pass the screening, access the URL written in the approval email. We will send you another step-by-step method to completely onboard to the Stakes.social. You’ll need a gas fee for your registration. It fluctuates depending on the congestion condition, however, it would be around 0.0436ETH. Since the gas costs are constantly changing, it is safer to separate about 0.0875 ETH for the onboarding process.(edited)

Context

This is the last section that needs to add for creators page

Possible implementation

Feature: https://tailwindui.com/components/application-ui/lists/feeds

Additional information

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEATURE] Add a contact page

Detailed description

We should add a contact page where we will add our contact platforms (such as mail, Discord, forum, etc.).

Context

We can use it for the config issue template (which is not accepting emails, no idea why) so people can contact us easier and faster. πŸ™‚

Possible implementation

Add a contact page on the website.

Additional information

Nope.

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEATURE] Update the slider section and put their description

Detailed description

View link https://www.figma.com/file/rmCKKIsjSWCH0q6lObDQC8/Dev-Protocol-design?node-id=0%3A1

Please put their title and description as well

HiDE
HiDE is a decentralized blogging platform from Japan. In Japan, blogging projects like Steem It did not last, but they used the Dev Protocol to monetize blog posts and create a sustainable reward distribution model for users. They are a newly founded startup, but have made $60,000 in revenue in six months with Stakes.social and are about to start giving back to their blog users.

Sindre
He is one of the most influential independent developers in the OSS fields. He has developed over 1000 OSS projects and lives as a full-time Open Sourcer. One of his famous OSS project, Chalk is downloaded 90 million times a week, but he only receives $360 a month in donations on Patreon. He has been involved with Dev Protocol as an MVP user since 2019, and has given back about $2.1M in revenue earned there to GitHub's most active developers this year.

Context

image

Possible implementation

The slider should be automatic and the arrow button with their name is clickable

Additional information

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[Bug] Responsive Website

Detailed description

Hi everyone, our current website isn't responsive.

Context

It will be cool if this website is responsive, much better to look to other devices like mobile phone and tablet

Possible implementation

No response

Additional information

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEATURE] Step by Step Staking section

Detailed description

Step by Step Staking

Step 1
Staking is the act of actively setting aside your DEV tokens in your Wallet to deposit them in your favorite Creator pool on stakes.social. To buy DEV Token, you need an ETH on your wallet to convert it to $DEV.

Step 2
After you buy DEV Token, add the DEV token address in your wallet. You need to find a project that you like on Stakes.social. If you find a project interesting, you can click on the banner, the project page will show up, there you can find the description and some useful things like Github, Twitter pages, YouTube channel, Website, etc. This could help you decide to stake your $DEV. On the blue box, you can type a specific amount of DEV you want to stake on that project, or you can just click on DEV, and the total amount of DEV in your wallet will automatically show on that box.

Step 3
After that, you can click on the blue Stake button and a transaction approval message will pop up in your wallet, you can check out the amount of gas required to Stake, by clicking approve, your DEV will be deposited on the contract and it will be staked. Once staked refresh the page and your DEV will show on the β€˜Your Staking Amount’ box. You will instantly start receiving Rewards and so will the Creator that you chose, those can also be seen on the dashboard.

Step 4
If you still can’t decide, my tip is, visit the official Discord or Telegram channel and ask the community. Always try to stake and reward active developers that promote DEV, this will be good for everyone on the long run.

Context

This is the last section that needs to add in Patrons section

Possible implementation

Feature: https://tailwindui.com/components/application-ui/lists/feeds

Additional information

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEATURE] Use loaded SVG files in the footer

Detailed description

Instead of using in-HTML SVGs, I think we should load the SVGs from a file using the img tag (this for example can be seen in the footer file).

https://github.com/web3community/devprotocol.xyz/blob/cd851e4900c16e366435ce7203e71ae59333de3f/src/components/Global/Footer.astro#L24-L36

This can also be seen in other parts of the code in that file.

Context

It would make the code shorter and easier to read, IMO.

Possible implementation

Use loaded SVGs using the img tag in the footer file.

Additional information

Nope.

Code of Conduct

  • I agree to follow this project's Code of Conduct

[FEATURE] Add FAQ page

Detailed description

Hey folks,

I'm proposing to add the FAQ page with 10 prepared questions and answer using Lorem ipsum πŸ˜„ Just don't link the FAQ in the navbar for now

image

We are using TailwindUI and we have a subscription to it, so don't be bothered to use it on our site.

Context

This will benefit us if there's already a template in our codebase, then we can be able to change the info. once the Q&A is ready

Possible implementation

You can see the codes here:
https://tailwindui.com/components/marketing/sections/faq-sections#component-8017f4faee579f7ca518cdde140d4689

Additional information

Thank you ❀️

Code of Conduct

  • I agree to follow this project's Code of Conduct

[BUG] The Miraise logo is stretched

Description

The title says it all.

Expected behavior

The image shouldn't be stretched.

Actual behavior

The image is stretched.

Possible fix

No response

Steps to reproduce

  1. Go to the website.
  2. Go almost to the bottom
  3. Check the Miraise logo, and you'll see it looks stretched.

Context

This bug makes the logo look unprofessional and bad, IMO.

Additional information

Nope.

Code of Conduct

  • I agree to follow this project's Code of Conduct

[BUG] Image's size is bigger

Description

The size of the image is different from the other ones (see the screenshot).

image

Expected behavior

The image's size should be the same as the other ones.

Actual behavior

The image's size is different from the other ones.

Possible fix

No response

Steps to reproduce

  1. Go to the website https://devprotocol.xyz/
  2. Go to almost the bottom.
  3. You'll see the 3rd image has a different size.

Context

I think this makes it look unprofessional having different sizes.

Additional information

Nope. πŸ™‚

Code of Conduct

  • I agree to follow this project's Code of Conduct

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.