Merge pull request #63 from SystemEngineeringTeam/bootstrap

Bootstrap対応

app/[slug]/page.tsx

@@ -5,6 +5,7 @@ import { specialPath } from '@/const';
 import { css } from '@/styled-system/css';
 import { mdStyle } from '@/styled-system/patterns';
 import { Page } from '@/types';
+import '@/styles/bootstrap/bootstrap.scss';
 
 export const generateStaticParams = () => {
   const pages = getPages();
@@ -45,6 +46,7 @@ export default function Pages({ params }: Props) {
             fontWeight: 700,
             marginBottom: '1rem',
             borderBottom: '1px solid black',
+            display: page.title ? 'block' : 'none',
           })}
         >
           {page.meta.title}

app/events/[id]/page.tsx

@@ -2,6 +2,7 @@ import { getEvents } from '@/components/loadFiles';
 import Md2Html from '@/components/md2html';
 import { css } from '@/styled-system/css';
 import { mdStyle } from '@/styled-system/patterns';
+import '@/styles/bootstrap/bootstrap.scss';
 
 export const generateStaticParams = () => {
   const events = getEvents();

app/post/[id]/page.tsx

@@ -7,6 +7,7 @@ import { IMAGE_REGEX } from '@/const';
 import { css } from '@/styled-system/css';
 import { mdStyle } from '@/styled-system/patterns';
 import { PostPage } from '@/types';
+import '@/styles/bootstrap/bootstrap.scss';
 
 export const generateStaticParams = () => {
   const posts = getPosts();

components/loadFiles.ts

@@ -164,11 +164,13 @@ export function getPages(): Page[] {
       `/${meta.title.toLowerCase()}`,
       /^¥.*$/,
     );
+    const title_ = parseMetaTag(meta.tags, 'title', 'true');
 
     return {
       path: path_.replace('¥', '/'),
       widthNarrow: widthNarrow === 'true',
       other: other === 'true',
+      title: title_ === 'false',
       style,
       sort,
       filename,

package.json

@@ -47,6 +47,7 @@
     "gray-matter": "^4.0.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.1.0",
+    "sass": "^1.83.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.3.2"
   },

public/markdown/pages/2014.html.md

@@ -0,0 +1,148 @@
+---
+title: SysHack特設ページ
+category:
+tags: sort:-1, path:¥syshack
+created_at: '2023-06-19T14:29:08+09:00'
+updated_at: '2024-01-26T15:14:29+09:00'
+published: true
+number: 2014
+---
+
+<h1 class="text-center">:fire:SysHack 2025 初陣の春:fire:<span style="font-size:15px">を開催します!!!!</span></h1>
+<!--概要 -->
+<section>
+  <h2 class="text-primary">SysHack 2025 初陣の春とは</h2>
+  <p>SysHackとは初心者でも気軽にハッカソンに出られるような学生団体主催のハッカソンです。</p>
+</section>
+<!-- スポンサー -->
+<section>
+  <h2 class="text-primary">スポンサー</h2>
+  <p>SysHackは以下のスポンサーのご支援をいただいています。</p>
+  <ul class="list-group">
+    <li class="list-group-item">CyberAgent様</li>
+    <li class="list-group-item">NxTEND様</li>
+    <li class="list-group-item">TechTrain様</li>
+  </ul>
+  <p>※今後スポンサー企業は増える可能性がございます。</p>
+</section>
+<!-- 賞 -->
+<section>
+  <h2 class="text-primary">賞</h2>
+  <ul class="list-group">
+    <li class="list-group-item">総合賞<ul><li>最優秀賞</li></ul></li>
+    <li class="list-group-item">企業賞<ul><li>CyberAgent賞</li><li>NxTEND賞</li><li>TechTrain賞</li></ul></li>
+    <li class="list-group-item">団体賞<ul><li>シス研賞</li></ul></li>
+  </ul>
+  <p>※現在もスポンサー様を募集中のため追加される可能性がございます🔥</p>
+</section>
+<!-- 参加資格 -->
+<section>
+  <h2 class="text-primary">参加資格</h2>
+  <p>大学、専門学校問わず学生である方は参加資格を有します。</p>
+</section>
+<!-- スケジュール -->
+<section>
+  <h2 class="text-primary">スケジュール</h2>
+  <ul class="list-group">
+    <li class="list-group-item">キックオフ: 2024年3月17日(月)</li>
+    <li class="list-group-item">開発期間:〜 2024年3月31日(月)</li>
+    <li class="list-group-item">発表会・懇親会: 2024年3月31日(月)</li>
+  </ul>
+</section>
+<!-- イベントタイムテーブル -->
+<section>
+  <h2 class="text-primary">イベントタイムテーブル</h2>
+  <article>
+  <h3 class="text-primary">イベントキックオフ 3月17日(月)</h3>
+  <table class="table">
+    <thead>
+      <tr>
+        <th>時間</th>
+        <th>内容</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>12:00</td>
+        <td>現地会場</td>
+      </tr>
+      <tr>
+        <td>12:45</td>
+        <td>ZOOM OPEN</td>
+      </tr>
+      <tr>
+        <td>13:00</td>
+        <td>オープニング</td>
+      </tr>
+      <tr>
+        <td>13:30</td>
+        <td>チーム紹介(1チーム30秒紹介タイム)</td>
+      </tr>
+      <tr>
+        <td>14:00</td>
+        <td>ZOOM CLOSE</td>
+      </tr>
+      <tr>
+        <td>20:00</td>
+        <td>現地閉場</td>
+      </tr>
+    </tbody>
+  </table>
+  </article>
+  <h3 class="text-primary"style="padding-right:20px" >イベント 3月31日(月)</h3>
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th>時間</th>
+        <th>内容</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>10:00</td>
+        <td>現地開場(メンターのサポートを受けれられます)</td>
+      </tr>
+      <tr>
+        <td>13:00</td>
+        <td>SysHack開幕</td>
+      </tr>
+      <tr>
+        <td>13:30</td>
+        <td>発表開始(1チーム3分)</td>
+      </tr>
+      <tr>
+        <td>15:30</td>
+        <td>ブース展示開始</td>
+      </tr>
+      <tr>
+        <td>17:00</td>
+        <td>ブース展示終了</td>
+      </tr>
+      <tr>
+        <td>17:10</td>
+        <td>投票タイム</td>
+      </tr>
+      <tr>
+        <td>17:30</td>
+        <td>スポンサータイム</td>
+      </tr>
+      <tr>
+        <td>18:00</td>
+        <td>懇親会開始</td>
+      </tr>
+      <tr>
+        <td>18:30</td>
+        <td>賞発表</td>
+      </tr>
+      <tr>
+        <td>19:00</td>
+        <td>SysHack閉幕</td>
+      </tr>
+      <tr>
+        <td>20:00</td>
+        <td>現地閉場</td>
+      </tr>
+    </tbody>
+  </table>
+</section>
+

scss/_accordion.scss

@@ -0,0 +1,173 @@
+//
+// Base styles
+//
+
+.accordion {
+  // scss-docs-start accordion-css-vars
+  --#{$prefix}accordion-color: #{$accordion-color};
+  --#{$prefix}accordion-bg: #{$accordion-bg};
+  --#{$prefix}accordion-transition: #{$accordion-transition};
+  --#{$prefix}accordion-border-color: #{$accordion-border-color};
+  --#{$prefix}accordion-border-width: #{$accordion-border-width};
+  --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
+  --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
+  --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
+  --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
+  --#{$prefix}accordion-btn-color: #{$accordion-button-color};
+  --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
+  --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
+  --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
+  --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
+  --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
+  --#{$prefix}accordion-btn-active-icon: #{escape-svg(
+      $accordion-button-active-icon
+    )};
+  --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
+  --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
+  --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
+  --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
+  --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
+  --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
+  // scss-docs-end accordion-css-vars
+}
+
+.accordion-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--#{$prefix}accordion-btn-padding-y)
+    var(--#{$prefix}accordion-btn-padding-x);
+  @include font-size($font-size-base);
+  color: var(--#{$prefix}accordion-btn-color);
+  text-align: left; // Reset button style
+  background-color: var(--#{$prefix}accordion-btn-bg);
+  border: 0;
+  @include border-radius(0);
+  overflow-anchor: none;
+  @include transition(var(--#{$prefix}accordion-transition));
+
+  &:not(.collapsed) {
+    color: var(--#{$prefix}accordion-active-color);
+    background-color: var(--#{$prefix}accordion-active-bg);
+    box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0
+      var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
+
+    &::after {
+      background-image: var(--#{$prefix}accordion-btn-active-icon);
+      transform: var(--#{$prefix}accordion-btn-icon-transform);
+    }
+  }
+
+  // Accordion icon
+  &::after {
+    flex-shrink: 0;
+    width: var(--#{$prefix}accordion-btn-icon-width);
+    height: var(--#{$prefix}accordion-btn-icon-width);
+    margin-left: auto;
+    content: '';
+    background-image: var(--#{$prefix}accordion-btn-icon);
+    background-repeat: no-repeat;
+    background-size: var(--#{$prefix}accordion-btn-icon-width);
+    @include transition(var(--#{$prefix}accordion-btn-icon-transition));
+  }
+
+  &:hover {
+    z-index: 2;
+  }
+
+  &:focus {
+    z-index: 3;
+    border-color: var(--#{$prefix}accordion-btn-focus-border-color);
+    outline: 0;
+    box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+  }
+}
+
+.accordion-header {
+  margin-bottom: 0;
+}
+
+.accordion-item {
+  color: var(--#{$prefix}accordion-color);
+  background-color: var(--#{$prefix}accordion-bg);
+  border: var(--#{$prefix}accordion-border-width) solid
+    var(--#{$prefix}accordion-border-color);
+
+  &:first-of-type {
+    @include border-top-radius(var(--#{$prefix}accordion-border-radius));
+
+    .accordion-button {
+      @include border-top-radius(
+        var(--#{$prefix}accordion-inner-border-radius)
+      );
+    }
+  }
+
+  &:not(:first-of-type) {
+    border-top: 0;
+  }
+
+  // Only set a border-radius on the last item if the accordion is collapsed
+  &:last-of-type {
+    @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+
+    .accordion-button {
+      &.collapsed {
+        @include border-bottom-radius(
+          var(--#{$prefix}accordion-inner-border-radius)
+        );
+      }
+    }
+
+    .accordion-collapse {
+      @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+    }
+  }
+}
+
+.accordion-body {
+  padding: var(--#{$prefix}accordion-body-padding-y)
+    var(--#{$prefix}accordion-body-padding-x);
+}
+
+// Flush accordion items
+//
+// Remove borders and border-radius to keep accordion items edge-to-edge.
+
+.accordion-flush {
+  .accordion-collapse {
+    border-width: 0;
+  }
+
+  .accordion-item {
+    border-right: 0;
+    border-left: 0;
+    @include border-radius(0);
+
+    &:first-child {
+      border-top: 0;
+    }
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    .accordion-button {
+      &,
+      &.collapsed {
+        @include border-radius(0);
+      }
+    }
+  }
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .accordion-button::after {
+      --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
+      --#{$prefix}accordion-btn-active-icon: #{escape-svg(
+          $accordion-button-active-icon-dark
+        )};
+    }
+  }
+}