Code Monkey home page Code Monkey logo

ckomop0x.me.site's Introduction

codecov

Ckomop0x.me blog website

Personal blog website. It uses NextJS, Strapi, TypeScript, GraphQL and other technologies. It has many good optimisations under the hood.

https://ckomop0x.me

How it works

Backend

I use Strapi as a headless CMS and gather data via GraphQL.

Frontend

For the client, I use NextJS and Apollo. Each deployment gets the newest data via GraphqQL. TypeScript types are generated during deployment. They are based on schema and queries.

For automatization, I use GitHub actions and Netlify deploy. Strict policies allow deploying to prod only from master, and it's possible to push to master or merge PR only if tests are ✅ passing and everything is ok with build/deploy to Vercel.

Technologies

  • NextJS (website)
  • TypeScript with automated types for data generation;
  • Styled Components
  • Apollo GraphQL
  • Prettier / Husky / Git-hooks
  • Eslint
  • Lazy load images
  • Jest

Install

npm i

Usage

npm run dev

Run tests

npm run test

Author

👤 Pavel Klochkov, [email protected]

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright ©2024 Pavel Klochkov, [email protected].

This project is MIT licensed.

ckomop0x.me.site's People

Contributors

dependabot[bot] avatar ckomop0x avatar renovate[bot] avatar dopamine-s avatar snyk-bot avatar

Stargazers

avatar

Watchers

James Cloos avatar avatar avatar

ckomop0x.me.site's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

github-actions
.github/workflows/test.yml
  • actions/checkout v4@692973e3d937129bcbf40652eb9f2f61becf3332
  • actions/setup-node v4@0a44ba7841725637a19e28fa30b79a866c81b0a6
  • codecov/codecov-action v4@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673
npm
package.json
  • @apollo/client ^3.10.1
  • @apollo/rover ^0.26.0
  • @babel/core ^7.24.4
  • @emotion/babel-plugin ^11.11.0
  • @emotion/react ^11.11.4
  • @emotion/styled ^11.11.5
  • @storybook/addon-actions ^8.0.9
  • @storybook/addon-essentials ^8.0.9
  • @storybook/addon-links ^8.0.9
  • @storybook/react ^8.0.9
  • @testing-library/jest-dom ^6.4.2
  • @testing-library/react ^16.0.0
  • @types/jest ^29.5.12
  • @types/react-test-renderer ^18.3.0
  • @typescript-eslint/eslint-plugin ^8.0.0
  • @typescript-eslint/parser ^8.0.0
  • babel-plugin-styled-components ^2.1.4
  • bootstrap ^4.6.2
  • date-fns ^4.0.0
  • eslint-config-next ^14.2.3
  • eslint-config-prettier ^9.1.0
  • eslint-import-resolver-typescript ^3.6.1
  • eslint-plugin-import ^2.29.1
  • eslint-plugin-prefer-arrow ^1.2.3
  • eslint-plugin-prettier ^5.1.3
  • eslint-plugin-react ^7.34.1
  • eslint-plugin-react-hooks ^4.6.1
  • graphql ^16.8.1
  • html-react-parser ^5.1.10
  • jest-environment-jsdom ^29.7.0
  • next ^14.2.3
  • react ^18.3.0
  • react-dom ^18.3.0
  • react-markdown ^9.0.1
  • @eslint/compat 1.1.1
  • @eslint/eslintrc 3.1.0
  • @eslint/js 9.11.0
  • @graphql-codegen/cli 5.0.2
  • @graphql-codegen/client-preset 4.3.3
  • @graphql-codegen/introspection 4.0.3
  • @storybook/nextjs 8.3.2
  • babel-jest 29.7.0
  • babel-loader 9.2.1
  • cross-env 7.0.3
  • cross-var 1.1.0
  • dotenv 16.4.5
  • dotenv-cli 7.4.2
  • eslint 8.57.1
  • eslint-plugin-storybook 0.8.0
  • globals 15.9.0
  • husky 9.1.6
  • jest 29.7.0
  • lint-staged 15.2.10
  • next-sitemap 4.2.3
  • prettier 3.3.3
  • storybook 8.3.2
  • ts-graphql-plugin 4.0.3
  • ts-jest 29.2.5
  • tsconfig-paths-webpack-plugin 4.1.0
  • typescript 5.6.2
  • Check this box to trigger a request for Renovate to run again on this repository

Create type mapper

We need to have a type mapper to work with different content types for content.
Now we have RichText and Image. There can be even more Content types. Now the application can take only the first value with a hardcoded solution.

Definition of done:

Created extensible mapper component which can proceed with current types and be easily extensible for more types if needed.

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.