mirror of
https://github.com/Lumither/nocturne.git
synced 2026-10-17 10:26:21 +00:00
Compare commits
1
Commits
b820f050bc
...
qwik-test
| Author | SHA1 | Date | |
|---|---|---|---|
 lumither
|
4309f42bf7 |
No files matched your search
@@ -1,10 +0,0 @@
|
||||
/node_modules
|
||||
|
||||
/.next
|
||||
/out
|
||||
/build
|
||||
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
.env*.local
|
||||
@@ -0,0 +1,38 @@
|
||||
**/*.log
|
||||
**/.DS_Store
|
||||
*.
|
||||
.vscode/settings.json
|
||||
.history
|
||||
.yarn
|
||||
bazel-*
|
||||
bazel-bin
|
||||
bazel-out
|
||||
bazel-qwik
|
||||
bazel-testlogs
|
||||
dist
|
||||
dist-dev
|
||||
lib
|
||||
lib-types
|
||||
etc
|
||||
external
|
||||
node_modules
|
||||
temp
|
||||
tsc-out
|
||||
tsdoc-metadata.json
|
||||
target
|
||||
output
|
||||
rollup.config.js
|
||||
build
|
||||
.cache
|
||||
.vscode
|
||||
.rollup.cache
|
||||
dist
|
||||
tsconfig.tsbuildinfo
|
||||
vite.config.ts
|
||||
*.spec.tsx
|
||||
*.spec.ts
|
||||
.netlify
|
||||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
server
|
||||
@@ -0,0 +1,42 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true,
|
||||
node: true,
|
||||
},
|
||||
extends: [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:qwik/recommended",
|
||||
],
|
||||
parser: "@typescript-eslint/parser",
|
||||
parserOptions: {
|
||||
tsconfigRootDir: __dirname,
|
||||
project: ["./tsconfig.json"],
|
||||
ecmaVersion: 2021,
|
||||
sourceType: "module",
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
},
|
||||
plugins: ["@typescript-eslint"],
|
||||
rules: {
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
"@typescript-eslint/explicit-module-boundary-types": "off",
|
||||
"@typescript-eslint/no-inferrable-types": "off",
|
||||
"@typescript-eslint/no-non-null-assertion": "off",
|
||||
"@typescript-eslint/no-empty-interface": "off",
|
||||
"@typescript-eslint/no-namespace": "off",
|
||||
"@typescript-eslint/no-empty-function": "off",
|
||||
"@typescript-eslint/no-this-alias": "off",
|
||||
"@typescript-eslint/ban-types": "off",
|
||||
"@typescript-eslint/ban-ts-comment": "off",
|
||||
"prefer-spread": "off",
|
||||
"no-case-declarations": "off",
|
||||
"no-console": "off",
|
||||
"@typescript-eslint/no-unused-vars": ["error"],
|
||||
"@typescript-eslint/consistent-type-imports": "warn",
|
||||
"@typescript-eslint/no-unnecessary-condition": "warn",
|
||||
},
|
||||
};
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
||||
+33
-34
@@ -1,43 +1,42 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
# Build
|
||||
/dist
|
||||
/lib
|
||||
/lib-types
|
||||
/server
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
.yarn/install-state.gz
|
||||
# Development
|
||||
node_modules
|
||||
.env
|
||||
*.local
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
# Cache
|
||||
.cache
|
||||
.mf
|
||||
.rollup.cache
|
||||
tsconfig.tsbuildinfo
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
# Editor
|
||||
.vscode/*
|
||||
!.vscode/launch.json
|
||||
!.vscode/*.code-snippets
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
# bun
|
||||
bun.lockb
|
||||
|
||||
# ide related
|
||||
.idea
|
||||
/package-lock.json
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# Yarn
|
||||
.yarn/*
|
||||
!.yarn/releases
|
||||
@@ -0,0 +1,37 @@
|
||||
**/*.log
|
||||
**/.DS_Store
|
||||
*.
|
||||
.vscode/settings.json
|
||||
.history
|
||||
.yarn
|
||||
bazel-*
|
||||
bazel-bin
|
||||
bazel-out
|
||||
bazel-qwik
|
||||
bazel-testlogs
|
||||
dist
|
||||
dist-dev
|
||||
lib
|
||||
lib-types
|
||||
etc
|
||||
external
|
||||
node_modules
|
||||
temp
|
||||
tsc-out
|
||||
tsdoc-metadata.json
|
||||
target
|
||||
output
|
||||
rollup.config.js
|
||||
build
|
||||
.cache
|
||||
.vscode
|
||||
.rollup.cache
|
||||
tsconfig.tsbuildinfo
|
||||
vite.config.ts
|
||||
*.spec.tsx
|
||||
*.spec.ts
|
||||
.netlify
|
||||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
server
|
||||
@@ -0,0 +1,65 @@
|
||||
# Qwik City App ⚡️
|
||||
|
||||
- [Qwik Docs](https://qwik.dev/)
|
||||
- [Discord](https://qwik.dev/chat)
|
||||
- [Qwik GitHub](https://github.com/QwikDev/qwik)
|
||||
- [@QwikDev](https://twitter.com/QwikDev)
|
||||
- [Vite](https://vitejs.dev/)
|
||||
|
||||
---
|
||||
|
||||
## Project Structure
|
||||
|
||||
This project is using Qwik with [QwikCity](https://qwik.dev/qwikcity/overview/). QwikCity is just an extra set of tools on top of Qwik to make it easier to build a full site, including directory-based routing, layouts, and more.
|
||||
|
||||
Inside your project, you'll see the following directory structure:
|
||||
|
||||
```
|
||||
├── public/
|
||||
│ └── ...
|
||||
└── src/
|
||||
├── components/
|
||||
│ └── ...
|
||||
└── routes/
|
||||
└── ...
|
||||
```
|
||||
|
||||
- `src/routes`: Provides the directory-based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.dev/qwikcity/routing/overview/) for more info.
|
||||
|
||||
- `src/components`: Recommended directory for components.
|
||||
|
||||
- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info.
|
||||
|
||||
## Add Integrations and deployment
|
||||
|
||||
Use the `npm run qwik add` command to add additional integrations. Some examples of integrations includes: Cloudflare, Netlify or Express Server, and the [Static Site Generator (SSG)](https://qwik.dev/qwikcity/guides/static-site-generation/).
|
||||
|
||||
```shell
|
||||
npm run qwik add # or `yarn qwik add`
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
Development mode uses [Vite's development server](https://vitejs.dev/). The `dev` command will server-side render (SSR) the output during development.
|
||||
|
||||
```shell
|
||||
npm start # or `yarn start`
|
||||
```
|
||||
|
||||
> Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build.
|
||||
|
||||
## Preview
|
||||
|
||||
The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to preview a production build locally and should not be used as a production server.
|
||||
|
||||
```shell
|
||||
npm run preview # or `yarn preview`
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
The production build will generate client and server modules by running both client and server build commands. The build command will use Typescript to run a type check on the source code.
|
||||
|
||||
```shell
|
||||
npm run build # or `yarn build`
|
||||
```
|
||||
@@ -1,21 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Metadata } from 'next';
|
||||
import { SITE_CONFIG } from '@/src/constants';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: `About - ${ SITE_CONFIG.name }`
|
||||
};
|
||||
|
||||
function Layout({
|
||||
children
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className={ 'flex p-7' }>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
@@ -1,15 +0,0 @@
|
||||
import React from 'react';
|
||||
import MarkdownRenderer from '@/app/(pages)/public/MarkdownRenderer';
|
||||
import { fetchText } from '@/app/fetch';
|
||||
|
||||
const Me = async () => {
|
||||
return (
|
||||
<div className={ 'p-5' }>
|
||||
<MarkdownRenderer>
|
||||
{ await fetchText('https://raw.githubusercontent.com/lumither/blog-posts/master/about/me.md') }
|
||||
</MarkdownRenderer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Me;
|
||||
@@ -1,58 +0,0 @@
|
||||
import { Card } from '@nextui-org/react';
|
||||
import React from 'react';
|
||||
import { CardBody } from '@nextui-org/card';
|
||||
import Link from 'next/link';
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<div className={ `flex flex-col w-full justify-center align-middle h-dvh` }>
|
||||
<div className={ 'md:relative md:h-[130px] mb-4 md:mb-0' }>
|
||||
<div className={ 'md:relative md:left-[20%] flex flex-col w-fit' }>
|
||||
<p className={ 'text-pretty text-3xl' }>{ '讷，远道而来的' }<span
|
||||
className={ 'break-keep underline decoration-sky-400 dark:decoration-sky-700 decoration-4 underline-offset-0' }>旅人</span>
|
||||
</p>
|
||||
<p className={ 'text-pretty md:text-2xl mt-1 md:ml-4' }>{ '愿意坐下来听个故事吗...' }</p>
|
||||
<p className={ 'hidden md:block text-lg md:ml-8' }>{ '一个关于一位' }<span
|
||||
className={ 'text-gray-700 dark:text-gray-400 text-sm transition-colors' }>{ '█' }</span>{ '追寻' }<span
|
||||
className={ 'text-gray-700 dark:text-gray-400 text-sm transition-colors' }>{ '█' }</span>{ '，探索' }<span
|
||||
className={ 'text-gray-700 dark:text-gray-400 text-sm transition-colors' }>{ '█' }</span>{ '的故事' }
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={ `flex justify-center w-full h-[60%] md:h-[40%]` }>
|
||||
<div
|
||||
className={ `flex flex-col md:flex-row w-full md:w-[85%] lg:w-[90%] xl:w-[85%] p-4 gap-x-7 gap-y-5` }>
|
||||
<Card
|
||||
isHoverable
|
||||
className={ 'w-full h-[45%] md:h-full' }
|
||||
as={ Link }
|
||||
href={ '/about/me' }
|
||||
isPressable
|
||||
>
|
||||
<CardBody>
|
||||
<div className={ 'h-full flex flex-col justify-center' }>
|
||||
<p className={ 'text-center text-3xl h-fit' }>关于我</p>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card
|
||||
isHoverable
|
||||
className={ 'w-full h-[45%] md:h-full' }
|
||||
as={ Link }
|
||||
href={ '/about/website' }
|
||||
isPressable
|
||||
>
|
||||
<CardBody>
|
||||
<div className={ 'h-full flex flex-col justify-center' }>
|
||||
<p className={ 'text-center text-3xl h-fit' }>关于这个网站</p>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<p className={ 'text-center' }>*目前还没想到如何设计这一页，先摸鱼会（笑）</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
@@ -1,14 +0,0 @@
|
||||
import React from 'react';
|
||||
import MarkdownRenderer from '@/app/(pages)/public/MarkdownRenderer';
|
||||
import { fetchText } from '@/app/fetch';
|
||||
|
||||
const Website = async () => {
|
||||
return (
|
||||
<div className={ 'p-5' }>
|
||||
<MarkdownRenderer>
|
||||
{ await fetchText('https://raw.githubusercontent.com/lumither/blog-posts/master/about/website.md') }
|
||||
</MarkdownRenderer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Website;
|
||||
@@ -1,92 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, CardBody, CardFooter } from '@nextui-org/card';
|
||||
import { Chip } from '@nextui-org/react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { MdCalendarMonth, MdNorthEast } from 'react-icons/md';
|
||||
|
||||
type Props = {
|
||||
post: JSON
|
||||
}
|
||||
|
||||
function BlogPostCard({ post }: Props) {
|
||||
let title = (post as any)['title'];
|
||||
let sub_title = (post as any)['sub_title'];
|
||||
// let summary = (post as any)['summary'];
|
||||
let category = (post as any)['category'];
|
||||
let tags = (post as any)['tags'];
|
||||
// let last_update = new Date((post as any)['last_update']);
|
||||
let first_update = new Date((post as any)['first_update']);
|
||||
let post_id = (post as any)['post_id'];
|
||||
let header_img = ((post as any)['header_img'] as string | null);
|
||||
|
||||
return (
|
||||
|
||||
<div className={ `w-full` }>
|
||||
<Card as={ Link } href={ `/blog/post/${ post_id }` }
|
||||
className={ `group` }
|
||||
isPressable
|
||||
isHoverable
|
||||
>
|
||||
|
||||
{ header_img && <div className={ `w-full overflow h-80 relative` }>
|
||||
<Image
|
||||
alt={ 'cover picture' }
|
||||
src={ header_img }
|
||||
className={ `w-full object-cover rounded-b-none z-10` }
|
||||
loading={ 'eager' }
|
||||
fill
|
||||
></Image>
|
||||
<Image
|
||||
alt={ 'cover picture shadow' }
|
||||
src={ header_img }
|
||||
loading={ 'eager' }
|
||||
className={ `w-full object-cover rounded-b-none scale-y-110 blur-2xl` }
|
||||
fill
|
||||
></Image>
|
||||
</div> }
|
||||
|
||||
<CardBody className={ `overflow-visible` }>
|
||||
<div className={ `flex flex-row justify-between` }>
|
||||
<div className={ `mx-2 ${ header_img ? '-mt-6' : 'mt-2' }` }>
|
||||
<Chip className={ `mb-2 z-30 text-lg` } radius={ `sm` } size={ 'lg' } color={ `secondary` }
|
||||
variant={ `solid` }>{ category }</Chip>
|
||||
<p className={ `text-4xl font-bold` }> { title }</p>
|
||||
<p className={ `text-xl` }> { sub_title }</p>
|
||||
</div>
|
||||
<MdNorthEast className={ `mt-1 mr-2` } size={ `40px` } />
|
||||
</div>
|
||||
</CardBody>
|
||||
|
||||
<CardFooter className={ 'pt-0' }>
|
||||
<div className={ `flex flex-row flex-wrap justify-between w-full` }>
|
||||
<div>
|
||||
<ul className={ `flex flex-row flex-wrap` }>
|
||||
{
|
||||
tags.map((tag: string, key: any) => (
|
||||
<li key={ key } className={ `mx-1 mb-1` }>
|
||||
<Chip>{ tag }</Chip>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<div className={ `flex flex-row place-content-end mb-1 items-center mx-1` }>
|
||||
<MdCalendarMonth />
|
||||
<p className={ `text-zinc-500 dark:text-zinc-400 ml-1` }>
|
||||
{ first_update.toLocaleString('default', {
|
||||
month: `long`,
|
||||
day: `numeric`,
|
||||
year: `numeric`
|
||||
}) }
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
export default BlogPostCard;
|
||||
@@ -1 +0,0 @@
|
||||
// todo: create component
|
||||
@@ -1,37 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Pagination as NextUIPagination } from '@nextui-org/react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { useScreenSizeTrigger } from '@/app/(pages)/public/screenSizeTrigger';
|
||||
|
||||
const Pagination = ({ total }: {
|
||||
total: number,
|
||||
}) => {
|
||||
const parsePage = Number(useSearchParams().get('page'));
|
||||
const currPage = parsePage > 0 ? parsePage : 1;
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const isMobile = useScreenSizeTrigger('md');
|
||||
|
||||
return (
|
||||
<div className={ 'w-full p-4 pt-6 flex justify-center' }>
|
||||
<NextUIPagination
|
||||
initialPage={ currPage }
|
||||
total={ total }
|
||||
siblings={ isMobile ? 0 : 1 }
|
||||
size={ isMobile ? 'sm' : 'md' }
|
||||
showControls
|
||||
showShadow
|
||||
color={ 'default' }
|
||||
variant={ 'light' }
|
||||
onChange={ (page) => {
|
||||
router.push(`?page=${ page }`, { scroll: false });
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
export default Pagination;
|
||||
@@ -1,43 +0,0 @@
|
||||
'use server';
|
||||
|
||||
import React from 'react';
|
||||
import { fetchNocturneApi } from '@/app/(pages)/blog/api';
|
||||
import BlogPostCard from '@/app/(pages)/blog/BlogPostCard';
|
||||
import { Card, CardBody } from '@nextui-org/card';
|
||||
|
||||
import * as motion from 'motion/react-client';
|
||||
|
||||
const PostList = async ({ page }: { page: number }) => {
|
||||
try {
|
||||
const res = await fetchNocturneApi(`/blog/get_post_list?page=${ page }`);
|
||||
const posts = await res.json();
|
||||
return (
|
||||
// blog list
|
||||
<div className={ 'w-full' }>
|
||||
<ul className={ 'flex flex-col items-center w-full space-y-7' }>
|
||||
{ posts.map((post: JSON, key: number) => (
|
||||
<li key={ key } className={ 'w-full' }>
|
||||
<motion.div
|
||||
initial={ { y: 20, opacity: 0 } }
|
||||
animate={ { y: 0, opacity: 1 } }
|
||||
transition={ { ease: 'easeInOut', duration: 0.5, delay: key * .2 + .25 } }
|
||||
>
|
||||
<BlogPostCard post={ post } />
|
||||
</motion.div>
|
||||
</li>)
|
||||
) }
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
);
|
||||
} catch (e: any) {
|
||||
return (
|
||||
// todo: use Error.tsx
|
||||
<Card className={ `w-full` }>
|
||||
<CardBody>
|
||||
Fatal: { e.toString() }
|
||||
</CardBody>
|
||||
</Card>);
|
||||
}
|
||||
};
|
||||
export default PostList;
|
||||
@@ -1,21 +0,0 @@
|
||||
const LOCAL_ENDPOINT = process.env.API_LOCAL_URL;
|
||||
const REMOTE_ENDPOINT = process.env.API_REMOTE_URL;
|
||||
|
||||
const NOCTURNE_ENDPOINT = ((isServerSide = true) => {
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
if (isServerSide) {
|
||||
return LOCAL_ENDPOINT;
|
||||
} else {
|
||||
return REMOTE_ENDPOINT;
|
||||
}
|
||||
} else {
|
||||
return LOCAL_ENDPOINT;
|
||||
}
|
||||
});
|
||||
|
||||
export async function fetchNocturneApi(path: string, isServerSideRequest = true) {
|
||||
return await fetch(`${ NOCTURNE_ENDPOINT(isServerSideRequest) }${ path }`, {
|
||||
cache: 'no-cache'
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Metadata } from 'next';
|
||||
import { SITE_CONFIG } from '@/src/constants';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: `Blog - ${ SITE_CONFIG.name }`
|
||||
};
|
||||
|
||||
function Layout({
|
||||
children
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className={ 'flex flex-auto p-7 pl-2 lg:pl-7 w-full justify-center' }>
|
||||
<main className={ 'w-full' }>
|
||||
{ children }
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
@@ -1,24 +0,0 @@
|
||||
import PostList from '@/app/(pages)/blog/PostList';
|
||||
import Pagination from '@/app/(pages)/blog/Pagination';
|
||||
import { fetchNocturneApi } from '@/app/(pages)/blog/api';
|
||||
|
||||
async function Blog({
|
||||
searchParams
|
||||
}: {
|
||||
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
|
||||
}) {
|
||||
|
||||
const parsePage = Number((await searchParams)?.page);
|
||||
const currPage = parsePage > 0 ? parsePage : 1;
|
||||
const ret = await fetchNocturneApi(`/blog/get_page_count`);
|
||||
const pageCount = (await ret.json() as any)['res'] as number;
|
||||
|
||||
return (
|
||||
<div className={ 'w-full min-w-full space-y-4' }>
|
||||
<PostList page={ currPage } />
|
||||
<Pagination total={ pageCount } />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Blog;
|
||||
@@ -1,21 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Button } from '@nextui-org/react';
|
||||
import { IoArrowBackOutline } from 'react-icons/io5';
|
||||
|
||||
const ButtonGoBack = () => {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<Button
|
||||
startContent={ <IoArrowBackOutline /> }
|
||||
variant={ 'light' }
|
||||
onClick={ () => router.back() }
|
||||
>
|
||||
{ 'Back' }
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
export default ButtonGoBack;
|
||||
@@ -1,104 +0,0 @@
|
||||
import React from 'react';
|
||||
import MinifyPostCard from '@/app/(pages)/blog/post/[id]/MinifyPostCard';
|
||||
import Link from 'next/link';
|
||||
import { FaCreativeCommons } from 'react-icons/fa6';
|
||||
|
||||
type Props = {
|
||||
// post: any
|
||||
post_id: string;
|
||||
adjacent_posts: any
|
||||
perm_link: string | undefined;
|
||||
author: string | undefined;
|
||||
author_link: string | undefined;
|
||||
first_update: string;
|
||||
last_update: string | undefined;
|
||||
cc: string | undefined;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const Footer = (props: Props) => {
|
||||
const { adjacent_posts, perm_link, post_id, first_update, last_update, title } = props;
|
||||
|
||||
const prev_post = adjacent_posts.prev;
|
||||
const next_post = adjacent_posts.next;
|
||||
const link = perm_link ?? `https://lumither.com/blog/post/${ post_id }`;
|
||||
const author = props.author ?? 'Tao';
|
||||
const author_link = props.author_link ?? '/about/me';
|
||||
const post_date = new Date(first_update);
|
||||
const update_date: Date | undefined = last_update ? new Date(last_update) : undefined;
|
||||
const cc = props.cc ?? 'by-nc-sa';
|
||||
|
||||
|
||||
return (
|
||||
<div className={ `w-full` }>
|
||||
|
||||
<div className={ 'flex transition bg-zinc-300/80 dark:bg-gray-600/25' }>
|
||||
<div className={ `p-8 w-full overflow-hidden` }>
|
||||
<div className={ 'relative' }>
|
||||
<FaCreativeCommons
|
||||
size={ '160px' }
|
||||
className={ 'absolute right-0 top-0 -mt-[4.8rem] -mr-16 opacity-30 brightness-50 ' }
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={ 'flex flex-col space-y-4 relative' }>
|
||||
<div className={ 'z-[2]' }>
|
||||
<p className={ 'text-xl font-bold' }>{ title }</p>
|
||||
<Link href={ link }>
|
||||
<p className={ 'text-sm underline decoration-indigo-500 dark:decoration-sky-500' }>{ link }</p>
|
||||
</Link>
|
||||
</div>
|
||||
<div className={ 'z-[2] flex flex-row flex-wrap gap-x-7 gap-y-2' }>
|
||||
<div>
|
||||
<p className={ 'text-lg font-bold' }>Author</p>
|
||||
<Link href={ author_link }>
|
||||
<p className={ 'underline decoration-indigo-500 dark:decoration-sky-500' }>{ author }</p>
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<p className={ 'text-lg font-bold' }>Posted on</p>
|
||||
<p>{ post_date.toLocaleString('default', {
|
||||
month: `long`,
|
||||
day: `numeric`,
|
||||
year: `numeric`
|
||||
}) }</p>
|
||||
</div>
|
||||
{ update_date &&
|
||||
<div>
|
||||
<p className={ 'text-lg font-bold' }>Updated on</p>
|
||||
<p>{ update_date.toLocaleString('default', {
|
||||
month: `long`,
|
||||
day: `numeric`,
|
||||
year: `numeric`
|
||||
}) }</p>
|
||||
</div>
|
||||
}
|
||||
<div>
|
||||
<p className={ 'text-lg font-bold' }>Published under</p>
|
||||
<Link href={ `https://creativecommons.org/licenses/${ cc }/4.0/` }>
|
||||
<p className={ 'underline decoration-indigo-500 dark:decoration-sky-500' }>{ `CC ${ cc.toUpperCase() } 4.0` }</p>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={ `flex justify-center` }>
|
||||
<div className={ `w-full shadow-2xl ` }>
|
||||
<div className={ `flex flex-col md:flex-row w-full` }>
|
||||
{
|
||||
next_post &&
|
||||
<MinifyPostCard post={ next_post } desc={ 'prev' }></MinifyPostCard>
|
||||
}
|
||||
{
|
||||
prev_post &&
|
||||
<MinifyPostCard post={ prev_post } desc={ 'next' }></MinifyPostCard>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Footer;
|
||||
@@ -1,80 +0,0 @@
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import { Chip } from '@nextui-org/react';
|
||||
import { MdCalendarMonth } from 'react-icons/md';
|
||||
|
||||
// type Props = {
|
||||
// post: any
|
||||
// };
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
summary: string | undefined;
|
||||
category: string;
|
||||
tags: string[];
|
||||
first_update: string;
|
||||
header_img: string | undefined;
|
||||
}
|
||||
|
||||
|
||||
const Headers = (post: Props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{ post.header_img && <div className={ `w-full overflow h-96 relative` }>
|
||||
<Image
|
||||
alt={ 'cover picture' }
|
||||
src={ post.header_img }
|
||||
className={ `w-full object-cover rounded-b-none z-[5]` }
|
||||
fill
|
||||
></Image>
|
||||
<Image
|
||||
alt={ 'cover picture' }
|
||||
src={ post.header_img }
|
||||
className={ `w-full relative scale-110 blur-3xl object-cover rounded-b-none` }
|
||||
fill
|
||||
></Image>
|
||||
</div> }
|
||||
|
||||
<div
|
||||
className={ post.header_img ?
|
||||
'mx-8 -mt-16 backdrop-blur transition bg-zinc-300/80 dark:bg-gray-600/25 rounded-2xl z-30'
|
||||
: 'mx-6 mt-6'
|
||||
}>
|
||||
<div className={ post.header_img ? `p-4` : 'p-4 pt-2' }>
|
||||
<Chip className={ `mb-2` } radius={ `sm` } color={ `secondary` }
|
||||
variant={ `solid` }>{ post.category }</Chip>
|
||||
<p className={ `text-4xl font-bold` }> { post.title }</p>
|
||||
<p className={ `text-xl` }> { post.subtitle }</p>
|
||||
</div>
|
||||
|
||||
<div className={ `mx-2 -mt-2 mb-2 flex flex-row flex-wrap justify-between w-full` }>
|
||||
<div>
|
||||
<ul className={ `flex flex-row flex-wrap` }>
|
||||
{
|
||||
post.tags.map((tag: string, key: any) => (
|
||||
<li key={ key } className={ `mx-1 mb-1` }>
|
||||
<Chip>{ tag }</Chip>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<div className={ `flex flex-row place-content-end mb-1 mr-6 items-center mx-1` }>
|
||||
<MdCalendarMonth />
|
||||
<p className={ `text-zinc-500 dark:text-zinc-400 ml-1` }>
|
||||
{ (new Date(post.first_update)).toLocaleString('default', {
|
||||
month: `long`,
|
||||
day: `numeric`,
|
||||
year: `numeric`
|
||||
}) }
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Headers;
|
||||
@@ -1,58 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, CardFooter, CardHeader } from '@nextui-org/card';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
type Props = {
|
||||
post: any
|
||||
desc: string
|
||||
}
|
||||
|
||||
const MinifyPostCard = (props: Props) => {
|
||||
const { post, desc } = props;
|
||||
const img_url = post['header_img'] as string;
|
||||
return (
|
||||
<div className={ 'w-full transition hover:brightness-75' }>
|
||||
<Card isFooterBlurred
|
||||
className="w-full h-[300px] shadow-none border-0 rounded-none overflow-hidden"
|
||||
as={ Link }
|
||||
isPressable
|
||||
href={ `/blog/post/${ post['id'] }` }
|
||||
>
|
||||
<CardHeader className="absolute z-10 top-1 flex-col items-start">
|
||||
<p className={ `text-tiny uppercase font-bold ${ img_url ? 'text-white/60' : 'text-black/60 dark:text-white/60' }` }>{ desc }</p>
|
||||
</CardHeader>
|
||||
{ img_url &&
|
||||
<div className={ 'h-full' }>
|
||||
<div className={ 'relative h-[300px] overflow-hidden' }>
|
||||
<Image
|
||||
className={ 'object-cover object-center ' }
|
||||
src={ img_url }
|
||||
alt={ post.title }
|
||||
fill
|
||||
/>
|
||||
</div>
|
||||
<CardFooter
|
||||
className="absolute transition-colors bg-zinc-300/80 dark:bg-gray-600/25 dark:backdrop-brightness-75 bottom-0 justify-between rounded-none">
|
||||
<div>
|
||||
<p className="text-2xl font-bold">{ post['title'] }</p>
|
||||
<p className="">{ post['sub_title'] }</p>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</div>
|
||||
}
|
||||
{ !img_url &&
|
||||
<div className={ 'h-full grid p-6 place-content-center' }>
|
||||
<div className={ 'flex flex-col max-h-fit text-left' }>
|
||||
<p className={ 'text-3xl font-bold text-balance' }>{ post['title'] }</p>
|
||||
<div className={ 'w-1/4 h-[2px] my-2 bg-zinc-500 dark:bg-zinc-400' }></div>
|
||||
<p className={ 'text-xl text-pretty break-words' }>{ post['sub_title'] }</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default MinifyPostCard;
|
||||
@@ -1,55 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, CardBody } from '@nextui-org/card';
|
||||
import Headers from '@/app/(pages)/blog/post/[id]/Headers';
|
||||
import Footer from '@/app/(pages)/blog/post/[id]/Footer';
|
||||
import MarkdownRenderer from '@/app/(pages)/public/MarkdownRenderer';
|
||||
|
||||
type Props = {
|
||||
post: any
|
||||
}
|
||||
|
||||
async function PostCard(props: Props) {
|
||||
let post = props.post;
|
||||
return (
|
||||
<div>
|
||||
<Card className={ `max-w-full relative` }>
|
||||
|
||||
{/* card headers */ }
|
||||
<Headers title={ post.title }
|
||||
subtitle={ post.sub_title }
|
||||
summary={ post.summary }
|
||||
category={ post.category }
|
||||
tags={ post.tags }
|
||||
first_update={ post.first_update }
|
||||
header_img={ post.meta.header_img }
|
||||
/>
|
||||
|
||||
{/* card body */ }
|
||||
<CardBody>
|
||||
<div className={ 'p-5' }>
|
||||
<MarkdownRenderer>
|
||||
{ post.content }
|
||||
</MarkdownRenderer>
|
||||
</div>
|
||||
</CardBody>
|
||||
|
||||
|
||||
{/* card footer */ }
|
||||
<Footer
|
||||
adjacent_posts={ post.adj }
|
||||
perm_link={ post.meta.link }
|
||||
author={ post.meta.author }
|
||||
author_link={ post.meta.author_link }
|
||||
first_update={ post.first_update }
|
||||
last_update={ post.last_update }
|
||||
cc={ post.meta.cc }
|
||||
post_id={ post.meta.id }
|
||||
title={ post.title }
|
||||
/>
|
||||
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PostCard;
|
||||
@@ -1,70 +0,0 @@
|
||||
import React, { cache } from 'react';
|
||||
import PostCard from '@/app/(pages)/blog/post/[id]/PostCard';
|
||||
import ButtonGoBack from '@/app/(pages)/blog/post/[id]/ButtonGoBack';
|
||||
import * as motion from 'motion/react-client';
|
||||
import { fetchNocturneApi } from '@/app/(pages)/blog/api';
|
||||
import { Metadata } from 'next';
|
||||
import { SITE_CONFIG } from '@/src/constants';
|
||||
|
||||
const fetchPost = cache(async (id: string) => {
|
||||
const res = await fetchNocturneApi(`/blog/get_post/${ id }`);
|
||||
// throw Error('Not Found');
|
||||
return await res.json();
|
||||
});
|
||||
|
||||
export async function generateMetadata(
|
||||
{ params }: { params: Promise<{ id: string }> })
|
||||
: Promise<Metadata> {
|
||||
try {
|
||||
const title = (await fetchPost((await params).id)).title as string;
|
||||
return {
|
||||
title: `${ title } - ${ SITE_CONFIG.name }`
|
||||
};
|
||||
} catch (e) {
|
||||
return {
|
||||
title: 'Unexpected Error'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
async function BlogReader({
|
||||
params
|
||||
}: {
|
||||
params: Promise<{ id: string }>
|
||||
}) {
|
||||
try {
|
||||
let post = await fetchPost((await params).id);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className={ `max-w-full` }
|
||||
initial={ { y: 20, opacity: 0 } }
|
||||
animate={ { y: 0, opacity: 1 } }
|
||||
transition={ { ease: 'easeInOut', duration: 0.5 } }
|
||||
>
|
||||
<div className={ `max-w-full` }>
|
||||
<PostCard post={ post } />
|
||||
</div>
|
||||
<div className={ 'mt-3' }>
|
||||
<ButtonGoBack />
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
} catch (e: any) {
|
||||
return (
|
||||
<div className={ `flex h-full w-full justify-center items-center` }>
|
||||
<div className={ `flex-row` }>
|
||||
<p className={ `text-xl font-bold` }>
|
||||
{ 'Unexpected Error:' }
|
||||
</p>
|
||||
<p className={ `font-bold` }>
|
||||
{ e.message }
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default BlogReader;
|
||||
@@ -1,21 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Metadata } from 'next';
|
||||
import { SITE_CONFIG } from '@/src/constants';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: `Friends - ${ SITE_CONFIG.name }`
|
||||
};
|
||||
|
||||
function Layout({
|
||||
children
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className={ 'p-7' }>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
@@ -1,93 +0,0 @@
|
||||
import React from 'react';
|
||||
import { fetchJson } from '@/app/fetch';
|
||||
import { Card, CardBody } from '@nextui-org/react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default async function Friends() {
|
||||
|
||||
const list = await fetchJson('https://raw.githubusercontent.com/Lumither/friends/master/friends.json');
|
||||
const listLength = list.length;
|
||||
const listMaxIdx = listLength - 1;
|
||||
const listIsOdd = listLength % 2 !== 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={ `min-h-dvh pb-10` }>
|
||||
<div className={ 'p-7 pt-[10%] md:pt-[20%]' }>
|
||||
<div className={ 'flex flex-col md:flex-row gap-x-3 justify-center' }>
|
||||
<p className={ 'text-3xl text-center text-balance' }>海内存知己</p>
|
||||
<p className={ 'text-3xl text-center text-balance' }>天涯若比邻</p>
|
||||
</div>
|
||||
<p className={ 'text-center text-balance text-zinc-500 dark:text-zinc-400' }>{ 'Though far apart, kin at heart' }</p>
|
||||
</div>
|
||||
<div className={ 'flex w-full h-full justify-center pt-3' }>
|
||||
<ul className={ 'grid grid-cols-2 gap-x-6 gap-y-3 md:max-w-[90%] xl:max-w-[85%] w-full' }>
|
||||
{
|
||||
list.map((friend: any, key: number) => (
|
||||
<li
|
||||
key={ key }
|
||||
className={ (key === listMaxIdx && listIsOdd) ? 'col-span-2 flex justify-center' : 'col-span-2 md:col-span-1' }
|
||||
>
|
||||
<Card
|
||||
isHoverable
|
||||
isPressable
|
||||
shadow={ 'none' }
|
||||
as={ Link }
|
||||
href={ friend['url'] }
|
||||
className={ 'dark:bg-[#282830] w-full md:w-fit max-w-full shadow' }
|
||||
>
|
||||
<CardBody className={ 'overflow-visible pb-0.5' }>
|
||||
<div className={ 'flex flex-row' }>
|
||||
<div className={ 'flex p-2' }>
|
||||
<div
|
||||
className={ 'h-[80px] w-[80px] relative rounded-2xl' }>
|
||||
<Image
|
||||
alt="avatar"
|
||||
className="object-cover rounded-2xl z-10"
|
||||
fill
|
||||
unoptimized
|
||||
src={ friend['avatar'] }
|
||||
/>
|
||||
<Image
|
||||
alt="avatar"
|
||||
className="relative object-cover rounded-2xl scale-110 blur-3xl"
|
||||
fill
|
||||
unoptimized
|
||||
src={ friend['avatar'] }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={ 'p-2 flex-col max-w-full' }>
|
||||
<p className={ 'text-xl' }>{ friend['title'] }</p>
|
||||
{ (friend['name'] === undefined || friend['name'].isNull) ??
|
||||
<p className={ 'text-zinc-600 dark:text-zinc-400' }>{ `@ ${ friend['name'] }` }</p> }
|
||||
{ (friend['desc'] === undefined || friend['desc'].isNull) ??
|
||||
<p className={ 'text-sm text-pretty text-zinc-600 dark:text-zinc-300 mt-1' }>{ friend['desc'] }</p> }
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
<div className={ 'h-2 relative w-full' }>
|
||||
<Image
|
||||
alt="theme bar"
|
||||
draggable={ false }
|
||||
className="object-cover object-center scale-110 blur-lg"
|
||||
fill
|
||||
unoptimized
|
||||
src={ friend['avatar'] }
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p className={ 'text-center' }>想要成为好伙伴嘛，向<span
|
||||
className={ 'text-blue-800 dark:text-blue-500' }><Link
|
||||
href={ 'https://github.com/Lumither/friends/' }>这里</Link></span>发起PR吧
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import React from 'react';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
|
||||
import * as motion from 'motion/react-client';
|
||||
|
||||
function Layout({
|
||||
children
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<motion.div
|
||||
initial={ { opacity: 0 } }
|
||||
animate={ { opacity: 1 } }
|
||||
transition={ { ease: 'easeInOut', duration: 0.3, delay: 0.5 } }
|
||||
className={ `justify-center flex flex-row w-full max-w-full` }>
|
||||
<Navbar />
|
||||
<div className={ `flex flex-col flex-1 max-w-[1024px] min-w-0` }>
|
||||
{ children }
|
||||
<Footer />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)
|
||||
;
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
@@ -1,64 +0,0 @@
|
||||
import React from 'react';
|
||||
import Markdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import remarkToc from 'remark-toc';
|
||||
import remarkFrontmatter from 'remark-frontmatter';
|
||||
import rehypeRaw from 'rehype-raw';
|
||||
import rehypeSanitize from 'rehype-sanitize';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
|
||||
const MarkdownRenderer = ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<div className={ 'w-full' }>
|
||||
<Markdown
|
||||
className={ `max-w-full text-justify text-pretty prose prose-sm prose-neutral dark:prose-invert
|
||||
md:prose-md lg:prose-lg prose-code:overflow-x-scroll`
|
||||
}
|
||||
remarkPlugins={ [ remarkGfm, remarkToc, remarkFrontmatter ] }
|
||||
rehypePlugins={ [ rehypeRaw, rehypeSanitize ] }
|
||||
components={ {
|
||||
pre(props) {
|
||||
const { node, className, children, ...rest } = props;
|
||||
if ((children as any)['type'] === 'code') {
|
||||
const match = /language-(\w+)/.exec((children as any)['props']['className'] || '');
|
||||
let lang = match ? match[1] : 'text';
|
||||
return (
|
||||
<pre className={ `not-prose` }>
|
||||
<SyntaxHighlighter
|
||||
// @ts-ignore
|
||||
style={ oneDark }
|
||||
language={ lang }
|
||||
showLineNumbers
|
||||
// wrapLongLines
|
||||
// wrapLines
|
||||
classNames={ className }
|
||||
PreTag="div"
|
||||
{ ...rest }
|
||||
>
|
||||
{
|
||||
String((children as any)['props']['children']).replace(/\n$/, '')
|
||||
}
|
||||
</SyntaxHighlighter>
|
||||
</pre>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<pre className={ `not-prose` }>
|
||||
<code className={ className } { ...props }>
|
||||
{ children }
|
||||
</code>
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
}
|
||||
} }
|
||||
>
|
||||
{
|
||||
children as any
|
||||
}
|
||||
</Markdown>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default MarkdownRenderer;
|
||||
@@ -1,35 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const screenSize = new Map<string, number>(
|
||||
[
|
||||
[ 'sm', 640 ],
|
||||
[ 'md', 768 ],
|
||||
[ 'lg', 1024 ],
|
||||
[ 'xl', 1280 ],
|
||||
[ '2xl', 2536 ]
|
||||
]
|
||||
);
|
||||
|
||||
export const useScreenSizeTrigger = (size: number | string) => {
|
||||
const criticalSize = (typeof size === 'string') ? (screenSize.get(size) ?? 768) : size;
|
||||
|
||||
const [ isCritical, setIsCritical ] = useState(false);
|
||||
useEffect(() => {
|
||||
const updateMobileWidth = () => {
|
||||
if (window.innerWidth < criticalSize) {
|
||||
setIsCritical(true);
|
||||
} else {
|
||||
setIsCritical(false);
|
||||
}
|
||||
};
|
||||
updateMobileWidth();
|
||||
window.addEventListener('resize', updateMobileWidth);
|
||||
return () => {
|
||||
window.removeEventListener('resize', updateMobileWidth);
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
return isCritical;
|
||||
|
||||
};
|
||||
@@ -1,7 +0,0 @@
|
||||
export type Result<T, E> = {
|
||||
ok: true;
|
||||
value: T;
|
||||
} | {
|
||||
ok: false;
|
||||
error: E;
|
||||
};
|
||||
@@ -1,13 +0,0 @@
|
||||
import React from 'react';
|
||||
import ConstructionPlaceHolder from '@/components/ConstructionPlaceHolder';
|
||||
|
||||
const Search = () => {
|
||||
return (
|
||||
<div className={ `h-dvh` }>
|
||||
<ConstructionPlaceHolder />
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default Search;
|
||||
@@ -1,43 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Activity } from '@/src/HomePageActivities/activity';
|
||||
import { getGhActivities } from '@/src/HomePageActivities/ghActivity';
|
||||
import * as motion from 'motion/react-client';
|
||||
|
||||
const Activities = () => {
|
||||
|
||||
const [ activities, setActivities ] = useState<Activity[] | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
getGhActivities().then(data => setActivities(data));
|
||||
}, []);
|
||||
|
||||
if (!activities) {
|
||||
return (
|
||||
<div>
|
||||
<p>loading</p>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
<ul className={ 'flex flex-col gap-y-3 items-end' }>
|
||||
{ activities.map((activity, key) => (
|
||||
<motion.div
|
||||
key={ key }
|
||||
initial={ { opacity: 0, y: 20 } }
|
||||
animate={ { opacity: 1, y: 0 } }
|
||||
transition={ { ease: 'easeInOut', duration: 0.2 } }
|
||||
>
|
||||
<li className={ 'backdrop-blur bg-white/75 dark:bg-black/45 rounded-xl w-fit' }>
|
||||
{ activity.toElement() }
|
||||
</li>
|
||||
</motion.div>
|
||||
)) }
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
export default Activities;
|
||||
@@ -1,56 +0,0 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
IoFlask,
|
||||
IoHome,
|
||||
IoInformationCircle,
|
||||
IoLink,
|
||||
IoLogoGithub,
|
||||
IoMail,
|
||||
IoPencil,
|
||||
IoSearch
|
||||
} from 'react-icons/io5';
|
||||
|
||||
export const entries: { display_name: string; href: string; icon: React.ReactNode }[] = [
|
||||
{
|
||||
icon: <IoHome size={ `20px` }></IoHome>,
|
||||
display_name: 'Home',
|
||||
href: '/'
|
||||
},
|
||||
{
|
||||
icon: <IoInformationCircle size={ `20px` }></IoInformationCircle>,
|
||||
display_name: 'About',
|
||||
href: '/about'
|
||||
},
|
||||
{
|
||||
icon: <IoPencil size={ `20px` }></IoPencil>,
|
||||
display_name: 'Blog',
|
||||
href: '/blog'
|
||||
},
|
||||
{
|
||||
icon: <IoLink size={ `20px` }></IoLink>,
|
||||
display_name: 'Friends',
|
||||
href: '/friends'
|
||||
},
|
||||
{
|
||||
icon: <IoSearch size={ `20px` }></IoSearch>,
|
||||
display_name: 'Search',
|
||||
href: '/search'
|
||||
}, {
|
||||
icon: <IoFlask size={ '20px' } />,
|
||||
display_name: 'Lab',
|
||||
href: 'https://lab.lmt.moe'
|
||||
}
|
||||
];
|
||||
|
||||
export const connections: { label: string, href: string, icon: React.ReactNode }[] = [
|
||||
{
|
||||
label: 'Github',
|
||||
href: 'https://github.com/Lumither',
|
||||
icon: <IoLogoGithub size={ `30px` } />
|
||||
},
|
||||
{
|
||||
label: 'email',
|
||||
href: 'mailto:lumither@outlook.com',
|
||||
icon: <IoMail size={ `30px` } />
|
||||
}
|
||||
];
|
||||
@@ -1,17 +0,0 @@
|
||||
export async function fetchText(url: string, ttl: number = 600) {
|
||||
const res = await fetch(url, {
|
||||
next: {
|
||||
revalidate: ttl
|
||||
}
|
||||
});
|
||||
return await res.text();
|
||||
}
|
||||
|
||||
export async function fetchJson(url: string, ttl: number = 600) {
|
||||
const res = await fetch(url, {
|
||||
next: {
|
||||
revalidate: ttl
|
||||
}
|
||||
});
|
||||
return await res.json();
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
@import "lxgw-wenkai-webfont/style.css";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
font-family: "LXGW WenKai", sans-serif;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-family: "LXGW WenKai Mono", sans-serif;
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
import type { Metadata } from 'next';
|
||||
import './globals.css';
|
||||
import React from 'react';
|
||||
import { ThemeProvider as NextThemesProvider } from 'next-themes';
|
||||
import { SITE_CONFIG } from '@/src/constants';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
openGraph: {
|
||||
siteName: SITE_CONFIG.name
|
||||
},
|
||||
title: SITE_CONFIG.name,
|
||||
description: SITE_CONFIG.desc
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body className={ `transition duration-300 dark:bg-[#282830] min-h-screen` }>
|
||||
<NextThemesProvider attribute="class" defaultTheme="system">
|
||||
{ children }
|
||||
</NextThemesProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { useScreenSizeTrigger } from '@/app/(pages)/public/screenSizeTrigger';
|
||||
import { Button } from '@nextui-org/react';
|
||||
import { entries } from '@/app/entries';
|
||||
import Link from 'next/link';
|
||||
import { useLocalStorage } from 'react-use';
|
||||
|
||||
export default function Home() {
|
||||
|
||||
const isMobile = useScreenSizeTrigger('lg');
|
||||
|
||||
const [ test, setTest, removeTest ] = useLocalStorage('test', 'test_value');
|
||||
console.log(test);
|
||||
// setTest('test value 2');
|
||||
// console.log(test);
|
||||
// removeTest();
|
||||
// console.log(test);
|
||||
|
||||
return (
|
||||
<div className={ `h-dvh relative` }>
|
||||
<ul className={ `flex flex-col space-y-2 w-full` }>
|
||||
{
|
||||
entries.map((meta, key) => (
|
||||
<li key={ key }>
|
||||
<Button
|
||||
as={ Link }
|
||||
variant={ `light` }
|
||||
color={ `default` }
|
||||
fullWidth
|
||||
isIconOnly={ isMobile }
|
||||
className={ 'flex lg:justify-start w-fit lg:w-full' }
|
||||
aria-label={ `navbar: ${ meta.display_name }` }
|
||||
href={ meta.href }
|
||||
>
|
||||
{ meta.icon }
|
||||
<p className={ `font-bold hidden lg:block` }>{ meta.display_name }</p>
|
||||
</Button>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<div
|
||||
className={ 'absolute bottom-0 w-full h-60 bg-yellow-500 p-12' }
|
||||
>
|
||||
<div className={ 'bg-blue-500 h-full w-full rounded-3xl backdrop-blur' }></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { NextUIProvider } from '@nextui-org/react';
|
||||
import React from 'react';
|
||||
|
||||
export function Providers({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<NextUIProvider>
|
||||
{ children }
|
||||
</NextUIProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const ConstructionPlaceHolder = () => {
|
||||
return (
|
||||
<div className={ `flex h-full w-full justify-center items-center` }>
|
||||
<p className={ `text-2xl font-bold` }>
|
||||
正在施工中...
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConstructionPlaceHolder;
|
||||
@@ -1,25 +0,0 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { IoLogoGithub } from 'react-icons/io5';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div className={ `p-5 mb-4` }>
|
||||
<div className={ `h-1 w-20 bg-zinc-500 dark:bg-zinc-400 mb-3` }></div>
|
||||
<p>
|
||||
© 2024-{ new Date().getFullYear() } <Link href={ `/about` }>Lumither Tao</Link>
|
||||
</p>
|
||||
<p>
|
||||
Powered by Next.js and Rust, built with passion and love
|
||||
</p>
|
||||
<Link
|
||||
href={ `https://github.com/Lumither/blog` }
|
||||
aria-label={ `GitHub repo for this website` }
|
||||
>
|
||||
<IoLogoGithub className={ `mt-1` } />
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@@ -1,116 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Button } from '@nextui-org/react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import ThemeSwitcher from '@/components/ThemeSwitcher';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { useScreenSizeTrigger } from '@/app/(pages)/public/screenSizeTrigger';
|
||||
import { connections, entries } from '@/app/entries';
|
||||
|
||||
|
||||
function Navbar() {
|
||||
|
||||
const path = usePathname();
|
||||
const [ shownPath, setShownPath ] = useState(path);
|
||||
useEffect(() => {
|
||||
let trimmed_path = path.split(`/`)[1];
|
||||
if (trimmed_path === '') {
|
||||
setShownPath('HOME');
|
||||
} else {
|
||||
setShownPath(trimmed_path.toUpperCase());
|
||||
}
|
||||
}, [ path ]);
|
||||
|
||||
const isMobile = useScreenSizeTrigger('lg');
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={ `flex flex-col min-w-[50px] lg:min-w-[200px] ml-2 mr-0 lg:ml-8 lg:mr-6 min-h-screen pt-8 sticky` }>
|
||||
<div className={ `fixed min-h-screen h-full` }>
|
||||
<div className={ `hidden lg:block` }>
|
||||
<div className={ `flex justify-center items-center my-7 h-[200px] w-[200px]` }>
|
||||
<div className={ 'relative w-full h-full' }>
|
||||
<Image
|
||||
src={ 'https://oss.lumither.com/blog/pictures/avatar.webp' }
|
||||
alt={ 'avatar' }
|
||||
fill
|
||||
className={ 'rounded-full object-cover' }
|
||||
loading={ 'eager' }
|
||||
></Image>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className={ `font-bold text-2xl` }>Lumither Tao</p>
|
||||
<p className={ `text-xl text-zinc-500 dark:text-zinc-400` }>Ad Astra</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ul className={ `flex flex-col space-y-2 lg:space-y-0 lg:flex-row items-center my-4 lg:space-x-2` }>
|
||||
{
|
||||
connections.map((conn, key) => (
|
||||
<li key={ key }>
|
||||
<Button as={ Link }
|
||||
href={ conn.href }
|
||||
aria-label={ conn.label }
|
||||
variant={ `light` }
|
||||
color={ `default` }
|
||||
className={ `w-fit` }
|
||||
isIconOnly
|
||||
>
|
||||
{ conn.icon }
|
||||
</Button>
|
||||
</li>
|
||||
))
|
||||
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={ `flex justify-center lg:justify-start w-full mt-8 ml-0 lg:-ml-3` }>
|
||||
<ul className={ `flex flex-col space-y-2 w-full` }>
|
||||
{
|
||||
entries.map((meta, key) => (
|
||||
<li key={ key }>
|
||||
<Button
|
||||
as={ Link }
|
||||
variant={ `light` }
|
||||
color={ `default` }
|
||||
fullWidth
|
||||
isIconOnly={ isMobile }
|
||||
className={ 'flex lg:justify-start w-fit lg:w-full' }
|
||||
aria-label={ `navbar: ${ meta.display_name }` }
|
||||
href={ meta.href }
|
||||
>
|
||||
{ meta.icon }
|
||||
<p className={ `font-bold hidden lg:block` }>{ meta.display_name }</p>
|
||||
</Button>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className={ `mt-8 flex lg:hidden justify-center w-full` }>
|
||||
<p className={ `text-center sideways-lr font-bold text-2xl text-zinc-500 dark:text-zinc-400` }>
|
||||
{ shownPath }
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={ `absolute bottom-16` }
|
||||
>
|
||||
<ThemeSwitcher />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navbar;
|
||||
@@ -1,93 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useTheme } from 'next-themes';
|
||||
import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react';
|
||||
import { MdOutlineDarkMode, MdOutlineDesktopWindows, MdOutlineLightMode } from 'react-icons/md';
|
||||
import { useScreenSizeTrigger } from '@/app/(pages)/public/screenSizeTrigger';
|
||||
|
||||
const switcherElements = new Map(
|
||||
[
|
||||
[ 'dark', {
|
||||
'display_name': 'Dark Mode',
|
||||
'icon': <MdOutlineDarkMode />
|
||||
} ],
|
||||
[ 'light', {
|
||||
'display_name': 'Light Mode',
|
||||
'icon': <MdOutlineLightMode />
|
||||
} ],
|
||||
[ 'system', {
|
||||
'display_name': 'Follow System',
|
||||
'icon': <MdOutlineDesktopWindows />
|
||||
} ]
|
||||
]
|
||||
);
|
||||
|
||||
function ThemeSwitcher() {
|
||||
const [ mounted, setMounted ] = useState(false);
|
||||
const { theme, setTheme } = useTheme();
|
||||
|
||||
const [ currTheme, setCurrTheme ] = useState(new Set([ theme as string ]));
|
||||
|
||||
const isMobile = useScreenSizeTrigger('lg');
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ `` }>
|
||||
<Dropdown backdrop={ 'blur' }>
|
||||
<DropdownTrigger>
|
||||
<Button
|
||||
variant={ 'flat' }
|
||||
aria-label={ 'Theme Trigger' }
|
||||
fullWidth
|
||||
isIconOnly={ isMobile }
|
||||
>
|
||||
{ switcherElements.get(currTheme.values().next().value as string)?.icon }
|
||||
<p className={ 'hidden lg:block' }>
|
||||
{ switcherElements.get(currTheme.values().next().value as string)?.display_name }
|
||||
</p>
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
|
||||
<DropdownMenu
|
||||
aria-label={ 'Toggle Theme' }
|
||||
variant={ 'flat' }
|
||||
selectionMode={ 'single' }
|
||||
selectedKeys={ currTheme }
|
||||
onSelectionChange={ ({ anchorKey }) => {
|
||||
setCurrTheme(new Set([ anchorKey as string ]));
|
||||
setTheme(anchorKey as string);
|
||||
} }
|
||||
|
||||
>
|
||||
<DropdownItem
|
||||
key={ 'light' }
|
||||
startContent={ <MdOutlineLightMode /> }>
|
||||
Light Mode
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
key={ 'dark' }
|
||||
startContent={ <MdOutlineDarkMode /> }
|
||||
>
|
||||
Dark Mode
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
key={ 'system' }
|
||||
startContent={ <MdOutlineDesktopWindows /> }
|
||||
>
|
||||
Follow System
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ThemeSwitcher;
|
||||
@@ -1,18 +0,0 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'oss.lumither.com'
|
||||
},
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'pic.re'
|
||||
}
|
||||
]
|
||||
},
|
||||
output: 'standalone'
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
Generated
+7067
File diff suppressed because it is too large.
Load diff
+38
-37
@@ -1,43 +1,44 @@
|
||||
{
|
||||
"name": "blog",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
"name": "my-qwik-empty-starter",
|
||||
"description": "Blank project with routing included",
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/react": "^2.4.6",
|
||||
"@types/react-syntax-highlighter": "^15.5.13",
|
||||
"lxgw-wenkai-webfont": "^1.7.0",
|
||||
"motion": "^12.3.1",
|
||||
"next": "^15.0.3",
|
||||
"next-themes": "^0.3.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.2.1",
|
||||
"react-markdown": "^9.0.1",
|
||||
"react-syntax-highlighter": "^15.5.0",
|
||||
"react-use": "^17.6.0",
|
||||
"rehype-raw": "^7.0.0",
|
||||
"rehype-sanitize": "^6.0.0",
|
||||
"remark-frontmatter": "^5.0.0",
|
||||
"remark-gfm": "^4.0.0",
|
||||
"remark-toc": "^9.0.0",
|
||||
"sharp": "^0.33.4"
|
||||
"engines-annotation": "Mostly required by sharp which needs a Node-API v9 compatible runtime",
|
||||
"private": true,
|
||||
"trustedDependencies": [
|
||||
"sharp"
|
||||
],
|
||||
"trustedDependencies-annotation": "Needed for bun to allow running install scripts",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "qwik build",
|
||||
"build.client": "vite build",
|
||||
"build.preview": "vite build --ssr src/entry.preview.tsx",
|
||||
"build.types": "tsc --incremental --noEmit",
|
||||
"deploy": "echo 'Run \"npm run qwik add\" to install a server adapter'",
|
||||
"dev": "vite --mode ssr",
|
||||
"dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
|
||||
"fmt": "prettier --write .",
|
||||
"fmt.check": "prettier --check .",
|
||||
"lint": "eslint \"src/**/*.ts*\"",
|
||||
"preview": "qwik build preview && vite preview --open",
|
||||
"start": "vite --open --mode ssr",
|
||||
"qwik": "qwik"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/typography": "^0.5.14",
|
||||
"@types/node": "^20.14.15",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-next": "14.2.2",
|
||||
"postcss": "^8.4.41",
|
||||
"tailwindcss": "^3.4.9",
|
||||
"typescript": "^5.5.4"
|
||||
"@builder.io/qwik": "^1.12.0",
|
||||
"@builder.io/qwik-city": "^1.12.0",
|
||||
"@types/eslint": "8.56.10",
|
||||
"@types/node": "20.14.11",
|
||||
"@typescript-eslint/eslint-plugin": "7.16.1",
|
||||
"@typescript-eslint/parser": "7.16.1",
|
||||
"eslint": "8.57.0",
|
||||
"eslint-plugin-qwik": "^1.12.0",
|
||||
"prettier": "3.3.3",
|
||||
"typescript": "5.4.5",
|
||||
"undici": "*",
|
||||
"vite": "5.3.5",
|
||||
"vite-tsconfig-paths": "^4.2.1"
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
/** @type {import('postcss-load-config').Config} */
|
||||
const config = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {}
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 500 500"><g clip-path="url(#a)"><circle cx="250" cy="250" r="250" fill="#fff"/><path fill="#18B6F6" d="m367.87 418.45-61.17-61.18-.94.13v-.67L175.7 227.53l32.05-31.13L188.9 87.73 99.56 199.09c-15.22 15.42-18.03 40.51-7.08 59.03l55.83 93.11a46.82 46.82 0 0 0 40.73 22.81l27.65-.27 151.18 44.68Z"/><path fill="#AC7EF4" d="m401.25 196.94-12.29-22.81-6.41-11.67-2.54-4.56-.26.26-33.66-58.63a47.07 47.07 0 0 0-41.27-23.75l-29.51.8-88.01.28a47.07 47.07 0 0 0-40.33 23.34L93.4 207l95.76-119.54L314.7 226.19l-22.3 22.67 13.35 108.54.13-.26v.26h-.26l.26.27 10.42 10.2 50.62 49.78c2.13 2 5.6-.4 4.13-2.96l-31.25-61.85 54.5-101.3 1.73-2c.67-.81 1.33-1.62 1.87-2.42a46.8 46.8 0 0 0 3.34-50.18Z"/><path fill="#fff" d="M315.1 225.65 189.18 87.6l17.9 108.14L175 227l130.5 130.27-11.75-108.14 21.37-23.48Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h500v500H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 947 B |
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/web-manifest-combined.json",
|
||||
"name": "qwik-project-name",
|
||||
"short_name": "Welcome to Qwik",
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"background_color": "#fff",
|
||||
"description": "A Qwik project app."
|
||||
}
|
||||
File renamed without changes.
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
// This file can be used to add references for global types like `vite/client`.
|
||||
|
||||
// Add global `vite/client` types. For more info, see: https://vitejs.dev/guide/features#client-types
|
||||
/// <reference types="vite/client" />
|
||||
@@ -1,18 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
|
||||
export abstract class Activity {
|
||||
protected constructor(
|
||||
readonly time: Date
|
||||
) {
|
||||
}
|
||||
|
||||
abstract toElement(): React.ReactElement;
|
||||
|
||||
}
|
||||
|
||||
export abstract class GhActivity extends Activity {
|
||||
protected constructor(time: Date) {
|
||||
super(time);
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export const GH_USER_NAME = 'Lumither';
|
||||
@@ -1,34 +0,0 @@
|
||||
import { GhActivity } from '@/src/HomePageActivities/activity';
|
||||
import { Card, CardBody } from '@nextui-org/card';
|
||||
import Link from 'next/link';
|
||||
|
||||
export class StarRepo extends GhActivity {
|
||||
constructor(
|
||||
readonly repoName: string,
|
||||
readonly repoUrl: string,
|
||||
time: Date
|
||||
) {
|
||||
super(time);
|
||||
}
|
||||
|
||||
toElement() {
|
||||
return (
|
||||
// <div>
|
||||
// <Link
|
||||
// href={ this.repoUrl }
|
||||
// >{ `${ GH_USER_NAME } started ${ this.repoName } at ${ this.time }` }</Link>
|
||||
// </div>
|
||||
<Card
|
||||
isHoverable={ true }
|
||||
as={ Link }
|
||||
href={ this.repoUrl }
|
||||
className={ 'bg-black/20' }
|
||||
>
|
||||
<CardBody>
|
||||
<p className={ 'text-sm' }>{ `Stared GitHub repository '${ this.repoName }'` }</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import { GhActivity } from '@/src/HomePageActivities/activity';
|
||||
import { match } from 'ts-pattern';
|
||||
import { StarRepo } from '@/src/HomePageActivities/ghActivities/starRepo';
|
||||
import { GH_USER_NAME } from '@/src/HomePageActivities/constants';
|
||||
|
||||
|
||||
export const getGhActivities: () => Promise<GhActivity[]> = async () => {
|
||||
const data = await fetch(`https://api.github.com/users/${ GH_USER_NAME }/events`, {
|
||||
headers: {
|
||||
'Accept': 'application/vnd.github+json',
|
||||
'X-GitHub-Api-Version': '2022-11-28'
|
||||
}
|
||||
});
|
||||
return data
|
||||
.json()
|
||||
.then((ret: any): GhActivity[] => (
|
||||
ret
|
||||
.map((res: any) => (
|
||||
match(res)
|
||||
.returnType<GhActivity | undefined>()
|
||||
// star repo
|
||||
.with(
|
||||
{ type: 'WatchEvent', payload: { action: 'started' } }
|
||||
, () => (
|
||||
new StarRepo(res.repo.name, res.repo.url, res.created_at)
|
||||
))
|
||||
// to be continued
|
||||
.otherwise(() => undefined))
|
||||
)
|
||||
.filter((res: GhActivity | undefined) => res !== undefined)
|
||||
));
|
||||
};
|
||||
@@ -0,0 +1,48 @@
|
||||
import { component$ } from "@builder.io/qwik";
|
||||
import { useDocumentHead, useLocation } from "@builder.io/qwik-city";
|
||||
|
||||
/**
|
||||
* The RouterHead component is placed inside of the document `<head>` element.
|
||||
*/
|
||||
export const RouterHead = component$(() => {
|
||||
const head = useDocumentHead();
|
||||
const loc = useLocation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<title>{head.title}</title>
|
||||
|
||||
<link rel="canonical" href={loc.url.href} />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
|
||||
{head.meta.map((m) => (
|
||||
<meta key={m.key} {...m} />
|
||||
))}
|
||||
|
||||
{head.links.map((l) => (
|
||||
<link key={l.key} {...l} />
|
||||
))}
|
||||
|
||||
{head.styles.map((s) => (
|
||||
<style
|
||||
key={s.key}
|
||||
{...s.props}
|
||||
{...(s.props?.dangerouslySetInnerHTML
|
||||
? {}
|
||||
: { dangerouslySetInnerHTML: s.style })}
|
||||
/>
|
||||
))}
|
||||
|
||||
{head.scripts.map((s) => (
|
||||
<script
|
||||
key={s.key}
|
||||
{...s.props}
|
||||
{...(s.props?.dangerouslySetInnerHTML
|
||||
? {}
|
||||
: { dangerouslySetInnerHTML: s.script })}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
});
|
||||
@@ -1,4 +0,0 @@
|
||||
export const SITE_CONFIG = {
|
||||
name: 'Atelier Lumiaethor',
|
||||
desc: ''
|
||||
};
|
||||
@@ -0,0 +1,17 @@
|
||||
/*
|
||||
* WHAT IS THIS FILE?
|
||||
*
|
||||
* Development entry point using only client-side modules:
|
||||
* - Do not use this mode in production!
|
||||
* - No SSR
|
||||
* - No portion of the application is pre-rendered on the server.
|
||||
* - All of the application is running eagerly in the browser.
|
||||
* - More code is transferred to the browser than in SSR mode.
|
||||
* - Optimizer/Serialization/Deserialization code is not exercised!
|
||||
*/
|
||||
import { render, type RenderOptions } from "@builder.io/qwik";
|
||||
import Root from "./root";
|
||||
|
||||
export default function (opts: RenderOptions) {
|
||||
return render(document, <Root />, opts);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/*
|
||||
* WHAT IS THIS FILE?
|
||||
*
|
||||
* It's the bundle entry point for `npm run preview`.
|
||||
* That is, serving your app built in production mode.
|
||||
*
|
||||
* Feel free to modify this file, but don't remove it!
|
||||
*
|
||||
* Learn more about Vite's preview command:
|
||||
* - https://vitejs.dev/config/preview-options.html#preview-options
|
||||
*
|
||||
*/
|
||||
import { createQwikCity } from "@builder.io/qwik-city/middleware/node";
|
||||
import qwikCityPlan from "@qwik-city-plan";
|
||||
// make sure qwikCityPlan is imported before entry
|
||||
import render from "./entry.ssr";
|
||||
|
||||
/**
|
||||
* The default export is the QwikCity adapter used by Vite preview.
|
||||
*/
|
||||
export default createQwikCity({ render, qwikCityPlan });
|
||||
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* WHAT IS THIS FILE?
|
||||
*
|
||||
* SSR entry point, in all cases the application is rendered outside the browser, this
|
||||
* entry point will be the common one.
|
||||
*
|
||||
* - Server (express, cloudflare...)
|
||||
* - npm run start
|
||||
* - npm run preview
|
||||
* - npm run build
|
||||
*
|
||||
*/
|
||||
import {
|
||||
renderToStream,
|
||||
type RenderToStreamOptions,
|
||||
} from "@builder.io/qwik/server";
|
||||
import { manifest } from "@qwik-client-manifest";
|
||||
import Root from "./root";
|
||||
|
||||
export default function (opts: RenderToStreamOptions) {
|
||||
return renderToStream(<Root />, {
|
||||
manifest,
|
||||
...opts,
|
||||
// Use container attributes to set attributes on the html tag.
|
||||
containerAttributes: {
|
||||
lang: "en-us",
|
||||
...opts.containerAttributes,
|
||||
},
|
||||
serverData: {
|
||||
...opts.serverData,
|
||||
},
|
||||
});
|
||||
}
|
||||
Whitespace-only changes.
@@ -0,0 +1,38 @@
|
||||
import { component$ } from "@builder.io/qwik";
|
||||
import {
|
||||
QwikCityProvider,
|
||||
RouterOutlet,
|
||||
ServiceWorkerRegister,
|
||||
} from "@builder.io/qwik-city";
|
||||
import { RouterHead } from "./components/router-head/router-head";
|
||||
import { isDev } from "@builder.io/qwik";
|
||||
|
||||
import "./global.css";
|
||||
|
||||
export default component$(() => {
|
||||
/**
|
||||
* The root of a QwikCity site always start with the <QwikCityProvider> component,
|
||||
* immediately followed by the document's <head> and <body>.
|
||||
*
|
||||
* Don't remove the `<head>` and `<body>` elements.
|
||||
*/
|
||||
|
||||
return (
|
||||
<QwikCityProvider>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
{!isDev && (
|
||||
<link
|
||||
rel="manifest"
|
||||
href={`${import.meta.env.BASE_URL}manifest.json`}
|
||||
/>
|
||||
)}
|
||||
<RouterHead />
|
||||
</head>
|
||||
<body lang="en">
|
||||
<RouterOutlet />
|
||||
{!isDev && <ServiceWorkerRegister />}
|
||||
</body>
|
||||
</QwikCityProvider>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,25 @@
|
||||
import { component$ } from "@builder.io/qwik";
|
||||
import type { DocumentHead } from "@builder.io/qwik-city";
|
||||
|
||||
export default component$(() => {
|
||||
return (
|
||||
<>
|
||||
<h1>Hi 👋</h1>
|
||||
<div>
|
||||
Can't wait to see what you build with qwik!
|
||||
<br />
|
||||
Happy coding.
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
export const head: DocumentHead = {
|
||||
title: "Welcome to Qwik",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content: "Qwik site description",
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -0,0 +1,17 @@
|
||||
import { component$, Slot } from "@builder.io/qwik";
|
||||
import type { RequestHandler } from "@builder.io/qwik-city";
|
||||
|
||||
export const onGet: RequestHandler = async ({ cacheControl }) => {
|
||||
// Control caching for this request for best performance and to reduce hosting costs:
|
||||
// https://qwik.dev/docs/caching/
|
||||
cacheControl({
|
||||
// Always serve a cached response by default, up to a week stale
|
||||
staleWhileRevalidate: 60 * 60 * 24 * 7,
|
||||
// Max once every 5 seconds, revalidate on the server to get a fresh version of this page
|
||||
maxAge: 5,
|
||||
});
|
||||
};
|
||||
|
||||
export default component$(() => {
|
||||
return <Slot />;
|
||||
});
|
||||
@@ -0,0 +1,18 @@
|
||||
/*
|
||||
* WHAT IS THIS FILE?
|
||||
*
|
||||
* The service-worker.ts file is used to have state of the art prefetching.
|
||||
* https://qwik.dev/qwikcity/prefetching/overview/
|
||||
*
|
||||
* Qwik uses a service worker to speed up your site and reduce latency, ie, not used in the traditional way of offline.
|
||||
* You can also use this file to add more functionality that runs in the service worker.
|
||||
*/
|
||||
import { setupServiceWorker } from "@builder.io/qwik-city/service-worker";
|
||||
|
||||
setupServiceWorker();
|
||||
|
||||
addEventListener("install", () => self.skipWaiting());
|
||||
|
||||
addEventListener("activate", () => self.clients.claim());
|
||||
|
||||
declare const self: ServiceWorkerGlobalScope;
|
||||
@@ -1,60 +0,0 @@
|
||||
import { nextui } from '@nextui-org/react';
|
||||
|
||||
import type { Config } from 'tailwindcss';
|
||||
import plugin from 'tailwindcss/plugin';
|
||||
|
||||
const config: Config = {
|
||||
content: [
|
||||
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
|
||||
],
|
||||
// theme: {
|
||||
// extend: {}
|
||||
// },
|
||||
darkMode: 'class',
|
||||
plugins: [
|
||||
require('@tailwindcss/typography'),
|
||||
nextui(
|
||||
{
|
||||
// defaultTheme: 'dark',
|
||||
defaultExtendTheme: 'light',
|
||||
themes: {
|
||||
'light': {
|
||||
layout: {},
|
||||
colors: {}
|
||||
},
|
||||
'dark': {
|
||||
layout: {},
|
||||
colors: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
),
|
||||
plugin(function ({ addUtilities, addComponents, e, config }) {
|
||||
addUtilities(
|
||||
{
|
||||
'.horizontal-tb': {
|
||||
writingMode: 'horizontal-tb'
|
||||
},
|
||||
'.vertical-rl': {
|
||||
writingMode: 'vertical-rl'
|
||||
},
|
||||
'.vertical-lr': {
|
||||
writingMode: 'vertical-lr'
|
||||
},
|
||||
'.sideways-lr': {
|
||||
writingMode: 'vertical-lr',
|
||||
transform: 'rotate(180deg)'
|
||||
},
|
||||
'.sideways-rl': {
|
||||
writingMode: 'sideways-rl',
|
||||
transform: 'rotate(180deg)'
|
||||
}
|
||||
}
|
||||
);
|
||||
})
|
||||
]
|
||||
};
|
||||
export default config;
|
||||
+15
-17
@@ -1,27 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"target": "ES2017",
|
||||
"module": "ES2022",
|
||||
"lib": ["es2022", "DOM", "WebWorker", "DOM.Iterable"],
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "@builder.io/qwik",
|
||||
"strict": true,
|
||||
"target": "ESNext",
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"moduleResolution": "Bundler",
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"isolatedModules": true,
|
||||
"outDir": "tmp",
|
||||
"noEmit": true,
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
"~/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
"files": ["./.eslintrc.cjs"],
|
||||
"include": ["src", "./*.d.ts", "./*.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
/**
|
||||
* This is the base config for vite.
|
||||
* When building, the adapter config is used which loads this file and extends it.
|
||||
*/
|
||||
import { defineConfig, type UserConfig } from "vite";
|
||||
import { qwikVite } from "@builder.io/qwik/optimizer";
|
||||
import { qwikCity } from "@builder.io/qwik-city/vite";
|
||||
import tsconfigPaths from "vite-tsconfig-paths";
|
||||
import pkg from "./package.json";
|
||||
|
||||
type PkgDep = Record<string, string>;
|
||||
const { dependencies = {}, devDependencies = {} } = pkg as any as {
|
||||
dependencies: PkgDep;
|
||||
devDependencies: PkgDep;
|
||||
[key: string]: unknown;
|
||||
};
|
||||
errorOnDuplicatesPkgDeps(devDependencies, dependencies);
|
||||
|
||||
/**
|
||||
* Note that Vite normally starts from `index.html` but the qwikCity plugin makes start at `src/entry.ssr.tsx` instead.
|
||||
*/
|
||||
export default defineConfig(({ command, mode }): UserConfig => {
|
||||
return {
|
||||
plugins: [qwikCity(), qwikVite(), tsconfigPaths()],
|
||||
// This tells Vite which dependencies to pre-build in dev mode.
|
||||
optimizeDeps: {
|
||||
// Put problematic deps that break bundling here, mostly those with binaries.
|
||||
// For example ['better-sqlite3'] if you use that in server functions.
|
||||
exclude: [],
|
||||
},
|
||||
|
||||
/**
|
||||
* This is an advanced setting. It improves the bundling of your server code. To use it, make sure you understand when your consumed packages are dependencies or dev dependencies. (otherwise things will break in production)
|
||||
*/
|
||||
// ssr:
|
||||
// command === "build" && mode === "production"
|
||||
// ? {
|
||||
// // All dev dependencies should be bundled in the server build
|
||||
// noExternal: Object.keys(devDependencies),
|
||||
// // Anything marked as a dependency will not be bundled
|
||||
// // These should only be production binary deps (including deps of deps), CLI deps, and their module graph
|
||||
// // If a dep-of-dep needs to be external, add it here
|
||||
// // For example, if something uses `bcrypt` but you don't have it as a dep, you can write
|
||||
// // external: [...Object.keys(dependencies), 'bcrypt']
|
||||
// external: Object.keys(dependencies),
|
||||
// }
|
||||
// : undefined,
|
||||
|
||||
server: {
|
||||
headers: {
|
||||
// Don't cache the server response in dev mode
|
||||
"Cache-Control": "public, max-age=0",
|
||||
},
|
||||
},
|
||||
preview: {
|
||||
headers: {
|
||||
// Do cache the server response in preview (non-adapter production build)
|
||||
"Cache-Control": "public, max-age=600",
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
// *** utils ***
|
||||
|
||||
/**
|
||||
* Function to identify duplicate dependencies and throw an error
|
||||
* @param {Object} devDependencies - List of development dependencies
|
||||
* @param {Object} dependencies - List of production dependencies
|
||||
*/
|
||||
function errorOnDuplicatesPkgDeps(
|
||||
devDependencies: PkgDep,
|
||||
dependencies: PkgDep,
|
||||
) {
|
||||
let msg = "";
|
||||
// Create an array 'duplicateDeps' by filtering devDependencies.
|
||||
// If a dependency also exists in dependencies, it is considered a duplicate.
|
||||
const duplicateDeps = Object.keys(devDependencies).filter(
|
||||
(dep) => dependencies[dep],
|
||||
);
|
||||
|
||||
// include any known qwik packages
|
||||
const qwikPkg = Object.keys(dependencies).filter((value) =>
|
||||
/qwik/i.test(value),
|
||||
);
|
||||
|
||||
// any errors for missing "qwik-city-plan"
|
||||
// [PLUGIN_ERROR]: Invalid module "@qwik-city-plan" is not a valid package
|
||||
msg = `Move qwik packages ${qwikPkg.join(", ")} to devDependencies`;
|
||||
|
||||
if (qwikPkg.length > 0) {
|
||||
throw new Error(msg);
|
||||
}
|
||||
|
||||
// Format the error message with the duplicates list.
|
||||
// The `join` function is used to represent the elements of the 'duplicateDeps' array as a comma-separated string.
|
||||
msg = `
|
||||
Warning: The dependency "${duplicateDeps.join(", ")}" is listed in both "devDependencies" and "dependencies".
|
||||
Please move the duplicated dependencies to "devDependencies" only and remove it from "dependencies"
|
||||
`;
|
||||
|
||||
// Throw an error with the constructed message.
|
||||
if (duplicateDeps.length > 0) {
|
||||
throw new Error(msg);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user