Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The javascript portion of the Projects component for Net Your Problem.
<script>
import axios from 'axios';
import VueMarkdown from 'vue-markdown';
import Card from './material-components/Card';
import ScrollDownToSection from './ScrollDownToSection';
import Timeline from './Timeline';
import SimpleModal from './dialogs/SimpleModal';
const contentRepositoryApiBaseUrl = process.env.CONTENT_REPOSITORY_API_BASE_URL;
export default {
name: 'projects',
components: {
card: Card,
'scroll-down-to-section': ScrollDownToSection,
timeline: Timeline,
'vue-markdown': VueMarkdown,
modal: SimpleModal
},
props: ['nextSectionHref'],
methods: {
scrollToElement(target) {
this.$emit('scrollToElement', target);
},
getProjectContentUrl(page) {
return `${contentRepositoryApiBaseUrl}/projects/${page}.json`;
},
async showProjectDetails(project) {
const projectUrl = this.getProjectContentUrl(project);
const response = await axios.get(projectUrl);
this.projectTitle = response.data.title;
this.markdownSource = response.data.description;
this.showModal = true;
}
},
async created() {
const response = await axios.get(`${contentRepositoryApiBaseUrl}/lists/projects.json`);
const projects = response.data.cards;
projects.forEach((project) => {
this.projects.push({
text: project.cardTitle,
cover: project.cardImage,
detailedInformationFileName: project.detailedInformationFileName
});
});
},
data() {
return {
showModal: false,
projects: [],
projectTitle: '',
markdownSource: ''
};
}
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment