GitHub

Tech Stack

Version	Status	Branch	Tech Stack
<1.0.0	prelease	v0-mkdocs	mkdocs
Current, stable
^1.0.0	active	v1-vitepress \| vitepres-rc	vitepress
⚡️ Next, breaking change
^2.0.0	wip	with-astro	island arch, max and more	server pre-render, client-side hydration

Note

You are viewing the feat/with-astro branch,

For better CMS intergration experience, This blog has mirgarted to astro powered hybrid render solution (server-side pre-rendering, client-side hydration)

legacy code can be found at vitepress-rc branch.

✨ Features Checklist

SEO Features

Core SEO Features

Performance Optimization

Content Quality

Content Freshness
- Regularly update old blog posts with new information.
- Repurpose existing content into new formats (e.g., video, infographics).
- Identify and remove outdated content.
User Engagement
- Add internal linking to related posts.
- Encourage comments and discussions.
- Use call-to-action (CTA) buttons effectively.
- Conduct regular surveys to understand user interests.

Monitoring and Analytics

Analytics Integration
- Set up Google Analytics to track user behavior.
- Implement Google Search Console for indexing and performance insights.
- Monitor key performance indicators (KPIs) regularly.
Broken Link Check
- Use tools to regularly check for and fix broken links.
- Implement a 404 error page with useful navigation options.
- Redirect broken links to relevant pages.

Advanced SEO Features

Social Signals
- Add social sharing buttons to posts.
- Encourage sharing through social media.
- Monitor social media engagement metrics.
- Create shareable content (e.g., infographics, quotes).

Accessibility

Semantic HTML
- Use semantic elements (like <article>, <header>, etc.) for better structure.
- Ensure proper heading structure (H1, H2, H3).
- Implement ARIA roles where necessary.
Keyboard Navigation
- Ensure the site is navigable via keyboard for accessibility.
- Test focus states for interactive elements.
- Provide skip links to improve navigation for screen reader users.

Legal and Compliance

GDPR Compliance
- Include a privacy policy and cookie consent banner.
- Implement user data protection measures.
- Allow users to request data deletion. (Available via dashboard)
Accessibility Compliance
- Ensure compliance with WCAG (Web Content Accessibility Guidelines).
- Conduct regular accessibility audits.
- Provide accessibility resources and contact information for support.

Additional SEO Features

Advanced Features

Admin Features

Community Features

User-generated Content
- Guest posts.
- User profiles with bios and links.
Forums or Discussion Boards
- Threads and topics for community discussions.
- User reputation or ranking system.
[Mono repo] -
[Multi-Framework] - vue, react
⚡️ [Fast][Vite] - instant reloading powered by [Vite]

Project Setup

#  keep only the code from feat/with-astro but still link main histories

git merge --allow-unrelated-histories -s ours origin/main

npm i -D prettier prettier-plugin-astro

# deal with undici does not respect proxy settings problem
# giget --> node-fetch-native --> node --> undici
npx giget@latest gh:withastro/astro/examples/basics astro-blog

<Counter initialCount client:load >
  <div slot="top">top</div>
  <div slot="button ">top</div>
</Counter>

SSR

CSR: client-side rendering
SSR: server-side rendering
SSG: static site generation
hybrid: server-side prerending, client-side hydration
ISR: incremental static regeneration

adapter for server runtime

Content layer and content collection

cms

frontmatter validation

newsletter
blog
author

query content collection and return content entry

src/content/config.ts

content format .md, .mdx data format .json, .yaml,

exclude by prefix with _

api db

Image optimization

source for original image file

convert to

web-friendly image format webp
src for remote image, provide full url

for image located in project src/ use the file path relative to the src/ directory

for image located in public/ directory , use the URL path relative to the public directory

remote image original format could not be inferred

quality

compress image size, quality

size

content-aware image cropping

width and height or aspectRatio to crop the image to exact size

sharp squoosh

DATABASE integration

/[org]/[repo]/tree/[branch]/[...file] source of frustration or easy to integrates into develop workflow

column constraint: not null, default value unique

loading image in css sucks

fetch html -> fetch css -> fetch image etch html fetch image

using compressed image format like webp

cwebp -q 50 images/flower1.jpg -o images/flower1.webp

`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`

download webp util

optimize screen size and resolution

/_next/image/w=&q=

serve sized image for each device

which size of image to download

not yet know the size of the image on the page,

it select image that is same size or thelarger than the viewport

size property allow you to tell image smaller than the viewport

full width on mobile device, 2-column layout tablets, 3-column layout on desktop layout

  <img 
    loading="lazy"
    srcset=""
    sizes="(max-width: 768px 100vw), (max-width: 1200px) 50vw, 33vw"
    decoding="async"
    style="aspect-ratio: 16/9;"
    src="/image.png"
  />

layout shift: sizes hint

lazy-load: image are only loaded when they eneter the viewport

<div className="relative h-60 overflow-hidden">
  <Image
    fill
    src={}
    sizes="(max-width: 768px 100vw), (max-width: 1200px) 50vw, 33vw"
    className="object-cover w-full h-full"
    alt=""
  />
