@bbki.ng/site 0.0.17

package/src/pages/tags/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { getAllTags } from "@/utils/tags";
+import { MdxArticleList } from "@/articles";
+import { Tags } from "@/components";
+import { ROUTES } from "@/constants";
+
+type tag =
+  | {
+      path: string;
+      name: string;
+    }
+  | string;
+
+export default (props: {
+  inline?: boolean;
+  className?: string;
+  withAll?: boolean;
+}) => {
+  const tags = [...getAllTags(MdxArticleList)] as tag[];
+
+  if (props.withAll) {
+    tags.unshift({
+      path: ROUTES.CONTENT,
+      name: "全部",
+    });
+  }
+  return <Tags tags={tags} {...props} />;
+};

package/src/pages/tags/tag_result.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Txt from "@/pages/extensions/txt";
+import { getArticleListByTag } from "@/utils/tags";
+import { MdxArticleList } from "@/articles";
+import { useParams } from "react-router-dom";
+import { Error as ErrorPanel } from "@bbki.ng/components";
+
+export default () => {
+  const { tag } = useParams();
+  if (!tag) {
+    return <ErrorPanel error={new Error("missing tagName")} />;
+  }
+  return (
+    <Txt
+      title={`#${tag}`}
+      articleList={getArticleListByTag(MdxArticleList, tag)}
+    />
+  );
+};

package/src/swr.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { SWRConfig } from "swr";
+import { apiFetcher, withToken } from "@/utils";
+import { useSupabaseSession } from "@/hooks/use_supa_session";
+
+export const SWR = (props: { children: any }) => {
+  const { access_token: token } = useSupabaseSession() || {};
+  const authedApiFetcher = withToken(apiFetcher)(token);
+  return (
+    <SWRConfig
+      value={{
+        fetcher: authedApiFetcher,
+      }}
+    >
+      {props.children}
+    </SWRConfig>
+  );
+};

package/src/types/articles.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from "react";
+
+export type MdxArticle = {
+  default: FunctionComponent<any>;
+  meta: any;
+};

package/src/types/color.ts

@@ -0,0 +1,21 @@
+export enum TextColors {
+  GRAY = "text-gray-400",
+  RED = "text-red-500",
+  BLUE = "text-blue-600",
+}
+
+export enum BgColors {
+  WHITE_GRAY = "bg-gray-50",
+  LIGHT_GRAY = "bg-gray-100",
+  GRAY = "bg-gray-400",
+  RED = "bg-red-500",
+  BLUE = "bg-blue-600",
+  LIGHT_BLUE = "bg-blue-300",
+  WHITE_BLUE = "bg-blue-100",
+}
+
+export enum HoveredTextColors {
+  GRAY = "hover:bg-gray-100",
+  RED = "hover:bg-red-100",
+  BLUR = "hover:bg-blue-100",
+}

package/src/types/cusdis.ts

@@ -0,0 +1,4 @@
+export enum cusdisEvent {
+  COMMENTS_LOADED = "COMMENTS_LOADED",
+  COMMENT_SENT = "COMMENT_SENT",
+}

package/src/types/oss.ts

@@ -0,0 +1,15 @@
+export enum ossProcessType {
+  THUMBNAIL = "thumbnail",
+  WEBP = "webp",
+  NULL = "null",
+  oWEBP = "owebp",
+  PROG = "prog",
+}
+
+export interface UploadResult {
+  name: string;
+  res: {
+    status: number;
+  };
+  url: string;
+}

package/src/types/path.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent } from "react";
+
+export interface pathObj {
+  path?: string;
+  name: string;
+}
+
+export interface compPathObj extends pathObj {
+  component: FunctionComponent<any>;
+  componentProps?: any;
+}

package/src/types/photo.ts

@@ -0,0 +1,17 @@
+import { ossProcessType } from "@/types/oss";
+
+export interface Photo {
+  src: string;
+  width: number;
+  height: number;
+  processType?: ossProcessType;
+  avgColor?: string;
+  thumbnailSrc?: string;
+  renderedWidth?: number;
+}
+
+export interface PhotoProject {
+  name: string;
+  description?: string;
+  images: Photo[];
+}

