Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@FarhannDev
FarhannDev committed Oct 29, 2023
1 parent 05eb8f8 commit cbc1e01
Show file tree
Hide file tree
Showing 37 changed files with 2,264 additions and 590 deletions.
3 changes: 3 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,6 @@ logs
.env
.env.*
!.env.example


sw.*
4 changes: 2 additions & 2 deletions api_test.rest
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
###
GET https://smartnation.id/wp-json/wp/v2/categories/148
GET http://localhost:3000/api/v1/articles

###
GET http://localhost:3000/api/categories

###
GET http://localhost:3000/api/posts
GET http://localhost:3000/api/posts/smart-city-standar-nasional-indonesia-sni-untuk-kota-cerdas
2 changes: 1 addition & 1 deletion components/HeadingTitle.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
h1 {
color: #D71149;
font-family: Poppins;
font-size: 20px;
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: 120%;
Expand Down
85 changes: 85 additions & 0 deletions components/NewsFeedCardItem.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<script lang="ts" setup>
import { PostsDataType } from '~/utils/data/getInitialPostsData';
const props = defineProps({
limits: { type: Boolean },
limitsStart: { type: Number },
limitsEnd: { type: Number },
categoryId: { type: Number }
})
const { data: posts } = await useFetch('/api/posts', {
transform: (posts: PostsDataType) => {
return props.limits ? posts.sort((a, b) => a.date_gmt.toString().localeCompare(b.date_gmt.toString())).slice(props.limitsStart, props.limitsEnd)
: props.categoryId ?
posts.filter(post => post.categories.find(categories => categories === props.categoryId)).sort((a, b) => a.date_gmt.toString().localeCompare(b.date_gmt.toString())).slice(props.limitsStart, props.limitsEnd)
: posts.sort((a, b) => a.date_gmt.toString().localeCompare(b.date_gmt.toString()))
}
})
</script>

<template>
<div class="row justify-content-start g-3">
<div v-if="posts" v-for="post in posts" :key="post.id" class="col-xl-6 col-lg-6 col-md-6">
<div class="card border-0 rounded-0 mb-3">
<NuxtLink :to="`/${post.slug}`" :aria-label="`Baca Selengkapnya ${post.title.rendered}`">
<NuxtImg :class="'card-img-top img-fluid rounded'" :src="post.featured_media" :height="253" loading="lazy"
:alt="post.title.rendered" />
</NuxtLink>
<div class="card-body px-0 mx-0">
<div class="d-flex flex-wrap mb-2">
<span class="article-timestamp">
<BootstrapIcon name="clock" class="article-timestamp-icon" />
{{ useTimestamps(post.date_gmt) }}
</span>
</div>
<NuxtLink :to="`/${post.slug}`" :aria-label="`Baca Selengkapnya ${post.title.rendered}`"
:class="'card-title text-start lh-base link-offset-2 link-underline link-underline-opacity-0 article-title'">
{{
post.title.rendered.length >= 80
? `${post.title.rendered.substring(0, 80)}...`
: post.title.rendered
}}
</NuxtLink>
</div>
</div>
</div>
</div>
</template>

<style lang="css" scoped>
.card {
background-color: transparent;
}
.article-title {
color: #fff;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%;
transition: ease 300ms;
}
.article-title:hover {
color: #d1d1d1;
}
.article-timestamp-icon {
font-size: 12px;
}
.article-timestamp {
color: var(--font-400, #fff);
/* Font/Caption Reguler */
font-family: Poppins;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 120%;
/* 12px */
}
</style>
13 changes: 1 addition & 12 deletions components/Search.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
<script lang="ts" setup>
import { Router } from '#vue-router';
import { PostsDataType } from '~/utils/data/getInitialPostsData';
import axios from 'axios';
const route: Router = useRouter();
// initial values
const searchQuery: globalThis.Ref<string> = ref("");
Expand All @@ -15,13 +12,7 @@ const onSearchHandler = () => {
searchQuery.value = ''
};
const results: globalThis.Ref<PostsDataType> = ref([])
onBeforeMount(() => {
return axios.get('/api/posts')
.then(response => results.value.push(...response.data))
.catch(error => console.log(error))
});
</script>

Expand All @@ -33,9 +24,7 @@ onBeforeMount(() => {
</form>


<SearchResults :search="searchQuery" :results="results.filter(post => post.title.rendered.toLowerCase().includes(searchQuery.toLowerCase()) ||
post.content.rendered.toLowerCase().includes(searchQuery.toLowerCase())
).sort((a, b) => b.modified_gmt.toString().localeCompare(a.modified_gmt.toString())).slice(0, 5)" />
<SearchResults :search="searchQuery" />
</div>
</template>

Expand Down
39 changes: 20 additions & 19 deletions components/articles/ArticleCardBackground.vue
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,21 @@
<script lang="ts" setup>
import { PropType } from 'vue';
interface Posts {
id: number | string;
slug: string;
date_gmt: string;
modified_gmt: string;
status: string;
categories: Array<number>;
tags: Array<number>;
author: number;
featured_media: string;
comment_status: string;
title: { rendered: string };
excerpt: { rendered: string };
content: { rendered: string };
}
import { PostsDataType } from '~/utils/data/getInitialPostsData';
const props = defineProps({
limits: { type: Boolean },
limitsStart: { type: Number },
limitsEnd: { type: Number },
categoryId: { type: Number }
})
type PostsDataType = Posts[];
const { data: posts } = await useFetch('/api/posts', {
transform: (posts: PostsDataType) => {
return posts.filter(post => post.categories.find(category => category === props.categoryId))
.sort((a, b) => b.date_gmt.toString().localeCompare(a.date_gmt.toString()))
.slice(props.limitsStart, props.limitsEnd)
const props = defineProps({ posts: { type: Object as PropType<PostsDataType> } })
}
})
</script>

Expand Down Expand Up @@ -112,16 +108,19 @@ const props = defineProps({ posts: { type: Object as PropType<PostsDataType> } }
top: 50% !important;
}
}
@media (max-width: 768px) {
.figure .figure-caption {
top: 60%;
}
}
@media (min-width: 960px) {
.figure .figure-caption {
top: 70% !important;
}
}
/* @media (max-width: 960px) {
.figure .figure-caption {
top: 50% !important;
Expand All @@ -133,6 +132,7 @@ const props = defineProps({ posts: { type: Object as PropType<PostsDataType> } }
top: 45% !important;
}
}
/* @media (max-width: 1200px) {
.figure .figure-caption {
top: 50% !important;
Expand All @@ -144,6 +144,7 @@ const props = defineProps({ posts: { type: Object as PropType<PostsDataType> } }
top: 50% !important;
}
}
/* @media (max-width: 1400px) {
.figure .figure-caption {
top: 50% !important;
Expand Down
37 changes: 12 additions & 25 deletions components/articles/ArticleListSingleColumn.vue
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,27 @@

<script lang="ts" setup>
import { PropType } from "vue"
interface Posts {
id: number | string;
slug: string;
date_gmt: string;
modified_gmt: string;
status: string;
categories: Array<number>;
tags: Array<number>;
author: number;
featured_media: string;
comment_status: string;
title: { rendered: string };
excerpt: { rendered: string };
content: { rendered: string };
}
type PostsDataType = Posts[];
import { PostsDataType } from "~/utils/data/getInitialPostsData";
const props = defineProps({
posts: { type: Object as PropType<PostsDataType> },
// posts: { type: Object as PropType<PostsDataType> },
isBackground: { type: Boolean },
isDescription: { type: Boolean, default: true }
})
const { data: posts, pending, error } = await useFetch('/api/posts', {
transform: (posts: PostsDataType) => {
return posts.sort((a, b) => b.date_gmt.toString().localeCompare(a.date_gmt.toString()))
.slice(0, 1)
}
})
</script>

<template>
<article class="d-grid gap-2 article-list-item">
<div v-for="post in posts" :key="post.id" class="card border-0 rounded-0 mb-3">

<NuxtLink :to="`/articles/${post.slug}`" :aria-label="`Baca Selengkapnya ${post.title.rendered}`">
<NuxtLink :to="`/${post.slug}`" :aria-label="`Baca Selengkapnya ${post.title.rendered}`">
<NuxtImg :class="'card-img-top img-fluid article-thumbnail'" :src="post.featured_media" :height="253"
loading="lazy" :alt="post.title.rendered" format="webp" />
</NuxtLink>
Expand All @@ -46,7 +33,7 @@ const props = defineProps({
useTimestamps(post.date_gmt) }}
</span>
</div>
<NuxtLink :to="`/articles/${post.slug}`" :aria-label="`Baca Selengkapnya ${post.title.rendered}`"
<NuxtLink :to="`/${post.slug}`" :aria-label="`Baca Selengkapnya ${post.title.rendered}`"
:class="`card-title text-start text-wrap lh-base link-offset-2 link-underline link-underline-opacity-0 ${isBackground ? 'article-title__background' : 'article-title'} `">
{{ post.title.rendered.length >= 80
? `${post.title.rendered.substring(0, 80)}...`
Expand All @@ -56,8 +43,8 @@ const props = defineProps({

<div v-show="isDescription"
:class="`card-text text-start lh-base ${isBackground ? 'article-desc__background' : 'article-desc'} pt-2`"
v-html="post.excerpt.rendered.length >= 250
? `${post.excerpt.rendered.substring(0, 250)}...`
v-html="post.excerpt.rendered.length >= 150
? `${post.excerpt.rendered.substring(0, 150)}...`
: post.excerpt.rendered
"> </div>

Expand Down
33 changes: 13 additions & 20 deletions components/articles/ArticleListSingleVerticalColumn.vue
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,34 @@
<script lang="ts" setup>
import { PropType } from "vue"
interface Posts {
id: number | string;
slug: string;
date_gmt: string;
modified_gmt: string;
status: string;
categories: Array<number>;
tags: Array<number>;
author: number;
featured_media: string;
comment_status: string;
title: { rendered: string };
excerpt: { rendered: string };
content: { rendered: string };
}
import { PostsDataType } from "~/utils/data/getInitialPostsData";
const props = defineProps({ categoryId: { type: Number } })
const { data: posts } = await useFetch('/api/posts', {
transform: (posts: PostsDataType) => {
return posts.filter(post => post.categories.find(category => category === props.categoryId))
.sort((a, b) => b.date_gmt.toString().localeCompare(a.date_gmt.toString()))
.slice(0, 5)
}
})
type PostsDataType = Posts[];
const props = defineProps({ posts: { type: Object as PropType<PostsDataType> } })
</script>

<template>
<article class="d-grid gap-2 article-list-item">
<div v-for="post in posts" :key="post.id" class="card border-0 rounded-0 mb-3">
<div class="row justify-content-start align-items-start g-0">
<div class="col-lg-6 col-md-6">
<NuxtLink :to="`/articles/${post.slug}`" :aria-label="`Baca Selengkapnya ${post.title.rendered}`">
<NuxtLink :to="`/${post.slug}`" :aria-label="`Baca Selengkapnya ${post.title.rendered}`">
<NuxtImg :class="'card-img-top img-fluid rounded'" :src="post.featured_media" :height="253" loading="lazy"
:alt="post.title.rendered" />
</NuxtLink>
</div>

<div class="col-lg-6 col-md-6">
<div class="card-body px-0 mx-0 px-md-2 mx-md-2 ">
<NuxtLink :to="`/articles/${post.slug}`" :aria-label="`Baca Selengkapnya ${post.title.rendered}`"
<NuxtLink :to="`/${post.slug}`" :aria-label="`Baca Selengkapnya ${post.title.rendered}`"
:class="'article-title lh-base link-offset-2 link-underline link-underline-opacity-0 '">
{{ post.title.rendered.length >= 80
? `${post.title.rendered.substring(0, 80)}...`
Expand Down
Loading

0 comments on commit cbc1e01

Please sign in to comment.