jpedroschmitz

Dark Mode with next-themes + Tailwind CSS v4 + Motion for React

A complete dark/light/system theme switcher for Next.js (App Router) with an animated sliding indicator.

Dependencies

pnpm add next-themes motion lucide-react clsx

jpedroschmitz

import { GraphQLClient, gql } from 'graphql-request'
import { htmlToSlateAST } from '@graphcms/html-to-slate-ast';

const client = new GraphQLClient(`${process.env.GRAPHCMS_ENDPOINT}`, {
  headers: {
    Authorization: `Bearer ${process.env.GRAPHCMS_TOKEN}`,
  },
});

const newArticleQuery = gql`

jpedroschmitz

import slugify from '@sindresorhus/slugify';
import { defineDocumentType, makeSource } from 'contentlayer/source-files';
import type { DocumentTypes } from '.contentlayer/types';

const commonFields = {
  title: {
    type: `string`,
    required: true,
  },
  meta_description: {

jpedroschmitz

{"_type":"export","__export_format":4,"__export_date":"2021-04-08T22:57:07.057Z","__export_source":"insomnia.desktop.app:v2021.2.2","resources":[{"_id":"req_bc3bb04ef14f45d79d6b5ce49912a084","parentId":"fld_9c28fa654f9d422594e08b3071d96a49","modified":1617817096063,"created":1617480568333,"url":"{{ _.base_url }}/autenticacao","name":"criar","description":"","method":"POST","body":{"mimeType":"application/json","text":"{\n\t\"nome\": \"joao\",\n\t\"senha\": \"joao\"\n}"},"parameters":[],"headers":[{"name":"Content-Type","value":"application/json","id":"pair_fb9778520e8149419bfe1ad84b9a3a75"}],"authentication":{},"metaSortKey":-1617480568333,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"fld_9c28fa654f9d422594e08b3071d96a49","parentId":"wrk_2d4a7e16efbe49af90644872177fe6f9","modified":1617538089356,"created":1617538089356,"name":"autentica

jpedroschmitz

const Env = use('Env');

module.exports = {
  /*
  |--------------------------------------------------------------------------
  | Connection
  |--------------------------------------------------------------------------
  |
  | Connection to be used for sending emails. Each connection needs to
  | define a driver too.

jpedroschmitz

let mongoServer;
  beforeAll(async () => {
    mongoServer = new MongoMemoryServer();
    const URI = await mongoServer.getUri();

    mongoose.connect(URI, {
      useNewUrlParser: true,
      useCreateIndex: true,
      useUnifiedTopology: true,
    });

jpedroschmitz

const path = require("path");
const _ = require("lodash");

const {
    createFilePath
} = require("gatsby-source-filesystem");

exports.onCreateNode = ({
    node,
    actions,