Coder Social home page Coder Social logo

denkeni / matters-web Goto Github PK

View Code? Open in Web Editor NEW

This project forked from thematters/matters-web

0.0 0.0 0.0 45.31 MB

Website of Matters.News, built with Next.js.

Home Page: https://matters.news

License: Apache License 2.0

Shell 1.29% JavaScript 0.31% TypeScript 90.52% CSS 7.76% Dockerfile 0.08% Vim Script 0.04%

matters-web's Introduction

matters-web

Deployment Status Build Status Test Status Commitizen friendly

Getting Started

Start local dev

  • Install dependencies: npm i
  • Environment variables: cp .env.local.example .env.local
  • Run npm run gen:type
  • Run npm run dev, then go to http://localhost:3000/

Build and run production server

npm run build && npm run start

Start local dev with Docker

  • Environment variables: cp .env.local.example .env
  • Set command alias: source bin/dc-alias
  • Build docker image: dc build
  • Run:
    • dc up or dc run --service-ports web npm run dev
    • then go to http://localhost:3000/

NOTE: If new packages are added to package.json, dc up will use npm i to install those packages. But if you are using dc run --service-ports web npm run dev, you need to run dc run web npm i manually to make sure that new packages are installed.

Build with docker

  • Set command alias: source bin/dc-alias
  • dc run web npm run build

Push and pull docker image

  • Set command alias: source bin/dc-alias
  • Build docker image: dc build
  • aws configure, then input your access key and secret
  • Login AWS ECR with $(aws ecr get-login --no-include-email --region ap-southeast-1)
  • Push:
    • docker push 903380195283.dkr.ecr.ap-southeast-1.amazonaws.com/matters-web:latest
    • docker tag matters-web:latest 903380195283.dkr.ecr.ap-southeast-1.amazonaws.com/matters-web:latest
  • Pull:
    • docker pull 903380195283.dkr.ecr.ap-southeast-1.amazonaws.com/matters-web:latest
    • docker tag 903380195283.dkr.ecr.ap-southeast-1.amazonaws.com/matters-web:latest matters-web:latest

Testing

See Playwright Testing Guide.

Conventions

See Conventions.

Static Files

./public/static/
├── apple-touch-icon.png # favicons
├── favicon-16x16.png
├── icon-96x96.png
├── icons # icons in different sizes
│   ├── 12px
│   │   ├── ...
│   │   └── draft-edit.svg
│   ├── 72px
│   │   ├── ...
│   │   └── empty-warning.svg
│   └── stripe.svg
├── images # illustrations
│   ├── ...
│   └── publish-4.svg
├── manifest.json # configurations
└── opensearch.xml

Icon

We use SVGR to transform SVGs into React components. For reusability and bundle optimization:

  • If the icon color isn't static:
    • Replace the values of fill and stroke attributes with currentColor, and
    • Add fill="none" to <svg>.
  • If the icon is resuable, create a component file under components/Icon and export it from components/Icon/index.tsx.

Tools

VS Code

Settings

See .vscode/settings.json

Extensions

See .vscode/extensions.json

Vim

Settings

For vim users, you might want to see .vim/.vimrc (using vim-plug).

Troubleshooting

  1. If styled-jsx is installed in both next and our own package.json, the built-in styled-jsx SSR of Next.js will fail. See #533.

matters-web's People

Contributors

at7211 avatar bwjia-penn avatar carolusian avatar catdingding avatar danloh avatar denkeni avatar dependabot-preview[bot] avatar dependabot[bot] avatar devformatters avatar eastsun5566 avatar elkleung avatar fledgexu avatar gary02 avatar guoliu avatar jasmine-liang avatar lilac avatar pitb2022 avatar proformatters avatar robertu7 avatar sherlock-shi-x avatar tx0c avatar xavier-kong 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.