Merge branch 'main'

techguide-jp · Oct 21, 2024 · 97b5bc3 · 97b5bc3
2 parents b338682 + 809f9e4
commit 97b5bc3
Show file tree

Hide file tree

Showing 36 changed files with 5,785 additions and 154 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -19,4 +19,7 @@ jobs:
           aws-region: ap-northeast-1
       - name:  S3 sync
         working-directory: design/TechGuide
-        run: aws s3 sync . s3://techguide.jp --delete --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --include "design/TechGuide/*"
+        run: aws s3 sync . s3://techguide.jp --delete --exclude "package*.json" --exclude "*.config.js" --exclude "node_modules" --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --include "design/TechGuide/*"
+      - name:  S3 sync events
+        working-directory: events
+        run: aws s3 sync . s3://techguide.jp/redirects --delete --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --include "events/*"
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 .DS_Store
+**/node_modules
diff --git a/design/Dockerfile b/design/Dockerfile
@@ -1,13 +1,18 @@
-FROM nginx:alpine
+# Node.jsの公式イメージから
+FROM node:20
 
-# パーミッション修正スクリプトをコンテナにコピー
-COPY set-permissions.sh /usr/local/bin/set-permissions.sh
+# アプリケーションディレクトリを作成する
+WORKDIR /usr/src/app
 
-# スクリプトに実行権限を付与
-RUN chmod +x /usr/local/bin/set-permissions.sh
+# アプリケーションの依存関係をインストールする
+COPY TechGuide/package*.json ./
+RUN npm install
 
-# エントリーポイントをスクリプトに設定
-ENTRYPOINT ["/usr/local/bin/set-permissions.sh"]
+# アプリケーションのソースをバンドルする
+COPY . .
 
-# デフォルトのコマンド
-CMD ["nginx", "-g", "daemon off;"]
+# ポートを開ける
+EXPOSE 8080
+
+# PostCSSを実行する
+CMD [ "npm", "run", "watch" ]
diff --git a/design/Makefile b/design/Makefile
@@ -18,7 +18,7 @@ export PORT := $(FIND_AVAILABLE_PORT)
 up: build
 	@echo "使用するポート: $(PORT)"
 	@docker-compose up -d
-	@PORT_NUMBER=$$(docker-compose port web 80 | awk -F: '{print $$2}') && \
+	@PORT_NUMBER=$$(docker-compose port nginx 80 | awk -F: '{print $$2}') && \
 	if [ -n "$$PORT_NUMBER" ]; then \
 		echo "アクセス用URL: http://localhost:$$PORT_NUMBER"; \
 	else \
@@ -47,12 +47,12 @@ status:
 # ターゲット: コンテナに入る
 .PHONY: exec
 exec:
-	@docker-compose exec web sh -c "cd /usr/share/nginx/html && sh"
+	@docker-compose exec nginx sh -c "cd /usr/share/nginx/html && sh"
 
 # ターゲット: アクセスURLを表示
 .PHONY: url
 url:
-	@PORT_NUMBER=$$(docker-compose port web 80 | awk -F: '{print $$2}') && \
+	@PORT_NUMBER=$$(docker-compose port nginx 80 | awk -F: '{print $$2}') && \
 	if [ -n "$$PORT_NUMBER" ]; then \
 		echo "アクセス用URL: http://localhost:$$PORT_NUMBER"; \
 	else \

