Merge pull request #74 from eSolia/dev

Golive for news separation
eSolia · Oct 10, 2024 · fd1fa6e · fd1fa6e
2 parents 92db5c1 + d437192
commit fd1fa6e
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 59 deletions.
diff --git a/src/_data.yml b/src/_data.yml
@@ -17,12 +17,10 @@ menu:
     url: /#approach
   - text: Company
     url: /#company
-  - text: News
-    url: /news/
-  # - text: News Release
-  #   url: /newsrelease/
-  # - text: Media
-  #   url: /media/
+  - text: News Release
+    url: /news/#jac-news-releases
+  - text: Media
+    url: /news/#media
   - text: Our People
     url: /team/
   - text: Inquiries
@@ -67,12 +65,10 @@ en:
       url: /en/#approach
     - text: Company
       url: /en/#company
-    - text: News
-      url: /en/news/
-    # - text: News Release
-    #   url: /en/newsrelease/
-    # - text: Media
-    #   url: /en/media/
+    - text: News Release
+      url: /en/news/#jac-news-releases
+    - text: Media
+      url: /en/news/#media
     - text: Our People
       url: /en/team/
     - text: Inquiries

diff --git a/src/_data/decap_cms.yml b/src/_data/decap_cms.yml
@@ -53,7 +53,8 @@ collections:
       - label: Tags
         name: tags
         widget: list
-        required: false
+        required: true
+        hint: Enter the tag for the news item (News or Media), as half-pitch English. 
       - label: Draft
         name: draft
         widget: boolean

diff --git a/src/_includes/layouts/index.vto b/src/_includes/layouts/index.vto
@@ -48,7 +48,7 @@ containerClass: index
     <h2 class="new-title">{{ news.title }}</h2>
     <div class="desc">
       <ul class="news-list" id="news">
-        {{ for item of search.pages(`type=news lang=${lang}`, "date=desc", 5) }}
+        {{ for item of search.pages(`type=news lang=${lang}`, "date=desc", 8) }}
         <li>
           <time class="txt-bl"><strong>{{ item.date |> date(undefined, lang) }}</strong></time>
           {{ if item.external_link }}
@@ -67,8 +67,6 @@ containerClass: index
       </a>
       {{ /for }}
 
-      {{for item of newslinks }}{{item.text}}{{/for}} 
-
     </div>
   </div>
 </section>

diff --git a/src/_includes/layouts/news_list.vto b/src/_includes/layouts/news_list.vto
@@ -2,34 +2,92 @@
 layout: ./base.vto
 containerClass: news
 ---
-<section class="news">
-  <div class="inner">
-    <h1 class="new-title">{{ title }}</h1>
-
-    <ul class="news-list" id="news">
-      {{ for item of results }}
-      <li>
-        <time class="txt-bl"><strong>{{ item.date |> date(undefined, lang) }}</strong></time>
-        {{ if item.external_link }}
-          <p><a href="{{ item.external_link }}" target="_blank">{{ item.title }}</a></p>
-        {{ else }}
-          <p><a href="{{ item.url }}">{{ item.title }}</a></p>
+
+<h1 class="new-title is-news-list">{{ title }}</h1>
+
+
+  <section class="tab" id="media">
+    <nav>
+      <a href="#all-news">All News</a>
+      <a href="#jac-news-releases">News Releases</a>
+      <a href="#media" class="active">Media</a>
+    </nav>
+    <section class="news">
+      <div class="inner">
+        <ul class="news-list" id="news">
+        {{ for item of search.pages(`type=news Media lang=${lang}`, "date=desc") }}
+          <li>
+            <time class="txt-bl"><strong>{{ item.date |> date(undefined, lang) }}</strong></time>
+            {{ if item.external_link }}
+              <p><a href="{{ item.external_link }}" target="_blank">{{ item.title }}</a></p>
+            {{ else }}
+              <p><a href="{{ item.url }}">{{ item.title }}</a></p>
+            {{ /if }}
+          </li>
+        {{ /for }}
+        </ul>
+      </div>
+    </section>
+  </section>
+  <section class="tab" id="jac-news-releases">
+    <nav>
+      <a href="#all-news">All News</a>
+      <a href="#jac-news-releases" class="active">News Releases</a>
+      <a href="#media">Media</a>
+    </nav>
+
+    <section class="news">
+      <div class="inner">
+        <ul class="news-list" id="news">
+        {{ for item of search.pages(`type=news News lang=${lang}`, "date=desc") }}
+          <li>
+            <time class="txt-bl"><strong>{{ item.date |> date(undefined, lang) }}</strong></time>
+            {{ if item.external_link }}
+              <p><a href="{{ item.external_link }}" target="_blank">{{ item.title }}</a></p>
+            {{ else }}
+              <p><a href="{{ item.url }}">{{ item.title }}</a></p>
+            {{ /if }}
+          </li>
+        {{ /for }}
+        </ul>
+      </div>
+    </section>
+
+
+  </section>
+  <section class="tab" id="all-news">
+    <nav>
+      <a href="#all-news" class="active">All News</a>
+      <a href="#jac-news-releases">News Releases</a>
+      <a href="#media">Media</a>
+    </nav>
+    <section class="news">
+      <div class="inner">
+        <ul class="news-list" id="news">
+          {{ for item of results }}
+          <li>
+            <time class="txt-bl"><strong>{{ item.date |> date(undefined, lang) }}</strong></time>
+            {{ if item.external_link }}
+              <p><a href="{{ item.external_link }}" target="_blank">{{ item.title }}</a></p>
+            {{ else }}
+              <p><a href="{{ item.url }}">{{ item.title }}</a></p>
+            {{ /if }}
+          </li>
+          {{ /for }}
+        </ul>
+
+        {{ if pagination.previous }}
+          <a class="link" href="{{ pagination.previous }}">
+            Previous page
+          </a>
+        {{ /if }}
+
+        {{ if pagination.next }}
+          <a class="link" href="{{ pagination.next }}">
+            Next page
+            <div class="icon" role="image" aria-label="Right-facing arrow icon indicating a link to another page."><img src="/assets/img/icon_arrow.svg" alt="Right-facing arrow icon indicating a link to another page."></div>
+          </a>
         {{ /if }}