</div>

image storage solution

managing, transforming and delivering optimized images with cloudinary

s3 with management overhead [digital ocean spaces with]

cyber Buddha, cloudfare, Free tier

optimize for china mainland

lib maybe a solution uploadthing

Font optimization

self-hosting web font

loading/import local font

loading fonts from font delivery service

/** @legacy import url base string without the function wrapper */
@import "https://www.nerdfonts.com/assets/css/webfont.css";
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

/*  static local font should located in  /public/assets/ */
/**  fragment url */
/**  relative url  */

font face

@font-face {
  font-family: 'Nerd Font';
  src: url("/fonts/NerdFont.woff2") format("woff2");
  font-weight: 200 400 600 800;
  font-display: swap;
  unicode-range: U+ec19,U+ea97,U+f00e6,U+e7ee;
}

    "typography": {
      "fontFamilies": [{
        "fontFamily": "Poppins",
        "name": "Poppins",
        "slug": "poppins",
        "fontFace": [{
          "fontFamily": "Poppins",
          "fontWeight": 400,
          "fontStyle": "normal",
          "src": ["file:./assets/fonts/Poppins-Regular.woff2"]
        }]
      }]
    }

@layer theme {
  :root, :host {
      --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
            'Noto Color Emoji';
      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
      monospace;
  }
}

import localFont from 'next/font/local'

fonts

npm install @fontsource/cabin @fontsource/poppins

@layer base {
  body {
    font-family: 'Poppins', sans-serif;
  }
}

const defaultTheme = require('tailwindcss/defaultTheme')

/** @type import('tailwindcss').Config */
module.exports = {
  theme: {
    extens: {
      fontFamily: {
        sans: ['Poppins', ...defaultTheme.fontFamily.sans],
        serif: ['Cabin', ...defaultTheme.fontFamily.serif]
      }
    }
  }
}

CMS intergration

storyblock

ghost strapi payload hugo buttercms contentful

Data fetching, caching and revalidating

routing

file-based routing

default routing with battle proof

layout.tsx page.tsx error.tsx loading.tsx

