Merge pull request #15 from data-miner00/dev

APA Reference
data-miner00 · Mar 3, 2024 · d084a11 · d084a11
2 parents 40af086 + aacd17c
commit d084a11
Show file tree

Hide file tree

Showing 7 changed files with 284 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -116,15 +116,13 @@ To run this template project in your local for personal use or contribution, sim
    ```sh
    pnpm i
    ```
-3. Optionally update the dependencies
-   ```sh
-   pnpm up --latest
-   ```
-4. Start the development server
+3. Start the development server
    ```sh
    pnpm dev
    ```
 
+> ⚠️ Important: **Do not update** the dependencies as it will break due to incompatibilities from the latest Nuxt and Nuxt Content.
+
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 <!-- ROADMAP -->

diff --git a/components/content/ApaReference.vue b/components/content/ApaReference.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+type Source = "newspaper" | "blogs" | "magazines" | "online-news" | "websites";
+type Props = {
+  authors?: string[];
+  organization?: string;
+  title: string;
+  date: string;
+  retrievedDate?: string;
+  publisher?: string;
+  url: string;
+  source: Source;
+};
+
+const props = defineProps<Props>();
+
+const authorsString = computed(() =>
+  props.authors && props.authors.length > 0
+    ? props.authors.join(", ")
+    : props.organization
+);
+
+const punctuatedTitle = computed(() => {
+  const punctuations = ["?", ".", "!"];
+  const containPunctuations = punctuations.includes(
+    props.title[props.title.length - 1]
+  );
+
+  return containPunctuations ? props.title : props.title + ".";
+});
+
+const italicTitle = computed(() => {
+  return props.source === "online-news" || props.source === "websites";
+});
+
+const hasAuthor = computed(() => props.authors || props.organization);
+</script>
+
+<template>
+  <div class="pl-16 -indent-16 mb-4 last-of-type:mb-0">
+    <span v-if="hasAuthor">{{ authorsString }}. </span>
+    <time v-if="hasAuthor" :datetime="date">({{ date }}). </time>
+    <span :class="italicTitle ? 'italic' : ''">
+      {{ punctuatedTitle }}&nbsp;
+    </span>
+    <time v-if="!hasAuthor" :datetime="date">({{ date }}). </time>
+    <span v-if="publisher" :class="!italicTitle ? 'italic' : ''">
+      {{ publisher }}.
+    </span>
+    <a :href="url">{{ url }}</a>
+  </div>
+</template>
diff --git a/content/blogs/1.my-first-blog.md b/content/blogs/1.my-first-blog.md
@@ -27,3 +27,41 @@ It was an incredible and wholesome experience to witness the majestic golden ray
 ## An Anecdotal Incident
 
 While I was making my way through the hilltop, I came across a wild black panther sleeping soundly beside the crystal-clear river, shimmering with dazzling sparkles. It was surreal and I managed to capture some photo of the beast before continuing my journey.
+
+## References
+
+::apa-reference
+---
+authors: 
+  - Greenhouse, S
+date: 2020, July 30
+title: The coronavirus pandemic has intensified systemic economic racism against black Americans
+publisher: The New Yorker
+url: https://www.newyorker.com/news/news-desk/the-pandemic-has-intensified-systemic-economic-racism-against-black-americans
+source: newspaper
+---
+::
+
+::apa-reference
+---
+authors:
+  - Lee, C
+date: 2020, February 19
+title: A tale of two reference formats
+publisher: APA Style Blog
+url: https://apastyle.apa.org/blog/two-reference-formats
+source: blogs
+---
+::
+
+::apa-reference
+---
+authors:
+  - Rowlatt, J
+date: 2020, October 19
+title: Could cold water hold a clue to a dementia cure?
+publisher: BBC News
+url: https://www.bbc.com/news/health-54531075
+source: online-news
+---
+::
diff --git a/content/fr/blogs/1.my-first-blog.md b/content/fr/blogs/1.my-first-blog.md
@@ -27,3 +27,41 @@ Ce fut une expérience incroyable et saine d'être témoin des majestueux rayons
 ## Un incident anecdotique
 
 Alors que je traversais le sommet de la colline, je suis tombé sur une panthère noire sauvage qui dormait profondément au bord de la rivière cristalline, scintillante d'étincelles éblouissantes. C'était surréaliste et j'ai réussi à capturer quelques photos de la bête avant de continuer mon voyage.