-      </li>
-      {{ /for }}
-    </ul>
-
-    {{ if pagination.previous }}
-      <a class="link" href="{{ pagination.previous }}">
-        Previous page
-      </a>
-    {{ /if }}
-
-    {{ if pagination.next }}
-      <a class="link" href="{{ pagination.next }}">
-        Next page
-        <div class="icon" role="image" aria-label="Right-facing arrow icon indicating a link to another page."><img src="/assets/img/icon_arrow.svg" alt="Right-facing arrow icon indicating a link to another page."></div>
-      </a>
-    {{ /if }}
-  </div>
-</section>
+      </div>
+    </section>
+  </section>
diff --git a/src/css/style.css b/src/css/style.css
@@ -432,7 +432,7 @@ a {
             }
       header .inner .main ul {
         display: flex;
-        gap: 30px;
+        gap: 27px;
         justify-content: center;
         align-items: center; }
         header .inner .main ul a {
@@ -722,7 +722,7 @@ a {
       position: absolute;
       transform: translate(0px, -50%); }
     header .inner .main ul {
-      gap: 30px; }
+      gap: 27px; }
   .container.index:before {
     height: 1090px;
     -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 390px), 0% 100%);
@@ -1326,6 +1326,16 @@ a {
   margin-top: .25em;
 }
 
+.new-title.is-news-list {
+  /* font-size: clamp(3rem, 2vw, 1.5rem) !important; */
+  text-align: center;
+  margin-top: 0;
+  margin-bottom: 1em;
+  position:relative;
+  line-height: 1.0;
+  color: #00236D;
+}
+
 .subtitle {
   font-family: 'Noto Sans JP', sans-serif;
   font-style: normal;
@@ -1433,4 +1443,53 @@ a {
     /* border-radius: 2%; */
     /* border: 1px solid lavender; */
   }
+}
+
+.tab {
+  display: none;
+}
+.tab:target {
+  display: block;
+}
+.tab:last-child {
+  display: block;
+}
+.tab:target ~ section.tab:last-child {
+  display: none;
+}
+.tab > nav > a.active {
+  color: darkorchid;
+  border-bottom-color: darkorchid;
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+/* Layout */
+.tab > * {
+  width:100%;
+  padding-top: 10px;
+  margin: 0;
+}
+.tab > nav {
+  padding: 0;
+  display: flex;
+}
+.tab > nav > a {
+  display: inline-block;
+  text-decoration: none;
+  color: gray;
+  border-bottom: 5px solid lightgray;
+  margin: 0;
+  padding: 10px;
+  font-size: 1.2em;
+}
+.tab > nav::before {
+  content: "";
+  width: 5px;
+  border-bottom: 5px solid lightgray;
+}
+.tab > nav::after {
+  content: "";
+  flex: 1;
+  border-bottom: 5px solid lightgray;
 }
diff --git a/src/en/index.yml b/src/en/index.yml
@@ -10,9 +10,13 @@ priority: 1
 
 news:
   title: News
-  link:
-    text: View more
-    url: /en/news/
+  links:
+    - text: All News
+      url: /en/news/#all-news
+    - text: News Releases
+      url: /en/news/#jac-news-releases
+    - text: Media
+      url: /en/news/#media
 
 lead: |
   <h2 class="new-title is-smaller">Japan Activation Capital</h2>

diff --git a/src/index.yml b/src/index.yml
@@ -8,14 +8,14 @@ metas:
 priority: 1
 
 news:
-  title: News
+  title: News & Media
   links:
     - text: 全てのニュース
-      url: /news/
-    # - text: ニュースリリース
-    #   url: /newsrelease/
-    # - text: メディア
-    #   url: /media/
+      url: /news/#all-news
+    - text: ニュースリリース
+      url: /news/#jac-news-releases
+    - text: メディア
+      url: /news/#media
 
 lead: |
   <h2 class="new-title is-smaller">Japan Activation Capital</h2>

diff --git a/src/news.page.ts b/src/news.page.ts
@@ -1,12 +1,12 @@
 export const layout = "layouts/news_list.vto";
 
 export const ja = {
-  title: "ニュース一覧",
+  title: "News & Media",
   description: "社内ニュースページや外部ニュースへのリンクを含む、ジャパン・アクティベーション・キャピタル ニュース 一覧",
 };
 
 export const en = {
-  title: "News Listing",
+  title: "News & Media",
   description: "Japan Activation Capital News List with internal news pages and links to external news pages.",
 };