Skip to content

Commit

Permalink
initial commit; basic page, 3 components used
Browse files Browse the repository at this point in the history
  • Loading branch information
blendtwenty committed Feb 8, 2024
1 parent 7b4f3b9 commit a0dd3f0
Show file tree
Hide file tree
Showing 6 changed files with 121 additions and 1 deletion.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -128,3 +128,5 @@ dist
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

*.DS_Store
6 changes: 5 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
# sourdoge
# Sourdoge

Purpose of this project is to demonstrate consumption of Doge Web Components.

We might bake some bread here some day.
61 changes: 61 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<head>
<title>Sourdoge</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="resources/prism.css">
</head>
<body>

<div class="page">

<header>
<h1>Sourdoge</h1>
<p>Demonstrating consumption of Doge Web Components. We might bake some bread here some day.</p>
<hr>
</header>

<section>
<h3>1. Add an image of a dog to your webpage (because ..why not)</h3>
<pre class="language-html">
<code>&lt;script type="module" src="https://fetch.dogecoin.org/doge-pal.js"&gt;&lt;/script&gt;
&lt;doge-pal&gt;&lt;/doge-pal&gt;</code>
</pre>

<script type="module" src="https://fetch.dogecoin.org/doge-pal.js"></script>
<doge-pal></doge-pal>
</section>

<section>
<h3>2. Display the current price of Dogecoin in a currency of your choice</h3>
<pre class="language-html">
<code>&#x3C;script type=&#x22;module&#x22; src=&#x22;https://fetch.dogecoin.org/doge-price.js&#x22;&#x3E;&#x3C;/script&#x3E;
&#x3C;doge-price currency=&#x22;usd&#x22;&#x3E;&#x3C;/doge-price&#x3E;</code>
</pre>

<script type="module" src="https://fetch.dogecoin.org/doge-price.js"></script>
<doge-price currency="usd"></doge-price>
</section>

<section>
<h3>3. Display a Dogecoin themed QR code</h3>
<pre class="language-html">
<code>&#x3C;script type=&#x22;module&#x22; src=&#x22;https://fetch.dogecoin.org/doge-qr.js&#x22;&#x3E;&#x3C;/script&#x3E;
&#x3C;doge-qr address=&#x22;D89DhnsgKncmN12RejxudfU8AwXp3946q1&#x22;&#x3E;&#x3C;/doge-qr&#x3E;</code>
</pre>

<script type="module" src="https://fetch.dogecoin.org/doge-qr.js"></script>
<doge-qr address="D89DhnsgKncmN12RejxudfU8AwXp3946q1"></doge-qr>

</section>

<script src="resources/prism.js"></script>
<script>
Prism.highlightAll();
</script>

</div>

</body>
</html>
3 changes: 3 additions & 0 deletions resources/prism.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions resources/prism.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

46 changes: 46 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
:root {
--doge-font: "Comic Sans MS", "Comic Sans", cursive;
}

html, body {
margin: 0;
padding: 1em;
font-family: sans-serif;
font-size: 1rem;
}

header {
margin-bottom: 5em;
}

header h1 {
font-family: var(--doge-font);
}

.page {
max-width: 700px;
margin: 2em auto;
text-align: left;
}

.code {
background: #fff;
padding: 20px;
white-space: pre-line;
font-size: .8rem;
}

section {
margin: 4em 0em;
padding: 2em;
border-radius: 20px;
background: #f7f7f8;
}

section h3 {
font-family: var(--doge-font);
}

.comic {
font-family: "Comic Sans MS", "Comic Sans", cursive;
}

0 comments on commit a0dd3f0

Please sign in to comment.