Merge pull request #2 from ichipiro/itakiyo/add-portal-page

ポータルサイトを追加

package.json

@@ -13,7 +13,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.3",

src/main.tsx

@@ -1,8 +1,25 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import { IndexPage } from "./pages/index.tsx";
 import "./styles/theme.css";
 
 const root = document.getElementById("root");
 if (!root) throw new Error("No root element");
 
-createRoot(root).render(<StrictMode />);
+const router = createBrowserRouter([
+	{
+		children: [
+			{
+				index: true,
+				element: <IndexPage />,
+			},
+		],
+	},
+]);
+
+createRoot(root).render(
+	<StrictMode>
+		<RouterProvider router={router} />
+	</StrictMode>,
+);

src/pages/index.tsx

@@ -0,0 +1,117 @@
+import { useEffect } from "react";
+import "../styles/loading.css";
+import "../styles/linkcard.css";
+import "../styles/index.css";
+
+
+const links = [
+	{
+		index: 0,
+		icon: "https://ichipol.g.hiroshima-cu.ac.jp/uprx/images/favicon.ico",
+		title: "UNIPA スマホ版",
+		url: "https://ichipol.g.hiroshima-cu.ac.jp/uprx/MobileShibbolethAuthServlet",
+	},
+	{
+		index: 1,
+		icon: "https://ichipol.g.hiroshima-cu.ac.jp/uprx/images/favicon.ico",
+		title: "UNIPA PC版",
+		url: "https://ichipol.g.hiroshima-cu.ac.jp/uprx/ShibbolethAuthServlet",
+	},
+	{
+		index: 2,
+		icon: "https://etext.g.hiroshima-cu.ac.jp/favicon.ico",
+		title: "UniText",
+		url: "https://app.d-text-service.jp/browser/start?uneidantai_ryakugo=MZ&soshiki_cd=hcity",
+	},
+	{
+		index: 3,
+		icon: "https://outlook.office.com/favicon.ico",
+		title: "メール",
+		url: "https://outlook.office.com/mail/",
+	},
+	{
+		index: 4,
+		icon: "https://www.hiroshima-cu.ac.jp/favicon.ico",
+		title: "大学公式ウェブサイト",
+		url: "https://www.hiroshima-cu.ac.jp/",
+	},
+	{
+		index: 5,
+		icon: "https://www.hiroshima-cu.ac.jp/favicon.ico",
+		title: "学修の手引",
+		url: "https://www.hiroshima-cu.ac.jp/uploads/2022/03/655003d325eec272181262bc44a62d0e-20240331034513692.pdf",
+	},
+	{
+		index: 6,
+		icon: "https://www.hiroshima-cu.ac.jp/favicon.ico",
+		title: "教育課程",
+		url: "https://www.hiroshima-cu.ac.jp/uploads/2022/03/fe9e63aa036d3e706dbab00e4ca51390-2024033103474682.pdf",
+	},
+	{
+		index: 7,
+		icon: "https://www.hiroshima-cu.ac.jp/favicon.ico",
+		title: "時間割・集中講義日程",
+		url: "https://www.hiroshima-cu.ac.jp/campuslife/c00025986/",
+	},
+];
+
+type LinkCardProps = {
+	icon: string;
+	title: string;
+	url: string;
+};
+
+const LinkCard = ({ icon, title, url}: LinkCardProps) => {
+	return (
+		<div className="linkcard">
+			<a href={url} target="_blank">
+				<div>
+					<img src={icon} className="icon"/>
+					<p className="title">{title}</p>
+				</div>
+			</a>
+		</div>
+	);
+};
+
+const Footer = () => {
+	return <footer><small>&copy; 2024 いちぴろ・エクスプローラ</small></footer>;
+};
+
+export function IndexPage() {
+	useEffect(() => {
+		const ichipeerDiv = document.getElementById("ichipeer");
+		if (!ichipeerDiv) return;
+		const script = document.createElement("script");
+		script.type = "text/javascript";
+		script.src = "https://platform.twitter.com/widgets.js";
+		script.async = true;
+		ichipeerDiv.appendChild(script);
+
+		return () => {
+			ichipeerDiv.removeChild(script);
+		};
+	}, []);
+	return (
+		<>
+			<div id="links">
+				{links.map((link) => (
+					<LinkCard key={link.index} {...link} />
+				))}
+			</div>
+			<div id="ichipeer">
+				<a
+					className="twitter-timeline"
+					data-lang="ja"
+					data-theme="dark"
+					data-height="600"
+					href="https://twitter.com/HCU_ichipeer?ref_src=twsrc%5Etfw"
+				>
+					HCU_ichipeerさんのポスト
+					<div className="loading" />
+				</a>
+			</div>
+			<Footer />
+		</>
+	);
+}

