home.hbs

{{!< default}}
{{#get "posts" filter="tag:news" limit="4"}}
	<section id="featured" class="splide">
		<div class="splide__track">
			<ul class="splide__list">
				{{#foreach posts}}
					<li class="splide__slide">
						<a href="{{url}}">
							{{#if feature_image}}
								{{#if @first }}
								<picture>
									<source srcset="{{feature_image}}.webp?webp=1&width=640" type="image/webp" width="640">
									<img src="{{feature_image}}?width=640" alt="{{title}} feature image" width="640">
								</picture>
								{{else}}
								<picture>
									<source data-srcset="{{feature_image}}.webp?webp=1&width=640" type="image/webp" width="640">
									<img data-src="{{feature_image}}?width=640" class="lozad" alt="{{title}} feature image" width="640">
								</picture>
								{{/if}}
							{{else}}
								<img data-src="{{asset "logo/icon_blue.svg"}}" class="lozad" alt="{{title}} feature image" width="602" height="400">
							{{/if}}
							<div class="title">
								<p>{{date published_at format="YYYY年M月D日"}}</p>
								<h1>{{title}}</h1>
							</div>
						</a>
					</li>
				{{/foreach}}
			</ul>
		</div>
	</section>
{{/get}}
<section class="about-trap">
	<h1>traPについて</h1>
	<h2>『デジタル創作<wbr>同好会traP』は、<br>東京科学大学で<wbr>活動する<wbr>デジタル創作・<wbr>プログラミング系<wbr>サークルです。</h2>
	<h3>アプリ・ゲームの制作を中心に、音楽（DTM）、グラフィック（イラスト、3DCG、ドット絵、動画）などの創作活動に加え、Webインフラや競技プログラミング・サイバーセキュリティ（CTF）、機械学習（Kaggle）などに関する活動も行っています。</h3>
	<a href="/about/" class="readmore">もっと詳しく！</a>
</section>
<section class="pickup">
	<h1>活動ピックアップ</h1>
	<div class="pickup-series">
		<h2><a href="/tag/works/">プロジェクト</a></h2>
		<div class="pickup-entries-wrapper">
			<div class="pickup-entries">
				{{#get "posts" filter="tag:hash-pickups-projects" limit="3"}}
					{{> pickups}}
				{{/get}}
			</div>
		</div>
	</div>
	<div class="pickup-series">
		<h2><a href="/algorithm/">アルゴリズム班</a></h2>
		<div class="pickup-entries-wrapper">
			<div class="pickup-entries">
				{{#get "posts" filter="tag:hash-pickups-algorithm" limit="3"}}
					{{> pickups}}
				{{/get}}
			</div>
		</div>
	</div>
	<div class="pickup-series">
		<h2><a href="/graphics/">グラフィック班</a></h2>
		<div class="pickup-entries-wrapper">
			<div class="pickup-entries">
				{{#get "posts" filter="tag:hash-pickups-graphics" limit="3"}}
					{{> pickups}}
				{{/get}}
			</div>
		</div>
	</div>
	<div class="pickup-series">
		<h2><a href="/game/">ゲーム班</a></h2>
		<div class="pickup-entries-wrapper">
			<div class="pickup-entries">
				{{#get "posts" filter="tag:hash-pickups-game" limit="3"}}
					{{> pickups}}
				{{/get}}
			</div>
		</div>
	</div>
	<div class="pickup-series">
		<h2><a href="/sound/">サウンド班</a></h2>
		<div class="pickup-entries-wrapper">
			<div class="pickup-entries">
				{{#get "posts" filter="tag:hash-pickups-sound" limit="3"}}
					{{> pickups}}
				{{/get}}
			</div>
		</div>
	</div>
	<div class="pickup-series">
		<h2><a href="/ctf/">CTF班</a></h2>
		<div class="pickup-entries-wrapper">
			<div class="pickup-entries">
				{{#get "posts" filter="tag:hash-pickups-ctf" limit="3"}}
					{{> pickups}}
				{{/get}}
			</div>
		</div>
	</div>
	<div class="pickup-series">
		<h2><a href="/sysad/">SysAd班</a></h2>
		<div class="pickup-entries-wrapper">
			<div class="pickup-entries">
				{{#get "posts" filter="tag:hash-pickups-sysad" limit="3"}}
					{{> pickups}}
				{{/get}}
			</div>
		</div>
	</div>
	<div class="pickup-series">
		<h2><a href="/kaggle/">Kaggle班</a></h2>
		<div class="pickup-entries-wrapper">
			<div class="pickup-entries">
				{{#get "posts" filter="tag:hash-pickups-kaggle" limit="3"}}
					{{> pickups}}
				{{/get}}
			</div>
		</div>
	</div>
</section>
<section class="postlist">
	<h1>ブログへの投稿</h1>
	<div class="articles">
		{{#get "posts" include="authors" limit="6"}}
			{{#foreach posts}}
				{{> post-link}}
			{{/foreach}}
		{{/get}}
	</div>
	<div class="readmore-container">
		<a href="/page/1/" class="readmore">記事一覧へ</a>
	</div>
</section>
<section class="news">
	<h1>最新情報</h1>
	<div class="news-elements">
		<div class="headline">
			{{#get "posts" filter="tag:news" limit="6"}}
				{{#foreach posts}}
					<a href="{{url}}" class="headline-entry">
					{{#if feature_image}}
						<picture class="lozad" data-alt="{{title}} feature image">
							<source srcset="{{feature_image}}.webp?webp=1&width=320" type="image/webp">
							<source srcset="{{feature_image}}?width=320">
						</picture>
					{{else}}
						<img class="lozad" data-src="{{asset "logo/icon_blue.svg"}}"  alt="{{title}} feature image" width="602" height="400">
					{{/if}}
						<div class="headline-text">
							<small>{{date published_at format="YYYY年M月D日"}}</small>
							<span>{{title}}</span>
						</div>
					</a>
				{{/foreach}}
			{{/get}}
		</div>
		<div id="lazy-load-twitter">
			<a class="twitter-timeline" data-height="500" href="https://twitter.com/traPtitech">Tweets by traPtitech</a>
		</div>
	</div>
</section>
<script type="application/ld+json">
{
	"@context":"https://schema.org",
	"@type":"ItemList",
	"itemListElement":[
{{#get "posts" filter="tag:news" limit="4"}}
	{{#foreach posts}}
		{
			"@type":"ListItem",
			"position": "{{ @number }}",
			"url":"{{ url }}"
		}{{#unless @last}},{{/unless}}
	{{/foreach}}
{{/get}}
	]
}
</script>