added PageTop component, markdown styles, white background on logo svg, and documentation comments
This commit is contained in:
167
pages/index.vue
167
pages/index.vue
@@ -1,10 +1,165 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { marked } from "marked";
|
||||
import type { EntryType } from "#imports";
|
||||
|
||||
const { data } = await useFetch("/api/getNewsList");
|
||||
|
||||
onMounted(() => {
|
||||
const twitterScript = document.createElement("script");
|
||||
const twitterDivision = document.getElementById("twitter");
|
||||
twitterScript.type = "text/javascript";
|
||||
twitterScript.src = "https://platform.twitter.com/widgets.js";
|
||||
twitterScript.async = true;
|
||||
twitterDivision?.appendChild(twitterScript);
|
||||
});
|
||||
|
||||
useSeoMeta(
|
||||
generateSeoMeta(
|
||||
"ホーム",
|
||||
"岐阜高専宇宙工学研究会のホームページ",
|
||||
"/sera-logo-text.svg"
|
||||
)
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
Page: index
|
||||
<NewsList />
|
||||
</div>
|
||||
<main>
|
||||
<div id="news-board">
|
||||
<h3>News</h3>
|
||||
<div></div>
|
||||
<ul id="news-list">
|
||||
<li v-for="entry in data" :key="entry.date as number">
|
||||
<small>
|
||||
{{
|
||||
new Date(entry.date as number).toLocaleDateString(
|
||||
"ja-JP",
|
||||
{ dateStyle: "medium" }
|
||||
)
|
||||
}}
|
||||
</small>
|
||||
<div class="new-label" v-if="data?.indexOf(entry) < 2">
|
||||
NEW!
|
||||
</div>
|
||||
<article
|
||||
v-html="marked.parse(entry.cardContent as string)"
|
||||
></article>
|
||||
<NuxtLink
|
||||
v-if="entry.entryType === EntryType.Article"
|
||||
:to="entry.linkPath as string"
|
||||
>
|
||||
<Icon
|
||||
name="material-symbols:keyboard-double-arrow-right-rounded"
|
||||
/>
|
||||
Read More
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="twitter">
|
||||
<a
|
||||
class="twitter-timeline"
|
||||
data-lang="ja"
|
||||
data-dnt="true"
|
||||
data-align="center"
|
||||
data-theme="dark"
|
||||
:data-height="16 * 70"
|
||||
:data-width="16 * 33"
|
||||
href="https://twitter.com/SERA_NITGC?ref_src=twsrc%5Etfw"
|
||||
>Tweets by SERA_NITGC</a
|
||||
>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
main {
|
||||
display: grid;
|
||||
grid: auto-flow / 4fr 1fr;
|
||||
}
|
||||
|
||||
#news-board {
|
||||
max-width: 60rem;
|
||||
max-height: 50rem;
|
||||
width: fit-content;
|
||||
place-self: center;
|
||||
overflow-y: scroll;
|
||||
border: var(--neptune1) solid 3px;
|
||||
box-shadow: 10px 5px 5px var(--starlight1);
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: repeat(2, auto);
|
||||
& > h3 {
|
||||
place-self: center;
|
||||
}
|
||||
& > div {
|
||||
width: 90%;
|
||||
place-self: center;
|
||||
border: var(--neptune1) solid 1px;
|
||||
}
|
||||
}
|
||||
|
||||
#news-list {
|
||||
list-style: none;
|
||||
padding: 0 0.75rem;
|
||||
& li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: var(--starlight1) solid 2px;
|
||||
}
|
||||
& li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
& li > * {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
& li > *:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
& li > *:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
& li div {
|
||||
background-color: var(--sun2);
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
& li a {
|
||||
text-decoration: none;
|
||||
color: var(--neptune1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
& li a span {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: 0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
#twitter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
& > .twitter-timeline-rendered {
|
||||
display: unset;
|
||||
width: unset;
|
||||
max-width: unset;
|
||||
margin: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
main {
|
||||
width: calc(100vw - 2rem);
|
||||
place-self: center;
|
||||
place-items: center;
|
||||
grid: auto-flow / 1fr;
|
||||
}
|
||||
|
||||
#news-board {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#twitter {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,80 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { marked } from "marked";
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const { data } = await useFetch("/api/getArticle", {
|
||||
query: { name: route.params.article },
|
||||
});
|
||||
|
||||
if (data.value === undefined || data.value === null) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: "Article Not Found :(",
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const article = document.getElementById("article");
|
||||
const articleTitle = article?.getElementsByTagName("h1")[0];
|
||||
const postedDate = new Date(data.value?.date).toLocaleDateString(
|
||||
"ja-JP-u-ca-japanese",
|
||||
{ dateStyle: "medium" }
|
||||
);
|
||||
const postedDateElement = document.createElement("small");
|
||||
postedDateElement.textContent = "掲載日： " + postedDate;
|
||||
articleTitle?.insertAdjacentElement("afterend", postedDateElement);
|
||||
const cardContentConversion = document.createElement("div");
|
||||
cardContentConversion.innerHTML = marked.parse(
|
||||
data.value?.cardContent as string
|
||||
) as string;
|
||||
useSeoMeta(
|
||||
generateSeoMeta(
|
||||
articleTitle?.innerText,
|
||||
cardContentConversion.innerText,
|
||||
data.value?.coverImagePath || "/sera-logo-text.svg",
|
||||
"article"
|
||||
)
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>Page: news/[article]</div>
|
||||
<main>
|
||||
<img :src="(data?.coverImagePath as string) || '/sera-logo-text.svg'" />
|
||||
<div
|
||||
id="article"
|
||||
class="markdown"
|
||||
v-html="marked.parse(data?.article as string)"
|
||||
></div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
main {
|
||||
display: grid;
|
||||
width: 50%;
|
||||
height: fit-content;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
main > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main > img {
|
||||
width: 42rem;
|
||||
place-self: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
main {
|
||||
width: calc(100% - 6rem);
|
||||
padding: 0 3rem;
|
||||
}
|
||||
main > img {
|
||||
width: 70vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,46 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
const { data } = await useFetch("/api/getNewsList");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>Page: news/index</div>
|
||||
<PageTop
|
||||
:text="'News'"
|
||||
:image-path="'https://www.gifu-nct.ac.jp/gakuseikai/club/sera/img/subtop/sub_top_sample.jpg'"
|
||||
/>
|
||||
<main>
|
||||
<div class="news-list">
|
||||
<NewsCard
|
||||
v-for="article in data"
|
||||
:key="article.date as number"
|
||||
:news-entry="article"
|
||||
:is-new="data?.indexOf(article) < 2"
|
||||
></NewsCard>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.news-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 15rem);
|
||||
gap: 20px;
|
||||
justify-self: center;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.news-list > div:has(a) {
|
||||
transition: all 0.3s ease-in-out;
|
||||
&:hover {
|
||||
scale: 105%;
|
||||
filter: grayscale(25%);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.news-list {
|
||||
grid-auto-flow: row;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user