A developer blog starter for 2021 (Next.js + React + TypeScript + Markdown + syntax highlighting)

Overview

Devii

A developer blog starter for 2020.
Next.js
React
TypeScript
Markdown
syntax highlighting
SEO
RSS generation

if you're happy and you know it, star this repo

License




A dev blog starter for 2020.

  • Works as a Markdown-based static-site generator out of the box: just add new blog posts to /md/blog
  • Supports exporting to fully static assets (powered by Next.js)
  • Hot reload (powered by Next.js)
  • Makes it easy to write custom pages/code in React + TypeScript
  • Provides a Markdown.tsx component with support for GitHub-style syntax highlighting
  • Automatic RSS feed generation
  • SEO best practices (title tag, meta tags, canonical URLs)

Read more about the motivation + design behind Devii at https://colinhacks.com/blog/devii.

Get started

This repo contains the code for https://devii.dev.

devii.dev serves as both the documentation AND a working demo of Devii. After you clone/fork it, you can look through the code to learn how Devii works. Then you can rip out everything you don't like, customize everything else, and build your own tools and components on top of the foundation Devii provides!

Your personal website is the online manifestation of you. Devii doesn't really provide much out of the box. It provides some nice Medium-style default styles for your blog posts and some tools for loading/rendering Markdown. But you'll have to implement your own homepage more or less from scratch. And that's the point! Don't settle for some theme. Build something that represents you.

To get started:

  1. Fork this repo
  2. git clone [email protected]:yourusername/devii.git my-blog
    cd my-blog
    yarn
    
  3. Start the development server with yarn dev. This should start a server on http://localhost:3000.

Powered by Next.js

The core of this repo is Next.js. We chose Next.js because it's the simplest, most elegant way to generate a static version of a React-based website. The documentation is excellent; read it first: Next.js Documentation.

Project structure

Here's is an abbreviated version of the project structure. Certain config files (next.config.js, next-end.d.ts, .gitignore) have been removed for simplicity.

.
├── README.md
├── public // all static assets (images, css, etc) go here
├── pages // every .tsx component in this dir becomes a page of the final site
|   ├── index.tsx // the home page (which has access to the list of all blog posts)
|   ├── blog
|       ├── [blog].md // a template component that renders the blog posts under `/md/blog`
├── md
|   ├── blog
|       ├── devii.md // this page!
        ├── whatever.md // every MD file in this directory becomes a blog post
├── components
|   ├── BlogPost.tsx
|   ├── Code.tsx
|   ├── Footer.tsx
|   ├── Header.tsx
|   ├── Markdown.tsx
|   ├── Meta.tsx
|   ├── 
├── loader.ts // contains utility functions for loading/parsing Markdown
├── node_modules
├── tsconfig.json
├── package.json

Next.js generates a new webpage for each file in the pages directory. If you want to add an About page to your blog, just add about.tsx inside pages and start writing the page.

By default the repo only contains two pages: a home page (/pages/index.tsx) and a blog page (/pages/[blog].md).

The file [blog].ts follows the Next.js convention of using square brackets to indicate a dynamic route.

The home page

The home page is intentionally minimal. You can put whatever you want in index.tsx; one of our goals in designing Devii was to place no restrictions on the developer. Use your imagination! Your website is the online manifestion of you. You can use whatever npm packages or styling libraries you like.

Styling

Devii is unopinionated about styling. Because your Devii site is a standard React app under the hood, you can use your favorite library from npm to do styling.

Devii provides certain styles by default, notably in the Markdown renderer (/components/Markdown.tsx). Those styles are implemented using Next's built-in styling solution styled-jsx. Unfortunately it was necessary to make those styles global, since styled-jsx doesn't play nice with third-party components (in this case react-markdown).

Feel free to re-implemement the built-in styles with your library of choice If you choose to use a separate styling library (emotion is pretty glorious) then you could re-implement the default styles

