kamilniemczycki/kamilcraft.com
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

- vite + markdown-it

Browse Source
This commit is contained in:
Kamil Niemczycki 2023-07-30 19:18:22 +02:00
parent cbaca47fb2
commit 8054be6846
Signed by: kamilniemczycki
GPG Key ID: 04D4E2012F969213
25 changed files with 1531 additions and 18299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development Normal file
View File

@ -0,0 +1,4 @@
NODE_MODE=development
VITE_APP_TITLE=kamilcraft.com
VITE_APP_BASE_URL=https://localhost:5173
VITE_APP_API_URL=http://localhost/v1

6
.env.example
View File

@ -1,3 +1,5 @@
NODE_MODE=local
VUE_APP_TITLE=kamilcraft.com VUE_APP_TITLE=kamilcraft.com
VUE_APP_BASE_URL=http://127.0.0.1 VUE_APP_BASE_URL=http://localhost:5173
VUE_APP_API_URL=https://api.kamilcraft.com VUE_APP_API_URL=https://api.kamilcraft.com/v1
VITE_PORT=5173

4
.env.production Normal file
View File

@ -0,0 +1,4 @@
NODE_MODE=production
VITE_APP_TITLE=kamilcraft.com
VITE_APP_BASE_URL=https://kamilcraft.com
VITE_APP_API_URL=https://api.kamilcraft.com/v1

5
babel.config.js
View File

@ -1,5 +0,0 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

7
public/index.html → index.html
View File

@ -6,16 +6,13 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="icon" href="<%= VUE_APP_BASE_URL %>/favicon.ico"> <link rel="icon" href="/favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Thasadith&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Thasadith&display=swap" rel="stylesheet">
<title>KamilCraft.com</title> <title>KamilCraft.com</title>
</head> </head>
<body> <body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

19235
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

28
package.json
View File

@ -3,32 +3,28 @@
"version": "1.1.0", "version": "1.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "dev": "vite",
"build": "vue-cli-service build", "build": "vite build",
"lint": "vue-cli-service lint" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.2.1", "@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-brands-svg-icons": "^6.2.1", "@fortawesome/free-brands-svg-icons": "^6.4.0",
"@fortawesome/free-regular-svg-icons": "^6.2.1", "@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.2.1", "@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/vue-fontawesome": "^3.0.2", "@fortawesome/vue-fontawesome": "^3.0.3",
"core-js": "^3.26.1", "@vitejs/plugin-vue": "^4.2.3",
"marked": "^4.2.4", "vite": "^4.4.7",
"vue": "^3.2.45", "vue": "^3.3.4",
"vue-meta": "^2.4.0", "vue-meta": "^2.4.0",
"vue-router": "^4.1.6", "vue-router": "^4.2.4",
"vuex": "^4.1.0" "vuex": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.20.5",
"@babel/eslint-parser": "^7.19.1",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.13",
"eslint": "^8.29.0", "eslint": "^8.29.0",
"eslint-plugin-vue": "^9.8.0", "eslint-plugin-vue": "^9.8.0",
"markdown-it": "^13.0.1",
"postcss": "^8.4.20", "postcss": "^8.4.20",
"sass": "^1.56.2", "sass": "^1.56.2",
"sass-loader": "^13.2.0", "sass-loader": "^13.2.0",

4
src/App.vue
View File

@ -9,8 +9,8 @@
</template> </template>
<script setup> <script setup>
import SiteHeader from '@/components/SiteHeader' import SiteHeader from '@/components/SiteHeader.vue'
import FooterComponent from '@/components/FooterComponent' import FooterComponent from '@/components/FooterComponent.vue'
</script> </script>
<style lang="scss"> <style lang="scss">

72
src/components/SelectedProjects.vue
View File

