feat: add open source footer info and fix code block

leezeal923 · Jun 10, 2023 · 476ba26 · 476ba26
1 parent 574e6c2
commit 476ba26
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/app/(main)/Footer.tsx b/app/(main)/Footer.tsx
@@ -2,6 +2,7 @@ import Link from 'next/link'
 import React from 'react'
 
 import { CursorClickIcon, UsersIcon } from '~/assets'
+import { PeekabooLink } from '~/components/links/PeekabooLink'
 import { Container } from '~/components/ui/Container'
 import { kvKeys } from '~/config/kv'
 import { navigationItems } from '~/config/nav'
@@ -100,7 +101,10 @@ export function Footer() {
  <Container.Inner>
  <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
  <p className="text-sm text-zinc-500/80 dark:text-zinc-400/80">
- &copy; 1995 - {new Date().getFullYear()} Cali Castle.
+ &copy; {new Date().getFullYear()} Cali Castle. 网站已开源：
+ <PeekabooLink href="https://github.com/CaliCastle/cali.so">
+ GitHub
+ </PeekabooLink>
  </p>
  <Links />
  </div>

diff --git a/app/prism.css b/app/prism.css
@@ -2,6 +2,20 @@
  --tw-prose-pre-bg: rgba(245, 245, 245, .05);
  --tw-prose-pre-code: theme('colors.zinc.600');
  background: linear-gradient(to top, rgba(235, 235, 235, .3) 0%, rgba(255, 255, 255, 0.1) 100%);
+ font-size: 12px;
+ padding: 1rem;
+ @apply antialiased;
+}
+
+[data-blockid]:not([data-filename]) > .prismjs {
+ @apply rounded-t-3xl;
+}
+
+@screen md {
+ .prismjs {
+ font-size: 0.875rem;
+ padding: 1.5rem;
+ }
 }
 
 .dark {

diff --git a/components/portable-text/PortableTextCodeBlock.tsx b/components/portable-text/PortableTextCodeBlock.tsx
@@ -35,15 +35,16 @@ export function PortableTextCodeBlock({
  return (
  <div
  data-blockid={value._key}
- className="group relative overflow-hidden rounded-3xl border border-[--tw-prose-pre-border] dark:bg-zinc-800/80"
+ data-filename={value.filename}
+ className="group relative rounded-3xl border border-[--tw-prose-pre-border] dark:bg-zinc-800/80"
  >
  <ClientOnly>
  <Commentable blockId={value._key} />
  </ClientOnly>
  <ClientOnly>
  <>
  <div className="relative flex text-xs leading-6 text-slate-400">
- {value.filename && (
+ {Boolean(value.filename) && (
  <>
  <div className="mt-2 flex flex-none items-center border-b border-t border-b-emerald-700 border-t-transparent px-4 py-1 font-medium text-emerald-700 dark:border-b-emerald-200 dark:text-emerald-200">
  {value.filename}