Adding a new blog post

Just add a Markdown file under md/blog/ to create a new blog post:

  1. Create a new Markdown file called foo.md within the /md/blog directory
  2. Add in some basic Markdown content
  3. Then go to http://localhost:3000/blog/foo. You should see the new post.

Frontmatter support

Every Markdown file can include a "frontmatter block" containing various metadata. Devii provides a loadPost utility that loads a Markdown file, parses it's frontmatter metadata, and returns a structured PostData object:

type PostData = {
  path: string;
  title?: string;
  subtitle?: string;
  description?: string; // used for SEO
  canonicalUrl?: string; // used for SEO
  datePublished?: number; // Unix timestamp
  author?: string;
  authorPhoto?: string;
  authorHandle?: string; // twitter handle
  tags?: string[];
  bannerPhoto?: string;
  thumbnailPhoto?: string;
};

For example, here is the frontmatter blog from the sample blog post (md/blog/the-ultimate-tech-stack.md):

---
title: Introducing Devii
subtitle: Bringing the power of React, TypeScript, and static generation to dev blogs everywhere
datePublished: 1589064522569
author: Ben Bitdiddle
tags:
  - Devii
  - Blogs
authorPhoto: /img/profile.jpg
bannerPhoto: /img/brook.jpg
thumbnailPhoto: /img/brook.jpg
---

View /loader.ts to see how this works.

Google Analytics

Just add your Google Analytics ID (e.g. 'UA-999999999-1') to globals.ts and Devii will automatically add the appropriate Google Analytics snippet to your site. Go to /pages/_app.ts to see how this works or customize this behavior.

Medium-inspired design

The Markdown renderer (Markdown.tsx) provides a default style inspired by Medium. Just modify the CSS in Markdown.tsx to customize the design to your liking.

GitHub-style code blocks

You can easily drop code blocks into your blog posts using triple-backtick syntax (just like GitHub). No more embedding CodePen iframes! 🚀

Works out-of-the-box for all programming languages. Specify your language with a "language tag". So this:

  ```ts
  // pretty neat huh?
  const test = (arg: string) => {
    return arg.length > 5;
  };
  ```

turns into

// pretty neat huh?
const test = (arg: string) => {
  return arg.length > 5;
};

View /components/Code.tsx to see how this works or customize this behavior.

Markdown loading

You don't need to understand all of this to use Devii. Consider this an "advanced guide" you can use if you want to customize the structure of the site.

Markdown posts are loaded during Next.js static build step. Check out the Data Fetching documentation to learn more about this.

Here's the short version: if export a function called getStaticProps from one of your page components, Next.js will execute that function, take the result, and pass the props property (which should be another object) into your page as props.

You can dynamically load and parse a Markdown file using loadMarkdownFile, a utility function implemented in loader.ts. It is an async function that returns a PostData TypeScript object containing all the metadata keys listed above:

For an example of this, check out the getStaticProps implementation from the homepage. The function calls loadBlogPosts - a utilty function that loads every blog posts in the /md/blog/ directory, parses them, and returns PostData[].

export const getStaticProps = async () => {
  const posts = await loadBlogPosts();
  return { props: { posts } };
};

There are a few utility functions in loader.ts that Devii uses. All functions are async! All functions accept a relative path which is expected to be _relative to the md/ directory. For instance loadPost('blog/test.md') would load /md/blog/test.md.

  • loadPost loads/parses a Markdown file and returns a PostData
  • loadBlogPosts: loads/parses all the files in /md/blog/. Returns PostData[]. Used in index.tsx to load/render a list of all published blog posts
  • loadMarkdownFile: loads a Markdown file but doesn't parse it. Returns the string content. Useful if you want to implement some parts of a page in Markdown and other parts in React
  • loadMarkdownFiles: accepts a glob pattern and loads all the files inside /md/ whose names match the pattern. Used internally by loadBlogPosts

Static generation