@ -1,3 +1,32 @@
<script setup>
import { defineProps, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import BaseButton from '@/components/buttons/BaseButton.vue';
import Markdown from "@/components/markdowns/MarkdownShort.vue";
defineProps({
projects: {
type: Array,
default: () => []
}
})
const route = useRoute()
const router = useRouter()
const store = useStore()
onMounted(() => {
const header = {
title: route.meta.title,
description: [
'Witam Państwa na podstronie z moimi projektami!'
]
}
store.commit('setHeader', header)
})
</script>
<template> <template>
<section <section
id="projects" id="projects"
@ -31,10 +60,7 @@
{{ project.project_version }} {{ project.project_version }}
</p> </p>
</header> </header>
<p <Markdown :source="project.description" />
class="text-sm"
v-html="markdownToText(project)"
/>
</div> </div>
<div <div
class="project-button lg:flex lg:absolute lg:justify-center lg:items-center lg:left-0 lg:top-0 lg:w-full lg:h-full" class="project-button lg:flex lg:absolute lg:justify-center lg:items-center lg:left-0 lg:top-0 lg:w-full lg:h-full"
@ -55,43 +81,7 @@
</section> </section>
</template> </template>
<script setup> <style lang="scss">
import { defineProps, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import BaseButton from '@/components/buttons/BaseButton'
import { marked } from 'marked'
defineProps({
projects: {
type: Array,
default: () => []
}
})
const route = useRoute()
const router = useRouter()
const store = useStore()
onMounted(() => {
const header = {
title: route.meta.title,
description: [
'Witam Państwa na podstronie z moimi projektami!'
]
}
store.commit('setHeader', header)
})
function markdownToText (project) {
const projectText = marked.parse(project.description)
const nodeElement = document.createElement('div')
nodeElement.innerHTML = projectText
return nodeElement.querySelector('p').innerText.substr(0, 350)
}
</script>
<style lang="scss" scoped>
@import 'scss/media'; @import 'scss/media';
.grid-project { .grid-project {

2
src/components/SiteHeader.vue
View File

@ -27,7 +27,7 @@
import { computed } from 'vue' import { computed } from 'vue'
import { useStore } from 'vuex' import { useStore } from 'vuex'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import Navigation from '@/components/NavigationHeader' import Navigation from '@/components/NavigationHeader.vue'
const store = useStore() const store = useStore()
const route = useRoute() const route = useRoute()

20
src/components/markdowns/MarkdownDescription.vue Normal file
View File

@ -0,0 +1,20 @@
<script setup>
import MarkdownIt from 'markdown-it';
const markdown = new MarkdownIt();
const props = defineProps({
source: {
type: String,
required: true,
}
});
function render() {
return markdown.render(props.source);
}
</script>
<template>
<div v-html="render()" />
</template>

33
src/components/markdowns/MarkdownShort.vue Normal file
View File

@ -0,0 +1,33 @@
<script setup>
import MarkdownIt from 'markdown-it';
const markdown = new MarkdownIt();
const props = defineProps({
source: {
type: String,
required: true,
}
});
function render() {
const nodeChildElement = markdown.render(props.source);
const nodeElement = document.createElement('div');
nodeElement.innerHTML = nodeChildElement;
let length = 0;
let returnText = '';
nodeElement.querySelectorAll('p').forEach(value => {
if (length < 351) {
length += value.innerText.length;
returnText += value.innerText + ' ';
} else {
return;
}
});
return returnText.substring(0, 350).trim();
}
</script>
<template>
<p v-text="render()" />
</template>

29
src/components/sections/AboutSection.vue
View File

@ -1,3 +1,16 @@
<script setup>
import BaseButton from '@/components/buttons/BaseButton.vue'
import { useRouter } from 'vue-router';
const router = useRouter();
function scrollTo(id) {
document.querySelector(id).scrollIntoView({
behavior: 'smooth'
})
}
</script>
<template> <template>
<div class="bg-neutral-50"> <div class="bg-neutral-50">
<div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11"> <div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
@ -37,7 +50,7 @@
<div id="grid-photo"> <div id="grid-photo">
<figure> <figure>
<img <img
:src="`${publicPath}assets/me.jpg`" src="/assets/me.jpg"
class="mx-auto rounded-full object-cover w-[12.5rem] h-[12.5rem]" class="mx-auto rounded-full object-cover w-[12.5rem] h-[12.5rem]"
alt="Moje zdjęcie" alt="Moje zdjęcie"
> >
@ -48,20 +61,6 @@
</div> </div>
</template> </template>
<script setup>
import BaseButton from '@/components/buttons/BaseButton'
import { useRouter } from 'vue-router'
const router = useRouter()
const publicPath = process.env.VUE_APP_BASE_URL + '/'
function scrollTo(id) {
document.querySelector(id).scrollIntoView({
behavior: 'smooth'
})
}
</script>
<style lang="scss"> <style lang="scss">
#grid-columns { #grid-columns {
grid-template-columns: 1fr 1fr .8fr; grid-template-columns: 1fr 1fr .8fr;

9
src/components/sections/FavoriteProjects.vue
View File

@ -24,10 +24,11 @@
<script setup> <script setup>
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import Projects from '@/components/SelectedProjects' import Projects from '@/components/SelectedProjects.vue'
import GhostButton from '@/components/buttons/GhostButton' import GhostButton from '@/components/buttons/GhostButton.vue'
const router = useRouter() const router = useRouter()
const apiURL = import.meta.env.VITE_APP_API_URL
let select_projects = ref([]) let select_projects = ref([])
@ -36,7 +37,7 @@ onMounted(() => {
}) })
function loadProjectList() { function loadProjectList() {
fetch(process.env.VUE_APP_API_URL + '/projects?category=selected') fetch(apiURL + '/projects?category=selected')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
select_projects.value = data select_projects.value = data
@ -44,7 +45,7 @@ function loadProjectList() {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss">
@import "scss/default"; @import "scss/default";
.selected-projects { .selected-projects {

2
src/components/sections/contacts/MailContact.vue
View File

@ -103,7 +103,7 @@
</template> </template>
<script setup> <script setup>
import BaseButton from '@/components/buttons/BaseButton' import BaseButton from '@/components/buttons/BaseButton.vue'
import { ref, reactive, watch, computed } from 'vue' import { ref, reactive, watch, computed } from 'vue'
function emailValidate (mailObj) { function emailValidate (mailObj) {

41
src/main.js
View File

@ -1,27 +1,20 @@
import { createApp } from 'vue' import { createApp } from 'vue';
import App from '@/App.vue' import App from './App.vue';
import router from '@/router' import router from './router';
import { store } from '@/store' import { store } from './store';
// import VueMeta from 'vue-meta'
import '../scss/default.scss' import '../scss/default.scss';
import '../css/index.css' import '../css/index.css';
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons' import { fas } from '@fortawesome/free-solid-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons' import { fab } from '@fortawesome/free-brands-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons' import { far } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
library.add(fas, fab, far) library.add(fas, fab, far);
const app = createApp(App) createApp(App)
.component('FontAwesomeIcon', FontAwesomeIcon)
app.config.productionTip = false .use(router)
.use(store)
app.component('FontAwesomeIcon', FontAwesomeIcon) .mount('#app');
app.use(router)
app.use(store)
// app.use(VueMeta)
app.mount('#app')

13
src/router/index.js
View File

@ -1,10 +1,11 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/HomeView'
import About from '@/views/AboutView' const Home = () => import('@/views/HomeView.vue');
import Projects from '@/views/ProjectsView' const About = () => import('@/views/AboutView.vue');
import Project from '@/views/ProjectView' const Projects = () => import('@/views/ProjectsView.vue');
import Contact from '@/views/ContactView' const Project = () => import('@/views/ProjectView.vue');
import NotFound from '@/views/NotFound' const Contact = () => import('@/views/ContactView.vue');
const NotFound = () => import('@/views/NotFound.vue');
const mainTitle = 'kamilcraft.com' const mainTitle = 'kamilcraft.com'

8
src/store/index.js
View File

@ -1,4 +1,6 @@
import { createStore } from 'vuex' import { createStore } from 'vuex';
const apiURL = import.meta.env.VITE_APP_API_URL;
export const store = createStore({ export const store = createStore({
state: { state: {
@ -22,7 +24,7 @@ export const store = createStore({
}, },
actions: { actions: {
fetchProjects (store) { fetchProjects (store) {
return fetch(process.env.VUE_APP_API_URL + '/projects') return fetch(apiURL + '/projects')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
store.commit('setProjects', data) store.commit('setProjects', data)
@ -30,7 +32,7 @@ export const store = createStore({
}) })
}, },
fetchCategories (store) { fetchCategories (store) {
return fetch(process.env.VUE_APP_API_URL + '/categories') return fetch(apiURL + '/categories')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
store.commit('setCategories', data) store.commit('setCategories', data)

48
src/views/AboutView.vue
View File

@ -1,3 +1,25 @@
<script setup>
import { onMounted, onUnmounted } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
const store = useStore();
const route = useRoute();
onMounted(() => {
const header = {
title: route.meta.title,
description: 'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.',
}
store.commit('setHeader', header);
});
onUnmounted(() => {
store.commit('resetHeaderTitle');
store.commit('resetHeaderDescription');
});
</script>
<template> <template>
<section class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11"> <section class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
<p class="font-bold"> <p class="font-bold">
@ -20,7 +42,7 @@
<p> <p>
W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu: W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
<a <a
:href="publicPath + 'download/certyfikat-laravel.pdf'" href="/download/certyfikat-laravel.pdf"
class="text-gray-500 underline hover:text-kamilcraft-green hover:no-underline" class="text-gray-500 underline hover:text-kamilcraft-green hover:no-underline"
target="_blank" target="_blank"
rel="noopener nofollow noreferrer" rel="noopener nofollow noreferrer"
@ -42,27 +64,3 @@
</p> </p>
</section> </section>
</template> </template>
<script setup>
import { onMounted, onUnmounted } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
const publicPath = process.env.VUE_APP_BASE_URL + '/'
const store = useStore()
const route = useRoute()
onMounted(() => {
const header = {
title: route.meta.title,
description: 'Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.'
}
store.commit('setHeader', header)
})
onUnmounted(() => {
store.commit('resetHeaderTitle')
store.commit('resetHeaderDescription')
})
</script>

4
src/views/ContactView.vue
View File

@ -9,8 +9,8 @@
import { onMounted } from 'vue' import { onMounted } from 'vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { useStore } from 'vuex' import { useStore } from 'vuex'
import MailContact from '@/components/sections/contacts/MailContact' import MailContact from '@/components/sections/contacts/MailContact.vue'
import OtherContact from '@/components/sections/contacts/OtherContact' import OtherContact from '@/components/sections/contacts/OtherContact.vue'
const route = useRoute() const route = useRoute()
const store = useStore() const store = useStore()

40
src/views/HomeView.vue
View File

@ -1,21 +1,13 @@
<template>
<section class="home">
<About />
<ExperiencesSection />
<FavoriteProjects />
</section>
</template>
<script setup> <script setup>
import { onMounted, onUnmounted } from 'vue' import { onMounted, onUnmounted } from 'vue';
import { useStore } from 'vuex' import { useStore } from 'vuex';
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router';
import About from '@/components/sections/AboutSection' import About from '@/components/sections/AboutSection.vue';
import ExperiencesSection from '@/components/sections/ExperiencesSection' import ExperiencesSection from '@/components/sections/ExperiencesSection.vue';
import FavoriteProjects from '@/components/sections/FavoriteProjects' import FavoriteProjects from '@/components/sections/FavoriteProjects.vue';
const store = useStore() const store = useStore();
const route = useRoute() const route = useRoute();
onMounted(() => { onMounted(() => {
const header = { const header = {
@ -23,13 +15,21 @@ onMounted(() => {
description: [ description: [
'Chciałbym Państwa powitać na mojej stronie!', 'Chciałbym Państwa powitać na mojej stronie!',
'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.' 'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.'
] ],
} }
store.commit('setHeader', header) store.commit('setHeader', header);
}) })
onUnmounted(() => { onUnmounted(() => {
store.commit('resetHeaderTitle') store.commit('resetHeaderTitle');
store.commit('resetHeaderDescription') store.commit('resetHeaderDescription');
}) })
</script> </script>
<template>
<section class="home">
<About />
<ExperiencesSection />
<FavoriteProjects />
</section>
</template>

64
src/views/ProjectView.vue
View File

@ -64,9 +64,9 @@
:alt="project.title" :alt="project.title"
> >
</figure> </figure>
<div <Markdown
class="markdown mt-9" class="markdown mt-9"
v-html="markdownToHtml" :source="project.description"
/> />
</div> </div>
</section> </section>
@ -79,52 +79,52 @@
</template> </template>
<script setup> <script setup>
import { ref, reactive, computed, onMounted } from 'vue' import { ref, reactive, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router';
import { useStore } from 'vuex' import { useStore } from 'vuex';
import { marked } from 'marked' import Markdown from '@/components/markdowns/MarkdownDescription.vue';
const route = useRoute() const apiURL = import.meta.env.VITE_APP_API_URL;
const store = useStore() const route = useRoute();
const store = useStore();
const isLoaded = ref(false) const isLoaded = ref(false);
let project = reactive({}) let project = reactive({});
const getCategories = computed(() => store.getters.getCategories) const getCategories = computed(() => store.getters.getCategories);
const markdownToHtml = computed(() => marked.parse(project.description))
onMounted(() => { onMounted(() => {
if (getCategories.value.length === 0) { if (getCategories.value.length === 0) {
store.dispatch('fetchCategories') store.dispatch('fetchCategories');
} }
loadProject(route.params.id) loadProject(route.params.id);
}) })
function getCategoryName(categories = []) { function getCategoryName(categories = []) {
const categoriesText = [] const categoriesText = [];
categories.forEach(categoryElement => { categories.forEach(categoryElement => {
const category = getCategories.value.find(category => category.slug === categoryElement) const category = getCategories.value.find(category => category.slug === categoryElement);
if (category) { if (category) {
categoriesText.push(category.name) categoriesText.push(category.name);
} }
}) });
return categoriesText[0] ?? undefined return categoriesText[0] ?? undefined;
} }
function loadProject(id) { function loadProject(id) {
fetch(process.env.VUE_APP_API_URL + '/project/' + id) fetch(apiURL + '/project/' + id)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
project.title = data.title project.title = data.title;
project.description = data.description project.description = data.description;
project.release_date = data.release_date project.release_date = data.release_date;
project.author = data.author project.author = data.author;
project.categories = data.categories project.categories = data.categories;
project.project_version = data.project_version project.project_version = data.project_version;
project.project_url = data.project_url project.project_url = data.project_url;
project.images = data.images project.images = data.images;
isLoaded.value = true isLoaded.value = true;
}) });
} }
</script> </script>
@ -153,7 +153,7 @@ a {
} }
p + ol, p + ul, p + blockquote { p + ol, p + ul, p + blockquote {
@apply -mb-2.5; @apply -mb-2;
} }
ol { ol {
@ -174,7 +174,7 @@ a {
} }
p { p {
@apply mb-2.5 text-justify; @apply mb-2 text-justify;
} }
blockquote { blockquote {

112
src/views/ProjectsView.vue
View File

@ -1,3 +1,59 @@
<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue';
import { useStore } from 'vuex';
import SelectedProjects from '@/components/SelectedProjects.vue';
const store = useStore();
const activeCategory = ref('all');
const projects = reactive([]);
const getCategories = computed(() => store.getters.getCategories);
onMounted(() => {
loadAllData();
});
onUnmounted(() => {
store.commit('resetHeaderTitle');
store.commit('resetHeaderDescription');
});
function loadAllData () {
store.dispatch('fetchCategories');
store.dispatch('fetchProjects').then(loadedProjects => {
loadedProjects.forEach(project => {
projects.push(project);
});
});
}
function loadListWhereCategory(category) {
projects.splice(0);
setTimeout(() => {
if (category !== 'all') {
const storedProjects = store.getters.getProjects.filter(project => project.categories.includes(category));
storedProjects.forEach(project => {
projects.push(project);
})
} else {
store.getters.getProjects.forEach(project => {
projects.push(project);
});
}
}, 500);
}
function changeCategory(category) {
activeCategory.value = category
loadListWhereCategory(category)
}
function selectedCategory(categorySlug) {
return activeCategory.value === categorySlug;
}
</script>
<template> <template>
<SelectedProjects :projects="projects"> <SelectedProjects :projects="projects">
<div class="pb-9"> <div class="pb-9">
@ -25,62 +81,6 @@
</div> </div>
</template> </template>
<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useStore } from 'vuex'
import SelectedProjects from '@/components/SelectedProjects'
const store = useStore()
const activeCategory = ref('all')
const projects = reactive([])
const getCategories = computed(() => store.getters.getCategories)
onMounted(() => {
loadAllData()
})
onUnmounted(() => {
store.commit('resetHeaderTitle')
store.commit('resetHeaderDescription')
})
function loadAllData () {
store.dispatch('fetchCategories')
store.dispatch('fetchProjects').then(loadedProjects => {
loadedProjects.forEach(project => {
projects.push(project)
})
})
}
function loadListWhereCategory(category) {
projects.splice(0)
setTimeout(() => {
if (category !== 'all') {
const storedProjects = store.getters.getProjects.filter(project => project.categories.includes(category))
storedProjects.forEach(project => {
projects.push(project)
})
} else {
store.getters.getProjects.forEach(project => {
projects.push(project)
})
}
}, 500)
}
function changeCategory(category) {
activeCategory.value = category
loadListWhereCategory(category)
}
function selectedCategory(categorySlug) {
return activeCategory.value === categorySlug
}
</script>
<style lang="scss"> <style lang="scss">
@import "scss/media"; @import "scss/media";

26
vite.config.js Normal file
View File

@ -0,0 +1,26 @@
import { fileURLToPath, URL } from 'node:url';
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig((mode) => {
const env = loadEnv(mode, process.cwd(), "");
return {
publicPath: '/',
transpileDependencies: true,
server: {
host: 'localhost',
port: parseInt(env.VITE_PORT ?? 5173),
hmr: {
host: 'localhost',
},
},
plugins: [ vue() ],
resolve: {
vue: 'vue/dist/vue.esm-bundler.js',
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
};
});

14
vue.config.js
View File

@ -1,14 +0,0 @@
const path = require("path")
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
publicPath: '/',
transpileDependencies: true,
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src/'),
}
}
},
})