Skip to content

Commit

Permalink
adds basic doge coponents landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
blendtwenty committed Feb 28, 2024
1 parent 07fcae5 commit 06cf15a
Show file tree
Hide file tree
Showing 8 changed files with 169 additions and 113 deletions.
26 changes: 26 additions & 0 deletions build-docs.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
#!/bin/bash

# Find all component demo directories.
DEMO_DIRS=$(find src/components -type d -name "demo")

# Collect every component demo directory
# Copy it to /dist/<component>/demo
for demo_dir in $DEMO_DIRS
do
component_dirname=$(basename "$(dirname "$demo_dir")")
echo "DEMO Dir: $component_dirname"
mkdir -p "dist/$component_dirname"
cp -R "src/components/$component_dirname/demo/." "dist/$component_dirname/."

# Append component name to COMPONENTS_JSON
COMPONENTS_JSON+="\"$component_dirname\": {},"
done

# Remove trailing comma from COMPONENTS_JSON
COMPONENTS_JSON=${COMPONENTS_JSON%,}

# Create the final JSON object
COMPONENTS_JSON="{\"components\": {$COMPONENTS_JSON}}"

# Write the JSON object to manifest.json
echo "$COMPONENTS_JSON" > "dist/manifest.json"
15 changes: 4 additions & 11 deletions build.sh
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ mkdir -p dist
# Find all JavaScript files within src/components directory
JS_FILES=$(find src/components -type f -name "doge-*.js")
CSS_FILES=$(find src/components -type f -name "*initial.css")
DEMO_DIRS==$(find src/components -type d -name "demo")

# For each JS file, copy it to the root for convenient
# consumption from fetch.dogecoin.org/<component>.js
Expand All @@ -28,26 +27,20 @@ do
echo >> "dist/initial.css" #Adds line
done

# Collect every component demo directory
# Copy it to /dist/<component>/demo
for demo_dir in $DEMO_DIRS
do
component_dirname=$(basename "$(dirname "$demo_dir")")
echo "DEMO Dir: $component_dirname"
mkdir -p "dist/$component_dirname"
cp -R "src/components/$component_dirname/demo/." "dist/$component_dirname/."
done

# Write CNAME file
echo "fetch.dogecoin.org" > dist/CNAME
echo "fetch.dogecoin.org" > CNAME

# Copy the static files to the dist directory.
cp src/index.html dist/index.html
cp src/index.css dist/index.css
cp -R src/lib dist/lib
cp -R resources dist/
cp -R example dist/

# Write some version data
echo "Commit:$(git log -1 --pretty=format:%h)" >> dist/version.txt
echo "UTC:$(date -u)" >> dist/version.txt