package/src/types/supabase.ts

@@ -0,0 +1,9 @@
+import { Session } from "@supabase/supabase-js";
+
+export interface BBKingSession extends Session {
+  isKing: boolean;
+}
+
+export enum OauthProvider {
+  GITHUB = "github",
+}

package/src/utils/index.ts

@@ -0,0 +1,143 @@
+import { Photo } from "@/types/photo";
+import { ossProcessType } from "@/types/oss";
+import { API_ENDPOINT, OSS_ADDRESS } from "@/constants/routes";
+import { DEFAULT_DELAY } from "@/constants";
+import useSWR, { Fetcher } from "swr";
+
+export const floatNumberToPercentageString = (num: number): string => {
+  return `${num * 100}%`;
+};
+
+export const delay = (time: number) => {
+  return new Promise((resolve) => {
+    setTimeout(resolve, time);
+  });
+};
+
+export const minDelay = async (
+  promise: Promise<any>,
+  time: number = DEFAULT_DELAY
+): Promise<any> => {
+  const delayPromise = delay(time);
+  await Promise.all([delayPromise, promise]);
+  return promise;
+};
+
+export const addOssWebpProcessStyle = (
+  originUrl: string,
+  style: ossProcessType
+): string => {
+  const isInvalidOSSImgUrl = !originUrl.startsWith(OSS_ADDRESS);
+  const isProcessedOssImg = /x-oss-process=style\/\w+/.test(originUrl);
+  const isWebpImg = /webp$/.test(originUrl);
+
+  if (
+    isInvalidOSSImgUrl ||
+    isProcessedOssImg ||
+    (isWebpImg && style === ossProcessType.WEBP) ||
+    style === ossProcessType.NULL
+  ) {
+    return originUrl;
+  }
+  return `${originUrl}?x-oss-process=style/${style}`;
+};
+
+export const calcDefaultImgSize = (
+  img: Photo,
+  defaultWidth?: number,
+  scale?: number
+): { width: number; height: number } => {
+  const { width, height } = img;
+  const whRatio = width / height;
+  const isHorizontal = width > height;
+
+  const finalWidth =
+    (defaultWidth || (isHorizontal ? 576 : 384)) * (scale || 1);
+
+  return {
+    width: finalWidth,
+    height: finalWidth / whRatio,
+  };
+};
+
+export const getEnv = () => {
+  return /^http:\/\/localhost/.test(location.href)
+    ? "development"
+    : "production";
+};
+
+export const baseFetcher = (resource: string, init: RequestInit = {}) =>
+  fetch(resource, init).then((res) => res.json());
+
+export const withToken =
+  (fetcher: Fetcher) =>
+  (token?: string) =>
+  (resource: string, init: RequestInit = {}) => {
+    const { headers = {} } = init;
+    const tokenHeaders = token
+      ? {
+          "X-Supabase-Auth": token,
+        }
+      : {};
+    const finalHeaders = {
+      ...headers,
+      ...tokenHeaders,
+    };
+    return fetcher(resource, {
+      ...init,
+      headers: finalHeaders,
+    });
+  };
+
+export const withBBApi =
+  (fetcher: Fetcher<Promise<void>>) =>
+  (apiEndPoint = API_ENDPOINT): Fetcher =>
+  async (resource: string, init: RequestInit = {}) =>
+    fetcher(`${apiEndPoint}/${resource}`, { ...init, mode: "cors" });
+
+export const apiFetcher = withBBApi(baseFetcher)(API_ENDPOINT);
+
+export const getImageFileSize = (
+  file: File
+): Promise<{ width: number; height: number }> => {
+  const url = URL.createObjectURL(file);
+  const img = new Image();
+  return new Promise((resolve) => {
+    img.src = url;
+    img.onload = function (e) {
+      resolve({
+        width: img.naturalWidth,
+        height: img.naturalHeight,
+      });
+    };
+  });
+};
+
+export const buildSimpleApiHooks = (api: string, payloadKey: string) => {
+  return () => {
+    const { data, error } = useSWR(api);
+    return {
+      [payloadKey]: data,
+      isError: error,
+      isLoading: !data && !error,
+    };
+  };
+};
+
+export const imageFormatter = (image: any) => {
+  const { rendered_width, thumbnail_src, avg_color, process_type, ...rest } =
+    image;
+  return {
+    renderedWidth: rendered_width,
+    thumbnailSrc: thumbnail_src,
+    avgColor: avg_color,
+    processType: process_type,
+    ...rest,
+  };
+};
+
+export const getRandomInt = (min: number, max: number) => {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};