diff --git a/design/README.md b/design/README.md
@@ -0,0 +1,10 @@
+# イベントページ作成手順
+1. 作成したいイベントページのconnpassサイトのurlを、url_list.txtに羅列する
+    - もし一覧ページから一括取得したい場合は、`ruby get_urls.rb` を叩く
+1. 必要情報をスクレイピングするのに、 `ruby get_ogp.rb` を叩く
+    - result.ymlに結果が出力される
+1. result.ymlを内容を確認し、調整した後、finish.ymlに移植する
+1. `ruby transfer.rb` を叩き、finish.ymlの内容からoutput.htmlを生成する
+1. `cp output.html TechGuide/event.html` を叩き、所定の場所に配置する
+1. `localhost:88/event.html` にアクセスして内容を確認
+1. 問題なければ、mainブランチに適応してリリース
diff --git a/design/TechGuide/contact/free_mote_consulting.html b/design/TechGuide/contact/free_mote_consulting.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="refresh" content="0;url=https://forms.gle/uC7ujhmYd9YZ1RcH6">
+  <meta charset="utf-8">
+  <title>無料恋愛相談申し込みフォーム</title>
+  <script type="text/javascript" src="../js/ga.js"></script>
+</head>
+<body>
+  <p>無料恋愛相談申し込みフォームを開きます</p>
+</body>
+</html>
+
diff --git a/design/TechGuide/css/common.css b/design/TechGuide/css/common.css
@@ -89,15 +89,17 @@ main {
 }
 
 .mV_txt {
-    width: 60%;
-    font-size: 3vmin;
     position: absolute;
-    top: 27%;
-    right: 10%;
+    top: 50%;
+	left: 50%;
+	width: 80%;
     z-index: 1;
     letter-spacing: 20px;
+	transform: translate(-50%, -50%);
     font-family: 'Kosugi Maru', sans-serif;
     font-weight: bold;
+	color: white;
+	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 .name {
@@ -107,7 +109,7 @@ main {
 }
 
 .mV_txt i {
-    font-size: 15vmin;
+    font-size: 100px;
     font-weight: bold;
     color: darkorange;
     text-shadow: 5px 5px 5px rgb(255 255 255 / 80%);
@@ -118,9 +120,13 @@ main {
 }
 
 #thought_area {
-	width: 60%;
 	margin: 2em auto;
 }
+.thought_box {
+	width: 60%;
+	margin: auto;
+	margin-bottom: 2rem;
+}
 
 h1 {
 	width: 100%;
@@ -138,12 +144,7 @@ h3 {
 	padding-top: .5rem;
 }
 
-.thought_box {
-	margin-bottom: 2rem;
-}
-
 .thought_list {
-	padding: 1rem 2rem;
     margin: 1rem 0;
     font-weight: bold;
 }
@@ -155,12 +156,7 @@ h3 {
     border: #ffa500 solid;
 }
 
-.thought_list li {
-	list-style: disc;
-}
-
 .missuon_list li {
-	list-style: disc;
 	padding: 0.5rem 0;
 }
 
@@ -179,6 +175,7 @@ h3 {
 }
 
 .contents_txt2 {
+    padding: 10px 0;
     display: flex;
     flex-wrap: wrap;
     flex-direction: row-reverse;
@@ -191,7 +188,7 @@ h3 {
 
 .img {
 	margin: 0 auto 2rem;
-	width: 40%;
+	width: 50%;
 }
 
 .contents_2 {
@@ -278,10 +275,6 @@ h3 {
 
 /* ------------------footer_area----------------------- */
 
-footer small {
-	color: #000;
-}
-
 footer ul {
 	width: 95%;
 	display: flex;
@@ -296,7 +289,6 @@ footer ul li {
 }
 
 footer ul li a {
-	color: #000;
 	display: grid;
 	grid-template-rows: auto;
 }
@@ -479,11 +471,12 @@ footer ul li a:hover {
 	/* -----------メインコンテンツ----------- */
 
 	.mV_txt {
-		font-size: 4vmin;
-		top: 25%;
-		right: 10%;
-		width: 65%;
-		letter-spacing: 5px;
+		font-size: 5vmin;
+		position: absolute;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		width: 90%;
+		letter-spacing: 0px;
 	}
 
 	.name {
@@ -495,12 +488,13 @@ footer ul li a:hover {
 	}
 
 	#thought_area{
-		width: 80%;
+		width: 100%;
 		margin: auto;
 	}
-
-	#thought_title {
-		margin-top: 1em;
+	.thought_box {
+		width: 80%;
+		margin: auto;
+		margin-bottom: 2rem;
 	}
 
 	.contents {
@@ -580,8 +574,4 @@ footer ul li a:hover {
 	footer small {
 		font-size: 0.75em;
 	}
-
-
-
-
 }
diff --git a/design/TechGuide/css/event.css b/design/TechGuide/css/event.css
@@ -0,0 +1,7 @@
+.card {
+  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
+}
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
+}