# Run docs script.
./build-docs.sh
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"author": "",
"license": "ISC",
"scripts": {
"dev": "web-dev-server --open / --port 8080 --node-resolve --watch",
"dev": "web-dev-server --open /src/index.html --port 8080 --node-resolve --watch",
"serve": "web-dev-server --root-dir dist --port 9090 --node-resolve --watch --open /",
"test": "web-test-runner \"src/**/test.html\" --node-resolve --playwright --browsers firefox",
"test:watch": "web-test-runner src/**/test.html --node-resolve --watch",
Expand Down
93 changes: 0 additions & 93 deletions src/components/doge-qr/demo/demo.css
Original file line number Diff line number Diff line change
@@ -1,87 +1,3 @@
html { font-family: sans-serif }
* {
box-sizing: border-box;
}
h1, h2, h3, h4, h5 {
font-family: var(--doge-font-fancy);
}
.page {
width: 600px;
margin: 0px 0px;
padding: 20px;
}
header {
margin-bottom: 50px;
}

a.yellow {
color: #de9a1e;
}
a.yellow:hover {
color: #ffc107;
}

.mono {
font-family: monospace;
}

.small {
font-size: .8rem;
}

h1 {
margin-bottom: 20px;
}
.sans {
font-family: sans-serif;
}
.comic {
font-family: var(--doge-font-fancy);
}
p { line-height: 1.2 }
.soft {
color: #ccc;
}
section {
margin-bottom: 4em;
}
hr {
transform: rotateZ(0.5deg);
border-bottom: none;
border-top: 1px solid #333;
margin-top: 1em;
}
table {
border-collapse: collapse;
}
table tr {
border-bottom: 1px solid #ccc;
}
table tr th {
font-family: var(--doge-font-fancy);
font-size: 1.1rem;
padding: 1rem 1rem;
text-align: left;
}
table tr td {
padding: 1rem 1rem;
text-align: left;
}
code {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 0.9rem;
background-color: #f3f3f4;
}
code.nowrap {
white-space: nowrap;
}
table.props-list tr td:first-child code {
font-family: monospace;
background-color: #e6e6e7;
}

span.note {
display: block;
font-size: 1rem;
Expand Down Expand Up @@ -135,12 +51,3 @@ span.note {
#CodeContainer .code-toolbar:first-child {
display: block;
}

footer {
margin: 0 auto;
width: 100%;
position: fixed;
bottom: 0px;
padding: 10px 20px;
text-align: center;
}
2 changes: 2 additions & 0 deletions src/components/doge-qr/demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DogeWebComponents | doge-qr</title>

<link rel="stylesheet" href="../../../index.css" />
<link rel="stylesheet" href="demo.css" />
<link rel="stylesheet" href="../../../../resources/blocks/prism/prism.css" />
<script type="text/javascript" src="../../../../resources/blocks/prism/prism.js"></script>
Expand Down Expand Up @@ -48,6 +49,7 @@

<div class="page">
<header>
<a href="../">← Back</a>
<h1><span class="sans">&lt;doge-qr&gt; </span><span class="soft comic">web component</span></h1>
</header>

Expand Down
92 changes: 92 additions & 0 deletions src/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
html { font-family: sans-serif }
* {
box-sizing: border-box;
}
h1, h2, h3, h4, h5 {
font-family: var(--doge-font-fancy);
}
.page {
width: 600px;
margin: 0px 0px;
padding: 20px;
}
header {
margin-bottom: 50px;
}

a.yellow {
color: #de9a1e;
}
a.yellow:hover {
color: #ffc107;
}

.mono {
font-family: monospace;
}

.small {
font-size: .8rem;
}

h1 {
margin-bottom: 20px;
}
.sans {
font-family: sans-serif;
}
.comic {
font-family: var(--doge-font-fancy);
}
p { line-height: 1.2 }
.soft {
color: #ccc;
}
section {
margin-bottom: 4em;
}
hr {
transform: rotateZ(0.5deg);
border-bottom: none;
border-top: 1px solid #333;
margin-top: 1em;
}
table {
border-collapse: collapse;
}
table tr {
border-bottom: 1px solid #ccc;
}
table tr th {
font-family: var(--doge-font-fancy);
font-size: 1.1rem;
padding: 1rem 1rem;
text-align: left;
}
table tr td {
padding: 1rem 1rem;
text-align: left;
}
code {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 0.9rem;
background-color: #f3f3f4;
}
code.nowrap {
white-space: nowrap;
}
table.props-list tr td:first-child code {
font-family: monospace;
background-color: #e6e6e7;
}

footer {
margin: 0 auto;
width: 100%;
position: fixed;
bottom: 0px;
padding: 10px 20px;
text-align: center;
}
51 changes: 43 additions & 8 deletions src/index.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,45 @@
<html>
<head>
<title id="title">Doge Components</title>
</head>
<body>
<h1>Placeholder</h1>
<h3>Landing page for fetch.dogecoin.org</h3>
<p>The purpose of this static page is to introduce and promote the Doge Components and lead people to the docs for more info.</p>
</body>
<head>
<title id="title">Doge Components</title>
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="resources/css/doge-components.css" />
</head>
<body>

<div class="page">
<header>
<h1><span class="sans">&lt;doge&gt; </span><span class="soft comic">components</span></h1>
</header>

<section>
<h2>Purpose</h2>
<hr />
<p>Reusable web components for Doge things.</p>
</section>
<section>
<h2>Components</h2>
<hr />
<ul></ul>
</section>
<script>
fetch('manifest.json')
.then(response => response.json())
.then(data => {
const components = data.components;
const ul = document.querySelector('ul');

for (const component in components) {
const li = document.createElement('li');
const anchor = document.createElement('a');
anchor.href = component;
anchor.innerText = component;
li.appendChild(anchor);
ul.appendChild(li);
}
})
.catch(error => {
console.error(error);
});
</script>
</body>
</html>
1 change: 1 addition & 0 deletions src/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"components": {"doge-qr": {}}}

0 comments on commit 06cf15a

Please sign in to comment.