Commit 280561e7 authored by MarkThisDot's avatar MarkThisDot
Browse files

Initial commit

parents
# 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?
v16.15.0
{
"recommendations": ["Vue.volar"]
}
# 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)
<!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>
This diff is collapsed.
{
"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"
}
}
<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>
<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>
{
"slogan": "كل شيء في حياتك يعمل بفضل الدوال"
}
\ No newline at end of file
{
"slogan": "Everything in your life is powered by Functions"
}
\ No newline at end of file
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");
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment