From d30c4c22ec0cf7c73486573edf7c1ac60fc002f9 Mon Sep 17 00:00:00 2001 From: data-miner00 Date: Fri, 29 Mar 2024 09:06:24 +0800 Subject: [PATCH 01/10] fix: Typos --- _typos.toml | 2 ++ content/blogs/2.my-second-blog.md | 2 +- content/demo.md | 6 +++--- content/guide.md | 10 +++++----- 4 files changed, 11 insertions(+), 9 deletions(-) create mode 100644 _typos.toml diff --git a/_typos.toml b/_typos.toml new file mode 100644 index 0000000..ccdfaae --- /dev/null +++ b/_typos.toml @@ -0,0 +1,2 @@ +[files] +extend-exclude = ["locales/fr.json", "content/fr/**/*.md"] diff --git a/content/blogs/2.my-second-blog.md b/content/blogs/2.my-second-blog.md index ac3cc1c..9d1c286 100644 --- a/content/blogs/2.my-second-blog.md +++ b/content/blogs/2.my-second-blog.md @@ -30,4 +30,4 @@ Finally, after a whole minute later, I finally saw the bus bellowing down the ro The moment when the bus stopped in front of me, I was flabbergasted and stunned. I couldn't feel my breath anymore and starts to comtemplate about my mixed feelings towards the arrival of the bus. -After regaining my conciousness, I realised that the bus and the fellow peasants has long been gone. "Can like that one meh," I chided. +After regaining my consciousness, I realised that the bus and the fellow peasants has long been gone. "Can like that one meh," I chided. diff --git a/content/demo.md b/content/demo.md index 4232cda..399632b 100644 --- a/content/demo.md +++ b/content/demo.md @@ -11,7 +11,7 @@ tags: - reactive - rxjs - cheatsheet -updatedAt: 2022-11-18T11:37:49.432Z +updatedAt: 2024-03-28T11:05:53.157Z createdAt: 2022-11-18T11:37:49.432Z --- @@ -44,7 +44,7 @@ If you are using [Webpack](https://webpack.js.org/) or other JavaScript bundler, ## Angular -[Angular](https://angular.io/) is a JavaScript Framework developed by Google. RxJS can be used on the get-go as it is baked into Angular by default so there is no need for a seperate installation. All we need is just the [Angular CLI](https://angular.io/cli) to create a new project to work with. +[Angular](https://angular.io/) is a JavaScript Framework developed by Google. RxJS can be used on the get-go as it is baked into Angular by default so there is no need for a separate installation. All we need is just the [Angular CLI](https://angular.io/cli) to create a new project to work with. ``` ng new @@ -125,7 +125,7 @@ const event$ = fromEvent(document, "click"); event$.subscribe((x) => console.log(x)); ``` -Another observer creation method is `interval`, where it takes in the time inteval in miliseconds and perpetually emits an increment of integer by 1 starting from 0. +Another observer creation method is `interval`, where it takes in the time interval in milliseconds and perpetually emits an increment of integer by 1 starting from 0. ```ts const periodic$ = interval(1000); diff --git a/content/guide.md b/content/guide.md index abaa9c4..c46ebc9 100644 --- a/content/guide.md +++ b/content/guide.md @@ -9,7 +9,7 @@ authors: tags: - tutorial - guide -updatedAt: 2023-11-18T11:37:49.432Z +updatedAt: 2024-03-28T11:05:53.157Z createdAt: 2023-11-18T11:37:49.432Z --- @@ -150,7 +150,7 @@ content/ ![my cool image](/images/demo.png) -This is how a potrait image looks like within the prose. It is left aligned and will extend to the max width available in the prose. Images that will be served alongside with the app can be placed within the `public` directory. For instance, images within the `/public/images` folder can be accessed via the path `/images/img.jpg` directly. +This is how a portrait image looks like within the prose. It is left aligned and will extend to the max width available in the prose. Images that will be served alongside with the app can be placed within the `public` directory. For instance, images within the `/public/images` folder can be accessed via the path `/images/img.jpg` directly. ```md ![my cool image](/images/demo.png) @@ -359,7 +359,7 @@ The url of the non-default locale will be prefixed with it's code whereas the de ### Defining Words -To define a word for the intended languages, there is a section in `nuxt.config.ts` named `vueI18n` within the `i18n` object to define them. For instance, to define the world "welcome" for both English and French, create a property called `welcome` within thier respective locales object inside `messages` with their corresponding value will do. +To define a word for the intended languages, there is a section in `nuxt.config.ts` named `vueI18n` within the `i18n` object to define them. For instance, to define the world "welcome" for both English and French, create a property called `welcome` within their respective locales object inside `messages` with their corresponding value will do. ```ts [nuxt.config.ts] export default defineNuxtConfig({ @@ -392,7 +392,7 @@ With this in place, Nuxt is smart enough to render out "Welcome" or "Bienvenue" While the above solution of adding new definition of words in the `nuxt.config.ts` file works, it can pose a real problem when the **vocabulary grows** as the file become cumbersome to maintain. -Fortunately, there is another preferred way to store the language definitions in their own, seperate JSON file. With this approach, not only it achieves the Single Responsibility Principle, it also drastically improve the maintainability of the files. +Fortunately, there is another preferred way to store the language definitions in their own, separate JSON file. With this approach, not only it achieves the Single Responsibility Principle, it also drastically improve the maintainability of the files. Here is how it is configured in `nuxt.config.ts`. @@ -418,7 +418,7 @@ The above code tells Nuxt to locate English definition in `en.json` file and Fre ### I18n in Nuxt Content -To support internationalization for Markdown based contents from Nuxt Content, create a corresponsing folder inside the `content` folder with the non-default locale's code and imitate the structure of the base folder. +To support internationalization for Markdown based contents from Nuxt Content, create a corresponding folder inside the `content` folder with the non-default locale's code and imitate the structure of the base folder. For example, given I have the following file structure that has English contents, the French contents can be housed in the following manner. From 237216a8bb7f62c6dbae9178c285a71b0bceebed Mon Sep 17 00:00:00 2001 From: data-miner00 Date: Fri, 29 Mar 2024 09:06:58 +0800 Subject: [PATCH 02/10] feat: Support retrieved date --- components/content/ApaReference.vue | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/components/content/ApaReference.vue b/components/content/ApaReference.vue index ef27b13..e26b65b 100644 --- a/components/content/ApaReference.vue +++ b/components/content/ApaReference.vue @@ -4,7 +4,7 @@ type Props = { authors?: string[]; organization?: string; title: string; - date: string; + date?: string; retrievedDate?: string; publisher?: string; url: string; @@ -38,13 +38,16 @@ const hasAuthor = computed(() => props.authors || props.organization); ``` +### Tables + +This is how the default table looks like. + +| Age | Person 1 | Person 2 | Person 3 | Average | +| --- | --- | --- | --- | --- | +| 8 | 6 | 7 | 5 | 6 | +| 10 | 6.5 | 7.5 | 8.5 | 7.5 | +| 12 | 8 | 9 | 10 | 9 | + +### Keyboard + +Keyboard keys can be represented with the `` HTML tag such as Esc, Enter and Ctrl. + ### LaTeX Support This template also comes with the support for $\LaTeX$. Write beautiful equations within the Markdown with ease! From 453172e88c85767207907bb65fa7347fc6a0a96a Mon Sep 17 00:00:00 2001 From: data-miner00 Date: Tue, 9 Apr 2024 22:07:02 +0800 Subject: [PATCH 05/10] feat: Image container --- components/content/ProseImg.vue | 47 +++++++++++++++++++++++++++++++++ content/fr/guide.md | 2 +- content/guide.md | 2 +- 3 files changed, 49 insertions(+), 2 deletions(-) create mode 100644 components/content/ProseImg.vue diff --git a/components/content/ProseImg.vue b/components/content/ProseImg.vue new file mode 100644 index 0000000..addd2b8 --- /dev/null +++ b/components/content/ProseImg.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/content/fr/guide.md b/content/fr/guide.md index 6577114..aba1458 100644 --- a/content/fr/guide.md +++ b/content/fr/guide.md @@ -152,7 +152,7 @@ content/ ![ma belle image](/images/demo.png) -Voici à quoi ressemble une image de portrait dans la prose. Il est aligné à gauche et s'étendra jusqu'à la largeur maximale disponible dans la prose. Les images qui seront diffusées avec l'application peuvent être placées dans le répertoire "public". Par exemple, les images du dossier `/public/images` sont accessibles via le chemin `/images/img.jpg` directement. +Voici à quoi ressemble une image de portrait dans la prose. Il est centré dans un conteneur personnalisé via le fichier `ProseImg.vue` personnalisé dans le dossier `components/content` et s'étendra jusqu'à la largeur maximale disponible dans le conteneur. Les images qui seront servies avec l'application peuvent être placées dans le répertoire `public`. Par exemple, les images du dossier `/public/images` sont accessibles directement via le chemin `/images/img.jpg`. ```md ![ma belle image](/images/demo.png) diff --git a/content/guide.md b/content/guide.md index 549c43d..865e9c3 100644 --- a/content/guide.md +++ b/content/guide.md @@ -150,7 +150,7 @@ content/ ![my cool image](/images/demo.png) -This is how a portrait image looks like within the prose. It is left aligned and will extend to the max width available in the prose. Images that will be served alongside with the app can be placed within the `public` directory. For instance, images within the `/public/images` folder can be accessed via the path `/images/img.jpg` directly. +This is how a portrait image looks like within the prose. It is centered within a custom container via the custom `ProseImg.vue` in the `components/content` folder and will extend to the max width available in the container. Images that will be served alongside with the app can be placed within the `public` directory. For instance, images within the `/public/images` folder can be accessed via the path `/images/img.jpg` directly. ```md ![my cool image](/images/demo.png) From 4b254342eefeeda7cd170a375aafa259888ede04 Mon Sep 17 00:00:00 2001 From: data-miner00 Date: Tue, 9 Apr 2024 22:22:33 +0800 Subject: [PATCH 06/10] fix: Height not consistent --- components/FeatureCard.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/FeatureCard.vue b/components/FeatureCard.vue index dbba894..4b029bb 100644 --- a/components/FeatureCard.vue +++ b/components/FeatureCard.vue @@ -14,7 +14,7 @@ export default defineComponent({