Giter Club home page Giter Club logo

codu-code / codu Goto Github PK

View Code? Open in Web Editor NEW
115.0 6.0 91.0 22.27 MB

Codú's open-source codebase. A space for coders. Visit our community!

Home Page: https://codu.co/

License: Apache License 2.0

TypeScript 88.14% JavaScript 0.66% CSS 1.11% Dockerfile 0.20% Shell 0.17% MDX 9.72%
community education javascript learn-to-code codu careers nextjs nodejs reactjs code css sql web-development computer-science react tailwindcss prisma hacktoberfest hacktoberfest2023

codu's Introduction

PRs Welcome

Codu Logo

A space for coders

Codú is the ultimate community of web developers to learn, share, and get support for your projects, either big or small. It is the perfect place to sharpen your skills and build your portfolio. In Codú, we're all here to help each other to grow as web developers. Plus, Codú makes it easier to find collaborators for your next big project.


💬 Join the conversation

We have a fantastic community growing on Discord. Click here to join!


🖥️ Installation

  1. Fork the project
  2. Clone with git clone https://github.com/YOUR_USERNAME/codu.git.
  3. Navigate to the project directory cd codu.
  4. Install dependencies with:
npm install
  • If you have any issues installing dependencies, check your node version against that defined in the .nvmrc. If you're using nvm, you can run nvm use before installing dependencies.
  1. Create a .env file and add the following variables. You can copy the contents of sample.env with cat sample.env > .env.
# This default value is if you run our local docker-compose.yml file to create the database.
DATABASE_URL=postgresql://postgres:[email protected]:5432/postgres
# Setup your GitHub ID & Secret on GitHub: https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps
# For development, make sure you set up this with a Homepage URL of http://localhost:3000/ and an Authorization callback URL of http://localhost:3000/api/auth
GITHUB_ID=YOUR_GITHUB_APP_ID
GITHUB_SECRET=YOUR_GITHUB_APP_SECRET
NEXTAUTH_URL=http://localhost:3000/api/auth

For a more detailed how to guide on setting them up go to the Environment Variables section.

  1. Make sure your database is running and setup the tables in the database with Drizzle by running:
npm run db:push
  1. Seed the database with some mock data by running:
npm run db:seed
  1. Finally, run the development server:
npm run dev

After completion of above commands, now -

Navigate to http://localhost:3000 in your browser to see the result.

You can start your journey by modifying pages/index.tsx. With Auto-update feature, pages updates as you edit the file.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn more about API routes here.

Environment Variables

DATABASE_URL

The DATABASE_URL is a connection string to a PostgreSQL database (version 15.0).

By default, we point to a database running locally with Docker from our docker-compose.yml file.

To run this file, make sure you have Docker installed and that Docker is running.

Run the command docker compose up.

Alternatively, if you have PostgreSQL running locally then you can use your local connection string or grab one from a free service like Supabase.

GITHUB_ID and GITHUB_SECRET

Currently, we only allow authentication via GitHub. To enable this you need to have a GITHUB_ID and GITHUB_SECRET value.

Setup your GitHub ID & Secret on GitHub:

Shortcut - Click here to setup New OAuth App.

For development, make sure you setup this with a Homepage URL of http://localhost:3000/ and Authorization callback URL of http://localhost:3000/api/auth.

Screenshot 2022-10-25 at 08 22 03

After you click the "Register application" button you should see the GITHUB_ID and be able to generate a new client secret. You can see this in the screenshot below. 👇 Screenshot 2022-10-25 at 08 23 22 After generating the secret, make sure you copy this value to your .env file as this value can not be seen again once you refresh the page. 👇 Screenshot 2022-10-25 at 08 26 04

Setting up Passwordless auth locally

In order to use Passwordless login locally you need to have a ACCESS_KEY and SECRET_KEY value.

Niall has written a tutorial on how to send emails with AWS SES and shows how to get these values.