+
+## Les références
+
+::apa-reference
+---
+authors: 
+  - Greenhouse, S
+date: 2020, July 30
+title: The coronavirus pandemic has intensified systemic economic racism against black Americans
+publisher: The New Yorker
+url: https://www.newyorker.com/news/news-desk/the-pandemic-has-intensified-systemic-economic-racism-against-black-americans
+source: newspaper
+---
+::
+
+::apa-reference
+---
+authors:
+  - Lee, C
+date: 2020, February 19
+title: A tale of two reference formats
+publisher: APA Style Blog
+url: https://apastyle.apa.org/blog/two-reference-formats
+source: blogs
+---
+::
+
+::apa-reference
+---
+authors:
+  - Rowlatt, J
+date: 2020, October 19
+title: Could cold water hold a clue to a dementia cure?
+publisher: BBC News
+url: https://www.bbc.com/news/health-54531075
+source: online-news
+---
+::
diff --git a/content/fr/guide.md b/content/fr/guide.md
@@ -471,3 +471,79 @@ const localePath = useLocalePath();
 ```
 
 Cela garantira que lorsque vous êtes dans le contexte anglais, le lien vous redirigera vers la page normale `/careers` alors que si vous êtes dans le contexte français, il pointera vers `/fr/careers` pour sa version française.
+
+## Références de style APA
+
+De plus, ce modèle est également livré avec un simple composant de citation de style APA qui peut être utilisé dans le fichier Markdown à l'aide de la syntaxe MDC. Les exemples et les styles sont conçus sur la base de cet [article Scribbr](https://www.scribbr.com/apa-examples/website/)
+
+```
+::apa-reference
+---
+authors: 
+  - Greenhouse, S
+date: 2020, July 30
+title: The coronavirus pandemic has intensified systemic economic racism against black Americans
+publisher: The New Yorker
+url: https://www.newyorker.com/news/news-desk/the-pandemic-has-intensified-systemic-economic-racism-against-black-americans
+source: newspaper
+---
+::
+```
+
+### Exemples
+
+::apa-reference
+---
+authors: 
+  - Greenhouse, S
+date: 2020, July 30
+title: The coronavirus pandemic has intensified systemic economic racism against black Americans
+publisher: The New Yorker
+url: https://www.newyorker.com/news/news-desk/the-pandemic-has-intensified-systemic-economic-racism-against-black-americans
+source: newspaper
+---
+::
+
+::apa-reference
+---
+authors:
+  - Lee, C
+date: 2020, February 19
+title: A tale of two reference formats
+publisher: APA Style Blog
+url: https://apastyle.apa.org/blog/two-reference-formats
+source: blogs
+---
+::
+
+::apa-reference
+---
+authors:
+  - Rowlatt, J
+date: 2020, October 19
+title: Could cold water hold a clue to a dementia cure?
+publisher: BBC News
+url: https://www.bbc.com/news/health-54531075
+source: online-news
+---
+::
+
+::apa-reference
+---
+organization: Scribbr
+date: n.d.
+title: How to cite a website in APA style
+url: https://www.scribbr.com/apa-examples/website/
+source: websites
+---
+::
+
+::apa-reference
+---
+date: 2020, October 19
+title: "The countdown: A prophecy, crowds and a TikTok takedown"
+publisher: BBC News
+url: https://www.bbc.com/news/election-us-2020-54596667
+source: online-news
+---
+::
diff --git a/content/guide.md b/content/guide.md
@@ -469,3 +469,80 @@ const localePath = useLocalePath();
 ```
 
 This will ensures when you are in the English context, the link will redirect you to the normal `/careers` page whereas if you are in the French context, it will points to `/fr/careers` for its French version.
+
+
+## APA Style References
+
+Additionally, this template also comes with a simple APA style citation component that can be utilized in the Markdown file using the MDC syntax. The examples and styles are crafted base on this [Scribbr article](https://www.scribbr.com/apa-examples/website/).
+
+```
+::apa-reference
+---
+authors: 
+  - Greenhouse, S
+date: 2020, July 30
+title: The coronavirus pandemic has intensified systemic economic racism against black Americans
+publisher: The New Yorker
+url: https://www.newyorker.com/news/news-desk/the-pandemic-has-intensified-systemic-economic-racism-against-black-americans
+source: newspaper
+---
+::
+```
+
+### Examples
+
+::apa-reference
+---
+authors: 
+  - Greenhouse, S
+date: 2020, July 30
+title: The coronavirus pandemic has intensified systemic economic racism against black Americans
+publisher: The New Yorker
+url: https://www.newyorker.com/news/news-desk/the-pandemic-has-intensified-systemic-economic-racism-against-black-americans
+source: newspaper
+---
+::
+
+::apa-reference
+---
+authors:
+  - Lee, C
+date: 2020, February 19
+title: A tale of two reference formats
+publisher: APA Style Blog
+url: https://apastyle.apa.org/blog/two-reference-formats
+source: blogs
+---
+::
+
+::apa-reference
+---
+authors:
+  - Rowlatt, J
+date: 2020, October 19
+title: Could cold water hold a clue to a dementia cure?
+publisher: BBC News
+url: https://www.bbc.com/news/health-54531075
+source: online-news
+---
+::
+
+::apa-reference
+---
+organization: Scribbr
+date: n.d.
+title: How to cite a website in APA style
+url: https://www.scribbr.com/apa-examples/website/
+source: websites
+---
+::
+
+::apa-reference
+---
+date: 2020, October 19
+title: "The countdown: A prophecy, crowds and a TikTok takedown"
+publisher: BBC News
+url: https://www.bbc.com/news/election-us-2020-54596667
+source: online-news
+---
+::
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "author": "Shaun Chong <[email protected]>",
   "license": "MIT",
   "private": true,
+  "version": "1.1.0",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",