alanhc

初探bigchaindb

Anonymous published on 2023-08-24

設定bigchaindb本地節點

使用docker

pull image：docker pull bigchaindb/bigchaindb:all-in-one
run image：

docker run \
  --detach \
  --name bigchaindb \
  --publish 9984:9984 \
  --publish 9985:9985 \
  --publish 27017:27017 \
  --publish 26657:26657 \
  --volume $HOME/bigchaindb_docker/mongodb/data/db:/data/db \
  --volume $HOME/bigchaindb_docker/mongodb/data/configdb:/data/configdb \
  --volume $HOME/bigchaindb_docker/tendermint:/tendermint \
  bigchaindb/bigchaindb:all-in-one`

python 程式

設定節點

from bigchaindb_driver import BigchainDB
bdb_root_url = 'http://localhost:9984'
bdb = BigchainDB(bdb_root_url)

定義asset(資產)

game_boy_token = {
    'data': {
        'token_for': {
            'game_boy': {
                'serial_number': 'LR1235'
            }
        },
        'description': 'Time share token. Each token equals one hour of usage.',
    },
}

建立交易

prepared_token_tx = bdb.transactions.prepare(
    operation='CREATE',
    signers=alice.public_key,
    recipients=[([bob.public_key], 10)],
    asset=game_boy_token)

簽署交易

fulfilled_token_tx = bdb.transactions.fulfill(
    prepared_token_tx,
    private_keys=alice.private_key)

送出交易

txn_id = bdb.transactions.send_commit(fulfilled_token_tx)
txn_id

應該會看到以下

部落格暗黑模式

Anonymous published on 2023-08-24

新增 theme.ts

import { extendTheme, type ThemeConfig } from "@chakra-ui/react";

// 2. Add your color mode config

const config: ThemeConfig = {
  initialColorMode: "light",

  useSystemColorMode: false,
};

// 3. extend the theme

const theme = extendTheme({ config });

export default theme;

新增_document.tsx

import { ColorModeScript } from "@chakra-ui/react";
import theme from "./theme";

render的部分：

export default class Document extends NextDocument {
	<Html >
	...
          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
          <Main />
	...
    );
  }
}

新增切換按鈕

const { colorMode, toggleColorMode } = useColorMode()
...
return (
...
<Button onClick={toggleColorMode}>
        Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
</Button>

)

ref

https://chakra-ui.com/docs/styled-system/color-mode

更新nextjs到13

Anonymous published on 2023-08-20

升級nextjs版本：pnpm up next react react-dom eslint-config-next --latest
自動更新image import：npx @next/codemod@latest next-image-to-legacy-image .
- 會更新 next/image -> next/legacy/image
更新link：npx @next/codemod@latest new-link .

記錄一下目前部落格的樣貌 /image/next-blog-13-1.png /image/next-blog-13-2.png /image/next-blog-13-3.png

Ref

讓部落格可以顯示markdown的流程圖

Anonymous published on 2023-08-19

code如下

mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

修改CodeBlock

function CodeBlock({ language, node, inline, className, children, ...props }: any) {
  const { onCopy, value, setValue, hasCopied } = useClipboard(children);
  const match = /language-(\w+)/.exec(className || '');
  
  if (inline || !match) { //只有一行的code
    return (<Flex mb={2}>
      <Code {...props} colorScheme="blackAlpha">
        {children}
      </Code>
      <Button ml={2} onClick={onCopy} colorScheme='blue' variant='outline'>{hasCopied ? "Copied!" : "Copy"}</Button>
    </Flex>)
  } else if (match![1] ==='mermaid') {
    return (<Box className='mermaid'>{children}</Box>)
  } else {
    return (
      <Flex mb={2}>
        <SyntaxHighlighter
          style={darcula as { [key: string]: CSSProperties }}
          language={match![1] }
          PreTag="div"
          {...props}
        >
          {String(children).replace(/\n$/, '')}
        </SyntaxHighlighter>
        <Button ml={2} onClick={onCopy} colorScheme='blue' variant='outline'>{hasCopied ? "Copied!" : "Copy"}</Button>
      </Flex>
    )
  }
}

render新增

<Script
  id="mermaidjs"
  type="module"
  strategy="afterInteractive"
  dangerouslySetInnerHTML={{
    __html: `
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
    mermaid.contentLoaded();
    `,
  }}
/>

成功

以下圖是使用 mermaidjs渲染出來的

實作markdown Section Link

Anonymous published on 2023-08-18

Toc部分

import markdownToc from 'markdown-toc';
const tocMarkdown = await markdownToc(markdownContent);

<UnorderedList>
  {postData.tocMarkdown.json.map((heading: any) => (
    <ListItem key={heading.content}>
      <Link href={`#${heading.content}`}>
        {heading.content}
      </Link>
    </ListItem>
  ))}
</UnorderedList>

修改react markdown所需要的component

function SectionBlock({ node, inline, className, children, id, ...props }: any) {
  const router = useRouter()
  const origin =
    typeof window !== 'undefined' && window.location.origin
      ? window.location.origin
      : '';
  const URL = `${origin}${router.asPath}`;
  const { onCopy, value, setValue, hasCopied } = useClipboard(URL + "#" + children);
  const [isHovering, setIsHovering] = useState(false);

  return (
    <Link href={`#${children}`} id={children} onClick={onCopy} onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}>
      <Heading  {...props}>
        {children} {isHovering && "🔗"}
      </Heading>
    </Link>
  );
}
const components = {
  code: CodeBlock,
  h1: ({ node, ...props }: any) => <SectionBlock as="h1" size='xl' {...props} />,
  h2: ({ node, ...props }: any) => <SectionBlock as="h2" size='lg' {...props} />,
  h3: ({ node, ...props }: any) => <SectionBlock as="h3" size='md' {...props} />,
  h4: ({ node, ...props }: any) => <SectionBlock as="h4" size='sm' {...props} />,
  h5: ({ node, ...props }: any) => <SectionBlock as="h5" size='xs' {...props} />,
  a: ({ node, ...props }: any) => <Link  {...props} />,
};

將部落格加入sitemap功能

Anonymous published on 2023-08-17

指令下：pnpm add -D next-sitemap next.config.js新增 SITE_URL=“https://example.com” 新增 next-sitemap.config.js

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl:  'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}

在package.json > script 新增 "postbuild": "next-sitemap" 使用pnpm需要新增 .npmrc

enable-pre-post-scripts=true

在public/看到 sitemap.xml 、robots.txt、sitemap-0.xml成功🎉

去http://www.google.com/webmasters/tools/ 驗證網域會要下載一個 googleOOOOO.js ，放在public

提交sitemap：https://www.google.com/ping?sitemap=https://alanhc.github.io/sitemap.xml

ref

https://www.npmjs.com/package/next-sitemap