prixite / prixite.github.io Goto Github PK

Change Layout.js to TypeScript.

• Change name to Layout.tsx.
• Change code TypeScript.

If you run the Next.js site, the favicon is not correct. Currently, the favicon shows like this:

We already have env.sample in the repo.

Depends on #80.

Update data.ts to use siteName in the titles of all pages. Here are some examples:

• https://github.com/prixite/prixite.github.io/blob/master/constants/data.ts#L33 will be changed to title: siteName.
• https://github.com/prixite/prixite.github.io/blob/master/constants/data.ts#L127 will be changed to ${siteName} - Portfolio.

Make sure all titles of the pages follow ${siteName} - ${pageTitle} format. For example, https://github.com/prixite/prixite.github.io/blob/master/constants/data.ts#L215 should be changed to ${siteName} - Web Development.

Remove the following files and ignore them using gitignore

• .DS_Store
• .env

Additionally, for .env, create env.sample file. This file should be tracked by Git. Update ReadMe to let people know that they need to copy env.sample to .env.

This placeholder to keep track of sub-tasks.

• #66

Change Header.js to TypeScript.

• Change name to Header.tsx.
• Change code from JavaScript to TypeScript.

• Create markdown files in data/services folder. The content of the services detail page will be retrieved from here.
• The new url for service detail page should be prixite.com/services/web-app-development
• Render the list of services from markdown as well. Use format 2.
• Remove old services typescript pages.

Ideas for storing services data.

Format 1

Filename: data/services.md

• Web App Development
  image
  Prixite being the exquisite web development brands offers innovative solutions to your web development needs in today’s dynamics.

• Wordpress development
  image
  Prixite offers its clients superior quality WordPress solutions that helps them to create a compelling impact in the business world.

Format 2

file: data/services/web-development.md

heading: Web App Development
image: <image>
index: 1

Prixite being the exquisite web development brands offers innovative solutions to your web development needs in today’s dynamics.

file: data/services/word-press-development.md

heading: Wordpress Development
image: <image>
index: 2

Prixite offers its clients superior quality WordPress solutions that helps them to create a compelling impact in the business world.

Change constants.js to data/data.ts.

• Rename filename
• Change code to TypeScript.
• Change references in the codebase.

We are currently using Python pre-commit. We would like to shift to Node based pre-commit. This will ensure easier development experience.

• Add .pre-commit-config.yaml in root of this repo.
• Add a pre-commit.yml under .github/workflows.

The contents of pre-commit.yml can be something like this:

name: pre-commit

on:
  pull_request:
  push:
    branches: [master]

jobs:
  pre-commit:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-python@v2
    - uses: pre-commit/[email protected]

Contents of .pre-commit-config.yaml can be similar to:

repos:
  - repo: https://github.com/pre-commit/pre-commit-hooks
    rev: v4.2.0
    hooks:
      - id: check-yaml
      - id: end-of-file-fixer
      - id: trailing-whitespace
      - 
  - repo: https://github.com/pre-commit/mirrors-prettier
    rev: v2.6.2
    hooks:
      - id: prettier
        exclude: ^tweet_listener/models/
        types: [javascript]

We would like to add a client page to show case the clients we have worked with. There is no need to integrate API backend at the moment. You can just create an array of objects in JavaScript to hold the data for the clients.

Improve design of Header which includes logo, prixite heading and hamburger menu.

Follow docs to add a license file in the repo. Let's add MIT license.

• Remove blogs/[blogId].tsx
• Move posts to data/blogs
• Remove data/data.ts if it is not being used.

We need to add the following code snippet in the HEAD tag:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-C0JTNSKJN1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-C0JTNSKJN1');
</script>

Change Footer.js to TypeScript.

• Change name to Footer.tsx.
• Change JavaScript to TypeScript.

Implement the current website in Next.js.

Problems that we want to solve:

• Move away from writing direct HTML and JS.
• Remove duplication of code.
• Improve code quality.

Implementation Suggestions:
You should fork this repository and then do all the development in your fork. Once you think your code is ready, you can create a PR against this repo. See docs about fork.

References:

• Github pages
• Next.js

Improve contact us button design

https://jekyllrb.com/

This allows to create blogs in markdown

The main theme needs to be same.

• Improve images
• Improve design of "What we do".
• Fix spacing in "What we do" section.
• Improve resolution of logo
• Improve logo design and favicon
• Fix data flow issues
• Improve footer
• Improve button design
• Improve navigation. I don't like the pill design of Contact Us button.

Context:

Change to "What We Do"

Relevant line: https://github.com/prixite/prixite.github.io/blob/master/constants/constants.js#L73

The right edge of menu opener button and the heading section should be aligned. See screenshot.

When I run npm run build I get the following error:

We would like to add a portfolio page to show case our projects. There is no need to integrate API backend at the moment. You can just create an array of objects in JavaScript to hold the data for the projects.

TBA

Improve landing page heading design

• Create a new constant const siteName = "Prixite" in data.ts.
• Use siteName in https://github.com/prixite/prixite.github.io/blob/master/components/header/Header.js#L66
• Use siteName in https://github.com/prixite/prixite.github.io/blob/master/components/header/Header.js#L80

Currently, the code is simple JS. Let's move to TypeScript.

Now we have Next.js website under v2 folder. We still need to deploy this to Github pages. The general implementation sketch is as follows:

• Create a Github action to create the Next.js build.
• Update settings to serve application from the Next.js build folder.

Reference:

• https://github.com/gregrickaby/nextjs-github-pages
• https://javascript.plainenglish.io/deploy-your-next-js-app-on-github-pages-using-the-github-action-525271137409
• https://www.linkedin.com/pulse/deploy-nextjs-app-github-pages-federico-antu%C3%B1a/

We would like to add a jobs page to publicise the job openings in our company. There is no need to integrate API backend at the moment. You can just create an array of objects in JavaScript to hold the data for the jobs.

I think we can move the following block to Header component.

      <Head>
        <title>{title}</title>
        <meta name="prixite" content="Prixte" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

To keep our dependencies up to date, let's integrate https://github.com/dependabot.

Remove vercel.svg. This file not used anywhere.

Add dynamic routing instead of conditional routing so that new pages will just work.

Remove api. This folder is not used anywhere.

We would like to rename constants to data. All the references should be updated as well.