Check out the example .env file here to see how to populate these values

Note: Currenly the AWS region of the SNS service is hardcoded to "eu-west-1" it may be necessary to change this if your SNS service is in a different region

NEXTAUTH_URL

You shouldn't need to change the default value here. This is a variable used by Next Auth as the authentication URL to your site.

NEXTAUTH_URL=http://localhost:3000/api/auth

For more information, you can read the documentation here. Example .env file can be found here. You can rename this to .env to get started

👨‍💻 Contribution Guidelines

  • Contributions are greatly appreciated. Contributions make the open-source community an amazing place to learn, inspire, and create.
  • Check out our contribution guidelines for contributiong to our repo. It includes
    • How to Contribute
    • How to create a Pull Request
    • Run Tests
    • Also, Style Guide for Commit Messages

📙 Prerequisite Skills to Contribute

📃 Documentation Contributions

💾 Code Contributions

📚 Additional Resources

To learn more about Next.js, take a look at the following resources:

Editor Doc

To learn about the editor shortcuts and hotkeys you can check out this document

💥 Issues

You are welcome to open issues to discuss ideas about improving our Codú. Enhancements are encouraged and appreciated.

codu's People

Contributors

abhijeetgurle avatar brancualexandru avatar brianwhelandublin avatar carolinacobo avatar cbid2 avatar danboyce92 avatar danishkar avatar darrachbarneveld avatar dogpawhat avatar garyb1 avatar gdomaradzki avatar jh3y avatar john-paul-larkin avatar johnallentech avatar lemondrop847 avatar maczi01 avatar nialljoemaher avatar pateldivyesh1323 avatar patrickhladun avatar pkspyder007 avatar rajugangitla avatar realshaunoneill avatar seog-jun avatar serzhan181 avatar shreyas-ram avatar sleithdylan avatar snyk-bot avatar thanhsonng avatar viniirbr avatar xiaoniuniu89 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  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

codu's Issues

Add blog page

Create a markdown based blog under /articles route.
Should support syntax highlighting.

Show tags on posts

Currently, we have tags available for all posts.

I think it would be great if we could see those tags on posts.

Eg. if you open an article tagged react.js you should see the tags near the heading or footer of the article.

There will be two tasks in this:

  • Surfacing the data to the posts
  • Making the design look nice

Add light/dark mode for all pages.

I would love to have a toggle feature like this Tailwind demo: https://syntax.tailwindui.com/

  • Should use the system settings by default
  • Use the dark: class to make it easier to control/update
  • We probably need a Theme wrapper for the application to make sure we can control it.

Tasks

  1. enhancement hacktoberfest
    abhijeetgurle
  2. enhancement hacktoberfest
    pateldivyesh1323
  3. enhancement hacktoberfest
    pateldivyesh1323
  4. enhancement hacktoberfest
    Danishkar
  5. enhancement hacktoberfest
    MuzhdaN
  6. enhancement hacktoberfest
    DarrachBarneveld

Create guidelines in Readme for getting started in the project

Currently the readme doesn't cover how to get started with Prisma, a new database and adding your own GitHub app. This needs to be added so that we can make it easier for contributors getting started.

Bonus: This would be great as it's own page on the site too, and we will create a separate issue after we complete the guide.

So we need to document:

  • The required .env variables
    • DATABASE_URL
    • GITHUB_ID
    • GITHUB_SECRET
    • NEXTAUTH_URL (this could be included by default)
  • Creating a new database (and getting a connection string) - Either a docker image or Supabase is handy.
  • How to setup the tables in database npx prisma db push.
  • Setting up a new GitHub app (getting the GITHUB_ID and a GITHUB_SECRET).

Rename .env.development to .env

Context

Due to an error on running npx prisma db push we are unable to use .env.development.
Prisma expects a .env not a .env.development.

Note, if someone has a solution that does not require renaming I will also look at that.