dynamic routing (don't know know ahead of on-request time)

define dynamic route parameter in filename to match any level depth, rest parameter

with static generation

export function getStaticProps() {
  return [
    {params: {post: 'effective-git'}},
    {params: {post: 'effective-go'}},
    {params: {post: 'effective-larvel'}},
  ]
}

direct access DB access token and api keys exposed to client

not-found, error, loading page

Endpoints

Astro global

static file endpoints

Server Endpoints (API Routes)

script optimization

load third-party script

analytics

chatbot

map

"use client "
import Script from 'next/script'

export default function Page() {


  return (
    <>
    <Script
      id="google-maps"
      src="https://maps.googleapis.com/maps/api/js"
      onLoad={() => {
          new google.maps.Map(mapRef.current,{
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8,
          })
      }}/>
    </>
  )
}

import Script from 'next/script'

export default function Chatbot() {
  return (
    <Script 
      src="/chatbot.js" 
      strategy="lazyOnload"
      onLoad={ () => initializeChatbot()}
    >
    </Script>
  )
}

SEO metadata

config-based metadata

file-based metadata

<meta> tag title, description, open graph, twitter card, favicon attribute

<link> tag

export const metadata:Metadata = {
  // default to http://localhost:${process.env.PORT || 3000}
  metadataBase: ""
}

favicon metadataBase robots openGraph twitter sitemap

react-social

opengraph-image and twitter-image

image appear on social networks and messaging apps messaging apps when a user shares a link to your site

const handleFileUpload = () => {
  const input  = document.getElementById('input')
  input.type = 'file'
  input.accept = 'image/*'

  input.onchange = (e) => {
    const file = (e.target as HTMLInputElement).files?.[0]

    if(file) {
      const reader = new FileReader()
      reader.onload = (e) => {
        const base64Image = e.target?.result as string
        setUploadedFiles([...uploadedFiles, file])
        setImageDataList([...imageDataList, base64Image])
      };
      reader.readAsDataURL(file)
    }
  }

  input.click()
}


const handlePaste = async (e.React.ClipboardEvent) => {
  const items = e.clipboardData?.items

  if (!items) {
    return
  }

  for (const item of items) {
    if (item.type.startsWith('image/')) {
      e.preventDefault()

      const file = item.getAsFile()

      if(file) {
        const reader = new FileReader()
        reader.onload = (e) => {
          const base64Image = e.target?.result as string
          setUploadedFiles([...uploadedFiles, file])
          setImageDataList([...imageDataList, base64Image])
        }
        reader.readAsDataURL(file)
      }

      break
    }
  }
}

gray scales slate zinc neutral stone

genEntry
getCollection

export async function getStaticProps() {
  
  return {
    data: ["containing the page's slice of data that "]
    start:0
    end:5
    size: 6
    total: 10
    currentPage: 1
    lastPage: 2
    // link to next page and prev page in the set
    url: {current: "/", next: '/next', prev: "/prev"}
  }
}

<!-- wp:post-title  -->
<!-- wp:post-content  -->

{
  "settings": {
    "appearance": {
      "contentSize": "800px",
      "wideSize": "1100px"
    },
    "typography": {
      "fontFamilies": [{
        "fontFamily": "Poppins",
        "name": "Poppins",
        "slug": "poppins",
        "fontFace": [{
          "fontFamily": "Poppins",
          "fontWeight": 400,
          "fontStyle": "normal",
          "src": ["file:./assets/fonts/Poppins-Regular.woff2"]
        }]
      }]
    },
    "color": {
      "palette": [
        {
          "color": "#fff",
          "name": "Starlight",
          "slug": "starlight"
        },
        {
          "color": "#000",
          "name": "Black hole",
          "slug": "black-hole"
        },
        {
          "color": "#0c0720",
          "name": "Event horizon",
          "slug": "event-horizon"
        },
        {
          "color": "#ff7e33",
          "name": "Blast off",
          "slug": "blast-off"
        },

      ]
    }
  }
}

env management

VITE_
VITE_PUBLIC

import {loadEnv} from 'vite'

// Astro global object

Astro global URL {
  href: 'http://localhost:4321/',
  origin: 'http://localhost:4321',
  protocol: 'http:',
  username: '',
  password: '',
  host: 'localhost:4321',
  hostname: 'localhost',
  port: '4321',
  pathname: '/',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}

// filter properties by search filter



---
if(bedrooms > 0 && !isNaN( parseInt(bedrooms) )) {
  filteredProperties = filteredProperties.filter(property => {
    return property.details.bedrooms <= parseInt(bedrooms)
  })
}
if(minPrice > 0 && !isNaN( parseInt(minPrice) )) {
  filteredProperties = filteredProperties.filter(property => {
    return property.details.minPrice <= parseInt(minPrice)
  })
}
if(maxPrice > 0 && !isNaN( parseInt(maxPrice) )) {
  filteredProperties = filteredProperties.filter(property => {
    return property.details.price <= parseInt(maxPrice)
  })
}

const limit = import.meta.env.PAGE_SIZE || 10
const totalPage = Math.ceil(filteredProperties.length / limit)

const page = page ? isNaN(parseInt(page)) ? 1 : parseInt(page) : 1
const offset = (page - 1) * limit
filteredProperties = filteredProperties.slice(offset, offset + limit)

---

<form method="GET">
  <fieldset class:list={["grid grid-cols-1 sm:grid-cols2 md:grid-cols-4", "gap-2 pb-2"]}>


  </fieldset>

</form>

<div>
  <a
    href={
          `?${searchParamsStr 
        ? `${searchParamsStr}&page=${page + 1}`
        : `page={page + 1}`
      }
    `}
  >
    next
  </a>

</div>

t3 stack Jamstack

sentry google analytics posthog datadog upstash

Dockerfile .dockerignore Build Docker image Run Docker container

docker build -t opus/portfolio:latest .
kubectl apply -f protfolio.yaml
kubectl get pods
kubectl get services

clusterIP - inside cluster NodePort - use for dev LoadBalancer - external use ExternalName - redirects to CNAME

brute force attack

query executor query builder raw query template

const result = await prisma.$queryRaw`SELECT * FROM User`;

await db.execute(sql`select * from ${usersTable} where ${usersTable.id} = ${id}`)

ryan dahl

Serverless Data Platform upstash

oauth flow

hit the authorize endpoint with credentials

pnpm create vite theme --template react-ts

font icon web component as icon svg icon loader virtual module svg compomnent

web component essential

Composable components for building forms. A <FormField /> component for building controlled form fields.

postgres error code

analytics

Name		Name	Last commit message	Last commit date
Latest commit History 47 Commits
.codesandbox		.codesandbox
.github		.github
.vscode		.vscode
public		public
src		src
.gitignore		.gitignore
.prettierrc.mjs		.prettierrc.mjs
README.md		README.md
astro.config.mjs		astro.config.mjs
drizzle.config.ts		drizzle.config.ts
package-lock.json		package-lock.json
package.json		package.json
setup.sql		setup.sql
tailwind.config.cjs		tailwind.config.cjs
tsconfig.json		tsconfig.json

orangzz/blog

Folders and files

Latest commit

History

Repository files navigation

Tech Stack

✨ Features Checklist

Profile Management

SEO Features

Core SEO Features

Performance Optimization

Content Quality

Monitoring and Analytics

Advanced SEO Features

Accessibility

Legal and Compliance

Additional SEO Features

Advanced Features

Admin Features

Community Features

Project Setup

SSR

Content layer and content collection

Image optimization

source for original image file

DATABASE integration

loading image in css sucks

using compressed image format like webp

optimize screen size and resolution

image storage solution

Font optimization

CMS intergration

routing

file-based routing

dynamic routing (don't know know ahead of on-request time)

Endpoints

script optimization

SEO metadata

env management

t3 stack Jamstack

oauth flow

analytics

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Packages