You can generate a fully static version of your site using yarn build && yarn export. This step is entirely powered by Next.js. The static site is exported to the out directory.

After it's generated, use your static file hosting service of choice (Vercel, Netlify, Firebase Hosting, Amazon S3) to deploy your site.

Global configs

There is a globals.ts file in the project root containing some settings/configuration metadata about your site:

  • yourName: Your name, used for the copyright tags in the footer and the RSS feed, e.g. Alyssa P. Hacker
  • siteName: The title of your blog, e.g. Alyssa's Cool Blog;
  • siteDescription: A short description, used in the meta description tag, e.g. 'I write about code 'n stuff';
  • siteCreationDate: Used in the generated RSS feed. Use this format: 'March 3, 2020 04:00:00 GMT';
  • twitterHandle: The twitter handle for you or your blog/company, used in the Twitter meta tags. Include the @ symbol, e.g. '@alyssaphacker';
  • email: Your email, used as the "webMaster" and "managingEditor" field of the generated RSS feed, e.g. [email protected];
  • url: The base URL of your website, used to "compute" default canonical links from relative paths, e.g. 'https://alyssaphacker.com';
  • accentColor: The header and footer background color, e.g. #4fc2b4;

RSS feed generation

An RSS feed is auto-generated from your blog post feed. This feed is generated using the rss module (for converting JSON to RSS format) and showdown for converting the markdown files to RSS-compatible HTML.

For RSS generation to work, all your posts must contain a datePublished timestamp in their frontmatter metadata. To examine or customize the RSS generation, check out the rssUtil.ts file in the root directory.

SEO

Every blog post page automatically populated meta tags based on the post metadata. This includes a title tag, meta tags, og: tags, Twitter metadata, and a link tag containing the canonical URL.

The default value of the canonical URL is computed by concatenating the value of your url config (see Global Configs above) and the relative path of your post. Verify that the canonical URL is exactly equivalent to the URL in the browser when visiting your live site, otherwise your site's SEO may suffer.

Insanely customizable

There's nothing "under the hood" here. You can view and modify all the files that provide the functionality listed above. Devii just provides a project scaffold, some Markdown-loading loading utilities (in loader.ts), and some sensible styling defaults (especially in Markdown.tsx).

To get started customizing, check out the source code of index.tsx (the home page), BlogPost.tsx (the blog post template), and Markdown.tsx (the Markdown renderer).

Head to the GitHub repo to get started: https://github.com/colinhacks/devii. If you like this project, leave a ⭐️ star ⭐️ to help more people find Devii 😎

CLI

yarn dev

Starts the development server. Equivalent to next dev.

yarn build

Creates an optimized build of your site. Equivalent to next build.

yarn export

Exports your site to static files. All files are written to /out. Use your static file hosting service of choice (Firebase Hosting, Amazon S3, Vercel) to deploy your site. Equivalent to next export.