src/styles/index.css

@@ -0,0 +1,14 @@
+
+#links {
+  display:flex;
+  flex-wrap: wrap;
+  margin-top: 20px;
+}
+
+#ichipeer {
+  width: 80vw;
+  max-width: 500px;
+  height: 600px;
+  margin: 0 auto;
+  overflow: hidden;
+}

src/styles/linkcard.css

@@ -0,0 +1,57 @@
+.linkcard {
+  background-color: #1D2938;
+
+  position: relative;
+  margin: 5px auto;
+
+  height: 50px;
+  width: 80vw;
+  max-width: 150px;
+
+  border-radius: 15px;
+}
+
+.linkcard .icon {
+  position: absolute;
+  top: 16px;
+  left: 10px;
+  height: 16px;
+  width: 16px;
+}
+
+.linkcard .title {
+  color: #fff;
+  font-size: 10px;
+  position: absolute;
+  line-height: 30px;
+  top: 0;
+  left: 30px;
+}
+
+.linkcard .image-container {
+
+  display: inline-block;
+}
+
+.linkcard .image-container .ogp {
+  max-height: 100%;
+  position: absolute;
+  top: 0px;
+  right: 0;
+
+  background: linear-gradient(to right, rgba(#1D2938, 0.5) 50%, rgba(255, 255, 255, 0) 50%);
+  background-size: cover;
+  border: 1px solid #fff;
+  border-radius: 15px;
+}
+.image-container::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to right, rgba(#1D2938, 0.5), rgba(#1D2938, 0) 50%);
+  /* 左から右にかけて透明になるグラデーション */
+  pointer-events: none; /* オーバーレイをクリックできないようにする */
+}

src/styles/loading.css

@@ -0,0 +1,67 @@
+.loading,
+.loading:before,
+.loading:after {
+  border-radius: 50%;
+}
+.loading {
+  color: #0dc5c1;
+  font-size: 11px;
+  text-indent: -99999em;
+  margin: 55px auto;
+  position: relative;
+  width: 10em;
+  height: 10em;
+  box-shadow: inset 0 0 0 1em;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+.loading:before,
+.loading:after {
+  position: absolute;
+  content: "";
+}
+.loading:before {
+  width: 5.2em;
+  height: 10.2em;
+  background: #435068;
+  border-radius: 10.2em 0 0 10.2em;
+  top: -0.1em;
+  left: -0.1em;
+  -webkit-transform-origin: 5.1em 5.1em;
+  transform-origin: 5.1em 5.1em;
+  -webkit-animation: load2 2s infinite ease 1.5s;
+  animation: load2 2s infinite ease 1.5s;
+}
+.loading:after {
+  width: 5.2em;
+  height: 10.2em;
+  background: #435068;
+  border-radius: 0 10.2em 10.2em 0;
+  top: -0.1em;
+  left: 4.9em;
+  -webkit-transform-origin: 0.1em 5.1em;
+  transform-origin: 0.1em 5.1em;
+  -webkit-animation: load2 2s infinite ease;
+  animation: load2 2s infinite ease;
+}
+@-webkit-keyframes load2 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load2 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

src/styles/theme.css

@@ -0,0 +1,21 @@
+body {
+  background-color: #435068;
+  text-align: center;
+}
+
+footer {
+  background-color: #122338;
+  color: #fff;
+
+  width: 100%;
+
+  position: fixed;
+  left: 0;
+  bottom: 0;
+}
+
+#root {
+  margin: 0 auto;
+  width: 90vw;
+  max-width: 600px;
+}