Expected Behavior

When running npx prisma db push I expect it to run as suggested in the readme docs.

Current Behavior

Currently npx prisma db push errors because there is no .env file.

Setup e2e test with Playwright

To ensure we don't have major breaks on releases we should have sufficient end to end testing.

I am suggesting Playwright since it seems to be one of the best options on the market.

This first issue is just making sure that we can get Playwright running and then we can create issues for specific scenarios.

Add dynamic meta data for SEO

Currently, we get no SEO or OG previews based on the data provided in the blog posts.

We should leverage the data of the post to create a social preview similar to what I have done on my own blog here:
https://github.com/NiallJoeMaher/website/blob/main/pages/blog/%5Bslug%5D.js

This will help with SEO and just generally better findability of content.

We have a default OG image, and I have created issue #72 to work on a nice OG preview image that is unique for each post.

Post changes disappears when clicking away from the post editor

Context

When editing a post or content user might lose the changes if not saved.

Expected Behavior

The user should be able to click away from the browser and not lose the changes to the post.

Current Behavior

When the post is edited and the user clicks away from the browser or changes the browser tab and then navigates back to the post editor all the content that was not saved disappears.

Screenshots

2022-11-08 11 36 15

Steps to reproduce

  1. Open the post
  2. Start making changes
  3. Click away from the browser or a different tab in the browser
  4. Click back on the browser tab with the post editor
  5. The new unsaved changes will disappear

Add invite only for signup

Context

We should only allow known authors for early tests until we have some moderation ability.

I found this discussion on NextAuth with a potential implementation
nextauthjs/next-auth#4106

Expected Behavior

I expect that if a user is not invited they cannot use the sign-in or sign-up functionality.

Current Behavior

Anyone can sign in or sign up

Dynamically create preview images for blog articles

Context

Based on something I see Medium and other good blogging platforms it would be cool to dynamically generate a OG image like seen here on jhey.dev:
Screenshot 2022-10-23 at 14 38 39

I expect it to look something like this:
image

Expected Behavior

Each article has its own OG preview showing the title of the article and the branding of Codú.

Current Behavior

Currently we don't have OG images.

Add `lang` attribute to the `<html>`

To improve the accessibility score on google lang attribute could be added to the <html> element.

This can be done either by updating _document.tsx or by adding the internalisation setting i18n in next.config.js.

Fix bug when saving article if "View advanced settings" is open.

Context

When trying to save an article, after viewing the advanced settings (which contains the Canonical URL) I am unable to save without a valid canonical URL.

Expected Behavior

We should be able to save with an empty canonical URL.

Current Behavior

We cannot save with an empty canonical URL if the "advanced settings" has been opened.

Add space for advertising banner on articles and feed

We need to make some money to get swag for contributors and events. I think the simplest start is having some non-invasive ads in the sidebar. If anyone has any alternative ideas, that would be great but would like to pilot this.

I think we can start with a placeholder that brings people to the sponsors page.

Show articles in chronological order

The current articles page shows the articles in alphabetical order, we can change that to show the most recently added articles on top by using the date in frontmatter of post

Add a code of conduct page to the site

Add a code of conduct page to the site, as seen on many big projects.

The great idea was suggested by @CarolinaCobo.

I really want to highlight this as an inclusive and fun space! 🙌

The theme should fit the other pages, so please attach screenshots to the PR or reach out if you need help styling.

Add YouTube URL

We are missing the icon for YouTube in the socials in the footer.

Only generate excerpt if post is published without excerpt

Context

In the post editor, we always have an excerpt even before we publish.

Expected Behavior

I would expect this to only be generated if the user has published an empty excerpt. It should also not allow extra whitespace. As you can see here this has linebreaks in the preview which won't be respected when rendered anyway.

Current Behavior

Currently after saving a post an excerpt is generated.

Screenshots

Screenshot 2022-11-23 at 19 53 32

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.