Comments
  • CSS semicolon warnings

    CSS semicolon warnings

    Remove semicolons to fix warnings:

    diff --git a/components/PostCard.tsx b/components/PostCard.tsx
    index d9dbcc6..593f024 100644
    --- a/components/PostCard.tsx
    +++ b/components/PostCard.tsx
    @@ -31,7 +31,7 @@ export const PostCard: React.FC<{ post: PostData }> = (props) => {
             {post.thumbnailPhoto && (
               <div
                 style={{
    -              background: `url(${post.thumbnailPhoto}) no-repeat center center;`,
    +              background: `url(${post.thumbnailPhoto}) no-repeat center center`,
                   backgroundSize: 'cover',
                   width: '100%',
                   flex: 1,
    diff --git a/pages/index.tsx b/pages/index.tsx
    index 3c7ed4a..de8aef6 100644
    --- a/pages/index.tsx
    +++ b/pages/index.tsx
    @@ -21,7 +21,7 @@ const Home = (props: { post: string; posts: PostData[] }) => {
             <div
               style={{
                 display: 'grid',
    -            gridTemplateColumns: `repeat(auto-fit, minmax(300px,1fr));`,
    +            gridTemplateColumns: `repeat(auto-fit, minmax(300px,1fr))`,
                 gridRowGap: '8px',
                 gridColumnGap: '8px',
               }}
    
    opened by caseman72 2
  • Bump next from 9.5.3 to 11.1.0

    Bump next from 9.5.3 to 11.1.0

    Bumps next from 9.5.3 to 11.1.0.

    Release notes

    Sourced from next's releases.

    v11.1.0

    A security team from one of our partners noticed an issue in Next.js that allowed for an open redirect to occur.

    Specially encoded paths could be used when pages/_error.js was statically generated allowing an open redirect to occur to an external site.

    In general, this redirect does not directly harm users although can allow for phishing attacks by redirecting to an attacker's domain from a trusted domain.

    We recommend upgrading to the latest version of Next.js to improve the overall security of your application.

    How to Upgrade

    • We have released patch versions for both the stable and canary channels of Next.js.
    • To upgrade run npm install [email protected] --save

    Impact

    • Affected: Users of Next.js between 10.0.5 and 10.2.0
    • Affected: Users of Next.js between 11.0.0 and 11.0.1 using pages/_error.js without getInitialProps
    • Affected: Users of Next.js between 11.0.0 and 11.0.1 using pages/_error.js and next export
    • Not affected: Deployments on Vercel (vercel.com) are not affected
    • Not affected: Deployments with pages/404.js

    We recommend everyone to upgrade regardless of whether you can reproduce the issue or not.

    How to Assess Impact

    If you think sensitive code or data could have been exposed, you can filter logs of affected sites by // (double slash at the start of the url) followed by a domain.

    What is Being Done

    As Next.js has grown in popularity and usage by enterprises, it has received the attention of security researchers and auditors. We are thankful to Gabriel Benmergui from Robinhood for their investigation and discovery of the original bug and subsequent responsible disclosure.

    We've landed a patch that ensures path parsing is handled properly for these paths so that the open redirect can no longer occur.

    Regression tests for this attack were added to the security integration test suite

    • We have notified known Next.js users in advance of this publication.
    • A public CVE was released.
    • We encourage responsible disclosure of future reports. Please email us at [email protected]. We are actively monitoring this mailbox.

    Release notes

    Core Changes

    • Don't test image domains in test env: #26502
    • Fix props not updating when changing the locale and keeping hash: #26205
    • Allow user to override next-image-loader: #26548
    • Add logging when a custom babelrc is loaded: #26570

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump tar from 6.0.5 to 6.1.4

    Bump tar from 6.0.5 to 6.1.4

    Bumps tar from 6.0.5 to 6.1.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Reduce first load JS on blog posts by 53%

    Reduce first load JS on blog posts by 53%

    There are a couple small changes you can make to the react-syntax-highlighter imports that massively improve the bundle size for blog post pages. There are some minor tradeoffs, but I think this is a better default behavior.

    I wrote a blog post about this with screenshots of the PageSpeed score impact on my repo along with some other changes (69 -> 98). This is basically a backport of some commits in this PR. The bundlewatch output from reverting one of the commits can be seen here.

    opened by fracture91 1
  • Bump next from 9.5.3 to 9.5.4

    Bump next from 9.5.3 to 9.5.4

    Bumps next from 9.5.3 to 9.5.4.

    Release notes

    Sourced from next's releases.

    v9.5.4

    This upgrade is completely backwards compatible and recommended for all users on versions below 9.5.4. For future security related communications of our OSS projects, please join this mailing list.

    A security team from one of our partners noticed an issue in Next.js that allowed for open redirects to occur.

    Specially encoded paths could be used with the trailing slash redirect to allow an open redirect to occur to an external site.

    In general, this redirect does not directly harm users although can allow for phishing attacks by redirecting to an attackers domain from a trusted domain.

    We recommend upgrading to the latest version of Next.js to improve the overall security of your application.

    How to Upgrade

    • We have released patch versions for both the stable and canary channels of Next.js.
    • To upgrade run npm install [email protected] --save

    Impact

    • Affected: Users of Next.js between 9.5.0 and 9.5.3
    • Not affected: Deployments on Vercel (https://vercel.com) are not affected
    • Not affected: Deployments using next export

    We recommend everyone to upgrade regardless of whether you can reproduce the issue or not.

    How to Assess Impact

    If you think users could have been affected, you can filter logs of affected sites by %2F with a 308 response.

    What is Being Done

    As Next.js has grown in popularity, it has received the attention of security teams and auditors. We are thankful to those that reached out for their investigation and discovery of the original bug and subsequent responsible disclosure.

    We've landed a patch that ensures encoding is handled properly for these types of redirects so the open redirect can no longer occur.

    Regression tests for this attack were added to the security integration test suite.

    • We have notified known Next.js users in advance of this publication.
    • A public CVE was released.
    • If you want to stay on top of our security related news impacting Next.js or other Vercel projects, please join this mailing list.
    • We encourage responsible disclosure of future issues. Please email us at [email protected]. We are actively monitoring this mailbox.

    Core Changes

    • Make the image post-processor ignore SVG images: #16732
    • Only update lookups for dev overlay if mounted: #16776
    • Ensure interpolating dynamic href values works correctly: #16774
    • Add automatic reloading when editing GS(S)P methods: #16744
    • Update to show build indicator while re-fetching GS(S)P data in dev: #16789

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump bl from 4.0.2 to 4.0.3

    Bump bl from 4.0.2 to 4.0.3

    Bumps bl from 4.0.2 to 4.0.3.

    Release notes

    Sourced from bl's releases.

    v4.0.3

    Fix unintialized memory access

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump lodash from 4.17.15 to 4.17.19

    Bump lodash from 4.17.15 to 4.17.19

    Bumps lodash from 4.17.15 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump ssri from 6.0.1 to 6.0.2

    Bump ssri from 6.0.1 to 6.0.2

    Bumps ssri from 6.0.1 to 6.0.2.

    Changelog

    Sourced from ssri's changelog.

    6.0.2 (2021-04-07)

    Bug Fixes

    • backport regex change from 8.0.1 (b30dfdb), closes #19

    Commits
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for ssri since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump next from 9.5.3 to 11.1.3

    Bump next from 9.5.3 to 11.1.3

    Bumps next from 9.5.3 to 11.1.3.

    Release notes

    Sourced from next's releases.

    v11.1.3

    See https://github.com/vercel/next.js/releases/v12.0.5 for details about this patch.

    v11.1.3-canary.105

    Core Changes

    • Update swc-minify-enabled link: #30290
    • Fix middleware header propagation: #30288
    • Move outputFileTracing config up: #30295
    • Track usage of swc features: #30297
    • Ensure null bytes in resolved path are handled: #30313
    • Improve deprecation errors for new middleware API: #30316

    Documentation Changes

    Example Changes

    • Update image component example to use AVIF: #30294

    Credits

    Huge thanks to @​ijjk, @​styfle, @​padmaia, @​javivelasco, and @​leerob for helping!

    v11.1.3-canary.104

    Misc Changes

    • Add necessary workflow job dependencies: #30291

    v11.1.3-canary.103

    Core Changes

    • Warn when mutating res if not streaming: #30284
    • Chore/publish all swc: #30289

    Credits

    Huge thanks to @​kara for helping!

    v11.1.3-canary.102

    Core Changes

    • Add warning when LCP image is missing priority prop: #30221
    • New Middleware API signature: #30282
    • Fix trace case with tsconfig/jsconfig baseUrl: #30286

    Documentation Changes

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by vercel-release-bot, a new releaser for next since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Replace React.FC and React.FunctionComponent with pure functions and add Prettier

    Replace React.FC and React.FunctionComponent with pure functions and add Prettier

    • Replace React.FC and React.FunctionComponent with pure functions read more here: https://github.com/typescript-cheatsheets/react#function-components
    • added and refactored code with prettier for consistent formatting read more here: https://prettier.io/docs/en/index.html
    opened by adaptive-shield-matrix 0
  • Bump tar from 6.0.5 to 6.1.11

    Bump tar from 6.0.5 to 6.1.11

    Bumps tar from 6.0.5 to 6.1.11.

    Commits
    • e573aee 6.1.11
    • edb8e9a fix: perf regression on hot string munging path
    • a9d9b05 chore(test): Avoid spurious failures packing node_modules/.cache
    • 24b8bda fix(test): use posix path for testing path reservations
    • e5a223c fix(test): make unpack test pass on case-sensitive fs
    • 188badd 6.1.10
    • 23312ce drop dirCache for symlink on all platforms
    • 4f1f4a2 6.1.9
    • 875a37e fix: prevent path escape using drive-relative paths
    • b6162c7 fix: reserve paths properly for unicode, windows
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.6 to 1.0.7

    Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump lodash from 4.17.20 to 4.17.21

    Bump lodash from 4.17.20 to 4.17.21

    Bumps lodash from 4.17.20 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump y18n from 4.0.0 to 4.0.1

    Bump y18n from 4.0.0 to 4.0.1

    Bumps y18n from 4.0.0 to 4.0.1.

    Changelog

    Sourced from y18n's changelog.

    Change Log

    All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

    5.0.5 (2020-10-25)

    Bug Fixes

    5.0.4 (2020-10-16)

    Bug Fixes

    • exports: node 13.0 and 13.1 require the dotted object form with a string fallback (#105) (4f85d80)

    5.0.3 (2020-10-16)

    Bug Fixes

    • exports: node 13.0-13.6 require a string fallback (#103) (e39921e)

    5.0.2 (2020-10-01)

    Bug Fixes

    5.0.1 (2020-09-05)

    Bug Fixes

    5.0.0 (2020-09-05)

    ⚠ BREAKING CHANGES

    • exports maps are now used, which modifies import behavior.
    • drops Node 6 and 4. begin following Node.js LTS schedule (#89)

    Features

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by oss-bot, a new releaser for y18n since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v0.5.0)
Owner
Colin McDonnell
I have come here to chew bubblegum and write code. And _InsufficientBubblegumException_
Colin McDonnell
Software Developer Portfolio Template built with react.js and material Ui with dark and light mode that helps you showcase your work and skills as a software developer.

Software Developer Portfolio Template built with react.js and material Ui with dark and light mode that helps you showcase your work and skills as a software developer.

ABU SAID 37 Nov 23, 2022
🚀 Software Developer Portfolio Template that helps you showcase your work and skills as a software developer.

Software Developer Folio ⚡️ A clean, beautiful and responsive portfolio template for Developers! Just change src/portfolio.js to get your personal por

Saad Pasta 3.7k Nov 20, 2022
Spacetraveling-blog - RocketSeat's ReactJS Learning Path Challenge. News blog made from scratch

Spacetraveling-blog - RocketSeat's ReactJS Learning Path Challenge. News blog made from scratch

Victor Nunes 4 Sep 27, 2022
CRUD (Create, Read, Update, Delete) Recipe App with React. Project was developed together with DSC MMU during JavaScript Week 2021.

react-crud-recipe-app CRUD (Create, Read, Update, Delete) Recipe App with React. Project was developed together with DSC MMU during JavaScript Week 20

MUHAMMAD WAFIYUDDIN BIN ROHANIZAM 4 Aug 30, 2022
Javascript-testing-practical-approach-2021-course-v3 - Javascript Testing, a Practical Approach Course

Javascript Testing, a Practical Approach Description This is the reference repos

Stefano Magni 3 Nov 10, 2022
Nextjs-ts-mui5-scss-storybook-starter - Next.js + TypeScript + Material UI v5 + Sass + Storybook starter

nextjs-ts-mui5-scss-storybook-starter ?? Next.js + TypeScript + Material UI v5 +

Muhammad Ridho Anshory 13 Oct 19, 2022
Nextjs-starter - A TypeScript starter for Next.js

Next.js TypeScript Starter Features ⚡️ Next.js 12 ⚛️ React 17 ⛑ TypeScript ?? ES

Felix Lee 4 Sep 14, 2022
React component for highlighting js and jsx code with copy to clipboard functionallity

✨ ??️ React Highlight ✨ ??️ React component for highlighting js and jsx code wit

Jin Jose Manuel 19 Aug 30, 2022
CLI tool that makes react boilerplate component. Supports es6 or typescript, css or @emotion/styled, emmet-like syntax.

CLI tool that makes react boilerplate component. Supports es6 or typescript, css or @emotion/styled, emmet-like syntax.

Malakhov Mikhail 4 May 24, 2022
Blog app using different modern technology like Next.js, ReactJS, TailwindCSS, GraphQL, GraphCMS, JavaScript, TypeScript, ...

Tony Blog Blog app using different modern technology like Next.js, ReactJS, TailwindCSS, GraphQL, GraphCMS, JavaScript, TypeScript, ... Link Blog: htt

ThinhMe_MDT 4 May 14, 2022
Ts-next-chakra-motion-kit - Starter kit with Next.js, Chakra-UI, Framer-Motion in Typescript

Typescript Next.js Chakra-UI Framer-Motion Starter Kit Start with a powerful tem

Alexandre Gossard 39 Oct 14, 2022
Bookworm is a minimal NextJs Tailwind blog starter template.

Bookworm Light Nextjs Blog Template ????View Live Preview Download Download this template from Github Installation After downloading the template, you

Themefisher 31 Nov 14, 2022
Free-from-jsx.macro - Babel macro that allows you to use a flutter like render syntax

Free-from-jsx.macro - Babel macro that allows you to use a flutter like render syntax

Gabriel Rohden 3 Jul 7, 2022
Boilerplate in typescript with : Next / Next-Auth / Siwe / Web3modal / useDapp / next-i18n / reactMUI

Boilerplate in typescript with : Next / Next-Auth / Siwe / Web3modal / useDapp / next-i18n / reactMUI

null 15 Oct 23, 2022
Personal Website UI Template using React-TypeScript. I hope, it will be helpful for your personal website that showcases your work as a software developer.

Personal Website Template Personal Website UI Template using React-TypeScript Class components Personal website can be about anything you want, includ

Sayan Bhattacharyya 9 Sep 16, 2022
Boilerplate for a Blog based on React.js, Node.js & Next.js

Boilerplate for a Blog based on React.js, Node.js & Next.js

OmiSoft 5 Nov 5, 2022
A simple boilerplate for a Blog based on React.js & Next.js.

OMISOFT BLOG EXAMPLE - FRONT END Here you can find a simple boilerplate for a Blog based on React.js & Next.js. We use this code in the project Sudoku

OmiSoft 19 Nov 9, 2022
Boilerplate for a Blog based on React.js, Node.js & Next.js

OMISOFT BLOG EXAMPLE - ADMIN PANEL Here you can find a simple boilerplate for a Blog based on React.js & Next.js. We use this code in the project Sudo

OmiSoft 6 Nov 5, 2022
Official Documentation and Blog for the Review Bots Website. Made with Love using React, Docusaurus and Typescript

Official Documentation and Blog for the Review Bots Website. Made with Love using React, Docusaurus and Typescript

ReviewBots 3 Jul 28, 2022