package/src/utils/tags.ts

@@ -0,0 +1,21 @@
+import { MdxArticle } from "@/types/articles";
+import { ROUTES } from "@/constants";
+
+export const getAllTags = (mdxArticles: MdxArticle[]): string[] => {
+  return Array.from(
+    new Set(mdxArticles.map(({ meta }) => meta.tags || []).flat())
+  );
+};
+
+export const getArticleListByTag = (mdxArticles: MdxArticle[], tag: string) => {
+  return mdxArticles
+    .filter(({ meta }) => {
+      return meta.tags && meta.tags.includes(tag);
+    })
+    .map(({ meta }) => {
+      return {
+        to: `${ROUTES.CONTENT}/${meta.title}`,
+        name: meta.title,
+      };
+    });
+};

package/tailwind.config.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+  mode: "jit",
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx, mdx}",
+  ],
+  presets: [
+    require('@bbki.ng/stylebase')
+  ],
+};

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["./src", "vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,108 @@
+import path from "path";
+import { defineConfig } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
+import mdx from "vite-plugin-mdx";
+import remarkGfm from "remark-gfm";
+import remarkParse from "remark-parse";
+import remarkToc from "remark-toc";
+import remarkFrontmatter from "remark-frontmatter";
+import { remarkMdxFrontmatter } from "remark-mdx-frontmatter";
+import rehypeSlug from "rehype-slug";
+import rehypeHighlight from "rehype-highlight";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import react from "@vitejs/plugin-react";
+
+const options = {
+  // See https://mdxjs.com/advanced/plugins
+  remarkPlugins: [
+    remarkParse,
+    [remarkToc, { maxDepth: 3, heading: "目录", tight: true }],
+    [remarkFrontmatter, { type: "yaml", marker: "-" }],
+    [remarkMdxFrontmatter, { name: "meta" }],
+    remarkGfm,
+  ],
+  rehypePlugins: [rehypeHighlight, rehypeSlug, rehypeAutolinkHeadings],
+};
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  // build.rollupOptions.output.manualChunks
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: (id) => {
+          if (id.includes("node_modules")) {
+            return "vendor";
+          }
+        },
+      },
+    },
+  },
+  define: {
+    GLOBAL_BBKING_VERSION: JSON.stringify(process.env.npm_package_version),
+  },
+  esbuild: {
+    logOverride: { 'this-is-undefined-in-esm': 'silent' }
+  },
+  plugins: [
+    react(),
+    (mdx as any).default(options),
+    VitePWA({
+      includeAssets: [
+        "favicon.svg",
+        "robots.txt",
+        "apple-touch-icon.png",
+        "Logo.svg",
+      ],
+      workbox: {
+        cleanupOutdatedCaches: false,
+        runtimeCaching: [
+          {
+            urlPattern:
+              /^https:\/\/zjh-im-res\.oss-cn-shenzhen\.aliyuncs\.com\/.*/i,
+            handler: "CacheFirst",
+            options: {
+              cacheName: "oss-resource-cache",
+              expiration: {
+                maxEntries: 100,
+                maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+              },
+              cacheableResponse: {
+                statuses: [0, 200],
+              },
+            },
+          },
+        ],
+      },
+      manifest: {
+        name: "BBKi.ng",
+        short_name: "BBKi.ng",
+        description: "A Personal Site.",
+        theme_color: "#ffffff",
+        icons: [
+          {
+            src: "pwa-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+          },
+          {
+            src: "pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "any maskable",
+          },
+        ],
+      },
+    }),
+  ],
+});