welcome2023をベースにひな形を作成

TitechMeister · Mar 24, 2024 · ce1c6f1 · ce1c6f1
commit ce1c6f1
Show file tree

Hide file tree

Showing 76 changed files with 2,508 additions and 0 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,51 @@
+# 静的コンテンツを GitHub Pages にデプロイするためのシンプルなワークフロー
+name: Deploy static content to Pages
+
+on:
+  # デフォルトブランチを対象としたプッシュ時にで実行されます
+  push:
+    branches: ['main']
+
+  # Actions タブから手動でワークフローを実行できるようにします
+  workflow_dispatch:
+
+# GITHUB_TOKEN のパーミッションを設定し、GitHub Pages へのデプロイを許可します
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# 1 つの同時デプロイメントを可能にする
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # デプロイするだけなので、単一のデプロイジョブ
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # dist リポジトリのアップロード
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist.zip
+dist-ssr
+*.local
+
+# auth
+id_rsa
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="jp">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <title>Meister新歓サイト2024</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "welcome2023",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "pub": "yarn build && rm dist.zip && 7z a dist.zip dist && scp -i id_rsa dist.zip  [email protected]:~/www/"
+  },
+  "homepage": "https://meister.ne.jp/welcome2023",
+  "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/material": "^5.11.14",
+    "@types/react-pdf": "^6.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-pdf": "^6.2.2",
+    "react-responsive-carousel": "^3.2.23",
+    "react-router-dom": "6"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^3.1.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.2.0"
+  }
+}
diff --git a/public/.htaccess b/public/.htaccess
@@ -0,0 +1,4 @@
+RewriteEngine On
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule ^ index.html [QSA,L]
diff --git a/public/logo_aqua.png b/public/logo_aqua.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,80 @@
+import * as React from 'react';
+
+import Menu from './component/Menu';
+
+import Home from './pages/Home/Home';
+import Teams from './pages/Teams/Teams';
+import Event from './pages/Event/Event';
+import Links from './pages/Links/Links';
+import FAQ from './pages/FAQ/FAQ';
+import Interview from './pages/Interview/Interview';
+import Access from './pages/Access/Access';
+import NotFound from './pages/NotFound';
+import Admission from './pages/Admission/Admission';
+
+import { createTheme, CssBaseline, ThemeProvider, Box, Toolbar } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { ScrollRestoration, createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
+
+
+interface Props {
+}
+
+const items = [
+  { title: 'トップ', element: <Home />, path: '/' },
+  { title: 'インタビュー', element: <Interview />, path: '/interview' },
+  { title: '班紹介', element: <Teams />, path: '/teams' },
+  { title: '新歓イベント', element: <Event />, path: '/event' },
+  { title: 'よくある質問', element: <FAQ />, path: '/faq' },
+  { title: '入部方法', element: <Admission />, path: '/admission' },
+  { title: 'アクセス', element: <Access />, path: '/access' },
+  { title: 'リンク', element: <Links />, path: '/links' }
+]
+
+
+export default function App(props: Props) {
+  const [prefersDarkMode, setPrefersDarkMode] = React.useState(useMediaQuery('(prefers-color-scheme: dark)'))
+
+  const theme = React.useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode: prefersDarkMode ? 'dark' : 'light',
+          primary: {
+            main: "#0090F0"
+          },
+        },
+      }),
+    [prefersDarkMode],
+  );
+
+  const router = createBrowserRouter([
+    {
+      path: '',
+      element:
+        <Box component="main" sx={{ p: 3 }}>
+          <Menu children={items} title='Meister' setPrefersDarkMode={setPrefersDarkMode} prefersDarkMode={prefersDarkMode}></Menu>
+          <Toolbar />
+          <Outlet />
+          <ScrollRestoration />
+        </Box>,
+      children: items,
+      errorElement: <NotFound />
+    }
+  ], {
+    basename: "/welcome/"
+  })
+
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <Box component="main" sx={{ p: 3 }}>
+          <Toolbar />
+          <RouterProvider router={router}></RouterProvider>
+        </Box>
+
+      </ThemeProvider>
+    </Box>
+  );
+}
diff --git a/src/component/Menu.tsx b/src/component/Menu.tsx
@@ -0,0 +1,101 @@
+import * as React from 'react'
+import {AppBar, Box, Drawer, IconButton, List, ListItem, ListItemButton, ListItemText, Toolbar, Typography, Button} from '@mui/material'
+import MenuIcon from '@mui/icons-material/Menu';
+import { Link } from 'react-router-dom';
+
+import Brightness4Icon from '@mui/icons-material/Brightness4';
+import Brightness7Icon from '@mui/icons-material/Brightness7';
+
+
+interface MenuItem {
+    title: string,
+    path: string,
+    element: JSX.Element
+}
+
+interface MenuProps {
+    title: string,
+    children: MenuItem[],
+    setPrefersDarkMode: (value: boolean) => void,
+    prefersDarkMode: boolean
+}
+
+export default function Menu(props: MenuProps) {
+    const [mobileOpen, setMobileOpen] = React.useState(false);
+
+    const handleDrawerToggle = () => {
+        setMobileOpen((prevState) => !prevState);
+    };
+
+    return (
+        <React.Fragment>
+            <AppBar component="nav" color='primary' enableColorOnDark>
+                <Toolbar>
+                    <IconButton
+                        color="inherit"
+                        aria-label="open drawer"
+                        edge="start"
+                        onClick={handleDrawerToggle}
+                        sx={{ mr: 2, display: { sm: 'none' } }}
+                    >
+                        <MenuIcon />
+                    </IconButton>
+                    <Typography
+                        variant="h6"
+                        component="div"
+                        padding={1}
+                    >
+                        {props.title}
+                    </Typography>
+
+
+                    {/* Desktop表示部分 */}
+                    <Box sx={{ display: { xs: 'none', sm: 'block', flexGrow: 1 } }}>
+                        {props.children.map((item, idx) => (
+                            <Link key={item.path} to={item.path}>
+                                <Button sx={{ color: '#fff' }}>
+                                    {item.title}
+                                </Button>
+                            </Link>
+                        ))}
+                    </Box>
+
+                    <Box sx={{ flexGrow: 1 }} />
+                    <IconButton onClick={() => { props.setPrefersDarkMode(!props.prefersDarkMode) }}>
+                        {props.prefersDarkMode ? <Brightness7Icon /> : <Brightness4Icon />}
+                    </IconButton>
+
+                </Toolbar>
+            </AppBar>
+
+            {/* Mobile表示部分 */}
+            <Box component="nav">
+                <Drawer
+                    variant="temporary"
+                    open={mobileOpen}
+                    onClose={handleDrawerToggle}
+                    ModalProps={{
+                        keepMounted: true, // Better open performance on mobile.
+                    }}
+                    sx={{
+                        '& .MuiDrawer-paper': { boxSizing: 'border-box', width: 240 },
+                    }}
+                >
+                    <Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
+                        <List>
+                            {props.children.map((item) => (
+                                <ListItem key={item.path} disablePadding>
+                                    <Link to={item.path}>
+                                        <ListItemButton sx={{ textAlign: 'center' }}>
+                                            <ListItemText primary={item.title} />
+                                        </ListItemButton>
+                                    </Link>
+                                </ListItem>
+                            ))}
+                        </List>
+                    </Box>
+                </Drawer>
+            </Box>
+        </React.Fragment>
+    )
+}
diff --git a/src/component/QACard.tsx b/src/component/QACard.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Chip, Paper } from '@mui/material';
+import Divider from '@mui/material/Divider';
+import { styled } from '@mui/material/styles';
+import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
+
+
+const Item = styled(Paper)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
+    ...theme.typography.body2,
+    textAlign: 'left',
+    color: theme.palette.text.secondary,
+    padding:2
+}));
+
+interface Props {
+    /**
+     * Injected by the documentation to work in an iframe.
+     * You won't need it on your project.
+     */
+    question?: string,
+    children?: ReactJSXElement
+}
+
+const QACard: React.FC<Props> = ({ question, children }) => (
+    <Item>
+        <Chip label="Q" color="primary" /> {question}
+        <Divider />
+        {children}
+    </Item>
+);
+
+export default QACard