mirror of
https://github.com/ivabus/www
synced 2024-11-26 04:05:06 +03:00
Moved scripts to partials
This commit is contained in:
Thomas Smith
parent
aacb6b20b8
commit
407525fc0f
4 changed files with 170 additions and 253 deletions
|
|
@ -294,68 +294,26 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Speed comparison section
|
|
||||||
<div class="section-divider">
|
|
||||||
<img src="/Images/pixel-section-divider-teal.svg" style="pointer-events:none;" alt="">
|
|
||||||
</div>
|
|
||||||
<section class="one-box">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12">
|
|
||||||
<h2 class="display-3">TO CALL TEA ‘REVOLUTIONARY’ WOULD BE AN UNDERSTATEMENT. <a href="https://twitter.com/mxcl?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">@MXCL</a> HAS SET A NEW BAR.</h2>
|
|
||||||
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
|
|
||||||
<div class="speed-terminal mb-3" style="box-shadow:none;">
|
|
||||||
<div class="terminal-bar black-bg flex-start p-1 ps-3">
|
|
||||||
<div class="traffic-light"></div>
|
|
||||||
<div class="traffic-light"></div>
|
|
||||||
<div class="traffic-light"></div>
|
|
||||||
</div>
|
|
||||||
<div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
|
|
||||||
<p class="teal small"></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="speed-terminal">
|
|
||||||
<div class="terminal-bar black-bg flex-start p-1 ps-3">
|
|
||||||
<div class="traffic-light"></div>
|
|
||||||
<div class="traffic-light"></div>
|
|
||||||
<div class="traffic-light"></div>
|
|
||||||
</div>
|
|
||||||
<div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
|
|
||||||
<p class="teal small"></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
-->
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<div class="section-divider">
|
<div class="section-divider">
|
||||||
<img src="/Images/pixel-section-divider-teal.svg" style="pointer-events:none;" alt="">
|
<img src="/Images/pixel-section-divider-teal.svg" style="pointer-events:none;" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div class="container two-boxes">
|
<div class="container two-boxes">
|
||||||
<div class="row one-box-down">
|
<div class="row one-box-down">
|
||||||
<div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-12">
|
<div class="col">
|
||||||
<h2 class="display-5">features</h2>
|
<h2 class="display-5 text-center">features</h2>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<hr>
|
||||||
<div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 flex order-2">
|
<div class="row one-box-up">
|
||||||
|
<div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-5 mb-sm-5 mb-5 flex order-2">
|
||||||
<div class="feature-content ps-xl-5 ps-lg-3 ps-md-0 ps-sm-0 ps-0">
|
<div class="feature-content ps-xl-5 ps-lg-3 ps-md-0 ps-sm-0 ps-0">
|
||||||
<h2 class="display-5">tea magic</h2>
|
<h2 class="display-5">tea magic</h2>
|
||||||
<p>Easily access the entire open source ecosystem with tea. Simply prefix your commands with "tea" and if the tool isn't installed, tea will install it for you. Add magic to your shell scripts and use developer environments to enhance your workflow.</p>
|
<p>Easily access the entire open source ecosystem with tea. Simply prefix your commands with "tea" and if the tool isn't installed, tea will install it for you. Add magic to your shell scripts and use developer environments to enhance your workflow.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 xol-12 pb-xl-0 pb-lg-0 pb-md-5 pb-sm-5 pb-5 mt-xl-0 mt-lg-0 mt-md-5 mt-sm-5 mt-5">
|
<div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-3 mb-sm-3 mb-3">
|
||||||
<div class="feature-terminal" id="start-btn" style="cursor:pointer;">
|
<div class="feature-terminal" id="start-btn" style="cursor:pointer;">
|
||||||
<div class="terminal-bar feature-bar black-bg flex-start p-1 ps-3">
|
<div class="terminal-bar feature-bar black-bg flex-start p-1 ps-3">
|
||||||
<div class="traffic-light"></div>
|
<div class="traffic-light"></div>
|
||||||
|
|
@ -372,73 +330,19 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
|
||||||
const commands2 = [
|
|
||||||
{ input: "$ tea bun create next ./app<br>", output: `<span class="dark-gray">[package.json] Detected React - added "react-refresh"<br>
|
|
||||||
[package.json] Detected Next.js<br><br></span>` },
|
|
||||||
{ input: "", output: `<span class="dark-gray">$ bun install</span><br>
|
|
||||||
bun install v0.4.0 (a94bba63)<br>
|
|
||||||
🔍 Resolving [1/11]<br>
|
|
||||||
[99.00ms] git<br>
|
|
||||||
<span style="color:green">+</span> @types/react@18.0.27<br>
|
|
||||||
<span style="color:green">+</span> bun-framework-next@12.2.5<br>
|
|
||||||
<span style="color:green">+</span> react-refresh@0.10.0<br>
|
|
||||||
<span style="color:green">+</span> typescript@4.9.5<br>
|
|
||||||
<span style="color:green">+</span> next@12.2.3<br>
|
|
||||||
<span style="color:green">+</span> react@18.2.0<br>
|
|
||||||
<span style="color:green">+</span> react-dom@18.2.0<br>
|
|
||||||
<span style="color:green">+</span> react-is@18.2.0<br>
|
|
||||||
|
|
||||||
25 packages installed [704.00ms]<br>
|
|
||||||
|
|
||||||
[724.00ms] bun install<br><br>
|
|
||||||
|
|
||||||
` },
|
|
||||||
];
|
|
||||||
|
|
||||||
let commandIndex2 = 0;
|
|
||||||
let command2 = commands2[commandIndex2];
|
|
||||||
let commandOutput2 = "";
|
|
||||||
|
|
||||||
function typeCommand2() {
|
|
||||||
if (commandIndex2 === commands2.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (command2.input.length === 0) {
|
|
||||||
commandOutput2 += '\n' + command2.output + '\n';
|
|
||||||
document.querySelector("#terminal-output-2").innerHTML = commandOutput2;
|
|
||||||
commandIndex2++;
|
|
||||||
command2 = commands2[commandIndex2];
|
|
||||||
setTimeout(typeCommand2, 1000);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
commandOutput2 += command2.input[0];
|
|
||||||
command2.input = command2.input.slice(1);
|
|
||||||
document.querySelector("#terminal-output-2").innerHTML = commandOutput2;
|
|
||||||
setTimeout(typeCommand2, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
const observer2 = new IntersectionObserver((entries) => {
|
|
||||||
if (entries[0].isIntersecting) {
|
|
||||||
typeCommand2();
|
|
||||||
observer2.disconnect();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const target2 = document.querySelector("#terminal-output-2");
|
|
||||||
observer2.observe(target2);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
{{- partial "animation-1.html" . -}}
|
||||||
|
|
||||||
<!-- Second -->
|
<!-- Second -->
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 order-xl-1 order-lg-1 order-md-2 order-sm-2 order-2 flex">
|
<div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-5 mb-sm-5 mb-5 order-xl-1 order-lg-1 order-md-2 order-sm-2 order-2 flex">
|
||||||
<div class="feature-content pe-xl-5 pe-lg-3 pe-md-0 pe-sm-0 pe-0">
|
<div class="feature-content pe-xl-5 pe-lg-3 pe-md-0 pe-sm-0 pe-0">
|
||||||
<h2 class="display-5">Developer Environments</h2>
|
<h2 class="display-5">Developer Environments</h2>
|
||||||
<p>Simplify your development environment setup with tea by automatically fetching the specific versions of tools your project needs. With a range of specifications, tea provides a seamless solution to manage project dependencies. Debug changes, supplement your environment, and see the full environment with ease.</p>
|
<p>Simplify your development environment setup with tea by automatically fetching the specific versions of tools your project needs. With a range of specifications, tea provides a seamless solution to manage project dependencies. Debug changes, supplement your environment, and see the full environment with ease.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 xol-12 pb-xl-0 pb-lg-0 pb-md-5 pb-sm-5 pb-5 mt-xl-0 mt-lg-0 mt-md-5 mt-sm-5 mt-5 order-xl-2 order-lg-2 order-md-1 order-sm-1 order-1">
|
<div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-3 mb-sm-3 mb-3 order-xl-2 order-lg-2 order-md-1 order-sm-1 order-1">
|
||||||
<div class="feature-terminal" id="start-button" style="cursor:pointer;">
|
<div class="feature-terminal" id="start-button" style="cursor:pointer;">
|
||||||
<div class="terminal-bar black-bg flex-start p-1 ps-3">
|
<div class="terminal-bar black-bg flex-start p-1 ps-3">
|
||||||
<div class="traffic-light"></div>
|
<div class="traffic-light"></div>
|
||||||
|
|
@ -456,61 +360,7 @@ bun install v0.4.0 (a94bba63)<br>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
{{- partial "animation-2.html" . -}}
|
||||||
const commands3 = [
|
|
||||||
{ input: "$ node --version<br>", output: `v19.3.0<br><br>` },
|
|
||||||
{ input: "$ cat <<EOF >>my-project/README.md<br>", output: `# Dependencies<br>
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Project</th>
|
|
||||||
<th>Version</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>nodejs.org</td>
|
|
||||||
<td>^18.4</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
EOF
|
|
||||||
<br><br>` },
|
|
||||||
{ input: "$ cd my-project<br>", output: `my-project<br><br>` },
|
|
||||||
{ input: "$ node --version<br>", output: `v18.13.0` },
|
|
||||||
];
|
|
||||||
|
|
||||||
let commandIndex3 = 0;
|
|
||||||
let command3 = commands3[commandIndex3];
|
|
||||||
let commandOutput3 = "";
|
|
||||||
|
|
||||||
function typeCommand3() {
|
|
||||||
if (commandIndex3 === commands3.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (command3.input.length === 0) {
|
|
||||||
commandOutput3 += '\n' + command3.output + '\n';
|
|
||||||
document.querySelector("#terminal-output-3").innerHTML = commandOutput3;
|
|
||||||
commandIndex3++;
|
|
||||||
command3 = commands3[commandIndex3];
|
|
||||||
setTimeout(typeCommand3, 1000);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
commandOutput3 += command3.input[0];
|
|
||||||
command3.input = command3.input.slice(1);
|
|
||||||
document.querySelector("#terminal-output-3").innerHTML = commandOutput3;
|
|
||||||
setTimeout(typeCommand3, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
const terminalOutput = document.querySelector("#terminal-output-3");
|
|
||||||
const observer = new IntersectionObserver((entries) => {
|
|
||||||
if (entries[0].isIntersecting) {
|
|
||||||
typeCommand3();
|
|
||||||
observer.unobserve(terminalOutput);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
observer.observe(terminalOutput);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Third -->
|
<!-- Third -->
|
||||||
|
|
||||||
|
|
@ -521,7 +371,7 @@ bun install v0.4.0 (a94bba63)<br>
|
||||||
<p>This is next-generation, cross-platform package management. With tea, you no longer have to install packages—just type the commands you need and tea does the rest. Enjoy seamless and flexible version control, with the full https://semver.org spec supported.</p>
|
<p>This is next-generation, cross-platform package management. With tea, you no longer have to install packages—just type the commands you need and tea does the rest. Enjoy seamless and flexible version control, with the full https://semver.org spec supported.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 xol-12 pb-xl-0 pb-lg-0 pb-md-5 pb-sm-5 pb-5 mt-xl-0 mt-lg-0 mt-md-5 mt-sm-5 mt-5">
|
<div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-3 mb-sm-3 mb-3">
|
||||||
<div class="feature-terminal" id="start-animation-4" style="cursor:pointer;">
|
<div class="feature-terminal" id="start-animation-4" style="cursor:pointer;">
|
||||||
<div class="terminal-bar black-bg flex-start p-1 ps-3">
|
<div class="terminal-bar black-bg flex-start p-1 ps-3">
|
||||||
<div class="traffic-light"></div>
|
<div class="traffic-light"></div>
|
||||||
|
|
@ -539,53 +389,7 @@ bun install v0.4.0 (a94bba63)<br>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
{{- partial "animation-3.html" . -}}
|
||||||
const commands4 = [
|
|
||||||
{ input: "tea https://github.com/teaxyz/demos/blob/main/hello-universe.sh<br><br>", output: `*** Interpreters ***<br><br>`},
|
|
||||||
{ input: "", output: `TypeScript: Hello, World!<br>`},
|
|
||||||
{ input: "", output: `Go: Hello, World!<br>`},
|
|
||||||
{ input: "", output: `JavaScript: Hello, World!<br>`},
|
|
||||||
{ input: "", output: `Perl: Hello, World!<br>`},
|
|
||||||
{ input: "", output: `Python: Hello, World!<br>`},
|
|
||||||
{ input: "", output: `Ruby: Hello World!<br>`},
|
|
||||||
{ input: "", output: `Lua: Hello, World!<br><br>`},
|
|
||||||
{ input: "", output: `*** Compilers ***<br><br>`},
|
|
||||||
{ input: "", output: `C: Hello, World!<br>`},
|
|
||||||
{ input: "", output: `Rust: Hello, World!<br>`},
|
|
||||||
];
|
|
||||||
|
|
||||||
let commandIndex4 = 0;
|
|
||||||
let command4 = commands4[commandIndex4];
|
|
||||||
let commandOutput4 = "";
|
|
||||||
|
|
||||||
function typeCommand4() {
|
|
||||||
if (commandIndex4 === commands4.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (command4.input.length === 0) {
|
|
||||||
commandOutput4 += '\n' + command4.output + '\n';
|
|
||||||
document.querySelector("#terminal-output-4").innerHTML = commandOutput4;
|
|
||||||
commandIndex4++;
|
|
||||||
command4 = commands4[commandIndex4];
|
|
||||||
setTimeout(typeCommand4, 1000);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
commandOutput4 += command4.input[0];
|
|
||||||
command4.input = command4.input.slice(1);
|
|
||||||
document.querySelector("#terminal-output-4").innerHTML = commandOutput4;
|
|
||||||
setTimeout(typeCommand4, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
const terminalOutput4 = document.querySelector("#terminal-output-4");
|
|
||||||
const observer4 = new IntersectionObserver((entries) => {
|
|
||||||
if (entries[0].isIntersecting) {
|
|
||||||
typeCommand4();
|
|
||||||
observer4.disconnect();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
observer4.observe(terminalOutput4);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
<hr>
|
<hr>
|
||||||
|
|
@ -662,12 +466,9 @@ bun install v0.4.0 (a94bba63)<br>
|
||||||
<div class="row one-box-up">
|
<div class="row one-box-up">
|
||||||
<div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12 mb-5">
|
<div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12 mb-5">
|
||||||
<div>
|
<div>
|
||||||
<div class="gs-content">
|
<div>
|
||||||
<h2 class="display-5">Getting started with tea!</h2>
|
<h2 class="display-5">Getting started with tea!</h2>
|
||||||
<p class="mb-5">Tea is a cross-platform binary that can be easily installed using a curl command or by using the one-liner installer. The installer sets up tea and its shell magic without requiring "sudo" or Xcode Command Line Tools, and is compatible with Linux, macOS, and WSL. Package managers such as brew or Docker can also be used for installation, or you can use GitHub Actions to install tea as part of your workflow.</p>
|
<p class="mb-5">Tea is a cross-platform binary that can be easily installed using a curl command or by using the one-liner installer. The installer sets up tea and its shell magic without requiring "sudo" or Xcode Command Line Tools, and is compatible with Linux, macOS, and WSL. Package managers such as brew or Docker can also be used for installation, or you can use GitHub Actions to install tea as part of your workflow.</p>
|
||||||
<a href="https://github.com/teaxyz/cli#getting-started" target="_blank">
|
|
||||||
<button class="hbtn hb-fill-right" id="hb-btn" style="text-transform:uppercase;"><i class="btn-icon icon-github"></i>VIEW README<span style="text-transform:lowercase;">.md</span></button>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -688,46 +489,6 @@ bun install v0.4.0 (a94bba63)<br>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
|
||||||
.term-getting-started{
|
|
||||||
}
|
|
||||||
.vertical-rule {
|
|
||||||
width: 2px;
|
|
||||||
height: 75px;
|
|
||||||
background-color: #00ffd0;
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
.circle{
|
|
||||||
width:12px;
|
|
||||||
border: 2px solid #00ffd0;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 30px;
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
.vertical-rule-gray {
|
|
||||||
width: 1px;
|
|
||||||
height: 35px;
|
|
||||||
background-color: #949494;
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
.circle-gray{
|
|
||||||
width:12px;
|
|
||||||
border: 1px solid #949494;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 30px;
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row two-boxes-down">
|
<div class="row two-boxes-down">
|
||||||
|
|
|
||||||
55
src/layouts/partials/animation-1.html
Normal file
55
src/layouts/partials/animation-1.html
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
<script>
|
||||||
|
const commands2 = [
|
||||||
|
{ input: "$ tea bun create next ./app<br>", output: `<span class="dark-gray">[package.json] Detected React - added "react-refresh"<br>
|
||||||
|
[package.json] Detected Next.js<br><br></span>` },
|
||||||
|
{ input: "", output: `<span class="dark-gray">$ bun install</span><br>
|
||||||
|
bun install v0.4.0 (a94bba63)<br>
|
||||||
|
🔍 Resolving [1/11]<br>
|
||||||
|
[99.00ms] git<br>
|
||||||
|
<span style="color:green">+</span> @types/react@18.0.27<br>
|
||||||
|
<span style="color:green">+</span> bun-framework-next@12.2.5<br>
|
||||||
|
<span style="color:green">+</span> react-refresh@0.10.0<br>
|
||||||
|
<span style="color:green">+</span> typescript@4.9.5<br>
|
||||||
|
<span style="color:green">+</span> next@12.2.3<br>
|
||||||
|
<span style="color:green">+</span> react@18.2.0<br>
|
||||||
|
<span style="color:green">+</span> react-dom@18.2.0<br>
|
||||||
|
<span style="color:green">+</span> react-is@18.2.0<br>
|
||||||
|
|
||||||
|
25 packages installed [704.00ms]<br>
|
||||||
|
|
||||||
|
[724.00ms] bun install<br><br>
|
||||||
|
|
||||||
|
` },
|
||||||
|
];
|
||||||
|
|
||||||
|
let commandIndex2 = 0;
|
||||||
|
let command2 = commands2[commandIndex2];
|
||||||
|
let commandOutput2 = "";
|
||||||
|
|
||||||
|
function typeCommand2() {
|
||||||
|
if (commandIndex2 === commands2.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (command2.input.length === 0) {
|
||||||
|
commandOutput2 += '\n' + command2.output + '\n';
|
||||||
|
document.querySelector("#terminal-output-2").innerHTML = commandOutput2;
|
||||||
|
commandIndex2++;
|
||||||
|
command2 = commands2[commandIndex2];
|
||||||
|
setTimeout(typeCommand2, 1000);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
commandOutput2 += command2.input[0];
|
||||||
|
command2.input = command2.input.slice(1);
|
||||||
|
document.querySelector("#terminal-output-2").innerHTML = commandOutput2;
|
||||||
|
setTimeout(typeCommand2, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
const observer2 = new IntersectionObserver((entries) => {
|
||||||
|
if (entries[0].isIntersecting) {
|
||||||
|
typeCommand2();
|
||||||
|
observer2.disconnect();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const target2 = document.querySelector("#terminal-output-2");
|
||||||
|
observer2.observe(target2);
|
||||||
|
</script>
|
||||||
55
src/layouts/partials/animation-2.html
Normal file
55
src/layouts/partials/animation-2.html
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
<script>
|
||||||
|
const commands3 = [
|
||||||
|
{ input: "$ node --version<br>", output: `v19.3.0<br><br>` },
|
||||||
|
{ input: "$ cat <<EOF >>my-project/README.md<br>", output: `# Dependencies<br>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Project</th>
|
||||||
|
<th>Version</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>nodejs.org</td>
|
||||||
|
<td>^18.4</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
EOF
|
||||||
|
<br><br>` },
|
||||||
|
{ input: "$ cd my-project<br>", output: `my-project<br><br>` },
|
||||||
|
{ input: "$ node --version<br>", output: `v18.13.0` },
|
||||||
|
];
|
||||||
|
|
||||||
|
let commandIndex3 = 0;
|
||||||
|
let command3 = commands3[commandIndex3];
|
||||||
|
let commandOutput3 = "";
|
||||||
|
|
||||||
|
function typeCommand3() {
|
||||||
|
if (commandIndex3 === commands3.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (command3.input.length === 0) {
|
||||||
|
commandOutput3 += '\n' + command3.output + '\n';
|
||||||
|
document.querySelector("#terminal-output-3").innerHTML = commandOutput3;
|
||||||
|
commandIndex3++;
|
||||||
|
command3 = commands3[commandIndex3];
|
||||||
|
setTimeout(typeCommand3, 1000);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
commandOutput3 += command3.input[0];
|
||||||
|
command3.input = command3.input.slice(1);
|
||||||
|
document.querySelector("#terminal-output-3").innerHTML = commandOutput3;
|
||||||
|
setTimeout(typeCommand3, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
const terminalOutput = document.querySelector("#terminal-output-3");
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
if (entries[0].isIntersecting) {
|
||||||
|
typeCommand3();
|
||||||
|
observer.unobserve(terminalOutput);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
observer.observe(terminalOutput);
|
||||||
|
</script>
|
||||||
46
src/layouts/partials/animation-3.html
Normal file
46
src/layouts/partials/animation-3.html
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
<script>
|
||||||
|
const commands4 = [
|
||||||
|
{ input: "tea https://github.com/teaxyz/demos/blob/main/hello-universe.sh<br><br>", output: `*** Interpreters ***<br><br>`},
|
||||||
|
{ input: "", output: `TypeScript: Hello, World!<br>`},
|
||||||
|
{ input: "", output: `Go: Hello, World!<br>`},
|
||||||
|
{ input: "", output: `JavaScript: Hello, World!<br>`},
|
||||||
|
{ input: "", output: `Perl: Hello, World!<br>`},
|
||||||
|
{ input: "", output: `Python: Hello, World!<br>`},
|
||||||
|
{ input: "", output: `Ruby: Hello World!<br>`},
|
||||||
|
{ input: "", output: `Lua: Hello, World!<br><br>`},
|
||||||
|
{ input: "", output: `*** Compilers ***<br><br>`},
|
||||||
|
{ input: "", output: `C: Hello, World!<br>`},
|
||||||
|
{ input: "", output: `Rust: Hello, World!<br>`},
|
||||||
|
];
|
||||||
|
|
||||||
|
let commandIndex4 = 0;
|
||||||
|
let command4 = commands4[commandIndex4];
|
||||||
|
let commandOutput4 = "";
|
||||||
|
|
||||||
|
function typeCommand4() {
|
||||||
|
if (commandIndex4 === commands4.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (command4.input.length === 0) {
|
||||||
|
commandOutput4 += '\n' + command4.output + '\n';
|
||||||
|
document.querySelector("#terminal-output-4").innerHTML = commandOutput4;
|
||||||
|
commandIndex4++;
|
||||||
|
command4 = commands4[commandIndex4];
|
||||||
|
setTimeout(typeCommand4, 1000);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
commandOutput4 += command4.input[0];
|
||||||
|
command4.input = command4.input.slice(1);
|
||||||
|
document.querySelector("#terminal-output-4").innerHTML = commandOutput4;
|
||||||
|
setTimeout(typeCommand4, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
const terminalOutput4 = document.querySelector("#terminal-output-4");
|
||||||
|
const observer4 = new IntersectionObserver((entries) => {
|
||||||
|
if (entries[0].isIntersecting) {
|
||||||
|
typeCommand4();
|
||||||
|
observer4.disconnect();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
observer4.observe(terminalOutput4);
|
||||||
|
</script>
|
||||||
Loading…
Reference in a new issue