Initial commit

280561e7 · MarkThisDot · 280561e7 · 280561e7 · 280561e7 · 280561e7
Commit 280561e7 authored Jun 27, 2022 by MarkThisDot
--- a/.gitignore
+++ b/.gitignore
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.nvmrc
+++ b/.nvmrc
+v16.15.0
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
+{
+  "recommendations": ["Vue.volar"]
+}
--- a/README.md
+++ b/README.md
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "wikifunction-docs-vue",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.2.25",
+    "vue-i18n": "^9.1.10"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^2.3.3",
+    "vite": "^2.9.9"
+  }
+}
--- a/public/images/cake-example.png
+++ b/public/images/cake-example.png
--- a/public/images/function_machine.png
+++ b/public/images/function_machine.png
--- a/src/App.vue
+++ b/src/App.vue
+<script setup>
+import { watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { locale } = useI18n();
+
+watch(locale, () => {
+  const page = document.querySelector("html");
+  page.dir = "rtl";
+  page.lang = locale;
+});
+</script>
+
+<template>
+  <header class="container header">Wikifunctions</header>
+  <main class="container">
+    <div class="hero">
+      <div>
+        <h1>{{ $t("message.slogan") }}</h1>
+        <p>
+          A function is like a box that receives an
+          <b class="blue">input</b> and returns an <b class="red">output</b>.
+          You rely on functions every day which include using your phone, baking
+          a cake, using an ATM machine and more.
+        </p>
+      </div>
+      <img
+        src="/images/function_machine.png"
+        alt="Illustration of function
+        input and output"
+      />
+    </div>
+    <section>
+      <h2>What is a Function?</h2>
+      <p>
+        The function&apos;s job is to get some <b class="blue">input</b>,
+        process that <b class="blue">input</b> and return an
+        <b class="red">output</b>. Functions are great because they are reusable
+        like recipes.
+      </p>
+    </section>
+
+    <section>
+      <h2>How it works?</h2>
+      <p>
+        Imagine you wanted to bake a cake, but you had to remember the list of
+        steps on how to do it each time. The easier option would be to follow
+        and reuse a recipe each time you wanted to bake a cake.
+      </p>
+      <img src="/images/cake-example.png" alt="How to make a cake" />
+    </section>
+
+    <section>
+      <h2>Why should we care about functions?</h2>
+      <p>
+        Functions are reusable and save us time in the day. As you saw with the
+        cake example, the recipe makes the process of baking a cake go by much
+        faster and frees up our day to focus on other tasks.
+      </p>
+    </section>
+
+    <section>
+      <h2>Explore real world functions with interactive examples</h2>
+      <!--Monthly salary and Temperature converter would go here-->
+      <div></div>
+    </section>
+  </main>
+  <footer>
+    2022 &copy;
+    <a
+      href="https://www.wikimedia.org/"
+      target="_blank"
+      rel="noopener noreferrer"
+      >Wikimedia</a
+    >
+  </footer>
+</template>
+
+<style>
+* {
+  box-sizing: border-box;
+}
+
+/*Colors from wiki functions logo*/
+:root {
+  --blue: #086597;
+  --crimson-red: #950607;
+  --dark-green: #416853;
+}
+
+html,
+body {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  color: rgba(60, 60, 60, 0.7);
+  font-size: 1.3rem;
+  padding: 0;
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #213547;
+}
+
+img {
+  object-fit: contain;
+  width: 100%;
+}
+
+.container {
+  width: 100%;
+  margin: 1rem auto;
+}
+
+.header {
+  font-size: 1.5rem;
+}
+
+.hero {
+  padding: 4rem 1rem;
+  display: flex;
+  flex-direction: column;
+  font-size: 1.3rem;
+  gap: 1rem;
+}
+
+.hero h1 {
+  color: #42b883;
+  line-height: 64px;
+  font-size: 3.5rem;
+  margin-bottom: 2rem;
+}
+
+section {
+  margin: 4rem 0;
+}
+
+footer {
+  background-color: #f3f3f3;
+  color: #666;
+  text-align: center;
+  padding: 2rem 0;
+  margin-top: 4rem;
+}
+
+footer a {
+  color: inherit;
+}
+
+.blue {
+  color: var(--blue);
+}
+
+.red {
+  color: var(--crimson-red);
+}
+
+@media (min-width: 576px) {
+  .container {
+    width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    width: 1140px;
+  }
+
+  .hero {
+    flex-direction: row;
+  }
+}
+</style>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Documentation
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+</style>
--- a/src/i18n/ar.json
+++ b/src/i18n/ar.json
+{
+    "slogan": "كل شيء في حياتك يعمل بفضل الدوال"
+}
\ No newline at end of file
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
+{
+    "slogan": "Everything in your life is powered by Functions"
+}
\ No newline at end of file
--- a/src/main.js
+++ b/src/main.js
+import { createApp } from "vue";
+import { createI18n } from "vue-i18n";
+import App from "./App.vue";
+import en from "./i18n/en.json";
+import ar from "./i18n/ar.json";
+
+const i18n = createI18n({
+  locale: "en",
+  messages: {
+    en: {
+      dir: "ltr",
+      message: en,
+    },
+    ar: {
+      dir: "rtl",
+      message: ar,
+    },
+  },
+});
+
+createApp(App).use(i18n).mount("#app");
--- a/vite.config.js
+++ b/vite.config.js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()]
+})