squashfold

.test {
  &__item {
    color: red;
  }
}

squashfold

const path = require('path')
const fs = require('fs') // Filesystem lets us create files and directories
const greyMatter = require('gray-matter') // Parses data from posts

function getPostData() {
  const postsDirectory = path.join(process.cwd(), '_posts') 
  const fileNames = fs.readdirSync(postsDirectory)
  const posts = fileNames.map((fileName) => {
    const postId = fileName.replace(/\.md$/, '') // Replace with mdx if using MarkdownX
    const fullPath = path.join(postsDirectory, fileName)

squashfold

import type { NextApiRequest, NextApiResponse } from 'next'
import type Post from '../../interfaces/post'

const posts = require('../../cache/data/posts').data

export default (req: NextApiRequest, res: NextApiResponse) => {
  const query = req.query.query ? req.query.query.toString().toLowerCase() : ''

  const results: Post[] = query.length ? posts.filter(post => {
    const titleMatch = post.title.toLowerCase().includes(query);

squashfold

import type { NextApiRequest, NextApiResponse } from 'next'
import type Post from '../../interfaces/post'
import Fuse from 'fuse.js'

const posts = require('../../cache/data/posts').data

export default (req: NextApiRequest, res: NextApiResponse) => {
  const fuse = new Fuse(posts, {keys: ['title', 'excerpt']}) // Specify which fields from the cache we should check for matches against
  const query = req.query.query ? req.query.query.toString().toLowerCase() : '' // Convert the query to lower case so matches aren't case sensitive
  const results: Post[] = query.length ? fuse.search(query) : posts // Find posts which match, or return all of them

squashfold

import Head from 'next/head';
import { useCallback, useRef, useState, useEffect } from 'react'
import type Post from '../../interfaces/post'
import PostPreview from '../../components/post-preview'

export default function Home() {

const searchRef = useRef<HTMLInputElement>(null)

const defaultPosts = require('../../cache/data/posts').data;

squashfold

import Head from 'next/head';
import { useCallback, useRef, useState, useEffect } from 'react'
import type Post from '../../interfaces/post'
import PostPreview from '../../components/post-preview'

export default function Home() {

const searchRef = useRef<HTMLInputElement>(null)

const defaultPosts = require('../../cache/data/posts').data; // We want to show all posts by default

squashfold

export const posts = [{"postId":"dynamic-routing","slug":"dynamic-routing","title":"Dynamic Routing and Static Generation","thumbnail":"/assets/blog/dynamic-routing/cover.jpg","excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.","date":"2020-03-16T05:35:07.322Z"},{"postId":"hello-world","slug":"hello-world","title":"Learn How to Pre-render Pages Using Static Generation with Next.js","thumbnail":"/assets/blog/hello-world/cover.jpg","excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.","date":"2020-03-16T05:35:07.322Z"},{"postId":"preview","slug":"preview","title":"Preview Mode for St

squashfold

{
  "private": true,
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "typecheck": "tsc",
    "cache-posts": "node cache/posts.js"
  },
  "dependencies": {

squashfold

module.exports = {
  title: "Global Configuration Demo",
}

squashfold

import Image from 'next/image'
import styles from './page.module.css'
import GlobalConifg from './app.config.js'

export default function Home() {
  return (
    <main className={styles.main}>
      <div className={styles.description}>
        <h1>{GlobalConifg.title}</h1>
        <p>